1

Basing on this example:

http://www.gistechsolutions.com/leaflet/DEMO/sports/sports.html

I would like to do the same in my case, however, my way is slightly different:

Firstly I have made a major layer disabled, moving checkboxes to the sublayers:

enter image description here

although only 1 sublayer is visible.

My code looks as follows:

  var url = 'json/vm2.json';  // Here is the url path to my GeoJSON file, 


    function getColor(Type){   //layer 2 Virgin Media
    return Type == 'Infill' ? 'yellow' :
       Type == 'MDU' ? 'orange' :
                            'orange';
       }    
   function style(feature) {
    if (feature.properties.Type === "MDU" && 
   feature.properties.Post_Survey_Home_Count === "")
    return{
    fillColor: '#d4a270',
    fillOpacity: '#d4a270',
    weight: 0.5
    }
   if (feature.properties.Type === "Infill" && 
    feature.properties.Post_Survey_Home_Count === "")   
    return{
    fillColor: '#efefa9',
    fillOpacity: '#efefa9',
    weight: 0.5
    }
    else
return {
    fillColor: getColor(feature.properties.Type),
    fillOpacity: 1,
    weight: 2,
    opacity: 0.75,
    //color: '#ffffff',
    //dashArray: '3'
    };
   }


   var baseball;    

  // Get GeoJSON data and create features.
   $.getJSON(url, function(data) {

    baseball = L.geoJson(data, {

        pointToLayer: function(feature, latlng) {

            return L.circleMarker(latlng, {
            radius:6,
            opacity: .5,
            //color: "#000",
            color:getColor(feature.properties.Type),
            fillColor: getColor(feature.properties.Type),
            fillOpacity: 0.8

            }).bindTooltip(feature.properties.Owner);
        },
            onEachFeature: function (feature, layer) {
            },
            filter: function(feature, layer) {   
                return (feature.properties.Type == "Infill" );
            }
            }).addTo(map);  //Note turned on to start map with Data, Checkbox has checked property.
    });

  //2nd Layer in map
  var footballTeam; 

 // Get GeoJSON data and create features.
  $.getJSON(url, function(data2) {

    footballTeam = L.geoJson(data2, {

        pointToLayer: function(feature, latlng) {

            return L.circleMarker(latlng, {
            radius:6,
            opacity: .5,
            //color: "#000",
            color:getColor(feature.properties.Type),
            fillColor: getColor(feature.properties.Type),
            fillOpacity: 0.8

            }).bindTooltip(feature.properties.Owner);
        },
            onEachFeature: function (feature, layer) {
            },
            filter: function(feature, layer) {   
                return (feature.properties.Type == "MDU" );
            }
            });
    });

   // Handles the check boxes being turned on/off
   document.querySelector("input[name=infill]").addEventListener('change', 
  function() {
            if(this.checked) map.addLayer(baseball)
              else map.removeLayer(baseball)
                if (clickmark != undefined) {  //i.e. if it exists...
                //function all to remove the yellow select circle, could call function to clear table from here.
                    map.removeLayer(clickmark);
                };
            })

      document.querySelector("input[name=mdu]").addEventListener('change', 
      function() {
            if(this.checked) map.addLayer(footballTeam)
              else map.removeLayer(footballTeam)
                if (clickmark != undefined) {
                    map.removeLayer(clickmark);
                };
            })

I don't understand why only 1st layer is visible. How about another one? Both comes from url relating to the 1 GeoJSON file.

The console says:

Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'. at NewClass._updateContent (DivOverlay.js:173) at NewClass.update (DivOverlay.js:116) at NewClass.onAdd (DivOverlay.js:53) at NewClass.onAdd (Tooltip.js:71) at NewClass._layerAdd (Layer.js:110) at NewClass.whenReady (Map.js:1411) at NewClass.addLayer (Layer.js:172) at NewClass.openTooltip (Tooltip.js:221) at NewClass.openTooltip (Tooltip.js:340) at NewClass._openTooltip (Tooltip.js:406)

Blockquote

and consequently this:

Uncaught TypeError: Cannot read property 'addEventListener' of null at (index):261

Blockquote

At the end I would like to add my geoJSON sample:

    "type": "FeatureCollection",
    "features": [
    {
     "type": "Feature",
     "properties": {
    "Owner": 51429,
    "Type": "MDU",
    "Status": "Completed and invoiced",
    "Ticket_ID": "VM/TIK/858952",
    "NBU": 51429,
    "Address": "Sir James Knott House, Broadway West",
    "Postcode": "TS10 5AZ",
    "Date_issued_from_VM": "Wednesday, July 31, 2019",
    "Asbestos_rep": "POST 2000",
    "Planner": "Steve Levett",
    "Surveyor": "Mick",
    "STATS_Applied_for_date": "Wednesday, July 17, 2019",
    "STATS_compleeted": "Tuesday, September 10, 2019",
    "ACTUAL_Internal_QC_Date": "",
    "VM_ECD_date": "",
    "Client_Home_Count": 11,
    "Post_Survey_Home_Count": 11,
    "General_notes": "",
    "Directory": "file://Z:\\\\Fixed Line\\\\Design & Build\\\\2. 
    Clients\\\\Virgin Media\\\\2. VM MDU's\\\\2. NBUs\\\\NBU 51429 Sir James 
    Knott",
    "Sharepoint": ""
  },
  "geometry": {
    "type": "Point",
    "coordinates": [
      -1.09901,
      54.60697
    ]
    }
   },
this is with Infill type
and below with MDU type
      {
       "type": "Feature",
      "properties": {
    "Owner": 189154,
    "Type": "MDU",
    "Status": "Survey Date Arranged / STATS Applied",
    "Ticket_ID": "VM/TIK/831512",
    "NBU": 189154,
    "Address": "34-43 Sheppard Court, Chieveley Court",
    "Postcode": "RG31 5JF",
    "Date_issued_from_VM": "Tuesday, June 11, 2019",
    "Asbestos_rep": "POST 2000",
    "Planner": "CBJ",
    "Surveyor": "",
    "STATS_Applied_for_date": "Needed",
    "STATS_compleeted": "",
    "ACTUAL_Internal_QC_Date": "",
    "VM_ECD_date": "",
    "Client_Home_Count": 10,
    "Post_Survey_Home_Count": "",
    "General_notes": "nick.odonnell@firstport.co.uk",
    "Directory": "file://Z:\\\\Fixed Line\\\\Design & Build\\\\2. 
     Clients\\\\Virgin Media\\\\2. VM MDU's\\\\2. NBUs\\\\NBU 189154 Sheppard Court",
       "Sharepoint": ""
       },
      "geometry": {
       "type": "Point",
       "coordinates": [
        -1.04543,
        51.45649
       ]
     }
},
0

O gosh! Looks like I have done silly mistake, like in the query here:

Leaflet set the ImageOverlay switched off at the initial stage

where I should remove .addTo(map);

Now I should add it to the 2nd layer, in order to make this file running.

So the code for 2nd layer should look like this:

 $.getJSON(url, function(data2) {

footballTeam = L.geoJson(data2, {

    pointToLayer: function(feature, latlng) {

        return L.circleMarker(latlng, {
        radius:6,
        opacity: .5,
        //color: "#000",
        color:getColor(feature.properties.Type),
        fillColor: getColor(feature.properties.Type),
        fillOpacity: 0.8

        }).bindTooltip(feature.properties.Owner);
    },
        onEachFeature: function (feature, layer) {
        },
        filter: function(feature, layer) {   
            return (feature.properties.Type == "MDU" );
        }
        }).addTo(map);
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.