Improving documentation
This commit is contained in:
David Larlet
parent
4cba114f3f
commit
d66b84297f
84 changed files with 1883 additions and 5 deletions
|
|
@ -16,7 +16,6 @@ manipuler. La carte uMap représentée ci-dessous est disponible
|
|||
|
||||
|
||||
|
||||
------------------------------------------------------------------------
|
||||
|
||||
À droite de la carte et selon le choix de son auteur peut être affiché
|
||||
un des deux panneaux suivants :
|
||||
|
|
@ -117,7 +116,7 @@ dépend de la manière dont vous souhaitez partager la carte :
|
|||
page Web : il suffit de copier le code HTML et de l’insérer dans
|
||||
celui de votre page Web. Cette possibilité est explorée en détails
|
||||
dans le tutoriel
|
||||
[Je publie ma carte et en contrôle l’accès](/tutoriels/7-je-publie-ma-carte-et-en-controle-lacces/).
|
||||
[Je publie ma carte et en contrôle l’accès](7-publishing-and-permissions.md).
|
||||
- **Télécharger les données** permet d’obtenir les données visibles
|
||||
sur la carte, dans différents formats. Cela peut vous permettre
|
||||
d’utiliser ces données avec un autre outil.
|
||||
|
|
@ -137,7 +136,6 @@ d’afficher sur la carte la popup décrivant cet élément. Le texte de
|
|||
saisie au-dessus de la liste permet de rechercher un élément, en ne
|
||||
montrant que ceux dont le nom contient le texte saisi.
|
||||
|
||||
------------------------------------------------------------------------
|
||||
|
||||
## Faisons le point
|
||||
|
||||
|
|
|
|||
404
docs-users/fr/tutorials/10-embed-remote-data.md
Normal file
404
docs-users/fr/tutorials/10-embed-remote-data.md
Normal file
|
|
@ -0,0 +1,404 @@
|
|||
!!! abstract "Ce que nous allons apprendre"
|
||||
|
||||
- Créer un calque qui utilise des données distantes
|
||||
- Produire une carte de chaleur (heatmap)
|
||||
- Afficher des calques en fonction du niveau de zoom
|
||||
- Afficher des données qui évoluent en temps réel
|
||||
- Utiliser un portail *open data*
|
||||
- Créditer la source des données pour respecter la licence
|
||||
|
||||
## Procédons par étapes
|
||||
|
||||
Jusqu’ici toutes les cartes que nous avons créées montrent des données
|
||||
gérées par uMap. Même lorsque nous avons utilisé les données d’un
|
||||
tableur dans le tutoriel précédent, ces données ont été *importées* sur
|
||||
le serveur uMap, où elles sont *stockées*. Si ces données sont
|
||||
modifiées, nous devons de nouveau les importer pour mettre à jour la
|
||||
carte.
|
||||
|
||||
Dans ce tutoriel nous allons apprendre comment créer une carte qui
|
||||
utilise des **données distantes**, c’est-à-dire stockées sur un autre
|
||||
serveur que le serveur uMap.
|
||||
|
||||
### 1. J’utilise des données distantes
|
||||
|
||||
Nous prenons pour ce tutoriel le thème des stations de vélo-partage à
|
||||
Paris, les fameux Vélib’, dont les données sont disponibles en open
|
||||
data.
|
||||
|
||||
#### Utiliser un portail open data
|
||||
|
||||
Commençons par observer le jeu de données « Vélib’ - Localisation et
|
||||
caractéristique des stations », disponible sur le portail open data de
|
||||
la ville de Paris :
|
||||
<https://opendata.paris.fr/explore/dataset/velib-emplacement-des-stations/>.
|
||||
|
||||
L’onglet **Informations** explique que les données « sont actualisées
|
||||
chaque minute selon la norme GBFS 1.0 ». Cette norme décrit plusieurs
|
||||
fichiers, accessibles avec l’API décrite dans l’onglet **API**, dont le
|
||||
format n’est pas compris par uMap.
|
||||
|
||||
L’onglet **Tableau** montre les données : chaque station a un nom et une
|
||||
capacité (nombre d’emplacements), ainsi qu’une position géographique.
|
||||
|
||||
L’onglet **Export** propose plusieurs formats, dont les formats
|
||||
**GeoJSON**, **KML** et **GPX**, tous trois compris par uMap. Nous
|
||||
choisissons le [format GeoJSON](https://fr.wikipedia.org/wiki/GeoJSON),
|
||||
qui permet d’exploiter tous les attributs présents dans les données.
|
||||
|
||||
Une possibilité serait de télécharger le fichier puis de l’importer dans
|
||||
uMap, comme nous l’avons fait dans le tuto précédent avec un fichier au
|
||||
format CSV. Outre les manipulations, cela impliquerait de mettre à jour
|
||||
ces données régulièrement. Nous allons plutôt configurer notre carte
|
||||
pour accéder directement aux données mises à disposition par le portail
|
||||
open data. Pour cela nous copions le lien vers le fichier : un clic
|
||||
droit ouvre un menu contextuel qui permet de **copier le lien** vers le
|
||||
fichier :
|
||||
|
||||
https://opendata.paris.fr/api/explore/v2.1/catalog/datasets/velib-emplacement-des-stations/exports/geojson?lang=fr&timezone=Europe%2FBerlin
|
||||
|
||||
|
||||
|
||||
#### Configurer les données distantes
|
||||
|
||||
Voyons maintenant comment utiliser ce lien dans uMap. Pour cela nous
|
||||
créons un nouveau calque et ouvrons, dans les Propriétés du calque,
|
||||
l’onglet **Données distantes**. Les informations à fournir sont les
|
||||
suivantes :
|
||||
|
||||
- **URL** : nous collons ici le lien vers le fichier copié
|
||||
précédemment.
|
||||
- **Format** : nous devons sélectionner le format, ici **geojson**
|
||||
- **Licence** : ODbL comme indiqué sur la page d’export du portail
|
||||
open data
|
||||
|
||||
Le bouton **Vérifier l’URL** permet de tester l’accès au fichier depuis
|
||||
uMap, et de vérifier que le format choisi correspond bien aux données.
|
||||
Les données sont alors affichées sur la carte.
|
||||
|
||||
#### Proxy ou pas proxy ?
|
||||
|
||||
Si cela ne fonctionne pas (uMap affiche un bandeau qui indique «
|
||||
Problème dans la réponse du serveur »), il est probable que le serveur
|
||||
sur lequel le fichier est stocké n’autorise pas l’accès au fichier
|
||||
depuis un service tiers.
|
||||
|
||||
!!! note
|
||||
|
||||
Il s’agit du mécanisme CORS, décrit dans l’article
|
||||
Wikipédia [Cross-origin ressource
|
||||
sharing](https://fr.wikipedia.org/wiki/Cross-origin_resource_sharing).
|
||||
|
||||
uMap permet de contourner cette contrainte en faisant transiter le
|
||||
fichier par le serveur uMap, grâce à l’option **Avec proxy** qu’il
|
||||
convient alors d’activer. Cette option est associée au menu déroulant
|
||||
**Cacher la requête avec proxy**, qui permet au serveur uMap de
|
||||
conserver le fichier afin de ne pas le récupérer à chaque affichage de
|
||||
la carte. La durée la plus longue (1 jour) serait ici adaptée.
|
||||
|
||||
#### Au sujet de la licence
|
||||
|
||||
Le fichier des emplacements de stations Vélib’ est publié sous la
|
||||
[licence ODbL](https://opendatacommons.org/licenses/odbl/). Celle-ci
|
||||
exige que le producteur des données soit crédité lors de leur
|
||||
utilisation. Les informations sur le portail open data indique que ce
|
||||
producteur est « Autolib Velib Métropole ». Il convient donc de le citer
|
||||
dans les **Crédits** de la carte, un onglet du menu *Propriétés de la
|
||||
carte*.
|
||||
|
||||
|
||||
|
||||
#### Afficher le nom et la capacité des stations
|
||||
|
||||
Afin d’afficher le nom et la capacité de chaque station dans une
|
||||
infobulle, nous devons déterminer les clefs permettant d’accéder à ces
|
||||
informations. Pour cela il nous faut observer le fichier GeoJSON.
|
||||
|
||||
Nous téléchargeons ce fichier depuis l’onglet Export du portail open
|
||||
data, ou collons le lien copié précédemment dans la barre de navigation
|
||||
du navigateur. Soit le fichier est directement affiché dans le
|
||||
navigateur, soit il est téléchargé : une possibilité consiste alors à
|
||||
l’ouvrir dans un éditeur de texte, ou à le déposer dans la fenêtre du
|
||||
navigateur.
|
||||
|
||||
Dans le bloc `properties` de chaque élément, nous observons plusieurs
|
||||
associations clef-valeur : la propriété **name** contient le nom de la
|
||||
station, **capacity** contient le nombre d’emplacements. Ces propriétés
|
||||
correspondent à nos entêtes de colonnes d’un fichier CSV (cf. tuto
|
||||
précédent).
|
||||
|
||||
Nous pouvons alors configurer le **Gabarit de la popup** pour afficher
|
||||
ces informations dans l’infobulle de chaque station, comme nous l’avons
|
||||
vu dans le [tuto précédent](9-map-from-spreadsheet.md).
|
||||
|
||||
Par exemple :
|
||||
|
||||
# {name}
|
||||
{capacity} emplacements
|
||||
|
||||
### 2. Je combine deux calques pour les mêmes données
|
||||
|
||||
Il y a beaucoup de stations Vélib’ et la carte est un peu dense à
|
||||
l’échelle de Paris. À cette échelle il serait plus intéressant d’avoir
|
||||
une vue d’ensemble de la répartition de l’offre Vélib’ sur la capitale
|
||||
et les communes voisines.
|
||||
|
||||
|
||||
|
||||
#### Produire une carte de chaleur ou « Heatmap »
|
||||
|
||||
uMap permet de présenter les données d’un calque sous plusieurs formes,
|
||||
avec le menu déroulant **Type de calque** dans le menu *Propriétés du
|
||||
calque*. Les différents types de calques sont :
|
||||
|
||||
- **Par défaut** : chaque donnée est affichée individuellement.
|
||||
- **Avec cluster** : les points proches sont regroupés en un seul
|
||||
cercle.
|
||||
- **Heatmap** : les données sont représentées sous forme de *carte de
|
||||
chaleur*.
|
||||
- **Cloroplèthe** : cet affichage est adapté aux polygones, et permet
|
||||
de graduer leur couleur.
|
||||
|
||||
Les types *Avec cluster* et *Heatmap* sont plutôt adaptés aux calques
|
||||
contenant uniquement des points. Lorsqu’on choisit un de ces modes, un
|
||||
onglet de configuration apparaît. Pour le type *Heatmap*, l’onglet
|
||||
**Heatmap: paramètres** permet d’ajuster l’intensité – ou *chaleur* – de
|
||||
la carte (du bleu glacial au rouge brûlant), et de sélectionner une
|
||||
propriété pour évaluer cette *chaleur*. Celle-ci doit correspondre à une
|
||||
propriété de nos données contenant des valeurs numériques. Si aucune
|
||||
propriété n’est définie, chaque point a la même valeur et seule la
|
||||
densité géographique des points influe sur la *heatmap*.
|
||||
|
||||
Notre fichier de stations contient justement la propriété `capacity`,
|
||||
qui correspond au nombre d’emplacements de chaque station – un bon
|
||||
critère pour représenter l’offre de vélos en libre-service. Quant au
|
||||
**Rayon de heatmap**, un curseur permet de l’ajuster avec effet immédiat
|
||||
sur la carte. Il est judicieux de tester ce rayon à différents niveaux
|
||||
de zoom de la carte, afin que la carte révèle bien les données.
|
||||
|
||||
#### Dupliquer le calque
|
||||
|
||||
Le type d’affichage d’un calque s’applique quel que soit le niveau de
|
||||
zoom. Or aux niveaux de zooms élevés, à l’échelle du quartier, il est
|
||||
plus intéressant de montrer les stations individuelles que la carte de
|
||||
chaleur. Nous allons combiner les 2 représentations en créant 2 calques
|
||||
qui utilisent les mêmes données, l’un affichant les stations
|
||||
individuelles, l’autre sous forme de Heatmap. L’astuce consiste ensuite
|
||||
à activer ou désactiver chaque calque en fonction du niveau de zoom.
|
||||
|
||||
Procédons par étapes :
|
||||
|
||||
1. Dupliquons notre calque avec l’opération **Cloner** disponible dans
|
||||
l’onglet **Opérations avancées** du panneau Propriétés du calque.
|
||||
2. Le panneau Propriétés du nouveau calque est alors affiché :
|
||||
renommons ce calque, par exemple « Heatmap stations Vélib’ ».
|
||||
3. Changeons le type de calque pour **Heatmap**, l’onglet **Heatmap:
|
||||
paramètres** apparaît.
|
||||
4. Dans cet onglet, saisissons le nom de la propriété – `capacity` – et
|
||||
ajustons le **rayon de heatmap** (une valeur autour de 30 fonctionne
|
||||
bien pour ce jeu de données)
|
||||
5. Dans l’onglet **Données distantes**, configurons le calque pour
|
||||
qu’il s’affiche **jusqu’au zoom** 15.
|
||||
6. De la même manière, configurons le calque initial pour qu’il
|
||||
s’affiche **à partir du zoom** 15.
|
||||
|
||||
Nous faisons ici le choix de superposer, au zoom 15, la heatmap aux
|
||||
stations individuelles. Cela produit une transition entre les 2 modes de
|
||||
représentation, et permet de repérer les stations avec un grand nombre
|
||||
d’emplacements.
|
||||
|
||||
Notez que nous n’avons pas eu besoin de préciser l’URL des données
|
||||
distantes et leur format : ces paramètres ont été conservés lors de la
|
||||
duplication du calque.
|
||||
|
||||
### 3. J’utilise des données dynamiques
|
||||
|
||||
Un autre jeu de données du portail open data s’intitule « Vélib - Vélos
|
||||
et bornes - Disponibilité temps réel » :
|
||||
<https://opendata.paris.fr/explore/dataset/velib-disponibilite-en-temps-reel/>.
|
||||
|
||||
Nous pouvons utiliser ces données *en temps réel* – en réalité avec un
|
||||
léger différé – pour alimenter notre carte uMap, et afficher le nombre
|
||||
de places et de vélos disponibles. La procédure est la même que
|
||||
ci-dessus, à une nuance près : l’option **Dynamique** de l’onglet
|
||||
**Données distantes** doit être activée. Elle indique à uMap de
|
||||
récupérer les données à chaque affichage de la carte, c’est-à-dire à
|
||||
chaque fois que la carte est déplacée, zoomée ou dézoomée. Pour autant,
|
||||
ces données ne seront pas automatiquement mises à jour par uMap à un
|
||||
intervalle de temps régulier : c’est à l’utilisateur de rafraîchir la
|
||||
page web ou de déplacer la carte.
|
||||
|
||||
|
||||
|
||||
Il reste à
|
||||
modifier notre gabarit de popup pour afficher les disponibilités en
|
||||
temps réel. Pour identifier le nom des propriétés, nous pouvons utiliser
|
||||
l’onglet **API** sur le portail open data : le panneau **Résultats**
|
||||
montre un extrait des données avec toutes leurs propriétés. Ces
|
||||
propriétés sont les mêmes que pour l’export GeoJSON. Voici un exemple
|
||||
possible de gabarit de popup :
|
||||
|
||||
# {name}
|
||||
{capacity} emplacements dont {numdocksavailable} libres
|
||||
{numbikesavailable} vélos disponibles dont {ebike} VAE
|
||||
|
||||
|
||||
|
||||
#### Filtrer les données à la source
|
||||
|
||||
Le panneau Résultats dans l’onglet **API** nous montre l’existence de la
|
||||
propriété `is_installed`. Celle-ci permet de détecter des stations qui
|
||||
ne sont pas en service, que nous ne souhaitons pas afficher sur notre
|
||||
carte.
|
||||
|
||||
Le panneau **Requête pour l’appel API** permet de générer une requête,
|
||||
affichée sous ce panneau (**URL de l’appel API**), et de visualiser les
|
||||
données produites par cette requête dans le panneau **Résultats**. Il
|
||||
permet également d’ajouter des paramètres à la requête, pour filtrer les
|
||||
données produites. Le paramètre **refine** permet de filtrer les données
|
||||
en fonction de la valeur d’une ou plusieurs propriétés. Si nous
|
||||
indiquons `is_installed` pour le nom de la propriété et `NON` pour la
|
||||
valeur, nous pouvons voir le nombre de stations qui ne sont pas en
|
||||
service, et que nous ne voulons pas intégrer à notre carte.
|
||||
|
||||
Les données produites à l’aide cet onglet **API** sont au format GBFS,
|
||||
qui n’est pas connu de uMap. Les requêtes d’export au format GeoJSON
|
||||
acceptent les mêmes paramètres. Pour produire les données filtrées au
|
||||
format GeoJSON, nous devons donc éditer la requête *à la main*.
|
||||
Procédons par étapes *un peu geek* :
|
||||
|
||||
1. Saisir `is_installed` et `OUI` dans le champ **refine**
|
||||
2. Supprimer la valeur du champ `limit`, car nous ne voulons pas
|
||||
*limiter* la réponse de la requête à 20 stations.
|
||||
3. Observons la requête générée :
|
||||
`/api/explore/v2.1/catalog/datasets/velib-disponibilite-en-temps-reel/records?refine=is_installed%3AOUI`,
|
||||
elle se compose de 3 sections :
|
||||
- l’URL de base, jusqu’au dernier caractère **`/`**
|
||||
- le **endpoint** `records` suivi du caractère **`?`**
|
||||
- le paramètre `refine=is_installed%3AOUI` (`%3A` est l’*encodage*
|
||||
du caractère **`:`**)
|
||||
4. Prenons la requête générée pour l’export GeoJSON :
|
||||
`https://opendata.paris.fr/api/explore/v2.1/catalog/datasets/velib-disponibilite-en-temps-reel/exports/geojson?lang=fr&timezone=Europe%2FBerlin`,
|
||||
elle se compose des mêmes sections :
|
||||
- l’URL de base :
|
||||
`https://opendata.paris.fr/api/explore/v2.1/catalog/datasets/velib-disponibilite-en-temps-reel/exports/`
|
||||
- le endpoint `geojson?`
|
||||
- la liste de paramètres `lang=fr&timezone=Europe%2FBerlin` (`%2F`
|
||||
est l’encodage du caractère **`&`** qui permet de séparer
|
||||
plusieurs paramètres)
|
||||
5. Nous pouvons combiner l’URL et le endpoint de la requête GeoJSON,
|
||||
suivi du paramètre `refine=is_installed%3AOUI` (les paramètres
|
||||
`lang` et `timezone` ne sont ici pas utiles) :
|
||||
|
||||
|
||||
`https://opendata.paris.fr/api/explore/v2.1/catalog/datasets/velib-disponibilite-en-temps-reel/exports/geojson?refine=is_installed%3AOUI`
|
||||
|
||||
Utiliser cette requête comme URL des données distantes de notre calque
|
||||
**Stations Vélib’** permet de n’afficher que les stations en service.
|
||||
|
||||
Notez que pouvons aussi utiliser le paramètre `exclude` pour exclure les
|
||||
stations dont la propriété `is_installed` a la valeur `NON`. Nous
|
||||
pouvons utiliser ce même mécanisme pour exclure les stations qui n’ont
|
||||
aucun vélo disponible :
|
||||
|
||||
https://opendata.paris.fr/api/explore/v2.1/catalog/datasets/velib-disponibilite-en-temps-reel/exports/geojson?exclude=is_installed%3ANON&exclude=numbikesavailable%3A0
|
||||
|
||||
### 4. J’injecte des paramètres dans la requête
|
||||
|
||||
uMap permet d’injecter dans une requête des paramètres, avec la syntaxe
|
||||
`{paramX}`. Ces paramètres dépendent de l’état de la carte au moment de
|
||||
l’envoi de la requête :
|
||||
|
||||
- les coordonnées du centre de la carte : {lat} et {lng}
|
||||
- la *bounding_box* de la carte : {bbox} ou {west}, {south}, {east} et
|
||||
{north}
|
||||
- le niveau de zoom : {zoom}
|
||||
|
||||
Le portail open data peut prendre en compte certains de ces paramètres
|
||||
pour affiner la requête. Notre objectif est ici de récupérer la
|
||||
disponibilité des stations se trouvant **dans la partie visible de la
|
||||
carte**, c’est-à-dire dans la *bounding_box*. Cela permet de réduire le
|
||||
volume de données transférées, et de les afficher plus rapidement.
|
||||
|
||||
#### J’utilise la console d’API de la plateforme open data
|
||||
|
||||
L’onglet API du jeu de données permet d’accéder à la **console d’API
|
||||
complète**. Nous choisissons, dans la section Dataset, le *endpoint*
|
||||
**Export a dataset**.
|
||||
|
||||
|
||||
Apparaît alors un formulaire où nous pouvons renseigner les différents
|
||||
paramètres :
|
||||
|
||||
- **dataset_id** est l’identifiant du jeu de données :
|
||||
`velib-disponibilite-en-temps-reel`
|
||||
- pour le **format** nous sélectionnons `geojson`
|
||||
- nous pouvons à nouveau filtrer les stations en service avec le
|
||||
paramètre **refine** : `is_installed:OUI`
|
||||
|
||||
|
||||
|
||||
Définissons le paramètre **where** avec la fonction `in_bbox()` (voir la
|
||||
[documentation
|
||||
OpenDataSoft](https://help.opendatasoft.com/apis/ods-explore-v2/#section/ODSQL-predicates/in_bbox()))
|
||||
et – pour l’instant – des latitudes et longitudes fixes (quelque part à
|
||||
Paris) :
|
||||
|
||||
|
||||
|
||||
**coordonnees_geo** est le nom du champ contenant la géométrie dans les
|
||||
données d’origine, que l’on peut trouver en les exportant dans un format
|
||||
autre que GeoJSON.
|
||||
|
||||
Testons maintenant que la requête fonctionne en cliquant sur **Execute**
|
||||
: le code de réponse 200 indique que la requête a fonctionné, et il est
|
||||
possible de télécharger le fichier résultant.
|
||||
|
||||
|
||||
|
||||
#### Je dynamise la requête
|
||||
|
||||
Modifions maintenant notre requête *statique* (tous les paramètres sont
|
||||
fixes) pour la rendre *dynamique*, en remplaçant les coordonnées de la
|
||||
bounding_box par les paramètres qui seront injectés par uMap. Nous
|
||||
n’utilisons pas ici le paramètre `{bbox}`, car l’ordre des valeurs ne
|
||||
correspond pas à celui attendu par l’API open data. La fonction s’écrit
|
||||
alors :
|
||||
|
||||
in_bbox(coordonnees_geo,{south},{west},{north},{east})
|
||||
|
||||
ce qui donne avec l’encodage :
|
||||
|
||||
in_bbox%28coordonnees_geo%2C{south}%2C{west}%2C{north}9%2C{east}%29
|
||||
|
||||
La requête encodée complète est donc :
|
||||
|
||||
https://opendata.paris.fr/api/explore/v2.1/catalog/datasets/velib-disponibilite-en-temps-reel/exports/geojson?where=in_bbox%28coordonnees_geo%2C{south}%2C{west}%2C{north}9%2C{east}%29&limit=-1&refine=is_installed%3AOUI
|
||||
|
||||
Il ne reste plus qu’à utiliser cette requête comme URL pour nos données
|
||||
distantes.
|
||||
|
||||
Notez qu’il n’est pas nécessaire d’utiliser la forme encodée, car uMap
|
||||
procédera à l’encodage. L’URL peut donc être plus lisible :
|
||||
|
||||
https://opendata.paris.fr/api/explore/v2.1/catalog/datasets/velib-disponibilite-en-temps-reel/exports/geojson?where=in_bbox(coordonnees_geo,{south},{west},{north},{east})&limit=-1&refine=is_installed:OUI
|
||||
|
||||
## Faisons le point
|
||||
|
||||
La carte produite pour ce tuto est visible ici :
|
||||
<http://u.osmfr.org/m/1051915/>
|
||||
|
||||
Nous avons vu comment **exploiter des données open data** sans les
|
||||
télécharger, ce qui permet que notre carte reste à jour (à condition
|
||||
bien sûr que les données soient actualisées par leur producteur). Nous
|
||||
avons également vu comment **optimiser la requête** en injectant la
|
||||
*bounding box* de la partie visible de la carte.
|
||||
|
||||
D’autres sites mettent à disposition des données via une API, l’enjeu
|
||||
est alors de s’approprier la syntaxe des requêtes en lisant la
|
||||
documentation et testant les requêtes.
|
||||
|
||||
|
||||
??? info "Licence"
|
||||
|
||||
Travail initié par Antoine Riche sur [Carto’Cité](https://wiki.cartocite.fr/doku.php?id=umap:10_-_j_integre_des_donnees_distantes) sous licence [CC-BY-SA 4](https://creativecommons.org/licenses/by-sa/4.0/deed.fr).
|
||||
345
docs-users/fr/tutorials/11-openstreetmap-overpass-and-umap.md
Normal file
345
docs-users/fr/tutorials/11-openstreetmap-overpass-and-umap.md
Normal file
|
|
@ -0,0 +1,345 @@
|
|||
!!! abstract "Ce que nous allons apprendre"
|
||||
|
||||
- Créer un calque utilisant des *données distantes* c’est-à-dire non
|
||||
stockées par uMap
|
||||
- Utiliser une **requête Overpass** comme source de données distantes
|
||||
- Utiliser une *requête dynamique* prenant en compte l’étendue visible
|
||||
de la carte
|
||||
- Contrôler l’affichage des calques en fonction du niveau de zoom
|
||||
|
||||
## Procédons par étapes
|
||||
|
||||
L’objectif de ce tutoriel est d’explorer les différentes manières
|
||||
d’afficher sur une carte uMap des données externes, ou distantes,
|
||||
c’est-à-dire des données qui ne sont pas stockées sur le serveur uMap.
|
||||
Nous allons pour cela utiliser des données **OpenStreetMap**, que nous
|
||||
allons extraire avec l’[API
|
||||
Overpass](https://wiki.openstreetmap.org/wiki/FR:Overpass_API/Overpass_QL).
|
||||
|
||||
Nous allons en quelques étapes créer une carte du vélo à Nantes,
|
||||
montrant les stationnements ainsi que les locations en libre-service.
|
||||
|
||||
### 1. Je crée un calque affichant le résultat d’une requête Overpass
|
||||
|
||||
Commençons par afficher les stations *Bicloo*, les locations de vélos en
|
||||
libre-service à Nantes. Allons-y étape par étape :
|
||||
|
||||
1. produire et tester la requête Overpass avec Overpass Turbo
|
||||
2. adapter la requête pour produire des données acceptées par uMap
|
||||
3. exporter la requête
|
||||
4. créer un calque uMap utilisant cette requête
|
||||
|
||||
#### Créer la requête Overpass
|
||||
|
||||
Le site [Overpass Turbo](http://overpass-turbo.eu/) propose un assistant
|
||||
qui facilite la rédaction d’une requête. Activez l’assistant et
|
||||
saisissez le texte suivant, qui permet d’extraire les locations de vélo
|
||||
situées sur la commune de Nantes :
|
||||
|
||||
amenity=bicycle_rental in Nantes
|
||||
|
||||
Cliquez sur **Construire et exécuter la requête** : la requête est créée
|
||||
dans l’éditeur à gauche de la carte, puis le résultat est affiché sur la
|
||||
carte.
|
||||
|
||||
|
||||
|
||||
#### Adapter la requête pour uMap
|
||||
|
||||
Avant d’exporter la requête nous devons l’adapter. L’assistant Overpass
|
||||
Turbo produit des requêtes dont le résultat est au format JSON. uMap
|
||||
sait lire des données dans plusieurs formats, dont le format GeoJSON,
|
||||
mais pas le format JSON produit par Overpass. Par contre uMap comprend
|
||||
très bien le format XML selon la syntaxe OSM (OpenStreetMap).
|
||||
|
||||
Pour que la requête produise des données au format XML/OSM, il suffit de
|
||||
modifier dans l’éditeur de requête la clause **`[out:json]`** par
|
||||
**`[out:xml]`**. Vous pouvez à nouveau exécuter la requête et observer
|
||||
la différence de format dans l’onglet **Données** qui montre le résultat
|
||||
de la requête.
|
||||
|
||||
|
||||
|
||||
#### Exporter la requête Overpass
|
||||
|
||||
Exportez la requête en cliquant sur **Exporter** : un panneau s’affiche.
|
||||
Ouvrez l’onglet **Requête** et cliquez sur **compact** à droite de
|
||||
**Overpass QL**. Un nouvel onglet intitulé **Overpass API Converted
|
||||
Query** apparaît. Faites un **clic droit** sur la ligne soulignée en
|
||||
bleu, et choisir **Copier l’adresse du lien** (avec Mozilla Firefox) :
|
||||
l’URL de la requête est copié dans le presse-papier.
|
||||
|
||||
|
||||
|
||||
#### Utiliser la requête dans uMap
|
||||
|
||||
|
||||
|
||||
Dans un nouvelle carte uMap, créez un calque et ouvrez l’onglet
|
||||
**Données distantes**. Collez dans la case URL le contenu du
|
||||
presse-papier et sélectionez le format **osm**, qui correspond au format
|
||||
XML dans Overpass.
|
||||
|
||||
Notez que l’URL est *encodée* pour pouvoir être utilisée comme requête
|
||||
HTTP : les caractères spéciaux comme `"` sont convertis en `%22`. Ne les
|
||||
modifiez pas !
|
||||
|
||||
Vous pouvez configurer le calque comme cela a été décrit dans les
|
||||
tutoriels précédents.
|
||||
|
||||
|
||||
|
||||
De la même façon que les valeurs d’un tableur peuvent être affichées dans les
|
||||
infobulles (voir [cette section](9-map-from-spreadsheet.md)
|
||||
du tutoriel précédent), vous pouvez afficher dans les infobulles les
|
||||
*tags* OpenStreetMap. Les tags disponibles sont visibles dans l’onglet
|
||||
Données sur Overpass Turbo.
|
||||
|
||||
Par exemple le gabarit suivant permet d’afficher des infobulles comme
|
||||
celle de droite.
|
||||
|
||||
# {name}
|
||||
{capacity} emplacements
|
||||
Carte bancaire : {payment:credit_cards}
|
||||
{note}
|
||||
|
||||
### 2. J’affiche les parkings à vélo efficacement
|
||||
|
||||
Ajoutons à notre carte les parkings à vélo. La requête Overpass pour
|
||||
obtenir les parkings à vélos de Nantes est semblable à celle utilisée
|
||||
pour les locations, et peut être créée avec l’assistant :
|
||||
`amenity=bicycle_parking in Nantes`.
|
||||
|
||||
|
||||
|
||||
L’exécution de cette requête prend près de 5 secondes. Ce délai est trop
|
||||
long pour une carte *interactive*. Aussi plutôt que d’exécuter le
|
||||
requête lors de l’affichage de la carte nous préférons extraire les
|
||||
données et les importer dans uMap.
|
||||
|
||||
#### Importer des données statiques
|
||||
|
||||
Dans Overpass Turbo, cliquez sur **Exporter**, sélectionnez l’onglet
|
||||
**Données** puis cliquez sur **Download/copy as GeoJSON**. Cette
|
||||
opération convertit le résultat de la requête dans le format GeoJSON (un
|
||||
format standard pour transférer des données géographiques sur internet)
|
||||
et crée un fichier nommé `export.geojson` dans le dossier
|
||||
`Téléchargements` de votre ordinateur.
|
||||
|
||||
Dans la carte uMap importez le fichier ainsi produit dans un nouveau
|
||||
calque (voir [cette section](9-map-from-spreadsheet.md) du tutoriel précédent).
|
||||
Les parkings à vélos sont affichés mais la carte
|
||||
perd en fluidité et ne réagit pas immédiatement lorsqu’on zoome ou la
|
||||
déplace. Cela est dû au nombre élevé de marqueurs affichés sur la carte
|
||||
(plus de 1600).
|
||||
|
||||
#### Afficher une carte de densité
|
||||
|
||||
|
||||
|
||||
Une possibilité pour
|
||||
contourner ce problème est d’afficher les marqueurs sous forme de
|
||||
clusters, ou de carte de chaleur (heatmap), aussi appelée carte de
|
||||
densité. Nous choisissons la seconde option qui permet de prendre en
|
||||
compte le nombre de places de chaque parking, stocké dans le tag
|
||||
`capacity`.
|
||||
|
||||
Ainsi la carte montrera non pas le nombre de parkings à vélos mais le
|
||||
nombre de places de stationnement (dans OpenStreetMap un seul parking à
|
||||
vélo peut représenter un grand nombre d’*appuis-vélos*).
|
||||
|
||||
Dans les propriétés du calque, sélectionnez le Type de calque
|
||||
**Heatmap**.
|
||||
|
||||
Ensuite, dans l’onglet **Propriétés avancées** saisissez `capacity` dans
|
||||
le champ **Propriété optionnelle à utiliser pour calculter l’intensité
|
||||
de la heatmap**. Enfin vous pouvez ajuster l’intensité de la couleur en
|
||||
modifiant la **Valeur de rayon pour la heatmap**.
|
||||
|
||||
La carte gagne en fluidité, mais l’utilisation d’une *heatmap* ne permet
|
||||
pas d’identifier l’emplacement précis des parkings à vélos. L’étape
|
||||
suivante propose une solution pour résoudre cette inconvénient.
|
||||
|
||||
### 3. J’affiche un calque en fonction du niveau de zoom
|
||||
|
||||
Lorsque les données d’un calque sont ***distantes*** (c’est-à-dire
|
||||
**non** stockées sur le serveur uMap), il est possible de contrôler
|
||||
l’affichage de ces données en fonction du niveau de zoom. Il faut pour
|
||||
cela déposer le fichier de données sur un serveur et déterminer l’URL de
|
||||
ce fichier.
|
||||
|
||||
#### Utiliser un fichier stocké sur un serveur
|
||||
|
||||
|
||||
|
||||
Si vous disposez d’un accès FTP à un serveur, cela ne pose pas de
|
||||
difficulté. Si vous avez accès au *back office* d’un CMS comme
|
||||
Wordpress, vous pouvez probablement y déposer un fichier. Prenons
|
||||
l’exemple de Wordpress.
|
||||
|
||||
Par sécurité Wordpress ne permet pas de déposer un fichier au format
|
||||
JSON. Il se fie pour cela à l’extension du nom de fichier, il est donc
|
||||
possible de contourner cette contrainte en renommant le fichier.
|
||||
Procédons par étapes.
|
||||
|
||||
1. renommez le fichier `export.geojson` produit plus haut en
|
||||
`parkings-velos-nantes.txt`
|
||||
2. dans le *back office* Wordpress, ajoutez un **Média** et
|
||||
sélectionnez le fichier ainsi renommé
|
||||
3. affichez les détails du fichier et copiez son **Adresse Web**, de la
|
||||
forme
|
||||
`http://monsite.fr/wp-content/uploads/2018/01/parkings-velos-nantes.txt`
|
||||
4. créez un nouveau calque uMap et collez cette adresse Web dans le
|
||||
champ **URL** de l’onglet **Données distantes**
|
||||
5. sélectionnez le format **geojson**
|
||||
6. précisez la licence qui s’applique aux données : **ODbL 1.0**
|
||||
puisqu’il s’agit de données OpenStreetMap
|
||||
7. activez l’option **Avec proxy** en bas de cet onglet : cela autorise
|
||||
le navigateur Web à accéder à un fichier stocké sur un serveur autre
|
||||
que le serveur uMap
|
||||
8. enregistrez les modifications de la carte
|
||||
|
||||
#### Combiner deux calques utilisant le même fichier
|
||||
|
||||
Pour associer fluidité de la carte et affichage de chaque parking nous
|
||||
allons associer deux calques utilisant les mêmes données :
|
||||
|
||||
- jusqu’au niveau de zoom 16, un calque montrant la capacité de
|
||||
stationnement sous forme de *heatmap*
|
||||
- à partir du niveau de zoom 16, un calque montrant les parkings à
|
||||
vélo sous forme de marqueurs
|
||||
|
||||
À nouveau procédons par étapes.
|
||||
|
||||
1. éditez le calque créé précedemment et dans l’onglet **Données
|
||||
distantes** saisissez la valeur **16** dans le champ **Jusqu’au
|
||||
zoom**
|
||||
2. dupliquez le calque avec l’action **Cloner** de l’onglet **Actions
|
||||
avancées** : ainsi le nouveau calque est déjà configuré pour
|
||||
utiliser le fichier placé sur le seveur
|
||||
3. sélectionnez le **Type de calque** par défaut pour le nouveau calque
|
||||
4. dans l’onglet **Données distantes** saisissez la valeur **16** dans
|
||||
le champ **À partir du zoom**
|
||||
|
||||
|
||||
|
||||
Enfin vous pouvez renommer le nouveau calque, configurer le type de
|
||||
marqueur, et définir le gabarit de popup, par exemple :
|
||||
|
||||
# {capacity} emplacements
|
||||
Type : {bicycle_parking}
|
||||
Couvert : {covered}
|
||||
|
||||
L’image à droite montre un extrait de la carte au niveau de zoom 16,
|
||||
auquel nous avons choisi d’afficher les deux calques.
|
||||
|
||||
### 4. J’utilise une requête dynamique
|
||||
|
||||
Utiliser des données extraites plutôt qu’une requête présente un
|
||||
inconvénient : la mise à jour des données sur OpenStreetMap n’est pas
|
||||
répercutée sur notre carte. Pour pallier à cela nous vous proposons de
|
||||
modifier le calque montrant les parkings à vélos sous forme de
|
||||
marqueurs, de sorte qu’il utilise une requête dynamique.
|
||||
|
||||
Une **requête dynamique** permet d’*injecter* dans la requête des
|
||||
*variables* relatives à l’état actuel de la carte uMap. Nous allons
|
||||
utiliser une requête qui s’applique sur la seule partie visible de la
|
||||
carte, définie par un rectangle (ou *bounding box*). Cette requête
|
||||
s’exécutera à chaque zoom ou déplacement de la carte (d’où le terme
|
||||
*dynamique*) et récupérera les parkings à vélos à l’intérieur de ce
|
||||
rectangle.
|
||||
|
||||
#### Simplifier la requête Overpass
|
||||
|
||||
!!! note
|
||||
|
||||
Pour faciliter l’opération nous commençons par
|
||||
simplifier la requête Overpass. Les points importants sont :
|
||||
|
||||
1. placer la clause **`[bbox:{{bbox}}]`** en entête de requête pour que
|
||||
ce paramètre ne soit présent qu’une seule fois
|
||||
2. remplacer la production du résultat par la clause **`out center;`**
|
||||
qui permet de convertir chaque *way* (fermé ou pas) en un point
|
||||
|
||||
[out:xml][bbox:{{bbox}}];
|
||||
(
|
||||
node["amenity"="bicycle_parking"];
|
||||
way["amenity"="bicycle_parking"];
|
||||
);
|
||||
out center;
|
||||
|
||||
|
||||
#### Adapter et exporter la requête
|
||||
|
||||
|
||||
|
||||
L’opération est délicate, et exige sang froid et concentration :
|
||||
|
||||
1. remplacez `{{box}}` par `{south},{west},{north},{east}` : il s’agit
|
||||
de 4 variables qu’uMap remplacera, lors de l’exécution de la
|
||||
requête, par les valeurs définissant l’emprise de la carte.
|
||||
2. exportez la requête en utilisant l’option **download/copy as
|
||||
standalone query** : un fichier texte est produit et téléchargé.
|
||||
3. ouvrez le fichier dans un éditeur de texte et ajoutez en début de
|
||||
ligne la base de l’URL permettant d’exécuter une requête Overpass :
|
||||
`http://overpass-api.de/api/interpreter?data=`
|
||||
4. copiez la requête modifiée et collez le texte dans le champ URL de
|
||||
l’onglet **Données distantes**
|
||||
5. activez l’option **Dynamique** et définissez le zoom à partir duquel
|
||||
le calque est affiché
|
||||
6. selon le serveur Overpass utilisé, l’option **Avec
|
||||
proxy** doit être activée ou désactivée (voir ci-dessous)
|
||||
|
||||
Par commodité la requête modifiée est reprise ci-dessous, où elle peut
|
||||
être copiée par un triple-clic :
|
||||
|
||||
http://overpass-api.de/api/interpreter?data=[out:xml][bbox:{south},{west},{north},{east}];(node["amenity"="bicycle_parking"];way["amenity"="bicycle_parking"];);out center;
|
||||
|
||||
|
||||
!!! note
|
||||
N’hésitez pas à utiliser un autre serveur Overpass en
|
||||
libre service, dont la liste est disponible dans les **Paramètres
|
||||
généraux** de Overpass Turbo, par exemple
|
||||
`https://overpass.kumi.systems/`. Attention ce dernier exige
|
||||
d’**activer** l’option **Avec proxy**, alors que le serveur
|
||||
`http://overpass-api.de/` nécessite que l’option soit **désactivée**.
|
||||
|
||||
!!! note
|
||||
|
||||
N’utilisez pas la variable {bbox} car elle sera
|
||||
remplacée par des coordonnées dont l’ordre (W,S,N,E) n’est pas celui
|
||||
attendu par Overpass (S,W,N,E) !
|
||||
|
||||
Vous pouvez manipuler ci-dessous la carte produite par l’ensemble de ce
|
||||
tutoriel. Zoomez jusqu’à ce que les parkings à vélos apparaissent et
|
||||
déplacez la carte pour constater l’aspect dynamique des requêtes.
|
||||
|
||||
<iframe width="100%" height="400px" frameBorder="0" src="https://umap.openstreetmap.fr/fr/map/le-velo-a-nantes_189194?scaleControl=false&miniMap=false&scrollWheelZoom=false&zoomControl=true&allowEdit=false&moreControl=false&searchControl=null&tilelayersControl=null&embedControl=null&datalayersControl=false&onLoadPanel=undefined&captionBar=false"></iframe><p><a href="http://umap.openstreetmap.fr/fr/map/le-velo-a-nantes_189194">Voir en plein écran</a></p>
|
||||
|
||||
|
||||
## Faisons le point
|
||||
|
||||
Nous avons vu comment créer une carte montrant les données OpenStreetMap
|
||||
à jour, à l’aide de requêtes Overpass. Seule la couche montrant la
|
||||
densité des stationnements sous forme de *heatmap* nécessitera de
|
||||
renouveler l’extraction des données de temps en temps.
|
||||
|
||||
!!! note
|
||||
Les serveurs Overpass utilisés dans ce tutoriel sont
|
||||
des serveurs en libre service mis à disposition gracieusement. Ces
|
||||
serveurs sont très sollicités aussi il convient de les utiliser avec
|
||||
modération.
|
||||
|
||||
Si vous produisez une carte destinée à un grand nombre de consultations,
|
||||
préférez l’utilisation de données statiques, importées dans uMap ou
|
||||
stockées sur un serveur. Merci !
|
||||
|
||||
Si vous utilisez Github, ce [court
|
||||
tutoriel](https://hackmd.io/OkwpRqQ7QXC3p8C0jfTUGQ?view) en anglais
|
||||
explique comment utiliser un *workflow* pour exécuter une requête
|
||||
Overpass et placer le résultat en cache.
|
||||
|
||||
|
||||
??? info "Licence"
|
||||
|
||||
Travail initié par Antoine Riche sur [Carto’Cité](https://wiki.cartocite.fr/doku.php?id=umap:11_-_je_valorise_les_donnees_openstreetmap_avec_umap) sous licence [CC-BY-SA 4](https://creativecommons.org/licenses/by-sa/4.0/deed.fr).
|
||||
|
|
@ -191,7 +191,7 @@ savons la retrouver facilement. Nous avons vu comment créer, *styliser*
|
|||
et modifier points et lignes. Nous n’avons pas traité ici des polygones,
|
||||
qui représentent des surfaces. Certaines fonctionnalités propres aux
|
||||
polygones méritent d’être détaillées, ce que nous ferons dans le
|
||||
tutoriel [Le cas des polygones](/tutoriels/8-le-cas-des-polygones/).
|
||||
tutoriel [Le cas des polygones](8-polygons.md).
|
||||
|
||||
Pour le moment voyons comment nous pouvons davantage [personnaliser
|
||||
notre carte](4-customize-map.md).
|
||||
|
|
|
|||
|
|
@ -60,7 +60,7 @@ carte peut vous aider à en choisir un plutôt qu’un autre, par exemple :
|
|||
- les fonds **Outdoors**, **Landscape** ou **OpenTopoMap** montrent le
|
||||
relief : judicieux pour une carte de randonnée
|
||||
- **OpenCycleMap** montre les grands itinéraires cyclistes, comme les
|
||||
EuroVélo (Côte Atlantique, Loire à Vélo...)
|
||||
EuroVélo (Côte Atlantique, Loire à Vélo…)
|
||||
- **Positron**, **Toner** et **OSM-Monochrome** sont en noir et blanc
|
||||
: vos marqueurs, lignes et polygones seront plus visibles
|
||||
- le style **HOTOSM**, créé par le [groupe
|
||||
|
|
|
|||
205
docs-users/fr/tutorials/5-multimedia-tooltips.md
Normal file
205
docs-users/fr/tutorials/5-multimedia-tooltips.md
Normal file
|
|
@ -0,0 +1,205 @@
|
|||
!!! abstract "Ce que nous allons apprendre"
|
||||
|
||||
- Formater le texte des infobulles
|
||||
- Ajouter un lien vers une page Web
|
||||
- Insérer une photo et définir sa taille
|
||||
- Intégrer une vidéo
|
||||
|
||||
## Procédons par étapes
|
||||
|
||||
|
||||
|
||||
Nous avons vu dans
|
||||
le tutoriel [Je consulte une carte uMap](1-browsing-a-map.md)
|
||||
comment associer un nom et
|
||||
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
|
||||
lorsqu’on clique sur l’élément.
|
||||
|
||||
Le contenu de cette infobulle peut être enrichi de plusieurs manières :
|
||||
|
||||
- en formatant le texte : titres, caractères gras et italiques
|
||||
- en insérant un ou plusieurs liens vers une page Web
|
||||
- en insérant une image ou une vidéo
|
||||
|
||||
Mettre en forme une infobulle nécessite d’utiliser une syntaxe décrite
|
||||
en cliquant sur le point d’interrogation visible à droite de l’intitulé
|
||||
**description**, reprise ci-contre.
|
||||
|
||||
------------------------------------------------------------------------
|
||||
|
||||
### 1. Mettre en forme le texte d’une infobulle
|
||||
|
||||
|
||||
|
||||
Un exemple
|
||||
vaut mieux que de longues explications : la description ci-dessous
|
||||
produit l’infobulle à droite.
|
||||
|
||||
|
||||
|
||||
Notez les points suivants :
|
||||
|
||||
- une ligne commençant par `#` définit une ligne titre, un **caractère
|
||||
espace** doit être placé entre le caractère `#` et le texte du titre
|
||||
- une **zone vide** est ajoutée automatiquement en-dessous de chaque
|
||||
titre
|
||||
- il est possible de combiner caractères gras et italiques en
|
||||
utilisant `***`
|
||||
- le triangle en bas à gauche du champ de saisie permet de l’agrandir
|
||||
|
||||
### 2. Ajouter un lien vers une page Web
|
||||
|
||||
Reprenons [la carte de nos vacances à
|
||||
Crozon](http://u.osmfr.org/m/64936/). Au 3ème jour de vacances un fort
|
||||
vent d’Ouest nous amène à aller dans l’Anse de Morgat, bien abritée du
|
||||
vent. Nous décidons de documenter cette visite sur la carte. Nous
|
||||
ajoutons un marqueur sur la carte, puis découvrons avec intérêt
|
||||
l’article Wikipédia sur Morgat : <https://fr.wikipedia.org/wiki/Morgat>.
|
||||
|
||||
|
||||
Pour
|
||||
ajouter à notre infobulle **un lien vers l’article**, il suffit de
|
||||
copier l’adresse de la page Web, affichée dans la barre d’adresse du
|
||||
navigateur, et de la placer entre **double-crochets**. L’infobulle à
|
||||
droite correspond à la description ci-dessous :
|
||||
|
||||
Morgat est un ancien village de pêcheurs.
|
||||
|
||||
Article Wikipédia :
|
||||
[[https://fr.wikipedia.org/wiki/Morgat]]
|
||||
|
||||
|
||||
|
||||
Nous pouvons aussi **cacher l’adresse du lien** et la remplacer par un
|
||||
texte. Pour cela il suffit de faire suivre l’adresse d’une barre
|
||||
verticale (AltGr + 6 sur un clavier français) et du texte :
|
||||
|
||||
Morgat est un ancien village de pêcheurs.
|
||||
|
||||
[[https://fr.wikipedia.org/wiki/Morgat|Article Wikipédia]]
|
||||
|
||||
|
||||
|
||||
Cette forme est particulièrement utile pour les adresses longues.
|
||||
|
||||
------------------------------------------------------------------------
|
||||
|
||||
### 3. Insérer une image
|
||||
|
||||
Umap ne permet pas de stocker des images, mais sait afficher des photos
|
||||
publiées sur un serveur Web.
|
||||
|
||||
|
||||
|
||||
L’article
|
||||
Wikipédia montre une belle photo de l’Anse de Morgat. Les photos
|
||||
visibles dans Wikipédia sont sous licence libre *[Creative
|
||||
Commons](http://creativecommons.fr/)*. Cela signifie que l’auteur·rice
|
||||
de la photo renonce à ses droits d’auteur : nous pouvons donc utiliser
|
||||
cette photo. Pour cela nous devons :
|
||||
|
||||
1. copier l’**adressse de l’image** (cette opération est accessible
|
||||
dans le menu affiché par un clic droit sur la photo)
|
||||
2. placer cette adresse entre double accolades :
|
||||
|
||||
|
||||
Morgat est un ancien village de pêcheurs.
|
||||
|
||||
{{https://upload.wikimedia.org/wikipedia/commons/thumb/2/22/Morgat_8006.jpg/330px-Morgat_8006.jpg}}
|
||||
|
||||
[[https://fr.wikipedia.org/wiki/Morgat|Article Wikipédia]]
|
||||
|
||||
#### Afficher vos photos
|
||||
|
||||
Si vous disposez d’un serveur vous pouvez l’utiliser stocker vos photos.
|
||||
Si ce n’est pas le cas vous pouvez utiliser un service comme
|
||||
**[Framapic](https://framapic.org/)**, un service de stockage libre que
|
||||
l’association **[Framasoft](https://framasoft.org/)** met à la
|
||||
disposition de tous sans contre-partie. L’opération est très simple :
|
||||
|
||||
1. stockez votre photo sur Framapic par un glisser-déposer depuis votre
|
||||
explorateur de fichier vers le navigateur
|
||||
2. copiez le lien d’affichage de la photo
|
||||
3. collez ce lien entre **double accolades** dans la description de
|
||||
l’infobulle : `{{https://framapic.org/xxx/yyy.jpg}}`
|
||||
|
||||
|
||||
|
||||
#### Modifier la taille d’une image
|
||||
|
||||
|
||||
La taille de la photo est
|
||||
restreinte par la taille de l’infobulle. Pour **agrandir une image**
|
||||
vous devez utiliser une infobulle plus grande. Pour cela ouvrez l’onglet
|
||||
`Options d’interaction`, cliquez sur `Définir` en face de
|
||||
`Style de popup` puis choisissez **Nom et description (large)**.
|
||||
|
||||
|
||||
|
||||
A l’inverse vous pouvez **réduire la taille d’une image**, en faisant
|
||||
suivre le lien vers la photo d’une barre verticale et d’un nombre qui
|
||||
définit la **largeur en pixels** de l’image, par exemple :
|
||||
|
||||
{{https://framapic.org/xxx/yyy.jpg|400}}
|
||||
|
||||
#### Associer une image à un lien vers une page Web
|
||||
|
||||
Il est possible d’intégrer une image qui ouvre une page Web lorsque
|
||||
l’utilisateur clique dessus. Cela consiste en fait à créer un lien vers
|
||||
une page Web (syntaxe `[[lien|texte]]`), en utilisant en guise de texte
|
||||
le lien vers une image (syntaxe `{{image}}`). Exemple avec le site et le
|
||||
logo Framasoft :
|
||||
|
||||
[[https://framasoft.org/|{{https://framasoft.org/nav/img/logo.png}}]]
|
||||
|
||||
### 4. Insérer une vidéo
|
||||
|
||||
Insérer une vidéo est plus complexe. En effet le navigateur Web a besoin
|
||||
d’un lecteur pour afficher une vidéo. Les sites de partage de vidéos
|
||||
comme Youtube, DailyMotion ou encore [Framatube](https://framatube.org/)
|
||||
de Framasoft, proposent pour chaque vidéo un lien qui permet de
|
||||
l’intégrer dans une autre page Web en utilisant une *iframe*.
|
||||
|
||||
Nous trouvons sur YouTube une [vidéo des Grottes marines de
|
||||
Morgat](https://www.youtube.com/watch?v=sKvjd8bGsZM), qui se visitent en
|
||||
bateau. Pour intégrer cette vidéo à une infobulle, suivez les étapes :
|
||||
|
||||
1. ouvrez l’onglet **Intégrer** visible *sous* la vidéo
|
||||
2. copiez l’adresse après `src=` (sans les guillemets), notez qu’elle
|
||||
comporte le terme *embed* qui signifie *intégrer*
|
||||
|
||||
3. coller cette adresse entre **triple accolades** dans l’infobulle :
|
||||
|
||||
{{{https://www.youtube.com/embed/sKvjd8bGsZM}}}
|
||||
|
||||
4. pour un meilleur résultat utilisez un style de popup large, notez la
|
||||
hauteur et la largeur et définissez la taille de l’*iframe* avec les
|
||||
mêmes valeurs :
|
||||
|
||||
{{{https://www.youtube.com/embed/sKvjd8bGsZM|315*560}}}
|
||||
|
||||
Voici le résultat, la vidéo peut être directement visionnée dans notre
|
||||
infobulle :
|
||||
|
||||
|
||||
|
||||
## Faisons le point
|
||||
|
||||
Nous avons à présent tous les éléments pour produire une belle carte,
|
||||
avec des éléments stylisés et les infobulles qui les décrivent avec un
|
||||
contenu mis en forme et multimédia : liens, photos et vidéos.
|
||||
|
||||
La syntaxe permettant de mettre en forme une infobulle est certes un peu
|
||||
complexe, mais la bonne nouvelle est que cette même syntaxe peut être
|
||||
utilisée sur uMap en deux autres endroits :
|
||||
|
||||
- la description de la carte, définie dans le menu **Éditer les
|
||||
paramètres**
|
||||
- le descriptif des **calques**, que nous découvrons dans le
|
||||
[prochain tutoriel](6-handling-datalayers.md).
|
||||
|
||||
|
||||
??? info "Licence"
|
||||
|
||||
Travail initié par Antoine Riche sur [Carto’Cité](https://wiki.cartocite.fr/doku.php?id=umap:5_-_je_cree_des_infobulles_multimedia) sous licence [CC-BY-SA 4](https://creativecommons.org/licenses/by-sa/4.0/deed.fr).
|
||||
180
docs-users/fr/tutorials/6-handling-datalayers.md
Normal file
180
docs-users/fr/tutorials/6-handling-datalayers.md
Normal file
|
|
@ -0,0 +1,180 @@
|
|||
!!! abstract "Ce que nous allons apprendre"
|
||||
|
||||
- Créer des calques et organiser le contenu de la carte
|
||||
- Définir les propriétés d’un calque
|
||||
- Gérer les calques d’une carte
|
||||
|
||||
## Procédons par étapes
|
||||
|
||||
### 1. Créer un calque
|
||||
|
||||
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
|
||||
données de cette carte sont organisées en plusieurs calques :
|
||||
|
||||
- les cinémas : marqueurs jaunes
|
||||
- les autres lieux du festival : marqueurs bruns
|
||||
- les lignes de transport en commun
|
||||
- les stations de vélo-partage Bicloo
|
||||
|
||||
|
||||
|
||||
Le sélecteur de calques permet à l’utilisateur de zoomer sur l’ensemble
|
||||
des éléments d’un calque, de le masquer ou l’afficher à loisir. Chaque
|
||||
calque peut être décrit dans le panneau latéral de la carte. Organiser
|
||||
les éléments d’une carte est donc pratique pour consulter la carte, nous
|
||||
verrons aussi que cela permet de faciliter sa création.
|
||||
|
||||
|
||||
|
||||
Le menu **Gérer les
|
||||
calques**, disponible en mode édition, affiche la liste des calques
|
||||
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
|
||||
couche** du nouveau calque (*calque* ou *couche*, les deux termes sont
|
||||
équivalents).
|
||||
|
||||
|
||||
|
||||
Saisissez le nom du calque et une description de la catégorie d’éléments
|
||||
auxquels vous destinez ce calque : ils seront affichés dans le panneau
|
||||
**À propos**. Ci-dessous le résultat correspondant aux propriétés
|
||||
saisies à droite.
|
||||
|
||||
|
||||
|
||||
!!! note
|
||||
Sautez une ligne en début de description
|
||||
pour celle-ci apparaisse **sous** le nom du calque et non à côté dans le
|
||||
panneau À propos.
|
||||
|
||||
### 2. Organiser le contenu de la carte
|
||||
|
||||
|
||||
Lorsque vous
|
||||
ajoutez un élément à la carte, en haut du panneau de propriétés de
|
||||
l’élément se trouve un **menu déroulant** qui vous permet de choisir le
|
||||
calque où placer l’élément.
|
||||
|
||||
|
||||
|
||||
Il est bien sûr possible de changer le calque d’un élément déjà créé.
|
||||
N’hésitez donc pas, lorsque votre carte s’enrichit, à *restructurer* son
|
||||
contenu en plusieurs couches.
|
||||
|
||||
#### Comment définir les calques d’une carte ?
|
||||
|
||||
Il n’y a pas de méthode établie pour définir les calques : cela dépend
|
||||
vraiment des données placées sur la carte et de l’expérience du
|
||||
cartographe. Voici, pour quelques thématiques de cartes et à titre
|
||||
d’exemples, une proposition de listes de calques :
|
||||
|
||||
- tourisme : hébergement, restauration, transports, musées, points de
|
||||
vue…
|
||||
- logistique d’un festival : accès, scènes, restauration, sanitaires,
|
||||
déchets, postes de secours, réseau électrique…
|
||||
- événement à portée internationale : un ou plusieurs calques par
|
||||
langue
|
||||
- structures d’un réseau : structures porteuses, adhérentes au réseau,
|
||||
partenaires
|
||||
- projet d’aménagement : les différents scénarios ou variantes du
|
||||
projet
|
||||
|
||||
Nous verrons plus loin que lorsqu’une carte est intégrée à une page Web,
|
||||
il est possible de créer plusieurs présentations de la même carte, et de
|
||||
sélectionner pour chacune quels calques sont visibles. Vous pourrez
|
||||
donc, à partir d’une même carte uMap, diffuser plusieurs cartes dont le
|
||||
contenu est adapté au public visé par chacune des cartes.
|
||||
|
||||
Ainsi pour une carte multi-lingues vous pourrez diffuser la carte en
|
||||
différentes langues en sélectionnant le ou les calques de chaque langue.
|
||||
Pour l’exemple d’une carte de la logistique d’un festival, vous pourrez
|
||||
ainsi diffuser une carte vers le public (accès, scènes, restauration,
|
||||
sanitaires), une autre vers les équipes techniques (sanitaires, déchets,
|
||||
réseau électrique), une troisième vers la sécurtié civile (accès, postes
|
||||
de secours, réseau électrique), etc.
|
||||
|
||||
### 3. Définir les propriétés d’un calque
|
||||
|
||||
Un intérêt majeur de l’utilisation des calques est la possibilité de
|
||||
définir, pour chaque calque, le **style par défaut** des éléments qui
|
||||
seront ajoutés au calque. Vous éviterez ainsi la tâche fastidieuse de
|
||||
définir un à un le style de chaque élément et la carte sera nettement
|
||||
plus *lisible* car homogène. Surtout, si vous décidez que les cinémas
|
||||
doivent être affichés non plus en jaune mais en rouge, vous ne ferez la
|
||||
modification qu’une seule fois pour l’ensemble du calque et non pour
|
||||
chacun des éléments.
|
||||
|
||||
|
||||
|
||||
Dans le
|
||||
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 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
|
||||
le tutoriel
|
||||
[J’utilise un compte et crée une belle carte](3-create-account.md).
|
||||
|
||||
|
||||
|
||||
Toutes les propriétés, qui
|
||||
s’appliquent aux marqueurs, aux lignes et aux polygones, sont ici
|
||||
disponibles. Un calque peut en effet contenir indifféremment les trois
|
||||
types d’éléments, vous pouvez donc définir les propriétés par défaut
|
||||
pour chaque catégorie.
|
||||
|
||||
Une remarque toutefois : vous pouvez définir **une et une seule
|
||||
couleur**, qui s’applique à tous les éléments quel que soit leur type.
|
||||
Cette contrainte vise à créer une carte lisible, en associant une
|
||||
couleur à chaque calque. Cette couleur apparaît en **légende du panneau
|
||||
À propos**, comme dans l’exemple ci-contre.
|
||||
|
||||
### 4. Gérer les calques
|
||||
|
||||
|
||||
Revenons au **panneau de gestion des calques**. Nous avons vu comment
|
||||
créer un nouveau calque et définir ses propriétés.
|
||||
|
||||
|
||||
|
||||
Le carré à droite permet de modifier l’**ordre des calques** par un
|
||||
glisser-déposer. L’ordre ainsi défini est celui que l’on retrouve dans
|
||||
le sélecteur de calques et dans la liste des calques du panneau À
|
||||
Propos.
|
||||
|
||||
L’oeil 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
|
||||
l’utilité d’**Éditer dans un tableau** le contenu du calque. **Supprimer
|
||||
le calque** vous demandera de confirmer l’opération, cette opération
|
||||
supprimant le contenu du calque.
|
||||
|
||||
|
||||
|
||||
Enfin, l’onglet **Actions avancées** permet de vider un calque : cela
|
||||
supprime ses données mais conserve le calque. Vous pouvez également
|
||||
**cloner un calque** : cette opération copie le contenu et les
|
||||
propriétés du calque.
|
||||
|
||||
|
||||
!!! note
|
||||
Pour créer rapidement un nouveau calque dont
|
||||
les propriétés sont proches d’un calque existant, vous pouvez cloner le
|
||||
calque initial puis renommer le clone et vider son contenu.
|
||||
|
||||
## Faisons le point
|
||||
|
||||
S’il est un peu abstrait, le concept de calques est un des atouts de
|
||||
uMap. Au moment de créer un carte, prenez le temps de définir les
|
||||
principaux calques en anticipant les usages et les mises à jours de la
|
||||
carte. Familiarisez-vous à l’utilisation des calques, nous en ferons une
|
||||
grande utilisation dans le niveau avancé.
|
||||
|
||||
Nous avons à présent tous les éléments pour réaliser des cartes
|
||||
structurées, utiles, dont le contenu est riche et joli. Il est temps
|
||||
d’apprendre à publier une carte sur un site internet, c’est l’objet du
|
||||
[prochain tutoriel](7-publishing-and-permissions.md).
|
||||
|
||||
|
||||
??? info "Licence"
|
||||
|
||||
Travail initié par Antoine Riche sur [Carto’Cité](https://wiki.cartocite.fr/doku.php?id=umap:6_-_je_structure_ma_carte_avec_des_calques) sous licence [CC-BY-SA 4](https://creativecommons.org/licenses/by-sa/4.0/deed.fr).
|
||||
210
docs-users/fr/tutorials/7-publishing-and-permissions.md
Normal file
210
docs-users/fr/tutorials/7-publishing-and-permissions.md
Normal file
|
|
@ -0,0 +1,210 @@
|
|||
!!! abstract "Ce que nous allons apprendre"
|
||||
- Insérer une carte dans une page HTML
|
||||
- Publier une carte sur Wordpress
|
||||
- Adapter les fonctionnalités de la carte
|
||||
- Définir qui peut voir ou modifier la carte
|
||||
|
||||
## Procédons par étapes
|
||||
|
||||
### 1. Insérer une carte dans une page HTML
|
||||
|
||||
Nous avons vu dans le tutoriel
|
||||
[Je consulte une carte uMap](1-browsing-a-map.md) que
|
||||
le menu de partage permet d’*embarquer une carte en iframe*, sans donner
|
||||
plus de détail. Voyons comment cela se passe.
|
||||
|
||||
|
||||
|
||||
Une **iframe** est une balise du langage informatique HTML qui permet
|
||||
d’intégrer (embarquer) le contenu d’une page Web dans une autre page
|
||||
Web. C’est en fait très simple et nous avons déjà utilisé ce mécanisme
|
||||
pour intégrer une vidéo dans le tutoriel
|
||||
[Je crée des infobulles multimédia](5-multimedia-tooltips.md).
|
||||
|
||||
|
||||
|
||||
Voici les étapes à suivre :
|
||||
|
||||
1. ouvrir le panneau **Exporter et partager la carte**
|
||||
2. copier la totalité du texte sous **Intégrer la carte dans une
|
||||
iframe** (astuce: placer le curseur sur le texte puis utiliser les
|
||||
raccourcis clavier <kbd>Ctrl</kbd>+<kbd>a</kbd> pour tout sélectionner
|
||||
puis <kbd>Ctrl</kbd>+<kbd>c</kbd> pour copier la sélection)
|
||||
3. coller le texte copié dans le code source du fichier HTML dans
|
||||
lequel vous souhaitez intégrer la carte (raccourci clavier: <kbd>Ctrl</kbd>+<kbd>v</kbd>)
|
||||
|
||||
Voici un exemple minimaliste de fichier HTML dans lequel l’iframe d’une
|
||||
carte uMap à été intégrée :
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Exemple de carte uMap intégrée à une page Web</title>
|
||||
<meta charset="UTF-8">
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
<h1>La carte du festival</h1>
|
||||
<iframe width="100%" height="300px" frameBorder="0" src="https://umap.openstreetmap.fr/fr/map/festival-des-3-continents_26381?scaleControl=false&miniMap=false&scrollWheelZoom=false&zoomControl=true&allowEdit=false&moreControl=true&searchControl=null&tilelayersControl=null&embedControl=null&datalayersControl=true&onLoadPanel=caption&captionBar=false"></iframe>
|
||||
<p><a href="http://umap.openstreetmap.fr/fr/map/festival-des-3-continents_26381">Voir en plein écran</a></p>
|
||||
<p>Cette carte vous est proposée par Carto’Cité :-)</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Voici la carte intégrée sur cette page, en utilisant les options
|
||||
d’export par défaut :
|
||||
|
||||
<div style="border: solid 1px;">
|
||||
<h1>La carte du festival</h1>
|
||||
<iframe width="100%" height="300px" frameBorder="0" src="https://umap.openstreetmap.fr/fr/map/festival-des-3-continents_26381?scaleControl=false&miniMap=false&scrollWheelZoom=false&zoomControl=true&allowEdit=false&moreControl=true&searchControl=null&tilelayersControl=null&embedControl=null&datalayersControl=true&onLoadPanel=caption&captionBar=false"></iframe>
|
||||
<p><a href="http://umap.openstreetmap.fr/fr/map/festival-des-3-continents_26381">Voir en plein écran</a></p>
|
||||
<p>Cette carte vous est proposée par Carto’Cité :-)</p>
|
||||
</div>
|
||||
|
||||
Bien entendu cela suppose de connaître un peu HTML et de disposer d’un
|
||||
serveur sur lequel publier un tel fichier. Mais le principe est posé et
|
||||
pas si compliqué. Voyons maintenant un cas de figure plus courant.
|
||||
|
||||
### 2. Publier une carte sur WordPress
|
||||
|
||||
Publier une carte sur un site WordPress se passe de la même façon que
|
||||
ci-dessus, en copiant le *code HTML de l’iframe* dans l’éditeur
|
||||
WordPress. Il est par contre nécessaire d’**utiliser l’éditeur textuel**
|
||||
(onglet Texte) et non l’éditeur visuel.
|
||||
|
||||
|
||||
|
||||
Publiez la page et le tour est joué !
|
||||
|
||||
!!! note
|
||||
Pour des raisons de sécurité, les sites mutualisés
|
||||
comme <https://fr.wordpress.com/> n’autorisent pas l’inclusion d’iframe.
|
||||
Il vous sera donc impossible de publier une carte uMap sur de tels
|
||||
sites.
|
||||
|
||||
### 3. Adapter les fonctionnalités de la carte
|
||||
|
||||
La carte intégrée ci-dessus n’est pas très pratique : sa hauteur est
|
||||
insuffisante et le panneau latéral est partiellement visible. Les
|
||||
boutons disponibles à gauche ne sont pas forcément adaptés, par exemple
|
||||
nous ne souhaitons pas intégrer le sélecteur de calques.
|
||||
|
||||
L’onglet **Options d’export de l’iframe** permet de contrôler tout cela.
|
||||
Certaines de ces options correspondent aux **Options d’interface** vu
|
||||
dans le tutoriel
|
||||
[Je modifie et personnalise ma carte](4-customize-map.md). Il suffit
|
||||
d’activer ces options pour que le *code d’import de l’iframe* soit
|
||||
modifié. Une fois les options choisies, copiez ce code puis intégrez-le
|
||||
dans celui votre page Web.
|
||||
|
||||
|
||||
|
||||
Les premières options sont spécifiques à l’export par iframe et méritent
|
||||
d’être commentées :
|
||||
|
||||
- la **largeur** de 100% permet d’utiliser toute la largeur disponible
|
||||
de la page. Vous pouvez définir une largeur fixe en remplaçant le
|
||||
texte par une largeur en pixels, par exemple `800px`
|
||||
- le **lien "plein écran"** désigne le lien `Voir en plein écran`
|
||||
placé sous la carte. Celui-ci permet à l’utilisateur d’afficher la
|
||||
carte uMap telle nous l’avons vue jusqu’ici.
|
||||
- l’option **Vue courante plutôt que vue par défaut** permet
|
||||
d’appliquer le position et le niveau de zoom actuel de la carte à
|
||||
l’export. Cette option est par exemple intéressante pour produire
|
||||
plusieurs zooms d’une même carte.
|
||||
- l’option **Garder les calques visibles actuellement** permet de
|
||||
choisir les calques inclus dans la carte exportée. Cette option est
|
||||
utile pour produire plusieurs cartes pour plusieurs profils
|
||||
d’utilisateurs.
|
||||
- **Autoriser le zoom avec la molette** est peu adapté si la carte est
|
||||
intégrée dans une longue page, que les utilisateurs vont faire
|
||||
défiler avec la molette : arrivé à la carte la page ne défilera plus
|
||||
et la carte va effectuer un zoom arrière. Rien de grave mais ce
|
||||
comportement peut être surprenant.
|
||||
|
||||
!!! note
|
||||
Lorsque les options **Vue courante plutôt que vue par
|
||||
défaut** et **Garder les calques visibles actuellement** sont actives,
|
||||
modifier la vue courante ou les calques visibles ne modifie pas le code
|
||||
d’export. Vous devez désactiver puis réactiver l’option pour prendre en
|
||||
compte ces modifications.
|
||||
|
||||
Voici par exemple la même carte que ci-dessus, avec une vue et un choix
|
||||
de calque différents, et la plupart des options désactivées. Il est
|
||||
possible de déplacer la carte mais pas de zoomer ni modifier les
|
||||
calques.
|
||||
|
||||
<iframe width="600px" height="400px" frameBorder="0"
|
||||
src="https://umap.openstreetmap.fr/fr/map/festival-des-3-continents_26381?scaleControl=false&miniMap=false&scrollWheelZoom=false&zoomControl=null&allowEdit=false&moreControl=false&searchControl=null&tilelayersControl=null&embedControl=null&datalayersControl=false&onLoadPanel=none&captionBar=false&datalayers=53329%2C53328&locateControl=null&fullscreenControl=false#15/47.2132/-1.5503"
|
||||
></iframe>
|
||||
|
||||
|
||||
### 4. Définir qui peut voir ou modifier la carte
|
||||
|
||||
|
||||
|
||||
Le bouton **Changer
|
||||
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
|
||||
peut la voir et qui peut la modifier.
|
||||
|
||||
|
||||
|
||||
Lorsque vous créez une carte celle-ci est visible dans votre *catalogue*
|
||||
de cartes, dont l’adresse est
|
||||
`http://umap.openstreetmap.fr/fr/user/<votre-compte>/` : l’option **Tout
|
||||
le monde (public)** du menu déroulant **Qui a accès** est sélectionnée.
|
||||
Les autres options de ce menu sont :
|
||||
|
||||
- **quiconque a le lien** : la carte n’apparaît plus dans votre
|
||||
catalogue mais les personnes connaissant son lien peuvent la
|
||||
consulter.
|
||||
- **seulement les éditeurs** : seules les personnes ayant le droit
|
||||
d’éditer la carte, et identifiées comme telles, peuvent consulter la
|
||||
carte. Toute autre personne se verra refuser l’accès. N’utilisez pas
|
||||
cette option si vous intégrez la carte dans une iframe.
|
||||
|
||||
Lorsque vous créez une carte, vous êtes le seul à pouvoir la modifier.
|
||||
Vous pouvez inviter d’autres utilisateurs à la modifier en sélectionnant
|
||||
l’option **Seuls les éditeurs peuvent éditer** dans le menu **Statut
|
||||
d’édition**, puis en saisissant un à un le nom de compte des
|
||||
utilisateurs invités dans le champ **Éditeurs**.
|
||||
|
||||
Le nom de chaque utilisateur est ajouté à la suite de ce champ.
|
||||
|
||||
L’option **Tout le monde peut éditer** du menu **Statut d’édition** est
|
||||
utile pour créer une carte collectivement.
|
||||
|
||||
!!! note
|
||||
uMap ne permet pas à plusieurs éditeurs de modifier la
|
||||
carte simultanément. Le logiciel vous alerte lorsque l’opération
|
||||
**Enregistrer** risque d’écraser les modifications d’un autre
|
||||
utilisateur, vous devez alors choisir entre ses modifications (en
|
||||
validant Enregistrer) ou les vôtres (en annulant).
|
||||
|
||||
Si vous êtes plusieurs éditeurs d’une même carte, concertez-vous avant
|
||||
de modifier la carte.
|
||||
|
||||
Enfin vous pouvez **tranférer la propriété** d’une carte à un autre
|
||||
utilisateur : supprimez le propriétaire actuel (vous) en cliquant sur la
|
||||
petite croix à droite du champ **Owner**, puis saisissez le nom de
|
||||
compte de l’utilisateur à qui vous donnez la carte.
|
||||
|
||||
## Faisons le point
|
||||
|
||||
À ce stade nous savons créer une carte structurée avec du contenu
|
||||
multimédia, nous savons la publier et l’intégrer à une page Web, nous
|
||||
savons même la modifier collectivement. Nous allons bientôt pouvoir
|
||||
passer au niveau avancé, dans lequel nous allons apprendre à **importer
|
||||
des données** dans une carte et explorer les capacités d’ouverture de
|
||||
uMap.
|
||||
|
||||
Mais avant cela, nous allons terminer le niveau intermédiaire en
|
||||
traitant [le cas des polygones](8-polygons.md).
|
||||
|
||||
|
||||
??? info "Licence"
|
||||
|
||||
Travail initié par Antoine Riche sur [Carto’Cité](https://wiki.cartocite.fr/doku.php?id=umap:7_-_je_publie_ma_carte_et_en_controle_l_acces) sous licence [CC-BY-SA 4](https://creativecommons.org/licenses/by-sa/4.0/deed.fr).
|
||||
|
||||
210
docs-users/fr/tutorials/8-polygons.md
Normal file
210
docs-users/fr/tutorials/8-polygons.md
Normal file
|
|
@ -0,0 +1,210 @@
|
|||
!!! abstract "Ce que nous allons apprendre"
|
||||
|
||||
- Créer un polygone et le modifier
|
||||
- Styliser un polygone : remplissage et contour(s)
|
||||
- Associer une URL à un polygone
|
||||
- Extraire des limites administratives d’OpenStreetMap
|
||||
- Importer des données dans une carte
|
||||
|
||||
!!! question
|
||||
|
||||
Pourquoi traiter les polygones à part, il ne s’agit que d’une ligne
|
||||
fermée ? Un polygone est en réalité bien plus qu’un ligne fermée. Cette
|
||||
ligne sépare l’**intérieur du polygone** de son extérieur, ceci est
|
||||
important car uMap peut réagir à un clic à l’intérieur du polygone. De
|
||||
plus un polygone être troué, il est alors défini par plusieurs lignes.
|
||||
|
||||
## Procédons par étapes
|
||||
|
||||
### 1. Créer un polygone
|
||||
|
||||
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
|
||||
nautique. Ajoutons cette zone à la carte.
|
||||
|
||||
|
||||
|
||||
Le bouton
|
||||
**Dessiner un polygone** permet de tracer le périmètre d’un polygone
|
||||
point par point, et de le terminer en cliquant à nouveau sur le dernier
|
||||
point comme pour le tracé d’une ligne. Une différence toutefois : dès le
|
||||
troisième point l’intérieur du polygone est coloré.
|
||||
|
||||
#### Propriétés d’un polygone
|
||||
|
||||
|
||||
|
||||
La liste des
|
||||
propriétés d’un polygone est assez longue. Les propriétés de la moitié
|
||||
supérieure du menu s’appliquent au périmètre du polygone, et sont
|
||||
identiques aux propriétés s’appliquant aux lignes. Le moitié inférieure
|
||||
concerne le remplissage du polygone. Noter :
|
||||
|
||||
- les options **trait** et **remplissage** permettent de ne pas
|
||||
afficher le périmètre ou l’intérieur du polygone : si aucun de ces
|
||||
deux éléments est affiché le polygone est invisible.
|
||||
- la **couleur du remplissage** est par défaut celle du trait, mais
|
||||
peut être modifiée.
|
||||
- une faible **opacité du remplissage** permet de voir le fond de
|
||||
carte *sous* le polygone.
|
||||
|
||||
#### Trouer un polygone
|
||||
|
||||
Il est parfois utile de créer un ou plusieurs trous dans un polygone,
|
||||
par exemple pour dessiner une clairière dans une forêt ou un île au
|
||||
milieu d’un étang.
|
||||
|
||||
|
||||
|
||||
Vous pouvez créer un
|
||||
polygone avec un ou plusieurs trous en cliquant sur l’option **Ajouter
|
||||
un tracé intérieur** lorsque vous sélectionnez un polygone en mode
|
||||
édition.
|
||||
|
||||
Le premier point du *périmètre intérieur* est créé directement là où
|
||||
vous avez cliqué avant de choisir **Ajouter un tracé intérieur**.
|
||||
|
||||
Notez que les propriétés de périmètre d’un polygone s’appliquent à tous
|
||||
les périmètres - extérieurs et intérieurs.
|
||||
|
||||
### 2. Définir les interactions avec un polygone
|
||||
|
||||
L’onglet **Options d’interaction** propose deux options spécifiques aux
|
||||
polygones.
|
||||
|
||||
|
||||
|
||||
Toute interaction peut être désactivée en sélectionnant **OFF** pour
|
||||
l’option **Autoriser les interactions**. Aucune infobulle n’est alors
|
||||
affichée lors d’un clic sur le polygone. Cette option est intéressante
|
||||
pour donner de l’importance à une zone de la carte sans que
|
||||
l’utilisateur ne puisse interagir avec.
|
||||
|
||||
|
||||
|
||||
Voici un exemple montrant
|
||||
l’Ile de Nantes entourée d’un large trait rouge et sans remplissage. Il
|
||||
n’est possible de cliquer ni sur le contour ni à l’intérieur du
|
||||
polygone.
|
||||
|
||||
!!! note
|
||||
L’interaction avec le polygone reste désactivée en mode
|
||||
édition. Pour pouvoir éditer le polygone il est alors nécessaire de
|
||||
passer par le panneau **Visualiser les données** (toujours accessible
|
||||
par le panneau de Légende lui-même accessible depuis le lien **A
|
||||
propos** en bas à droite de la carte).
|
||||
|
||||
|
||||
|
||||
|
||||
À l’inverse, il est
|
||||
possible d’associer à un polygone une URL : un clic sur le polygone
|
||||
ouvre alors la page Web correspondante directement, sans passer par une
|
||||
infobulle. Il suffit pour cela de définir le **Lien vers…** puis de
|
||||
saisir l’URL. il existe trois options permettant de définir ***où***
|
||||
sera ouverte la page Web :
|
||||
|
||||
- **nouvelle fenêtre** : la page s’ouvre dans un nouvel onglet du
|
||||
navigateur
|
||||
- **fenêtre parente** : la page s’ouvre dans le même onglet que celui
|
||||
de la carte
|
||||
- **iframe** : si la carte est intégrée dans une iframe, la page Web
|
||||
est alors ouverte à l’intérieur de l’iframe
|
||||
|
||||
|
||||
### 3. Réaliser un menu cartographique
|
||||
|
||||
Associer un URL à un polygone permet de créer un *menu cartographique*,
|
||||
c’est-à-dire une carte permettant d’accéder à plusieurs pages Web selon
|
||||
la zone sur laquelle clique l’utilisateur. Voici un exemple montrant les
|
||||
différents quartiers de Nantes : un clic sur un quartier ouvre la page
|
||||
correspondante du site <http://www.nantes.fr>.
|
||||
|
||||
<iframe width="500px" height="550px" frameBorder="0" src="https://umap.openstreetmap.fr/fr/map/quartiers-de-nantes_126581?scaleControl=false&miniMap=false&scrollWheelZoom=false&zoomControl=false&allowEdit=false&moreControl=false&searchControl=null&tilelayersControl=null&embedControl=null&datalayersControl=false&onLoadPanel=undefined&captionBar=false&fullscreenControl=false&datalayers=311326#12/47.24/-1.5"></iframe>
|
||||
|
||||
|
||||
Voici les étapes pour réaliser cette carte.
|
||||
|
||||
#### a. Récupérer les contours des quartiers
|
||||
|
||||
Le contour des quartiers de Nantes provient les limites administratives
|
||||
d’OpenStreetMap (pour en savoir plus, consultez cette [page du
|
||||
Wiki](http://wiki.openstreetmap.org/wiki/WikiProject_France/Liste_limites_administratives)).
|
||||
Le site [OSM Boundaries](https://osm-boundaries.com/) permet de
|
||||
sélectionner les limites administratives une à une, puis de les exporter
|
||||
dans différents formats.
|
||||
|
||||
|
||||
|
||||
Suivez ces étapes :
|
||||
|
||||
1. connectez-vous à votre compte OpenStreetMap (celui-ci est exigé pour
|
||||
pouvoir exporter les limites administratives)
|
||||
2. sélectionnez les limites administratives une par une, en ouvrant
|
||||
successivement les différents niveaux : pays - région - département
|
||||
etc.
|
||||
3. sélectionez le format d’export JSON : le format
|
||||
[GeoJSON](https://fr.wikipedia.org/wiki/GeoJSON) est alors utilisé
|
||||
4. cliquez sur Export
|
||||
|
||||
Vous récupérez dans le dossier des téléchargements un fichier dont
|
||||
l’extension est `.geojson`.
|
||||
|
||||
|
||||
|
||||
#### b. Importer les contours de quartier dans une carte
|
||||
|
||||
|
||||
|
||||
Dans une nouvelle
|
||||
carte, cliquez sur **Importer des données**. Dans le panneau qui appraît
|
||||
alors, sélectionnez le fichier produit à l’étape précédente.
|
||||
|
||||
Le sélecteur de format se positionne automatiquement sur **geojson**,
|
||||
sélectionnez-le si ce n’est pas le cas, par exemple parce que
|
||||
l’extension du fichier n’est pas `.geojson`. Cliquez sur **Importer** :
|
||||
les contours apparaissent sur la carte.
|
||||
|
||||
#### c. Configurer la carte uMap
|
||||
|
||||
Configurez le calque afin d’afficher une étiquette - au survol ou pas
|
||||
selon votre choix. Ensuite éditez chaque polygone pour lui associer
|
||||
l’URL vers la page Web correspondante, comme nous l’avons vu plus haut.
|
||||
|
||||
Enfin vous pouvez, dans les **Paramètres de la carte**, définir les
|
||||
**Limites géographiques** de la carte. Cela permet d’empêcher
|
||||
l’utilisateur de déplacer la carte au-delà de ces limites.
|
||||
|
||||
|
||||
#### d. Intégrer la carte dans une iframe
|
||||
|
||||
Récupérez le code de l’iframe, comme nous l’avons vu dans le
|
||||
[tutoriel précédent](7-publishing-and-permissions.md),
|
||||
en prenant soin de désactiver toutes les options d’interaction : boutons
|
||||
de zoom, zoom avec la molette, bouton « Plus » etc.
|
||||
|
||||
Copiez ce **code iframe** dans votre page Web, et le tour est joué !
|
||||
|
||||
!!! note
|
||||
Lorsque vous modifiez la carte, vous devez recharger
|
||||
entièrement la page contenant l’iframe pour vider le cache du
|
||||
navigateur, par exemple en utilisant **Ctrl+F5** sur Firefox.
|
||||
|
||||
|
||||
## Faisons le point
|
||||
|
||||
Ce tutoriel marque la fin du niveau intermédiaire. Vous savez structurer
|
||||
le contenu d’une carte avec des calques et utiliser des styles par
|
||||
défaut. Vous savez formater les infobulles et y intégrer du multimédia.
|
||||
Vous savez intégrer votre carte dans une page Web et contrôler qui peut
|
||||
la voir et la modifier.
|
||||
|
||||
Nous venons de voir comment importer des données dans une carte, le
|
||||
niveau avancé va nous permettre d’aller bien plus loin dans cette
|
||||
démarche.
|
||||
|
||||
|
||||
??? info "Licence"
|
||||
|
||||
Travail initié par Antoine Riche sur [Carto’Cité](https://wiki.cartocite.fr/doku.php?id=umap:8_-_le_cas_des_polygones) sous licence [CC-BY-SA 4](https://creativecommons.org/licenses/by-sa/4.0/deed.fr).
|
||||
|
||||
298
docs-users/fr/tutorials/9-map-from-spreadsheet.md
Normal file
298
docs-users/fr/tutorials/9-map-from-spreadsheet.md
Normal file
|
|
@ -0,0 +1,298 @@
|
|||
!!! abstract "Ce que nous allons apprendre"
|
||||
|
||||
- Structurer des données pour pouvoir les géocoder
|
||||
- Géocoder des adresses et vérifier le résultat
|
||||
- Importer un tableau de données dans une carte uMap
|
||||
- Injecter le contenu du tableau dans les infobulles
|
||||
- Configurer le tri et le filtre des données
|
||||
|
||||
## Procédons par étapes
|
||||
|
||||
L’objectif de ce tutoriel est de créer une carte en important des
|
||||
données dans uMap. Cela peut être utile dans plusieurs situations :
|
||||
|
||||
- visualiser des données que vous avez trouvées sur un portail open
|
||||
data, par exemple <https://data.nantesmetropole.fr/>
|
||||
- placer sur une carte les contacts (clients, fournisseurs,
|
||||
concurrents…) que vous gérez dans un tableur
|
||||
|
||||
L’enjeu est de placer automatiquement chaque élément à sa **position
|
||||
géographique**, définie par une **longitude** et une **latitude** (on
|
||||
parle aussi de **point GPS**). Pour cela il faut que les données soient
|
||||
**géocodées**, par exemple un tableau contiendra deux colonnes :
|
||||
latitude et longitude.
|
||||
|
||||
Si les données *open data* sont parfois géocodées, ce n’est généralement
|
||||
pas le cas de votre fichier de contacts qui contient des adresses. Il
|
||||
est dans ce cas nécessaire de passer par une étape de **géocodage**, qui
|
||||
consiste à convertir chaque adresse en latitude et longitude. Nous
|
||||
allons traiter ce cas de figure, étape par étape.
|
||||
|
||||
### 1. Je crée un tableau avec des adresses
|
||||
|
||||
Pour convertir des adresses en longitude et latitude nous allons
|
||||
utiliser un **géocodeur**. Celui-ci utilise une base de données
|
||||
d’adresses géocodées, parmi lesquelles il recherche l’adresse à
|
||||
géocoder. Voici quelques conseils à suivre pour faciliter la tâche du
|
||||
géocodeur et obtenir de bons résultats :
|
||||
|
||||
- répartir chaque adresse en **plusieurs colonnes** : adresse, code
|
||||
postal et ville
|
||||
- porter dans la colonne adresse le **libellé de la voie précédé du
|
||||
numéro**, par exemple `14 rue de la Paix`, ou le nom du lieu-dit
|
||||
- placer tout autre élément d’adresse (boîte postale, étage…) dans
|
||||
un autre champ
|
||||
|
||||
Voici par exemple quelques adresses bien structurées, provenant du
|
||||
fichier [Sièges des syndicats intercommunaux de transports scolaires en
|
||||
Loire-Atlantique](https://data.nantesmetropole.fr/explore/dataset/234400034_031-001_sits_shp/export/)
|
||||
:
|
||||
|
||||
| NOM | ADRESSE | COMPL_ADR | CP | VILLE |
|
||||
| ------------------------| -----------------------| -----------------------------| -------| --------------------------|
|
||||
| C. C. LOIRE et SILLON | 2 bd de la Loire | | 44260 | SAVENAY |
|
||||
| C. C. COEUR d’ESTUAIRE | 1 Cours d’Armor | Route de Savenay | 44360 | SAINT ETIENNE DE MONTLUC |
|
||||
| RESEAU CAP ATLANTIC’ | 4 rue Alphonse Daudet | Zone Tertiaire de Kerbiniou | 44350 | GUERANDE |
|
||||
| SITS SUD LOIRE LAC | ZI de la Seiglerie | | 44270 | MACHECOUL |
|
||||
|
||||
L’utilisation de majuscules ou minuscules n’a en général pas
|
||||
d’incidence. Le tableau peut bien sûr contenir d’autres colonnes, comme
|
||||
ici les colonnes NOM et COMPL_ADR.
|
||||
|
||||
!!! note
|
||||
|
||||
Pour la suite des opérations, il est important que le
|
||||
tableur respecte les règles suivantes :
|
||||
|
||||
- la première ligne du tableur doit contenir les noms de colonnes, les
|
||||
autres lignes contiennent les données et rien d’autre
|
||||
- les noms de colonnes ne doivent contenir ni espace ni accent ou
|
||||
autre caractère spécial
|
||||
- les noms de colonnes doivent être tous différents
|
||||
- les cellules ne doivent pas contenir de "retour chariot" ou "saut de
|
||||
ligne"
|
||||
- les cellules ne doivent pas être fusionnées
|
||||
|
||||
En d’autres termes, le tableur doit représenter une **base de données**.
|
||||
|
||||
### 2. Je convertis les adresses en coordonnées géographiques
|
||||
|
||||
Plusieurs **géocodeurs** sont disponibles sur internet. La qualité du
|
||||
géocodage peut différer en fonction de plusieurs facteurs :
|
||||
|
||||
- votre adresse est incomplète ou contient une erreur, par exemple un
|
||||
mauvais code postal
|
||||
- la base d’adresses utilisée contient des adresses erronées ou n’est
|
||||
pas à jour
|
||||
- l’algorithme chargé de comparer votre adresse à celles de la base de
|
||||
données fait de mauvaises hypothèses
|
||||
|
||||
Aucun géocodeur n’est parfait. Il est donc important de **vérifier la
|
||||
qualité du géocodage**, voire de comparer et combiner le résultat de
|
||||
plusieurs géocodeurs. La plupart des géocodeurs produisent, en
|
||||
complément à chaque latitude et longitude, un score permettant d’évaluer
|
||||
la qualité du résultat.
|
||||
|
||||
En France le site <https://adresse.data.gouv.fr> donne accès à la Base
|
||||
Adresse Nationale (BAN). Il fournit plusieurs outils, dont le [géocodeur
|
||||
CSV](https://adresse.data.gouv.fr/csv) qui permet de géocoder une liste
|
||||
d’adresses très rapidement avec de bons résultats.
|
||||
|
||||
[DoGeocodeur](https://dogeo.fr/_apps/DoGeocodeur/) est un site
|
||||
particulièrement bien pensé : il sait utiliser plusieurs géocodeurs
|
||||
(Google, IGN, BAN…) et combiner leur résultat, afficher le résultat
|
||||
sur une carte, et vous permet de positionner manuellement une adresse.
|
||||
Lui aussi utilise des fichiers CSV.
|
||||
|
||||
!!! note
|
||||
CSV désigne un fichier texte contenant les données d’un
|
||||
tableau, dont les valeurs (le contenu de chaque cellule) sont séparées
|
||||
par des virgules (CSV signifie *comma-separated values*) … ou par un
|
||||
autre caractère : l’important est que ce **séparateur** ne soit pas
|
||||
utilisé à l’intérieur d’une valeur. Le point-virgule est souvent utilisé
|
||||
comme séparateur pour créer un fichier CSV.
|
||||
|
||||
Pour géocoder les adresses d’un tableau, les étapes à suivre sont :
|
||||
|
||||
1. exporter le tableau dans un fichier au format CSV, en choisissant le
|
||||
séparateur (conseil : point-virgule) et le jeu de caractères
|
||||
(encodage) **UTF-8**. Inclure les entêtes de colonnes si l’option
|
||||
vous est proposée. Voici par exemple le panneau d’export CSV de
|
||||
LibreOffice Calc :
|
||||
|
||||
2. importer le fichier CSV dans le site de géocodage de votre choix,
|
||||
celui-ci vous demande en général de sélectionner les noms de
|
||||
colonnes correspondant à l’adresse, au code postal et à la commune
|
||||
3. vérifier le résultat du géocodage, l’ajuster et le compléter au
|
||||
besoin
|
||||
4. exporter le résultat, qui sera lui aussi au format CSV
|
||||
|
||||
!!! note
|
||||
Pour exporter un fichier CSV en UTF-8 avec Microsoft
|
||||
Excel, le menu **Options Web** dans la fenêtre **Enregistrer sous**
|
||||
permet, dans l’onglet **Encodage**, de sélectionner **Unicode (UTF-8)**.
|
||||
Malheureusement cela **ne fonctionne pas pour MS Excel 2016 ni Office
|
||||
365/Excel**, il s’agit d’un [bogue
|
||||
connu](https://answers.microsoft.com/en-us/msoffice/forum/all/office-365excel-generates-incorrect-csv-utf-8/56516c38-78d8-40f5-90b3-f5d9db3d6d10).
|
||||
|
||||
Pour contourner ce bogue, une possibilité est d’utiliser l’éditeur
|
||||
[Notepad++](https://notepad-plus-plus.org/) que vous devez installer. Ne
|
||||
pas changer l’encodage lors de l’export CSV, puis ouvrir le fichier dans
|
||||
Notepad++, convertir en UTF-8 dans le menu **Encodage**, enfin
|
||||
enregistrer le fichier.
|
||||
|
||||
### 3. J’importe le tableau géocodé dans un calque
|
||||
|
||||
Cliquez sur
|
||||
**Importer des données** pour afficher le panneau du même nom, puis
|
||||
sélectionnez le fichier précédemment géocodé.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Vérifiez que uMap a bien reconnu **CSV** pour le format des données, et
|
||||
choisissez de les importer dans un **nouveau calque**.
|
||||
|
||||
Enfin cliquez sur **Importer** : les données sont chargées puis
|
||||
affichées sur la carte. Les lignes n’ayant pas de position géographique
|
||||
sont ignorées, un message est alors affiché.
|
||||
|
||||
!!! note
|
||||
|
||||
uMap utilise la première ligne du fichier CSV pour
|
||||
identifier les noms de colonnes, en particulier **latitude** et
|
||||
**longitude** qui sont utilisés pour positionner les points (**lat** et
|
||||
**lon** sont aussi compris). Vérifiez la présence de ces noms de
|
||||
colonnes si l’opération échoue. Attention également à ce que les
|
||||
coordonnées soient exprimées en **degrés décimaux**, avec un point pour
|
||||
délimiter les décimales. Exemple: 48.40 est correct mais 48,40 et 48°24’
|
||||
ne sont pas valides pour uMap.
|
||||
|
||||
Notez que vous pouvez directement coller les données dans le panneau
|
||||
d’import. Il est cependant intéressant de passer par un fichier que vous
|
||||
pouvez conserver sur votre poste.
|
||||
|
||||
Enfin vous pouvez réimporter les données, par exemple après les avoir
|
||||
mises à jour. Sélectionnez alors le même calque et cochez la case
|
||||
**Remplacer le contenu du calque**.
|
||||
|
||||
### 4. J’insère le contenu du tableau dans les infobulles
|
||||
|
||||
|
||||
|
||||
Cliquez maintenant sur un marqueur importé à l’étape précédente :
|
||||
l’infobulle affiche le nom du calque (en l’occurence le nom du fichier
|
||||
importé si vous ne l’avez pas renommé) au lieu du nom présent dans le
|
||||
tableau de données.
|
||||
|
||||
Il y a plusieurs possibilités pour rémédier à cela.
|
||||
|
||||
#### Modifier le champ utilisé
|
||||
|
||||
|
||||
|
||||
Éditez le calque et
|
||||
modifiez, dans l’onglet Propriétés avancées, la **Clé pour le libellé**.
|
||||
Saisissez le nom de la colonne du fichier importé. Chaque infobulle
|
||||
affiche désormais le contenu de cette colonne.
|
||||
|
||||
|
||||
|
||||
!!! note
|
||||
Respecter la casse, c’est-à-dire les majuscules et
|
||||
minuscules. Le nom de colonne ne doit pas contenir de caractère spécial
|
||||
: accents, espace, ponctuation…
|
||||
|
||||
#### Afficher un tableau
|
||||
|
||||
|
||||
|
||||
Le contenu du tableau peut
|
||||
être affiché dans les infobulles, sous forme d’un tableau à deux
|
||||
colonnes : l’intitulé et la valeur correspondante.
|
||||
|
||||
Dans l’onglet **Options d’interaction** du calque, changez le **Style de
|
||||
la popup** en **Tableau**. Voici un exemple de résultat :
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Notez que vous
|
||||
pouvez modifier le contenu du tableau en cliquant sur **Éditer dans un
|
||||
tableau** dans le sélecteur de calques. Vous pouvez alors supprimer ou
|
||||
renommer des colonnes, voire même modifier les cellules du tableau.
|
||||
|
||||
#### Définir le gabarit des infobulles
|
||||
|
||||
|
||||
|
||||
Le tableau ci-dessus n’est
|
||||
pas particulièrement joli avec ses libellés en majuscules.
|
||||
|
||||
Dans le tutoriel [5-multimedia-tooltips.md) nous avons vu
|
||||
comment formater le contenu d’une infobulle. Nous pouvons utiliser la
|
||||
même syntaxe pour définir le contenu de **toutes les infobulles d’un
|
||||
calque**, en y intégrant le contenu des cellules du tableau.
|
||||
|
||||
Dans l’onglet **Options d’interaction** du calque, éditez le **Gabarit
|
||||
du contenu de la popup**. Définissez le format des popups (titres,
|
||||
caractère gras, etc.) comme vu précédemment. Pour *injecter* le contenu
|
||||
d’une cellule dans l’infobulle, il suffit d’ajouter le nom de la colonne
|
||||
placé entre accolades, par exemple **{NOM}**.
|
||||
|
||||
|
||||
|
||||
Vous pouvez utiliser dans le gabarit tous les champs du tableau. Voici à
|
||||
droite un exemple de gabarit et le résultat pour une infobulle.
|
||||
|
||||
**Cette approche est très puissante.** Vous pouvez l’utiliser pour
|
||||
injecter, pour chaque ligne du tableau, un lien vers un site internet
|
||||
(et pourquoi pas le texte associé), une image ou une iframe. Il suffit
|
||||
pour cela d’intégrer le nom de colonnes et ses accolades, à la syntaxe
|
||||
de mise en forme du texte, par exemple `[[{LIEN_SITE}|{TEXTE_LIEN}]]` ou
|
||||
encore `{{{URL_IMAGE}}}`.
|
||||
|
||||
### 5. Je configure le tri et les filtres
|
||||
|
||||
|
||||
|
||||
Nous avons vu dans le tutoriel
|
||||
[Je consulte une carte uMap](1-browsing-a-map.md) qu’il
|
||||
est possible de voir l’ensemble des données de la carte sous la forme
|
||||
d’une liste. Cette liste peut aussi filtrée par l’utilisateur, à partir
|
||||
d’un mot par exemple.
|
||||
|
||||
|
||||
|
||||
Pour permettre aux
|
||||
utilisateurs de filtrer les données il convient de préciser à uMap à
|
||||
quel(s) champ(s) le "mot-filtre" doit s’appliquer. Cela s’effectue dans
|
||||
l’onglet **Propriétés par défaut** des **Propriétés de la carte**. Vous
|
||||
pouvez indiquer plusieurs noms de champ (noms de colonne), le filtre
|
||||
s’appliquera à chacun des champs.
|
||||
|
||||
Notez que vous pouvez également trier la liste en sélectionnant la **Clé
|
||||
de tri**, c’est-à-dire le nom de la colonne utilisée pour le tri (tri
|
||||
croissant uniquement). Enfin vous pouvez définir la clé par défaut pour
|
||||
le libellé, qui sera utilisée si celle-ci n’est pas définie pour le
|
||||
calque.
|
||||
|
||||
!!! note
|
||||
Les clés de tri et de filtre s’appliquent à l’ensemble
|
||||
des données, tous calques confondus. Si votre carte est constituée de
|
||||
plusieurs calques, il est donc conseillé d’utiliser le même nom de clé
|
||||
pour désigner le même type d’information. Évitez par exemple d’utiliser
|
||||
**Ville** pour un calque et **Commune** pour un autre, utilisez plutôt
|
||||
**Commune** pour les deux.
|
||||
|
||||
## Faisons le point
|
||||
|
||||
Ce tutoriel est probablement le plus complexe de la série. Appréciez
|
||||
toutefois les possibilités offertes par uMap pour intégrer des données
|
||||
externes.
|
||||
|
||||
??? info "Licence"
|
||||
|
||||
Travail initié par Antoine Riche sur [Carto’Cité](https://wiki.cartocite.fr/doku.php?id=umap:9_-_je_cree_une_carte_a_partir_dun_tableur) sous licence [CC-BY-SA 4](https://creativecommons.org/licenses/by-sa/4.0/deed.fr).
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 46 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 40 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 58 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 54 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 65 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 185 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 121 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 84 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 53 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 80 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 92 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 139 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 61 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 31 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 98 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 38 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 35 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 38 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 37 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 80 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 55 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 54 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 337 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 46 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 53 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 44 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 79 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 35 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 41 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
4
docs-users/tutorials/10-embed-remote-data.md
Normal file
4
docs-users/tutorials/10-embed-remote-data.md
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
!!! example "This is an ongoing work."
|
||||
|
||||
[Let us know](https://github.com/umap-project/umap/issues)
|
||||
if you are interested to translate it from French.
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
!!! example "This is an ongoing work."
|
||||
|
||||
[Let us know](https://github.com/umap-project/umap/issues)
|
||||
if you are interested to translate it from French.
|
||||
4
docs-users/tutorials/5-multimedia-tooltips.md
Normal file
4
docs-users/tutorials/5-multimedia-tooltips.md
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
!!! example "This is an ongoing work."
|
||||
|
||||
[Let us know](https://github.com/umap-project/umap/issues)
|
||||
if you are interested to translate it from French.
|
||||
4
docs-users/tutorials/6-handling-datalayers.md
Normal file
4
docs-users/tutorials/6-handling-datalayers.md
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
!!! example "This is an ongoing work."
|
||||
|
||||
[Let us know](https://github.com/umap-project/umap/issues)
|
||||
if you are interested to translate it from French.
|
||||
4
docs-users/tutorials/7-publishing-and-permissions.md
Normal file
4
docs-users/tutorials/7-publishing-and-permissions.md
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
!!! example "This is an ongoing work."
|
||||
|
||||
[Let us know](https://github.com/umap-project/umap/issues)
|
||||
if you are interested to translate it from French.
|
||||
4
docs-users/tutorials/8-polygons.md
Normal file
4
docs-users/tutorials/8-polygons.md
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
!!! example "This is an ongoing work."
|
||||
|
||||
[Let us know](https://github.com/umap-project/umap/issues)
|
||||
if you are interested to translate it from French.
|
||||
4
docs-users/tutorials/9-map-from-spreadsheet.md
Normal file
4
docs-users/tutorials/9-map-from-spreadsheet.md
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
!!! example "This is an ongoing work."
|
||||
|
||||
[Let us know](https://github.com/umap-project/umap/issues)
|
||||
if you are interested to translate it from French.
|
||||
Loading…
Reference in a new issue