Faltblattsymbol mit GeoJSON
Ich bin neu in Leaflet und versuche, Daten von einem GeoJSON einzubringen und vom Standardsymbol zu wechseln.
Bisher habe ich dies [ich habe den GeoJSON (weniger Einträge) der Kürze halber gekürzt]:
<!DOCTYPE html>
<html>
<head>
<title>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin=""/>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew==" crossorigin=""></script>
<style>
#map {position: absolute; top: 0; bottom: 0; left: 0; right: 0}
</style>
</header>
<body>
<div id = "map"></div>
<script>
var map = L.map('map').setView( [55.94919982336744, -3.18328857421875], 9);
L.tileLayer('https://nls.tileserver.com/nls/{z}/{x}/{y}.jpg', {
attribution: '<a href="http://maps.nls.uk/projects/api/">NLS Historic Maps API</a>'
}).addTo(map);
var geojson = {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {
"ministerLabel": "John Cranstoun",
"partLabel": "Presbytery of Edinburgh",
"PlaceLabel": "Edinburgh, Liberton Parish Church",
"EndYear": 1627,
"StartYear": 1624,
"Tenure": 3,
"AlmaLabel": "",
"DeathYear": 1629
},
"geometry": {
"type": "Point",
"coordinates": [
-3.16124,
55.9133
]
}
},
{
"type": "Feature",
"properties": {
"ministerLabel": "James Waugh",
"partLabel": "Presbytery of Edinburgh",
"PlaceLabel": "Kirknewton",
"EndYear": 1682,
"StartYear": 1673,
"Tenure": 9,
"AlmaLabel": "",
"DeathYear": 1691
},
"geometry": {
"type": "Point",
"coordinates": [
-3.419166666,
55.88777778
]
}
},
{
"type": "Feature",
"properties": {
"ministerLabel": "John Greig",
"partLabel": "Presbytery of Biggar",
"PlaceLabel": "Skirling",
"EndYear": 1662,
"StartYear": 1655,
"Tenure": 7,
"AlmaLabel": "",
"DeathYear": ""
},
"geometry": {
"type": "Point",
"coordinates": [
-3.46882,
55.63664
]
}
}
]
};
var bible = L.Icon({
options: {
iconSize: [45,25],
iconAnchor: [22,45],
popupAnchor: [1, -24],
iconURL: 'big-yin.png'
});
return L.marker(latlng, {icon: bible});
function createPopup(feature, layer) {
layer.bindPopup('<b>'+feature.properties.ministerLabel +'</b><br>'+ feature.properties.PlaceLabel +', '+feature.properties.partLabel +'<br>Education: '+feature.properties.AlmaLabel +'<br>Appointed: '+feature.properties.StartYear +'<br>End: '+feature.properties.EndYear +'<br>Death: '+feature.properties.DeathYear);
};
L.geoJSON(geojson, {
onEachFeature: createPopup
}).addTo(map);
</script>
</body>
</html>
Wenn ich die mit Symbolen ( var bible) verbundenen Linien entferne , funktionieren die Karte und die Popups, werden jedoch mit dem standardmäßigen blauen Stecknadelsymbol angezeigt. Wenn ich hinzufüge var bible, wird die Karte überhaupt nicht angezeigt.
var bible = L.Icon({
options: {
iconSize: [45,25],
iconAnchor: [22,45],
popupAnchor: [1, -24],
iconURL: 'big-yin.png'
});
return L.marker(latlng, {icon: bible});
Habe ich Recht, wenn ich denke, dass diese Zeilen das Problem sind?
Ich habe anständige Fortschritte gemacht, aber ich bin in diesem Fall gegen eine Wand gestoßen. Keines der Online-Tutorials zu diesem Thema konnte es lösen.
Antworten
Bei der Entwicklung von JS-Webseiten müssen Sie zunächst lernen, wie Sie den Browser-Debugger verwenden (drücken Sie im Browser F12). Wenn Sie in die Konsole des Browser-Debuggers schauen, sehen Sie, dass bei der Symboldefinition ein Synatxfehler vorliegt.
Wenn Sie sich das offizielle Beispiel für eine Broschüre ansehen, finden Sie benutzerdefinierte Symbole unter https://leafletjs.com/examples/custom-icons/Sie werden sehen, dass die korrekte Art der Definition des Symbols folgende ist:
var bible = L.Icon({
iconSize: [45,25],
iconAnchor: [22,45],
popupAnchor: [1, -24],
iconURL: 'big-yin.png'
});
Wenn Sie dies korrigieren würden, würden Sie einen neuen Syntaxfehler in der Debugger-Konsole aufgrund einer return L.marker(latlng, {icon: bible});Anweisung sehen, die innerhalb einer Funktion und nicht eigenständig sein sollte.
Wenn Sie sich das offizielle Beispiel für eine Broschüre für GeoJSON laxer unter ansehen https://leafletjs.com/examples/geojson/Sie werden sehen, dass Sie Ebenenpunkten mit pointToLayerOption benutzerdefinierte Markierungen zuweisen . In Ihrem Fall wäre dies:
function createMarker(feature, latlng) {
return L.marker(latlng, {icon: bible});
}
L.geoJSON(geojson, {
poinToLayer: createMarker,
onEachFeature: createPopup
}).addTo(map);