Icône de dépliant avec GeoJSON
Je suis nouveau sur Leaflet et j'essaie d'apporter des données à partir d'un GeoJSON et de changer d'icône par défaut.
Jusqu'à présent, j'ai ceci [j'ai raccourci le GeoJSON (moins d'entrées) par souci de concision]:
<!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>
Lorsque je supprime les lignes liées aux icônes ( var bible), la carte et les fenêtres contextuelles fonctionnent, mais apparaissent avec l'icône d'épingle bleue par défaut. Lorsque j'ajoute var bible, la carte ne s'affiche pas du tout.
var bible = L.Icon({
options: {
iconSize: [45,25],
iconAnchor: [22,45],
popupAnchor: [1, -24],
iconURL: 'big-yin.png'
});
return L.marker(latlng, {icon: bible});
Ai-je raison de penser que ces lignes sont le problème?
Je faisais des progrès décents, mais j'ai heurté un peu un mur sur celui-ci. Aucun des didacticiels en ligne à ce sujet n'a été en mesure de le résoudre.
Réponses
Lors du développement de pages Web JS, la première chose que vous devez apprendre est comment utiliser le débogueur de navigateur (appuyez sur F12 dans le navigateur). Si vous regardez dans la console du débogueur de navigateur, vous verrez qu'il y a une erreur de synatx dans la définition de l'icône.
Si vous regardez l'exemple de dépliant officiel pour les icônes personnalisées à https://leafletjs.com/examples/custom-icons/, vous verrez que la manière correcte de définir l'icône est:
var bible = L.Icon({
iconSize: [45,25],
iconAnchor: [22,45],
popupAnchor: [1, -24],
iconURL: 'big-yin.png'
});
Lorsque vous corrigeriez cela, vous verriez une nouvelle erreur de syntaxe dans la console du débogueur à cause de l' return L.marker(latlng, {icon: bible});instruction, qui devrait être dans une fonction, pas autonome.
Si vous regardez l'exemple de dépliant officiel pour GeoJSON laxer à https://leafletjs.com/examples/geojson/, vous verrez que vous attribuez un marqueur personnalisé aux points de calque avec pointToLayeroption. Dans votre cas, ce serait:
function createMarker(feature, latlng) {
return L.marker(latlng, {icon: bible});
}
L.geoJSON(geojson, {
poinToLayer: createMarker,
onEachFeature: createPopup
}).addTo(map);