haoliangyu/ngx-leaflet-starter

Marker Rendering incorrectly

getusroidoug opened this issue · 2 comments

getusroidoug commented

When viewing the Demo App. I noticed that Clicking and adding a Marker caused the icon and Popup to be rendered a bit low and to the right from the spot that was clicked.

What is causing this? I didn't notice an intentional offset anyplace.

haoliangyu commented

Good catch.

The offset is likely introduced by the icon image of markers. It looks like the the clicked spot is exactly the upper left concern of the icon image.

Ownsmash commented

You should be able to fix this by adding the 'iconAnchor' attribute to the L.icon:

const newMarker = L.marker(e.latlng, {
    icon: L.icon({
      iconUrl: 'assets/marker-icon.png',
      shadowUrl: 'assets/marker-shadow.png',
      iconAnchor: [10, 42]
    })
  }).addTo(map);

This specifies the amount to offset the marker, since you can use custom markers with different sizes.

  • 👍1