;
Mai
31
2013

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 !

tuto_osm-1

Lors de la première venue, vous devez choisir le service à synchroniser.

 

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".

tuto_osm-2

Choisissez le bon fond de carte pour avoir les bans communaux bien affichés.

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 !

tuto_osm-3

Si vous avez des doutes sur les limites communales, comparez 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).

tuto_osm-4

Sélectionnez le crayon en haut à droite pour commencer à bricoler.

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é !

tuto_osm-5

Ne vous inquiétez pas si vous débordez, tout est rattrapable !

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 !

tuto_osm-6

N'hésitez pas à zoomer au maximum pour être plus précis.

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 !

tuto_osm-7

Vous pourrez soigneusement corriger vos zones en cas de ratés pendant le tracé.

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 :

tuto_osm-8

Le diable est dans les détails... Ne négligez dont pas ces derniers !

Enfin, l'icône en-dessous du crayon vous permettra soit d'exporter votre carte via une <iframe>, soit de télécharger les données au format Geojson :

tuto_osm-9

Exportation ou importation, le choix est à vous.

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 🙂 !

13 Comments + Add Comment

  • OSM, ça s'écrit "OpenStreetMap". En un mot. Hein. Comme "Face Book" ou "Micro Soft", quoi.

    • Raphi

      Merci pour la vigilance Pieren. Bonne journée. Hein 😉

  • [...] Créez vos propres Geojson avec OpenStreetMap [...]

  • [...]   [...]

  • 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 ...

    • Raphi

      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é ?

  • […] fait quelques mois que je me convertis petit à petit à OSM, et j'ai récemment appris à importer assez facilement des zones, avec simplement des infos […]

  • […]   […]

  • 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 🙂

    • Raphi

      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 !

      • Merci bien de cette réponse rapide 🙂

  • 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

    • Raphi

      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

Leave a comment