diff --git a/docs-users/assets/logo.svg b/docs-users/assets/logo.svg new file mode 100644 index 00000000..fa32dc37 --- /dev/null +++ b/docs-users/assets/logo.svg @@ -0,0 +1,4 @@ + + + + diff --git a/docs-users/fr/index.md b/docs-users/fr/index.md new file mode 100644 index 00000000..1af27e20 --- /dev/null +++ b/docs-users/fr/index.md @@ -0,0 +1,23 @@ +# Documentation utilisateur·ice uMap + +uMap vous offre la possibilité de concevoir rapidement des cartes personnalisées avec des fonds OpenStreetMap (OSM) et de les intégrer facilement à votre site. + +- 📺 Regarder les [vidéos](videos.md). +- 🤓 Consulter les tutoriels selon votre niveau. +- 🤔 Explorer les [les questions/réponses de la FAQ](support/faq.md). +- 🤕 Parcourir [la liste des erreurs possibles](support/errors.md). + +--- + +!!! info "Si vous êtes un·e développeur·euse" + + Vous allez probablement davantage trouver votre [bonheur par ici](https://docs.umap-project.org). + + +??? bug "Si vous rencontrez un problème non documenté" + + Vous pouvez : + + - consulter le [forum dédié sur OSM France](https://forum.openstreetmap.fr/c/utiliser/umap/29) ; + - vérifier si le souci n’a pas déjà été remonté dans les [issues en cours](https://github.com/umap-project/umap/issues?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc) ; + - déclarer [une nouvelle issue](https://github.com/umap-project/umap/issues/new/choose) (en anglais). diff --git a/docs-users/fr/support/errors.md b/docs-users/fr/support/errors.md new file mode 100644 index 00000000..554147ed --- /dev/null +++ b/docs-users/fr/support/errors.md @@ -0,0 +1,5 @@ +# Erreurs uMap et leurs significations + +## Impossible de déterminer les colonnes de latitude et longitude. {: #error-latlon-columns } + +Cela se produit lorsque vous utilisez un fichier CSV sans des noms de colonnes commençant explicitement par `lat` et `lon`. diff --git a/docs-users/fr/support/faq.md b/docs-users/fr/support/faq.md new file mode 100644 index 00000000..0705713f --- /dev/null +++ b/docs-users/fr/support/faq.md @@ -0,0 +1,12 @@ +# Questions Fréquemment Posées (FAQ) + +## Quelle syntaxe est acceptée dans les champs de description ? + +* `*simple astérisque pour italique*` → *simple astérisque pour italique* +* `**double astérisque pour gras**` → **double astérisque pour gras** +* `# un dièse pour titre 1` ⤵

un dièse pour titre 1

+* `## deux dièses pour titre 2` ⤵

deux dièses pour titre 2

+* `### trois dièses pour titre 3` ⤵

trois dièses pour titre 3

