Icon marker not center. Leaflet js

Question

how to make a marker icon centered. When created, it moves away from clicked place and when tooltip is displayed too Screenshot

My code:

L.geoJSON(data,{
          pointToLayer: pointToLayer,
          //...
})

function pointToLayer(feature, latlng) {
    return L.marker(latlng, {icon: leafletIcon(feature)});
}
function leafletIcon(feature){
   if(condition)
     return L.icon({iconUrl: 'images/***.png'});
   else if(condition)
     return L.icon({iconUrl: 'images/***.png'});
}
 

Answer 1

Look into the tutorial you need to define the iconAnchor

How to find out, the correct anchor:

Create a default marker on latlng and one with the custom icon with the same latlng. Then you see in which direction the custom icon needs to be moved, because the default marker is centered correct on the latlng.

var defaultMarker = L.marker([0,0]).addTo(map);
var customMarker  = L.marker([0,0],{icon: L.icon({iconUrl: 'images/***.png', iconAnchor: [-3,9], popupAnchor: [0,0], tooltipAnchor: [0,0]}) }).addTo(map);