Leaflet: Simple GeoJSON MultiPolygons (Square Donut & Swiss Cheese)

Simple example showing necessary array structure to have holes in polygons. Useful references are the GeoJSON spec (http://geojson.org/geojson-spec.html) and the Wikipedia page on WKT (http://en.wikipedia.org/wiki/Well-known_text).

by FranceImage

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" style="height:480px; width:360px;"></div>

JavaScript

// a GeoJSON LineString
var geojson = {
  "type": "Feature",
  "geometry": {
    "type": "LineString",
    "coordinates": [[-101.123, 40.2500], [-101.123, 40.2503]]
  }
};

// create map and add json
var map = L.map('map');
var geojsonLayer = new L.GeoJSON(geojson).addTo(map);
map.fitBounds(geojsonLayer.getBounds())

// add popup for the line
geojsonLayer.eachLayer(function (layer) {
  var popup = L.popup();
  popup.setContent('text');

  layer.bindPopup(popup);
  layer.on('mouseover', function (e) {
    var popup = e.target.getPopup();
    popup.setLatLng(e.latlng).openOn(map);
  });
  layer.on('mouseout', function(e) {
     e.target.closePopup();
  });
  layer.on('mousemove', function (e) {
    e.target.closePopup();
    var popup = e.target.getPopup();
    popup.setLatLng(e.latlng).openOn(map);
  });
});