Catégorie : Outils

Annonce de nouveaux outils, articles de découverte de leur utilisation

Publié le

Dessiner sur une carte : simple comme Gribrouillon !

Pas le temps de lire ? Gribrouillon.fr est l’outil simple pour gribouiller sur une carte web, essayez-le !

L’art du dessin et des cartes numériques

Certains d’entre vous se souviennent sans doute de l’époque glorieuse de Microsoft Paint. Pour les plus jeunes, Paint était un logiciel de dessin ultra simpliste, où chacun pouvait laisser s’exprimer sa créativité.

Microsoft Paint à l’heure de Windows XP

Avec sa vingtaine de couleurs et son outil pinceau, Paint n’avait rien à envier aux plus prestigieux outils de graphisme. Bien au contraire : sa simplicité d’usage permettait aux petits et grands de s’essayer à toutes formes d’art.

En parallèle, les cartes sur le web sont un autre type d’objet graphique commun. L’émergence d’outils comme uMap ou Google My Maps permettent de créer sa carte et d’y faire apparaître des marqueurs ou formes géométriques.

Carte uMap des Groupes locaux OpenStreetMap en France

Ces outils sont parfaits pour la création de cartes « propres » ou professionnelles, en tout cas de cartes qui ont vocation à être exposées. Mais pour revenir au domaine artistique, avant d’exposer un dessin ou une toile, il a été nécessaire de gribouiller, raturer, gommer… Souvent sur un support séparé comme du papier brouillon. Même si la conception d’une carte prendra chemin différent de celui emprunté pour la réalisation d’une œuvre d’art, il est pertinent de disposer d’un support pour gribouiller / raturer une carte à l’ère du numérique.

Une carte à gribouiller : pourquoi faire ?

Prenons le temps d’étudier quelques cas d’usages où le dessin libre par dessus une carte aurait tout son sens.

Pour s’organiser

Les personnes contribuant à OpenStreetMap le savent bien : organiser une cartopartie n’est pas chose aisée. Si OpenStreetMap ne vous est pas familier, il s’agit de l’équivalent de Wikipédia pour la géographie. Régulièrement, des bénévoles se réunissent pour compléter la carte d’une ville, d’un quartier : ce sont les « cartoparties« . Afin de fluidifier la contribution, le territoire est découpé en zones et les groupes se répartissent la tâche.

Cartopartie à Managua (Nicaragua)

Différents outils pour organiser existent : Tasks Manager, MapCraft, uMap… Mais tous nécessitent d’être coutumiers avec la manipulation de données géographiques. Et ne sont pas forcément prévus pour la prise de note sur le terrain. Ces prises de notes se font souvent sur la base de cartes imprimées et annotées à la main. Pourtant, pouvoir partager une carte numérique sur laquelle chacun peut se localiser et annoter aurait du sens.

Pour s’exprimer

Les cartes traditionnelles sont le reflet de l’aménagement du territoire, une spatialisation relativement objective des infrastructures. Le vécu n’a pas sa place sur ce type de cartes, et pourtant les êtres humains sont sensibles : nous percevons différemment les espaces selon notre vécu et nos habitudes. La cartographie sensible ou subjective a vocation à faire apparaître ces émotions spatialisées sur des cartes.

Carte sensible du Blosne (Rennes)

Je vous recommande ces quelques liens sur le sujet :

Ces cartes sont souvent réalisées sur papier ou à l’aide de matériaux variés, une version numérique pourrait être un support complémentaire durant la phase exploratoire.

Pour s’amuser

Au même titre qu’une photo, une vidéo ou une page blanche, la carte est un objet graphique laissant place au détournement et la personnalisation. Les nombreuses cartes parodiques liées à l’actualité ou le ressenti des habitants régions par régions tranche avec le sérieux habituel de la cartographie.

Parodie du redécoupage régional

Mettre à disposition un nouvel outil numérique de dessin sur une carte permettra plus facilement à tout un chacun de s’exprimer sur les sujets de son choix.

On peut imaginer un aspect ludique à un tel outil : mettre au défi ses amis de dessiner sur la carte le drapeau d’un pays à tour de rôle, une bonne mise à l’épreuve de ses connaissances en géographie !

La solution : Gribrouillon !

Vous l’aurez compris, l’outil Gribrouillon (gribrouillon.fr) permet de répondre à ces besoins. Gribrouillon = gribouillis + brouillon, le tout sur une carte web.

Mode navigation (à gauche) et mode dessin (à droite)

Le principe est simple : déplacez la carte sur la zone où vous souhaitez dessiner. Une fois la carte positionnée, cliquez sur le bouton Pinceau pour passer en mode dessin. Vous aurez alors à disposition les outils de dessin classiques. Libre à vous de dessiner pour vous organiser, vous amuser ou vous exprimer !

Partage de carte

L’avantage de Gribrouillon est qu’il permet le dessin à plusieurs simultanément : partagez le lien de votre gribouillis, et dessinez en parallèle sur une même carte. Il est également possible de changer le fond de carte par le biais du menu latéral. L’outil est disponible sur le web pour mobile et ordinateur de bureau.

