SentinelSixSpy SentinelSixSpy - 1 year ago 132
Javascript Question

Prevent leaflet zoom animation within a $timeout

There is an animation that occurs when my leaflet image is loaded. I have inserted a

function to slow it down to see if that would help, but it didn't fix the issue. It may be an issue with the
or and issue with
. It could either be a timing issue or something is in the wrong place. Any thoughts?

var loadImageMap = function (callback) {
// dimensions of the image
getBase64Image($scope.selectedFloorplan, function (image) {
$scope.imageUrl = image;

getImageSize($scope.imageUrl, function () {
$scope.imageW = this.width;
$scope.imageH = this.height;

// create the image map
var initialZoom = 5;
$scope.mapRef ='imageMap', {
minZoom: 1,
maxZoom: 10,
center: [0, 0],
zoom: initialZoom,
crs: L.CRS.Simple

// calculate the edges of the image, in coordinate space
var southWest = $scope.mapRef.unproject([0, $scope.imageH], initialZoom);
var northEast = $scope.mapRef.unproject([$scope.imageW, 0], initialZoom);
var bounds = new L.LatLngBounds(southWest, northEast);

// add the image overlay,
// so that it covers the entire map
L.imageOverlay($scope.imageUrl, bounds).addTo($scope.mapRef);

// tell leaflet that the map is exactly as big as the image

$timeout(function () {
// set fit-to-image zoom level
var zoomOut = initialZoom - (getMaxZoom() - 2);
$scope.mapRef.setZoom(zoomOut, {animate: false});

// set minimum zoom to the fit-to-image level
$scope.mapRef.options.minZoom = zoomOut;

// load cameras after the imageOverlay has been added
}, 250);

Answer Source

I found a solution to my problem. The $timeout function that holds var zoomOut is in the correct place. The problem is that I was setting the imageOverlay to early. If you move L.imageOverlay($scope.imageUrl, bounds).addTo($scope.mapRef); into the $timeout function it will set the zoom and then set the imageOverlay which will load the image without the animation. You want the bounds and the zoom level to be set first then after that the imageOverlay. That is if you want the image to load without an animation and to be centered properly.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download