Leaflet JS add GeoJSON shape as a hole in a polygon

Question

I have a dataset which already contains geojson. I can add it to my map with the following line of code.

L.geoJson(data.geojson).addTo(map);

And I get this

But I want to achieve this, where the surrounding area is covered up and my geojson shape is a hole in the middle of it.

According to the leaflet documentation

You can also create a polygon with holes by passing an array of arrays of latlngs, with the first latlngs array representing the exterior ring while the remaining represent the holes inside.

So in theory something like:

var scotland = [[60,-13],[60,0],[50,4],[50,-13]];
L.Polygon([scotland,coordinatesOfShapeHole].addTo(map);

My problem is this function doesn't seem to like me passing in data.geojson or data.geojson.coordinates as the second parameter (coordinatesOfShapeHole);

Is there some way to convert data.geojson into a format the L.Polygon function is happy with?

Or alternatively do the same thing but with L.geoJson?

Answer 1

This should work. Which version of Leaflet are you using?

Here, have a look at this jsFiddle.

It is important you get the arrays right.

First array is the polygon object [ in here the outer ring [ in here some [lat,lon],[,] close the outer ring], then the inner ring [ in here some [lat,lon],[,] close the inner ring ] close the polygon ].

scotland = L.polygon([[[60,-13],[60,0],[50,4],[50,-13]],
                  [[55.7,-4.5],[56,-4.5],[56,-4],[55.7,-4]]]);
scotland.addTo(map);