Forums Tout JavaScript

Bonjour,

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>

PS : Bases geojson disponible à ce lien https://github.com/gregoiredavid/france-geojson

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);

Bonjour,

Je ne connais pas la lib leaflet.js
J'utilise googlemaps pour mon site mellifere.com et les emplacements de ruchers (à base de geojson d'ailleurs)
https://mellifere.com/apiculture/rucher ... e=588972ff

Il manque le fichier region.js pour que je regarde plus en détail

Bonjour,

La lib leaflet.js est Open Source et dispose d'un grand nombre de fonds de cartes gratuites https://leaflet-extras.github.io/leafle ... s/preview/ mais est ouverte également aux cartes nécessitant une clef de licence telles celle de Google. En outre de nombreux plugin sont disponible et les possibilités sont trés vaste : https://www.datavis.fr/...

Simplement : Respect pour votre site qui est trés riche !

Effectivement, j'avais simplement indiqué le lien des bases de données, car même zippée votre serveur refuse un chargement de 467 ko, message : Fichier trop volumineux… j'ai tenté avec la même base, mais simplifiée niveau distances entre les coordonnées GPS et le zip été accepté.

Néanmoins je viens de détecter ma bévue et communique "LA" solution bête comme chou, à ce post :

Peut-être une évidence : Il fallait penser à charger le fichier geojson dans une variable pour disposer de la totalité des datas. Ensuite, avec le contenu, le script leaflet.js fait tout le boulot et isole en sous-marin les seules données utiles Latitudes / Longitudes pour le reste du codage !

Voir explications données dans le code, cela pourra éviter une perte de temps inutile à d'autres personnes intéressées en se noyant dans la documentation leaflet et GeoJson !

Un vif merci pour votre réactivité sans faille sur votre forum…

Amitiés à tous,

Jean-Paul

Code : Tout sélectionner

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8" />
        <title>Carte avec Import local données de fichiers 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>
        <!-- ================================================================================== -->
        <!-- Tout ficher geojson communes / départements / régions disponible à cette url :     -->
        <!-- https://github.com/gregoiredavid/france-geojson                                    -->
        <!-- Ajouter "var dataRegions = " au début du fichier geojson et enregistrer en *.js    -->
        <!-- Permet un chargement indépendant d'un serveur hhtps:// évitant problème CORS       -->
        <!-- ================================================================================== -->
        <script src="regions-version-simplifiee.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,
            };
            // Variable obligatoire pour créer un Overlay layer global
            var DataLayerFulll = L.geoJSON(dataRegions, {
                style: style_MultiPolyline,
                onEachFeature: function (feature, layer) {
                // Affichage code région et nom région sur clic gauche sur une zone
                    layer.bindPopup("Code : " + feature.properties.code + " - " + feature.properties.nom);
                    // XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
                    // A ce niveau sélection séparée de chacune des 13 régions présentes dans la polyline...
                    layerControl.addOverlay(layer, layer.feature.properties.code + " - " + layer.feature.properties.nom);
                    // XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
                }
            })
			// .addTo(map);
            // XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
            // A ce niveau sélection globale du fichier geojson donc visibilité des 13 régions préentes dans la polyline
            layerControl.addOverlay(DataLayerFulll, "Afficher les 13 Régions");
            // XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
        </script>
    </body>
</html>

Fichiers htm et geojson pour test :

CarteTest.zip: (175.58 Kio) Téléchargé 432 fois

Forums Tout JavaScript

Leaflet et geojson : Obtenir une case à cocher unique pour Multipolyline

Leaflet et geojson : Obtenir une case à cocher unique pour Multipolyline

Re: Leaflet et geojson : Obtenir une case à cocher unique pour Multipolyline

Re: Leaflet et geojson : Obtenir une case à cocher unique pour Multipolyline