How to hide leaflet base map?

Question

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.

Answer 1

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

Answer 2

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