I have a marker (L.divIcon) object in Leaflet. The html content of the marker is an svg. I'm looking to have the divIcon resize when zooming the map.
I've got the necessary code to resize the icons up and down as needed. The issue I'm having is the correct trigger in time. The 'zoomend'
event is too late, as by this time the map has already animated. Resizing icons at this stage would have their changes lag behind the map.
map.on('zoomend', function() {
zoomIcons(currZoom, map.getZoom());
currZoom = map.getZoom();
});
The 'zoomanim'
and 'zoomstart'
events don't inform as to the direction of the zoom (in or out) as far as I can tell since map.getZoom()
is not updated yet.
Is there another early hook that could be used or some means of determining whether the user is zooming in or out?
For reference below you will find the zoomIcons
and dependent functions
/**
* multiplies CSS values (width, height etc.) preserving their unit
* @param {string} cssVal T css value like -14px or 75%
* @param {number} multiplier The multiplication value
* @return {string} The css value multipied.
*/
var cssMultiply = function ( cssVal, multiplier ) {
var returnval = cssVal.substring(0, cssVal.match(/[A-Za-z]/).index) * multiplier
return returnval + cssVal.substring(cssVal.match(/[A-Za-z]/).index)
}
/**
* Changes the size of marker icons based on zoom level change
* @param {number} oldZoom The previous Leaflet zoom level
* @param {number} newZoom The current Leaflet zoom level
* @return {null} this function does not return anything
*/
var zoomIcons = function ( oldZoom, newZoom ){
var zoomRatio = ( newZoom - oldZoom > 0 ) ? 1.5 : 0.666666667; // 1.25 and 0.8 also works
var elements = document.getElementsByClassName( 'leaflet-marker-icon' );
for (var i=0, max=elements.length; i < max; i++) {
elements[i].style.width = cssMultiply( elements[i].style.width, zoomRatio );
elements[i].style.height = cssMultiply( elements[i].style.height, zoomRatio );
elements[i].style.marginLeft = cssMultiply( elements[i].style.marginLeft, zoomRatio );
elements[i].style.marginTop = cssMultiply( elements[i].style.marginTop, zoomRatio );
}
}