Leaflet Search for GeoJSON creating duplicate, non-functional buttons

Question

I added a plugin for searching a GeoJSON file in leaflet, but now there are multiple search buttons and they do not recognize any input. I suspect that it is initializing for every single instance of a feature within the GeoJSON file. How do I change my script to only initialize once? (continued from this question: Activating Search Plugin with JS Leaflet enter image description here

 // load GeoJSON from an external file
$.getJSON("Syriashape.json", function (data) {
// add GeoJSON layer and popups to the map once the file is loaded
var syriaLayer = L.geoJson(data, {
 style: function (feature) {
 return {color: 'red', weight: '1pt'};
 },
 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>");
 //activate search button
 var searchControl = new L.Control.Search({layer: syriaLayer, propertyName: 'Sheet_Numb', circleLocation:false});
 searchControl.on('search_locationfound', function(e) {
 e.layer.setStyle({});
 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
 }
}).addTo(map);
});

• John Powell: Do you really mean to add a search control for every returned geoJSON feature?
• Map Man: In this case, there will only be one feature, so I just need a single search control for that one layer

Answer 1

To check if the onEachFeature-function is called more than one time you could use an alert:

...
onEachFeature: function (feature, layer) {
 alert(feature.id);
...

But in general I think there is no need to put the creation of the search control into the onEachFeature-Loop. Just put it at the end of the ajax callback function:

 // load GeoJSON from an external file
 $.getJSON("Syriashape.json", function(data) {
 // add GeoJSON layer and popups to the map once the file is loaded
 var syriaLayer = L.geoJson(data, {
 style: function(feature) {
 return {
 color: 'red',
 weight: '1pt'
 };
 },
 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>");
 }
 }).addTo(map);
 // When Layer is added...add Search Control ... activate search button
 var searchControl = new L.Control.Search({
 layer: syriaLayer,
 propertyName: 'Sheet_Numb',
 circleLocation: false
 });
 searchControl.on('search_locationfound', function(e) {
 e.layer.setStyle({});
 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
 });