1

I am trying to use L.Control.Search and L.markercluster to make a searchable cluster of ~4400 address points. I have tried two separate ways (based on examples I have found) but not yet been successful:

Attempt 1 loaded the address points twice, so the map is uselessly slow and illegible (full link)

    // load address points for address search
    $.getJSON("data/address_pts.geojson", function(data){
            var addressIcon = L.icon({
                iconUrl: "images/home.svg",
                iconSize: [60,50]
            });
            var addresses = L.geoJson(data,{
                    pointToLayer: function(feature,latlng){
                        var marker = L.marker(latlng,{icon:addressIcon});
                        marker.bindPopup(feature.properties.FULL_ADDRE);
                        return marker;
                    }
            });
            var clusters = L.markerClusterGroup();
            clusters.addLayer(addresses);
            map.addLayer(clusters);
    // add search
    map.addControl(new L.Control.Search({
            layer: addresses,
            textPlaceholder: 'Address...',
            propertyName: 'FULL_ADDRE'
        })
    );
    // end getJSON
    });

I wondered if this was some problem with $.getjson, so I tried L.geoJson.ajax extenstion as well:

var addresses = new L.GeoJSON.AJAX('data/address_pts.geoJson', {
      pointToLayer: function(feature, latlng) {
        return new L.CircleMarker(latlng, {radius: 6, fillOpactiy: 0.9});
        },
    });
    var addressCluster = new L.markerClusterGroup({
      disableClusteringAtZoom: 12
    }).addTo(map);
    address.on('data:loaded', function() {
      addressCluster.addLayer(addresses);
    });

    // feature search
    var search = new L.Control.Search({
      layer: addresses,
      initial: false,
      propertyName: 'FULL_ADDRE',
      circleLocation:false,
      collapsed:false,
      textPlaceholder:'Search Addresses',
      zoom:'12'});

    map.addControl(search);

This loads no data or points at all. I assume I was closer to the right track on Attempt #1, but I don't understand how to prevent duplicate loading of the address points.

  • In the second example you have error in geoJSON layer creation. It should be either var addresses = new L.GeoJSON.AJAX(... or var addresses = L.geoJson.ajax(... – TomazicM Feb 1 at 20:09
  • Changed but still no control or cluster group showing in the second example. – bagration Feb 1 at 20:54
0

In the first example:

   map.addControl(new L.Control.Search({
        layer: addresses,

Should have been

   map.addControl(new L.Control.Search({
        layer: clusters,
  • So is this solution to your problem? If it is, mark it as such. – TomazicM Feb 2 at 13:00
  • Well it did solve #1, but I am still curious as to why the second example isn't working – bagration Feb 4 at 17:11

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.