fix:map navigation

[munyanezaarmel]

Brief summary of the change made

Fix the map navigation and improve the zoom-in/zoom-out behavior to ensure smooth, seamless navigation

closes: #1121

Are there any other side effects of this change that we should be aware of?

Describe how you tested your changes?

Pull Request checklist

Please confirm you have completed any of the necessary steps below.

• Meaningful Pull Request title and description
• Changes tested as described above
• Added appropriate documentation for the change.
• Created GitHub issues for any relevant followup/future enhancements if appropriate.

[dmohns]

Hey @munyanezaarmel

When I'm testing your PR locally, I cannot see any difference:

Screen.Recording.2025-12-02.at.09.18.45.mov

Can you please tell me what this PR is supposed to do 😂 ?

[munyanezaarmel]

Hey @munyanezaarmel

When I'm testing your PR locally, I cannot see any difference:

Screen.Recording.2025-12-02.at.09.18.45.mov

Can you please tell me what this PR is supposed to do 😂 ?

I may need more context about the real issue. Could you explain the expectations more clearly and what needs to be done? I might not be fully understanding the problem.

[dmohns]

I may need more context about the real issue. Could you explain the expectations more clearly and what needs to be done? I might not be fully understanding the problem.

Hmm... it's a little hard to me to put it into words, hence I added the recordings. But let me try to explain in different words:

In our current maps based on Leaflet, when you zoom in and out, the animation is in steps. For example, if I quick swipe up on my touchpad for 1 second, it results in a 3-4 seconds long animation with 5 distinct zoom steps. Which to me, feels very "stuttering".

However, there is better implementations for that. For example check this example: https://maplibre.org/maplibre-gl-js/docs/examples/draw-polygon-with-mapbox-gl-draw/

Here, if I quickly swipe up for 1 second, I get a smooth fade out effect. With feels much nicer.

---

Now, for this issue I'm wondering how can we get this effect in MPM. I think there might be two options

1. Get a similar effect with Leaflet. (I noticed most LeafLet maps have this problem. Maybe this is simply how Leaflet works)
2. Use a different Map library, like https://github.com/maplibre/maplibre-gl-js/ Or Even MapBox, but I'm not sure how this works with Open Source