1

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 :




ABC-Map : réalisez des cartes et des tracés facilement

Soyons francs : quand un développeur se présente à nous en expliquant qu’il a pensé son premier projet pour le grand public, pour la famille Dupuis-Morizeau (notre sympathique famille-témoin de Normandie qui, doit-on le rappeler, a pris le relais de la famille Michu), et qu’en plus il a placé ce projet sous licence libre… on a envie de frapper des mains et sauter partout en débouchant le champomy… Ce qui est dangereux pour les ordinateurs qui nous entourent, alors on le fait pas.

Par contre, on a aussi envie d’en savoir plus sur ce projet, et de le partager sur le Framablog.

Rémi Pace a bien vu que, chez les Dupuis-Morizeau, créer une carte se résumait à une mauvaise capture d’écran de Google Maps et un coup de paint (avec traçage aléatoire à la souris) ou de toshopage mal cracké (mais là faut demander à la petite, parce que les autres ne maîtrisent pas).

Or, on a souvent besoin de cartes à imprimer, mettre sur un site web ou un flyer… Et ce géographe de Rennes a développé une solution simple, libre et documentée (avec de zolis tuto vidéos) pour aider les Dupuis-Morizeau à réaliser simplement et en toute liberté leurs itinéraires, tracés et autres chemins de rando…

Découvrons donc ABC-Map avec son créateur, Rémi Pace.

