diff --git a/doc/tuto-projet/Makefile b/doc/tuto-projet/Makefile new file mode 100644 index 0000000..ad3f790 --- /dev/null +++ b/doc/tuto-projet/Makefile @@ -0,0 +1,8 @@ +.PHONY: all +all: index.html + +index.html: index.md index.css + pandoc --from markdown --to html --standalone --css $(word 2,$^) --output $@ $< + +clean: + rm -f index.html diff --git a/doc/tuto-projet/illus-dezoom-overpass.png b/doc/tuto-projet/illus-dezoom-overpass.png new file mode 100644 index 0000000..6a0dde1 Binary files /dev/null and b/doc/tuto-projet/illus-dezoom-overpass.png differ diff --git a/doc/tuto-projet/illus-form-projet.png b/doc/tuto-projet/illus-form-projet.png new file mode 100644 index 0000000..b460f48 Binary files /dev/null and b/doc/tuto-projet/illus-form-projet.png differ diff --git a/doc/tuto-projet/illus-importer-taches.png b/doc/tuto-projet/illus-importer-taches.png new file mode 100644 index 0000000..9cf8f72 Binary files /dev/null and b/doc/tuto-projet/illus-importer-taches.png differ diff --git a/doc/tuto-projet/illus-nouveau-projet.png b/doc/tuto-projet/illus-nouveau-projet.png new file mode 100644 index 0000000..ecd2ed4 Binary files /dev/null and b/doc/tuto-projet/illus-nouveau-projet.png differ diff --git a/doc/tuto-projet/illus-nouvelles-taches.png b/doc/tuto-projet/illus-nouvelles-taches.png new file mode 100644 index 0000000..087dc0f Binary files /dev/null and b/doc/tuto-projet/illus-nouvelles-taches.png differ diff --git a/doc/tuto-projet/illus-projet-cree.png b/doc/tuto-projet/illus-projet-cree.png new file mode 100644 index 0000000..e31e52d Binary files /dev/null and b/doc/tuto-projet/illus-projet-cree.png differ diff --git a/doc/tuto-projet/illus-projet-vide.png.png b/doc/tuto-projet/illus-projet-vide.png.png new file mode 100644 index 0000000..efdab6e Binary files /dev/null and b/doc/tuto-projet/illus-projet-vide.png.png differ diff --git a/doc/tuto-projet/index.css b/doc/tuto-projet/index.css new file mode 100644 index 0000000..93288b7 --- /dev/null +++ b/doc/tuto-projet/index.css @@ -0,0 +1,10 @@ +@import 'https://cdn.jsdelivr.net/npm/water.css@2/out/water.css'; + +img { + max-width: 100%; + margin: 0 auto; +} + +figcaption { + font-style: italic; +} diff --git a/doc/tuto-projet/index.md b/doc/tuto-projet/index.md new file mode 100644 index 0000000..6e5779a --- /dev/null +++ b/doc/tuto-projet/index.md @@ -0,0 +1,142 @@ +--- +title: Tutoriel création de projet +date: 2024-09-02 +--- + +On va voir ici comment créer un projet avec l’application en partant d’un +exemple simple et réel. + +## Introduction + +On souhaite cartographier les croix des bords de chemin dans le Beaujolais. +Circulant régulièrement dans le coin, on a établi une liste d’emplacements et +la description d’un certain nombre de ces édifices qui ne sont probablement +pas tous mappés dans OSM. + +D’après le [wiki +OSM](https://wiki.openstreetmap.org/wiki/FR:Tag:historic%3Dwayside_cross) ce +genre de chose s’étiquette `historic=wayside_cross` ou `man_made=cross`. + +On recherche dans Overpass `historic=wayside_cross or man_made=cross around +Villefranche-sur-Saône` ce qui donne la requête suivante : + +```overpass +( + node["historic"="wayside_cross"](around:10000,45.9864749,4.726611); + node["man_made"="cross"](around:10000,45.9864749,4.726611); +); +``` + +On sait qu’il faudra tirer de notre description des monuments un cerain nombre +d’informations qui serviront à étiqueter les éléments à créer. Ici des nœuds. +Les étiquettes que l’on retient sont +[`inscription`](https://wiki.openstreetmap.org/wiki/FR:Key:inscription), +[`material`](https://wiki.openstreetmap.org/wiki/FR:Key:material) et +[`start_date`](https://wiki.openstreetmap.org/wiki/FR:Key:start_date). + +[Le XML OSM](https://wiki.openstreetmap.org/wiki/FR:OSM_XML) à envoyer à JOSM +devra donc ressembler à quelque-chose comme : + +```xml + + + + + + + + + +``` + +Dès lors on peut produire le fichier CSV des tâches à importer, dont voici l’intégralité : + +```csv +name,description,osm,geojson,status +à Blacé,"Croix de fer forgé ajourée, sur table et socle pierre massif. Le socle porte l'inscription: ""PATER AVE / 40 JOURS D'INDULGENCE / 1896"". ","","{""type"":""FeatureCollection"",""features"":[{""type"":""Feature"",""geometry"":{""coordinates"":[4.643540183466797,46.02815836904756],""type"":""Point""}}]}",todo +ã Rivolet,Grande croix de fer ajourée sur socle pierre. Une plaque métallique rivetée à la base de la croix porte la mention: « J. JURON / AN 1820 ». ,"","{""type"":""FeatureCollection"",""features"":[{""type"":""Feature"",""geometry"":{""coordinates"":[4.616699908153549,45.99655341186141],""type"": ""Point""}}}",todo +``` + +On a inclus le GeoJSON ici mais il ne servira pas à grand chose dans le mesure +où les donnmées seront déjà chargées avec la télécommande via le XML OSM. + +On ne met qu’un point par tâche ici pour l’exemple mais on pourrait très bien +imaginer en mettre plusieurs, tous dans un même carré ou dans les limites d’une +commune par exemple. + +## Création du projet + +Une fois connecté, ils est possible de créer un nouveau projet sur la page des +Projets. + +![Créer un projet](illus-nouveau-projet.png) + +On peut alors renseigner le formulaire avec les paramètres que l’on souhaite. + +![Formulaire projet](illus-form-projet.png) + +Champ | Valeur +-- | -- +Nom | Croix du Beaujolais +Description | Pour faciliter l’ajouter des croix de bords de chemin près de chez nous. +Hashtags | AdopteUneCommune +Source | survey +Imagerie | `osmfr` +Overpass | `(node["historic"="wayside_cross"](around:10000,45.9864749,4.726611);node["man_made"="cross"](around:10000,45.9864749,4.726611););` + +La **description** accepte le [Markdown](https://fr.wikipedia.org/wiki/Markdown), +On peut donc y mettre un peu ce que l’on veut, genre des liens, des tableaux, +des images, etc. + +Les **hashtags** sont des mots séparés par des espaces. Ça sert à construire le +commentaire suggéré pour le groupe de modification. Cf [le wiki +OSM](https://wiki.openstreetmap.org/wiki/FR:Bons_commentaires_de_groupe_de_modifications). + +Pour le moment le commentaire suggéré est composé du nom du projet, du nom de +la tâche et des hashtags fournis. + +La **source** sert également pour la suggestion lors de l’envoi des données dans +JSOM. Cf [le wiki OSM](https://wiki.openstreetmap.org/wiki/FR:Key:source). + +Ici on met `survey` comme source parce que l’on part de nos observations. + +L’**imagerie** est celle que l’on souhaite voir chargée dans JOSM via la +télécommande. + +Enfin le champ **Overpass** contient le bout de requête qui nous sert à +visualiser ce que l’on souhaite voir apparaître avec ces contributions. + +Les **étiquettes** de projet ne sont pas utilisées pour le moment mais permettront +à terme de les catégoriser. + +Il ne reste plus qu’à cliquer sur le bouton « Créer » pour créer le projet. + +![Projet créé](illus-projet-cree.png) + +On peut maintenant ajouter des tâches dans le projet. Pour commencer cliquons +sur « Voir le détail ». + +## Import des tâches + +On vient de créer le projet et il est vide. + +![Pas de tâche, pas de carte.](illus-projet-vide.png) + +Pour importer des tâches, il suffit d’utiliser l’outil « Importer des tâches » +et de charger le fichier CSV constitué plus tôt. + +![Importer des tâches](illus-importer-taches.png) + +Les tâches devraient apparaître sur la carte. + +![Les nouvelles tâches apparaissent](illus-nouvelles-taches.png) + +Notons que l’on peut cliquer sur l’outil « Requête Overpass » pour charger les données existantes dans OSM également sur la carte. + +Le zoom de la carte est réglé sur les tâches et pas sur les données Overpass. +Dans notre cas, pour voir la différence il faut un peu zommer en arrière car il +y a peu de tâches. + +![Dézoomer pour mieux voir les données existantes](illus-dezoom-overpass.png) + +Et voilà, prêt à contribuer collaborativement !