Anzeigen von Informationen aus einem GeoJson in einem Popup (LEAFLET)

Question

Ich schreibe ein Programm für meine Firma, die Trails besitzt. Das Programm zeigt eine Webmap mit einer langen Spur (die alle Spuren verbindet) an, wie es sein sollte. Ich habe auch Marker auf jedem Trailhead durch Lesen von Koordinaten aus einem GeoJson Array angezeigt. Ich möchte ein Popup an jeden Marker binden, dass ATLEAST den Namen jedes Trailhead in den Popups anzeigt. Ich habe viele Dinge ausprobiert, aber nichts funktioniert. Ich werde jetzt meine aktuelle HTML-Datei und die GeoJson-Datei verknüpfen.

GeoJson TrailHeaders File

Index.Html

Answer 1

Sie müssen die GeoJSON() Funktionsoptionen ändern:

var trailheadsLayer = L.geoJson(trailheads, { 
    onEachFeature: function(feature, layer){ 
     console.log(feature.properties); 
     content = "Name: " + feature.properties.name + "<br>Abbreviation: " + feature.properties.abbreviati; 
     layer.bindPopup(content); 
    } 
}).addTo(map); 

Die content Zeichenfolge können Sie müssen mit den json Eigenschaften modifiziert werden. Seien Sie vorsichtig und formatieren Sie die Zeichenfolge als HTML-Element.

Sie können hier eine live version Ihrer Karte sehen.

PS. Hoffentlich ist es nicht zu spät für die Antwort.