Comment modifier et personnaliser sa Framacarte ? (Tutos uMap 4/4)

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.

Nous avons commencé par nous familiariser avec uMap pour profiter pleinement d’une Framacarte

Puis, nous avons vu comment créer sa première Framacarte

Ensuite, nous avons créé un compte afin de faire de bien jolies cartes et de ne pas les perdre !

Cette semaine et pour finir cette série de tutoriels, apprenons comment personnaliser ses Framacartes.

Je modifie et personnalise ma carte

Ce que nous allons apprendre

  • Gérer son catalogue de cartes
  • Choisir un fond de carte
  • Sélectionner les options d’interface

Procédons par étapes

1. Retrouver une carte

Vous souhaitez modifier une carte pour l’améliorer ou la mettre à jour. Si vous avez redémarré votre navigateur et à fortiori votre ordinateur, la première chose à faire est de retrouver la carte ! Si vous avez créé cette carte avec votre compte comme nous l’avons vu dans le tutoriel J’utilise un compte et crée une belle carte), afficher une de vos cartes se fait en trois opérations simples :

  1. connectez-vous à votre compte umap
  2. affichez votre catalogue de cartes
  3. cliquez sur le nom de la carte, affiché sous l’aperçu de la carte

umap_edit2La carte s’affiche alors en mode consultation. Cliquez sur le crayon en haut à droite de la carte pour passer en mode édition : vous pouvez dès lors modifier la carte. N’oubliez pas de sauvegarder la carte une fois les modifications terminées.

Il peut être fastidieux de passer du mode édition au mode consultation et vice-versa de façon répétée. Une astuce consiste à utiliser pour la même carte deux onglets ou deux navigateurs, l’un en mode édition l’autre en mode consultation. Vous devez tout de même enregistrer la carte dans l’onglet en mode édition avant de l’actualiser (par exemple avec la touche F5) dans l’onglet en mode consultation.

umap_homeVous pouvez retourner à votre catalogue de cartes à tout moment en cliquant sur le pictogramme Retourner à l'accueil dans le menu du bouton Plus à gauche de la carte.

2. Changer le fond de carte

Nous avons vu dans le tutoriel Je consulte une carte uMap que plusieurs fonds de carte sont disponibles dans umap. Lorsque vous éditez une carte vous pouvez choisir le fond de carte qui sera utilisé à l’affichage de la carte.

umap_layersCliquez sur le pictogramme Changer le fond de carte : un panneau à droite montre une vingtaine de fonds de cartes. Il vous suffit de cliquer sur l’un d’eux : faites votre choix et n’oubliez pas d’enregistrer la modification.

Le choix du fond de carte est une affaire de goût. Le contexte de la carte peut vous aider à en choisir un plutôt qu’un autre, par exemple :

  • les fonds Outdoors, Landscape ou OpenTopoMap montrent le relief : judicieux pour une carte de randonnée
  • OpenCycleMap montre les grands itinéraires cyclistes, comme les EuroVélo (Côte Atlantique, Loire à Vélo…)
  • Positron, Toner et OSM-Monochrome sont en noir et blanc : vos marqueurs, lignes et polygones seront plus visibles
  • le style HOTOSM, créé par le groupe humanitaire d’OpenStreetMap, permet d’aller jusqu’à un niveau de zoom élevé (niveau 20) : intéressant si l’étendue de votre carte couvre un quartier ou votre jardin

Tous les fonds de carte utilisés par umap, à l’exception des images aériennes de l’IGN, sont réalisées à partir des données OpenStreetMap. Ils sont produits par des associations, des entreprises ou des bénévoles qui les mettent gracieusement à disposition.

Remarquez le texte affiché en bas à droite de la carte : il crédite les auteurs du fond de carte, par exemple Map tiles by Stamen Design - Map Data © OpenStreetMap contributors.

3. Choisir les options d’interface

Vous pouvez configurer les éléments de la carte mis à disposition des utilisateurs qui consulteront votre carte. Vous pouvez par exemple ajouter une mini-carte de situation ou une barre de légende.

umap_parametersPour cela, ouvrez dans le menu Éditer les paramètres l’onglet Options d’interfaces. Vous pouvez activer ou désactiver une dizaine d’options dont voici la signification.

options_interface

