Geographic Information Systems Asked on October 22, 2020
I’m new to Leaflet and I’m trying bring in data from a GeoJSON and change from the default icon.
So far I have this [I shortened the GeoJSON (less entries) for brevity]:
<!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>
When I remove the lines related to icons (var bible), the map and popups work, but appear with the default blue pin icon. When I add var bible in, the map won’t show at all.
var bible = L.Icon({
options: {
iconSize: [45,25],
iconAnchor: [22,45],
popupAnchor: [1, -24],
iconURL: 'big-yin.png'
});
return L.marker(latlng, {icon: bible});
Am I right in thinking these lines are the problem?
I was making decent progress, but I’ve hit a bit of a wall on this one. None of the online tutorials on this have been able to solve it.
When developing JS web pages, the first thing you have to learn is how to use browser debugger (press F12 in browser). If you would look in the console of browser debugger, you would see there is an synatx error in icon definition.
If you look at the official Leaflet example for custom icons at https://leafletjs.com/examples/custom-icons/, you'll see that correct way of defining icon is:
var bible = L.Icon({
iconSize: [45,25],
iconAnchor: [22,45],
popupAnchor: [1, -24],
iconURL: 'big-yin.png'
});
When you would correct that, you would see new syntax error in debugger console because of return L.marker(latlng, {icon: bible}); statement, which should be within some function, not standalone.
If you look at the official Leaflet example for GeoJSON laxer at https://leafletjs.com/examples/geojson/, you'll see that you assign custom marker to layer points with pointToLayer option. In your case this would be:
function createMarker(feature, latlng) {
return L.marker(latlng, {icon: bible});
}
L.geoJSON(geojson, {
poinToLayer: createMarker,
onEachFeature: createPopup
}).addTo(map);
Correct answer by TomazicM on October 22, 2020
Get help from others!
Recent Answers
Recent Questions
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP