leafletjs custom marker position not right

StackOverflow https://stackoverflow.com/questions/22706270

  •  23-06-2023
  •  | 
  •  

Question

When I am adding custom marker icon for leaflet js the marker icon isn't position correctly.

Here is a fiddle when I am using custom marker http://jsfiddle.net/amrana83/7k5Jr/

Here is code when I am using custom marker

<style>
  html, body, #map {
    height: 500px;
    width: 800px;
    margin: 0px;
    padding: 0px
  }
  .leaflet-map-pane {
    z-index: 2 !important;
  }

  .leaflet-google-layer {
    z-index: 1 !important;
  }
</style>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://matchingnotes.com/javascripts/leaflet-google.js"></script>
  <body>
    <div id="map"></div>
    <script>
      var map = new L.Map('map', {center: new L.LatLng(51.5, -0.09), zoom: 4});
      var googleLayer = new L.Google('ROADMAP');
      map.addLayer(googleLayer);
      var greenIcon = new L.Icon({iconUrl: 'http://technobd.rvillage.com/application/modules/Rvillage/externals/images/all_members.png'});
      L.marker([51.5, -0.09], {icon: greenIcon}).bindPopup("I am a green leaf.").addTo(map);//using custom marker
      L.marker([60.5, -0.09], {}).bindPopup("I am a green leaf.").addTo(map);
    </script>
  </body>

Here is a fiddle when I ain't using custom marker http://jsfiddle.net/amrana83/8skPU/1/

Here is code when I ain't using custom marker

<style>
  html, body, #map {
    height: 500px;
    width: 800px;
    margin: 0px;
    padding: 0px
  }
  .leaflet-map-pane {
    z-index: 2 !important;
  }

  .leaflet-google-layer {
    z-index: 1 !important;
  }
</style>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://matchingnotes.com/javascripts/leaflet-google.js"></script>
  <body>
    <div id="map"></div>
    <script>
      var map = new L.Map('map', {center: new L.LatLng(51.5, -0.09), zoom: 4});
      var googleLayer = new L.Google('ROADMAP');
      map.addLayer(googleLayer);
      L.marker([51.5, -0.09], {}).bindPopup("I am a green leaf.").addTo(map);//not using custom marker
      L.marker([60.5, -0.09], {}).bindPopup("I am a green leaf.").addTo(map);
    </script>
  </body>
Was it helpful?

Solution

You have to specify the size of icon, something like this:

var greenIcon = new L.Icon({
    iconUrl: 'http://technobd.rvillage.com/application/modules/Rvillage/externals/images/all_members.png',
    iconSize: [41, 51], // size of the icon
    iconAnchor: [20, 51], // point of the icon which will correspond to marker's location
    popupAnchor: [0, -51] // point from which the popup should open relative to the iconAnchor                                 
});

OTHER TIPS

When I see http://leafletjs.com/reference.html#icon I see using custom marker icon I have to change position of the icon http://leafletjs.com/reference.html#icon-iconanchor makes icon position correct we can change to position it correctly.

Here is a fiddle after I solved the problem http://jsfiddle.net/amrana83/xv8m9/1/

var LeafIcon = L.Icon.extend({
    options: {
        iconAnchor:   [19, 46],//changed marker icon position
        popupAnchor:  [0, -36]//changed popup position
    }
});
  var greenIcon = new LeafIcon({iconUrl: 'http://technobd.rvillage.com/application/modules/Rvillage/externals/images/all_members.png'});

You can try this way, it's so easy :)

The first you create the CSS for marker
.cd-single-point {
position: absolute;
list-style-type: none;
left: left_pospx;
top: top_pospx;
}
Then call the Javascript to adjust the position like this

div.style.left = (point.x-(left_pos/2) ) + 'px';
div.style.top = (point.y-(top_pos/2)) + 'px';

... I think depend on the case which you're getting You can change the value of delta position. This is my result Hope this help!

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top