TUTORIEL D’UTILISATION DE FRAMACARTE

(UMAP/ OPEN STREET MAP)

1 Table des matières

1.1.1.1 ......................................................................................................................................................... 1

2 Connexion au compte UMAP ..................................................................................... 2

2.1 Accéder aux cartes de l’École de Musique du Plateau .................................................... 3
2.2 Créer une nouvelle carte............................................................................................... 4
2.3 Supprimer une carte ..................................................................................................... 5
2.4 Réinitialiser une carte ................................................................................................... 5
3 Interface primaire...................................................................................................... 6
3.1.1 Zommer/ Dézoomer ........................................................................................................... 6
3.1.2 Chercher un nom de lieu .................................................................................................... 6
3.1.3 Mode plein écran ............................................................................................................... 7
3.1.4 Exporter et partager la carte .............................................................................................. 7
3.1.4.1 Intégrer la carte sur un site internet ....................................................................................... 8
3.1.4.2 Partager la carte via une URL .................................................................................................. 8
3.1.4.3 Exporter les données d’une carte ........................................................................................... 9
3.1.5 Géolocaliser sa position.................................................................................................... 10
3.1.6 Changer le fond de carte .................................................................................................. 10
3.2 Interface secondaire ................................................................................................... 11
3.2.1 Ajouter un point d’intérêt ................................................................................................ 12
3.2.1.1 Mise forme du point d’intérêt et de la syntaxe .................................................................... 12
3.2.1.1.1 Écrire en italique .............................................................................................................. 12
3.2.1.1.2 Écrire en gras .................................................................................................................... 12
3.2.1.1.3 Titre 1, 2 et 3 .................................................................................................................... 12
3.2.1.1.4 Insérer un lien URL ........................................................................................................... 12
3.2.1.1.5 Insérer un lien URL avec texte.......................................................................................... 13
3.2.1.1.6 Insérer une image personnelle ........................................................................................ 13
3.2.1.1.7 Insérer une image en ligne ............................................................................................... 14
3.2.1.1.8 Insérer une image avec largeur (en pixels) ...................................................................... 14
3.2.1.1.9 Iframe ............................................................................................................................... 15
3.2.1.1.10 Iframe avec hauteur (en pixels) ...................................................................................... 15
3.2.1.1.11 Iframe avec hauteur et largeur (en px) .......................................................................... 15
3.2.1.1.12 Séparateur horizontal ..................................................................................................... 15
3.2.1.2 Icônes personnalisables ........................................................................................................ 15
3.3 Tracer un polygone..................................................................................................... 15
3.4 Gestion des calques .................................................................................................... 16

1
2 Connexion au compte UMAP
- Lien de connexion :

https://umap.openstreetmap.fr/fr/user/coledeMusiqueduPlateau/

1) Cliquez sur connexion/ Créer un compte

2) Sélectionnez « OpenStreetMap »

3) Rentrez les informations de connexion suivantes :

Utilisateur : emplateau@gmail.com
Mot de passe : violon25!

2
 2.1 Accéder aux cartes de l’École de Musique du Plateau
1) Cliquez sur « Mes cartes (coledeMusiqueduPlateau)

2) Cliquez sur « Ecole de Musique du Plateau » pour l’afficher la carte

3
 2.2 Créer une nouvelle carte
1) Cliquez sur « Créer une carte »

2) Renommez la carte en haut à gauche puis cliquez sur enregistrer

3) Votre carte est maintenant créée. Vous pouvez la retrouver sur la page « Mes
cartes » dans l’interface d’accueil de UMAP.

4
 2.3 Supprimer une carte
1) Dans l’interface d’édition, cliquez sur la roue dentée « Éditer les paramètres ».

2) Cliquez sur le dernier bouton du bas « Actions avancées », puis « Supprimer ».

2.4 Réinitialiser une carte

1) Dans l’interface d’édition, cliquez sur la roue dentée « Éditer les paramètres ».

5
 2) Cliquez sur le dernier bouton du bas « Actions avancées », puis « Vider ».Interface
d’édition des cartes

3 Interface primaire
3.1.1 Zommer/ Dézoomer

Cliquez en haut à gauche sur l’icône « + » pour zoomer et « – » pour dézoomer sur la carte.
Vous pouvez aussi utiliser la molette de la souris ou le trackpad.

3.1.2 Chercher un nom de lieu

Cliquez sur l’icône « loupe » pour rechercher précisément le nom d’un lieu (attention, il faut bien vérifier le
nom car l’interface est en anglais)

6
 3.1.3 Mode plein écran

