Leaflet: Custom icon Marker moves with zoom

[samuelchase]

Hi I am new to leaflet. I am trying to add a custom marker similar to the custom icon sample here: http://leaflet.cloudmade.com/examples/custom-icons.html

When I zoom out the markers move away from the actual point at which the marker is placed. Here is my code, very simple:
var map = L.map('map').setView([51.5, -0.09], 13);
L.tileLayer('http://{s}.tile.cloudmade.com/{key}/22677/256/{z}/{x}/{y}.png', {
attribution: 'Map data © 2011 OpenStreetMap contributors, Imagery © 2011 CloudMade',
key: 'BC9A493B41014CAABB98F0471D759707'
}).addTo(map);

    var icon = new L.Icon({iconUrl: 'map_pin.png'});

    L.marker([51.5, -0.09], {icon: icon}).bindPopup("I am a green leaf.").addTo(map);

though I have tried a number of other things. This was brought up in issue #371. The author said he fixed it but did not provide the fix. Please help

Thanks,
Sam

[mourner]

You need to also specify iconSize and iconAnchor, like in the tutorial.

[kpennell]

@mourner It would be very helpful if you elaborated a bit on this

[perliedman]

@kpennell have you checked out? http://leafletjs.com/examples/custom-icons.html

If you have further questions, please use the forum, the IRC channel or post a question to gis.stackexchange.com/stackoverflow. This place is for discussing bugs and new features for Leaflet.

[kpennell]

Ok thanks

On Wednesday, April 1, 2015, Per Liedman [email protected] wrote:

@kpennell https://github.com/kpennell have you checked out?
http://leafletjs.com/examples/custom-icons.html

If you have further questions, please use the forum
https://groups.google.com/forum/#!forum/leaflet-js, the IRC channel or
post a question to gis.stackexchange.com/stackoverflow. This place is for
discussing bugs and new features for Leaflet.

—
Reply to this email directly or view it on GitHub
https://github.com/Leaflet/Leaflet/issues/895#issuecomment-88434364.

[JohnHanks]

reopening the issue as the example code still has this bug :-1:

[IvanSanchez]

@JohnHanks example code at http://leafletjs.com/examples/custom-icons.html works just as expected.

[electronik54]

yup. even i have the same issue. no fix yet

here is how it looks

and my code

cssIcon1 = L.divIcon({
                        className: 'mapMarkerIco1',
                        iconAnchor: [10, 20],
                        iconSize: [20, 20]
                    });

AND

.mapMarkerIco1 {
    -ms-border-bottom-left-radius: 25px;
    border-bottom-left-radius: 25px;
    -ms-border-top-right-radius: 25px;
    border-top-right-radius: 25px;
    -ms-border-top-left-radius: 25px;
    border-top-left-radius: 25px;

    background: #009be5;
    background: rgba(0, 155, 229, 0.4);

    border: 3px solid #000000;
    border: 3px solid rgba(0, 0, 0, 0.55);

    -webkit-transition: ease-in-out 0.2s;
    -moz-transition: ease-in-out 0.2s;
    -ms-transition: ease-in-out 0.2s;
    -o-transition: ease-in-out 0.2s;
    transition: ease-in-out 0.2s;

    -webkit-box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.5);
    -ms-box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.5);
    box-shadow: 0 6px 10px 0 #000000;
    box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.5);
}

Followed this LINK . the issue was NOT completely solved. there is still some(very small) displacement (but increases as i zoom out), similar to the image in this comment

[perliedman]

@electronik54 it looks like you might be missing the option popupAnchor, have you looked at the custom icons tutorial?

If you believe this is really a bug in Leaflet, it would be great if you could provide a working example that illustrates the problem.

[ghybs]

Hi,

@electronik54 your image looks like the iconAnchor is set at [20, 10] (demo: http://jsfiddle.net/ve2huzxw/90/)

Given the shape of your icon, I guess you would rather like to have it set to its bottom right tip, therefore at [26, 26]. Note that you have to take your border width into account (twice 3px).

As suggested by @perliedman, if your image shows the marker popup, you might also need to adjust the popupAnchor.

If you need further help, you would probably get better support on Stack Overflow or GIS Stack Exchange.

Hope this helps.

[electronik54]

@perliedman
isn't popupAnchor for popup's placements??

ghybs was right.

the css border was causing the issue.
all of this calculations should have been included in the tutorial OR the leaflet should have calculated it internally with optional calculation for user.

anyways thanks :+1: ghybs :+1:

[jpavansharma]

We have a requirement of plotting a store marker and along with it few custom markers.
Store marker and other custom markers would be on singel unit/icon. We get 'svg' of all thes and concatenate them to text and rendering them. Though they are rendered properly, we are unable to center the icon to the given lat long point. On zoom/pan, icon is moving away from the bound lat long.

We have difficulty using div icon and faced few issues.
Hence we are using 'bindTooltip' for rendering the composite icon. We are using latest leaflet version (1.4.0). Please find sample html which can explain the issue.
Try to zoom in and see that the icon is not anchored to the lat long. Instead moving away from the location.

leaflet.zip

[cherniavskii]

@jpavansharma
If you believe there's Leaflet bug - please submit an issue and provide minimal example reproducing the issue.
If you need support - please use the following resources:

• https://stackoverflow.com/questions/tagged/leaflet
  
  
  
  • https://gis.stackexchange.com/questions/tagged/leaflet