Tutoriel cartographie UMAP avec intégration audio, image et vidéo

Créer sa cartographie numérique !

1. Se rendre sur le site UMAP ;

A savoir, qu’il n’est pas nécessaire de créer un compte pour créer une carte interactive, il suffit juste de cliquer sur créer une carte et lors de l’enregistrement de bien conserver le lien généré pour pouvoir continuer à la développer.

2. Cliquer sur l’icône OpenStreetMap et créer son compte (adresse mail, mot de passe, etc.), ou se connecter et autoriser l’accès

3. Revenir sur le site UMAP

Créer une carte

Cliquer en haut à droite sur « Créer une carte ». S’affiche alors un fond de carte (que l’on peut changer, en cliquant sur la sixième icône à droite, représentant une pile de feuilles). Par défaut, c’est un fond OpenStreetMap.

Enregistrer la carte à créer :

En haut s’affiche la mention « édition en cours » suivie de « Carte sans nom » (en bleu).

En passant la souris sur cette phrase, un crayon apparaît : cliquer dessus, ce qui fait apparaître une fenêtre à droite « éditer les propriétés de la carte ».

Préciser le nom, sa description. (ces paramètres peuvent être modifiés ultérieurement).

Pour une présentation de la carte sur un panneau latéral à droite, cliquer sur “option d’interface” descendre jusqu’a “Voulez-vous afficher un panneau latéral au chargement?” et choisir “légende”.

Cliquer en haut à droite sur le bouton bleu « Enregistrer » (opération à faire impérativement à chaque modification, pour ne rien perdre du travail fait) .

Vue de la carte avec l’éditeur.

plan1


Légendes des diverses icônes

Placer des marqueurs

Pour trouver un emplacement précis :

À gauche, cliquer sur l’icône « loupe ».

Une fenêtre s’ouvre sur la droite;

Indiquer une localité, sous la forme « Marseille » ou être même plus précis : « Estaque gare, Marseille » ;

la carte se centre, mais sans avoir de repère : on doit alors zoomer pour savoir où est l’adresse en question.

Placer des repères

1. Faire apparaître les icônes d’outils à droite : cliquer sur le carré en haut à droite comportant un crayon ;

2. Cliquer sur l’icône (en forme de goutte d’eau inversée) ;

3. Déplacer la souris et cliquer à l’endroit voulu ;

4. On peut donner des renseignements à ce marqueur. Il suffit de cliquer dessus, ce qui fait apparaître une fenêtre de paramétrage.

Aller sur « Propriété de la forme »,  ou l’on trouve un choix de couleur, de forme et d’image de l’icône.

Option de la carte :

Comment avoir le contenu de chaque marqueur sur un panneau latéral à droite ?

Sur le menu à droite, cliquer sur l’engrenage, puis sur « option d’interaction par défaut ».

Dans style de pop-up, dérouler le menu et choisir « panneau latéral »

Editeur d’un élément (ici, marqueur du tunnel de la nerthe)

plan3

