En 2024, le Dépar­te­ment des Alpes-Mari­times a soutenu le projet en finançant de nouvelles évolu­tions. L’objec­tif est de propo­ser aux Maral­pins et touristes des Alpes-Mari­times une progres­sive web-app acces­sible sur desk­top et mobile, qui soit la plus riche possible en termes de fonc­tion­na­li­tés pour la promo­tion d’iti­né­raires de randon­nées.

Dans la suite de cet article, nous vous détaillons toutes les nouvelles fonc­tion­na­li­tés appor­tées à notre widget lors de cette troi­sième phase de déve­lop­pe­ment. Toutes ces amélio­ra­tions, passées et en cours, sont consul­tables en libre accès sur GitHub.

Geotrek-widget en quelques mots

Avec la popu­la­rité crois­sante de Geotrek et le nombre toujours plus impor­tant d’iti­né­raires de randon­née gérés, il est devenu néces­saire de diffu­ser ces conte­nus plus large­ment. C’est pourquoi Geotrek-Widget a été créé, le dernier compo­sant de la suite Geotrek. Ce widget permet aux orga­nismes locaux, tels que les collec­ti­vi­tés terri­to­riales et les offices de tourisme, de présen­ter l’offre de randon­née corres­pon­dant à leur terri­toire sur leur propre site web, sans avoir besoin d’un portail dédié et avec un inves­tis­se­ment tech­nique mini­mum.

Le widget est conçu en respon­sive design pour aider les visi­teurs à prépa­rer leur séjour sur diffé­rents types d’écrans. Il permet de consul­ter les itiné­raires et les points d’in­té­rêt patri­mo­niaux saisis dans l’in­ter­face Geotrek-Admin, ainsi que d’ac­cé­der aux offres de conte­nus touris­tiques et événe­ments. Il offre égale­ment des fonc­tion­na­li­tés tech­niques pour les randon­neurs et les cyclo­tou­ristes, telles que la possi­bi­lité de télé­char­ger une fiche topo­guide au format PDF, d’ac­cé­der au profil alti­mé­trique et d’ex­por­ter les traces : fichiers KML, GPX, etc. Le widget est para­mé­trable en plusieurs langues en fonc­tion des langues gérées dans l’in­ter­face d’ad­mi­nis­tra­tion Geotrek-Admin.

En résumé, Geotrek-Widget offre les fonc­tion­na­li­tés suivantes : une page de recherche d’iti­né­raires avec visua­li­sa­tion des résul­tats sous forme de listes et de picto­grammes sur la carte, des fiches de présen­ta­tion des itiné­raires, la mise en avant de randon­nées itiné­rantes avec gestion des étapes, et des fiches pour les conte­nus et événe­ments touris­tiques. Le code source du widget est libre de droit et consul­table sur Github Geotrek-Widget à l’adresse suivante.

Makina Corpus propose un support à l’ins­tal­la­tion et une assis­tance à la confi­gu­ra­tion sur demande, ainsi qu’une propo­si­tion de main­te­nance.

Nouveau­tés de Geotrek-widget

• Gestion de l’out­door : gestion des sites et des parcours, prise en compte des nombreux attri­buts, niveaux hiérar­chiques de conte­nus et cota­tions multiples
• Inté­gra­tion dans une PWA et gestion du hors ligne : utili­sa­tion du widget dans un site en mode PWA, choix des conte­nus à mettre en hors ligne
• Para­mé­trage des styles : choix de la police, surcharge de style de certains compo­sants, surcharge via une feuille de CSS
• Gestion de la météo : affi­chage de la météo liée à la commune de départ de l’iti­né­raire
• Amélio­ra­tion des four­nis­seurs de données : géné­ra­tion d’un widget conte­nant la fiche d’un seul objet

Évolu­tions tech­niques et fonc­tion­nelles

Valo­ri­sa­tion des objets issus du module Outdoor

Jusqu’à présent, le widget était prin­ci­pa­le­ment utilisé pour valo­ri­ser les itiné­raires ainsi que les conte­nus et évène­ments touris­tiques.

Des déve­lop­pe­ments ont donc été réali­sés pour inté­grer et mettre en avant les pratiques spor­tives conte­nus dans le module Outdoor de Geotrek-Admin.

Cette nouvelle fonc­tion­na­lité comprend plusieurs éléments :

