Hilfe zum Hinzufügen von Popup-Infofenstern zu Polygonen auf Leaflet-Map

Ich versuche, Popup-Fenster zu einer Leaflet-Map hinzuzufügen, die Pufferzonen um verschiedene Mining-Sites zeigt. Wenn ich auf ein Pufferzonenpolygon klicke, möchte ich die Minennamensinformationen erhalten. Hier ist mein Code,Hilfe zum Hinzufügen von Popup-Infofenstern zu Polygonen auf Leaflet-Map

<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>

Ich bin neu zu Leaflet und Javascript, jede Hilfe würde sehr geschätzt werden!

Bearbeiten: Mein Cursor ändert sich beim Scrollen über Polygone im Vergleich zu Nicht-Polygonen, so dass ich glaube, dass Informationen mit einem Mausklick abgerufen werden. Da nichts angezeigt wird, gehe ich davon aus, dass es sich um ein HTML/CSS-Problem handelt. Vielleicht habe ich kein Fenster für diese Informationen erstellt.

Quelle

2016-04-11 user2192778

Die angezeigten Polygone sind diejenigen, die in der Callback-Funktion $.getJSON erstellt wurden. Wenn Sie myLayer außerhalb des Rückrufs definieren, scheint es, nach einem polygon-Objekt zu suchen, das nicht definiert ist, sodass Layer und seine Popups nie erstellt werden.

Es gibt mehrere Möglichkeiten, dies zu lösen. Der einfachste Weg ist, einfach die onEachFeature Option setzen für die L.geoJson, die Sie innerhalb der Callback erstellen:

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

jedoch es auf diese Weise tun, Sie nicht in der Lage sein, können an anderer Stelle auf diese Ebene beziehen (zum Beispiel, wenn Sie es zu einem Layer-Steuerelement hinzufügen möchten), da es erst erstellt wird, wenn BufferPolygons.json das Laden beendet hat. Die bessere Option in den meisten Fällen ist myLayer mit dem, was Optionen erstellen Sie wollen, aber ohne Daten und verwenden Sie die addData method diese leere Ebene in der Callback-Funktion zu füllen:

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

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

Quelle

2016-04-11 18:19:37 nathansnider

Hilfe zum Hinzufügen von Popup-Infofenstern zu Polygonen auf Leaflet-Map

Antwort

Verwandte Themen