Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Smooth scroll with react-leaflet

I’m trying to create a smooth zoom in my react-leaflet project.

I know that this is doable with vanilla leaflet as said in this post, with smoothWheelZoom, but knowing that vanilla leaflet does not goes well with React, I’m wondering how I can use this library (or any equivalent).

I tried to set the zoomSnap prop to 0, but zooming still goes by large increments, while I’d like it to take more time nd be smoother.

My map goes from 2.5 minZoom to 5 maxZoom – maybe increasing the map size will increase the number of mouse scrolls needed to go from min to max? (right now it takes 5 scrolls). Still, zooming by increment is not what I’m searching for.

How should I proceed?

Tags:

2

Answers


  1. 0

    Totally get where you’re coming from. Leaflet’s smoothWheelZoom feature sounds dope, but integrating vanilla Leaflet with React can be a bit of a hassle sometimes.

    One thing you could try is tweaking the zoomSnap prop, but it seems like you’ve already given that a shot. If it’s still not giving you that smooth vibe you’re after, there are a couple more tricks up the sleeve.

    First off, increasing the map size might actually help. If you make the map bigger, it could take more scrolls to zoom in or out, giving you a smoother experience overall. Plus, it might just look cooler with more real estate to play with.

    But if you’re still not feeling it, you might wanna check out some React-specific libraries that work nicely with Leaflet. There are some out there that offer smooth zooming features or even custom animations that could jazz up your map big time

    Login or Signup to reply.
  2. 0

    Think of it like a DIY project, you know? Instead of hunting down some pre-made solution, you could totally craft your own. It’s kinda like building with LEGO bricks – you get to decide how it all fits together.

    So, here’s the deal: you could tap into Leaflet’s raw power right in your React project. Picture it like driving a car – you control the speed and direction.

    Forget about those plugins for a sec and get your hands dirty, and huhhhhh. Whip up something unique that fits your vibe.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search