[Fixed] Leaflet: How can i show layer only inside a polygon


Actually i’m working with Leaflet but when i add a leaftlet.webglheatmap layer it uses the entire screen.

I need to show only the data (colour) inside a geoJson polygon, instead of all the map:

I talked with the webglheatmap developer but he told me to create a new shape with webgl, but that is not an option in this minute

I tried Leaflet.Snogylop too, but it just draw a shape outside my map and with some colours it doesnt do the effect.

enter image description here


If I am interpreting your question correctly, you need to show map layer only within Polygon. Unfortunately it’s not straight forward with leaflet. I stumbled with same issue an year ago and I ended up using Leaflet Snogylop Plugin. Simply put by the author:

Leaflet.snogylop is a Leaflet plugin that inverts polygons.

Basically you define a polygon where you want to show the map, this plugin will invert that polygon so that rest of map is covered while your desired area is transparent.

Inverted Polygon
enter image description here

Inversted MultiPolygon
enter image description here

Include the lib in your page after leaflet, then use it by simply defining the invert option to true

L.geoJson(data, {
    invert: true

Leave a Reply

(*) Required, Your email will not be published