Intégration limites départements france

Je débute !
,
#1

Bonjour à tous,
Je viens de faire ma première utilisation récemment et viens de m’inscrire pour une petite question et éventuellement un coup de main :slight_smile:

Le contexte pour l’instant est simplement d’afficher quelques points sur une carte (ça c’est bon) mais j’aimerais aussi ajouter une couche pour voir en transparence les limites de chaque département français.

En cherchant je suis tombé sur ce site qui fait quasi exactement ce que j’aimerais avoir : https://france-geojson.gregoiredavid.fr/

J’ai donc récupéré le fichier geojson ici : https://france-geojson.gregoiredavid.fr/repo/departements.geojson.

Mais lorsque j’intègre à mon code, il se passe bien quelque chose mais je n’ai pas la transparence et plus problématique la page devient ultra lente , voir meme ne répond plus du tout au bout d’un moment, obligé de killer le navigateur. Quand je supprime le bout de code pour les départements, aucun problème de perf …

Capture d’écran 2023-01-03 à 09.34.08
Capture d’écran 2023-01-03 à 09.34.081092×744 51.8 KB

Voici le bout de code que j’utilise :

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css" integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI=" crossorigin=""/>

<script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js" integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM=" crossorigin=""></script>

<script>
var carte = L.map('maCarte').setView([46.2276, 2.2137], 7);

L.tileLayer('https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png', {
 // Il est toujours bien de laisser le lien vers la source des données
 attribution: 'données © <a href="//osm.org/copyright">OpenStreetMap</a>/ODbL - rendu <a href="//openstreetmap.fr">OSM France</a>',
   minZoom: 1,
   maxZoom: 20
}).addTo(carte);


$.getJSON("departements.json", function(data) {
L.geoJSON(data).addTo(carte);
});
</script>

Si vous avez une idée pour ce souci de perf et eventuellement de transparence pour obtenir le meme résultat que le lien de gregoiredavid je suis preneur.

Merci par avance et bonne journée :slight_smile:

#2

Peut-être qu’un processus de simplification des géométries selon le zoom pourrait améliorer les perfs, mais il faut que la fonctionnalité soit disponible dans le système d’affichage, qui semble être ‹ leaflet › vu le label du sujet. Mais malheureusement je n’y connais rien, alors je ne pas aider plus que ça.

1 Like
#3

euh peut-etre mais je n’ai aucune idée de comment faire ça par contre … mais merci pour l’idée :slight_smile:

1 Like
#4

L’option style permet d’appliquer un style au geojson.

J’ai essayé de mon coté et je n’ai aucun problème de performance (version live)

<!DOCTYPE html>
<head>
  <meta charset="utf-8" />
  <title>limites départements geoJSON</title>

  <link
    rel="stylesheet"
    href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css"
    integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI="
    crossorigin=""
  />

  <script
    src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"
    integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM="
    crossorigin=""
  ></script>

  <script src="https://unpkg.com/jquery@3.6.3/dist/jquery.js"></script>

  <style>
    body {
      margin: 0;
      padding: 0;
    }
    #maCarte {
      height: 100vh;
      width: 100vw;
    }
  </style>
</head>

<body>
  <div id="maCarte"></div>
  <script>
    var carte = L.map("maCarte").setView([46.2276, 2.2137], 7);

    L.tileLayer(
      "https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png",
      {
        // Il est toujours bien de laisser le lien vers la source des données
        attribution:
          'données © <a href="//osm.org/copyright">OpenStreetMap</a>/ODbL - rendu <a href="//openstreetmap.fr">OSM France</a>',
        minZoom: 1,
        maxZoom: 20,
      }
    ).addTo(carte);

    $.getJSON("./departements.json", function (data) {
      L.geoJSON(data, { style: { fill: false } }).addTo(carte);
    });
  </script>
</body>
1 Like
#5

@m.ezd merci pour le tuyau pour le fill false. et par la meme occasion, remettre les yeux dans mon code pour ajouter ce style m’a fait me rendre compte que j’avais placé le bloc geojson departements dans la boucle qui ajoutait mes points sur la carte, du coup c’est ça qui rendait la page ultra lente …
Merci pour le coup de main :wink: