Activating Search Plugin with JS Leaflet

Question

I am attempting to add the following plugin to search a GeoJSON file I have open in Leaflet Javascript: http://labs.easyblog.it/maps/leaflet-search/examples/geojson-layer.html

I have brought in the search js and css files and called them, I just do not understand the syntax to incorporate it into the existing script.

Here is the script it needs to be able to search (the field is Sheet_Numb):

$.getJSON("Syriashape.json",function(data){
 // add GeoJSON layer and popups to the map once the file is loaded
 L.geoJson(data, {
 style: function (feature) {
 return {};
 },
 onEachFeature: function (feature, layer) {
 layer.bindPopup(feature.properties.Sheet_Numb + "</br>" + " " + feature.properties.LOC_Catalo);
 }
}).addTo(map);
 });

I know I have to add the following somewhere:

map.addLayer(featuresLayer);
var searchControl = new L.Control.Search({layer: featuresLayer, propertyName: 'name', circleLocation:false});
searchControl.on('search_locationfound', function(e) {
 e.layer.setStyle({fillColor: '#3f0', color: '#0f0'});
 if(e.layer._popup)
 e.layer.openPopup();
}).on('search_collapsed', function(e) {
 featuresLayer.eachLayer(function(layer) { //restore feature color
 featuresLayer.resetStyle(layer);
 }); 
});
map.addControl( searchControl ); //inizialize search control

Answer 1

You need to assign your L.geoJson layer to a named var outside the getJSON function in order to access it via controls. First, create it without any data, along with whatever options you want to apply to the features:

//create empty geoJson layer to be populated later
//styles, popups and other layer options can be specified here
var syriaLayer = L.geoJson(false, {
 style: function (feature) {
 return {};
 },
 onEachFeature: function (feature, layer) {
 layer.bindPopup("Sheet Number: " + feature.properties.Sheet_Numb + "</br>" 
 + "Catalog Record: " + "<a href = '" + feature.properties.LOC_Catalo + "'>" + feature.properties.LOC_Catalo + "</a>");
 }
});

Then you can use addData to populate it with the data from your file:

$.getJSON("Syriashape.json", function (data) {
 // add GeoJSON data to layer and add to the map once the file is loaded
 syriaLayer.addData(data).addTo(map);
});

Then, because you have defined syriaLayer, you can refer to it (and Sheet_Numb) when you create your search control:

var searchControl = new L.Control.Search({layer: syriaLayer, propertyName: 'Sheet_Numb', circleLocation:false});

Here is a working fiddle that searches by state using the data from the example you linked to:

http://fiddle.jshell.net/nathansnider/ma33L8hx/

• Map Man: It is trying to function, however it looks like there is a small kink. Any comments on this question? gis.stackexchange.com/questions/165693/…
• nathansnider: I think I may see the problem. Because syriaLayer is defined within the function for getJson, it is confined to that scope and cannot be accessed globally, so my answer was incorrect. The solution is (probably) to define syriaLayer outside of the getJSON call and use an onAdd function to apply the bindings and styles. I will update my answer with the appropriate code later today when I have time to look into it in more detail.
• nathansnider: OK; answer is now edited and includes an example fiddle.