CODEWITHSUNDEEP
javascriptleaflet
Danzo Sama
Danzo Sama

Reputation: 47

Icon marker not center. Leaflet js

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'});
}

Upvotes: 1

Views: 2996

Answers (1)

Falke Design
Falke Design

Reputation: 11338

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);

Upvotes: 3

Related Questions