Quelques remarques :

  • si vous cachez le bouton Plus, les utilisateurs de la carte ne pourrant ni la partager ni changer le fond de carte
  • si vous cachez les boutons de zoom et désactivez le zoom avec la molette de la souris, les utilisateurs ne pourront ni zoomer ni dézoomer … sauf à découvrir le menu accessible avec un clic droit sur la carte.
  • les boutons de navigation en bas des popups permettent de faire défiler les éléments de la carte

Lorsque la mini-carte de situation est affichée, l’opération Changer le fond de carte modifie le fond de celle-ci. Vous devez désactiver la mini-carte pour changer le fond de la carte principale.

umap_shareNotez que ces options – et quelques autres – sont également disponibles en Options d’export de l’iframe du menu Exporter et partager carte, où elles permettent de contrôler les mêmes options d’interface lorsque la carte est intégrée dans une page Web.

4. Copier ou supprimer une carte

Tout en bas des Propriétés de la cartes, l’onglet Options avancées propose deux opérations peu utilisées mais qu’il est bon de connaître :

  • Supprimer supprime la carte du serveur umap, ainsi que les données qui y sont associées !
  • Cloner cette carte effectue une copie de la carte et de ses données. La nouvelle carte est ajoutée à votre catalogue.

Dans les deux cas un message vous demande de confirmer l’opération.

Faisons le point

Ce tutoriel nous mène à la fin du niveau débutant. Vous savez créer, modifier et personnaliser une carte. Vous savez styliser vos marqueurs, lignes et polygones. Enfin vous savez gérer votre catalogue de cartes.

Une fois ces opérations maîtrisées, les tutoriels de niveau intermédiaire vous apprendront à structurer vos cartes avec des calques et enrichir le contenu de vos popups. Vous découvrirez également comment coproduire une carte et créer un diaporama géolocalisé.

Ces tutoriels, en cours de rédaction par Antoine Riche, ne seront pas reproduits sur le Framablog, mais il seront disponibles sur le wiki de Cartocité.

L’équipe du Framablog tient encore à chaleureusement remercier Antoine pour son travail sur ces tutos et sa sympathie 😉

Liens utiles :




Comment créer une belle Framacarte avec un compte ? (Tutos uMap 3/4)

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.

Nous avons commencé par nous familiariser avec uMap pour profiter pleinement d’une Framacarte

Puis, nous avons vu comment créer sa première Framacarte

Cette semaine, créons un compte afin de faire de bien jolies cartes et de ne pas les perdre !

J’utilise un compte et crée une belle carte

Ce que nous allons apprendre

  • Utiliser un compte pour retrouver ses cartes
  • Changer la forme, la couleur et le pictogramme d’un marqueur
  • Créer et modifier une ligne ou un polygone

Procédons par étapes

Nous avons appris dans le tutoriel précédent comment créer une carte anonyme contenant un marqueur. Nous allons à présent créer une carte plus complète : la carte de nos vacances au Camping de la plage Goulien sur la Presqu’île de Crozon en Bretagne.

Au lieu de créer une carte anonyme, nous allons utiliser un compte pour créer cette carte.

1. Utiliser un compte

uMap permet d’associer ses cartes à un compte. Cela présente deux avantages importants par rapport à la création de cartes anonymes :

  • les cartes créées avec un compte constituent un catalogue permettant d’accéder facilement à ses cartes
  • on peut modifier chaque carte du catalogue sans avoir besoin de conserver un lien d’édition

Le logiciel umap ne gère pas directement de comptes utilisateurs : la gestion des comptes dépend de la configuration du logiciel. Sur https://framacarte.org, nous vous proposons d’utiliser un compte OpenStreetMap. Si vous n’avez pas de compte, c’est le moment de vous inscrire sur le site www.openstreetmap.org : cliquez Créer un compte dans le coin supérieur droit et suivez les instructions – une adresse mail vous sera demandée (plus d’infos).

framacarte connexion

Cliquez sur Connexion / Créer un compte puis sur le pictogramme correspondant au compte que vous souhaitez utiliser. Apparaît alors la page de connexion du site : saisissez le nom d’utilisateur et le mot de passe. La page suivante vous demande d’autoriser l’application uMap à utiliser ce compte : accordez cet accès. Vous retrouvez alors la page d’accueil de uMap, sur laquelle le lien de connexion a laissé la place à un lien Mes cartes vous permettant d’accéder à l’ensemble des cartes créées avec ce compte.

framacarte compte 3

