[GIS] Change anchor of leaflet icon

leafletmarkers

I'm currently using a div icon to show a small graph as a marker on a leaflet map. The graphs change dynamically based on the day of week using data from a database, which changes the height of the graphs in the div icon HTML.

As the graphs change height I need to change the value of the icon anchor so the graphs remain attached to the correct location at their bottom left hand corner, using the heights of the graph to set this. Does anyone know of the best way to access and modify the anchors of div icons/markers once they've been added to the map? (I would prefer not to have to remove the makers and re-add them if possible)

Best Answer

The most simple would probably be to update the icon options (for iconSize and iconAnchor), then to use marker.setIcon(newOrUpdatedIcon) with the updated icon to re-draw the latter without affecting the marker latLng position.

Demo: http://jsfiddle.net/ve2huzxw/1/

In your case you would probably change the icon html content at the same time.

Related Solutions

[GIS] Change marker icon on click using leaflet

I ended up solving this. I also figured out you can add arbitrary options and access them later. That is useful for assigning unique ids to markers:

for (i = 0; i <= points.length-1; i++) {
    testmarker[i] = L.marker([points[i][0], points[i][1]], {icon: unselectedIcon, id: i}); 
    testmarker[i].on('click', function(e) {
        e.target.setIcon(selectedIcon);
        document.getElementById('someDiv').innerHTML = points[e.target.options.id][2];
}); 
}

[GIS] Leaflet Customer Marker Changes Position with Scale

I was able to solve this issue by just deleting/not specifying the iconAnchor property of the custom icon. Then the 'icon's center' will always remain at the correct position by default.

Best Answer

Related Solutions

[GIS] Change marker icon on click using leaflet

[GIS] Leaflet Customer Marker Changes Position with Scale

Related Question