карта листовки, получение конкретных данных файла geojson с помощью кнопки

Question

Я собираюсь отобразить на моей карте определенное значение (data.geojson) моего файла geojson с кнопками. (например, для построения карты с единственным значением «domaine»: «violences»)

Я пытаюсь найти способ привязать свои данные («domaine»: «violences» или другие) с помощью кнопок на моей карте?

Большое спасибо за ваше время. мои ЯШИ:

<script type="text/javascript"> 
 
var map = L.map('map'); 
 
var terrainTiles = L.tileLayer('http://stamen-tiles-{s}.a.ssl.fastly.net/toner-lite/{z}/{x}/{y}.{ext}', { 
 
    attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> &mdash; Map data &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>', 
 
    subdomains: 'abcd', 
 
    minZoom: 0, 
 
    maxZoom: 20, 
 
    ext: 'png' 
 
}); 
 

 

 

 
terrainTiles.addTo(map); 
 
map.setView([46.5160000, 6.6328200], 10); 
 

 

 

 

 
L.control.locate(location).addTo(map); 
 

 
function addDataToMap(data, map) { 
 
    var dataLayer = L.geoJson(data, { 
 
     onEachFeature: function(feature, layer) { 
 
      var popupText = "<b>" + feature.properties.nom 
 
       + "<br>" 
 

 
       + "<small>" + feature.properties.localite 
 
       + "<br>Rue: " + feature.properties.rue + + feature.properties.num 
 
       + "<br>Téléphone: " + feature.properties.tel 
 

 
       + "<br><a href= '" + feature.properties.url + "'>Internet</a>"; 
 
      layer.bindPopup(popupText); } 
 
     }); 
 
    dataLayer.addTo(map); 
 
} 
 

 
$.getJSON("data.geojson", function(data) { addDataToMap(data, map); }); 
 

 
</script> 
 
</body> 
 
</html>

data.geojson

{ 
"type": "FeatureCollection", 
"features": [ 
{ 
"type": "Feature", 
"geometry": { 
    "type": "Point", 
    "coordinates": [ 6.1200622,46.2106091 ] 
}, 
"properties": { 
    "nom":"Centre d'entraînement aux méthodes d'éducation active - Genève", 
    "rue":"Route des Franchises", 
    "num":"11", 
    "npa":1203, 
    "localite":"Genève", 
    "canton":"GE", 
    "tel":"022 940 17 57", 
    "url":"www.formation-cemea.ch", 
    "domaine":"formation " 
} 
    }, 

    { 
"type": "Feature", 
"geometry": { 
    "type": "Point", 
    "coordinates": [ 6.1243056,46.2120426 ] 
    }, 
"properties": { 
    "nom":"VIRES", 
    "rue":"Rue Ernest-Pictet ", 
    "num":"10", 
    "npa":1203, 
    "localite":"Genève", 
    "canton":"GE", 
    "tel":"022 328 44 33", 
    "url":"www.vires.ch", 
    "domaine":"violences " 
    } 
} 

Answer 1

Как для переключения ON/OFF ваших категорий, вы можете использовать листовку правляет L.control.layers.

Как группировать свои функции по категориям («Domaine» в вашем случае), см поста я связан в моем комментарии: Leaflet: How to toggle GeoJSON feature properties from a single collection?

Можно даже немного упростить его непосредственно с помощью Layer группы L.layerGroup вместо использования промежуточного массивы.

var categories = {}, 
    category; 

var layersControl = L.control.layers(null, null).addTo(map); 

function addDataToMap(data, map) { 
    L.geoJson(data, { 
    onEachFeature: function(feature, layer) { 
     category = feature.properties.domaine; 
     // Initialize the category layer group if not already set. 
     if (typeof categories[category] === "undefined") { 
     categories[category] = L.layerGroup().addTo(map); 
     layersControl.addOverlay(categories[category], category); 
     } 
     categories[category].addLayer(layer); 
    } 
    }); 
    //dataLayer.addTo(map); // no longer add the GeoJSON layer group to the map. 
} 

$.getJSON("data.geojson", function(data) { 
    addDataToMap(data, map); 
}); 

Демо: https://plnkr.co/edit/H6E6q0vKwb3RPOZBWs27?p=preview