Carte Réalisée en 20 minutes avec Abc-Map (merci à la communauté d'OSM pour le fond de carte)
Carte Réalisée en 20 minutes avec Abc-Map (merci à la communauté d’OSM pour le fond de carte)

Bonjour Rémi, peux-tu te présenter aux membres du framablog ? Car sans vouloir spoiler ta réponse, tu n’as pas un profil de développeur, à l’origine… je me trompe ?

Bonjour Pouhiou, merci de m’accueillir sur le magnifique Framablog ! En effet je n’ai pas le profil type d’un développeur. Je suis actuellement étudiant en 3e année de Licence de Géographie-Aménagement à Rennes, une licence de sciences sociales où les cours ne concernent pas du tout le développement informatique.

En fait je me suis formé en autodidacte à l’informatique et à la programmation toujours en fonction de besoins : créations graphiques, sites internet, traitement de données, etc. Et comme le Web est très bien fourni en matériels et en tutoriels j’ai pu vite acquérir une bonne aisance. Petit à petit, je me suis mis à aimer ce que je faisais et désormais je m’oriente vers une formation de développement.

Parallèlement et depuis longtemps je bidouille les cartes qui me tombent à portée de main. On y découvre un tas de choses intéressantes aussi bien sur notre environnement direct que sur le monde et ses mécaniques. Mais malgré les utilisations possibles très concrètes j’ai toujours trouvé qu’il était assez difficile de créer des cartes simples. D’où mon idée de créer Abc-Map.

Chez Framasoft, on parle beaucoup de la famille Dupuis-Morizeau… Entre l’oncle agent d’accueil en office de tourisme, la cousine qui fait du trekking et le jeune couple de papas qui organise une chasse au trésors pour l’anniversaire du petit… Ils ont besoin de cartes mais ne sont pas hyper branchés informatique… Concrètement, ils doivent faire quoi ?

Les Dupuis-Morizeau peuvent très bien apprendre à se servir de QGis ou de GvSIG et lorsqu’ils manieront les connexions WMS et WFS sur le bout des doigts et lorsqu’ils sauront tout des systèmes de coordonnées et des requête SQL ils pourront créer leurs cartes au trésor et leurs itinéraires de trekking… après 3 où 4 semaines de formation (et je ne donne pas cher de la moumoute de Monsieur)

Je plaisante bien sur 🙂 En fait il existe pas mal de solutions libres très efficaces et qui répondent parfaitement à l’utilisation d’usagers confirmés. Quantum GIS notamment est un logiciel libre tout simplement impressionnant. Son ergonomie et ses possibilités sont énormes mais il demande une formation longue et complexe et une grande aisance en informatique.

En comparaison Abc-Map à des fonctionnalités bien plus limitées mais permet de créer une carte pratique (c’est à dire d’utilisation concrète) rapidement et avec peu de formation. Attention, il faut tout de même se pencher sur le concept et manipuler un peu avant d’obtenir un résultat convenable, mais en autodidacte on parle de suivre un ou deux tutoriels d’une trentaine de minutes chacun. Ensuite il est parfaitement possible de créer des croquis ou des cartes de très bonne qualité.

Le principe du logiciel est assez simple: Tonton Dupuis peut importer une carte à partir d’images ou d’un site de cartographie en ligne, éventuellement la géo-référencer pour utiliser des coordonnées, dessiner des formes, ajouter du texte et des photos puis mettre en page sa carte. Une méthode classique en géographie mais accessible ici dans un seul logiciel, et rappelée à l’aide d’un assistant de création.

De cette manière on peut facilement créer des itinéraires sportifs, des circuits de balade, des cartes de chasse au trésor ou des plans… sans passer plusieurs jours à se former et en se focalisant sur le sujet plutôt que sur le maniement du logiciel.

Quelles sont les fonctionnalités d’Abc-Map qui sont le plus utilisées ? Est-ce que tu as eu des retours d’utilisations que tu n’aurais pas soupçonnées ?

Les utilisateurs me communiquent leurs utilisations et leurs besoins via plusieurs formulaires disponibles sur le site et ce qui ressort tout de suite c’est que les usages sont très variés et souvent pratiques: sports, transports, tourisme, enseignement, activités écologiques…

Mais ce qui m’a fait plaisir c’est quand des utilisations plus atypiques sont apparues : apiculture, pêche, botanique, généalogie, création de jeux… C’est exactement pour ça que j’ai créé ce logiciel, pour les utilisateurs qui ont besoin de cartes pour des activités concrètes et qui n’ont pas la possibilité ou pas l’envie de devenir experts en système d’information géographique.

Et j’ai été particulièrement heureux d’apprendre qu’Abc-Map participe à l’organisation de maraudes sociales et au travail d’associations et d’initiatives citoyennes. Les cartes nous permettent de penser et de nous organiser, et chaque possibilité d’y arriver plus clairement et plus simplement laisse un peu plus de place à la décision et à l’action.

Quant aux fonctionnalités les plus utilisées, je pense que le logiciel est utilisé généralement dans son ensemble, puisqu’il propose une méthode de création. Cependant certains utilisateurs confirmés de logiciels de CAO qui préfèrent l’ergonomie de leur logiciel fétiche utilisent Abc-Map pour assembler un fond de carte automatiquement ou pour placer des objets en fonction de coordonnées spatiales.

Sur combien de temps s’est développé ABC-Map ? Quel langage as-tu choisi et pourquoi ?

Le développement du logiciel a duré un an ce qui est assez long je pense (en alternance avec un emploi et mes études). Mais étant donné que c’est mon premier projet et que je ne connaissais même pas les principaux patrons de conception en me lançant je suis déjà bien content qu’il soit viable et diffusé :).

J’ai choisi de le développer en Java. C’est un langage bien documenté qui permet de coder moins et de coder pour de nombreux systèmes d’exploitation. Dès le début du projet je me suis tout de suite imposé de proposer une solution pour un maximum de systèmes, sans laisser de coté tous les non-$Krosoft.

Ce qui m’a décidé aussi c’est que de bons environnements de développement et de bonnes bibliothèques sont disponibles pour Java grâce au travail de nombreux développeurs. Pour bien se rendre compte de ce que je dis il faut avoir déjà utilisé Eclipse et Maven, ce sont des programmes sensationnels qui permettent de se dépasser en termes de conception et d’organisation.

On voit bien dans les coûts de production de ton logiciel la part importante que prennent les postes chips, olives, bières et Pic Saint Loup AOC… As-tu mis Abc-Map sous licence Beerware ou tu as préféré une autre licence libre ? Et comment ça t’es venu, du coup, de proposer ton logiciel sous licence Libre ?

