I am seeking advice/help on how to change the Leaflet default markers (blue markers) to a customs marker. I searched here at StackOverFlow and I found a couple of ways to do this but I can't seem to make any of them work. The closes I have gotten, I was able to add a new icon on my map but not able to change the default icons to my custom icon(s). I'm using leaflet omnivore because I enjoy working with csv files, so this method is a great fit for me. Also I'm a big D3 user and I'm trying to learn something new. Below is the code I'm using. However my ultimate goal is to replace the default blue markers with a mix of different markers/icons like I can achieve with D3 (icon file types like svg, png, jpg, or gif etc). I appreciate any help and thank you in advance.
omnivore.csv('data/pointData5.csv')
.on('ready', function(layer) {
/*Couldn't get this to work*/
var tankIcon = L.icon({
iconUrl: 'graphic/tank.png',
iconSize: [50,40]
});
L.geoJson(layer,{
pointToLayer: function(feature,latlng){
return L.marker(latlng,{icon: ratIcon});
}
}).addTo(map);
/*Only place one icon on the map and changing all the default markers*/
var markers = new L.LayerGroup();
var myIcon = L.icon({
iconUrl: 'graphic/tank.png',
iconSize: [20, 20],
iconAnchor: [22, 94],
popupAnchor: [-3, -76],
shadowSize: [68, 95],
shadowAnchor: [22, 94]
});
marker = L.marker([50.505, 30.57], {icon: myIcon}).bindPopup("Hi there").addTo(markers);
map.addLayer(markers);
/*This code works perfect - providing me what I was hoping for*/
this.eachLayer(function(marker) {
marker.bindPopup(marker.toGeoJSON().properties.imageTitle + ', ' + "<br />" + marker.toGeoJSON().properties.discrip + ', ' + "<br /><a class='fancybox-thumb' rel='fancybox-button' rel='fancybox-thumb' data-fancybox-group='gallery' href='graphic/" + marker.toGeoJSON().properties.popup +"'><img src='graphic/" + marker.toGeoJSON().properties.popup + "' style='width:100%' /></a>");
});
})
.addTo(map);
marker.feature.properties
instead of calling the methodmarker.toGeoJSON()
, which performs much more operations under the hood.