Les cours du BTS SIO

Outils pour utilisateurs

Outils du site

Piste: • openstreetmap1

Panneau latéral

ACCUEIL

Support de cours

Bloc de compétences

Archives

SNT

* accès limité

isn:openstreetmap1

Table des matières

Activité Intégrer une carte OpenStreetMap dans une page Web

Présentation

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 :

Découvrir les usages possibles d'OpenStreepMap

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 :

Utilisation de l'API OpenStreetMap avec Leaflet

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/

Création de la page web

Intégrer la bibliothèque Leaflet

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 :

  • la balise <link …/> permet d'utiliser le fichier leaflet.css des styles CSS en indiquant le lien internet de téléchargement (CDN) ;
  • la balise <script ..>…</script> permet d'utiliser le fichier leaflet.js javascript en indiquant le lien internet de téléchargement (CDN) ;
  • Le bloc div est destiné à contenir la carte et il est identifié avec son id (id=“carte”). Pour préciser la dimension de la carte, il faut indiquer sa hauteur, sa largeur ou les deux en modifiant le style CSS du div.

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;
 }
  • Ajoute la balise <link …/> dans la page html pour que celle-ci prenne en compte la feuille de style:
<link rel="stylesheet" href="style.css" />

Affichage de la carte de sa ville

Accède au site d'OpenStreetMap pour rechercher la géolocalisation de ta ville :

  • fait une recherche sur le nom de ta ville,
  • clique-droit sur le point trouvé pour afficher son adresse (indiqué dans la fenêtre de résultats à gauche)

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 )

Intégrer la carte dans la page

Crée un fichier carte.js et ajoute le code suivant en personnalisant :

  • la latitude et la longitude.
// 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 &copy; <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.

  • Ajoute cette balise à la fin du fichier HTML, avant la balise </body>:
   <script type="text/javascript" src="carte.js"></script>

Le résultat avec Trinket.io

Ajout d'un marqueur

Ajoute à la fin du fichier carte.js le code suivant : 

// Nous ajoutons un marqueur
var marqueur = L.marker([lat, lon]).addTo(macarte);

Explications :

  • le mot clé var crée une variable qui a comme nom marqueur ;
  • la variable marqueur est créée à partir de la méthode (fonction) marker de l'objet L de la bibliothèque de Leaflet ;
  • la méthode addTo() permet d'ajouter le nouveau marqueur sur la carte en précisant son nom (macarte).

Ajout plusieurs marqueurs

Tout d'abord, créons une variable villes contenant plusieurs villes avec leur coordonnées, en utilisant un tableau associatif de Javascript.

  • ajoute au début du fichier carte.js la variable villes avec les informations suivantes : 
// 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 }
};
  • Voici comment accéder aux informations du tableau associatif ville en javascript :
// pour à une ville particulière
villes["Landouge"]
// pour accéder à sa latitude
villes["Landouge"].lat
  • utilisation de la boucle for pour parcourir tout le tableau associatif et créer autant de marqueur qu'il y a de villes ; les variables marqueurs de chaque ville seront également mémorisés dans une tableau associatif marqueurs.
// 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);

Les bulles d'information

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);

Le résultat avec Trinket.io

Gérer les événements

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

  • définition de la fonction à exécuter :
// 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
// faire exécuter la fonction lors du clic sur la carte
macarte.on('click', onMapClick);

Le résultat avec Trinket.io

Pour aller plus loin

Activité Les langages pour créer des sites Web ...

isn/openstreetmap1.txt · Dernière modification: 2019/03/11 12:18 (modification externe)

Outils de la page

Sauf mention contraire, le contenu de ce wiki est placé sous les termes de la licence suivante : CC Attribution-Noncommercial-Share Alike 4.0 International
CC Attribution-Noncommercial-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki