0
346
ViewsLeaflet - more different icons on the map
I am currently using this library for my project
https://github.com/codersgyan/leaflet-store-locator
I want to add different icons for categories, like here
I added it to JSON, but I can't display the icon
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [ xxxxx, xxxxxx]
},
"properties": {
"name": "xxx",
"city": "xxx",
"address": "xxx",
"icon": {
"iconUrl": "https icon url",
"iconSize": [55, 55],
"iconAnchor": [50, 50],
"popupAnchor": [-15, -50],
"className": "dot"
}
}
},
·
Juan Pablo Isaza
1 answers
Answer question0
There is a place in this code that needs to be changed: leaflet-store-locator
var myIcon = L.icon({
iconUrl: 'marker.png',
iconSize: [30, 40]
});
const shopsLayer = L.geoJSON(storeList, {
onEachFeature: onEachFeature,
pointToLayer: function(feature, latlng) {
return L.marker(latlng, { icon: myIcon });
}
});
Instead of a globally set marker, you need to add it to the pointToLayer function.
const shopsLayer = L.geoJSON(storeList, {
onEachFeature: onEachFeature,
pointToLayer: function(feature, latlng) {
// check what you have exactly in the 'feature'
// console.log(feature);
var myIcon = L.icon({
// I'm not sure of the path, that's why it's above console.log(feature);
iconUrl: feature.properties.icon.iconUrl,
iconSize: feature.properties.icon.iconSize,
// and here is the rest of the icon configuration
});
return L.marker(latlng, { icon: myIcon });
}
});
·
Juan Pablo Isaza
Report
Answer question