Chargement local d'un fichier geojson MultiPolyline contenant les 13 régions France sur un fond de carte leaflet.
Le codage ci-dessous affiche une case à cocher par région...
Comment obtenir une case à cocher unique affichant ou non toutes les régions en incrustation sur la carte ?
Je présume qu'il faut collecter les layers dans un L.layerGroup mais je bloque sur ce codage…
Merci par avance
Code : Tout sélectionner
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<title>Carte avec Import local fichier GeoJson</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
<!-- ================================================================================== -->
<!-- = Chargement regions.geojson local - Fichier (Regions.js "var dataR = " ajouté) = -->
<!-- ================================================================================== -->
<script src="Regions.js"></script>
<!-- ================================================================================== -->
<!-- ================================================================================== -->
<style>
#map {
width: 850px;
height: 850px;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var map = L.map("map").setView([46.82, 2.9], 6);
var osm = new L.tileLayer("http://{s}.tile.osm.org/{z}/{x}/{y}.png", {
attribution: "© OpenStreetMap contributors",
}).addTo(map);
var overlayMaps = {};
var layerControl = new L.Control.Layers(null, overlayMaps, { collapsed: false }).addTo(map);
var style_MultiPolyline = {
color: "black",
opacity: 1.0,
fillColor: "lightgray",
fillOpacity: 0.1,
weight: 1,
clickable: false,
};
L.geoJSON(Regions, {
style: style_MultiPolyline,
onEachFeature: function (feature, layer) {
layer.bindPopup("Code : " + feature.properties.code + " - " + feature.properties.nom);
// *****************************************************
layerControl.addOverlay(layer, layer.feature.properties.code + " - " + layer.feature.properties.nom);
// *****************************************************
// var all_Layer = L.layerGroup(layer);
// layerControl.addOverlay(all_Layer, "Départements");
// *****************************************************
// console.log("1- " + layer.feature.geometry.coordinates);
// Compilation de l'intégralité des lng, lat donc inversé en fichier geojson
coords.push(layer.feature.geometry.coordinates);
console.log("2- " + coords);
},
}).addTo(map);
</script>
</body>
</html>
EDIT : Cet modification permet d'obtenir un tableau latlng mais une collecte par la methode push boucle à l'infini...
Code : Tout sélectionner
L.geoJSON(Regions, {
style: style_MultiPolyline,
onEachFeature: function (feature, layer) {
layer.bindPopup("Code : " + feature.properties.code + " - " + feature.properties.nom);
// *****************************************************
layerControl.addOverlay(layer, layer.feature.properties.code + " - " + layer.feature.properties.nom);
// *****************************************************
// var all_Layer = L.layerGroup(layer);
// layerControl.addOverlay(all_Layer, "Départements");
// *****************************************************
// console.log("1- " + layer.feature.geometry.coordinates);
// Compilation de l'intégralité des lng, lat donc inversé en fichier geojson
coords.push(layer.feature.geometry.coordinates);
console.log("2- " + coords);
},
// Permet de retrouver le format lat,lng
coordsToLatLng: function (p) {
p = [p[1], p[0]]; // inverser les valeurs lng <> lat
// return p; // retourner lat/lng
},
}).addTo(map);