Restrict viewing area / boundary

Question

I'm currently building a React native app where you can view a map. I also have a self made web / browser editor to edit that map.

In my editor I can see the full map, but I want to be able to define a square where the client (in the app) can't drag or zoom out side of.

Context: The app will show various information points, and I don't want the user to get lost outside of a certain perimeter.

I found Bounding box on Openstreetmap, but I'm not sure how to limit the end-user to drag or zoom outside of this bounding box.

Thanks!

Answer 1

0	Thanks for the quick response. We have not decided yet. we're considering mapbox, but suggestions are most certainly welcome. permanent link answered 08 Jan '22, 09:52 Pim 11●1●1●2 accept rate: 0%

Answer 2

0

If you are using Leaflet.js, you could use maxBounds.

Example:

var boundedMap=L.map....
boundedMap.setMaxBounds([[34.161818,-118.591919],[33.683211, -117.734985]]);

to restrict a map.

permanent link

answered 08 Jan '22, 10:01

Spiekerooger
3.1k●2●23●56
accept rate: 16%