Markers change position when the map is zoomed

[Mat Smith]

Hi there,

I've just started using the mapping system so am pretty new to the API side of things... Although I'm making decent progress in most respects, I seem to have a bit of a weird issue going on.

Basically, I'm displaying a map of the UK and placing markers at specific co-ordinates (based on Latitude and Longitude returned from a database query.  Whilst this appears to be working fine, when the map is zoomed, the markers appear to shift, sometimes resulting in addresses being located in the sea.

Is this an issue anyone else has come across or is it just me?

Thanks in advance for any help you can offer,

Mat

[Paulo Vieira]

On Thu, Dec 13, 2012 at 2:11 PM, Mat Smith <eight.roun...@googlemail.com> wrote:

Basically, I'm displaying a map of the UK and placing markers at specific co-ordinates (based on Latitude and Longitude returned from a database query.  Whilst this appears to be working fine, when the map is zoomed, the markers appear to shift, sometimes resulting in addresses being located in the sea.

Is this an issue anyone else has come across or is it just me?

That's not normal at all. You should provide a jsfiddle showing the problem, or even a simple html file.

[Mat Smith]

I've done some investigation and the problem is still happening, although I've narrowed down the scope to some degree...

When using the standard markers, everything appears fine... However, use custom markers (which I just grabbed some freebie map images from some web-site) and the pin moves when the map is zoomed.

I'll try to sort out a jsFiddle example as soon as I can.

Mat

[Mat Smith]

Problem solved... When adding the custom marker, I also needed to specify the point where the marker was anchored to the map...

For future reference, it's something along the lines of:

var markerPos = new L.LatLng(value.latitude, value.longitude);

var pinAnchor = new L.Point(23, 47);

var pin = new L.Icon({ iconUrl: "Images/Map-Marker-Push-Pin-Right-Green.png", iconAnchor: pinAnchor });

L.marker(markerPos, { icon: pin }).addTo(map);

Cheers anyway,

Mat

[Aleix Martínez Suau]

Hi Mat,

Thanks for your solution, it works perfect!

Cheers,

Aleix

[John Davalos]

Sorry to bring this up, but I'm having this zoom issue when I use the Google map tiles. I was just wondering if anyone else has, and If they've found a way to fix the issue.  I'm trying to use custom icons with leaflet and the Google Map tiles, but every time i zoom the markers move before the map.

i'm creating a custom icon

var rsIcon = L.Icon.extend({

  options:{

    shadowUrl: "<%= asset_path('search/marker...@2x.png') %>",

    iconSize: [22,36],

    shadowSize: [22,36],

    iconAnchor:  [22, 36], // point of the icon which will correspond to marker's location

    shadowAnchor: [4, 42],

    popupAnchor:  [-3, -76]

  }

})

I'm creating the Map:

 map = L.map('map-display', {drawControl: true}).setView([lat, lng], 12);

    googleLayer = new L.Google('ROADMAP');

    map.addLayer(googleLayer);

I'm creating my markers and putting them in a LayerGroup:

marker = new MyCustomMarker([property.lat,property.lng],{icon: defaultMarker,title:property.property_id});

        marker.bindPopup(markerTemplate(property),{showOnMouseOver: true}) 

var addToMap = function(layers){

    if (map.hasLayer(propertyGroup)){

      removeMarkers()

    }    propertyGroup = new L.LayerGroup(layers)

    propertyGroup.addTo(map)

  }

This gives me leaflet with google tiles, and custom icons for my map. Every time i zoom the markers move, then the map moves.

I'd really appreciate a point in the right direction.

Thanks,

John

[Sylvio Ruiz]

Add this to your map when creating it:

scrollWheelZoom:'center'

This setting will avoid the marker moves when zoom with scrool.

[shyamli gujar]

Hi There,

I am also having issue with the zoom feature on google map.

I tried to use the above mentioned "markerPos" method and scrollWheelZoom:'center' method but it's not working. can you pls help me where I am going wrong. 

        var map = L.map('map').setView([16.59,54.41], 8);

        

var googleLayer = new L.Google('ROADMAP');

map.addLayer(googleLayer);

var markerPos = new L.LatLng(16.59,54.41);

var pinAnchor = new L.Point(16.59,54.41);

var pin = new L.Icon({ iconUrl: "../images/icons/icon.png", iconAnchor: pinAnchor,scrollWheelZoom:'center' });

L.marker(markerPos, { icon: pin }).addTo(map);

Appreciate your time.

Thanks

[Fernando Abreu]

THANK YOU MAT ^^

[Bazzle]

Nice one Matt,

I nearly had a heat attack when I saw all the positions on my map completely off!

[Kyle Pennell]

I found iconAnchor: [13, 27] was the key using angular-leaflet-directive

[Cody Gale, MAI, CCIM]

Any idea how to do this is using a url like http://thydzik.com/thydzikGoogleMap/markerlink.php?text=S&color=FCF356

Marker has incorrect placement when zooming out. Looks like same issue but I don't know how to anchor the url?

Thanks!

[Abhishek Jandial]

Hello,

      There are mainly 2 reason why the marker (mostly customized icons) on the map move its position when zoomed out. 

1. You are using setRotationAngle() / or using other options to rotate the marker.  (As when you rotate the icon, the rotation happens based on the original size of the icon
   
2. Or the IconAnchor is not set correctly 

Can anyone suggest any other way to rotate the icon on the map with moving its location on the map ?

Thank you ! 

[Abhishek Jandial]

Got the answer !!!

If you use  rotationAngle={90} to change the angle of the icon,  then based on your icon set RotationOrigin("center center") https://github.com/bbecquet/Leaflet.RotatedMarker

[John Muccigrosso]

On Wednesday, March 29, 2017 at 9:42:46 AM UTC-4, Abhishek Jandial wrote:

Got the answer !!!

If you use  rotationAngle={90} to change the angle of the icon,  then based on your icon set RotationOrigin("center center") https://github.com/bbecquet/Leaflet.RotatedMarker
 
On Wednesday, 29 March 2017 14:30:03 UTC+2, Abhishek Jandial wrote:

Hello,

      There are mainly 2 reason why the marker (mostly customized icons) on the map move its position when zoomed out. 

1. You are using setRotationAngle() / or using other options to rotate the marker.  (As when you rotate the icon, the rotation happens based on the original size of the icon
   
2. Or the IconAnchor is not set correctly 

BTW, I was getting bit on this because I had the anchor set incorrectly, with a comma between "center center", so I'd second the recommendation to make sure that's set correctly.