• La gestion des sites : les utili­sa­teurs peuvent désor­mais accé­der à des infor­ma­tions détaillées sur les diffé­rents sites de pratique comme l’es­ca­lade, l’al­pi­nisme, la via ferrata, le canyo­ning, le kayak, le vol libre, la plon­gée…
• La gestion des parcours : en plus des itiné­raires, les utili­sa­teurs peuvent égale­ment consul­ter les parcours de pratique, voie d’es­ca­lade, parcours d’eau vive par exemple, et les infor­ma­tions asso­ciées.
• Le point d’en­trée est un site outdoor : les utili­sa­teurs peuvent accé­der aux conte­nus outdoor direc­te­ment depuis la page d’un site de pratique.
• Prise en compte des niveaux hiérar­chiques de conte­nus : les conte­nus outdoor sont orga­ni­sés de manière hiérar­chique, ce qui permet une navi­ga­tion plus intui­tive.
• Prises en compte des nombreux attri­buts, des cota­tions multiples : les conte­nus outdoor comportent de nombreux attri­buts et cota­tions, qui sont désor­mais pris en compte dans le widget.
• Repro­duc­tion des méca­nismes de filtres exis­tants sur Geotrek-Rando : les utili­sa­teurs peuvent utili­ser les mêmes méca­nismes de filtres que sur Geotrek-Rando pour affi­ner leur recherche de conte­nus outdoor.

Ces nouveau­tés permettent aux utili­sa­teurs de béné­fi­cier d’une expé­rience plus complète et person­na­li­sée en fonc­tion de leurs pratiques spor­tives.

Exemple inter­ac­tif

Voici un exemple de widget inté­gré avec l’API v2 du Parc Natu­rel de Port Cros, affi­chant les conte­nus outdoor.

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-app
    app-width="100%"
    app-height="100vh"
    api="https://geotrek-admin.portcros-parcnational.fr/api/v2/"
    languages="fr"
    name-layer="IGN,OpenStreetMap"
    url-layer="https://data.geopf.fr/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=GEOGRAPHICALGRIDSYSTEMS.PLANIGNV2&STYLE=normal&FORMAT=image/png&TILEMATRIXSET=PM&TILEMATRIX={z}&TILEROW={y}&TILECOL={x},https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
    attribution-layer="<a target='_blank' href='https://ign.fr/'>IGN</a>,OpenStreetMap"
    weather="true"
    treks="true"
    outdoor="true"
    touristic-contents="true"
    touristic-events="true"
    rounded="true"
    color-departure-icon="#006b3b"
    color-arrival-icon="#85003b"
    color-sensitive-area="#4974a5"
    color-trek-line="#003e42"
    color-poi-icon="#974c6e"
    color-primary-app="#008eaa"
    color-on-primary="#ffffff"
    color-surface="#1c1b1f"
    color-on-surface="#49454e"
    color-surface-variant="#fff"
    color-on-surface-variant="#1c1b1f"
    color-primary-container="#94CCD8"
    color-on-primary-container="#005767"
    color-secondary-container="#94CCD8"
    color-on-secondary-container="#1d192b"
    color-background="#fff"
    color-surface-container-high="#fff"
    color-surface-container-low="#fff"
    fab-background-color="#94CCD8"
    fab-color="#003e42"
></grw-app>

Para­mé­trage du widget

Jusqu’alors, le widget ne pouvait être para­mé­tré que dans une certaine mesure, avec des options limi­tées à la modi­fi­ca­tion des couleurs et des données. Il n’était donc pas possible de person­na­li­ser entiè­re­ment le style du widget, comme les polices de carac­tères, les encarts ou les boutons.

Cepen­dant, les nouveaux déve­lop­pe­ments effec­tués ont permis d’ajou­ter une fonc­tion­na­lité impor­tante lors de l’in­té­gra­tion du widget sur une page web. Désor­mais, il est possible d’y asso­cier une feuille de proprié­tés CSS, permet­tant ainsi de surchar­ger l’en­semble des styles du widget. Cette nouveauté est parti­cu­liè­re­ment utile pour faire corres­pondre le style du widget à celui déjà utilisé sur le site où ce dernier est inté­gré.

Grâce à cette fonc­tion­na­lité, il est main­te­nant possible de para­mé­trer les styles du widget de manière beau­coup plus fine. Voici quelques-unes des nouvelles options de person­na­li­sa­tion :

• Ajout d’un para­mètre pour choi­sir entre des bords arron­dis ou non.
• Ajout d’un para­mètre pour sélec­tion­ner la police de carac­tères.
• Possi­bi­lité de surchar­ger via une feuille de style CSS le style complet des compo­sants du widget.
• Gestion de la surcharge de style de certains compo­sants sur la carte, comme les popups et les pins.

Enfin, la docu­men­ta­tion four­nit désor­mais un exemple de fichier CSS pour aider les utili­sa­teurs à person­na­li­ser leur widget en fonc­tion de leurs besoins.

