4

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 ?

Improve this question

1 Answer 1

Reset to default
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);    
});
Improve this answer
5
  • 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
    Commented Sep 10, 2015 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
    Commented Sep 10, 2015 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
    Commented Sep 10, 2015 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
    Commented Sep 10, 2015 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
    Commented Sep 14, 2015 at 2:22

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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