Ce tutoriel vise à expliquer comment créer et publier une carte interactive avec Click2Map

1. Réaliser une carte
interactive avec
Click2Map
Tutoriel
© Nicolas Monseigne

2. Réaliser une Au menu…
carte
interactive avec
Click2Map
Etape 0 : Click2Map, qu'est ce que c'est ?
Etape 1 : créer sa carte
Etape 2 : publier sa carte
© Nicolas Monseigne

3. Réaliser une
carte
interactive avec
Click2Map
Click2Map: c'est quoi ?
TUTORIEL
© Nicolas Monseigne

4. Réaliser une C'est quoi ?
carte
interactive avec
Un outil de création de cartes très performant :
Click2Map - bulles avec onglet personnalisables
- liste des marqueurs (cf à droite dans l'illustration ci-
dessous) cliquables : cliquer sur le nom à droite ouvre la
bulle du marqueur sur la carte
- cette liste est classable par groupes, que l'internaute
peut choisir d'afficher ou non
© Nicolas Monseigne

5. Réaliser une C'est quoi ?
carte
interactive avec
2 options :
Click2Map Version gratuite avec
des limitations : 10
Version payante, illimitée cartes et 2000
repères maximum
(celle qu'on va
regarder ici ;-)
© Nicolas Monseigne

6. Réaliser une
carte
interactive avec
Click2Map
Créer sa carte
TUTORIEL
© Nicolas Monseigne

7. Réaliser une Créer sa carte
carte
interactive avec
Une fois votre compte créé et connecté à votre compte, la
Click2Map création de votre première carte vous conduit à cet écran :
Une zone de menu et sous-
menus, organisé en ruban
comme dans le pack Office
La carte, où s'affichent les
repères cartographiques
La liste des différentes
cartes créées avec
Click2Map
© Nicolas Monseigne
La liste des différentes
repères cartographiques

8. Réaliser une Créer sa carte
carte
interactive avec
Une fois votre compte créé et connecté à votre compte, la
Click2Map création de votre première carte vous conduit à cet écran :
La création de carte se fait Si vous savez déjà que aurez
en cliquant dans le menu besoin de classer vos repères
"Ajout" > "Carte…" cartographiques par catégories,
vous pouvez en suivant créer ces
groupes
© Nicolas Monseigne

9. Réaliser une Créer sa carte
carte
interactive avec
Pour ajouter des repères cartographiques, direction le menu
Click2Map "Repère"
 

3 options :
- créer le repère exnihilo, en renseignant une adresse
postale ou des coordonnées GPS 
- mais vous pouvez aussi les créer "par lots" si vous
disposez de fichiers de données géocodées (format
géoRSS, csv, xml ou kml) 
- dernière option : créer un modèle de repère (type de
punaise, description, éventuellement onglets dans les
© Nicolas Monseigne
bulles) 
Autre solution : faire un clic droit sur la carte à l'endroit où doit
apparaître le repère et sélectionner "Nouveau repère"

10. Réaliser une Créer sa carte
carte
interactive avec
Quand vous ajoutez un repère, cette boîte de dialogue s'ouvre
Click2Map
En renseignant les
différents champs
dans les onglets
"Propriété du
repère" et
"Propriétés suppl.",
vous obtiendrez une
bulle "standard",
avec les
informations que
vous aurez entrées.
© Nicolas Monseigne
Pour une bulle personnalisée, décochez la
case "Afficher les propriétés sélectionnées"
et passez dans l'onglet "Onglets suppl."

11. Réaliser une Créer sa carte
carte
interactive avec A chaque fois que vous cliquez sur l bouton "Texte", "Photo"
Click2Map ou "Code" [HTML], vous créez un nouvel onglet, et
déterminez en même temps le type de contenu qui y sera
affiché.
© Nicolas Monseigne

12. Réaliser une Créer sa carte
carte
interactive avec
Vous pouvez aussi ajouter des polygones et/ou des lignes,
Click2Map dans le menu "Dessin"
Le principe : un clic pour commencer à dessiner, un double clic
pour finaliser le dessin
© Nicolas Monseigne

13. Réaliser une Créer sa carte
carte
interactive avec Autre onglet intéressant, "Opération groupées"
Click2Map Sur une carte riche en repères, il y a là des outils intéressants…
Exemple ici avec la fonction "Changer d'icône", il suffira de
sélectionner dans la liste de tous ses marqueurs, ceux dont on
veut changer l'icône ! Simple, non ?
© Nicolas Monseigne

14. Réaliser une
carte
interactive avec
Click2Map
Publier sa carte
TUTORIEL
© Nicolas Monseigne

15. Réaliser une Publier sa carte
carte
interactive avec Direction l'onglet "Publication
Click2Map On choisit l'option "Sur mon serveur"
Vous avez alors la
possibilité de
paramétrer les
© Nicolas Monseigne
dimensions et le
style d'affichage de
votre carte

16. Réaliser une Publier sa carte
carte
interactive avec
Click2Map
© Nicolas Monseigne
Quand vos réglages sont terminés, il suffit de cliquer sur le
bouton "Télécharger", vous obtiendrez alors un fichier .ZIP

17. Réaliser une Publier sa carte
carte
interactive avec
Click2Map
Vous n'avez pas de
serveur ?
Vous avez un compte
Dropbox avec un
dossier "Public" ? (les
dernières versions de
cet outil ont supprimé ce
dossier, pourtant bien
pratique…)
Parfait, il vous suffit de
copier le contenu de
votre fichier ZIP dans un
© Nicolas Monseigne
sous-dossier de ce
fameux dossier Public
de Dropbox !

18. Réaliser une
carte
interactive avec
Click2Map
Intégrer sa carte sur un site web
TUTORIEL
© Nicolas Monseigne

19. Réaliser une Intégrer sa carte sur un site web
carte
interactive avec Option n°1 : vous créez un bouton-image sur votre site web,
Click2Map et vous ajoutez à ce bouton un lien hypertexte pointant vers
le fichier "map" hébergé sur votre serveur.
Au passage de la souris
sur le bouton, le lien est
visible dans la barre Pour connaître le lien à mettre sur ce
d'état du navigateur fameux bouton, dans le cas d'une
© Nicolas Monseigne
carte hébergée sur Dropbox, faites un
clic droit sur le fichier "map" qui se
trouvait dans votre fichier que vous
avez dézippé et copiez le lien public

20. Réaliser une Intégrer sa carte sur un site web
carte
interactive avec Option n°2 : intégrer la carte directement dans votre site web
Click2Map via une iframe…
Le code à ajouter à votre site web, à l'endroit où doit s'afficher la carte :
<iframe src="[lien vers votre fichier map.html] " width="960px" frameborder="0"
© Nicolas Monseigne
scrolling="no" height="560px" marginwidth="0"></iframe>
Bien sûr vous pouvez modifier les valeurs "width" (largeur) et "height" (hauteur)
pour coller au mieux aux contraintes de votre site web ;-)

21. Réaliser une
carte
interactive avec
Click2Map
Fin du tutoriel
TUTORIEL
© Nicolas Monseigne
D'autres infos etourisme sur Twitter :
@mon_etourisme