Cliquez sur l’icône « voir en plein écran » pour afficher la carte intégralement. Appuyez sur « échap » pour
quitter le mode « plein écran ».
(il est possible que la touche échap ne fonctionne pas, il faut donc revenir à la page précédente pour quitter le
mode plein écran)

3.1.4 Exporter et partager la carte

Cliquez sur le bouton « Exporter et partager la carte » pour ouvrir la fenêtre de de partage.

Vous voilà maintenant sur la fenêtre de partage.

7
 3.1.4.1 Intégrer la carte sur un site internet

Copier/Coller le code de la fenêtre « Intégrer la carte dans une iframe » sur votre site internet pour afficher
votre carte UMAP.
Cliquez sur le bouton « Options d’export de l’iframe » pour configurer les paramètres d’affichage de la carte sur
votre site internet.

3.1.4.2 Partager la carte via une URL

Partagez votre carte grâce à l’URL courte.

8
 3.1.4.3 Exporter les données d’une carte

Cliquez sur le bouton « télécharger les données

9
 3.1.5 Géolocaliser sa position

Cliquer sur l’icône « cible » pour centrer la carte sur votre position (il faut accepter la géolocalisation de votre
moteur de recherche).

3.1.6 Changer le fond de carte

Permet de changer le fond de votre carte (images satellites, routes, etc.).

10
 3.2 Interface secondaire
Cliquez sur l’icône « crayon » pour accéder au menu d’édition.
Après chaque modification, sauvegardez votre travail en cliquant sur enregistrer, puis cliquez sur « désactiver
l’édition » pour le visualiser.

11
 3.2.1 Ajouter un point d’intérêt

Cliquez sur « ajoutez un marqueur » pour définir la position d’un point d’intérêt.

3.2.1.1 Mise forme du point d’intérêt et de la syntaxe

Voici les codes pour mettre en forme votre texte dans la partie « description » de votre point
d’intérêt.

3.2.1.1.1 Écrire en italique

*texte*

3.2.1.1.2 Écrire en gras

**texte**

3.2.1.1.3 Titre 1, 2 et 3

# texte
## texte
### texte

3.2.1.1.4 Insérer un lien URL

[[https://exemple.fr]]

12
 3.2.1.1.5 Insérer un lien URL avec texte

[[http://exemple.fr|texte du lien]]

3.2.1.1.6 Insérer une image personnelle

Si vous souhaitez ajouter une photo dans la description de votre point d’intérêt comme
cela :

Il vous faut télécharger votre image sur un serveur accessible en ligne. Par exemple vous
pouvez utiliser gratuitement Framapic.

Sélectionnez « 1 an » pour l’expiration, puis déposez votre image sur Framapic.

Puis copiez le lien PNG de l’image et collez le dans votre description grâce au code :

13
{{http://image.url.com}}

ATTENTION : éviter de mettre en ligne des images de plusieurs Mo.

3.2.1.1.7 Insérer une image en ligne

Vous pouvez insérer une image déjà existante en copiant le lien de celle-ci.
Clic droit et copier l’adresse de l’image.

Et collez le lien dans votre description grâce au code :

{{http://image.url.com}}

ATTENTION : éviter de mettre en ligne des images de plusieurs Mo.

3.2.1.1.8 Insérer une image avec largeur (en pixels)

14
{{http://image.url.com|largeur}}

3.2.1.1.9 Iframe

{{{http://iframe.url.com}}}

3.2.1.1.10 Iframe avec hauteur (en pixels)

{{{http://iframe.url.com|hauteur}}}

3.2.1.1.11 Iframe avec hauteur et largeur (en px)

{{{http://iframe.url.com|height*width}}}

3.2.1.1.12 Séparateur horizontal

—
3.2.1.2 Icônes personnalisables

Vous pouvez personnaliser l’icône de votre point d’intérêt en cliquant sur :

- Image de l’icône (bouton définir)
- Définir le pictogramme (tout en bas)

Il vous faut ensuite copier/coller l’URL de votre icône puis valider.

3.3 Tracer un polygone

Sélectionnez l’outil « dessiner un polygone » et tracez votre forme en plaçant différents points. Cliquez sur le
dernier point pour terminer le tracé et ouvrir les paramètres.

15
Vous pouvez modifier les propriétés de votre forme :

3.4 Gestion des calques

Vous pouvez classer vos points d’intérêts, formes et lignes dans des dossiers communs appelés « calques ».
Définissez vos calques grâce au bouton « gérer les calques ».
Définissez vos paramètres par défaut de vos calques (icônes, couleurs, etc.).

16
17