Leaflet 1.5.1 | GeoJSON polygon with hole

by Dennis Bauszus

HTML

<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css">
<div id="map" class="map"></div>

CSS

html,
body {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
  border: 0;
}

.map {
  height: 100%;
  width: 100%;
}

JavaScript

const map = L.map('map', {
  center: [55, -3],
  zoom: 5
});

L.tileLayer('https://cartodb-basemaps-{s}.global.ssl.fastly.net/dark_nolabels/{z}/{x}/{y}.png').addTo(map);

L.geoJson({
  "type": "Polygon",
  "coordinates": [
    [
      [0.889052605503471, 57.9790789852359],
      [0.889052605503471, 51.0278034260412],
      [-9.245254267273, 51.0278034260412],
      [-9.245254267273, 57.9790789852359],
      [0.889052605503471, 57.9790789852359]
    ],
    [
      [-4.42136131224148, 55.9201880414654],
      [-4.44608055051929, 55.8994054388937],
      [-4.49963890012121, 55.8816929539651],
      [-4.44196067747298, 55.8362196009829],
      [-4.35269676146979, 55.8045881227693],
      [-4.35818992553152, 55.7636605341908],
      [-4.22772727906531, 55.7350629547249],
      [-4.07391868533672, 55.7582517890959],
      [-4.00937400761133, 55.7984131283508],
      [-4.04095970096631, 55.868595920571],
      [-4.14532981813928, 55.8947855700627],
      [-4.27991233765179, 55.9148010288061],
      [-4.29776512085243, 55.9586449375958],
      [-4.42136131224148, 55.9201880414654]
    ]
  ]
}).addTo(map);