when custom icons are added, icons appears in a different position than when default marker added.

[Shalini A]

Dear All,

I'm facing a weird issue while adding markers with custom icons to my map. Basically I'm trying to show polylines in red color and mark the waypoints with the custom icons with a popup connecting the media information. When the default marker is added, the track appears as in the attachment, default_marker.png. All the points looks connected. But when custom icons are added, the marker position is changed. Refer attachment, custom_markers.png. I'm not sure where I'm going wrong. Below are the code snippets.

var addedTrack = L.geoJson(track, {

         style: function(feature) {

           return {

                color: 'red',

                };

         },

         pointToLayer: function(feature,latlng){

           switch(feature.properties.name) {

           case 'Picture':

                return L.marker(latlng, {icon:pictureIcon});

           case 'Voice recording':

                return L.marker(latlng,{icon:audioIcon});

           default:

                return L.marker(latlng,{icon:textIcon});

           }

         },

         onEachFeature: function(feature, layer) {

           switch(feature.properties.name) {

           case 'Picture':

             layer.bindPopup("<img class='img-responsive' src=" + obj.get('data-path') + '/' +

                             feature.properties.link + "/>");

             break;

           case 'Voice recording':

             layer.bindPopup("<audio controls='controls' src=" + obj.get('data-path')+ '/' +

                             feature.properties.link + ".mp3" + "/>");

             break;

           default:

             layer.bindPopup(feature.properties.name);

             break;

           }

         }

       }).addTo(map);

Thank you for any help.

[ghybs]

Hi,

Please how did you defined your custom icons? (pictureIcon, audioIcon, textIcon)
Did you make sure the icon and shadow anchors are properly set?
Otherwise, Leaflet will place your markers' icons so that their top left corner is on the specified latLng position.

See http://leafletjs.com/reference.html#icon-iconanchor

Hope this helps.

[Shalini A]

Thank you ghybs.

I have defined the custom icons this way 

var ColorIcon = L.Icon.extend({ 

  options: {

        iconAnchor:   [10, 34],     

        popupAnchor: [0, -34]                                    

        }

  });   

  

   var pictureIcon = new ColorIcon({iconUrl: '../static/images/picture_icon.png'}), 

        audioIcon = new ColorIcon({iconUrl: '../static/images/audio_icon.png'}),

        textIcon = new ColorIcon({iconUrl: '../static/images/text_icon.png'});

 

Is it very necessary to set shadow url and anchor? On what basis the iconAnchor has to be set if the center(where image points) has to point to the actual latlng? Is it based on the icon(used as marker) width and height?

[ghybs]

Hi,

No, you do not need to specify any shadow if you do not want one.

Sorry I forgot to mention that you absolutely need to specify the "iconSize" as well.
http://leafletjs.com/reference.html#icon-iconsize

The iconAnchor is based on this iconSize: the anchor is the offset (from top left corner) to use to correctly position the "tip" of your icon on the latLng position.

Hope this helps.