Comme pour l’ensemble de mes projets, le code source est disponible sous licence libre. Vous êtes invités à y contribuer :

  • Partagez vos retours d’expériences et besoins
  • Participez à la traduction (actuellement traduit en français et anglais)
  • Impliquez-vous dans le développement de l’outil

Et n’hésitez pas à partager vos plus belles créations !

Publié le

Pic4Review : photos de rues et données ouvertes

Pic4Review est un éditeur facilitant la contribution à la carte collaborative OpenStreetMap. Il propose de renseigner des informations sur des objets géolocalisés à partir de photos de rues libres de droits. Lancé fin 2017, il a permis à des centaines de contributeurs d’améliorer la description de centaines de milliers d’objets à travers le monde. Le principe est simple : vous participez à des missions thématiques sur une zone donnée, et pour chaque objet les photos disponibles sont présentées. Cela vous permet de répondre facilement à une question posée.

Exemple de mission pour renseigner le type de marqueur signalant un gazoduc.

Au départ, l’outil se concentrait sur la mise à jour d’objets existants côté OpenStreetMap. La nouvelle version publiée le 2 avril 2019 permet désormais de créer de nouveaux points, et ainsi compléter la base OpenStreetMap.

Intégrer les détections automatiques d’objets

La collecte et mise à disposition de photos de rues n’est pas un sujet récent. Deux fournisseurs de photos ont cependant changé la donne : Mapillary et OpenStreetCam. Ces deux initiatives ont pour objectif de mettre à disposition des photos de rues du monde entier, sous licence libre. Au-delà des photos, les équipes travaillent à la détection et l’extraction automatique des objets visibles sur les photos. On pense en particulier aux panneaux routiers, mais cela concerne également marquages au sol, mobilier urbain, équipements techniques….

Détections automatiques de panneaux routiers (source : Mapillary)

Les localisations de ces objets sont intéressantes, mais comme ils sont détectés automatiquement, il peut y avoir quelques erreurs (objets confondus, pas d’objets…). Et par ailleurs, ces objets sont stockés dans des bases de données indépendantes. Pourtant, il serait plus intéressant de les rendre disponibles au sein de cette base commune qu’est OpenStreetMap.

Pour intégrer ces données tout en vérifiant leur pertinence, on s’appuie sur une validation humaine. Pic4Review facilite ce processus, et propose désormais de valider l’intégration des détections issues de Mapillary dans OpenStreetMap.

Intégration des détections de bornes incendies

Pour le contributeur c’est très simple : on se rend sur la page de la mission, et on visualise un premier objet. On vérifie sa présence sur les photos, sa bonne localisation à l’aide de la carte (on peut déplacer si besoin) et on valide l’intégration. Plutôt simple, non ?

Pour l’instant, une vingtaine de catégories d’objets sont disponibles : bornes incendies, poteaux électriques, boîtes aux lettres, panneaux routiers… Et d’autres seront ajoutées dans le futur.

Intégrer des données ouvertes (avec Osmose)

Osmose est un outil de la communauté OpenStreetMap permettant d’identifier de potentielles améliorations dans les données (nom mal écrit, rue isolée, description incohérente…). Il permet également la mise en relation de jeux de données ouvertes avec OpenStreetMap. Plusieurs types de données sont disponibles : points de recyclage, parkings à vélos, pharmacies, postes électriques… Les données manquantes côté OpenStreetMap sont rendues visibles sur une carte et proposées aux contributeurs.

Données ouvertes à intégrer sur différents sujets (il y a de quoi s’occuper !)

Sur le même principe que les détections automatiques, l’utilisation de photos pour vérifier et intégrer ces données a du sens. C’est pour cela que Pic4Review permet de facilement intégrer les données ouvertes listées par Osmose.

Mission d’intégration des postes électriques Enedis via Osmose et Pic4Review

Ici encore, la tâche est très simple pour le contributeur : on vérifie les photos, et on valide l’intégration si l’objet est visible. Rien de plus facile, cela rend possible l’ajout de dizaines d’objets très rapidement.

Lancez-vous !

Envie de lancer une mission sur votre zone de prédilection ? C’est simple : cliquez sur « Créer une mission » dans le bandeau d’en-tête de la page, choisissez « Créer à partir d’un modèle », choisissez le type de mission et la zone, et c’est parti !

Pour les contributeurs plus expérimentés, il est également possible de créer une mission complètement paramétrable. Créez votre mission « À partir de zéro », et vous accédez à l’outil complet pour définir une mission. Choisissez une source de données et une zone, ajoutez des détails sur les attendus de la mission, et validez ! Un peu plus long à mettre en place, mais vous avez le choix sur l’ensemble des configurations.

