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

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

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é dUMAP, 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.

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

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

     

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