Suite

Activation du plugin de recherche avec JS Leaflet

Activation du plugin de recherche avec JS Leaflet


J'essaie d'ajouter le plugin suivant pour rechercher un fichier GeoJSON que j'ai ouvert dans Leaflet Javascript : http://labs.easyblog.it/maps/leaflet-search/examples/geojson-layer.html

J'ai apporté les fichiers de recherche js et css et je les ai appelés, je ne comprends tout simplement pas la syntaxe pour l'incorporer dans le script existant.

Voici le script qu'il doit pouvoir rechercher (le champ est Sheet_Numb) :

$.getJSON("Syriashape.json",function(data){ // ajoute une couche GeoJSON et des popups à la carte une fois le fichier chargé L.geoJson(data, { style: function (feature) { return {}; }, onEachFeature : fonction (fonctionnalité, calque) { layer.bindPopup(feature.properties.Sheet_Numb + "
" + " " + feature.properties.LOC_Catalo); } }).addTo(map); });

Je sais que je dois ajouter ce qui suit quelque part :

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) { //restaure la couleur de l'entité featuresLayer.resetStyle(layer); }); }); map.addControl( searchControl ); //initialisation du contrôle de recherche

Vous devez affecter votre couche L.geoJson à une variable nommée en dehors de la fonction getJSON afin d'y accéder via des contrôles. Tout d'abord, créez-le sans aucune donnée, avec les options que vous souhaitez appliquer aux fonctionnalités :

//créer une couche geoJson vide à remplir ultérieurement //les styles, les popups et d'autres options de couche peuvent être spécifiés ici var syriaLayer = L.geoJson(false, { style: function (feature) { return {}; }, onEachFeature: function ( feature, layer) { layer.bindPopup("Numéro de feuille : " + feature.properties.Sheet_Numb + "
" + " Enregistrement du catalogue : " + "" + feature.properties.LOC_Catalo + ""); } });

Ensuite, vous pouvez utiliserajouter des donnéespour le remplir avec les données de votre fichier :

$.getJSON("Syriashape.json", function (data) { // ajoute des données GeoJSON à la couche et ajoute à la carte une fois le fichier chargé syriaLayer.addData(data).addTo(map); });

Ensuite, comme vous avez défini syriaLayer, vous pouvez vous y référer (et Sheet_Numb) lorsque vous créez votre champ de recherche :

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

Voici un violon de travail qui recherche par état en utilisant les données de l'exemple auquel vous avez lié :

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