En résumé, Pic4Review facilite désormais l’ajout de données ouvertes structurées à OpenStreetMap. Les développements futurs auront pour objectif de faciliter davantage l’intégration de jeux de données ouverts, par exemple issus de portails open data de collectivités. À noter que l’outil étant libre, il peut être utilisé également dans des contextes d’enrichissement de bases de données privées au sein d’une entreprise / administration (contactez-moi pour en savoir plus).

Pour aller plus loin

Envie d’en savoir plus ? De contribuer au développement ? Voici quelques liens utiles :

Publié le

Listes structurées automatiques sur WordPress

Vous l’avez vu, ce site s’est offert un coup de jeune. L’occasion pour moi de tester les nouveautés de WordPress 5. Globalement l’interface est la même qu’avant, mis à part l’éditeur d’articles et pages qui s’est largement simplifié, et qui permet de facilement organiser le contenu.

Afin de faciliter la maintenance et mise à jour du site, je cherche à disposer de pages générées automatiquement à partir de contenus structurés. J’avais en tête un mécanisme qui lirait un fichier type JSON pour en générer une page propre et bien présentée. Et comme WordPress est bien pensé, ce mécanisme existe : les « Custom Content Types » (types de contenus personnalisés). L’idée est de gérer ses propres données à la manière des articles : une page de saisie standardisée, et un affichage automatique. Impeccable, comment ça marche ? C’est là que ça se complique !

Ces types personnalisés peuvent être gérés de deux façons : soit via du code (en modifiant les modèles PHP des pages), soit à l’aide d’extensions. Rappelez-vous, l’idée est d’avoir une maintenance simple, j’opte donc pour les extensions. Plusieurs extensions existent, certaines gratuites, d’autres payantes. Après quelques tests, c’est l’extension « Pods » qui a retenu mon attention. Elle permet de créer simplement des formulaires dans l’interface d’administration pour saisir ses données personnalisées.

Créer un type de données

Une fois que l’extension est installée, vous avez une nouvelle entrée dans le menu de l’interface d’administration. Vous pouvez notamment « Ajouter un nouveau pod ».

Écran d'ajout d'un pod

Ici, on va donc « Créer un nouveau », pour initier notre nouveau formulaire de saisie. Quelques informations sont ensuite demandées.

Le type de contenu est à choisir avec prudence : il conditionne la manière dont vous pourrez utiliser ce formatage par la suite. Dans la logique d’une liste structurée, on opte donc pour « Type de contenu personnalisé (semblable aux articles) ». On renseigne ensuite un nom au singulier et pluriel, qui servira pour les différents affichages.

On arrive ensuite à la configuration des champs. C’est ici que l’on définit quelles informations on souhaite pouvoir rentrer pour constituer les données.

On peut donc créer un premier champ « Intitulé », qui contiendra du texte. Veillez bien à noter la valeur du champ « Nom », qui nous servira pour la page d’affichage de ces données.

Dans cette même logique, on peut donc créer autant de champs que l’on souhaite, de types variés (adresses web, numéro de téléphone, texte riche…). Une fois vos champs créés, pensez bien à cliquer sur « Enregistrer le pod » à gauche.

Créer des données

Maintenant que le formulaire est en place, on peut commencer à constituer son jeu de données. Votre type personnalisé apparaît désormais dans le menu de gauche de l’interface d’administration de WordPress. Vous pouvez commencer à créer une nouvelle entrée.

La saisie se fait sur le mode classique d’un formulaire, c’est l’étape la plus simple mais potentiellement la plus fastidieuse. Une fois les champs remplis, cliquez sur « Publier ».

Il ne reste plus qu’à afficher ces données sous forme de liste.

Créer la page d’affichage

Pour afficher notre liste d’éléments, il faut créer soi-même une nouvelle page classique. Celle-ci peut être construite comme vous le souhaitez. Vous devez juste placer dans celle-ci un bloc de type « Code court ». C’est celui-ci qui va contenir les données à afficher. Dans ce bloc, vous allez entrer un code HTML et des codes courts qui vont permettre de structurer vos données. Un exemple :

[pods name="prix" shortcodes="1"]
 <div class="award">
   <h3>{@nom}</h3>
   <p>{@place} - {@date_evt} - {@organisateur}</p>
   <img src="{@logo}">
   <p>{@summary}</p>
 </div>
[/pods]

Quelques explications : le bloc pods va s’exécuter autant de fois que vous aurez d’objets saisis grâce à votre formulaire. Au sein de ce bloc, on peut utiliser les informations saisies dans le formulaire grâce à la syntaxe {@mavariable} (les noms que vous avez noté tout à l’heure). Le reste est du code HTML classique.

Le bloc pods doit être configuré en changeant principalement la valeur de « name », qui prendra le nom de votre pod. L’ensemble des configurations possibles est recensé sur la documentation officielle.

Il ne vous reste plus qu’à publier cette page, et voilà ! Vous avez une page qui est générée automatiquement à partir de vos saisies.

Conclusion

Vous avez découvert comment facilement créer des listes d’informations structurées sous WordPress. J’espère que ce tutoriel vous fera gagner du temps, et n’hésitez pas à me contacter si vous avez des questions.