Icona del foglio illustrativo con GeoJSON
Sono nuovo in Leaflet e sto provando a importare dati da un GeoJSON e a modificarli dall'icona predefinita.
Finora ho questo [ho accorciato il GeoJSON (meno voci) per brevità]:
<!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>
Quando rimuovo le linee relative alle icone ( var bible), la mappa e i popup funzionano, ma vengono visualizzati con l'icona a forma di puntina blu predefinita. Quando aggiungo var bible, la mappa non verrà visualizzata affatto.
var bible = L.Icon({
options: {
iconSize: [45,25],
iconAnchor: [22,45],
popupAnchor: [1, -24],
iconURL: 'big-yin.png'
});
return L.marker(latlng, {icon: bible});
Ho ragione nel pensare che queste righe siano il problema?
Stavo facendo progressi decenti, ma su questo ho sbattuto contro un muro. Nessuno dei tutorial online su questo è stato in grado di risolverlo.
Risposte
Quando si sviluppano pagine Web JS, la prima cosa che devi imparare è come utilizzare il debugger del browser (premi F12 nel browser). Se guardassi nella console del debugger del browser, vedresti che c'è un errore di sintassi nella definizione dell'icona.
Se guardi l'esempio di volantino ufficiale per le icone personalizzate su https://leafletjs.com/examples/custom-icons/, vedrai che il modo corretto di definire l'icona è:
var bible = L.Icon({
iconSize: [45,25],
iconAnchor: [22,45],
popupAnchor: [1, -24],
iconURL: 'big-yin.png'
});
Quando lo correggeresti, vedresti un nuovo errore di sintassi nella console del debugger a causa return L.marker(latlng, {icon: bible});dell'istruzione, che dovrebbe essere all'interno di una funzione, non standalone.
Se guardi l'esempio del foglio illustrativo ufficiale per GeoJSON laxer su https://leafletjs.com/examples/geojson/, vedrai che assegni un indicatore personalizzato ai punti del livello con l' pointToLayeropzione. Nel tuo caso questo sarebbe:
function createMarker(feature, latlng) {
return L.marker(latlng, {icon: bible});
}
L.geoJSON(geojson, {
poinToLayer: createMarker,
onEachFeature: createPopup
}).addTo(map);