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
أكثر...
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
أكثر...