OpenStreetMap est un projet international fondé en 2004 dans le but de créer une carte libre du monde.
OpenStreetMap met également à disposition une API permettant d'utiliser le service de cartographie sur ses propres pages Web. Cette activité consiste à intégrer une carte d'OpenStreetMap en utiloisant son API.
Une API (Application Programming Interface), est une interface de programmation applicative qui permet à un logiciel d'offrir ses services à d'autres logiciels. On considère une API comme une bibliothèque logicielle ou un service web quand elle offre ses services depuis Internet.
OpenStreetMap :
La base de données OpenStreetMap est faite pour être utilisée. Plusieurs possibilités existent selon ses besoins et l'utilisation attendue. Découvre les usages possibles avec le site OpenStreetMap France :
L'intégration d'un carte et sa gestion va se faire avec la librairie Javascript Leaflet.
Leaflet est une bibliothèque JavaScript libre de cartographie en ligne notamment utilisée par le projet de cartographie libre et ouverte OpenStreetMap.
Site de Leaflet : https://leafletjs.com/
Voici le contenu à mettre dans la page web pour utiliser Leaflet.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <!-- Chargement du fichier CSS de Leaflet --> <link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" crossorigin=""/> <!-- Chargement du fichier Javascript de Leaflet (après le CSS) --> <script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js" integrity="sha512-QVftwZFqvtRNi0ZyCtsznlKSWOStnDORoefr1enyq5mVL4tmKB3S/EnC3rRJcxCPavG10IcrVGSmPh6Qw5lwrg==" crossorigin=""> </script> <title>Ma carte</title> </head> <body> <div id="carte"> <!-- Ici s'affichera la carte --> </div> </body> </html>
Explications :
Crée un fichier style.css et ajoute les informations suivantes pour le bloc div :
#carte { /* la carte DOIT avoir une hauteur sinon elle n'apparaît pas */ height:400px; }
<link rel="stylesheet" href="style.css" />
Accède au site d'OpenStreetMap pour rechercher la géolocalisation de ta ville :
La suite de l'activité utilise les coordonnées de la vile de Panazol (87 - Haute Vienne) : 45.8363, 1.3065 (latitude et longitude en degrés décimaux )
Crée un fichier carte.js et ajoute le code suivant en personnalisant :
// On initialise la latitude et la longitude de Panazol (centre de la carte) var lat = 45.8363; var lon = 1.3065; var macarte = null; // Fonction d'initialisation de la carte // Créer l'objet "macarte" et l'insèrer dans l'élément HTML qui a l'ID "carte" var macarte = L.map('carte').setView([lat, lon], 13); L.tileLayer('https://{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png', { attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>', maxZoom: 20, }).addTo(macarte);
Maintenant ajoute dans la page HTML la balise <scritp …</script> pour utiliser ton fichier carte.js.
<script type="text/javascript" src="carte.js"></script>
Ajoute à la fin du fichier carte.js le code suivant :
// Nous ajoutons un marqueur var marqueur = L.marker([lat, lon]).addTo(macarte);
Explications :
Tout d'abord, créons une variable villes contenant plusieurs villes avec leur coordonnées, en utilisant un tableau associatif de Javascript.
// Nous initialisons une liste de marqueurs var villes = { "Panazol": {"lat": 45.8363, "lon": 1.3065}, "Feytiat": { "lat": 45.8101, "lon": 1.3309 }, "Condat-sur-Vienne": { "lat": 45.7937, "lon": 1.2308 }, "Landouge": { "lat": 45.8435, "lon": 1.1954 }, "Isle": { "lat": 45.8052, "lon": 1.2239 } };
// pour à une ville particulière villes["Landouge"] // pour accéder à sa latitude villes["Landouge"].lat
// Nous parcourons la liste des villes var marqueurs = {}; for (var ville in villes) { marqueurs[ville] = L.marker([villes[ville].lat, villes[ville].lon]).addTo(macarte);
Une bulle d'information peut être affichée quand on clique sur un marqueur :
// un popup avec du HTML qui est automatiquement ouvert marqueurs["Panazol"].bindPopup("<b>Hello world!</b><br>Je suis un popup.").openPopup(); // Préparer un contenu HTML avant de l'associer à un popup contenuHTML = "Vous êtes à Feytiat. "; contenuHTML += " </br>Le site du lycée Valadon "; contenuHTML += "<a href='www.lyc-valadon.ac-limoges.fr'>Lycée Suzanne Valadon</a>"; marqueurs["Feytiat"].bindPopup(contenuHTML);
Lors du clic de la souris il est possible de lancer l'exécution d'une fonction. Lors du clic de la souris, un événement est généré.
// création d'une variable popup vide var popup = L.popup(); function onMapClick(e) { // la variable e contient les informations sur l'événement // positionner le popup au coordonnées du clic popup.setLatLng(e.latlng) // définir le contenu du popup popup.setContent("Vous avez cliqué sur la carte aux coordonnées " + e.latlng.toString()) //ouvrir le popup sur la carte popup.openOn(macarte); }
// faire exécuter la fonction lors du clic sur la carte macarte.on('click', onMapClick);