I have a problem at changing the icons of my geoJSON data on my Leaflet map.
I’m loading my data from external geoJSON files. Therefore I’m using a XMLHttpRequest()
to open the files (filenames are stored in an array orteDB
) and then add them to my layer orte
where it’s then added to the map:
for (var i = 0; i < orteDB.length; i++) {
let xhr = new XMLHttpRequest();
xhr.open('GET', 'files/geoJSONfiles/orte/' + orteDB[i]);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.responseType = 'json';
xhr.onload = function () {
if (xhr.status !== 200) return
L.geoJSON(xhr.response).addTo(orte).on('click', onClick);
};
xhr.send();
}
orte = L.geoJson(orte).addTo(map);
I already managed to change the default icon with the help of this example https://gist.github.com/geog4046instructor/80ee78db60862ede74eacba220809b64. But what I actually want is the icon to change dynamically after the click of a button or the marker itself to this redIcon
:
var redIcon = L.Icon.extend({
iconUrl: 'files/marker-icon_red.png',
iconSize: [25, 41],
iconAnchor: [12, 40],
});
I also tried working with the pointToLayer()
function but it didn’t work for me.
Each geoJSON point has a unique ID which I can call via e.layer.feature.properties.id
. So in the end I’d like to change the marker icon individually by using it’s unique ID.
My geoGSON files look like this:
{
"type": "FeatureCollection",
"name": "02_Roncesvalles",
"features": [
{
"type": "Feature",
"properties":
{
"id": 2 },
"geometry":
{
"type":"Point",
"coordinates": [
-1.320700314538876,
43.009378247303687 ]
}
}
]
}
Thank you very much for your help!
You can change the icon of a marker with
marker.setIcon(icon)
and you need to loop through all layers and find the correct one over the id.I use
map.eachLayer
instead oforte.eachLayer()
because the GeoJSON Group can also contains LayerGroups.