Broken GridLayer zoom animation in production build

[Ploppy3]

Broken GridLayer zoom animation in production build.

This is issue is quite well documented:

• https://github.com/Leaflet/Leaflet/issues/7096
• https://github.com/angular/angular-cli/issues/17494

What can be done about that?

Edit: Check https://github.com/Asymmetrik/ngx-leaflet/issues/283#issuecomment-691140090 for how to fix it.

[reblace]

It sounds like this is an issue with Leaflet being used in Angular, as opposed to an issue with ngx-leaflet, specifically. Is there anything we can actually do to avoid this issue?

[Ploppy3]

@reblace One solution is to fork leaflet and modify the code so that the compiler does not discard one of the instruction responsible for the animation.

I have tested and replacing src/layer/tile/GridLayer.js line 395 From Util.falseFn(level.el.getBoundingClientRect()); To level.el.getBoundingClientRect(); Does the trick.

There could be a better way to fix it but if ngx-leaflet shipped with a patched version of leaflet it would be could. Because in its current state the animation are just completely broken while zooming in and out and it is not production ready at all. I'm quite confused that no-one realized this as it has always being broken.

[reblace]

Shipping a patched version of Leaflet isn't really an option cause that's pretty non-standard for NPM and it'd introduce a lot of complications. We could consider monkey-patching it (if possible), though that wouldn't be particularly straightforward either. It might warrant opening a new ticket with Leaflet that shows that the problem isn't really specific to Angular or a framework, but rather to minification (at least that's the impression I got).

[Ploppy3]

@reblace In the linked closed issue on the Leaflet repo, they acknowledged the fact that it is a minification issue and they said they only aim at plain JS. Monkey-patching is IMO the way to go.

[danmana]

There is no nice way to fix this, but you can make a patch for it with the help of patch-package.

1. npm install --save-dev patch-package
2. in package.json scripts add

"scripts": {
    "postinstall": "patch-package && ngcc"
}

3. Modify node_modules/leaflet/dist/leaflet-src.js and node_modules/leaflet/dist/leaflet-src.esm.js as suggested

	function falseFn() {
		if (arguments.length < 0) {
			console.log(arguments.length);
		}
		return false;
	}

4. Run npx patch-package leaflet

Now everytime somebody does an install, patch-package will take care to apply the falseFn patch (effectively making the changes to node_modules persistent)

[reblace]

Yeah, my inclination is to not fix this in the library itself (that introduces compatibility issues and isn't really the responsibility of this library). I'd rather include instructions on how to fix it in the README and people can deal with it (or not) however they want.

[Ploppy3]

@reblace If you provide a way to fix it in the readme, I totally agree.

[Ploppy3]

@danmana tested and it works, thank you.

[Roinw]

Hi, I had same issue and i fixed it by running build command has follow: ng build --prod --optimization=false or by changing buildOptimizer value to false in angular.json.

[Ploppy3]

@Roinw This not a feature you are supposed to turn off though.