D3 project

forked from lsoudade's block: D3 project

<!DOCTYPE html>
<html>
<head>
	
	<title>Quick Start - Leaflet</title>

</head>
<body>

<div id="map" style="width: 640px; height: 640px;"></div>
<script>
L.Mask = L.Polygon.extend({
	options: {
		stroke: false,
		color: '#333',
		fillOpacity: 0.2,
		clickable: true,

outerBounds: new L.LatLngBounds([-90, -360], [90, 360])
	},

initialize: function (latLngs, options) {
        
         var outerBoundsLatLngs = [
			this.options.outerBounds.getSouthWest(),
			this.options.outerBounds.getNorthWest(),
			this.options.outerBounds.getNorthEast(),
			this.options.outerBounds.getSouthEast()
		];
        L.Polygon.prototype.initialize.call(this, [outerBoundsLatLngs, latLngs], options);	
	},

});
L.mask = function (latLngs, options) {
	return new L.Mask(latLngs, options);
};

//truc que j'ai trouvé pour afficher des popups quand mouseover (afficher des charts)
/*marker.bindPopup("Popup content");
        marker.on('mouseover', function (e) {
            this.openPopup();
        });
        marker.on('mouseout', function (e) {
            this.closePopup();
        });*/

// Polygon created with https://geojson.io/
var france = {
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {},
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [
              2.5048828125,
              51.33061163769853
            ],
            [
              1.0546875,
              50.90303283111257
            ],
            [
              1.0546875,
              50.14874640066278
            ],
            [
              -0.50537109375,
              49.63917719651036
            ],
            [
              -1.9775390625,
              49.92293545449574
            ],
            [
              -2.21923828125,
              49.653404588437894
            ],
            [
              -1.9335937499999998,
              48.93693495409401
            ],
            [
              -5.361328125,
              48.86471476180277
            ],
            [
              -4.7021484375,
              47.45780853075031
            ],
            [
              -2.900390625,
              46.92025531537451
            ],
            [
              -1.669921875,
              45.583289756006316
            ],
            [
              -2.1533203125,
              43.08493742707592
            ],
            [
              3.6035156249999996,
              41.902277040963696
            ],
            [
              3.5595703125,
              42.87596410238256
            ],
            [
              8.0859375,
              42.74701217318067
            ],
            [
              7.4267578125,
              46.98025235521883
            ],
            [
              8.876953125,
              49.18170338770663
            ],
            [
              2.5048828125,
              51.33061163769853
            ]
          ]
        ]
      }
    }
  ]
};

var lat = 46.566414;
var lng =  2.4609375;
var zoom =  6;

var map = new L.Map('map');

map.setView(new L.LatLng(lat, lng), zoom);

// transform geojson coordinates into an array of L.LatLng
var coordinates = france.features[0].geometry.coordinates[0];
var latLngs = [];
for (i=0; i<coordinates.length; i++) {
    latLngs.push(new L.LatLng(coordinates[i][1], coordinates[i][0]));
}

L.mask(latLngs).addTo(map);

/*map.dragging.disable();*/

</script>

</body>
</html>

https://unpkg.com/leaflet@1.2.0/dist/leaflet.js