A Leaflet plugin that inverts polygons
Clone or download
ebrelsford Version 0.4.0
Add some automated tests.
Update 1.0+ examples to use Leaflet@1.3.1.
Use public isFlat when it's available, add fallback.
Save original Polygon.toGeoJSON before overriding.
Latest commit f0e5846 Mar 7, 2018



Leaflet.snogylop is a Leaflet plugin that inverts polygons.

Why? you ask. Sometimes you want to highlight a region of a map by de-emphasizing the rest of the map. Using this plugin you can set a relatively high opacity in order to de-emphasize everything outside of a polygon or multipolygon.


An inverted polygon.

An inverted multipolygon.

Custom worldLatLngs, eg for polygons near the antimeridian.


Include leaflet.snogylop.js on your page, set the options on your GeoJSON layer as specified below.

Leaflet.snogylop is tested on Leaflet version 0.7 and 1.x with L.GeoJSON layers. It may work with older Leaflets and should work with other layers. Pull requests in this direction are welcome.

AMD compatible.

Available through bower: bower install --save leaflet.snogylop


Define the following option in the vector options when creating a layer (eg, an L.GeoJSON):

  • invert: (boolean) True to invert. False by default.
  • worldLatLngs: (coordinate array) Optional, the coordinates of the outer ring of the inverted polygon that will be created.


Create a GeoJSON layer, set invert to true:

L.geoJson(data, {
    invert: true

The default worldLatLngs can be overriden by using the worldLatLngs option:

L.geoJson(data, {
    invert: true,
    worldLatLngs: [
        L.latLng([90, 360]),
        L.latLng([90, -180]),
        L.latLng([-90, -180]),
        L.latLng([-90, 360])


Leaflet.snogylop is free software, and may be redistributed under the MIT License.