docs: Tutorials review and improvements

This commit is contained in:
David Larlet 2024-05-10 13:30:23 -04:00
parent b6262f04b7
commit 6d87a5b5f3
No known key found for this signature in database
GPG key ID: 3E2953A359E7E7BD
31 changed files with 138 additions and 39 deletions

View file

@ -7,10 +7,31 @@
## Procédons par étapes ## Procédons par étapes
![aide-miseenforme.png](../../static/tutoriels/5-je-cree-des-infobulles-multimedia/aide-miseenforme.png) <shot-scraper
data-output="static/tutoriels/help-box.png"
data-url="https://umap.openstreetmap.fr/fr/map/new/"
data-alt="Panneau daide au formatage."
data-caption="Panneau daide au formatage."
data-selector=".umap-help-box"
data-width="510"
data-height="326"
data-padding="5"
data-javascript="
new Promise((takeShot) => {
document.querySelector('.leaflet-toolbar-icon.umap-control-caption').click();
setTimeout(() => {
document.querySelector('.umap-field-description .umap-help-button').click();
setTimeout(() => {
takeShot();
}, 1000);
}, 1000);
});
"
>Panneau daide au formatage.</shot-scraper>
Nous avons vu dans Nous avons vu dans
le tutoriel [Je consulte une carte uMap](1-browsing-a-map.md) le tutoriel [Naviguer dans une carte](1-browsing-a-map.md)
comment associer un nom et comment associer un nom et
une description à un élément de la carte. Ce nom et cette description une description à un élément de la carte. Ce nom et cette description
sont affichés dans une infobulle (*popup* en anglais) qui apparaît sont affichés dans une infobulle (*popup* en anglais) qui apparaît

View file

