リーフレットのポップアップにGeoJSONのプロパティを表示しますか？

9

これは私のシンプルなGeoJSONとLeafletマップです。プロパティをポップアップとして表示したいのですが、なぜそれが空なのかわかりません。

私の間違いを教えていただけますか？

<html>
<head>
<title>A Leaflet map!</title>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
<style>
#map {
width: 960px;
height: 500px;
}
</style>
</head>

<body>
<div id="map"></div>
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<script>
    var map = L.map('map',{
    center: [49.833352, 18.163662],
    zoom: 10
    });
    L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);

    var data ={
      "type": "FeatureCollection",
      "features": [
        {
          "type": "Feature",
          "geometry": {
            "type": "Point",
            "coordinates": [
              23.4850463378073,
              46.7440954850672
            ]
          },
          "properties": {
            "f1": 11793,
            "f2": "BT"
          }
        }
      ]
    };

var layer = L.geoJson(data, {
}).addTo(map);
layer.bindPopup('<h1>'+feature.properties.f1+'</h1><p>name: '+feature.properties.f2+'</p>');
</script>
</body>
</html>

— アレックス
ソース

18

ポップアップを作成してバインドする行onEachFeatureは、L.geoJSONファクトリのオプションに含まれている必要があります。

var layerGroup = L.geoJSON(data, {
  onEachFeature: function (feature, layer) {
    layer.bindPopup('<h1>'+feature.properties.f1+'</h1><p>name: '+feature.properties.f2+'</p>');
  }
}).addTo(map);

デモ：http : //playground-leaflet.rhcloud.com/wuseg/1/edit?html,output

この行をファクトリーの外にlayer置くと、外側のスコープ変数にアクセスできます。これは、実際にはGeoJSONデータのすべての機能を保持するGeoJSONレイヤーグループです。したがって、これらの機能のそれぞれにポップアップをバインドしようとします（この場合、マーカーは1つだけですが、それ以上の場合もあります）。

何よりも、feature変数を認識しないため、エラーが発生します。

— ギブス
ソース

3

プロパティのシンプルなポップアップコンテンツを、1行で簡単な方法で作成します。

var layer = L.geoJSON(data, {
 onEachFeature: function (f, l) {
   l.bindPopup('<pre>'+JSON.stringify(f.properties,null,' ').replace(/[\{\}"]/g,'')+'</pre>');
 }
}).addTo(map);

— stefcud
ソース

0

以下のコードを使用できます。

function onEachFeature(feature, layer) {
    // does this feature have a property named popupContent?
    if (feature.properties && feature.properties.Name && feature.properties.Lat && feature.properties.Lon) {
        layer.bindPopup(feature.properties.Name+"("+feature.properties.Lat+","+feature.properties.Lon+")",);
    }
}
/// for Show in map marker style and popup
    L.geoJSON(geojsonFeature, {
    pointToLayer: function (feature, latlng) {
        return L.circleMarker(latlng, geojsonMarkerOptions);
    }, 
    onEachFeature: onEachFeature

}).addTo(map);

— M.アブラルルバイヤットイスラム
ソース

この回答が質問として公開される理由：gis.stackexchange.com/questions/354704/…？

— TomazicM

私はこの部分を行いました。私の属性値はクリックベースで表示されています。しかし、今はこれをラベルとして使用したいと思います。これが私が質問した理由です。リーフレットでgeojsonデータのラベルを作成するのが難しいと感じています。

— M. Abrar Rubaiyat Islam