+* `Lien simple : [[http://example.com]]` → Lien simple : [http://example.com](http://example.com) +* `Lien avec texte : [[http://exemple.fr|texte du lien]]` → Lien avec texte : [texte du lien](http://example.com) +* `--- pour un séparateur horizontal` ⤵
diff --git a/docs-users/fr/tutorials/1-browsing-a-map.md b/docs-users/fr/tutorials/1-browsing-a-map.md new file mode 100644 index 00000000..ad532407 --- /dev/null +++ b/docs-users/fr/tutorials/1-browsing-a-map.md @@ -0,0 +1,228 @@ +!!! abstract "Ce que nous allons apprendre" + + - Manipuler une carte uMap + - Partager une carte uMap + - Connaître les principales fonctionnalités de uMap + + +## Procédons par étapes + +### 1. Manipuler la carte + +Vous avez reçu par mail un lien vers une carte uMap. Voici les +principaux éléments de la carte, et les opérations disponibles pour la +manipuler. La carte uMap représentée ci-dessous est disponible +[ici](http://umap.openstreetmap.fr/fr/map/festival-des-3-continents_26381). + +![Description des différents éléments d’une carte](../../static/tutoriels/1-je-consulte-une-carte-umap/anatomie_carte_umap_2021.jpg) + + +À droite de la carte et selon le choix de son auteur peut être affiché +un des deux panneaux suivants : + +- **À propos** : le titre de la carte, une description éventuelle, et + la liste des calques +- **Visualiser les données** : l’ensemble des éléments de la carte, + répartis par calques (voir plus bas) + +Le panneau À propos peut être affiché en cliquant sur le mot "À propos", +toujours visible en bas à droite de la carte. + +Comme pour la plupart des cartes interactives vous pouvez : + +- déplacer la carte par un glisser-déposer +- effectuer zooms avant et arrière avec les boutons + et -, ou avec la + molette de la souris +- sélectionner un élément de la carte par un clic de la souris : + apparaît alors une fenêtre *popup* affichant une description de + l’élément. Celle-ci peut inclure du texte, une image, un lien vers + un site Web. Dans notre exemple la description de chaque cinéma + contient une image qui est un lien sur le site Web du cinéma. + +**Remarque** : les boutons en haut à gauche de la carte, ainsi que la +barre de légende, peuvent ne pas être disponibles si l’auteur de la +carte a choisi de les cacher. + +Voyons maintenant quelques fonctionnalités propres à uMap. + +### 2. Le sélecteur de calques + +Les éléments d’une carte umap peuvent être répartis dans plusieurs +calques, ou couches. Cela permet de structurer une carte, pour qu’elle +soit plus claire et plus facile à maintenir. L’utilisateur peut choisir +d’afficher ou cacher chaque calque individuellement. + +Icône du sélecteur de calque(s). + +Le sélecteur de calques est +l’icône visible en haut à gauche de la carte sous les boutons de zoom. +Lorsque vous positionnez la souris sur ce bouton, la liste des calques +apparaît, vous pouvez alors afficher ou cacher chaque calque, ou encore +centrer la carte sur le contenu d’un calque. + +![Une description des différentes parties d’un sélecteur de calques](../../static/tutoriels/1-je-consulte-une-carte-umap/umap_sélecteur_calques.png) + +Dans cet exemple le calque « Stations Bicloo » est caché : +cliquer sur l’oeil de ce calque permet de l’afficher. +La liste des calques, avec éventuellement un descriptif de chaque +calque, est aussi visible dans la légende de la carte. + +### 3. Le bouton Plus + +Icône pour afficher plus d’options. + +Sous le sélecteur de carte est visible un bouton portant le texte « Plus ». +Un clic sur ce bouton fait apparaître une autre série de boutons. + +Permet de chercher une localité et de centrer la carte dessus : + saisissez le nom d’une commune et tapez sur `Entrée` + +Place le navigateur en mode plein écran, que l’on peut quitter avec le même + bouton ou avec la touche `Échap` du clavier. + +Permet de partager la carte ou d’en exporter les données. + Un panneau à droite de la carte est affiché, il est expliqué ci-dessous. + + + Permet de vous géolocaliser, c’est-à-dire centrer la carte sur votre position + actuelle. La géolocalisation exige de demander l’autorisation de l’utilisateur, + votre navigateur Web peut donc vous demander d’accepter ou activer la géolocalisation. + + + + Est un outil de mesure. + Activer cet outil a deux effets : d’une part il affiche la longueur + des éléments linéaires de la carte et l’aire des éléments + surfaciques ; d’autre part il vous permet de tracer sur la carte une + ligne dont la longueur est affichée. Cliquez à nouveau sur le bouton + pour désactiver cet outil. + + + + Est utile pour améliorer la carte OpenStreetMap - ce qui sort de l’objet de ce tutoriel. + + + + Affiche plusieurs fonds de carte au survol : + cliquer sur l’un d’eux change le fond de la carte. + + +#### Partager la carte + +Le panneau de partage de la carte offre trois possibilités. Votre choix +dépend de la manière dont vous souhaitez partager la carte : + +- **URL courte** permet de copier une URL abrégée - équivalente à + l’URL de la carte - que vous pouvez par exemple envoyer dans un + mail. +- **Embarquer la carte en iframe** permet d’inclure la carte dans une + 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](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. + + +### 4. Visualiser les données + +![umap_donnees.jpg](../../static/tutoriels/1-je-consulte-une-carte-umap/umap_donnees.jpg) + +La liste des éléments de la carte peut être affichée avec un clic sur +**Visualiser les données**, accessible depuis le sélecteur de calques, +la barre de légende, ou encore en haut du panneau Légende. + +Le panneau alors visible à droite montre l’ensemble des éléments de la +carte, organisés par calques. La loupe à gauche de chaque élément permet +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 + +Ce premier tutoriel nous a permis de découvrir les principales +fonctionnalités d’une carte uMap. Nous allons maintenant +[apprendre à créer une telle carte](2-first-map.md). + + +??? info "Licence" + + Travail initié par Antoine Riche sur [Carto’Cité](https://wiki.cartocite.fr/doku.php?id=umap:1_-_je_consulte_une_carte_umap) sous licence [CC-BY-SA 4](https://creativecommons.org/licenses/by-sa/4.0/deed.fr). diff --git a/docs-users/fr/tutorials/10-embed-remote-data.md b/docs-users/fr/tutorials/10-embed-remote-data.md new file mode 100644 index 00000000..be665ef8 --- /dev/null +++ b/docs-users/fr/tutorials/10-embed-remote-data.md @@ -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 : +. + +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 + +![umap-donnees-distantes.png](../../static/tutoriels/10-jintegre-des-donnees-distantes/umap-donnees-distantes.png) + +#### 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*. + +![umap-geojson-properties.png](../../static/tutoriels/10-jintegre-des-donnees-distantes/umap-geojson-properties.png) + +#### 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. + +![umap-heatmap.png](../../static/tutoriels/10-jintegre-des-donnees-distantes/umap-heatmap.png) + +#### 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 » : +. + +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. + +![umap-api-properties.png](../../static/tutoriels/10-jintegre-des-donnees-distantes/umap-api-properties.png) + +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 + +![umap-api-parameters.png](../../static/tutoriels/10-jintegre-des-donnees-distantes/umap-api-parameters.png) + +#### 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**. +![umap-api-console.png](../../static/tutoriels/10-jintegre-des-donnees-distantes/umap-api-console.png) + +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` + +![umap-api-console-dataset.png](../../static/tutoriels/10-jintegre-des-donnees-distantes/umap-api-console-dataset.png) + +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) : + +![umap-api-console-bbox.png](../../static/tutoriels/10-jintegre-des-donnees-distantes/umap-api-console-bbox.png) + +**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. + +![umap-api-console-execute.png](../../static/tutoriels/10-jintegre-des-donnees-distantes/umap-api-console-execute.png) + +#### 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 : + + +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). diff --git a/docs-users/fr/tutorials/11-openstreetmap-overpass-and-umap.md b/docs-users/fr/tutorials/11-openstreetmap-overpass-and-umap.md new file mode 100644 index 00000000..c9d7bbb2 --- /dev/null +++ b/docs-users/fr/tutorials/11-openstreetmap-overpass-and-umap.md @@ -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. + +![overpass_turbo_assistant.jpg](../../static/tutoriels/11-je-valorise-les-donnees-openstreetmap-avec-overpass-et-umap/overpass_turbo_assistant.jpg) + +#### 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. + +![overpass_turbo_format_xml.jpg](../../static/tutoriels/11-je-valorise-les-donnees-openstreetmap-avec-overpass-et-umap/overpass_turbo_format_xml.jpg) + +#### 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. + +![overpass_turbo_exporter.jpg](../../static/tutoriels/11-je-valorise-les-donnees-openstreetmap-avec-overpass-et-umap/overpass_turbo_exporter.jpg) + +#### Utiliser la requête dans uMap + +![umap_requete_overpass_url.png](../../static/tutoriels/11-je-valorise-les-donnees-openstreetmap-avec-overpass-et-umap/umap_requete_overpass_url.png) + +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. + +![umap_overpass_infobulle.jpg](../../static/tutoriels/11-je-valorise-les-donnees-openstreetmap-avec-overpass-et-umap/umap_overpass_infobulle.jpg) + +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`. + +![overpass_turbo_export_geojson.png](../../static/tutoriels/11-je-valorise-les-donnees-openstreetmap-avec-overpass-et-umap/overpass_turbo_export_geojson.png) + +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é + +![umap_heatmap.png](../../static/tutoriels/11-je-valorise-les-donnees-openstreetmap-avec-overpass-et-umap/umap_heatmap.png) + +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 + +![umap_donnees_distantes_wordpress.png](../../static/tutoriels/11-je-valorise-les-donnees-openstreetmap-avec-overpass-et-umap/umap_donnees_distantes_wordpress.png) + +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** + +![umap_heatmap_et_infobulle.jpg](../../static/tutoriels/11-je-valorise-les-donnees-openstreetmap-avec-overpass-et-umap/umap_heatmap_et_infobulle.jpg) + +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 + +![requete_dynamique.png](../../static/tutoriels/11-je-valorise-les-donnees-openstreetmap-avec-overpass-et-umap/requete_dynamique.png) + +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. + +

Voir en plein écran

+ + +## 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). diff --git a/docs-users/fr/tutorials/2-first-map.md b/docs-users/fr/tutorials/2-first-map.md new file mode 100644 index 00000000..21570f99 --- /dev/null +++ b/docs-users/fr/tutorials/2-first-map.md @@ -0,0 +1,213 @@ +!!! abstract "Ce que nous allons apprendre" + + - distinguer le mode édition du mode consultation + - identifier les étapes nécessaires pour créer une carte + - produire une première carte et la diffuser ! + +## Procédons par étapes + +L’objet de notre première carte est simple : positionner un ou plusieurs +lieux (domicile, vacances, travail, etc.). Procédons par étapes. + +### 1. Le mode édition + +Rendez-vous sur le site et cliquez sur +le bouton **Créer une carte** suivant : + +Bouton de création d’une carte depuis l’accueil. + + +Apparaît alors sur votre navigateur une carte qui se présente ainsi : + +![umap_edition.jpg](../../static/tutoriels/2-je-cree-ma-premiere-carte-umap/umap_edition.jpg) + +Nous retrouvons à gauche les boutons disponibles lors de la +[consultation d’une carte](1-browsing-a-map.md). + +Plusieurs éléments visibles au-dessus et à droite de la carte sont +visibles uniquement lorsque l’on crée ou modifie une carte, c’est-à-dire +dans le *mode édition* : + +- le **nom de la carte** en haut à gauche +- les boutons **Annuler les modifications** et **Enregistrer** en haut à droite +- à droite une série de 3 boutons permettant d’ajouter des éléments à + la carte : marqueurs, lignes et polygones +- en-dessous une série de 7 boutons permettant de configurer la carte + +### 2. Nommer la carte + +Une carte doit porter un nom qui renseigne sur ce que représente la carte. +Pour définir le nom de la carte, cliquez sur le bouton +**Modifier le nom ou la légende** ou plus simplement sur `Carte sans nom` dans +le bandeau d’entête : + +Bouton d’édition du nom de la carte. + +Un panneau apparaît sur la droite de la carte, il contient en haut un +champ de saisie pour le **nom** de la carte, qui contient le texte +`Carte sans nom` : placez le curseur dans ce champ, supprimez le texte +existant et saisissez le nom de votre carte, par exemple `Mon domicile`. + +Panneau d’édition du nom de la carte. + +Notez que le nom en haut à gauche de la carte est immédiatement modifié. +Vous pouvez également saisir un texte plus long dans le champ +**description**, qui apparaîtra dans le panneau de légende - nous y +reviendrons. + +Maintenant, sauvegardez la carte avec le bouton **Enregistrer** : un +texte est affiché en haut de la carte, comme celui ci-dessous : + +Message d’alerte contenant le lien d’édition. + +Ce texte explique que vous venez de créer une carte **anonyme** et vous +donne un lien (une URL) pour pouvoir modifier la carte. En effet la +carte que vous avez créée n’est associée à aucun compte, et **uMap** +considère que seules les personnes ayant ce *lien secret* peuvent la +modifier. Vous devez donc conserver ce lien si vous souhaitez pouvoir +modifier la carte. Nous verrons dans [le prochain tutoriel](3-create-account.md) +comment créer son catalogue de cartes en utilisant un compte, il n’est alors pas +nécessaire de conserver de lien secret. + +### 3. Ajouter un marqueur + +Commencez par déplacer et zoomer la carte pour visualiser l’endroit +précis de votre domicile, lieu de vacances ou de travail. + +Cliquez ensuite sur le bouton **Ajouter un marqueur**. + +Bouton d’ajout de marqueur. + +Le curseur prend la forme d’un signe +`+` : déplacez le sur le lieu que vous voulez *marquer* et cliquez avec +le bouton gauche de la souris : un *marqueur bleu* et carré est créé à +cet endroit et un panneau apparaît à droite. + +![umap_marqueur.jpg](../../static/tutoriels/2-je-cree-ma-premiere-carte-umap/umap_marqueur.jpg) + +Ce panneau vous permet +d’associer un nom et une description au marqueur : + +- le nom sera affiché au survol du marqueur par la souris +- le nom et la description seront visibles dans une fenêtre dite + *popup* qui apparaîtra lors d’un clic sur le marqueur. + +Nous verrons plus loin l’utilité des calques, et comment modifier les +propriétés du marqueur : forme, couleur, pictogramme, etc. + +Répétez l’opération pour ajouter les marqueurs que vous jugez utiles à +votre carte. + +### 4. Définir l’emprise de la carte + +Il est important de définir l’emprise initiale de la carte, c’est-à-dire +la partie du planisphère qui sera affichée lors de la consultation de la +carte. + +Cette emprise doit inclure votre marqueur et permettre de situer la +carte. Il convient de trouver un compromis entre un zoom trop éloigné et +un zoom trop rapproché. Le bon compromis dépend essentiellement du +contenu de la carte : la majorité des marqueurs, lignes et polygones +doivent être visibles et utiliser au mieux l’étendue de la carte. + +Vous pouvez aussi considérer le public de la carte : une carte expédiée +à votre voisin peut être très zoomée, une carte envoyée un correspondant +étranger doit permettre de reconnaître le pays où se trouve votre carte. + + +Pour définir +l’emprise, déplacez et zoomez la carte afin d’afficher l’emprise +souhaitée puis cliquez sur le bouton **Enregistrer le zoom et le centre +actuels**. + +Bouton d’enregistrement du zoom et du centre actuels. + +!!! note + uMap enregistre en réalité le centre et le niveau de + zoom. Selon la taille de la fenêtre où est affichée la carte, la partie + visible pourra varier. Il est utile de prévoir une marge autour du + contenu de la carte. + +### 5. Enregistrer la carte + +Toute modification de la carte doit être sauvegardée sur le serveur uMap +en cliquant sur le bouton **Enregistrer** en haut à droite. Cette +opération enregistre toutes les modifications depuis la dernière +sauvegarde : vous pouvez donc réaliser plusieurs modifications à la +suite puis les enregistrer. A l’inverse le bouton **Annuler** permet de +supprimer toutes les modifications depuis la dernière sauvegarde. + +Après avoir enregistré les modifications, le bouton Annuler est remplacé +par **Désactiver l’édition**. Cela vous permet de quitter le mode +édition pour voir la carte en mode consultation. Vous pouvez alors +*tester* votre carte : cliquez sur le marqueur pour afficher la popup et +vérifier son nom et sa description. + +**Félicitations !** Vous avez créé votre première carte uMap. Vous +pouvez la diffuser à votre entourage en copiant son URL dans la barre +d’adresse du navigateur, ou en copiant son **URL courte** disponible +dans le menu **Partager** vu dans le tutoriel +[Naviguer dans une carte](1-browsing-a-map.md). + +## Faisons le point + +Votre première carte est créée, en quelques étapes. L’opération est +assez simple, mais le résultat est somme toute assez sommaire. Le +[prochain tutoriel](3-create-account.md) va nous +permettre de créer une jolie carte. + + +??? info "Licence" + + Travail initié par Antoine Riche sur [Carto’Cité](https://wiki.cartocite.fr/doku.php?id=umap:2_-_je_cree_ma_premiere_carte_umap) sous licence [CC-BY-SA 4](https://creativecommons.org/licenses/by-sa/4.0/deed.fr). + diff --git a/docs-users/fr/tutorials/3-create-account.md b/docs-users/fr/tutorials/3-create-account.md new file mode 100644 index 00000000..f3154d91 --- /dev/null +++ b/docs-users/fr/tutorials/3-create-account.md @@ -0,0 +1,209 @@ +!!! abstract "Ce que nous allons apprendre" + + - Utiliser un compte pour retrouver ses cartes + - Changer la forme, la couleur et le pictogramme d’un marqueur + - Créer et modifier une ligne + - Contrôler l’affichage des étiquettes + +## Procédons par étapes + +Nous avons appris dans +[le tutoriel précédent](2-first-map.md) comment créer une +carte anonyme contenant un marqueur. Nous allons à présent créer une +carte plus complète : la carte de nos vacances au [Camping de la plage +Goulien](http://www.openstreetmap.org/way/119055693) sur la Presqu’île +de Crozon en Bretagne. + +Au lieu de créer une carte anonyme, nous allons utiliser un compte pour +créer cette carte. + +### 1. Utiliser un compte + +**uMap** permet d’associer ses cartes à un compte. Cela présente deux +avantages importants par rapport à la création de cartes anonymes : + +- les cartes créées avec un compte constituent un catalogue permettant + d’accéder facilement à ses cartes +- on peut modifier chaque carte du catalogue sans avoir besoin de + conserver un lien d’édition + +Le logiciel umap ne gère pas directement de comptes utilisateurs : la +gestion des comptes dépend de la configuration du logiciel. Sur +, vous pouvez utiliser un compte que vous +avez ouvert sur un site Web au choix : OpenStreetMap, Github, +ou Bitbucket. Si vous n’avez aucun compte sur ces outils, c’est le +moment de vous inscrire sur le site www.openstreetmap.org : cliquez +**Créer un compte** dans le coin supérieur droit et suivez les +instructions - une adresse mail vous sera demandée ([plus +d’infos](http://openstreetmap.fr/inscription-openstreetmap)). + +![umap_header.png](../../static/tutoriels/3-jutilise-un-compte-et-cree-une-belle-carte/umap_header.png) + +Cliquez sur **Connexion / +Créer un compte** puis sur le pictogramme correspondant au compte que +vous souhaitez utiliser. Apparaît alors la page de connexion du site : +saisissez le nom d’utilisateur et le mot de passe. La page suivante vous +demande d’autoriser l’application uMap à utiliser ce compte : accordez +cet accès. Vous retrouvez alors la page d’accueil de uMap, sur laquelle +le lien de connexion a laissé la place à un lien **Mes cartes** vous +permettant d’accéder à l’ensemble des cartes créées avec ce compte. + +![umap_connect.png](../../static/tutoriels/3-jutilise-un-compte-et-cree-une-belle-carte/umap_connect.png) + +Notez l’URL de la barre d’adresse quand vous consultez votre catalogue +de cartes : celle-ci contient le nom de votre compte - par exemple +. Vous pouvez +l’utiliser pour accéder à votre catalogue de cartes, même sans être +connecté à votre compte : vous pouvez diffuser cette URL, les +récipiendaires ne pourront pas modifier vos cartes. + +Toutes les cartes que vous créez en étant connecté à votre compte sont +ajoutées à votre catalogue. + +### 2. Créer un joli marqueur + +Commençons par créer une carte : donnons-lui un nom, définissons une +emprise et ajoutons un marqueur à [l’emplacement du +camping](http://www.openstreetmap.org/?mlat=48.2387&mlon=-4.5434#map=16/48.2387/-4.5434). +Nous avons vu dans [le tutoriel précédent](2-first-map.md) comment effectuer ces opérations. + +![umap_marqueur_props.png](../../static/tutoriels/3-jutilise-un-compte-et-cree-une-belle-carte/umap_marqueur_props.png) + +Ce gros marqueur bleu n’est pas très explicite pour figurer un camping. +Remédions à cela. Dans le panneau latéral visible lorsqu’un marqueur est +sélectionné, le menu **Propriétés de la forme** permet de modifier +l’apparence du marqueur : + +- **Couleur** : cliquer sur `définir` permet de choisir une couleur. + Notez que vous pouvez définir une couleur par [son nom + CSS](http://www.w3schools.com/cssref/css_colors.asp) ou par son code + héxadécimal, que vous pouvez choisir par exemple avec ce [sélecteur + de couleurs](http://htmlcolorcodes.com/fr/selecteur-de-couleur/). +- **Forme de l’icône** : le choix `Par défaut` correspond au marqueur + actuel, les autres choix sont Cercle, Goutte et Épingle. +- **Image de l’icône** : cliquer sur `définir` pour choisir parmi une + centaine de pictogrammes. Notez que le picto n’est affiché que pour + les formes d’icônes `Par défaut` et `Goutte`. + +Voici le marqueur obtenu avec les propriétés ci-contre : + +![umap_camping.png](../../static/tutoriels/3-jutilise-un-compte-et-cree-une-belle-carte/umap_camping.png) + +#### Modifier un marqueur + +![umap_modifier_marqueur.png](../../static/tutoriels/3-jutilise-un-compte-et-cree-une-belle-carte/umap_modifier_marqueur.png) + +Pour modifier un marqueur de la carte, plusieurs possibilités s’offrent à vous : + +- un clic sur le marqueur vous permet soit d’afficher le panneau + d’édition (stylo), soit de supprimer le marqueur (corbeille) +- **shift-clic** est un raccourci qui affiche directement le panneau + d’édition +- un glisser-déposer vous permet de déplacer le marqueur sur la carte + +### 3. Créer une ligne + +Le premier jour de vacances nous allons en kayak de mer jusqu’à la +Pointe de Dinan à l’ouest de la plage de Goulien. Traçons l’itinéraire +suivi. + +Bouton de dessin d’une ligne. + +Le bouton **Dessiner une ligne** permet de tracer, point par point, +une ligne constiutée de plusieurs segments. +Cliquez à nouveau sur le dernier point tracé pour +terminer la ligne : apparaît alors à droite un panneau permettant de +donner un nom et une description à la ligne, comme pour les marqueurs. + +#### Modifier une ligne + +A tout moment vous pouvez sélectionner une ligne en double-cliquant +dessus. Vous pouvez alors éditer ses propriétés dans le panneau latéral, +ou modifier son tracé sur la carte : + +- **supprimer un point** de la ligne, matérialisé par un carré blanc, + en cliquant dessus +- **déplacer un point** par un glisser-déposer +- **insérer un point** en cliquant sur un carré gris se trouvant au + milieu de chaque segment +- **allonger la ligne** avec un Ctrl-Clic lorsque le curseur est placé + sur le premier ou dernier point +- **couper la ligne** en deux : Clic droit sur un point puis choisir + l’option `Scinder la ligne` + +![umap_ligne.jpg](../../static/tutoriels/3-jutilise-un-compte-et-cree-une-belle-carte/umap_ligne.jpg) + +#### Propriétés d’une ligne + +![umap_ligne_props.png](../../static/tutoriels/3-jutilise-un-compte-et-cree-une-belle-carte/umap_ligne_props.png) + +Les propriétés d’une +ligne permettent de définir sa couleur et d’autres paramètres +définissant son *style* : + +- l’**opacité** va de transparent à gauche à totalement opaque à + droite. Plus le trait est épais plus il peut être transparent. +- l’**épaisseur** est définie en pixels, sa valeur par défaut est 3 : + glisser le curseur vers la droite pour un trait plus épais (qui sera + plus facile à sélectionner). + +Les **propriétés avancées** permettent de : + +- **simplifier** le tracé permet de réduire le nombre de points pour + l’adapter au niveau de zoom. Il est en général inutile de simplifier + un tracé réalisé *à la main*. +- définir un **traitillé**, par une série de chiffres séparés par des + virgules : longueur (en pixels) visible, longueur invisible, + longueur visible, etc. L’épaisseur du trait doit être prise en + compte : plus les traits sont épais plus les intervalles doivent + être grands. + +Voici le style de trait obtenu avec les propriétés ci-contre : + +![umap_ligne_tirets.png](../../static/tutoriels/3-jutilise-un-compte-et-cree-une-belle-carte/umap_ligne_tirets.png) + +### 4. Ajouter des étiquettes + +![etiquettes.png](../../static/tutoriels/3-jutilise-un-compte-et-cree-une-belle-carte/etiquettes.png) + +Pour aider l’identification des +différents éléments de notre carte, nous pouvons leur associer une +étiquette. L’onglet **Options d’interaction** permet de contrôler +l’affichage d’une étiquette associée à chaque élément : + +- **Afficher une étiquette** active son affichage, elle est alors + placée automatiquement +- **Direction de l’étiquette** vous permet de fixer la position, à + droite ou à gauche de l’élément, ou encore au-dessus ou en-dessous +- **Afficher seulement au survol** de la souris est une option + intéressante si la carte est dense : afficher toutes les étiquettes + surchagerait la carte +- **Étiquette cliquable** permet d’afficher l’infobulle correspondante + si l’utilisateur clique sur l’étiquette, et non seulement en cas de + clic sur la *géométrie* de l’élément. + + +## Faisons le point + +Notre deuxième carte est déjà plus intéressante que la première, et nous +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](8-polygons.md). + +Pour le moment voyons comment nous pouvons davantage +[personnaliser notre carte](4-customize-map.md). + +??? info "Licence" + + Travail initié par Antoine Riche sur [Carto’Cité](https://wiki.cartocite.fr/doku.php?id=umap:3_-_j_utilise_un_compte_et_cree_une_belle_carte) sous licence [CC-BY-SA 4](https://creativecommons.org/licenses/by-sa/4.0/deed.fr). + diff --git a/docs-users/fr/tutorials/4-customize-map.md b/docs-users/fr/tutorials/4-customize-map.md new file mode 100644 index 00000000..21124401 --- /dev/null +++ b/docs-users/fr/tutorials/4-customize-map.md @@ -0,0 +1,186 @@ +!!! abstract "Ce que nous allons apprendre" + + - Gérer son catalogue de cartes + - Choisir un fond de carte + - Sélectionner les options d’interface + +## Procédons par étapes + +### 1. Retrouver une carte + +Vous souhaitez modifier une carte pour l’améliorer ou la mettre à jour. +Si vous avez redémarré votre navigateur et à fortiori votre ordinateur, +la première chose à faire est de retrouver la carte ! Si vous avez créé +cette carte avec votre compte, comme nous l’avons vu dans le tutoriel +[Créer un compte](3-create-account.md), afficher +une de vos cartes se fait en trois opérations simples : + +1. connectez-vous à votre compte umap +2. affichez votre catalogue de cartes +3. cliquez sur le nom de la carte + +
+ Bouton d’édition de la carte. +
Bouton d’édition de la carte.
+
+ +La carte s’affiche alors en mode consultation. +Cliquez sur le bouton avec le crayon en haut à droite de la carte pour +passer en mode édition : vous pouvez dès lors modifier la carte. +N’oubliez pas de sauvegarder la carte une fois les modifications +terminées. + +!!! note + + Il peut être fastidieux de passer du mode édition au + mode consultation et vice-versa de façon répétée. Une astuce consiste à + utiliser pour la même carte deux onglets ou deux navigateurs, l’un en + mode édition l’autre en mode consultation. Vous devez tout de même + **enregistrer** la carte dans l’onglet en mode édition avant de + l’**actualiser** (par exemple avec la touche F5) dans l’onglet en mode + consultation. + +Vous pouvez retourner à votre catalogue de cartes à tout moment en +cliquant sur **Accueil** tout en bas à droite de la carte. + +### 2. Changer le fond de carte + +Nous avons vu dans le tutoriel [Naviguer dans une carte](1-browsing-a-map.md) +que plusieurs fonds de carte sont disponibles dans uMap. +Lorsque vous éditez une carte vous pouvez +choisir le fond de carte qui sera utilisé à l’affichage de la carte. + +Bouton de choix de fond de carte. + +Cliquez sur le pictogramme `Changer le fond de carte` : un panneau à droite montre +une vingtaine de fonds de cartes. Il vous suffit de cliquer sur l’un +d’eux : faites votre choix et n’oubliez pas d’enregistrer la +modification. + +Le choix du fond de carte est une affaire de goût. Le contexte de la +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…) +- **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 + humanitaire](http://wiki.openstreetmap.org/wiki/FR:Humanitarian_OSM_Team) + d’OpenStreetMap, permet d’aller jusqu’à un niveau de zoom élevé + (niveau 20) : intéressant si l’étendue de votre carte couvre un + quartier ou votre jardin + +!!! note + + Tous les fonds de carte utilisés par umap, à + l’exception des images aériennes de l’IGN, sont réalisées à partir des + données OpenStreetMap. Ils sont produits par des associations, des + entreprises ou des bénévoles qui les mettent gracieusement à + disposition. + + Remarquez le texte affiché en bas à droite de la carte : il crédite les + auteurs du fond de carte, par exemple + `Map tiles by Stamen Design - Map Data © OpenStreetMap contributors`. + + +### 3. Choisir les options d’interface + +Vous pouvez configurer les éléments de la carte mis à disposition des +utilisateurs qui consulteront votre carte. Vous pouvez par exemple +ajouter une mini-carte de situation ou une barre de légende, ou encore +décider quels boutons seront affichés. + +Bouton des options de la carte. + +Pour cela, ouvrez dans +le menu **Propriétés avancées de la carte** l’onglet **Options d’interfaces**. +Vous pouvez activer ou désactiver une dizaine d’options dont voici la +signification. + +Apparaît alors un long tableau de bord qui vous permet, pour chacun des +boutons sur la gauche de la carte, de contrôler leur visibilité : + +- **toujours** indique que le bouton est toujours visible pour + l’utilisateur +- **jamais** signifie que le bouton ne sera pas disponible +- **caché** signifie que le bouton n’est accessible qu’après un clic + sur le bouton « Plus ». + Les boutons cachés ne seront bien sûr accessibles que si l’option + `Voulez-vous afficher le bouton « Plus » ?` + (plus bas sur le tableau de bord) est activée. + +Exemple de bouton « Plus ». + +La partie basse du tableau de bord ne concerne pas ces boutons mais +d’autres éléments venant *habiller* la carte : + +![umap_properties_bottom.jpg](../../static/tutoriels/4-je-modifie-et-personnalise-ma-carte/umap_properties_bottom.jpg) + +Quelques remarques : + +- si vous cachez les boutons de zoom **et** désactivez le zoom avec la + molette de la souris, les utilisateurs ne pourront ni zoomer ni + dézoomer … sauf à découvrir le menu accessible avec un clic droit + sur la carte. +- les boutons de navigation en bas des popups permettent de faire + défiler les éléments de la carte + + +### 4. Copier ou supprimer une carte + +Tout en bas des **Propriétés de la cartes**, l’onglet **Options +avancées** propose deux opérations peu utilisées mais qu’il est bon de +connaître : + +- **Supprimer** supprime la carte du serveur umap, ainsi que les + données qui y sont associées ! +- **Cloner cette carte** effectue une copie de la carte et de ses + données. La nouvelle carte est ajoutée à votre catalogue. + +Dans les deux cas un message vous demande de confirmer l’opération. + +## Faisons le point + +Ce tutoriel nous mène à la fin du niveau débutant. Vous savez créer, +modifier et personnaliser une carte. Vous savez styliser vos marqueurs, +lignes et polygones. Enfin vous savez gérer votre catalogue de cartes. + +Une fois ces opérations maîtrisées, les tutoriels de niveau +intermédiaire vous apprendront à structurer vos cartes avec des calques +et enrichir le contenu de vos popups. Vous découvrirez également comment +publier une carte sur un site Web, et définir qui peut la voir et la +modifier. + +??? info "Licence" + + Travail initié par Antoine Riche sur [Carto’Cité](https://wiki.cartocite.fr/doku.php?id=umap:4_-_je_modifie_et_personnalise_ma_carte) sous licence [CC-BY-SA 4](https://creativecommons.org/licenses/by-sa/4.0/deed.fr). + diff --git a/docs-users/fr/tutorials/5-multimedia-tooltips.md b/docs-users/fr/tutorials/5-multimedia-tooltips.md new file mode 100644 index 00000000..5e5143ee --- /dev/null +++ b/docs-users/fr/tutorials/5-multimedia-tooltips.md @@ -0,0 +1,203 @@ +!!! 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 + +![aide-miseenforme.png](../../static/tutoriels/5-je-cree-des-infobulles-multimedia/aide-miseenforme.png) + +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 + +![miseenforme-resultat.png](../../static/tutoriels/5-je-cree-des-infobulles-multimedia/miseenforme-resultat.png) + +Un exemple +vaut mieux que de longues explications : la description ci-dessous +produit l’infobulle à droite. + +![miseenforme-syntaxe.png](../../static/tutoriels/5-je-cree-des-infobulles-multimedia/miseenforme-syntaxe.png) + +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 : . + + +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]] + +![miseenforme-liensimple.png](../../static/tutoriels/5-je-cree-des-infobulles-multimedia/miseenforme-liensimple.png) + +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]] + +![miseenforme-lienavectexte.png](../../static/tutoriels/5-je-cree-des-infobulles-multimedia/miseenforme-lienavectexte.png) + +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. + +![miseenforme-photo.png](../../static/tutoriels/5-je-cree-des-infobulles-multimedia/miseenforme-photo.png) + +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}}` + +![lienframapic.png](../../static/tutoriels/5-je-cree-des-infobulles-multimedia/lienframapic.png) + +#### 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)**. + +![styledepopup.png](../../static/tutoriels/5-je-cree-des-infobulles-multimedia/styledepopup.png) + +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* + ![partageyoutube.png](../../static/tutoriels/5-je-cree-des-infobulles-multimedia/partageyoutube.png) +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 : + +![miseenforme-video.png](../../static/tutoriels/5-je-cree-des-infobulles-multimedia/miseenforme-video.png) + +## 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). diff --git a/docs-users/fr/tutorials/6-handling-datalayers.md b/docs-users/fr/tutorials/6-handling-datalayers.md new file mode 100644 index 00000000..db033ae2 --- /dev/null +++ b/docs-users/fr/tutorials/6-handling-datalayers.md @@ -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 + +![umap_calques_gauche_droite.jpg](../../static/tutoriels/6-je-structure-ma-carte-avec-des-calques/umap_calques_gauche_droite.jpg) + +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. + +![umap_edit_layers.png](../../static/tutoriels/6-je-structure-ma-carte-avec-des-calques/umap_edit_layers.png) + +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). + +![](../../static/tutoriels/6-je-structure-ma-carte-avec-des-calques/umap_layer_props_top.png) + +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. + +![umap_layer_description.png](../../static/tutoriels/6-je-structure-ma-carte-avec-des-calques/umap_layer_description.png) + +!!! 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. + +![umap_layer_select.png](../../static/tutoriels/6-je-structure-ma-carte-avec-des-calques/umap_layer_select.png) + +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. + +![](../../static/tutoriels/6-je-structure-ma-carte-avec-des-calques/umap_layer_edit.png) + +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). + +![umap_legende.png](../../static/tutoriels/6-je-structure-ma-carte-avec-des-calques/umap_legende.png) + +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. + +![](../../static/tutoriels/6-je-structure-ma-carte-avec-des-calques/umap_gestion_calques.png) + +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. + +![](../../static/tutoriels/6-je-structure-ma-carte-avec-des-calques/umap_layer_advanced.png) + +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). diff --git a/docs-users/fr/tutorials/7-publishing-and-permissions.md b/docs-users/fr/tutorials/7-publishing-and-permissions.md new file mode 100644 index 00000000..3d7d61bd --- /dev/null +++ b/docs-users/fr/tutorials/7-publishing-and-permissions.md @@ -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. + +![umap_share.png](../../static/tutoriels/7-je-publie-ma-carte-et-en-controle-lacces/umap_share.png) + +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). + +![export-iframe.png](../../static/tutoriels/7-je-publie-ma-carte-et-en-controle-lacces/export-iframe.png) + +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 Ctrl+a pour tout sélectionner + puis Ctrl+c 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: Ctrl+v) + +Voici un exemple minimaliste de fichier HTML dans lequel l’iframe d’une +carte uMap à été intégrée : + + + + + Exemple de carte uMap intégrée à une page Web + + + +
+

La carte du festival

+ +

Voir en plein écran

+

Cette carte vous est proposée par Carto’Cité :-)

