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

0

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!

asked 07 Jan '22, 13:49

Pim's gravatar image

Pim
11112
accept rate: 0%

1

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's gravatar image

Pim
11112
accept rate: 0%

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.

See: https://leafletjs.com/reference.html#map-setmaxbounds

answered 08 Jan '22, 10:01

Spiekerooger's gravatar image

Spiekerooger
3.1k22356
accept rate: 16%

Source code available on GitHub .