Ma carte

====== 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 : * 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**. **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**.

**Explications :** * la balise **** permet d'utiliser le fichier **leaflet.css** des styles CSS en indiquant le lien internet de téléchargement (CDN) ; * la balise 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 **** dans la **page html** pour que celle-ci prenne en compte la feuille de style:

==== 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 © OpenStreetMap contributors, CC-BY-SA, Imagery © Mapbox',
    maxZoom: 20,
}).addTo(macarte);

Maintenant ajoute dans la page HTML la balise **** pour utiliser ton fichier **carte.js**. * Ajoute cette balise à la **fin du fichier HTML**, avant la balise ****:

==== 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("Hello world!
Je suis un popup.").openPopup();
// Préparer un contenu HTML avant de l'associer à un popup
contenuHTML = "Vous êtes à Feytiat. ";
contenuHTML += " 
Le site du lycée Valadon ";
contenuHTML +=  "Lycée Suzanne Valadon";
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 ==== * 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 ... ==== * [[isn:langageweb|Les langages pour créer des sites Web]]