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.


asked 07 Jan, 13:49

Pim's gravatar image

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, 17:10) H_mlet

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, 09:52

Pim's gravatar image

accept rate: 0%

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


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

permanent link

answered 08 Jan, 10:01

Spiekerooger's gravatar image

accept rate: 14%

Your answer
toggle preview

Follow this question

By Email:

Once you sign in you will be able to subscribe for any updates here



Answers and Comments

Markdown Basics

  • *italic* or _italic_
  • **bold** or __bold__
  • link:[text](http://url.com/ "title")
  • image?![alt text](/path/img.jpg "title")
  • numbered list: 1. Foo 2. Bar
  • to add a line break simply add two spaces to where you would like the new line to be.
  • basic HTML tags are also supported

Question tags:

question asked: 07 Jan, 13:49

question was seen: 241 times

last updated: 08 Jan, 10:01

Related questions

powered by OSQA