Notez l’URL de la barre d’adresse quand vous consultez votre catalogue de cartes : celle-ci contient le nom de votre compte – par exemple https://framacarte.org/fr/user/PouhiouNoenaute/. Vous pouvez l’utiliser pour accéder à votre catalogue de cartes, même sans être connecté à votre compte : vous pouvez diffuser cette URL, les récipiendaires ne pourront pas modifier vos cartes.

Toutes les cartes que vous créez en étant connecté à votre compte sont ajoutées à votre catalogue.

2. Créer un joli marqueur

Commençons par créer une carte : donnons-lui un nom, définissons une emprise et ajoutons un marqueur à l’emplacement du camping. Nous avons vu dans le tutoriel précédent comment effectuer ces opérations.

umap_marqueur_props

Ce gros marqueur bleu n’est pas très explicite pour figurer un camping. Remédions à cela. Dans le panneau latéral visible lorsqu’un marqueur est sélectionné, le menu Propriétés avancées permet de modifier l’apparence du marqueur :

  • Couleur : cliquer sur Hériter permet de choisir une couleur.
  • Forme de l’icône : le choix Par défaut correspond au marqueur actuel, les autres choix sont Cercle, Goutte et Épingle.
  • Symbole pour le marqueur : cliquer sur Ajouter un symbole pour choisir parmi une centaine de pictogrammes. Notez que le symbole n’est affiché que pour les formes d’icônes Par défaut et Goutte.
  • Étiquette : choisir Oui permet d’afficher en permanence le nom associé au marqueur

Voici le marqueur obtenu avec les propriétés ci-contre :

umap_camping

Modifier un marqueur

Pour modifier un marqueur de la carte, deux possibilités s’offrent à vous :

  • un clic sur le marqueur affiche le panneau qui vous permet de modifier son nom et sa description
  • un glisser-déposer vous permet de déplacer le marqueur sur la carte

3. Créer une ligne

Le premier jour de vacances nous allons en kayak de mer jusqu’à la Pointe de Dinan à l’ouest de la plage de Goulien. Traçons l’itinéraire suivi.

umap_lineLe bouton Dessiner une ligne permet de tracer, point par point, une ligne constiutée de plusieurs segments. Cliquez à nouveau sur le dernier point tracé pour terminer la ligne : apparaît alors à droite un panneau permettant de donner un nom et une description à la ligne, comme pour les marqueurs.

Modifier une ligne

A tout moment vous pouvez sélectionner une ligne en double-cliquant dessus. Vous pouvez alors éditer ses propriétés dans le panneau latéral, ou modifier son tracé sur la carte :

  • supprimer un point de la ligne, matérialisé par un carré blanc, en cliquant dessus
  • déplacer un point par un glisser-déposer
  • insérer un point en cliquant sur un carré gris se trouvant au milieu de chaque segment
  • allonger la ligne avec un Ctrl-Clic lorsque le curseur est placé sur le premier ou dernier point
  • couper la ligne en deux : Clic droit sur un point puis choisir l’option Scinder la ligne

umap_ligne

Propriétés d’une ligne

umap_ligne_props
Les propriétés avancées d’une ligne permettent de définir sa couleur et d’autres paramètres définissant son style :

  • l’épaisseur est définie en nombre de pixels, sa valeur par défaut est 3 : saisir une valeur plus grande pour un trait plus large (qui sera plus facile à sélectionner).
  • l’opacité est un nombre entre 0 (transparent) et 1 (opaque), sa valeur par défaut est 0.5. Plus le trait est épais plus il peut être transparent.
  • la simplification du tracé définit la précision du tracé en nombre de pixels : le tracé s’adaptera au niveau de zoom. Il est en général inutile de modifier cette valeur pour un tracé réalisé à la main.
  • les pointillés sont définis par une série de chiffres séparés par des virgules : nombre de pixels affichés, nombre de pixels cachés, etc. L’épaisseur du trait doit être prise en compte : plus les traits sont épais plus les intervalles doivent être grands.

Voici le style de trait obtenu avec les propriétés ci-contre :

umap_ligne_tirets

4. Créer un polygone

Le second jour de vacances nous louons un dériveur et naviguons dans la zone définie par le club nautique. Ajoutons cette zone à la carte.

umap_polygonLe bouton Dessiner un polygone permet de tracer le périmètre d’un polygone point par point, et de le terminer en cliquant à nouveau sur le dernier point comme pour le tracé d’une ligne. Une différence toutefois : dès le troisième point l’intérieur du polygone est coloré.

Propriétés d’un polygone