+
+ + + +Voici la carte intégrée sur cette page, en utilisant les options +d’export par défaut : + +
+

La carte du festival

+ +

Voir en plein écran

+

Cette carte vous est proposée par Carto’Cité :-)

+
+ +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. + +![import-iframe-wordpress.png](../../static/tutoriels/7-je-publie-ma-carte-et-en-controle-lacces/import-iframe-wordpress.png) + +Publiez la page et le tour est joué ! + +!!! note + Pour des raisons de sécurité, les sites mutualisés + comme 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. + +![options-export-iframe.png](../../static/tutoriels/7-je-publie-ma-carte-et-en-controle-lacces/options-export-iframe.png) + +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. + + + + +### 4. Définir qui peut voir ou modifier la carte + +![umap_edit_rights.png](../../static/tutoriels/7-je-publie-ma-carte-et-en-controle-lacces/umap_edit_rights.png) + +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. + +![permissions.png](../../static/tutoriels/7-je-publie-ma-carte-et-en-controle-lacces/permissions.png) + +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//` : 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). + diff --git a/docs-users/fr/tutorials/8-polygons.md b/docs-users/fr/tutorials/8-polygons.md new file mode 100644 index 00000000..15d11e63 --- /dev/null +++ b/docs-users/fr/tutorials/8-polygons.md @@ -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. + +![umap_edit_polygon.png](../../static/tutoriels/8-le-cas-des-polygones/umap_edit_polygon.png) + +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 + +![proprietes_polygones.png](../../static/tutoriels/8-le-cas-des-polygones/proprietes_polygones.png) + +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. + +![polygone_trou.jpg](../../static/tutoriels/8-le-cas-des-polygones/polygone_trou.jpg) + +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. + +![interaction-desactivee.png](../../static/tutoriels/8-le-cas-des-polygones/interaction-desactivee.png) + +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. + +![ile-de-nantes.jpg](../../static/tutoriels/8-le-cas-des-polygones/ile-de-nantes.jpg) + +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). + + +![interaction-url.png](../../static/tutoriels/8-le-cas-des-polygones/interaction-url.png) + +À 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 . + + + + +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. + +![osm-boundaries.png](../../static/tutoriels/8-le-cas-des-polygones/osm-boundaries.png) + +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`. + +![import-contours.png](../../static/tutoriels/8-le-cas-des-polygones/import-contours.png) + +#### b. Importer les contours de quartier dans une carte + +![umap_edit_import.png](../../static/tutoriels/8-le-cas-des-polygones/umap_edit_import.png) + +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. +![limites-geographiques.png](../../static/tutoriels/8-le-cas-des-polygones/limites-geographiques.png) + +#### 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). + diff --git a/docs-users/fr/tutorials/9-map-from-spreadsheet.md b/docs-users/fr/tutorials/9-map-from-spreadsheet.md new file mode 100644 index 00000000..9c76b3ca --- /dev/null +++ b/docs-users/fr/tutorials/9-map-from-spreadsheet.md @@ -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 +- 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 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 : + ![export_csv_libreoffice_calc.png](../../static/tutoriels/9-je-cree-une-carte-a-partir-dun-tableur/export_csv_libreoffice_calc.png) +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é. + +![importer_des_donnees.png](../../static/tutoriels/9-je-cree-une-carte-a-partir-dun-tableur/importer_des_donnees.png) + +![umap_edit_import.png](../../static/tutoriels/9-je-cree-une-carte-a-partir-dun-tableur/umap_edit_import.png) + +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 + +![infobulle_nom_du_calque.png](../../static/tutoriels/9-je-cree-une-carte-a-partir-dun-tableur/infobulle_nom_du_calque.png) + +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é + +![cle_du_libelle.png](../../static/tutoriels/9-je-cree-une-carte-a-partir-dun-tableur/cle_du_libelle.png) + +É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. + +![infobulle_nom_correct.png](../../static/tutoriels/9-je-cree-une-carte-a-partir-dun-tableur/infobulle_nom_correct.png) + +!!! 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 + +![popup_tableau.png](../../static/tutoriels/9-je-cree-une-carte-a-partir-dun-tableur/popup_tableau.png) + +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 : + +![infobulle_tableau.png](../../static/tutoriels/9-je-cree-une-carte-a-partir-dun-tableur/infobulle_tableau.png) + +![modifier_tableau.png](../../static/tutoriels/9-je-cree-une-carte-a-partir-dun-tableur/modifier_tableau.png) + +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 + +![gabarit_popup.png](../../static/tutoriels/9-je-cree-une-carte-a-partir-dun-tableur/gabarit_popup.png) + +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}**. + +![infobulle_avec_gabarit.png](../../static/tutoriels/9-je-cree-une-carte-a-partir-dun-tableur/infobulle_avec_gabarit.png) + +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 + +![config_filtres.png](../../static/tutoriels/9-je-cree-une-carte-a-partir-dun-tableur/config_filtres.png) + +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. + +![umap_edit_props.png](../../static/tutoriels/9-je-cree-une-carte-a-partir-dun-tableur/umap_edit_props.png) + +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). diff --git a/docs-users/fr/videos.md b/docs-users/fr/videos.md new file mode 100644 index 00000000..4b3b6d10 --- /dev/null +++ b/docs-users/fr/videos.md @@ -0,0 +1,23 @@ +# Vidéos uMap + +## uMap a 10 ans, bilan et perspectives + + + +## Retour d’expérience sur l’utilisation d’uMap à la Chambre d’agriculture des Pays de la Loire + + + +## Exemples cartes uMap + + + +## Tutoriel - Umap, croquis et carte interactive (bases sans création de compte) + + + +## Tutoriel - Umap / Openstreetmap (carte enrichie) + + + +[Suggérer d’autres vidéos ?](https://github.com/umap-project/umap/issues/new/choose){ .md-button } diff --git a/docs-users/index.md b/docs-users/index.md new file mode 100644 index 00000000..f418c959 --- /dev/null +++ b/docs-users/index.md @@ -0,0 +1,22 @@ +# uMap user’ documentation + +uMap lets you create maps with OpenStreetMap layers in a minute, and embed them in your site. + +- 📺 Check out [videos](videos.md). +- 🤔 Explore [questions/answers from FAQ](support/faq.md). +- 🤕 Browse [potential errors and their details](support/errors.md). + +!!! info "User docs" + + This documentation is intended for users. + + If you are looking for developer documentation, have a look at [the dedicated documentation](https://docs.umap-project.org/). + + +??? bug "What if there is an undocumented bug?" + + You can: + + - reach [the dedicated mailing-list](https://lists.openstreetmap.org/listinfo/umap) + - check if the issue [has already been reported](https://github.com/umap-project/umap/issues?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc) + - declare [a new issue](https://github.com/umap-project/umap/issues/new/choose) diff --git a/docs-users/requirements.txt b/docs-users/requirements.txt new file mode 100644 index 00000000..269c9a2d --- /dev/null +++ b/docs-users/requirements.txt @@ -0,0 +1,5 @@ +# Force rtfd to use a recent version of mkdocs +mkdocs==1.6.0 +pymdown-extensions==10.7.1 +mkdocs-material==9.5.21 +mkdocs-static-i18n==1.2.2 diff --git a/docs-users/static/tutoriels/1-je-consulte-une-carte-umap/anatomie_carte_umap_2021.jpg b/docs-users/static/tutoriels/1-je-consulte-une-carte-umap/anatomie_carte_umap_2021.jpg new file mode 100644 index 00000000..c6401b3b Binary files /dev/null and b/docs-users/static/tutoriels/1-je-consulte-une-carte-umap/anatomie_carte_umap_2021.jpg differ diff --git a/docs-users/static/tutoriels/1-je-consulte-une-carte-umap/umap_donnees.jpg b/docs-users/static/tutoriels/1-je-consulte-une-carte-umap/umap_donnees.jpg new file mode 100644 index 00000000..1b793900 Binary files /dev/null and b/docs-users/static/tutoriels/1-je-consulte-une-carte-umap/umap_donnees.jpg differ diff --git a/docs-users/static/tutoriels/1-je-consulte-une-carte-umap/umap_sélecteur_calques.png b/docs-users/static/tutoriels/1-je-consulte-une-carte-umap/umap_sélecteur_calques.png new file mode 100644 index 00000000..329328b1 Binary files /dev/null and b/docs-users/static/tutoriels/1-je-consulte-une-carte-umap/umap_sélecteur_calques.png differ diff --git a/docs-users/static/tutoriels/10-jintegre-des-donnees-distantes/umap-api-console-bbox.png b/docs-users/static/tutoriels/10-jintegre-des-donnees-distantes/umap-api-console-bbox.png new file mode 100644 index 00000000..aa335fbd Binary files /dev/null and b/docs-users/static/tutoriels/10-jintegre-des-donnees-distantes/umap-api-console-bbox.png differ diff --git a/docs-users/static/tutoriels/10-jintegre-des-donnees-distantes/umap-api-console-dataset.png b/docs-users/static/tutoriels/10-jintegre-des-donnees-distantes/umap-api-console-dataset.png new file mode 100644 index 00000000..8bf375bb Binary files /dev/null and b/docs-users/static/tutoriels/10-jintegre-des-donnees-distantes/umap-api-console-dataset.png differ diff --git a/docs-users/static/tutoriels/10-jintegre-des-donnees-distantes/umap-api-console-execute.png b/docs-users/static/tutoriels/10-jintegre-des-donnees-distantes/umap-api-console-execute.png new file mode 100644 index 00000000..94d157e0 Binary files /dev/null and b/docs-users/static/tutoriels/10-jintegre-des-donnees-distantes/umap-api-console-execute.png differ diff --git a/docs-users/static/tutoriels/10-jintegre-des-donnees-distantes/umap-api-console.png b/docs-users/static/tutoriels/10-jintegre-des-donnees-distantes/umap-api-console.png new file mode 100644 index 00000000..dcf64670 Binary files /dev/null and b/docs-users/static/tutoriels/10-jintegre-des-donnees-distantes/umap-api-console.png differ diff --git a/docs-users/static/tutoriels/10-jintegre-des-donnees-distantes/umap-api-parameters.png b/docs-users/static/tutoriels/10-jintegre-des-donnees-distantes/umap-api-parameters.png new file mode 100644 index 00000000..ba2c9894 Binary files /dev/null and b/docs-users/static/tutoriels/10-jintegre-des-donnees-distantes/umap-api-parameters.png differ diff --git a/docs-users/static/tutoriels/10-jintegre-des-donnees-distantes/umap-api-properties.png b/docs-users/static/tutoriels/10-jintegre-des-donnees-distantes/umap-api-properties.png new file mode 100644 index 00000000..127a2a3c Binary files /dev/null and b/docs-users/static/tutoriels/10-jintegre-des-donnees-distantes/umap-api-properties.png differ diff --git a/docs-users/static/tutoriels/10-jintegre-des-donnees-distantes/umap-donnees-distantes.png b/docs-users/static/tutoriels/10-jintegre-des-donnees-distantes/umap-donnees-distantes.png new file mode 100644 index 00000000..0992ac7b Binary files /dev/null and b/docs-users/static/tutoriels/10-jintegre-des-donnees-distantes/umap-donnees-distantes.png differ diff --git a/docs-users/static/tutoriels/10-jintegre-des-donnees-distantes/umap-geojson-properties.png b/docs-users/static/tutoriels/10-jintegre-des-donnees-distantes/umap-geojson-properties.png new file mode 100644 index 00000000..12b0932d Binary files /dev/null and b/docs-users/static/tutoriels/10-jintegre-des-donnees-distantes/umap-geojson-properties.png differ diff --git a/docs-users/static/tutoriels/10-jintegre-des-donnees-distantes/umap-heatmap.png b/docs-users/static/tutoriels/10-jintegre-des-donnees-distantes/umap-heatmap.png new file mode 100644 index 00000000..bcfbd853 Binary files /dev/null and b/docs-users/static/tutoriels/10-jintegre-des-donnees-distantes/umap-heatmap.png differ diff --git a/docs-users/static/tutoriels/11-je-valorise-les-donnees-openstreetmap-avec-overpass-et-umap/overpass_turbo_assistant.jpg b/docs-users/static/tutoriels/11-je-valorise-les-donnees-openstreetmap-avec-overpass-et-umap/overpass_turbo_assistant.jpg new file mode 100644 index 00000000..881c3b6a Binary files /dev/null and b/docs-users/static/tutoriels/11-je-valorise-les-donnees-openstreetmap-avec-overpass-et-umap/overpass_turbo_assistant.jpg differ diff --git a/docs-users/static/tutoriels/11-je-valorise-les-donnees-openstreetmap-avec-overpass-et-umap/overpass_turbo_export_geojson.png b/docs-users/static/tutoriels/11-je-valorise-les-donnees-openstreetmap-avec-overpass-et-umap/overpass_turbo_export_geojson.png new file mode 100644 index 00000000..c643958f Binary files /dev/null and b/docs-users/static/tutoriels/11-je-valorise-les-donnees-openstreetmap-avec-overpass-et-umap/overpass_turbo_export_geojson.png differ diff --git a/docs-users/static/tutoriels/11-je-valorise-les-donnees-openstreetmap-avec-overpass-et-umap/overpass_turbo_exporter.jpg b/docs-users/static/tutoriels/11-je-valorise-les-donnees-openstreetmap-avec-overpass-et-umap/overpass_turbo_exporter.jpg new file mode 100644 index 00000000..05905f77 Binary files /dev/null and b/docs-users/static/tutoriels/11-je-valorise-les-donnees-openstreetmap-avec-overpass-et-umap/overpass_turbo_exporter.jpg differ diff --git a/docs-users/static/tutoriels/11-je-valorise-les-donnees-openstreetmap-avec-overpass-et-umap/overpass_turbo_format_xml.jpg b/docs-users/static/tutoriels/11-je-valorise-les-donnees-openstreetmap-avec-overpass-et-umap/overpass_turbo_format_xml.jpg new file mode 100644 index 00000000..38bbc6ff Binary files /dev/null and b/docs-users/static/tutoriels/11-je-valorise-les-donnees-openstreetmap-avec-overpass-et-umap/overpass_turbo_format_xml.jpg differ diff --git a/docs-users/static/tutoriels/11-je-valorise-les-donnees-openstreetmap-avec-overpass-et-umap/requete_dynamique.png b/docs-users/static/tutoriels/11-je-valorise-les-donnees-openstreetmap-avec-overpass-et-umap/requete_dynamique.png new file mode 100644 index 00000000..4cefaec9 Binary files /dev/null and b/docs-users/static/tutoriels/11-je-valorise-les-donnees-openstreetmap-avec-overpass-et-umap/requete_dynamique.png differ diff --git a/docs-users/static/tutoriels/11-je-valorise-les-donnees-openstreetmap-avec-overpass-et-umap/umap_donnees_distantes_wordpress.png b/docs-users/static/tutoriels/11-je-valorise-les-donnees-openstreetmap-avec-overpass-et-umap/umap_donnees_distantes_wordpress.png new file mode 100644 index 00000000..a6e17d09 Binary files /dev/null and b/docs-users/static/tutoriels/11-je-valorise-les-donnees-openstreetmap-avec-overpass-et-umap/umap_donnees_distantes_wordpress.png differ diff --git a/docs-users/static/tutoriels/11-je-valorise-les-donnees-openstreetmap-avec-overpass-et-umap/umap_heatmap.png b/docs-users/static/tutoriels/11-je-valorise-les-donnees-openstreetmap-avec-overpass-et-umap/umap_heatmap.png new file mode 100644 index 00000000..0720a4d3 Binary files /dev/null and b/docs-users/static/tutoriels/11-je-valorise-les-donnees-openstreetmap-avec-overpass-et-umap/umap_heatmap.png differ diff --git a/docs-users/static/tutoriels/11-je-valorise-les-donnees-openstreetmap-avec-overpass-et-umap/umap_heatmap_et_infobulle.jpg b/docs-users/static/tutoriels/11-je-valorise-les-donnees-openstreetmap-avec-overpass-et-umap/umap_heatmap_et_infobulle.jpg new file mode 100644 index 00000000..0bbdfe97 Binary files /dev/null and b/docs-users/static/tutoriels/11-je-valorise-les-donnees-openstreetmap-avec-overpass-et-umap/umap_heatmap_et_infobulle.jpg differ diff --git a/docs-users/static/tutoriels/11-je-valorise-les-donnees-openstreetmap-avec-overpass-et-umap/umap_overpass_infobulle.jpg b/docs-users/static/tutoriels/11-je-valorise-les-donnees-openstreetmap-avec-overpass-et-umap/umap_overpass_infobulle.jpg new file mode 100644 index 00000000..7112a7f5 Binary files /dev/null and b/docs-users/static/tutoriels/11-je-valorise-les-donnees-openstreetmap-avec-overpass-et-umap/umap_overpass_infobulle.jpg differ diff --git a/docs-users/static/tutoriels/11-je-valorise-les-donnees-openstreetmap-avec-overpass-et-umap/umap_requete_overpass_url.png b/docs-users/static/tutoriels/11-je-valorise-les-donnees-openstreetmap-avec-overpass-et-umap/umap_requete_overpass_url.png new file mode 100644 index 00000000..b6e71cd2 Binary files /dev/null and b/docs-users/static/tutoriels/11-je-valorise-les-donnees-openstreetmap-avec-overpass-et-umap/umap_requete_overpass_url.png differ diff --git a/docs-users/static/tutoriels/2-je-cree-ma-premiere-carte-umap/umap_edition.jpg b/docs-users/static/tutoriels/2-je-cree-ma-premiere-carte-umap/umap_edition.jpg new file mode 100644 index 00000000..c08fea4e Binary files /dev/null and b/docs-users/static/tutoriels/2-je-cree-ma-premiere-carte-umap/umap_edition.jpg differ diff --git a/docs-users/static/tutoriels/2-je-cree-ma-premiere-carte-umap/umap_marqueur.jpg b/docs-users/static/tutoriels/2-je-cree-ma-premiere-carte-umap/umap_marqueur.jpg new file mode 100644 index 00000000..addafec2 Binary files /dev/null and b/docs-users/static/tutoriels/2-je-cree-ma-premiere-carte-umap/umap_marqueur.jpg differ diff --git a/docs-users/static/tutoriels/3-jutilise-un-compte-et-cree-une-belle-carte/etiquettes.png b/docs-users/static/tutoriels/3-jutilise-un-compte-et-cree-une-belle-carte/etiquettes.png new file mode 100644 index 00000000..e31cb5dc Binary files /dev/null and b/docs-users/static/tutoriels/3-jutilise-un-compte-et-cree-une-belle-carte/etiquettes.png differ diff --git a/docs-users/static/tutoriels/3-jutilise-un-compte-et-cree-une-belle-carte/umap_camping.png b/docs-users/static/tutoriels/3-jutilise-un-compte-et-cree-une-belle-carte/umap_camping.png new file mode 100644 index 00000000..22ba2f35 Binary files /dev/null and b/docs-users/static/tutoriels/3-jutilise-un-compte-et-cree-une-belle-carte/umap_camping.png differ diff --git a/docs-users/static/tutoriels/3-jutilise-un-compte-et-cree-une-belle-carte/umap_connect.png b/docs-users/static/tutoriels/3-jutilise-un-compte-et-cree-une-belle-carte/umap_connect.png new file mode 100644 index 00000000..39219644 Binary files /dev/null and b/docs-users/static/tutoriels/3-jutilise-un-compte-et-cree-une-belle-carte/umap_connect.png differ diff --git a/docs-users/static/tutoriels/3-jutilise-un-compte-et-cree-une-belle-carte/umap_header.png b/docs-users/static/tutoriels/3-jutilise-un-compte-et-cree-une-belle-carte/umap_header.png new file mode 100644 index 00000000..afc77129 Binary files /dev/null and b/docs-users/static/tutoriels/3-jutilise-un-compte-et-cree-une-belle-carte/umap_header.png differ diff --git a/docs-users/static/tutoriels/3-jutilise-un-compte-et-cree-une-belle-carte/umap_ligne.jpg b/docs-users/static/tutoriels/3-jutilise-un-compte-et-cree-une-belle-carte/umap_ligne.jpg new file mode 100644 index 00000000..0d61405d Binary files /dev/null and b/docs-users/static/tutoriels/3-jutilise-un-compte-et-cree-une-belle-carte/umap_ligne.jpg differ diff --git a/docs-users/static/tutoriels/3-jutilise-un-compte-et-cree-une-belle-carte/umap_ligne_props.png b/docs-users/static/tutoriels/3-jutilise-un-compte-et-cree-une-belle-carte/umap_ligne_props.png new file mode 100644 index 00000000..301f54c7 Binary files /dev/null and b/docs-users/static/tutoriels/3-jutilise-un-compte-et-cree-une-belle-carte/umap_ligne_props.png differ diff --git a/docs-users/static/tutoriels/3-jutilise-un-compte-et-cree-une-belle-carte/umap_ligne_tirets.png b/docs-users/static/tutoriels/3-jutilise-un-compte-et-cree-une-belle-carte/umap_ligne_tirets.png new file mode 100644 index 00000000..aac7465b Binary files /dev/null and b/docs-users/static/tutoriels/3-jutilise-un-compte-et-cree-une-belle-carte/umap_ligne_tirets.png differ diff --git a/docs-users/static/tutoriels/3-jutilise-un-compte-et-cree-une-belle-carte/umap_marqueur_props.png b/docs-users/static/tutoriels/3-jutilise-un-compte-et-cree-une-belle-carte/umap_marqueur_props.png new file mode 100644 index 00000000..eaeefe1f Binary files /dev/null and b/docs-users/static/tutoriels/3-jutilise-un-compte-et-cree-une-belle-carte/umap_marqueur_props.png differ diff --git a/docs-users/static/tutoriels/3-jutilise-un-compte-et-cree-une-belle-carte/umap_modifier_marqueur.png b/docs-users/static/tutoriels/3-jutilise-un-compte-et-cree-une-belle-carte/umap_modifier_marqueur.png new file mode 100644 index 00000000..11bfed1a Binary files /dev/null and b/docs-users/static/tutoriels/3-jutilise-un-compte-et-cree-une-belle-carte/umap_modifier_marqueur.png differ diff --git a/docs-users/static/tutoriels/4-je-modifie-et-personnalise-ma-carte/umap_properties_bottom.jpg b/docs-users/static/tutoriels/4-je-modifie-et-personnalise-ma-carte/umap_properties_bottom.jpg new file mode 100644 index 00000000..3945299b Binary files /dev/null and b/docs-users/static/tutoriels/4-je-modifie-et-personnalise-ma-carte/umap_properties_bottom.jpg differ diff --git a/docs-users/static/tutoriels/5-je-cree-des-infobulles-multimedia/aide-miseenforme.png b/docs-users/static/tutoriels/5-je-cree-des-infobulles-multimedia/aide-miseenforme.png new file mode 100644 index 00000000..305dcbce Binary files /dev/null and b/docs-users/static/tutoriels/5-je-cree-des-infobulles-multimedia/aide-miseenforme.png differ diff --git a/docs-users/static/tutoriels/5-je-cree-des-infobulles-multimedia/lienframapic.png b/docs-users/static/tutoriels/5-je-cree-des-infobulles-multimedia/lienframapic.png new file mode 100644 index 00000000..a7b75394 Binary files /dev/null and b/docs-users/static/tutoriels/5-je-cree-des-infobulles-multimedia/lienframapic.png differ diff --git a/docs-users/static/tutoriels/5-je-cree-des-infobulles-multimedia/miseenforme-lienavectexte.png b/docs-users/static/tutoriels/5-je-cree-des-infobulles-multimedia/miseenforme-lienavectexte.png new file mode 100644 index 00000000..e6967fc7 Binary files /dev/null and b/docs-users/static/tutoriels/5-je-cree-des-infobulles-multimedia/miseenforme-lienavectexte.png differ diff --git a/docs-users/static/tutoriels/5-je-cree-des-infobulles-multimedia/miseenforme-liensimple.png b/docs-users/static/tutoriels/5-je-cree-des-infobulles-multimedia/miseenforme-liensimple.png new file mode 100644 index 00000000..0783d5e8 Binary files /dev/null and b/docs-users/static/tutoriels/5-je-cree-des-infobulles-multimedia/miseenforme-liensimple.png differ diff --git a/docs-users/static/tutoriels/5-je-cree-des-infobulles-multimedia/miseenforme-photo.png b/docs-users/static/tutoriels/5-je-cree-des-infobulles-multimedia/miseenforme-photo.png new file mode 100644 index 00000000..007ccd69 Binary files /dev/null and b/docs-users/static/tutoriels/5-je-cree-des-infobulles-multimedia/miseenforme-photo.png differ diff --git a/docs-users/static/tutoriels/5-je-cree-des-infobulles-multimedia/miseenforme-resultat.png b/docs-users/static/tutoriels/5-je-cree-des-infobulles-multimedia/miseenforme-resultat.png new file mode 100644 index 00000000..8b757375 Binary files /dev/null and b/docs-users/static/tutoriels/5-je-cree-des-infobulles-multimedia/miseenforme-resultat.png differ diff --git a/docs-users/static/tutoriels/5-je-cree-des-infobulles-multimedia/miseenforme-syntaxe.png b/docs-users/static/tutoriels/5-je-cree-des-infobulles-multimedia/miseenforme-syntaxe.png new file mode 100644 index 00000000..76a4f901 Binary files /dev/null and b/docs-users/static/tutoriels/5-je-cree-des-infobulles-multimedia/miseenforme-syntaxe.png differ diff --git a/docs-users/static/tutoriels/5-je-cree-des-infobulles-multimedia/miseenforme-video.png b/docs-users/static/tutoriels/5-je-cree-des-infobulles-multimedia/miseenforme-video.png new file mode 100644 index 00000000..ad73319c Binary files /dev/null and b/docs-users/static/tutoriels/5-je-cree-des-infobulles-multimedia/miseenforme-video.png differ diff --git a/docs-users/static/tutoriels/5-je-cree-des-infobulles-multimedia/partageyoutube.png b/docs-users/static/tutoriels/5-je-cree-des-infobulles-multimedia/partageyoutube.png new file mode 100644 index 00000000..4f936736 Binary files /dev/null and b/docs-users/static/tutoriels/5-je-cree-des-infobulles-multimedia/partageyoutube.png differ diff --git a/docs-users/static/tutoriels/5-je-cree-des-infobulles-multimedia/styledepopup.png b/docs-users/static/tutoriels/5-je-cree-des-infobulles-multimedia/styledepopup.png new file mode 100644 index 00000000..25d1cb6f Binary files /dev/null and b/docs-users/static/tutoriels/5-je-cree-des-infobulles-multimedia/styledepopup.png differ diff --git a/docs-users/static/tutoriels/6-je-structure-ma-carte-avec-des-calques/umap_calques_gauche_droite.jpg b/docs-users/static/tutoriels/6-je-structure-ma-carte-avec-des-calques/umap_calques_gauche_droite.jpg new file mode 100644 index 00000000..158dbfa7 Binary files /dev/null and b/docs-users/static/tutoriels/6-je-structure-ma-carte-avec-des-calques/umap_calques_gauche_droite.jpg differ diff --git a/docs-users/static/tutoriels/6-je-structure-ma-carte-avec-des-calques/umap_edit_layers.png b/docs-users/static/tutoriels/6-je-structure-ma-carte-avec-des-calques/umap_edit_layers.png new file mode 100644 index 00000000..e53f59ed Binary files /dev/null and b/docs-users/static/tutoriels/6-je-structure-ma-carte-avec-des-calques/umap_edit_layers.png differ diff --git a/docs-users/static/tutoriels/6-je-structure-ma-carte-avec-des-calques/umap_gestion_calques.png b/docs-users/static/tutoriels/6-je-structure-ma-carte-avec-des-calques/umap_gestion_calques.png new file mode 100644 index 00000000..acc2765e Binary files /dev/null and b/docs-users/static/tutoriels/6-je-structure-ma-carte-avec-des-calques/umap_gestion_calques.png differ diff --git a/docs-users/static/tutoriels/6-je-structure-ma-carte-avec-des-calques/umap_layer_advanced.png b/docs-users/static/tutoriels/6-je-structure-ma-carte-avec-des-calques/umap_layer_advanced.png new file mode 100644 index 00000000..47233a7b Binary files /dev/null and b/docs-users/static/tutoriels/6-je-structure-ma-carte-avec-des-calques/umap_layer_advanced.png differ diff --git a/docs-users/static/tutoriels/6-je-structure-ma-carte-avec-des-calques/umap_layer_description.png b/docs-users/static/tutoriels/6-je-structure-ma-carte-avec-des-calques/umap_layer_description.png new file mode 100644 index 00000000..66c42cf9 Binary files /dev/null and b/docs-users/static/tutoriels/6-je-structure-ma-carte-avec-des-calques/umap_layer_description.png differ diff --git a/docs-users/static/tutoriels/6-je-structure-ma-carte-avec-des-calques/umap_layer_edit.png b/docs-users/static/tutoriels/6-je-structure-ma-carte-avec-des-calques/umap_layer_edit.png new file mode 100644 index 00000000..b2b74e9f Binary files /dev/null and b/docs-users/static/tutoriels/6-je-structure-ma-carte-avec-des-calques/umap_layer_edit.png differ diff --git a/docs-users/static/tutoriels/6-je-structure-ma-carte-avec-des-calques/umap_layer_props_top.png b/docs-users/static/tutoriels/6-je-structure-ma-carte-avec-des-calques/umap_layer_props_top.png new file mode 100644 index 00000000..c487e3d2 Binary files /dev/null and b/docs-users/static/tutoriels/6-je-structure-ma-carte-avec-des-calques/umap_layer_props_top.png differ diff --git a/docs-users/static/tutoriels/6-je-structure-ma-carte-avec-des-calques/umap_layer_select.png b/docs-users/static/tutoriels/6-je-structure-ma-carte-avec-des-calques/umap_layer_select.png new file mode 100644 index 00000000..5e8332bb Binary files /dev/null and b/docs-users/static/tutoriels/6-je-structure-ma-carte-avec-des-calques/umap_layer_select.png differ diff --git a/docs-users/static/tutoriels/6-je-structure-ma-carte-avec-des-calques/umap_legende.png b/docs-users/static/tutoriels/6-je-structure-ma-carte-avec-des-calques/umap_legende.png new file mode 100644 index 00000000..986910c0 Binary files /dev/null and b/docs-users/static/tutoriels/6-je-structure-ma-carte-avec-des-calques/umap_legende.png differ diff --git a/docs-users/static/tutoriels/7-je-publie-ma-carte-et-en-controle-lacces/export-iframe.png b/docs-users/static/tutoriels/7-je-publie-ma-carte-et-en-controle-lacces/export-iframe.png new file mode 100644 index 00000000..0c8e7df2 Binary files /dev/null and b/docs-users/static/tutoriels/7-je-publie-ma-carte-et-en-controle-lacces/export-iframe.png differ diff --git a/docs-users/static/tutoriels/7-je-publie-ma-carte-et-en-controle-lacces/import-iframe-wordpress.png b/docs-users/static/tutoriels/7-je-publie-ma-carte-et-en-controle-lacces/import-iframe-wordpress.png new file mode 100644 index 00000000..8670238a Binary files /dev/null and b/docs-users/static/tutoriels/7-je-publie-ma-carte-et-en-controle-lacces/import-iframe-wordpress.png differ diff --git a/docs-users/static/tutoriels/7-je-publie-ma-carte-et-en-controle-lacces/options-export-iframe.png b/docs-users/static/tutoriels/7-je-publie-ma-carte-et-en-controle-lacces/options-export-iframe.png new file mode 100644 index 00000000..6a88ab39 Binary files /dev/null and b/docs-users/static/tutoriels/7-je-publie-ma-carte-et-en-controle-lacces/options-export-iframe.png differ diff --git a/docs-users/static/tutoriels/7-je-publie-ma-carte-et-en-controle-lacces/permissions.png b/docs-users/static/tutoriels/7-je-publie-ma-carte-et-en-controle-lacces/permissions.png new file mode 100644 index 00000000..57753e67 Binary files /dev/null and b/docs-users/static/tutoriels/7-je-publie-ma-carte-et-en-controle-lacces/permissions.png differ diff --git a/docs-users/static/tutoriels/7-je-publie-ma-carte-et-en-controle-lacces/umap_edit_rights.png b/docs-users/static/tutoriels/7-je-publie-ma-carte-et-en-controle-lacces/umap_edit_rights.png new file mode 100644 index 00000000..f6a55112 Binary files /dev/null and b/docs-users/static/tutoriels/7-je-publie-ma-carte-et-en-controle-lacces/umap_edit_rights.png differ diff --git a/docs-users/static/tutoriels/7-je-publie-ma-carte-et-en-controle-lacces/umap_share.png b/docs-users/static/tutoriels/7-je-publie-ma-carte-et-en-controle-lacces/umap_share.png new file mode 100644 index 00000000..855ead13 Binary files /dev/null and b/docs-users/static/tutoriels/7-je-publie-ma-carte-et-en-controle-lacces/umap_share.png differ diff --git a/docs-users/static/tutoriels/8-le-cas-des-polygones/ile-de-nantes.jpg b/docs-users/static/tutoriels/8-le-cas-des-polygones/ile-de-nantes.jpg new file mode 100644 index 00000000..c77fef69 Binary files /dev/null and b/docs-users/static/tutoriels/8-le-cas-des-polygones/ile-de-nantes.jpg differ diff --git a/docs-users/static/tutoriels/8-le-cas-des-polygones/import-contours.png b/docs-users/static/tutoriels/8-le-cas-des-polygones/import-contours.png new file mode 100644 index 00000000..ef220179 Binary files /dev/null and b/docs-users/static/tutoriels/8-le-cas-des-polygones/import-contours.png differ diff --git a/docs-users/static/tutoriels/8-le-cas-des-polygones/interaction-desactivee.png b/docs-users/static/tutoriels/8-le-cas-des-polygones/interaction-desactivee.png new file mode 100644 index 00000000..adf08cd5 Binary files /dev/null and b/docs-users/static/tutoriels/8-le-cas-des-polygones/interaction-desactivee.png differ diff --git a/docs-users/static/tutoriels/8-le-cas-des-polygones/interaction-url.png b/docs-users/static/tutoriels/8-le-cas-des-polygones/interaction-url.png new file mode 100644 index 00000000..0369b013 Binary files /dev/null and b/docs-users/static/tutoriels/8-le-cas-des-polygones/interaction-url.png differ diff --git a/docs-users/static/tutoriels/8-le-cas-des-polygones/limites-geographiques.png b/docs-users/static/tutoriels/8-le-cas-des-polygones/limites-geographiques.png new file mode 100644 index 00000000..649b1f9f Binary files /dev/null and b/docs-users/static/tutoriels/8-le-cas-des-polygones/limites-geographiques.png differ diff --git a/docs-users/static/tutoriels/8-le-cas-des-polygones/osm-boundaries.png b/docs-users/static/tutoriels/8-le-cas-des-polygones/osm-boundaries.png new file mode 100644 index 00000000..295aae7f Binary files /dev/null and b/docs-users/static/tutoriels/8-le-cas-des-polygones/osm-boundaries.png differ diff --git a/docs-users/static/tutoriels/8-le-cas-des-polygones/polygone_trou.jpg b/docs-users/static/tutoriels/8-le-cas-des-polygones/polygone_trou.jpg new file mode 100644 index 00000000..dffae7c0 Binary files /dev/null and b/docs-users/static/tutoriels/8-le-cas-des-polygones/polygone_trou.jpg differ diff --git a/docs-users/static/tutoriels/8-le-cas-des-polygones/proprietes_polygones.png b/docs-users/static/tutoriels/8-le-cas-des-polygones/proprietes_polygones.png new file mode 100644 index 00000000..f4842337 Binary files /dev/null and b/docs-users/static/tutoriels/8-le-cas-des-polygones/proprietes_polygones.png differ diff --git a/docs-users/static/tutoriels/8-le-cas-des-polygones/umap_edit_import.png b/docs-users/static/tutoriels/8-le-cas-des-polygones/umap_edit_import.png new file mode 100644 index 00000000..cc189971 Binary files /dev/null and b/docs-users/static/tutoriels/8-le-cas-des-polygones/umap_edit_import.png differ diff --git a/docs-users/static/tutoriels/8-le-cas-des-polygones/umap_edit_polygon.png b/docs-users/static/tutoriels/8-le-cas-des-polygones/umap_edit_polygon.png new file mode 100644 index 00000000..7951b176 Binary files /dev/null and b/docs-users/static/tutoriels/8-le-cas-des-polygones/umap_edit_polygon.png differ diff --git a/docs-users/static/tutoriels/9-je-cree-une-carte-a-partir-dun-tableur/cle_du_libelle.png b/docs-users/static/tutoriels/9-je-cree-une-carte-a-partir-dun-tableur/cle_du_libelle.png new file mode 100644 index 00000000..58bfb46f Binary files /dev/null and b/docs-users/static/tutoriels/9-je-cree-une-carte-a-partir-dun-tableur/cle_du_libelle.png differ diff --git a/docs-users/static/tutoriels/9-je-cree-une-carte-a-partir-dun-tableur/config_filtres.png b/docs-users/static/tutoriels/9-je-cree-une-carte-a-partir-dun-tableur/config_filtres.png new file mode 100644 index 00000000..0aa53a8f Binary files /dev/null and b/docs-users/static/tutoriels/9-je-cree-une-carte-a-partir-dun-tableur/config_filtres.png differ diff --git a/docs-users/static/tutoriels/9-je-cree-une-carte-a-partir-dun-tableur/export_csv_libreoffice_calc.png b/docs-users/static/tutoriels/9-je-cree-une-carte-a-partir-dun-tableur/export_csv_libreoffice_calc.png new file mode 100644 index 00000000..fc92bd9b Binary files /dev/null and b/docs-users/static/tutoriels/9-je-cree-une-carte-a-partir-dun-tableur/export_csv_libreoffice_calc.png differ diff --git a/docs-users/static/tutoriels/9-je-cree-une-carte-a-partir-dun-tableur/gabarit_popup.png b/docs-users/static/tutoriels/9-je-cree-une-carte-a-partir-dun-tableur/gabarit_popup.png new file mode 100644 index 00000000..e594363b Binary files /dev/null and b/docs-users/static/tutoriels/9-je-cree-une-carte-a-partir-dun-tableur/gabarit_popup.png differ diff --git a/docs-users/static/tutoriels/9-je-cree-une-carte-a-partir-dun-tableur/importer_des_donnees.png b/docs-users/static/tutoriels/9-je-cree-une-carte-a-partir-dun-tableur/importer_des_donnees.png new file mode 100644 index 00000000..176243a2 Binary files /dev/null and b/docs-users/static/tutoriels/9-je-cree-une-carte-a-partir-dun-tableur/importer_des_donnees.png differ diff --git a/docs-users/static/tutoriels/9-je-cree-une-carte-a-partir-dun-tableur/infobulle_avec_gabarit.png b/docs-users/static/tutoriels/9-je-cree-une-carte-a-partir-dun-tableur/infobulle_avec_gabarit.png new file mode 100644 index 00000000..f9d7fe94 Binary files /dev/null and b/docs-users/static/tutoriels/9-je-cree-une-carte-a-partir-dun-tableur/infobulle_avec_gabarit.png differ diff --git a/docs-users/static/tutoriels/9-je-cree-une-carte-a-partir-dun-tableur/infobulle_nom_correct.png b/docs-users/static/tutoriels/9-je-cree-une-carte-a-partir-dun-tableur/infobulle_nom_correct.png new file mode 100644 index 00000000..0d29822c Binary files /dev/null and b/docs-users/static/tutoriels/9-je-cree-une-carte-a-partir-dun-tableur/infobulle_nom_correct.png differ diff --git a/docs-users/static/tutoriels/9-je-cree-une-carte-a-partir-dun-tableur/infobulle_nom_du_calque.png b/docs-users/static/tutoriels/9-je-cree-une-carte-a-partir-dun-tableur/infobulle_nom_du_calque.png new file mode 100644 index 00000000..5c3a1666 Binary files /dev/null and b/docs-users/static/tutoriels/9-je-cree-une-carte-a-partir-dun-tableur/infobulle_nom_du_calque.png differ diff --git a/docs-users/static/tutoriels/9-je-cree-une-carte-a-partir-dun-tableur/infobulle_tableau.png b/docs-users/static/tutoriels/9-je-cree-une-carte-a-partir-dun-tableur/infobulle_tableau.png new file mode 100644 index 00000000..b36ed644 Binary files /dev/null and b/docs-users/static/tutoriels/9-je-cree-une-carte-a-partir-dun-tableur/infobulle_tableau.png differ diff --git a/docs-users/static/tutoriels/9-je-cree-une-carte-a-partir-dun-tableur/modifier_tableau.png b/docs-users/static/tutoriels/9-je-cree-une-carte-a-partir-dun-tableur/modifier_tableau.png new file mode 100644 index 00000000..af36451c Binary files /dev/null and b/docs-users/static/tutoriels/9-je-cree-une-carte-a-partir-dun-tableur/modifier_tableau.png differ diff --git a/docs-users/static/tutoriels/9-je-cree-une-carte-a-partir-dun-tableur/popup_tableau.png b/docs-users/static/tutoriels/9-je-cree-une-carte-a-partir-dun-tableur/popup_tableau.png new file mode 100644 index 00000000..0a02704c Binary files /dev/null and b/docs-users/static/tutoriels/9-je-cree-une-carte-a-partir-dun-tableur/popup_tableau.png differ diff --git a/docs-users/static/tutoriels/9-je-cree-une-carte-a-partir-dun-tableur/umap_edit_import.png b/docs-users/static/tutoriels/9-je-cree-une-carte-a-partir-dun-tableur/umap_edit_import.png new file mode 100644 index 00000000..cc189971 Binary files /dev/null and b/docs-users/static/tutoriels/9-je-cree-une-carte-a-partir-dun-tableur/umap_edit_import.png differ diff --git a/docs-users/static/tutoriels/9-je-cree-une-carte-a-partir-dun-tableur/umap_edit_props.png b/docs-users/static/tutoriels/9-je-cree-une-carte-a-partir-dun-tableur/umap_edit_props.png new file mode 100644 index 00000000..9aab3128 Binary files /dev/null and b/docs-users/static/tutoriels/9-je-cree-une-carte-a-partir-dun-tableur/umap_edit_props.png differ diff --git a/docs-users/static/tutoriels/control-browse.png b/docs-users/static/tutoriels/control-browse.png new file mode 100644 index 00000000..72f4ca8e Binary files /dev/null and b/docs-users/static/tutoriels/control-browse.png differ diff --git a/docs-users/static/tutoriels/control-edit-in-osm.png b/docs-users/static/tutoriels/control-edit-in-osm.png new file mode 100644 index 00000000..63b527be Binary files /dev/null and b/docs-users/static/tutoriels/control-edit-in-osm.png differ diff --git a/docs-users/static/tutoriels/control-embed.png b/docs-users/static/tutoriels/control-embed.png new file mode 100644 index 00000000..b971f4f9 Binary files /dev/null and b/docs-users/static/tutoriels/control-embed.png differ diff --git a/docs-users/static/tutoriels/control-fullscreen.png b/docs-users/static/tutoriels/control-fullscreen.png new file mode 100644 index 00000000..e4d7f069 Binary files /dev/null and b/docs-users/static/tutoriels/control-fullscreen.png differ diff --git a/docs-users/static/tutoriels/control-icon-layers.png b/docs-users/static/tutoriels/control-icon-layers.png new file mode 100644 index 00000000..c340eedc Binary files /dev/null and b/docs-users/static/tutoriels/control-icon-layers.png differ diff --git a/docs-users/static/tutoriels/control-locate.png b/docs-users/static/tutoriels/control-locate.png new file mode 100644 index 00000000..48de86ed Binary files /dev/null and b/docs-users/static/tutoriels/control-locate.png differ diff --git a/docs-users/static/tutoriels/control-more.png b/docs-users/static/tutoriels/control-more.png new file mode 100644 index 00000000..dff34c11 Binary files /dev/null and b/docs-users/static/tutoriels/control-more.png differ diff --git a/docs-users/static/tutoriels/control-search.png b/docs-users/static/tutoriels/control-search.png new file mode 100644 index 00000000..892f8e31 Binary files /dev/null and b/docs-users/static/tutoriels/control-search.png differ diff --git a/docs-users/static/tutoriels/create-map-alert.png b/docs-users/static/tutoriels/create-map-alert.png new file mode 100644 index 00000000..d9930086 Binary files /dev/null and b/docs-users/static/tutoriels/create-map-alert.png differ diff --git a/docs-users/static/tutoriels/create-map.png b/docs-users/static/tutoriels/create-map.png new file mode 100644 index 00000000..e0468dbe Binary files /dev/null and b/docs-users/static/tutoriels/create-map.png differ diff --git a/docs-users/static/tutoriels/draw-marker.png b/docs-users/static/tutoriels/draw-marker.png new file mode 100644 index 00000000..4c28a775 Binary files /dev/null and b/docs-users/static/tutoriels/draw-marker.png differ diff --git a/docs-users/static/tutoriels/draw-polyline.png b/docs-users/static/tutoriels/draw-polyline.png new file mode 100644 index 00000000..3a964a4b Binary files /dev/null and b/docs-users/static/tutoriels/draw-polyline.png differ diff --git a/docs-users/static/tutoriels/edit-map.png b/docs-users/static/tutoriels/edit-map.png new file mode 100644 index 00000000..7ed90096 Binary files /dev/null and b/docs-users/static/tutoriels/edit-map.png differ diff --git a/docs-users/static/tutoriels/homepage.png b/docs-users/static/tutoriels/homepage.png new file mode 100644 index 00000000..27feccab Binary files /dev/null and b/docs-users/static/tutoriels/homepage.png differ diff --git a/docs-users/static/tutoriels/map-settings.png b/docs-users/static/tutoriels/map-settings.png new file mode 100644 index 00000000..f598bfc5 Binary files /dev/null and b/docs-users/static/tutoriels/map-settings.png differ diff --git a/docs-users/static/tutoriels/map-tilelayers.png b/docs-users/static/tutoriels/map-tilelayers.png new file mode 100644 index 00000000..10777ad6 Binary files /dev/null and b/docs-users/static/tutoriels/map-tilelayers.png differ diff --git a/docs-users/static/tutoriels/measure-control.png b/docs-users/static/tutoriels/measure-control.png new file mode 100644 index 00000000..ccab5cbb Binary files /dev/null and b/docs-users/static/tutoriels/measure-control.png differ diff --git a/docs-users/static/tutoriels/modify-name-panel.png b/docs-users/static/tutoriels/modify-name-panel.png new file mode 100644 index 00000000..66159e18 Binary files /dev/null and b/docs-users/static/tutoriels/modify-name-panel.png differ diff --git a/docs-users/static/tutoriels/modify-name.png b/docs-users/static/tutoriels/modify-name.png new file mode 100644 index 00000000..3ceea880 Binary files /dev/null and b/docs-users/static/tutoriels/modify-name.png differ diff --git a/docs-users/static/tutoriels/register-zoom.png b/docs-users/static/tutoriels/register-zoom.png new file mode 100644 index 00000000..dd9dfa14 Binary files /dev/null and b/docs-users/static/tutoriels/register-zoom.png differ diff --git a/docs-users/stylesheets/extra.css b/docs-users/stylesheets/extra.css new file mode 100644 index 00000000..ded19ade --- /dev/null +++ b/docs-users/stylesheets/extra.css @@ -0,0 +1,6 @@ +:root { + --md-primary-fg-color: #323e56; +} +.md-typeset a { + color: #7990be !important; +} \ No newline at end of file diff --git a/docs-users/support/errors.md b/docs-users/support/errors.md new file mode 100644 index 00000000..ef1dd6b6 --- /dev/null +++ b/docs-users/support/errors.md @@ -0,0 +1,5 @@ +# uMap errors and their significations + +## Cannot determine latitude and longitude columns. {: #error-latlon-columns } + +It happens if you provide a CSV file without column names explicitly starting with `lat` and `lon`. diff --git a/docs-users/support/faq.md b/docs-users/support/faq.md new file mode 100644 index 00000000..552bcee8 --- /dev/null +++ b/docs-users/support/faq.md @@ -0,0 +1,12 @@ +# Frequently Asked Questions (FAQ) + +## Which syntax is allowed in description fields? + +* `*single star for italic*` → *single star for italic* +* `**double star for bold**` → **double star for bold** +* `# one hash for main heading` ⤵

