Leaflet test geoJSON
HTML
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css">
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<script src="https://yigityuce.github.io/Leaflet.Control.Custom/Leaflet.Control.Custom.js"></script>
<script src="https://unpkg.com/@turf/[email protected]/turf.min.js"></script>
<link rel="stylesheet" href="https://ghinda.net/css-toggle-switch/dist/toggle-switch.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.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%;
}
.switch-toggle > label {
outline-style: none!important;
}
JavaScript
var mailles = {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"geometry": {
"type": "MultiPolygon",
"coordinates": [
[
[
[
0.229628794333224,
48.4029232602356
],
[
0.227257067602151,
48.447877739469
],
[
0.294831380624158,
48.449437687249
],
[
0.297145397674823,
48.4044819277577
],
[
0.229628794333224,
48.4029232602356
]
]
]
]
},
"properties": {
"id_maille": 1,
"dateobs": "2010-06-26",
"annee": 2010,
"nb_observations": 1
}
},
{
"type": "Feature",
"geometry": {
"type": "MultiPolygon",
"coordinates": [
[
[
[
0.222501415605553,
48.5377818505448
],
[
0.220117469417105,
48.5827314251312
],
[
0.287865504207965,
48.5842952209079
],
[
0.290191444099058,
48.5393443624496
],
[
0.222501415605553,
48.5377818505448
]
]
]
]
},
"properties": {
"id_maille": 2,
"dateobs": "2010-06-26",
"annee": 2008,
"nb_observations": 10
}
},
{
"type": "Feature",
"geometry": {
"type": "MultiPolygon",
"coordinates": [
[
[
[
-0.17810004488886,
48.4377102799765
],
[
...