title: Leaflet markercluster division by filter layer control
body: <p>Based on this example:</p>
  
  <p><a href="http://www.gistechsolutions.com/leaflet/DEMO/filter/filter.html" rel="nofollow noreferrer">http://www.gistechsolutions.com/leaflet/DEMO/filter/filter.html</a></p>
  
  <p>I developed my own map, but there is the problem with marker clustering.</p>
  
  <p>I used this example to solve it:</p>
  
  <p><a href="https://stackoverflow.com/questions/38702679/leaflet-omnivore-clustering-markers-filtering-marker-cluster-group">Leaflet omnivore + clustering markers + filtering marker cluster group</a></p>
  
  <p>And now my code looks as follows:</p>
  
  <pre><code>     $.getJSON(url, function(data) {
  
        var clusters = L.markerClusterGroup();
       //Initial Setup  with layer Verified No
       var mdu = L.geoJson(data, {
  
         pointToLayer: function(feature, latlng) {
  
          return L.circleMarker(latlng, {
              color:'black',
              fillColor:  'black',
              fillOpacity: 1,
              radius: 8
          })
         },  
         onEachFeature: function (feature, layer) {
          layer._leaflet_id = feature.properties.Owner;
              var popupContent = "&lt;p&gt;&lt;h2&gt;" +
                  feature.properties.Owner + "&lt;/h2&gt;&lt;font color='red'&gt;&lt;h3&gt;Status:&lt;/font&gt; " +
                  feature.properties.Status + "&lt;/h3&gt;&lt;b&gt; NBU ID:&lt;/b&gt; " +
                  feature.properties.NBU + "&lt;/br&gt;&lt;b&gt; Ticket ID:&lt;/b&gt; " +
                  feature.properties.Ticket_ID + "&lt;/br&gt;&lt;b&gt; Address (street):&lt;/b&gt; " +
                  feature.properties.Address + "&lt;/br&gt;&lt;b&gt; Address (postcode):&lt;/b&gt; " +
                  feature.properties.Postcode + "&lt;/br&gt;&lt;b&gt; Asbestos report:&lt;/b&gt; " +
                  feature.properties.Asbestos_rep + "&lt;/br&gt;&lt;font color='blue'&gt;&lt;b&gt;Planner&lt;/b&gt;:&lt;/font&gt; " +
                  feature.properties.Planner + "&lt;/br&gt;&lt;font color='blue'&gt;&lt;b&gt;Surveyor&lt;/b&gt;:&lt;/font&gt; " +
                  feature.properties.Surveyor + "&lt;/br&gt;&lt;/h2&gt;&lt;b&gt;Units provisional:&lt;/b&gt; " +
                  feature.properties.Client_Home_Count + "&lt;/br&gt;&lt;/h2&gt;&lt;b&gt; Post survey units:&lt;/b&gt; " +
                  feature.properties.Post_Survey_Home_Count + "&lt;/br&gt; &lt;b&gt;STATS (applied):&lt;/b&gt; " +
                  feature.properties.STATS_Applied_for_date + "&lt;/br&gt; &lt;b&gt;STATS (completed):&lt;/b&gt; " +
                  feature.properties.STATS_compleeted + "&lt;/br&gt; &lt;b&gt;VM issue date:&lt;/b&gt; " +
                  feature.properties.Date_issued_from_VM + "&lt;/br&gt; &lt;b&gt;QC date:&lt;/b&gt; " +
                  feature.properties.ACTUAL_Internal_QC_Date + "&lt;/br&gt; &lt;b&gt;VM ECD date:&lt;/b&gt; " +
                  feature.properties.VM_ECD_date + "&lt;/br&gt;&lt;b&gt;General notes:&lt;/b&gt; " +
                  feature.properties.General_notes + "&lt;/br&gt;" +
                  '&lt;/br&gt;&lt;center&gt;&lt;a href="'+ feature.properties.Directory +'" target="_blank"&gt;Local directory&lt;/a&gt;&lt;/center&gt;&lt;/p&gt;' +
                  '&lt;center&gt;&lt;font color="red"&gt;&lt;a href="'+ feature.properties.Sharepoint +'" target="_blank"&gt;Sharepoint&lt;/a&gt;&lt;/font&gt;&lt;/center&gt;&lt;/p&gt;';                   
              if (feature.properties &amp;&amp; feature.properties.popupContent) {
                      popupContent += feature.properties.popupContent;
                  }
              layer.bindPopup(popupContent);
              layer.addTo(clusters);
      },
      filter: function(feature, layer) {   
           return (feature.properties.Type =="MDU");
      },
  
  }).addTo(map);  
  map.addLayer(clusters);
  
     //mdu.addData(data);
  
  
      /// END Initial Setup
  
  //Using a Layer Group to add/ remove data from the map.
  var myData =  L.layerGroup([]);
      myData.addLayer(mdu);
      myData.addTo(map); 
  
  
  //If Radio Button one is clicked.  
  document.getElementById("radioOne").addEventListener('click', function(event) {
  theExpression = 'feature.properties.Status == "Issued" ';
  console.log(theExpression); 
  
      myData.clearLayers();
      map.removeLayer(myData);
  
      mdu = L.geoJson(data, {
  
          pointToLayer: function(feature, latlng) {
  
              return L.circleMarker(latlng, {
                  color:'black',
                  fillColor:  'red',
                  fillOpacity: 1,
                  radius: 8
              })
          },  
          onEachFeature: function (feature, layer) {
              layer.bindPopup(feature.properties.Owner);
          },
          filter: function(feature, layer) {   
               return (feature.properties.Type =="MDU") &amp;&amp; (feature.properties.Status == "Issued" );
          },
  
      });
      map.addLayer(clusters);
      /*
      $.getJSON(url, function(data) {
             mdu.addData(data);
      });
      */
  
      myData.addLayer(mdu);
      myData.addTo(map);;
  });
  
  
  
         //If Radio button two is clicked.
         document.getElementById("radioTwo").addEventListener('click', function(event) {
         theExpression = 'feature.properties.Status == "Completed_and_invoiced" ';    
          console.log(theExpression);
      map.removeLayer(myData);
      myData.clearLayers();
  
      mdu = L.geoJson(null, {
  
          pointToLayer: function(feature, latlng) {
  
              return L.circleMarker(latlng, {
                  color:'black',
                  fillColor:  'green',
                  fillOpacity: 1,
                  radius: 8
              })
          },  
          onEachFeature: function (feature, layer) {
              layer.bindPopup(feature.properties.Owner);
          },
          filter: function(feature, layer) {   
               return(feature.properties.Type =="MDU")&amp;&amp;(feature.properties.Status == "Completed_and_invoiced" );
          },
  
      });
  
      $.getJSON(url, function(data) {
             mdu.addData(data);
      });
  
      myData.addLayer(mdu);
      myData.addTo(map);
  });
  
  //If Survey is clicked.
  document.getElementById("Survey").addEventListener('click', function(event) {
  theExpression = 'feature.properties.Status == "Survey_to_arrange" ';    
  console.log(theExpression);
      map.removeLayer(myData);
      myData.clearLayers();
  
      mdu = L.geoJson(null, {
  
          pointToLayer: function(feature, latlng) {
  
              return L.circleMarker(latlng, {
                  color:'black',
                  fillColor:  'yellow',
                  fillOpacity: 1,
                  radius: 8
              })
          },  
          onEachFeature: function (feature, layer) {
              layer.bindPopup(feature.properties.Owner);
          },
          filter: function(feature, layer) {   
               return(feature.properties.Type =="MDU")&amp;&amp;(feature.properties.Status == "Survey_to_arrange" );
          },
  
      });
  
      $.getJSON(url, function(data) {
             mdu.addData(data);
      });
  
      myData.addLayer(mdu);
      myData.addTo(map);
  });
  
  
       //If On-Hold is clicked.
       document.getElementById("On-hold").addEventListener('click', function(event) {
      //theExpression = 'feature.properties.Status == "Do_not_design" ';  
      //console.log(theExpression);
      map.removeLayer(myData);
      myData.clearLayers();
  
      mdu = L.geoJson(null, {
  
          pointToLayer: function(feature, latlng) {
  
              return L.circleMarker(latlng, {
                  color:'black',
                  fillColor:  'orange',
                  fillOpacity: 1,
                  radius: 8
              })
          },  
          onEachFeature: function (feature, layer) {
              layer.bindPopup(feature.properties.Owner);
          },
          filter: function(feature, layer) {   
               return(feature.properties.Type =="MDU")&amp;&amp;(feature.properties.Status == "Do_not_design" 
     );
          },
  
      });
  
      $.getJSON(url, function(data) {
             mdu.addData(data);
      });
  
      myData.addLayer(mdu);
      myData.addTo(map);
  });
  
  //If Upoloaded is clicked.
  document.getElementById("Uploaded").addEventListener('click', function(event) {
  //theExpression = 'feature.properties.Status == "Design_uploaded" ';    
  //console.log(theExpression);
      map.removeLayer(myData);
      myData.clearLayers();
  
      mdu = L.geoJson(null, {
  
          pointToLayer: function(feature, latlng) {
  
              return L.circleMarker(latlng, {
                  color:'black',
                  fillColor:  'purple',
                  fillOpacity: 1,
                  radius: 8
              })
          },  
          onEachFeature: function (feature, layer) {
              layer.bindPopup(feature.properties.Owner);
          },
          filter: function(feature, layer) {   
               return(feature.properties.Type =="MDU")&amp;&amp;(feature.properties.Status == 
       "Design_uploaded" );
          },
  
      });
  
      $.getJSON(url, function(data) {
             mdu.addData(data);
      });
  
      myData.addLayer(mdu);
      myData.addTo(map);
       });
  
      //If Inactive is clicked.
     document.getElementById("Inactive").addEventListener('click', function(event) {
  //theExpression = 'feature.properties.Status == "?" ';  
  //console.log(theExpression);
      map.removeLayer(myData);
      myData.clearLayers();
  
      mdu = L.geoJson(null, {
  
          pointToLayer: function(feature, latlng) {
  
              return L.circleMarker(latlng, {
                  color:'black',
                  fillColor:  'grey',
                  fillOpacity: 1,
                  radius: 8
              })
          },  
          onEachFeature: function (feature, layer) {
              layer.bindPopup(feature.properties.Owner);
          },
          filter: function(feature, layer) {   
               return(feature.properties.Type =="MDU")&amp;&amp;(feature.properties.Status == "?" );
          },
  
      });
  
      $.getJSON(url, function(data) {
             mdu.addData(data);
      });
  
      myData.addLayer(mdu);
      myData.addTo(map);
  });
  
  //If All is clicked.
  document.getElementById("All").addEventListener('click', function(event) {
  //theExpression = 'feature.properties.Type == "MDU" ';  
  //console.log(theExpression);
      map.removeLayer(myData);
      myData.clearLayers();
  
      mdu = L.geoJson(data, {
  
          pointToLayer: function(feature, latlng) {
  
              return L.circleMarker(latlng, {
                  color:'black',
                  fillColor:  'black',
                  fillOpacity: 1,
                  radius: 8
              })
          },  
          onEachFeature: function (feature, layer) {
              layer.bindPopup(feature.properties.Owner);
          },
          filter: function(feature, layer) {   
               return(feature.properties.Type =="MDU");
          },
  
      });
  
      /*
      $.getJSON(url, function(data) {
             mdu.addData(data);
      });
      */
  
      myData.addLayer(mdu);
      myData.addTo(map);
   });
  </code></pre>
  
  <p>Despite filter option the amount of marker remains the same. As it worst, the markers from different sublayers (switched off) are populated too.</p>
  
  <p>The console says:</p>
  
  <blockquote>
    <p>Uncaught TypeError: Cannot read property '_targets' of null
        at e.removeInteractiveTarget (leaflet.js:6)
        at e._removePath (leaflet.js:8)
        at e.onRemove (leaflet.js:7)
        at e.removeLayer (leaflet.js:6)
        at e.removeLayer (leaflet.js:7)
        at e.removeLayer (leaflet.js:7)
        at leaflet.markercluster.js:1
        at e._recursively (leaflet.markercluster.js:1)
        at e._recursivelyRemoveChildrenFromMap (leaflet.markercluster.js:1)
        at leaflet.markercluster.js:1</p>
  </blockquote>
  
  <p>Could you help me solve it? How can I divide the markercluster layer between the geoJSON layer filtered?</p>
  
  <p>Any help cordially appreciated.</p>
  
  <p><a href="https://i.stack.imgur.com/vxuKZ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vxuKZ.png" alt="enter image description here"></a></p>