Comment créer sa première Framacarte ? (Tutos uMap 2/4)

Temps de lecture 6 min

image_pdfimage_print

Juste avant Noël, nous vous présentions Framacartes, un service de création de cartes personnalisées pour vos sites web, communautés, randos, chasses au trésor… Framacartes est basé sur le logiciel Umap, qui permet d’ajouter des points, tracés et polygones sur les fonds de cartes d’OpenStreetMap.

C’est alors qu’Antoine Riche, ingénieur informatique, Contributeur et Formateur OpenStreetmap, nous a contactés pour nous présenter sa série de tutoriels (libres, eux aussi) pour apprendre à maîtriser uMap (et donc Framacartes) à toute la famille Dupuis-Morizeau.

C’est avec son autorisation (et de chaleureux remerciements) que nous reproduirons sur le framablog les quatre premiers tutos (le niveau « débutant ») afin d’en faire profiter le plus grand nombre.

La semaine dernière nous nous sommes familiarisés avec uMap pour profiter pleinement d’une Framacarte

Cette semaine, voyons comment créer sa première Framacarte ;)

Je crée ma première carte uMap

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 https://framacarte.org et cliquez sur le bouton Créer une carte. Apparaît alors sur votre navigateur une carte qui se présente ainsi :

umap_edition

 

Nous retrouvons à gauche les boutons disponibles lors de la consultation d’une carte. 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 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 5 boutons permettant de configurer la carte

2. Nommer la carte

umap_parameters

umap_set_nameUne 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 Éditer les paramètres.

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.

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 en anglais est affiché en haut de la carte, comme celui ci-dessous.

umap_create_anonymous

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

umap_point Cliquez ensuite sur le bouton Ajouter un marqueur. Le curseur prend la forme d’un signe + et est accompagné d’un marqueur de couleur bleue. Déplacez le curseur sur le lieu que vous voulez marquer et cliquez avec le bouton gauche de la souris : le marqueur est déposé à cet endroit et un panneau apparaît à droite.

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

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

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 Je consulte une carte uMap.

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 tutoriel de la semaine prochaine nous permettra de créer une jolie carte.

Liens utiles :

Suivre Framasoft:

Réseau d'éducation populaire au Libre. Nous souhaitons faire le trait d'union entre le monde du Libre (logiciel, culturel, matériel, etc.) et le grand public par le biais d'une galaxie de projets à découvrir sur framasoft.org

3 Responses

  1. Damien Belvèze

    Bonjour,

    Je dois afficher tous les contributeurs de Form@doct de l’UBL sur une carte et j’ai déjà commencé à travailler sur un fonds carte openstreetmap avec Umap. J’ai commencé à faire un fichier tabulé avec les noms, prénom, fonctions dans Form@doct, n° de tél, mail/twittos, et coordonnées géographiques pour faire un import direct dans Umap. J’ai des problèmes avec la présentation des coordonnées géographiques qui ne sont pas formatées comme il faut apparemment. Je reviendrais vers vous à l’occasion pour avoir de l’aide avant le prochain séminaire Form@doct.

    Cordialement,

    Damien B

  2. David CHALON

    Bonjour,

    J’ai trouvé cette appli en cherchant de quoi faire un projet assez simple : un annuaire de personnes avec géolocalisation.
    Par contre j’ai principalement besoin d’une fonction : qu’un anonyme puisse soumettre une demande d’ajout d’un point, avec un modo pour valider/refuser.

    J’ai vu qu’il y a un mode consultation (lecture seule) et un mode full édition, mais y a-t-il cette méthode intermédiaire svp ?

    Pour info j’ai trouvé en meilleur pour le moment le site Zeemap qui permet un peu de faire ceci.
    Mais si j’ai un outils entièrement opensource, autant en faire la pub 🙂

    Merci d’avance.
    David CHALON