Makina Blog

Le blog Makina-corpus

Inté­grez vos services GeoJ­SON, WMS et WMTS dans Geotrek-widget


Le Geotrek-widget s’en­ri­chit d’une nouvelle fonc­tion­na­lité permet­tant d’in­té­grer des couches carto­gra­phiques externes (GeoJ­SON, WMS et WMTS) direc­te­ment dans la carte. Sans avoir à impor­ter ces données dans Geotrek-admin, il est désor­mais possible d’af­fi­cher des infor­ma­tions issues de services tiers et de lais­ser les utili­sa­teurs les acti­ver ou les masquer grâce à un sélec­teur de couches inté­gré.

Enri­chir les cartes avec des données externes

Toutes les infor­ma­tions utiles à la pratique ne sont pas néces­sai­re­ment stockées dans Geotrek-admin. De nombreuses collec­ti­vi­tés et gestion­naires de terri­toire disposent déjà de services carto­gra­phiques ou de réfé­ren­tiels métiers régu­liè­re­ment mis à jour. Plutôt que de dupliquer ces données dans Geotrek, le widget peut désor­mais les affi­cher direc­te­ment sous forme de surcouches carto­gra­phiques externes, venant enri­chir les itiné­raires, les sites et parcours outdoor, ainsi que les autres conte­nus valo­ri­sés sur la carte.

Il est ainsi possible de super­po­ser autant de couches que néces­saire, aux formats GeoJ­SON, WMS ou WMTS, et de lais­ser l’uti­li­sa­teur les affi­cher ou les masquer à la demande.

Exemple inter­ac­tif

Voici un exemple du widget avec des couches addi­tion­nelles.

 

Légende du sélec­teur de couches

Couche Type de couche Icône
Trou­peaux GeoJ­SON (JSON) 🐑
Patous GeoJ­SON (JSON) 🐕
Cours d’eau WMS 💧
Limites admi­nis­tra­tives WMTS

Code HTML

<link href="https://rando-widget.geotrek.fr/latest/dist/geotrek-rando-widget/geotrek-rando-widget.css" rel="stylesheet" />
<script type="module" src="https://rando-widget.geotrek.fr/latest/dist/geotrek-rando-widget/geotrek-rando-widget.esm.js"></script>
<script nomodule src="https://rando-widget.geotrek.fr/latest/dist/geotrek-rando-widget/geotrek-rando-widget.js"></script>

<grw-trek-provider
   trek-id="16496"
   api="https://demo-admin.geotrek.fr/api/v2/"
   languages="fr"
></grw-trek-provider>

<grw-map
    name-layer="IGN,OSM"
    url-layer="https://data.geopf.fr/wmts?SERVICE=WMTS&amp;REQUEST=GetTile&amp;VERSION=1.0.0&amp;LAYER=GEOGRAPHICALGRIDSYSTEMS.PLANIGNV2&amp;STYLE=normal&amp;FORMAT=image/png&amp;TILEMATRIXSET=PM&amp;TILEMATRIX={z}&amp;TILEROW={y}&amp;TILECOL={x},https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
    attribution-layer="IGN,OSM"
    elevation-default-state="hidden"
    custom-geojson-url="/custom-layers/assets/custom-troupeaux.json,/custom-layers/assets/custom-patous.json"
    custom-geojson-name="Troupeaux 🐑, Patous 🐕"
    custom-wms-url="https://data.geopf.fr/wms-r/wms"
    custom-wms-layers="IGNF_HYDROGRAPHY.HYDROGRAPHY"
    custom-wms-name="Cours d'eau 💧"
    custom-wms-attribution="© IGN"
    custom-tile-url="https://data.geopf.fr/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=LIMITES_ADMINISTRATIVES_EXPRESS.LATEST&STYLE=normal&FORMAT=image/png&TILEMATRIXSET=PM&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}"
    custom-tile-name="Limites Administratives 🇫🇷"
    custom-tile-attribution="© IGN"
></grw-map>

Trois formats pour répondre à tous les besoins

Cette fonc­tion­na­lité prend en charge plusieurs stan­dards large­ment utili­sés dans le domaine de la géoma­tique.

Les couches GeoJ­SON permettent d’af­fi­cher des données vecto­rielles avec leur style d’ori­gine (couleurs, symboles, trans­pa­ren­ce…). Lorsqu’elles contiennent les proprié­tés adap­tées (name, description ou image), le widget affiche auto­ma­tique­ment une fenêtre d’in­for­ma­tion lors d’un clic sur une entité.

Les services WMS sont parti­cu­liè­re­ment adap­tés aux données évolu­tives. Les cartes étant géné­rées à la demande par le serveur, elles reflètent en perma­nence l’état le plus récent des données publiées.

Les tuiles/couches WMTS, quant à elles, sont idéales pour des données plus statiques ou volu­mi­neuses. Grâce au prin­cipe des tuiles précal­cu­lées, elles offrent des perfor­mances d’af­fi­chage opti­males.

Un sélec­teur de couches simple et intui­tif

Toutes les couches confi­gu­rées appa­raissent dans un sélec­teur direc­te­ment inté­gré au compo­sant de carte.

L’uti­li­sa­teur peut ainsi acti­ver unique­ment les infor­ma­tions qui l’in­té­ressent, exac­te­ment comme il choi­sit aujour­d’hui son fond carto­gra­phique. Chaque couche conserve son état indé­pen­dam­ment des autres, offrant une expé­rience de navi­ga­tion fluide et person­na­li­sée.

