Merge pull request #145 from GeotrekCE/mfu-update-doc

[Doc] Add examples and infos about css markers
GeotrekCE · Jul 25, 2024 · fa715e0 · fa715e0
2 parents 2a3955b + d9aafe8
commit fa715e0
Show file tree

Hide file tree

Showing 11 changed files with 194 additions and 6 deletions.
diff --git a/docs/.vitepress/config/en.ts b/docs/.vitepress/config/en.ts
@@ -82,6 +82,7 @@ function sidebar(): DefaultTheme.SidebarItem[] {
         items: [
           { text: 'Application', link: '/en/documentation/examples/application' },
           { text: 'Treks app', link: '/en/documentation/examples/app-treks' },
+          { text: 'Treks app', link: '/en/documentation/examples/app-treks_bike' },
           { text: 'Outdoors app', link: '/en/documentation/examples/app-outdoors' },
           { text: 'Touristic contents app', link: '/en/documentation/examples/app-touristic-contents' },
           { text: 'Touristic events app', link: '/en/documentation/examples/app-touristic-events' },

diff --git a/docs/.vitepress/config/fr.ts b/docs/.vitepress/config/fr.ts
@@ -118,6 +118,7 @@ function sidebar(): DefaultTheme.SidebarItem[] {
         items: [
           { text: 'Application', link: '/documentation/examples/application' },
           { text: 'Application itinéraires', link: '/documentation/examples/app-treks' },
+          { text: 'Application itinéraires VTT', link: '/documentation/examples/app-treks_vtt' },
           { text: 'Application outdoors', link: '/documentation/examples/app-outdoors' },
           { text: 'Application contenus touristiques', link: '/documentation/examples/app-touristic-contents' },
           { text: 'Application événements touristiques', link: '/documentation/examples/app-touristic-events' },

diff --git a/docs/documentation/examples/app-treks.md b/docs/documentation/examples/app-treks.md
@@ -98,3 +98,4 @@ Pour afficher uniquement les **itinéraires** dans le widget, il faut que la bal
     ></grw-app>
   </div>
 </ClientOnly>
+
diff --git a/docs/documentation/examples/app-treks_vtt.md b/docs/documentation/examples/app-treks_vtt.md
@@ -0,0 +1,111 @@
+---
+head:
+  - - script
+    - defer: true
+      nomodule: true
+      src: https://rando-widget.geotrek.fr/latest/dist/geotrek-rando-widget/geotrek-rando-widget.js
+  - - script
+    - defer: true
+      type: module
+      src: https://rando-widget.geotrek.fr/latest/dist/geotrek-rando-widget/geotrek-rando-widget.esm.js
+  - - link
+    - href: https://rando-widget.geotrek.fr/latest/dist/geotrek-rando-widget/geotrek-rando-widget.css
+      rel: stylesheet
+---
+
+## Code
+
+Pour afficher uniquement les **itinéraires de pratique VTT** dans le widget, il faut que :
+- la balise `grw-app` embarque le paramètre suivant à `true` :
+
+```html
+<grw-app ... treks="true"></grw-app>
+```
+
+- le paramètre `practices` soit renseigné avec l'identifiant de la pratique :
+
+```html
+<grw-app ... practices="1"></grw-app>
+```
+> [!INFO]
+> * Si l'on souhaite afficher des itiénraires pour plusieurs pratiques, il faut lister les identifiants des pratiques comme ceci : 
+>```html
+><grw-app ... practices="1,2"></grw-app>
+>```
+> * Pour connaître la liste des identifiants de pratiques (remplacer par l'API souhaitée) :
+> `https://demo-admin.geotrek.fr/api/v2/trek_practice/?language=fr`
+
+**Voici un exemple de code complet :**
+
+```html
+    <div>
+      <grw-app
+      app-width="100%"
+      app-height="100%"
+      api="https://admin.rando-loireanjoutouraine.fr/api/v2/"
+      languages="fr,en"
+      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"
+      treks="true"
+      weather="true"
+      rounded="true"
+      practices="1"
+      color-departure-icon="#006b3b"
+      color-arrival-icon="#85003b"
+      color-sensitive-area="#4974a5"
+      color-poi-icon="#974c6e"
+      color-primary-app="#147D85"
+      color-on-primary="#ffffff"
+      color-surface="#1c1b1f"
+      color-on-surface="#49454e"
+      color-surface-variant="#fff"
+      color-on-surface-variant="#1c1b1f"
+      color-primary-container="#d1e3e6"
+      color-on-primary-container="#003e42"
+      color-secondary-container="#d1e3e6"
+      color-on-secondary-container="#1d192b"
+      fab-background-color="#d1e3e6"
+      fab-color="#003e42"
+      color-trek-line="#003e42"
+  ></grw-app>
+</div>
+```
+
+## Exemple de widget avec uniquement des itinéraires VTT
+
+<ClientOnly>
+  <div>
+    <grw-app
+      app-width="100%"
+      app-height="100%"
+      api="https://admin.rando-loireanjoutouraine.fr/api/v2/"
+      languages="fr,en"
+      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"
+      treks="true"
+      weather="true"
+      rounded="true"
+      practices="1"
+      color-departure-icon="#006b3b"
+      color-arrival-icon="#85003b"
+      color-sensitive-area="#4974a5"
+      color-poi-icon="#974c6e"
+      color-primary-app="#147D85"
+      color-on-primary="#ffffff"
+      color-surface="#1c1b1f"
+      color-on-surface="#49454e"
+      color-surface-variant="#fff"
+      color-on-surface-variant="#1c1b1f"
+      color-primary-container="#d1e3e6"
+      color-on-primary-container="#003e42"
+      color-secondary-container="#d1e3e6"
+      color-on-secondary-container="#1d192b"
+      fab-background-color="#d1e3e6"
+      fab-color="#003e42"
+      color-trek-line="#003e42"
+    ></grw-app>
+  </div>
+</ClientOnly>
+
diff --git a/docs/documentation/examples/application.md b/docs/documentation/examples/application.md
@@ -22,7 +22,7 @@ Pour afficher les **itinéraires**, les **activités outdoors**, les **contenus
 ```
 
 > [!CAUTION]
-> Pour des raisons de lisibilité, il est déconseiller d'afficher plus de quatre segments dans le widget.
+> Pour des raisons de lisibilité, il est déconseillé d'afficher plus de quatre segments dans le widget.
 
 **Voici un exemple de code complet :**
 

diff --git a/docs/documentation/introduction/overview.md b/docs/documentation/introduction/overview.md
@@ -1,3 +1,17 @@
+---
+head:
+  - - script
+    - defer: true
+      nomodule: true
+      src: https://rando-widget.geotrek.fr/latest/dist/geotrek-rando-widget/geotrek-rando-widget.js
+  - - script
+    - defer: true
+      type: module
+      src: https://rando-widget.geotrek.fr/latest/dist/geotrek-rando-widget/geotrek-rando-widget.esm.js
+  - - link
+    - href: https://rando-widget.geotrek.fr/latest/dist/geotrek-rando-widget/geotrek-rando-widget.css
+      rel: stylesheet
+---
 # Geotrek-rando-widget
 
 **Geotrek-rando-widgek**, dernier composant de la suite Geotrek, permet aux structures telles que les collectivités territoriales, les offices du tourisme ou d'autres EPCI chargés de la **valorisation d'un territoire**, d'**intégrer facilement les contenus géographiques de leur territoire sur leur site web**, aussi simplement qu'une vidéo YouTube.
@@ -14,7 +28,42 @@ En résumé, il offre une **souplesse d'intégration et de promotion des contenu
 
 Ce widget, développé dans le cadre du projet communautaire Geotrek, est **libre de droit** et son code source est consultable sur [Github](https://github.com/GeotrekCE/geotrek-rando-widget).
 
-[[Insérer widget ici]]
+<ClientOnly>
+  <div>
+    <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"
+      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>
+  </div>
+</ClientOnly>
 
 ## Fonctionnalités principales
 
@@ -45,6 +94,6 @@ Voici des exemples d'intégration du de Geotrek-rando-widget en conditions réel
 - [Jurabsolu](https://www.jurabsolu.fr/decouvrez-territoire-jura/randonnees-forets-vignes-jura/)
 - [Sidobre Vals et Plateaux](https://sidobre-vallees-tourisme.com/type_activite/balades-et-randonnees-sidobre-vallees/)
 - [Haut Jura Saint-Claude](https://www.haut-jura-saint-claude.com/pause-aventure/randonnee-haut-jura/)
-- [Coeur du Jura](https://www.coeurdujura-tourisme.com/parcours-randonnees-velo/)
-
- 
+- [Coeur du Jura - randonnées vélo](https://www.coeurdujura-tourisme.com/parcours-randonnees-velo/)
+- [Coeur du Jura - randonnées pédestre](https://www.coeurdujura-tourisme.com/widget-geotrek/)
+- [La Toscane Occitane](https://www.la-toscane-occitane.com/a-voir-a-faire/balades-randonnees)
diff --git a/docs/documentation/theme/advanced-customization.md b/docs/documentation/theme/advanced-customization.md
@@ -93,3 +93,24 @@ Ce qui donne ce résultat :
       attribution-layer="<a target='_blank' href='https://ign.fr/'>IGN</a>"
     ></grw-app>
 </div>
+
+## Modifier la taille des marqueurs sur la carte
+
+Il est possible de gérer la taille des marqueurs avec les paramètres suivants :
+- `main-marker-size`
+- `selected-main-marker-size`
+- `main-cluster-size`
+- `common-marker-size`
+- `common-marker-size`
+- `departure-arrival-marker-size`
+- `point-reference-marker-size`
+
+
+De plus, il est possible d'influer sur la taille des icônes avec les variables CSS globales suivantes : 
+- `--main-marker-icon-width` 
+- `--common-marker-icon-width`
+
+Ces variables CSS prennent par défaut 80% de la largeur et la hauteur s'adapte automatiquement.
+
+> [!INFO]
+> Certaines `parts` existent aussi afin de changer d'autres options, comme le radius.
diff --git a/docs/en/documentation/examples/app-treks_bike.md b/docs/en/documentation/examples/app-treks_bike.md
diff --git a/src/components.d.ts b/src/components.d.ts
@@ -46,6 +46,7 @@ export namespace Components {
         "inBbox": string;
         "labels": string;
         "languages": string;
+        "largeViewSize": number;
         "mainClusterSize": number;
         "mainMarkerSize": number;
         "nameLayer": string;
@@ -942,6 +943,7 @@ declare namespace LocalJSX {
         "inBbox"?: string;
         "labels"?: string;
         "languages"?: string;
+        "largeViewSize"?: number;
         "mainClusterSize"?: number;
         "mainMarkerSize"?: number;
         "nameLayer"?: string;

diff --git a/src/components/grw-app/grw-app.tsx b/src/components/grw-app/grw-app.tsx
@@ -96,7 +96,8 @@ export class GrwApp {
   @Prop() departureArrivalMarkerSize = 14;
   @Prop() pointReferenceMarkerSize = 24;
 
-  largeViewSize = 1024;
+  @Prop() largeViewSize = 1024;
+
   handlePopStateBind: (event: any) => void = this.handlePopState.bind(this);
 
   @Listen('trekCardPress', { target: 'window' })

diff --git a/src/components/grw-app/readme.md b/src/components/grw-app/readme.md
@@ -46,6 +46,7 @@
 | `inBbox`                     | `in-bbox`                       |             | `string`  | `undefined` |
 | `labels`                     | `labels`                        |             | `string`  | `undefined` |
 | `languages`                  | `languages`                     |             | `string`  | `'fr'`      |
+| `largeViewSize`              | `large-view-size`               |             | `number`  | `1024`      |
 | `mainClusterSize`            | `main-cluster-size`             |             | `number`  | `48`        |
 | `mainMarkerSize`             | `main-marker-size`              |             | `number`  | `32`        |
 | `nameLayer`                  | `name-layer`                    |             | `string`  | `undefined` |
Original file line number	Diff line number	Diff line change
Expand Up		@@ -98,3 +98,4 @@ Pour afficher uniquement les itinéraires dans le widget, il faut que la bal
		></grw-app>
		</div>
		</ClientOnly>