リーフレットマップ、ボタン付きgeojsonファイルの特定のデータを取得

Question

私の地図上に、ボタンを使用してgeojsonファイルの特定の値（data.geojson）を表示することを試行しています。 （ドメイン "値"のみの地図を描く例： "暴力"）

マップ上のボタンで自分のデータ（「ドメイン」「暴力」など）を頼りにしているのですか？

お時間をいただきありがとうございます。 私のJS：あなたのカテゴリをON/OFFトグル用として

<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

、あなたはリーフレット層がL.control.layersを制御し使用することができます。

カテゴリ（あなたのケースでは「ドメーヌ」）によって、あなたの機能をグループ化するためとして、私は私のコメントにリンクポストを参照してください。Leaflet: How to toggle GeoJSON feature properties from a single collection?

をあなたは少しでも直接レイヤグループ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