Fonc­tion­ne­ment en mode « offline » et PWA

Des amélio­ra­tions ont été appor­tées au widget pour lui permettre de fonc­tion­ner en mode hors connexion et en tant que Progres­sive Web App (PWA).

Désor­mais, tout site souhai­tant utili­ser le widget en PWA doit l’en­re­gis­trer dans son mani­fest. En complé­ment de cette fonc­tion­na­lité, le widget permet égale­ment le stockage de données hors connexion. Les conte­nus marqués comme « hors ligne » par l’uti­li­sa­teur sont enre­gis­trés dans le service worker asso­cié au widget.

Voici quelques-unes des fonc­tion­na­li­tés incluses dans ces déve­lop­pe­ments :

• Possi­bi­lité d’uti­li­ser le widget dans un site en mode PWA
• Gestion des conte­nus hors ligne
• Ajout d’un bouton pour sélec­tion­ner les conte­nus à mettre en hors ligne

Image

Ce qui change au niveau de la confi­gu­ra­tion du widget

• Acti­ver/désac­ti­ver le fonc­tion­ne­ment en mode hors ligne.

Exemple d’ac­ti­va­tion du mode hors ligne dans une PWA

      <grw-app
        enable-offline="true"
      ></grw-app>

Widget Météo

Geotrek-Widget est main­te­nant en mesure de gérer les infor­ma­tions météo­ro­lo­giques, tout comme Geotrek-Rando. Pour ce faire, nous avons choisi de faire appel au service Météo-France, qui affiche les prévi­sions météo liées à la commune de départ de l’iti­né­raire.

Cette fonc­tion­na­lité est facul­ta­tive et peut être désac­ti­vée par les autres terri­toires utili­sant Geotrek qui ne souhai­te­raient pas béné­fi­cier de cette option.

Image

Ce qui change au niveau de la confi­gu­ra­tion du widget

• Acti­ver/désac­ti­ver le widget Météo-France dans le widget

Exemple de désac­ti­va­tion de l’af­fi­chage de la météo :

      <grw-app
        weather="false"
      ></grw-app>

Amélio­ra­tion des four­nis­seurs de données

Il est main­te­nant possible de géné­rer un widget conte­nant la fiche d’un seul objet, tel qu’une randon­née, un service ou un site outdoor, sans la partie recherche.

Pour en savoir plus sur les four­nis­seurs de données, nous vous invi­tons à consul­ter notre docu­men­ta­tion en ligne à l’adresse suivante : .

Ce qui change au niveau de la confi­gu­ra­tion du widget

• Géné­rer un widget conte­nant la fiche d’un seul objet

Exemple de géné­ra­tion d’un widget conte­nant la fiche d’un seul itiné­raire

<grw-trek-provider
	api="https://geotrek-admin.portcros-parcnational.fr/api/v2/" trek-id="690">
</grw-trek-provider>
<grw-trek-detail>
</grw-trek-detail>

Pers­pec­tives d’évo­lu­tions

La troi­sième phase de déve­lop­pe­ment de Geotrek-Widget est termi­née et une quatrième phase s’amorce avec de nombreuses évolu­tions prévues pour les prochains mois. En voici quelques unes :

• Amélio­rer l’in­ter­face des filtres conte­nant un grand volume de données
• Permettre de trier les conte­nus affi­chés sur la carte : nom, distance, diffi­culté, déni­velé
• Permettre d’in­clure ou exclure une liste d’iti­né­raires
• Dans les filtres n’af­fi­cher que les communes traver­sées par les randon­nées
• Permettre à l’uti­li­sa­teur de cliquer sur un bouton « Se rendre au départ »
• Affi­cher une bous­sole sur la carte
• Ajout d’un bouton pour parta­ger la page web visi­tée par l’uti­li­sa­teur sur les réseaux sociaux
• Gérer les noti­fi­ca­tions locales
• Propo­ser une inter­face de confi­gu­ra­tion plus auto­ma­ti­sée et intui­tive pour le Story­book
• Pouvoir trans­for­mer le widget en appli­ca­tion mobile avec une utili­sa­tion mobile semblable aux appli­ca­tions natives pour la gestion des noti­fi­ca­tions, gestion des auto­ri­sa­tions, partage de liens, compor­te­ments carto­gra­phiques

Retrou­vez toutes les évolu­tions réali­sées et à venir en ligne :

Conclu­sion

En savoir +

Rendez-vous sur la 📝 docu­men­ta­tion de Geotrek-Rando-Widget pour connaître tous les détails d’ins­tal­la­tion et de confi­gu­ra­tion de l’ou­til.