Mise en forme du texte

  • *simple astérisque pour italique* – Exemple : *mot*
  • **double astérisque pour gras** – Exemple : **mot**
  • # un dièse pour titre 1 – Exemple : # titre1
  • ## deux dièses pour titre 2 – Exemple : ## titre2
  • ### trois dièses pour titre 3 – Exemple : ### titre3
  • Lien simple: [[https://exemple.fr]] – Exemple : [[https://ancrages.org]]
  • Lien avec texte: [[http://exemple.fr|texte du lien]] – Exemple : [[https://ancrages.org|Site internet d’Ancrages]]
  • Image: {{http://image.url.com}} – Exemple : {{https://ancrages.org/nomdelimage.jpg}}
  • Image avec largeur (en pixels) : {{http://image.url.com|largeur}} – Exemple : {{https://ancrages.org/nomdelimage.jpg|300}}
  • Iframe (Cadre qui permet d’obtenir une page d’un site internet, intégrée dans la page courante) : {{{http://iframe.url.com}}} – Exemple : {{{http://nomdusite.com}}}
  • Iframe avec hauteur (en pixels): {{{http://iframe.url.com|hauteur}}} – Exemple : {{{http://nomdusite.com|300}}}
  • Iframe avec hauteur et largeur (en px): {{{http://iframe.url.com|height*width}}} – Exemple : {{{http://nomdusite.com|800*300}}}
  • — pour un séparateur horizontal

Vue publique

plan4

Communiquer la carte réalisée

À gauche, cliquer sur cet icône icone1

Copier le lien qui apparaît dans « URL courte », et la diffuser.

Intégrer la carte dans une iframe (cadre avec contenu extérieur).

Coller le code « <iframe width……..> » dans l’éditeur de votre site internet en mode « code html »

 

plan5

 

Et voilà le résultat final :

Voir en plein écran

Intégrer des ressources multimédias

Une des particularité d’UMAP, est de pouvoir intégrer des ressources multimédia à condition qu’elles soient déjà hébergé sur internet car l’application ne propose pas d’hébergement de ressources dans son serveur.

Intégrer des images

Pour importer une image dans la map, faire un clic droit sur l’image et cliquer sur « copier l’adresse de l’image »

Dans l’éditeur, coller avec ce code :

Code de base pour UMAP : {{http://image.url.com}}

Code à intégrer dans l’éditeur : {{https://ancrages.org/wp-content/uploads/2016/10/GARE-SAINT-CHARLES-3.jpg}}

Résultat :

Intégrer du son

Ici, nous allons prendre exemple avec la plateforme soundcloud.com qui permet d’héberger gratuitement ou par abonnement des sources audios.

On peut aussi grâce à la balise IFRAME  de l’éditeur, l’intégrer avec un lien vers une source mp3 existante comme ceci : Iframe (Cadre qui permet d’obtenir une page d’un site internet, intégrée dans la page courante) : {{{http://truc.com/chanson.mp3}}}, mais suivant les navigateurs, le lecteur rencontre des bugs d’affichage.

Via la plateforme SOUNDCLOUD.COM

Se rendre sur la page ou la source audio a été enregistrée.

https://soundcloud.com/communication-ancrages/societe-generale-des-tuileries-de-marseille

Ouvrir la boite de dialogue via le bouton partager qui se trouve sous le lecteur, cliquer sur le bouton « EMBARQUER », sélectionner le lecteur audio de droite et copier le code en faisant un clic droit sur la souris.

 

Code html de base :

<iframe width= »100% » height= »166″
scrolling= »no » frameborder= »no » src= »https://w.soundcloud.com/player/url=https%3A//api.soundcloud.com/tracks/305754117
&amp;color=ff5500&amp;auto_play=false&amp;hide_related=false&amp;
show_comments=true&amp;show_user=true&amp;show_reposts=false »></iframe>

Séléctionner ce bout de code :

https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/305754117

Créer le code d’intégration

Code de base pour UMAP : {{{http://iframe.url.com}}}

Code à intégrer dans l’éditeur : {{{https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/305754117}}}

Résultat :

 

Intégrer de la vidéo

 

Liens des vidéos sur youtube

https://youtu.be/3ZxQute_13c : Présentation de la gare de l’estaque

https://youtu.be/XTTA2ianDAY : Témoignage d’un ancien ouvrier de la sucrerie SAINT LOUIS

Se rendre sur la page de la vidéo

Cliquer sur le lien « partager » en bas de la vidéo

Cliquer ensuite sur intégrer

Dans le code présenté tel quel ci-dessous sur la page youtube, sélectionner uniquement le code en rouge.

<iframe width= »560″ height= »315″ src= »https://www.youtube.com/embed/dEI9fP2De0A » frameborder= »0″ allowfullscreen></iframe>

Coller le sur l’éditeur de la carte et mettre entre un ensemble de trois accolades.

Résultat : {{{https://www.youtube.com/embed/dEI9fP2De0A}}}


Code de base pour UMAP : Iframe: {{{http://iframe.url.com}}}

Code à intégrer dans l’éditeur : {{{https://www.youtube.com/embed/3ZxQute_13c}}}

Merci pour votre lecture et bonne cartographie si vous vous lancez !

Share your thoughts