1

I'm trying to use the leaflet-search plugin to search for a specific geojson property (i.e. 'Name'). The trick part of this is I want to perform a search on a Geojson file thats loaded in via the FileLayerLoad plugin for leaflet.

So far my code is:

 var map = L.map('map').setView([43.7001100, -79.4163000], 17);
    mapLink = '<a href="http://openstreetmap.org">OpenStreetMap</a>';
    mapquestLink = '<a href="http://www.mapquest.com//">MapQuest</a>';
    mapquestPic = '<img src="http://developer.mapquest.com/content/osm/mq_logo.png">';

    //Main map layer:
    L.tileLayer(
        'http://otile{s}.mqcdn.com/tiles/1.0.0/map/{z}/{x}/{y}.png', {
        attribution: '&copy; '+mapLink+'. Tiles courtesy of '+mapquestLink+mapquestPic,
        maxZoom: 18,
        subdomains: '1234',
        }).addTo(map);  


    var style = {color: "green", opacity: 1.0, fillOpacity: .5, weight: 2, clickable: true ,smoothFactor:10,noClip:true,lineCap:"round"};
    L.Control.FileLayerLoad.LABEL = '<i class="fa fa-folder-open"></i>';

    //Loads external geojson file:
     var control = new L.Control.fileLayerLoad({
        fileSizeLimit: 5000,
        fitBounds: true, //MOVE THE CENTER OF THE SCREEN
        layerOptions: {style: style, 
        onEachFeature: function(feature, layer) {
            layer.bindPopup( "Name: " + feature.properties.Name );
        }
        }
    }).addTo(map);

    //Search within specified layer:
    map.addControl(L.control.search({layer: control, propertyName: 'Name', circleLocation:true}));  

The problem in the above code is in the L.control.search({layer:control... line, it calls the 'control' variable, which interprets this as a new fileLayerLoad call. I'm wondering how do I search within the layer thats already loaded ?

1

Add the search control in the data:loaded callback instead.

Also, it looks like you forgot to new the search control itself. See docs for leaflet-search

Try this:

control.loader.on('data:loaded', function (e) {
  // Remove old control, if any
  if (window.searchControl)
  {
    map.removeControl(window.searchControl);
  }

  // Add search gadget for this layer      
  window.searchControl= new L.control.search({
    layer: e.layer, 
    propertyName: 'Name', 
    circleLocation:true});

  map.addControl(window.searchControl);    
});
  • Tried that, it still gives me the same problem. The problem basically is when you click on the search icon in the map window, it tries to load a file just the same as if it was the 'fileLayerLoad' icon. That's why I'm think that its interpreting it as a new fileLayerLoad call. – pnear Sep 10 '15 at 19:58
  • What if you try loading the search control in the data:loaded callback for the file layer control instead then? (See updated answer) – nothingisnecessary Sep 10 '15 at 20:32
  • Yep, that allows me to search for the feature name when loading a file. Just another question, since the callback fires every time you load a file, it creates a new search bar every time. Is there a way to only have one search bar regardless of how many file you load ? Maybe a line like control.loader.off or something ? – pnear Sep 10 '15 at 21:56
  • Yeah if you save a reference to the control you can remove it before re-adding it. See updated example (but I didn't test it out so consider it as sorta psuedocode) – nothingisnecessary Sep 10 '15 at 22:27
  • Glad to help! Please mark the answer as accepted if it worked for you, so that others can see this for future reference.. thanks – nothingisnecessary Sep 14 '15 at 2:22

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.