Les cours du BTS SIO

Cette page est en lecture seule. Vous pouvez afficher le texte source, mais ne pourrez pas le modifier. Contactez votre administrateur si vous pensez qu'il s'agit d'une erreur.
====== 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.
<WRAP center round info>
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.
</WRAP>

OpenStreetMap : 
  *  le site : https://www.openstreetmap.org
  * le wiki de l'API : https://wiki.openstreetmap.org/wiki/API

===== 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 : 
  * http://www.openstreetmap.fr/utiliser/

===== Utilisation de l'API OpenStreetMap avec Leaflet =====

L'intégration d'un carte et sa gestion va se faire avec la **librairie Javascript Leaflet**.
<WRAP center round info>
**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/
</WRAP>

===== Création de la page web =====
==== Intégrer la bibliothèque Leaflet====

Voici le contenu à mettre dans la page web pour **utiliser Leaflet**.
<code html>
<!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>
</code>
<WRAP center round info>
**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**.
</WRAP>

<WRAP center round important >
Crée un fichier **style.css** et ajoute les informations suivantes pour le bloc div :
<code css>
#carte {
   /* la carte DOIT avoir une hauteur sinon elle n'apparaît pas */
  height:400px;
 }
</code>
  * Ajoute la balise **<link .../>** dans la **page html** pour que celle-ci prenne en compte la feuille de style:
<code css>
<link rel="stylesheet" href="style.css" />
</code>
</WRAP>
  
==== Affichage de la carte de sa ville====
<WRAP center round important>
**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 )
</WRAP>

==== 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.
<code javascript>
// 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);
</code>
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>**:
<code html>
   <script type="text/javascript" src="carte.js"></script>
</code>
==== Le résultat avec Trinket.io ====
<html>
<iframe src="https://trinket.io/embed/html/fcb6b4bd38" width="100%" height="600" frameborder="0" marginwidth="0" marginheight="0" allowfullscreen></iframe>
</html>

==== Ajout d'un marqueur ====
**Ajoute** à la fin du fichier **carte.js** le code suivant :
<code javascript>
// Nous ajoutons un marqueur
var marqueur = L.marker([lat, lon]).addTo(macarte);
</code>
<WRAP center round info>
**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).   
</WRAP>

==== 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 : 
<code 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 }
};
</code> 
    * Voici comment accéder aux informations du **tableau associatif** ville en javascript :
<code javascript>
// pour à une ville particulière
villes["Landouge"]
// pour accéder à sa latitude
villes["Landouge"].lat
</code>
  * 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**.
<code javascript>
// 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);
</code>
==== Les bulles d'information ====
Une **bulle d'information** peut être affichée quand on clique sur un marqueur :
<code javascript>
// 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);
</code>

==== Le résultat avec Trinket.io ====
<html>
<iframe src="https://trinket.io/embed/html/4a765107a7" width="100%" height="600" frameborder="0" marginwidth="0" marginheight="0" allowfullscreen></iframe>
</html>

===== 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 :
<code javascript>
// 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);
}
</code>
  * **faire exécuter** la fonction lors du **clic** sur la carte
<code javascript>
// faire exécuter la fonction lors du clic sur la carte
macarte.on('click', onMapClick);
</code>
==== Le résultat avec Trinket.io ====
<html>
<iframe src="https://trinket.io/embed/html/f2b8462e01" width="100%" height="600" frameborder="0" marginwidth="0" marginheight="0" allowfullscreen></iframe>
</html>
==== Pour aller plus loin ====
  * https://nouvelle-techno.fr/actualites/2018/05/11/pas-a-pas-inserer-une-carte-openstreetmap-sur-votre-site
  * https://leafletjs.com/examples/quick-start/
  * [[http://www.openstreetmap.fr/|Découvrir les activités du site OpenStreetMap France]]


==== Activité Les langages pour créer des sites Web ... ====
<WRAP center round info >
  * [[isn:langageweb|Les langages pour créer des sites Web]]
</WRAP>