CODEWITHSUNDEEP
javascripthtmlcssleaflet
larry chambers
larry chambers

Reputation: 513

Custom leaflet divIcon not staying in fixed marker position when zoomed

I have made a custom marker for use with leaflet maps, it seems to work fine but when I zoom in and out of the map it changes position drastically and I would like it to stay where it should with the point on the position. I have checked and tried changing anchor points and position but it just seems to make it worse so I will show you what I have and hopefully someone can point me in the right direction.

I have made a JSFIDDLE here : http://jsfiddle.net/qpt02Luy/1/

and the html is :

<div id="map"></div>

and the CSS is :

body { padding: 0; margin: 0; } html, body, #map { z-index : 1; height: 100vh; width: 100vw; }
.location-pin {
  display: inline-block;
  position: relative;
  top: 50%;
  left: 50%;
}
.location-pin img {
  width: 46px;
  height: 46px;
  margin: -26px 0 0 -13px;
  z-index: 10;
  position: absolute;
  border-radius: 50%;

  background: #32383e;
}
.pin {
  width: 50px;
  height: 50px;
  border-radius: 50% 50% 50% 0;
  background: #32383e;
  position: absolute;
  transform: rotate(-45deg);
  left: 50%;
  top: 50%;
  margin: -43px 0 0 -30px;

}
.pin:after {
  content: '';
  width: 26px;
  height: 26px;
  margin: 2px 0 0 2px;
  position: absolute;
  border-radius: 50%;

}

The JS : 

var zoom = 10;
var osmUrl='https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
var osmAttrib='Map data © <a href="http://osm.org/copyright">OpenStreetMap</a> contributors';
var osm = new L.TileLayer(osmUrl, {
    attribution: osmAttrib,
    detectRetina: true
});

// please replace this with your own mapbox token!
var token = 'pk.eyJ1IjoidGhlZGlnZ2xlcnVrIiwiYSI6ImNqcG9uZHM3eDAxcDk0Mm4wcjdsYXJ4YXoifQ.1WVGvW9ESiMWfk3F6g3UIA';
var mapboxUrl = 'https://api.mapbox.com/styles/v1/mapbox/streets-v10/tiles/{z}/{x}/{y}@2x?access_token=' + token;
var mapboxAttrib = 'Map data © <a href="http://osm.org/copyright">OpenStreetMap</a> contributors. Tiles from <a href="https://www.mapbox.com">Mapbox</a>.';
var mapbox = new L.TileLayer(mapboxUrl, {
  attribution: mapboxAttrib,
  tileSize: 512,
  zoomOffset: -1
});

window.map = new L.Map('map', {
    layers: [mapbox],
    minZoom: 2,
    maxZoom: 18,
    center: [51.505, -0.09],
    zoom: 10,
    zoomControl: false

});

var myIcon = L.divIcon({
    className: 'location-pin',
    html: '<img src="https://www.faces2places.co.uk/img/jules.jpg"><div class="pin"></div><div class="pulse"></div>',
    iconSize: [30, 30],
    iconAnchor: [18, 30]
  });

  L.marker([51.5, -0.09], {icon: myIcon}).addTo(map);

Upvotes: 6

Views: 8267

Answers (1)

ghybs
ghybs

Reputation: 53225

The CSS rules for your location-pin class (namely the top and left rules) interfere with the Leaflet positioning through iconAnchor option. I do not think you need them at all.

Once you remove them, the iconAnchor option works again as normal, and you are left with specifying appropriate values to correctly position your custom DivIcon.

As suggested in Explanation of Leaflet Custom Icon LatLng vs XY Coordinates, a useful trick is to add a normal default marker at the exact same Lat/Lng location as the marker with your custom icon, so that you can compare both icon tip positions easily.

In your case, iconAnchor: [10, 33] seems to work fine.

Custom icon correctly positioned

Updated JSFiddle: https://jsfiddle.net/dyc7pe4s/

Upvotes: 8

Related Questions