La liste des propriétés d’un polygone est assez longue. On y retrouve les mêmes propriétés que pour les lignes (couleur, opacité, etc.) : celles-ci s’appliquent au périmètre du polygone. Plus bas nous trouvons des propriétés spécifiques aux polygones :

  • les options trait et remplissage permettent de ne pas afficher le périmètre ou l’intérieur du polygone : si aucun de ces deux éléments est affiché le polygone est invisible.
  • la couleur du remplissage est par défaut celle du trait, mais peut être modifiée.
  • l’opacité du remplissage varie de 0 à 1, elle peut être très légère pour un polygone.

Deux autres options propres aux polygones sont disponibles :

  • lien externe : spécifier une URL aura pour effet d’ouvrir le page Web correspondante lorsque l’utilisateur clique sur le polygone.
  • Cliquable : choisir la valeur non ne permettra pas à l’utilisateur de sélectionner le polygone, donc de voir son nom et sa description dans une popup. Cela peut être utile pour définir la zone d’intérêt de la carte, qui ne porte pas elle-même d’information utile.

Un polygone non-cliquable ne peut plus être sélectionné sur la carte même en mode édition. Il faut pour cela passer par l’opération Visualiser les données disponible dans le sélecteur de calque, puis éditer l’élément correspondant dans la liste des données.

Faisons le point

Notre deuxième carte est déjà plus intéressante que la première, et en plus nous savons comment la retrouver facilement. Nous verrons dans le prochain et dernier tuto comment personnaliser notre carte.

Liens utiles :




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

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 :




Comment consulter une Framacarte ? (Tutos uMap 1/4)

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.

Cette semaine, on apprend tout simplement à se familiariser avec uMap et à profiter pleinement d’une Framacarte !

Je consulte une carte uMap

Ce que nous allons apprendre

  • Manipuler une carte uMap
  • Partager une carte uMap
  • Connaître les principales fonctionnalités de uMap

Procédons par étapes

1. Manipuler la carte

Vous avez reçu par mail un lien vers une carte umap. Voici les principaux éléments de la carte, et les opérations disponibles pour la manipuler. La carte umap représentée ci-dessous est disponible ici.

utiliser_une_framacarte

À droite de la carte et selon le choix de son auteur peut être affiché un des deux panneaux suivants :

  • Légende : le titre de la carte, une description éventuelle, et la liste des calques
  • Visualiser les données : l’ensemble des éléments de la carte, répartis par calques (voir plus bas)

Le panneau Légende peut être affiché en cliquant sur le mot “Légende”, toujours visible en bas à droite de la carte.

Comme pour la plupart des cartes interactives vous pouvez :

  • déplacer la carte par un glisser-déposer
  • effectuer zooms avant et arrière avec les boutons + et -, ou avec la molette de la souris
  • sélectionner un élément de la carte par un clic de la souris : apparaît alors une fenêtre popup affichant une description de l’élément. Celle-ci peut inclure du texte, une image, un lien vers un site Web. Dans notre exemple la description de chaque cinéma contient une image qui est un lien sur le site Web du cinéma.

Remarque : les boutons en haut à gauche de la carte, ainsi que la barre de légende, peuvent ne pas être disponibles si l’auteur de la carte a choisi de les cacher.

Voyons maintenant quelques fonctionnalités propres à umap.

2. Le sélecteur de calques

Les éléments d’une carte umap peuvent être répartis dans plusieurs calques, ou couches. Cela permet de structurer une carte, pour qu’elle soit plus claire et plus facile à maintenir. L’utilisateur peut choisir d’afficher ou cacher chaque calque individuellement.

umap_calquesLe sélecteur de calques est l’icône visible en haut à gauche de la carte sous les boutons de zoom. Lorsque vous positionnez la souris sur ce bouton, la liste des calques apparaît, vous pouvez alors afficher ou cacher chaque calque, ou encore centrer la carte sur le contenu d’un calque.
umap_selecteur_calquesDans cet exemple le calque “Stations Bicloo” est caché : cliquer sur l’oeil de ce calque permet de l’afficher.

La liste des calques, avec éventuellement un descriptif de chaque calque, est aussi visible dans la légende de la carte.

3. Le bouton Plus

umap_plusSous le sélecteur de carte est visible un bouton portant le texte “Plus”. Un clic sur ce bouton fait apparaître une série de boutons.

 