@ -9,8 +9,8 @@
### 1. Créer un calque ### 1. Créer un calque
Reprenons la [carte du Festival des 3 continents](http://u.osmfr.org/m/26381/) Reprenons la [carte du Festival des 3 continents](http://u.osmfr.org/m/26381/)
vu dans le tutoriel [Je consulte une carte uMap](1-browsing-a-map.md). Les vu dans le tutoriel [Naviguer dans une carte](1-browsing-a-map.md). Les
données de cette carte sont organisées en plusieurs calques : données de cette carte sont organisées en plusieurs calques :
- les cinémas : marqueurs jaunes - les cinémas : marqueurs jaunes
- les autres lieux du festival : marqueurs bruns - les autres lieux du festival : marqueurs bruns
@ -25,14 +25,20 @@ calque peut être décrit dans le panneau latéral de la carte. Organiser
les éléments dune carte est donc pratique pour consulter la carte, nous les éléments dune carte est donc pratique pour consulter la carte, nous
verrons aussi que cela permet de faciliter sa création. verrons aussi que cela permet de faciliter sa création.
![umap_edit_layers.png](../../static/tutoriels/6-je-structure-ma-carte-avec-des-calques/umap_edit_layers.png) <shot-scraper
data-output="static/tutoriels/control-browse.png"
data-url="https://umap.openstreetmap.fr/en/map/new/"
data-alt="Icône du sélecteur de calque(s)."
data-selector=".umap-control-browse"
data-width="48"
data-height="48"
data-padding="5"
>Icône du sélecteur de calque(s).</shot-scraper>
Le menu **Gérer les Le menu **Gérer les calques**, disponible en mode édition, affiche la liste des calques
calques**, disponible en mode édition, affiche la liste des calques
existants et permet de créer un nouveau calque. Cliquez ensuite sur existants et permet de créer un nouveau calque. Cliquez ensuite sur
**Ajouter un calque**, apparaît alors le panneau **Propriétés de la **Ajouter un calque**, apparaît alors le panneau **Propriétés du calque**
couche** du nouveau calque (*calque* ou *couche*, les deux termes sont du nouveau calque.
équivalents).
![](../../static/tutoriels/6-je-structure-ma-carte-avec-des-calques/umap_layer_props_top.png) ![](../../static/tutoriels/6-je-structure-ma-carte-avec-des-calques/umap_layer_props_top.png)
@ -112,8 +118,7 @@ panneau de gestion des calques cliquez sur le crayon pour éditer les
propriétés du calque. Les onglets **Propriétés de la forme** et propriétés du calque. Les onglets **Propriétés de la forme** et
**Propriétés avancées** vous permettent de définir les styles par défaut **Propriétés avancées** vous permettent de définir les styles par défaut
du calque. Vous retrouvez les mêmes propriétés que celles utilisées dans du calque. Vous retrouvez les mêmes propriétés que celles utilisées dans
le tutoriel le tutoriel [Créer un compte](3-create-account.md).
[Jutilise un compte et crée une belle carte](3-create-account.md).
![umap_legende.png](../../static/tutoriels/6-je-structure-ma-carte-avec-des-calques/umap_legende.png) ![umap_legende.png](../../static/tutoriels/6-je-structure-ma-carte-avec-des-calques/umap_legende.png)
@ -142,7 +147,7 @@ glisser-déposer. Lordre ainsi défini est celui que lon retrouve dans
le sélecteur de calques et dans la liste des calques du panneau À le sélecteur de calques et dans la liste des calques du panneau À
Propos. Propos.
Loeil permet de cacher/afficher un calque et la loupe de zoomer sur son Lœil permet de cacher/afficher un calque et la loupe de zoomer sur son
contenu, comme pour le sélecteur de calques. Nous verrons plus loin contenu, comme pour le sélecteur de calques. Nous verrons plus loin
lutilité d**Éditer dans un tableau** le contenu du calque. **Supprimer lutilité d**Éditer dans un tableau** le contenu du calque. **Supprimer
le calque** vous demandera de confirmer lopération, cette opération le calque** vous demandera de confirmer lopération, cette opération

View file

@ -9,17 +9,25 @@
### 1. Insérer une carte dans une page HTML ### 1. Insérer une carte dans une page HTML
Nous avons vu dans le tutoriel Nous avons vu dans le tutoriel
[Je consulte une carte uMap](1-browsing-a-map.md) que [Naviguer dans une carte](1-browsing-a-map.md) que
le menu de partage permet d*embarquer une carte en iframe*, sans donner le menu de partage permet d*embarquer une carte en iframe*, sans donner
plus de détail. Voyons comment cela se passe. plus de détail. Voyons comment cela se passe.
![umap_share.png](../../static/tutoriels/7-je-publie-ma-carte-et-en-controle-lacces/umap_share.png) <shot-scraper
data-output="static/tutoriels/control-embed.png"
data-url="https://umap.openstreetmap.fr/en/map/new/"
data-alt="Icône du partage et de lintégration."
data-selector=".leaflet-control-embed"
data-width="48"
data-height="48"
data-padding="5"
>Permet de partager la carte ou den exporter les données.</shot-scraper>
Une **iframe** est une balise du langage informatique HTML qui permet Une **iframe** est une balise du langage informatique HTML qui permet
dintégrer (embarquer) le contenu dune page Web dans une autre page dintégrer (embarquer) le contenu dune page Web dans une autre page
Web. Cest en fait très simple et nous avons déjà utilisé ce mécanisme Web. Cest en fait très simple et nous avons déjà utilisé ce mécanisme
pour intégrer une vidéo dans le tutoriel pour intégrer une vidéo dans le tutoriel
[Je crée des infobulles multimédia](5-multimedia-tooltips.md). [Infobulles multimedia](5-multimedia-tooltips.md).
![export-iframe.png](../../static/tutoriels/7-je-publie-ma-carte-et-en-controle-lacces/export-iframe.png) ![export-iframe.png](../../static/tutoriels/7-je-publie-ma-carte-et-en-controle-lacces/export-iframe.png)
@ -93,7 +101,7 @@ nous ne souhaitons pas intégrer le sélecteur de calques.
Longlet **Options dexport de liframe** permet de contrôler tout cela. Longlet **Options dexport de liframe** permet de contrôler tout cela.
Certaines de ces options correspondent aux **Options dinterface** vu Certaines de ces options correspondent aux **Options dinterface** vu
dans le tutoriel dans le tutoriel
[Je modifie et personnalise ma carte](4-customize-map.md). Il suffit [Personnaliser sa carte](4-customize-map.md). Il suffit
dactiver ces options pour que le *code dimport de liframe* soit dactiver ces options pour que le *code dimport de liframe* soit
modifié. Une fois les options choisies, copiez ce code puis intégrez-le modifié. Une fois les options choisies, copiez ce code puis intégrez-le
dans celui votre page Web. dans celui votre page Web.
@ -142,14 +150,45 @@ calques.
### 4. Définir qui peut voir ou modifier la carte ### 4. Définir qui peut voir ou modifier la carte
![umap_edit_rights.png](../../static/tutoriels/7-je-publie-ma-carte-et-en-controle-lacces/umap_edit_rights.png) <shot-scraper
data-output="static/tutoriels/map-permissions.png"
data-url="https://umap.openstreetmap.fr/fr/map/new/"
data-alt="Bouton de gestion des permissions."
data-width="46"
data-height="47"
data-selector=".leaflet-toolbar-icon.update-map-permissions"
data-padding="5"
>Bouton de gestion des permissions.</shot-scraper>
Le bouton **Changer Le bouton **Changer
les permissions et les éditeurs** donne accès au panneau **Permissions les permissions et les éditeurs** donne accès au panneau **Permissions
de la carte**. Celui-ci vous permet de contrôler, pour chaque carte, qui de la carte**. Celui-ci vous permet de contrôler, pour chaque carte, qui
peut la voir et qui peut la modifier. peut la voir et qui peut la modifier.
![permissions.png](../../static/tutoriels/7-je-publie-ma-carte-et-en-controle-lacces/permissions.png) <shot-scraper
data-output="static/tutoriels/map-permissions-panel.png"
data-url="https://umap.openstreetmap.fr/fr/map/new/"
data-alt="Panneau des permissions."
data-caption="Panneau des permissions."
data-width="410"
data-height="414"
data-selector=".panel.right"
data-padding="5"
data-wait-for="document.querySelector('.panel.right')"
data-javascript="
new Promise((takeShot) => {
document.querySelector('.leaflet-control-edit-save').click();
document.querySelector('#umap-alert-container').style.display='none';
setTimeout(() => {
document.querySelector('.leaflet-toolbar-icon.update-map-permissions').click();
setTimeout(() => {
takeShot();
}, 1000);
}, 1000);
});
"
>Panneau des permissions.</shot-scraper>
Lorsque vous créez une carte celle-ci est visible dans votre *catalogue* Lorsque vous créez une carte celle-ci est visible dans votre *catalogue*
de cartes, dont ladresse est de cartes, dont ladresse est

View file

@ -22,12 +22,20 @@ Revenons à la carte de nos vacances à Crozon. Un jour de beau temps nous
louons un dériveur et naviguons dans la zone définie par le club louons un dériveur et naviguons dans la zone définie par le club
nautique. Ajoutons cette zone à la carte. nautique. Ajoutons cette zone à la carte.
![umap_edit_polygon.png](../../static/tutoriels/8-le-cas-des-polygones/umap_edit_polygon.png) <shot-scraper
data-output="static/tutoriels/draw-polygon.png"
data-url="https://umap.openstreetmap.fr/fr/map/new/"
data-alt="Bouton de dessin de polygones."
data-width="46"
data-height="47"
data-selector=".leaflet-toolbar-icon.umap-draw-polygon"
data-padding="5"
>Bouton de dessin de polygones.</shot-scraper>
Le bouton Le bouton
**Dessiner un polygone** permet de tracer le périmètre dun polygone **Dessiner un polygone** permet de tracer le périmètre dun polygone
point par point, et de le terminer en cliquant à nouveau sur le dernier point par point, et de le terminer en cliquant à nouveau sur le dernier
point comme pour le tracé dune ligne. Une différence toutefois : dès le point comme pour le tracé dune ligne. Une différence toutefois : dès le
troisième point lintérieur du polygone est coloré. troisième point lintérieur du polygone est coloré.
#### Propriétés dun polygone #### Propriétés dun polygone
@ -154,7 +162,15 @@ lextension est `.geojson`.
#### b. Importer les contours de quartier dans une carte #### b. Importer les contours de quartier dans une carte
![umap_edit_import.png](../../static/tutoriels/8-le-cas-des-polygones/umap_edit_import.png) <shot-scraper
data-output="static/tutoriels/upload-data.png"
data-url="https://umap.openstreetmap.fr/fr/map/new/"
data-alt="Bouton dimport de données."
data-width="46"
data-height="47"
data-selector=".leaflet-toolbar-icon.upload-data"
data-padding="5"
>Bouton dimport de données.</shot-scraper>
Dans une nouvelle Dans une nouvelle
carte, cliquez sur **Importer des données**. Dans le panneau qui appraît carte, cliquez sur **Importer des données**. Dans le panneau qui appraît
@ -180,15 +196,16 @@ lutilisateur de déplacer la carte au-delà de ces limites.
Récupérez le code de liframe, comme nous lavons vu dans le Récupérez le code de liframe, comme nous lavons vu dans le
[tutoriel précédent](7-publishing-and-permissions.md), [tutoriel précédent](7-publishing-and-permissions.md),
en prenant soin de désactiver toutes les options dinteraction : boutons en prenant soin de désactiver toutes les options dinteraction :
de zoom, zoom avec la molette, bouton « Plus » etc. boutons de zoom, zoom avec la molette, bouton « Plus », etc.
Copiez ce **code iframe** dans votre page Web, et le tour est joué ! Copiez ce **code iframe** dans votre page Web, et le tour est joué !
!!! note !!! note
Lorsque vous modifiez la carte, vous devez recharger Lorsque vous modifiez la carte, vous devez recharger
entièrement la page contenant liframe pour vider le cache du entièrement la page contenant liframe pour vider le cache du
navigateur, par exemple en utilisant **Ctrl+F5** sur Firefox. navigateur, par exemple en utilisant <kbd>Ctrl</kbd>+<kbd>F5</kbd>
sur Firefox.
## Faisons le point ## Faisons le point

View file

@ -147,9 +147,18 @@ Cliquez sur
**Importer des données** pour afficher le panneau du même nom, puis **Importer des données** pour afficher le panneau du même nom, puis
sélectionnez le fichier précédemment géocodé. sélectionnez le fichier précédemment géocodé.
![importer_des_donnees.png](../../static/tutoriels/9-je-cree-une-carte-a-partir-dun-tableur/importer_des_donnees.png) <shot-scraper
data-output="static/tutoriels/upload-data.png"
data-url="https://umap.openstreetmap.fr/fr/map/new/"
data-alt="Bouton dimport de données."
data-width="46"
data-height="47"
data-selector=".leaflet-toolbar-icon.upload-data"
data-padding="5"
>Bouton dimport de données.</shot-scraper>
![umap_edit_import.png](../../static/tutoriels/9-je-cree-une-carte-a-partir-dun-tableur/umap_edit_import.png)
![importer_des_donnees.png](../../static/tutoriels/9-je-cree-une-carte-a-partir-dun-tableur/importer_des_donnees.png)
Vérifiez que uMap a bien reconnu **CSV** pour le format des données, et Vérifiez que uMap a bien reconnu **CSV** pour le format des données, et
choisissez de les importer dans un **nouveau calque**. choisissez de les importer dans un **nouveau calque**.
@ -264,7 +273,15 @@ est possible de voir lensemble des données de la carte sous la forme
dune liste. Cette liste peut aussi filtrée par lutilisateur, à partir dune liste. Cette liste peut aussi filtrée par lutilisateur, à partir
dun mot par exemple. dun mot par exemple.
![umap_edit_props.png](../../static/tutoriels/9-je-cree-une-carte-a-partir-dun-tableur/umap_edit_props.png) <shot-scraper
data-output="static/tutoriels/map-settings.png"
data-url="https://umap.openstreetmap.fr/fr/map/new/"
data-alt="Bouton des options de la carte."
data-width="46"
data-height="47"
data-selector=".leaflet-toolbar-icon.update-map-settings"
data-padding="5"
>Bouton des options de la carte.</shot-scraper>
Pour permettre aux Pour permettre aux
utilisateurs de filtrer les données il convient de préciser à uMap à utilisateurs de filtrer les données il convient de préciser à uMap à

Binary file not shown.

Before

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 38 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 139 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.5 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 355 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.2 KiB

View file

@ -1,4 +1,4 @@
!!! example "This is an ongoing work." !!! example "This is an ongoing work."
[Let us know](https://github.com/umap-project/umap/issues) [Let us know](https://github.com/umap-project/umap/issues)
if you are interested to translate it from French. if you are interested [to translate it from French](/fr/tutorials/1-browsing-a-map/).

View file

@ -1,4 +1,4 @@
!!! example "This is an ongoing work." !!! example "This is an ongoing work."
[Let us know](https://github.com/umap-project/umap/issues) [Let us know](https://github.com/umap-project/umap/issues)
if you are interested to translate it from French. if you are interested [to translate it from French](/fr/tutorials/10-embed-remote-data/).

View file

@ -1,4 +1,4 @@
!!! example "This is an ongoing work." !!! example "This is an ongoing work."
[Let us know](https://github.com/umap-project/umap/issues) [Let us know](https://github.com/umap-project/umap/issues)
if you are interested to translate it from French. if you are interested [to translate it from French](/fr/tutorials/11-openstreetmap-overpass-and-umap/).

View file

@ -1,4 +1,4 @@
!!! example "This is an ongoing work." !!! example "This is an ongoing work."
[Let us know](https://github.com/umap-project/umap/issues) [Let us know](https://github.com/umap-project/umap/issues)
if you are interested to translate it from French. if you are interested [to translate it from French](/fr/tutorials/2-first-map/).

View file

@ -1,4 +1,4 @@
!!! example "This is an ongoing work." !!! example "This is an ongoing work."
[Let us know](https://github.com/umap-project/umap/issues) [Let us know](https://github.com/umap-project/umap/issues)
if you are interested to translate it from French. if you are interested [to translate it from French](/fr/tutorials/3-create-account/).

View file

@ -1,4 +1,4 @@
!!! example "This is an ongoing work." !!! example "This is an ongoing work."
[Let us know](https://github.com/umap-project/umap/issues) [Let us know](https://github.com/umap-project/umap/issues)
if you are interested to translate it from French. if you are interested [to translate it from French](/fr/tutorials/4-customize-map/).

View file

@ -1,4 +1,4 @@
!!! example "This is an ongoing work." !!! example "This is an ongoing work."
[Let us know](https://github.com/umap-project/umap/issues) [Let us know](https://github.com/umap-project/umap/issues)
if you are interested to translate it from French. if you are interested [to translate it from French](/fr/tutorials/5-multimedia-tooltips/).

View file

@ -1,4 +1,4 @@
!!! example "This is an ongoing work." !!! example "This is an ongoing work."
[Let us know](https://github.com/umap-project/umap/issues) [Let us know](https://github.com/umap-project/umap/issues)
if you are interested to translate it from French. if you are interested [to translate it from French](/fr/tutorials/6-handling-datalayers/).

View file

@ -1,4 +1,4 @@
!!! example "This is an ongoing work." !!! example "This is an ongoing work."
[Let us know](https://github.com/umap-project/umap/issues) [Let us know](https://github.com/umap-project/umap/issues)
if you are interested to translate it from French. if you are interested [to translate it from French](/fr/tutorials/7-publishing-and-permissions/).

View file

@ -1,4 +1,4 @@
!!! example "This is an ongoing work." !!! example "This is an ongoing work."
[Let us know](https://github.com/umap-project/umap/issues) [Let us know](https://github.com/umap-project/umap/issues)
if you are interested to translate it from French. if you are interested [to translate it from French](/fr/tutorials/8-polygons/).

View file

@ -1,4 +1,4 @@
!!! example "This is an ongoing work." !!! example "This is an ongoing work."
[Let us know](https://github.com/umap-project/umap/issues) [Let us know](https://github.com/umap-project/umap/issues)
if you are interested to translate it from French. if you are interested [to translate it from French](/fr/tutorials/9-map-from-spreadsheet/).