one hash for main heading

+* `## two hashes for second heading` ⤵

two hashes for second heading

+* `### three hashes for third heading` ⤵

three hashes for third heading

+* `Simple link: [[http://example.com]]` → Simple link: [http://example.com](http://example.com) +* `Link with text: [[http://example.com|text of the link]]` → Link with text: [text of the link](http://example.com) +* `--- for a horizontal rule` ⤵
diff --git a/docs-users/tutorials/1-browsing-a-map.md b/docs-users/tutorials/1-browsing-a-map.md new file mode 100644 index 00000000..49b9c5d2 --- /dev/null +++ b/docs-users/tutorials/1-browsing-a-map.md @@ -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. diff --git a/docs-users/tutorials/10-embed-remote-data.md b/docs-users/tutorials/10-embed-remote-data.md new file mode 100644 index 00000000..49b9c5d2 --- /dev/null +++ b/docs-users/tutorials/10-embed-remote-data.md @@ -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. diff --git a/docs-users/tutorials/11-openstreetmap-overpass-and-umap.md b/docs-users/tutorials/11-openstreetmap-overpass-and-umap.md new file mode 100644 index 00000000..49b9c5d2 --- /dev/null +++ b/docs-users/tutorials/11-openstreetmap-overpass-and-umap.md @@ -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. diff --git a/docs-users/tutorials/2-first-map.md b/docs-users/tutorials/2-first-map.md new file mode 100644 index 00000000..49b9c5d2 --- /dev/null +++ b/docs-users/tutorials/2-first-map.md @@ -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. diff --git a/docs-users/tutorials/3-create-account.md b/docs-users/tutorials/3-create-account.md new file mode 100644 index 00000000..49b9c5d2 --- /dev/null +++ b/docs-users/tutorials/3-create-account.md @@ -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. diff --git a/docs-users/tutorials/4-customize-map.md b/docs-users/tutorials/4-customize-map.md new file mode 100644 index 00000000..49b9c5d2 --- /dev/null +++ b/docs-users/tutorials/4-customize-map.md @@ -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. diff --git a/docs-users/tutorials/5-multimedia-tooltips.md b/docs-users/tutorials/5-multimedia-tooltips.md new file mode 100644 index 00000000..49b9c5d2 --- /dev/null +++ b/docs-users/tutorials/5-multimedia-tooltips.md @@ -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. diff --git a/docs-users/tutorials/6-handling-datalayers.md b/docs-users/tutorials/6-handling-datalayers.md new file mode 100644 index 00000000..49b9c5d2 --- /dev/null +++ b/docs-users/tutorials/6-handling-datalayers.md @@ -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. diff --git a/docs-users/tutorials/7-publishing-and-permissions.md b/docs-users/tutorials/7-publishing-and-permissions.md new file mode 100644 index 00000000..49b9c5d2 --- /dev/null +++ b/docs-users/tutorials/7-publishing-and-permissions.md @@ -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. diff --git a/docs-users/tutorials/8-polygons.md b/docs-users/tutorials/8-polygons.md new file mode 100644 index 00000000..49b9c5d2 --- /dev/null +++ b/docs-users/tutorials/8-polygons.md @@ -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. diff --git a/docs-users/tutorials/9-map-from-spreadsheet.md b/docs-users/tutorials/9-map-from-spreadsheet.md new file mode 100644 index 00000000..49b9c5d2 --- /dev/null +++ b/docs-users/tutorials/9-map-from-spreadsheet.md @@ -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. diff --git a/docs-users/videos.md b/docs-users/videos.md new file mode 100644 index 00000000..cf4faf7d --- /dev/null +++ b/docs-users/videos.md @@ -0,0 +1,22 @@ +# uMap videos + +## Introduction to uMap + + + + +## Adding wikicommons photographs to umap + + + +## Tutorial umap + + + + +## Creating a provenance map on uMap + + + +[Suggest more videos?](https://github.com/umap-project/umap/issues/new/choose){ .md-button } + diff --git a/docs/requirements.txt b/docs/requirements.txt index f07dda3e..0c491dd2 100644 --- a/docs/requirements.txt +++ b/docs/requirements.txt @@ -2,3 +2,4 @@ mkdocs==1.6.0 pymdown-extensions==10.8.1 mkdocs-material==9.5.21 +mkdocs-static-i18n==1.2.2 diff --git a/mkdocs.yml b/mkdocs.yml index 3590f0e0..032e0449 100644 --- a/mkdocs.yml +++ b/mkdocs.yml @@ -1,8 +1,9 @@ -site_name: uMap docs +site_name: uMap documentation site_description: uMap lets you create maps with OpenStreetMap layers in a minute and embed them in your site repo_name: umap-project/umap repo_url: https://github.com/umap-project/umap nav: + - Home: index.md - How-tos: - Getting started: install.md - Contribute: contributing.md @@ -42,6 +43,8 @@ theme: extra_css: - stylesheets/extra.css markdown_extensions: + - toc: + permalink: ⚓︎ - pymdownx.magiclink: normalize_issue_symbols: true repo_url_shorthand: true diff --git a/pyproject.toml b/pyproject.toml index e2f5bbbb..90557dce 100644 --- a/pyproject.toml +++ b/pyproject.toml @@ -48,6 +48,7 @@ dev = [ "djlint==1.34.1", "mkdocs==1.6.0", "mkdocs-material==9.5.21", + "mkdocs-static-i18n==1.2.2", "vermin==1.6.0", "pymdown-extensions==10.8.1", "isort==5.13.2",