umap_home permet de retourner à la page d’accueil de umap.
umap_geoloc permet de vous géolocaliser1), c’est-à-dire centrer la carte sur votre position actuelle.
umap_search permet de chercher une localité et de centrer la carte dessus : saisissez le nom d’une commune et tapez sur Entrée.
umap_share permet de partager la carte ou d’en exporter les données. Un panneau à droite de la carte est affiché, il est expliqué ci-dessous.
umap_layers affiche à droite plusieurs fonds de carte : cliquer sur l’un d’eux change le fond de la carte.
 umap_edit est utile pour améliorer la carte OpenStreetMap – ce qui sort de l’objet de ce tutoriel.
 umap_measure est un outil de mesure. Activer cet outil a deux effets : d’une part il affiche la longueur des éléments linéaires de la carte et l’aire des éléments surfaciques ; d’autre part il vous permet de tracer sur la carte une ligne dont la longueur est affichée. Cliquez à nouveau sur le bouton pour désactiver cet outil.

Partager la carte

Le panneau de partage de la carte offre trois possibilités. Votre choix dépend de la manière dont vous souhaitez partager la carte :

  • URL courte permet de copier une URL abrégée – équivalente à l’URL de la carte – que vous pouvez par exemple envoyer dans un mail.
  • Embarquer la carte en iframe permet d’inclure la carte dans une page Web : il suffit de copier le code HTML et de l’insérer dans celui de votre page Web. Plusieurs options sont disponibles dans le menu Options d’export de l’iframe : taille de la carte, choix des boutons inclus dans la carte, etc. Activez ou désactivez ces options avant de copier le code HTML.
  • Télécharger les données permet d’obtenir les données visibles sur la carte, dans différents formats. Cela peut vous permettre d’utiliser ces données avec un autre outil.

 

umap_donnees4. Visualiser les données

La liste des éléments de la carte peut être affichée avec un clic sur Visualiser les données, accessible depuis le sélecteur de calques, la barre de légende, ou encore en haut du panneau Légende.

Le panneau alors visible à droite montre l’ensemble des éléments de la carte, organisés par calques. La loupe à gauche de chaque élément permet d’afficher sur la carte la popup décrivant cet élément. Le texte de saisie au-dessus de la liste permet de rechercher un élément, en ne montrant que ceux dont le nom contient le texte saisi.


Faisons le point

Ce premier tutoriel nous a permis de découvrir les principales fonctionnalités d’une carte uMap. La semaine prochaine nous apprendrons à créer une telle carte.

 

Notes :

1) La géolocalisation exige de demander l’autorisation de l’utilisateur, votre navigateur Web peut donc vous demander d’accepter ou activer la géolocalisation

Liens utiles :




Framacarte, pour libérer vos maps de Google !

Les barbu-e-s de la communauté le savent déjà : l’alternative Libre à GoogleMaps, c’est OpenStreetMaps (OSM pour les intimes). En un peu plus de dix ans, plus d’un million de personnes ont participé à ce projet de cartographie du monde librement utilisable et accessible

Mais comment faire pour que la famille Dupuis-Morizeau s’empare de ce magnifique outil offert par la communauté et se dégooglise un grand coup ? Notre réponse : Framacarte.

Vous offrir le monde au pied du sapin.

Avoir une carte en ligne, c’est très pratique pour tracer sa route d’un point A à un point B. C’est très exactement ce que vous propose Framacarte : placez votre point A, votre point B, votre tracé… et le tour est joué ! Vous n’avez qu’à cliquer sur « plus » puis sur l’icône « partager » pour avoir l’adresse web à partager à vos ami-e-s ou le code d’intégration afin de placer cette carte sur votre site web.

Balade du Jardin Japonais de Toulouse au fief du GUL Toulibre ;)
Balade du jardin japonais de Toulouse au fief du GUL Toulibre ;)

Framacarte ne s’arrête pas là. Vous pouvez bien entendu placer des étapes entre votre point A et votre point B… jusqu’à dessiner tout l’alphabet si cela vous chante (n’en déplaise à google, ce mot ne leur appartient pas :p).

Framacarte vous permet aussi de colorier des zones, changer les pictogrammes de vos épingles, utiliser plusieurs calques, changer les fonds de cartes (plutôt ville ou plutôt nature ?) importer ou exporter vos données… Bref, de créer des cartes vraiment personnalisées.

Ne réinventons pas la Frama-roue