Des données toujours à jour

Pour les couches addi­tion­nelles, un système de rafraî­chis­se­ment auto­ma­tique peut être activé très simple­ment grâce à un para­mètre de confi­gu­ra­tion.

Les données sont alors rechar­gées à inter­valles régu­liers (par exemple toutes les cinq minutes), unique­ment lorsque la couche est affi­chée. Si l’uti­li­sa­teur la masque puis la réac­tive, ce sont auto­ma­tique­ment les données les plus récentes qui sont récu­pé­rées.

Ce fonc­tion­ne­ment permet de diffu­ser des infor­ma­tions dyna­miques tout en limi­tant les requêtes inutiles et en préser­vant les perfor­mances de l’ap­pli­ca­tion.

Un cas d’usage concret : infor­mer les randon­neurs de la présence de trou­peaux

La fonc­tion­na­lité d’in­té­grer des couches addi­tion­nelles répond notam­ment à un besoin exprimé par le Conseil dépar­te­men­tal des Alpes-Mari­times dans le cadre du projet Randoxy­gène.

Sur ce terri­toire, des trou­peaux sont équi­pés de colliers GPS connec­tés. Leur posi­tion est actua­li­sée régu­liè­re­ment par un système externe. L’objec­tif est de préve­nir les randon­neurs lorsqu’un trou­peau se trouve à proxi­mité de l’iti­né­raire qu’ils consultent.

Grâce à cette nouvelle fonc­tion­na­lité, la posi­tion des trou­peaux peut être affi­chée direc­te­ment sur la carte via une surcouche externe, sans qu’il soit néces­saire de créer ou de mettre à jour des données dans Geotrek-admin. Les données sont rafraî­chies auto­ma­tique­ment au fil des mises à jour du service (WMS/WMTS) ou de la couche GeoJ­SON.

Cette solu­tion permet de diffu­ser des infor­ma­tions actua­li­sées sans les inté­grer dans Geotrek-admin. Les données restent gérées par leur produc­teur, tandis que Geotrek se charge de les valo­ri­ser auprès des utili­sa­teurs.

Voici une sélec­tion de pages utili­sant le widget person­na­lisé avec cette nouvelle fonc­tion­na­lité : 

Une fonc­tion­na­lité ouverte à de nombreux usages

Bien que cette fonc­tion­na­lité soit née d’un besoin bien iden­ti­fié, elle ouvre de nombreuses pers­pec­tives pour les terri­toires.

Elle permet par exemple d’af­fi­cher sur la carte des infor­ma­tions tempo­raires ou évolu­tives, comme des travaux, des restric­tions d’ac­cès, des zones de pâtu­rage, des risques natu­rels, ou encore des données mises à dispo­si­tion par des parte­naires. Chaque terri­toire peut ainsi enri­chir ses cartes avec les infor­ma­tions les plus perti­nentes pour ses usagers.

L’un des prin­ci­paux avan­tages est de pouvoir valo­ri­ser ces données sans avoir à les inté­grer dans Geotrek-admin. Elles restent gérées par leur orga­nisme d’ori­gine et sont simple­ment affi­chées dans le widget lorsqu’elles sont utiles aux randon­neurs. Les cartes gagnent ainsi en richesse, tout en limi­tant les opéra­tions de main­te­nance et de mise à jour.

Les utili­sa­teurs béné­fi­cient d’in­for­ma­tions toujours plus complètes, tandis que les données restent admi­nis­trées par leur produc­teur et sont valo­ri­sées direc­te­ment dans les cartes Geotrek.

Grâce à la prise en charge des formats GeoJ­SON, WMS, XYZ et WMTS, cette fonc­tion­na­lité s’in­tègre faci­le­ment avec les services carto­gra­phiques déjà utili­sés par de nombreuses collec­ti­vi­tés et gestion­naires d’es­paces natu­rels.

Pour aller plus loin

Retrou­vez tous les détails de cette fonc­tion­na­lité dans la docu­men­ta­tion du Geotrek-widget :

Formations associées

Formations Geotrek

Formation Administration et personnalisation de Geotrek

Toulouse ou distanciel A la demande

Voir la Formation Administration et personnalisation de Geotrek

Formations Geotrek

Formation Utilisation de Geotrek

Toulouse ou distanciel A la demande

Voir la Formation Utilisation de Geotrek

Actualités en lien

Confi­gu­rez votre Geotrek-widget en quelques clics !

19/02/2026

Geotrek-widget dispose désor­mais d’un nouveau construc­teur de confi­gu­ra­tion, acces­sible ici : https://geotrekce.github.io/Geotrek-rando-widget.  
Voir l'article
Image
Constructeur Geotrek widget

Décou­vrez les dernières avan­cées de Geotrek-widget

30/07/2024

Nous sommes ravis de vous présen­ter les dernières avan­cées de Geotrek-Widget, qui a fait l’objet de nombreux déve­lop­pe­ments ces derniers mois pour amélio­rer son inter­face et ses fonc­tion­na­li­tés.
Voir l'article
Image
Widget météo

Du nouveau pour Geotrek-widget !

30/04/2024

Depuis sa première version en 2022, ce widget a connu des améliorations significatives tant sur le plan visuel que fonctionnel. Découvrez ces nouvelles évolutions de Geotrek-Widget.
Voir l'article
Image
Geotrek-Widget 2024

Inscription à la newsletter

Nous vous avons convaincus