Créez vos propres Geojson avec OpenStreetMap
Vous n'aimez définitivement pas "Evil Google", même pour exporter des cartes assez facilement ? Qu'à cela ne tienne, il existe aussi des solution open source aussi efficaces, notamment avec Umap ! Petit tutoriel d'illustration.
Avant toute chose, à tout trouveur tout honneur, je tiens à citer le Nantais Denis Vannier comme trouveur (en tout cas pour moi) d'un précieux outil open source pour faire ses propres cartes comme je l'ai montré il y a quelques semaines avec Google Maps.
J'espérais ardemment trouvé un éditeur potable avec ce formidable outil réexploitable à l'envie, c'est maintenant chose faite !
Présentation de Umap
Pour faire vite et sans bavure, Umap, c'est un peu l'éditeur de cartes de Google Maps appliqué à l'excellent OpenStreetMap. Les avantages de cet outil sont multiples :
- la licence open source. Vous créez une carte ? Elle est réutilisable à loisir, point barre
- les fonds de carte très variés
- la facilité d'utilisation, au moins aussi intuitive que pour le tuto précédent
Pour utiliser Umap, rien de plus simple, il suffit de le synchroniser avec un service proposé. Les plus bidouilleurs choisiront certainement Github, personnellement j'ai créé un compte OSM pour l'occasion ! L'important est de garder en tête que tout ça est open source, que du bon en somme !
Une fois validé le mail de confirmation qui vous est envoyé, vous pouvez commencer. Reprenons la même démarche qu'avec Google Maps.
Des modèles de cartes au moins aussi précis
Les plus éminents blogueurs vous le diront, Open Street Maps est très, voire bien plus précis par rapport aux cartes Google Maps. L'avantage de Umap est de fournir un éditeur au moins aussi intuitif que celui de Google Maps. Reprenons le précédent exemple des quartiers de Mulhouse, avec le même modèle de quartier trouvé sur Wikipedia.
Commençons par cliquer sur "Créer une nouvelle carte" et par choisir un fond de carte (en cliquant sur les calques qui se superposent), comme sur l'image suivante. Si vous êtes intéressé, comme dans notre cas, par les limites communales, autant prendre le modèle "OSM francophone".
Nous avons vaguement une idée d'où se trouve Mulhouse. Pour les moins Alsaciens d'entre vous, cela se trouve très au sud de la plus petite région de France. Et pour être sûr d'avoir bien le ban communal dans le viseur, rien de tel que de comparer avec Google Maps !
Ca ressemble assez bien pour qu'on puisse confirmer la précision de OSM, il ne reste plus maintenant qu'à tracer nos quartiers.
Un éditeur de polygones semblable à celui de Google Maps
Entrons dans le vif du sujet en cliquant sur le crayon en haut à droite des options (signe commun de l'éditeur) et choisissons l'option de dessin polygonal (deuxième en partant de la gauche).
Tout est chargé, il ne reste plus, comme pour le tutoriel sur Google Maps, qu'à choisir un point de la frontière communale et à cliquer sur chaque point de la forme que nous voulons créer. C'est aussi facile que sur Google Maps, et en plus les polygones s'affichent plus joliment. Et si vous vous loupez, rien de grave, vous pourrez retoucher ça une fois le polygone fermé !
Pour être plus précis, sachez que même en zoomant au maximum, votre ban communal reste toujours affiché, contrairement à Google Maps. De quoi gagner un peu de temps !
Une fois la forme fermée, vous pouvez la remodeler en double cliquant dessus, et en cliquant glissant les points directeurs, comme dans Google Maps. Cerise sur le gâteau, il existe aussi, le point grisé pour ajouter un nouveau point entre deux sommets.
Attention tout de même : contrairement à Google Maps, l'évolution du tracé n'est pas enregistrée dynamiquement, et il est très facile de perdre un boulot sur lequel on a passé du temps. N'oubliez pas de cliquer sur "Validez" de temps à autre !
Le diable est dans les détails
Oui, je trouve que cette maxime se prête bien à la pratique du data, donc autant la répéter ! Outre les points directeurs, un double clic sur votre zone (après avoir préalablement cliqué sur l'icône de crayon) permettra d'un peu plus personnaliser votre polygone, notamment par la couleur :
Enfin, l'icône en-dessous du crayon vous permettra soit d'exporter votre carte via une
Si le Geojson ne vous convient pas, sachez que des convertisseurs existent ! Et si vous ne savez pas quoi en faire, d'autres librairies open source comme Leaflet.js vous permettront de continuer votre projet.
PS : Comme pour le tuto précédent, je suis ouvert à toutes vos suggestions 🙂 !
Comments
Comment by Pieren on 2013-05-31 14:23:10 +0200
OSM, ça s'écrit "OpenStreetMap". En un mot. Hein. Comme "Face Book" ou "Micro Soft", quoi.
Comment by Raphi on 2013-05-31 14:30:41 +0200
Merci pour la vigilance Pieren. Bonne journée. Hein 😉
Comment by Titanet on 2013-06-17 23:47:43 +0200
Merci, c'est très intéressant. J'ai créé ma carte perso sur le site uMap, puis j'ai cherché une solution pour l'intégrer dans une page sur mon site WordPress, mais j'ai pas trouvé de solution satisfaisante. Si tu as une piste pour m'aiguiller ...
Comment by Raphi on 2013-06-21 09:18:36 +0200
Bonjour Titanet, et pardon pour le petit délai avec lequel je réponds. Pour te dire vrai, je suis en train de bricoler une carte très complexe, donc par encore exportable. Mais il me semble, en parcourant la bête, avoir vu un bouton d'embed avec option d'exportation. L'as-tu testé ?
Comment by Fil on 2014-01-09 11:21:39 +0100
Bonjour,
j'ai commencé à utiliser umap avec OSM, et je me demandais si des différences fonctionnelles existaient selon le compte associé: github, OSM, etc. (j'imagine par exemple que github enregistre l'historique des modification là où OSM ne garde sans doute que la version actuelle).
Par ailleurs, j'ai constaté que parfois, en cliquant sur un marqueur, umap m'ajoute plusieurs dizaines de marqueurs au même endroit, dont la suppression s'avère laborieuse. Est-ce une fonctionnalité ou un bogue, et n'y a-t-il pas une manière de supprimer plusieurs marqueurs d'un coup, ou d'annuler les dernières modifications (là encore, j'imagine que le cas est sans doute plus simple à gérer avec github) ?
Merci et bonne année 🙂
Comment by Raphi on 2014-01-09 13:30:33 +0100
Cher Fil, merci pour votre comm' et bonne année à vous également !
Je vais vous répondre dans l'ordre. Les différences fonctionnelles que vous suggérez sont plausibles, mais je ne peux pas vous les confirmer car je synchronise Umap avec un compte OSM, et non github.
Pour le bug que vous signalez, je crains d'être encore une fois d'une faible aide. Je consacre l'essentiel du temps disponible à la carto pour me perfectionner sur Qgis, délaissant beaucoup Umap et Google Maps Engine.
En revanche, les responsables d'Umap sont friands de feedbacks, et vous pouvez leur signaler ce bug à l'adresse suivante : yb [at] fluv.io . Je suis certain qu'ils vous répondront.
Au plaisir de vous lire !
Comment by Fil on 2014-01-09 16:45:48 +0100
Merci bien de cette réponse rapide 🙂
Comment by zpartakov on 2014-03-31 17:57:36 +0200
merci pour ce tuto
j'ai pas mal cherché mais pas trouvé de réponse à la question suivante:
est-il possible de désactiver l'édition anonyme d'une carte créée avec http://umap.openstreetmap.fr?
si je met ma carte dans un iframe sur un site, n'importe qui peut l'éditer et j'aimerais réserver cette fonctionnalité à des éditeurs reconnus
merci d'avance
Comment by Raphi on 2014-04-01 13:20:05 +0200
Salut zpartakov ! Malheureusement, vous me posez une colle !
Le mieux est peut-être de demander directement à un développeur de Umap. Voici un mail : ybon [at] openstreetmap.fr
Comment by Jean-Luc on 2019-06-23 09:20:02 +0200
Bonjour
Je suis surpris de voir un G+ en haut de la page à droite car ...
Sinon c'est super de faire connaître Umap.
De quand date l'article ? La comparaison (en qualité et praticité) est-elle toujours d'actualité ? C'est une question que je me pose quand je présente Umap ou OSM à mes élèves. Je sais que coté données persos, y a pas photo.
Merci
JL