Insérer une carte dans un site web
Ce tutoriel se concentre sur un aspect de Openstreetmap (OSM pour la suite), qui est un ensemble d’outils et de services plus large.
On se bornera ici à donner des adresses et quelques procédures : il existe de nombreux tutoriels très précis notamment due les sites d’OSM lui-même et de Umpa, un de ses services de création.
Sachez que OSM est une gigantesque base de donnée de données cartographique basé sur le travail collaboratif et open source de millions de personnes, qui ont joint et intégré des dessins de terrain et données y afférant : noms des villes, des fleuves, lieux-dit, etc. A ceci s’ajoute des outils pour éditer et visualiser ces cartes, d’autres outils pour les personnaliser, les utiliser pour des itinéraires, etc. Un travail colossal qui rivalise et empêche Google map de rester en position purement monopolistique, ce qu’il est de facto par la puissance qu’il a gagné en intégrant maps dans un "écosystème" encor plus grand de recherche et de vente de données géolocalisées de ses utilisateurs.
Utiliser uMap
Un service spécifique de OSM est dédié à la personnalisation de carte : uMap
Pour créer une carte, on cliquera sur le bouton "Créer une carte" et on accède à un plan et deux séries d’icônes.
A gauche les outils qui seront disponibles pour l’utilisateur de votre carte. A droite les outils de création de la carte. Simple.
Choisir le type de carte
Une fois ceci fait, on va ouvrir le panneau permettant de choisir le fond de carte. Il détermine couleurs, précision et textures. Une série de fond cartes sont accessibles dans uMap, gratuits ou payants, voir la documentation à ce propos.
On peut aussi ouvrir le panneau des paramètres à droite.
On peut y changer le nom de la carte et sa description, et régler les outils visibles pendant votre travail d’édition.
Placer des éléments sur la carte
Une fois l’environnement de travail précisé, on peut éditer la carte en lui rajoutant différents informations comme des points, des itinéraires et des zones grâce aux outils d’édition en haut à droite de la page.
La procédure est évidente. On peut personnaliser les icônes avec le menu "Propriétés de forme".
Notez qu’on peut placer des liens dans les descriptifs et les titres, ce qui permet de faire des liens entre le plan et des pages de votre site, par exemple.
Les lignes et zones ont la même logique.
Choisir la taille et zoom par défaut
Il faut bien sà »r dans enfin choisir la portion de carte qui sera affichée au démarrage pour le visiteur, en terme d’emplacement et de zoom. En utilisant les outils standards de zoom et le cliquer-déplacer, vous pouvez affiner ces paramètres. Dans notre cas, la zone du débarquement de Normandie.
A partir de là , on peut générer le code de la carte, qui est accessible via le bouton des paramètres, dans les fonctions avancées. On peut personnaliser les boutons qui seront visible dans le menu "Options de l’export d’iframe"
Le code copié/collé est un iframe qu’il suffira de copier coller dans une page html classique.
Attention ! Ne perdez pas le lien d’édition
Pour pouvoir éditer cette carte plus tard, vous devez en garder le lien secret d’édition ! Obtenez le en cliquant sur la clé dans le menu en bas à droite. Si vous le perdez, vous ne pourrez plus éditer cette carte. Ce serait dommage.
Inclure la carte
L’opération est un simple copier-coller. Le tour est joué.