Abc-Map est distribué sous GNU Public Licence 3, ce qui laisse de bonnes possibilités en termes d’utilisation et de modification. Ce qui m’a décidé à publier sous licence libre c’est l’opinion que j’ai des développeurs/développeuses qui prennent du temps pour créer et partager des logiciels utiles comme LibreOffice, VLC, QGis, Inkscape, The Gimp, Notepad ++, Eclipse,…

J’ai toujours été très impressionné de voir comme ces logiciels sont de bonne qualité et comme ils servent tous les jours les intérêts des utilisateurs. Je pense que j’ai voulu apporter ma petite pierre au cairn. Je trouve dommage par contre que l’on insiste trop peu sur l’aventure humaine que représente le travail bénévole des personnes qui rendent l’information plus accessible et plus pertinente. Il y a encore des gens qui pensent que si un logiciel est gratuit, c’est qu’il est mal bricolé et de mauvaise qualité !

Et contre ce genre de fausses idées, et pour promouvoir l’usage du libre les organisations comme Framasoft et les annuaires de logiciels libres jouent un rôle très important. Il faut mettre en avant la qualité des logiciels et des projets, leur disponibilité, leurs usages et leurs histoires plutôt que de présenter le libre comme une licence contraignante qui produit des logiciels austères, complexes et peu fiables.

Un logiciel aux frais de développement honnêtes ;)
Un logiciel aux frais de développement honnêtes ;)

As-tu songé à déposer ton code sur un Git ? Comment envisages-tu les apports de code que la communauté pourrait te donner ?

Pour l’instant la question ne s’est pas vraiment posée, personne ne m’a proposé d’aide pour le développement. Je ne serai pas contre mais je veux d’abord proposer une version qui me convienne, c’est çà dire que je jugerai minimale, toujours dans l’objectif de me former à la programmation et de réussir un projet de bout en bout.

Dans le courant de l’année lorsque j’aurai terminé les dernières améliorations qui me semblent indispensables je compte créer un Git pour permettre des contributions d’utilisateurs et j’espère que ça pourra se faire dans de bonnes conditions.

Quelles sont les prochaines fonctionnalités que tu souhaites développer ? Et comment peut-on aider le logiciel Abc-Map : avec du code, des sous, de l’aide, du partage…?

Tout d’abord je souhaite améliorer un peu l’interface. J’ai eu quelques retours intéressants et je vais adapter le logiciel pour qu’il soit plus intuitif. Ensuite je souhaite le traduire au moins en Anglais et en Espagnol, toujours dans un esprit de partage.

Une des grosses améliorations aussi sera de proposer des solutions d’import / export pour GPS et pour d’autres logiciels à dimension géographique. Et pour améliorer la prise en main je souhaite dès que possible créer plus de tutoriels et plus de vidéos pour démocratiser encore le fonctionnement du logiciel.

Pour aider pour l’instant je souhaite surtout diffuser l’information pour que le logiciel soit utilisé et pour avoir des retours d’expériences d’utilisateurs. J’aimerai beaucoup aussi recevoir des cartes créés avec Abc-Map. Pour l’instant j’en ai peu et je souhaiterais en publier bientôt sur le site sous la forme d’un album pour encourager la création et pour donner des idées. Bien entendu j’accepte également les dons, il reste encore plein de place dans mes placards pour des olives et du Pic Saint Loup !

Et comme souvent sur le Framablog, on te laisse le mot de la fin…

Pour finir je dirai que je conseille à tout le monde de se lancer, de profiter des outils et de la documentation à disposition sur le net pour créer de nouveaux projets ou participer à ceux qui sont en cours : c’est une expérience géniale, ça peut être long et difficile mais quand le résultat est là ça vaut largement les heures de galères 🙂

Et un grand merci à tous ceux qui développent des outils libres et utiles, à ceux qui créent de l’information libre et accessible sur le net, et à ceux qui font la promotion de ces pratiques constructives !