I'm building a webGIS using leaflet library. Since the data visualization is for only a certain region, it seems that the broader leaflet base map looks a bit distracting. I wonder if there's a way to hide the redundant region.


If I understand correctly what you're asking, here are a few ideas:

  1. Limit the map bounds and zoom to a certain range with minZoom, maxZoom and maxBounds

  2. add an "inverted mask" to the area of interest. Check Bjorn's mask plugin, as well as the questions and answers in this discussion

| improve this answer | |
  • toms and @ghybs Thanks for your hints. I was able to sort it out. – NonSleeper Dec 27 '15 at 16:42

To go into more details, here are all your options (some may be combined):

  1. Prevent Leaflet from loading tiles outside your area using the bounds option of Tile Layer. That will save some network requests.

  2. Restrict the map navigation to your area using maxBounds and minZoom options of the Map object.

  3. Hide the map outside your area using an inverted mask (a polygon with a hole being your area).

  4. Alternatively with point 3, hide the map outside your area using TileLayer.BoundaryCanvas plugin. The advantage compared to point 3 is that there is no mask flickering on map navigation. See also https://stackoverflow.com/questions/34276012/prevent-tiles-outside-of-polygon-from-loading

| improve this answer | |
  • ghybs @toms Thanks for your hints. I was able to hide leaflet base map. – NonSleeper Dec 29 '15 at 2:16

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.