リーフレットマップのポリゴンにポップアップ情報ウィンドウを追加するのに役立つ必要があります

私は、さまざまなマイニングサイトの周りのバッファゾーンを示すリーフレットマップにポップアップウィンドウを追加しようとしています。私がバッファーゾーンポリゴンをクリックすると、私は鉱山の名前情報を取得したいと思います。ここに私のコードは、リーフレットマップのポリゴンにポップアップ情報ウィンドウを追加するのに役立つ必要があります

<html> 
<head> 
    <title>Buffer Zones around Mine</title> 
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css"/> 
    <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script> 
    <script src="https://code.jquery.com/jquery-2.2.0.min.js"></script> 
    <style> 
    #map{ height: 100% } 

    </style> 
</head> 
<body> 

    <div id="map"></div> 

    <script> 

    var map = L.map('map').setView([45, -95], 4); //center map view 


    var CartoDB_Positron = L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', { 
attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> &copy; <a href="http://cartodb.com/attributions">CartoDB</a>', 
subdomains: 'abcd', 
maxZoom: 19 
}).addTo(map); 

// load JSON data 
$.getJSON("BufferPolygons.json",function(data){ 
    // add GeoJSON layer to the map once the file is loaded 
    L.geoJson(data).addTo(map); 
    }); 

//get popup info 
var myLayer = L.geoJson(polygon, { 
onEachFeature: yourOnEachFeatureFunction 
}).addTo(map); 

function yourOnEachFeatureFunction(feature, layer){ 
if (feature.properties.mine_name) { 
    layer.bindPopup(feature.properties.mine_name); 
    } 
} 
    </script> 
</body> 
</html>

私はリーフレットとJavascriptの新機能です、どんな助けも大歓迎です！

編集：ポリゴンと非ポリゴンをスクロールするとカーソルが変わるので、マウスクリックで情報が取得されていると思います。何も表示されていないので、私はこれがHTML/CSSの問題であると仮定しています。おそらく、この情報が入るためのウィンドウを作成していないのでしょうか？

出典

2016-04-11 user2192778

表示されているポリゴンは、$.getJSONコールバック関数内で作成されたポリゴンです。 myLayerをコールバックの外側に定義すると、定義されていないpolygonオブジェクトが検索され、レイヤーとそのポップアップは決して作成されません。

これを解決する方法がいくつかあります。あなたは、例えば（他の場所でそのレイヤーを参照することができないかもしれない、このようにそれをやって、しかし

$.getJSON("BufferPolygons.json",function(data){ 
    L.geoJson(data, { 
    onEachFeature: yourOnEachFeatureFunction 
    }).addTo(map); 
});

：最も簡単な方法は、ちょうどあなたがコールバックの中に作成L.geoJsonためonEachFeatureオプションを設定することですレイヤーコントロールに追加したい場合）、BufferPolygons.jsonの読み込みが完了するまで作成されないためです。ほとんどの場合、より良いオプションは、あなたが好きなオプションを持つが、任意のデータなしmyLayerを作成し、コールバック関数の中で、この空の層を取り込むためにaddData methodを使用することです：

var myLayer = L.geoJson(false, { 
    onEachFeature: yourOnEachFeatureFunction 
}).addTo(map); 

$.getJSON("BufferPolygons.json",function(data){ 
    myLayer.addData(data); 
});

出典

2016-04-11 18:19:37 nathansnider

リーフレットマップのポリゴンにポップアップ情報ウィンドウを追加するのに役立つ必要があります

答えて

関連する問題