This is a static archive of our old OpenStreetMap Help Site. Please post any new questions and answers at community.osm.org.

Restrict viewing area / boundary

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!

bbox

asked 07 Jan '22, 13:49

Pim
11●1●1●2
accept rate: 0%

Did you use some.framework like Leaflet.js? I'm afraid we will need a lot more details about your app.

(07 Jan '22, 17:10) H_mlet

2 Answers:

0	Thanks for the quick response. We have not decided yet. we're considering mapbox, but suggestions are most certainly welcome. answered 08 Jan '22, 09:52 Pim 11●1●1●2 accept rate: 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.

answered 08 Jan '22, 10:01

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