Framacarte s’appuie sur deux projets Libres : les fonds de cartes sont ceux d’OpenStreetMap, tandis que l’outil d’édition et de partage des cartes n’est autre que le projet Umap. Oui, nous hébergeons tout simplement un clone de ce projet Libre déjà connu des barbu-e-s. Il faut dire que Framacarte n’était pas, à l’origine, dans nos projets de Dégooglisations.

C’est Yohan Boniface, contributeur de OpenStreetMap France et développeur de Umap, qui nous a contacté pour mettre en place cette Frama-version de Umap. L’occasion pour nous de lui poser 3 questions :

Question 1 : Bonjour Yohan, tout d’abord, est-ce que tu peux nous présenter Umap, ses origines, et comment il est développé ?

Je bossais dans un journal à l’époque, et j’étais attristé de voir qu’il n’existait aucun outil libre permettant à un journaliste de faire une simple carte pour afficher des données. Il fallait ou bien l’aide d’un développeur ou bien utiliser des services privatisateurs comme GoogleMap©.

uMap est bâti sur Django (un framework python), et j’ai cherché à le rendre modulaire : le frontend et le backend sont deux projets séparés, ce qui a permis à d’autres développeurs d’utiliser la même interface que uMap mais sur leur propre back-end.

À l’exception d’une demande financée par Ixxi (filiale tech de la RATP), je développe uMap sur mon temps libre, et j’y tiens!

Question 42 : Umap existe déjà et marche très bien… pourquoi cette envie de le doubler d’un Framachin ? C’est pas mieux de tout garder en un seul endroit ?

La centralisation coûte très cher, et ce coût induit une dépendance aux entrées financières. Dans le libre, on essaie autant que possible d’éviter le scénario alla Wikipedia, c’est-à-dire où le service à l’utilisateur est centralisé. On finit par passer son temps à chercher de l’argent pour financer le projet. Côté OpenStreetMap, on tâche autant que possible de laisser la communauté prendre en charge les services à l’utilisateur final.

Donc plus y a d’instances différentes, plus les coûts sont partagés, et plus le modèle est durable.

Il faut un peu connaître python pour installer uMap chez soi, mais quand c’est le cas on le fait tourner en 15 minutes, donc j’invite les motivés à installer d’autres instances! J’en connais déjà une bonne dizaine, notamment en Suisse, en Colombie, en Argentine, en Éthiopie, et aussi dans des intranets.

cliquez sur l'image pour aller sur Framacarte
cliquez sur l’image pour aller sur Framacarte

Question 1337 : À Framasoft, on espère que ce projet apportera du monde aux communautés Umap et OpenStreetMap… Mais du coup, comment y entrer et faut-il obligatoirement coder pour contribuer ?

Utiliser uMap, c’est déjà contribuer.

Parce que ça aide à le faire connaître, et donc à étendre ses utilisateurs, et donc à augmenter les instances disponibles, et donc à « dégoogliser » Internet.

Pour aller un peu plus loin dans la contribution, il y a plusieurs options. Faire des rapports de bugs ou des demandes d’amélioration est une façon d’aider à prioriser les développements. Il y a aussi un gros besoin de documentation et tutoriels.

On peut aussi participer à la traduction (on a récemment ajouté une traduction en amharique !). Enfin, y a de l’espace pour améliorer le graphisme et l’ergonomie.

Et bien sûr, quand on code en python (backend) ou en javascript (frontend), il y a de quoi faire ! La page du projet pour en savoir plus : http://wiki.openstreetmap.org/wiki/UMap

Libre à vous de dessiner sur le monde

Révolu, le temps des atlas coûteux (et autres cartes IGN) qu’il était illégal de photocopier et que l’on stabilotait à grands frissons. Désormais, avec Framacartes, vous pouvez laisser libre cours à votre imagination et partager en quelques clics ce parcours de trail avec l’ensemble de votre club…

carte-trail
oh le joli dénivelé !

… ou mettre en ligne sur le site de votre office de tourisme l’ensemble des restos, hébergements et lieux à visiter de votre ville…

carte-ville
ça ressemble furieusement à une chasse aux trésors… nous on dit ça, on dit rien, hein…

…ou encore détourner Framacarte pour dessiner un Tux, un Chaton ou un GNU sur le pays de votre choix (la première personne qui réalisera ce défi gagnera notre éternelle admiration déclarée officiellement sur nos réseaux sociaux !)

Car, encore une fois, le succès de cet outil ne dépendra que de vous. À vous donc de vous en emparer, de le partager et de nous soutenir par vos dons afin que nous préparions de nouvelles alternatives à GAFAM tout au long de 2016.