web:javascript:leaflet

Différences

Ci-dessous, les différences entre deux révisions de la page.

Lien vers cette vue comparative

web:javascript:leaflet [2025/06/11 10:40] – [5. Pour aller plus loin ...] mnoweb:javascript:leaflet [2025/06/19 19:29] (Version actuelle) – modification externe 127.0.0.1
Ligne 1: Ligne 1:
 +[[web:accueilweb|{{ :iconemaison.jpg?nolink&25|Sommaire Web}}]]
  
 +===== JavaScript (jQuery) - Créer une carte Leaflet =====
 +{{ :web:javascript:leaflet1.jpg?nolink|}}
 +[Mise à jour le 11/6/2025]
 +
 +\\
 +
 +=== Ressources ===
 +  * Généralités sur <html><a href="https://zestedesavoir.com/tutoriels/1365/des-cartes-sur-votre-site/" target="_blank">zestedesavoir.com</a></html>
 +  * Site <html><a href="https://www.coordonnees-gps.fr/" target="_blank">coordonnees-gps.fr</a></html>
 +  * Site Leaflet : <html><a href="https://leafletjs.com/examples/quick-start/" target="_blank">tutoriels</a></html>
 +  * Vidéo <html><a href="https://www.youtube.com/watch?v=O7YKyTW6sQ8" target="_blank">Les coordonnées géographiques, latitude, longitude, UTM</a></html>
 +
 +=== Prérequis ===
 +  * Base de HTML, de CSS et de JavaScript (jQuery).
 +
 +----
 +
 +==== 1. La bibliothèque Leaflet ====
 +"//Leaflet est la bibliothèque JavaScript open source leader pour les cartes interactives mobiles. Avec un poids d'environ 42 Ko , elle offre toutes les fonctionnalités de cartographie dont la plupart des développeurs ont besoin.
 +
 +Leaflet a été conçu dans un souci de simplicité , de performance et de convivialité . Elle fonctionne efficacement sur les principales plateformes de bureau et mobiles, peut être étendue grâce à de nombreux <html><a href="https://leafletjs.com/plugins.html" target="_blank">plug-ins</a></html> , dispose d'une <html><a href="https://leafletjs.com/reference.htmltarget="_blank">API élégante, facile à utiliser et bien documentée, ainsi que d'un code source</a></html> simple et lisible.//" source <html><a href="https://leafletjs.com/examples/quick-start/" target="_blank">Leaflet</a></html>
 +{{ :web:javascript:leaflet2.png?nolink |}}
 +
 +\\
 +
 +==== 2. Présentation du projet ====
 +<callout type="info" title="Objectif" icon="true">Créer une **carte interractive** (projet de la spécialité SIN du baccalauréat STI2D, etc.).</callout> 
 +
 +**Principe retenu**
 +{{ :web:javascript:principecom.png?nolink |}}
 +
 +**Matériels**
 +  * PC
 +  * Raspberry Pi
 +  * Arduino MKR1010 + GPS Groove (Air530 ou potentiomètres pour les tests)
 +
 +**Bibliothèques JavaScript**
 +  * jQuery
 +  * Leaflet
 +
 +\\
 +
 +
 +
 +==== 3. Création de la carte ====
 +La création de la carte est guidée dans la suite de ce document. Le code sera placé dans les fichiers suivants : **outilleaflet.html**, **geolocalisation.js** et **lireval0et1.php**.
 +
 +\\
 +=== 3.1 Code du fichier outilleaflet.html ===
 +<callout type="info" title="Présentation" icon="true">**//outilleaflet.html//** contiendra les liens vers les fichiers des bibliothèques Leaflet et jQuery, le lien vers le code de la carte et une zone réservée à l'affichage de la carte dans le navigateur.</callout>
 +
 +  * **Créer** un fichier **outilleaflet.html** contenant le code ci-dessous à la racine de votre dossier projet (<html><a href="https://webge.fr/doc/projets/tsin/00_Ressources_communes/GeneriqueWifi.zip" target="_blank">GeneriqueWifi</a></html>). <code html *.html>
 +<!DOCTYPE html>
 +<html >
 +<head>
 +    <meta charset="UTF-8">
 +    <title>nomprojet outilleaflet</title>
 +</head>
 +<body>
 +    
 +</body>
 +</html>
 +</code>
 +
 +  * **Placer** les liens suivants à la suite de //title// <code html *.html>
 + <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin=""/>
 + <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
 + <script src="scripts/jquery-x.x.x.min.js"></script><!-- Remplacer x.x.x par la version de la bibliothèque utilisée dans le projet -->
 + <script type="text/javascript" src="scripts/geolocalisation.js"></script>
 +</code>
 +  * **Placer** une div nommée **//map//**, destinée à accueillir la carte dans le corps du document. Placer les div latitude et longitude utilisées dans les tests de communication.<code html *.html>
 +<body>
 +    <div id="map"></div>
 +    <!-- Placer les coordonnées géographiques du lycée -->
 +    Latitude : <div id="latitude">A compléter</div>
 +    Longitude : <div id="longitude">A compléter</div>
 +</body>
 +</code>
 +
 +  * **Dimensionner** la carte avec une règle CSS (à placer dans l'en-tête du document à la suite des balises script). <code css *.css>
 +    <style>
 +        #map {
 +            width: /*A compléter*/;
 +            height: /*A compléter*/;
 +        }
 +    </style>
 +    </code>
 +
 +=== 3.2 Code du fichier geolocalisation.js ===
 +<callout type="info" title="Présentation" icon="true">Le fichier **//geolocalisation.js//** contient le code partiel de la carte et de la communication avec une Arduino MKR Wifi 1010.</callout>
 +
 +  * **REMARQUE IMPORTANTE**
 +    * La première ligne du fichier doit être la ligne 1 ci-dessous et la dernière, la ligne 3. En effet, la méthode **.ready()** est utilisée pour s'assurer que le code à l'intérieur de la fonction ne s'exécute qu'une fois que le DOM est complètement chargé et prêt à être manipulé. Cela garantit que tous les éléments HTML de la page sont disponibles avant que le script ne tente de les modifier ou d'y attacher des événements. \\ \\ <code javascript *.js [enable_line_numbers="true"]>
 +$(document).ready(function () {
 +    // L'ensemble du code doit être placé ici
 +});
 +</code>
 +
 +<callout type="warning" color="red" title="TELECHARGEMENT" icon="true">**Télécharger** <html><a href="https://webge.fr/doc/projets/tsin/00_Ressources_communes/Leaflet_fichiers_E.zip" target="_blank"><b>ICI</b></a></html> les fichiers //geolocalisation.js// et //lireval0et1.php//. Les placer dans le sous-dossier scripts du projet. \\ \\ **Remarques** \\
 +- Les indications ci-dessous vous aideront à compléter les fichiers téléchargés. \\ 
 +- Les intitulés sont repris dans les fichiers.
 +</callout>
 +
 +  * **Etape 1. Fixer des coordonnées initiales** sur la carte 
 +    * **Rechercher** les coordonnées du bâtiment Moreno du lycée Pierre Emile Martin - Bourges et compléter le code du fichier //geolocalisation.js// \\ \\ <code javascript *.js>
 +    let initLatitude = /* A compléter */;
 +    let initLongitude = /* A compléter */;
 +</code>
 +
 +  * **Etape 2. Créer et initialiser la carte** 
 +    * **Ressource** : la classe <html><a href="https://leafletjs.com/reference.html#map-example" target="_blank">Map</a></html> \\ Le document contient le code ci-dessous. \\ \\ <code javascript *.js>
 +    let map = L.map('map').setView([initLatitude, initLongitude], zoom); 
 +</code>
 +    * **Explications** \\
 +      * let map : La variable nommée map est déclarée pour stocker l'objet carte créé par Leaflet. Cet objet contiendra toutes les informations et fonctionnalités associées à la carte (comme les marqueurs, les calques, les événements, etc.). \\
 +      * L.map('map') : La méthode L.map() est utilisée pour créer une nouvelle carte Leaflet. Elle prend comme argument l'ID d'un élément HTML (dans ce cas, 'map'). Cet élément doit exister dans le fichier HTML et correspond généralement à une <div> où la carte sera rendue.
 +
 +  * **Etape 3. Ajouter un calque de tuiles à la carte**
 +    * **Ressource** : la méthode <html><a href="https://leafletjs.com/reference.html#tilelayer-url-template" target="_blank">TileLayer</a></html> \\ Les tuiles sont des images "raster" (pixel) ou vectorielles qui composent visuellement la carte en arrière-plan. Elles sont généralement récupérées depuis un serveur de cartographie, comme OpenStreetMap ou Mapbox. \\ \\ **Placer** le code ci-dessous dans le fichier //geolocalisation.js//. \\ \\ <code javascript *.js>
 +    L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
 +        attribution: '&copy; <a href="https://osm.org/copyright">OpenStreetMap</a> contributors'
 +    }).addTo(map);
 +</code>
 +    * **Explications** \\
 +      * La sélection L.tileLayer fait référence à une méthode de la bibliothèque Leaflet utilisée pour ajouter des calques de tuiles (ou "tile layers") à une carte interactive.
 +    * **Remarque** : //Il est important de noter que Leaflet est indépendant du fournisseur, ce qui signifie qu'il n'impose aucun choix particulier de fournisseurs pour les tuiles. De plus, Leaflet ne contient aucune ligne de code spécifique à un fournisseur ; vous êtes donc libre d'utiliser d'autres fournisseurs si nécessaire//. <code javascript *.js>
 +    // Exemple : mapbox propose des tuiles plus complètes (nécessite un jeton que l'on peut obtenir sur le site)
 +    /*L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
 +        attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
 +        maxZoom: 19,
 +        id: 'mapbox/streets-v11',
 +        tileSize: 512,
 +        zoomOffset: -1,
 +        accessToken: ''
 +    }).addTo(map);*/
 +</code>
 +
 +  * **Etape 4. Ajouter un marqueur sur la carte**
 +    * **Ressource** : la méthode <html><a href="https://leafletjs.com/reference.html#marker" target="_blank">Marker</a></html> \\ \\ <code javascript *.js>
 +    let marker = L.marker([initLatitude, initLongitude]).addTo(map);
 +</code>
 +    * **Explications** \\
 +      * Voir les explications de l'étape 2.
 +
 +<callout type="success" color="green" title="Affichage de la carte" icon="true">Entrer l'URL permettant d'accéder à //outilleaflet.html// sur le serveur. La carte doit s'afficher comme ci-dessous.</callout>
 +
 +{{ :web:javascript:carteleafletinit.png?nolink |}}
 +
 +  * **Etape 5. Gérer la communication avec la carte Arduino**
 +    * **Ressource** : 
 +    * **Explication du code ci-dessous** \\ On suppose que la fonction //chargerCoordonnees// a reçu la table au format JSON suivante :**[{"val0":237,"val1":771}]**. \\ //Remarque : ces valeurs correspondent à la position angulaire de deux potentiomètres reliés aux entrées A0 et A1 d'une carte Arduino MKR Wifi 1010.// \\ \\ Cette table est contenue dans la variable **data**. \\ La méthode **each** de l'objet jQuery extrait le contenu de la table. On obtient : \\ - **enrty.val0** = 237 \\ - **entry.val1** = 771 \\ Pour les tests avec des potentiomètres, ces valeurs doivent être adaptées pour qu'un curseur s'affiche aux alentours de Bourges.  \\ \\ **Renseigner** les lignes de code mises en surbrillance dans le fichier //geolocalisation.html//. 
 +
 +<code javascript *.js [enable_line_numbers="true",highlight_lines_extra="13,16,19,20"]>
 +function chargerCoordonnees() {
 +        let latitude;
 +        let longitude;
 +
 +        $.ajax({
 +            url: 'scripts/lireval0et1.php',
 +            type: 'get',
 +            dataType: 'json',
 +            success: function (data) {
 +                $.each(data, function (entryIndex, entry) {
 +                    // Pour les tests, on souhaite 0 < val0 < 1000 => 47.07970 < latitude < 47.01328
 +                    // Calculer la valeur de a et de b et les remplacer ci-dessous
 +                    latitude = a * parseFloat(entry.val0) + b;
 +                    // Pour les tests, on souhaite 0 < val1 < 1000 => 2.199468 < longitude < 2.409102
 +                    // Calculer la valeur de c et de d et les remplacer ci-dessous
 +                    longitude = c * parseFloat(entry.val1) + d;
 +
 +                    // Afficher les valeurs numériques
 +                    $('#latitude').html(/*A compléter*/);
 +                    $('#longitude').html(/*(A compléter*/);
 +
 +                    // Afficher un marqueur sur la carte (objet map)
 +                    map.flyTo([latitude, longitude], zoom, {
 +                        animate: true,
 +                        duration: 2 // en secondes
 +                    });
 +                    marker = L.marker([latitude, longitude]).addTo(map);
 +                })
 +            },
 +            timeout: delaiError,
 +            error: function () {
 +                // pour aller plus loin
 +            }
 +        });
 +    }
 +
 +    loadCoordinates(); // premier appel de la fonction
 +
 +    setInterval(function () { // appel de la fonction toutes les delaiMesure ms
 +        loadCoordinates()
 +    }, delaiMesure);
 +</code>
 +
 +<callout type="info" title="Pour aller plus loin..." icon="true">La communication avec la carte Arduino est réalisée par la méthode <html><a href="https://developer.mozilla.org/fr/docs/Glossary/AJAX" target="_blank"><b>$.ajax</b></a></html> de jQuery (située dans la fonction //**loadCoordinates**//) pour effectuer une requête HTTP asynchrone vers un serveur. Elle est conçue pour récupérer des données <html><a href="https://fr.wikipedia.org/wiki/JavaScript_Object_Notation" target="_blank"><b>JSON</b></a></html> (la latitude et la longitude) depuis un fichier PHP, traiter ces données, mettre à jour la carte et afficher la valeur de la latitude et la longitude dans la page html. \\ On pourra utiliser Copilot pour avoir une description détaillée du code fonctionnel.</callout>
 +
 +\\
 +
 +==== 4. Code du fichier lireval0et1.php ====
 +<callout type="info" title="Présentation" icon="true">Le fichier **//lireval0et1.php//** "fait le lien" entre le navigateur et la carte Arduino.</callout>
 +
 +  * **Etape 6. Modifier l'url pour l'adapter à la carte à microcontrôleur utilisée**
 +<code php *.php>
 +<?php
 +  // URL à modifier en fonction de l'@IP et du programme de la carte Arduino 
 +  $service_url = "http://192.168.231.51/lire/vals0et1"; // URL à modifier
 +  $curl = curl_init($service_url);
 +   
 +  // Envoi cURL à la carte Arduino
 +  curl_setopt($curl, CURLOPT_IPRESOLVE, CURL_IPRESOLVE_V4); 
 +  curl_exec($curl);
 +  curl_close($curl);
 +?>
 +</code>
 +
 +\\
 +
 +====5. Pour aller plus loin ... ====
 +<callout type="info" title="Améliorations" icon="true">Apporter des améliorations (personnaliser les marqueurs, les relier entre-eux, etc.) à votre projet en vous aidant de la documentation de <html><a href="https://leafletjs.com/index.html" target="_blank">Leaflet</a></html> ou en consultant le tutoriel sur le site <html><a href="https://zestedesavoir.com/tutoriels/1365/des-cartes-sur-votre-site/" target="_blank">zestedesavoir</a></html>.</callout>
 +
 +\\
 +
 +==== 6. Code de la carte Arduino MKR Wifi 1010 ====
 +<callout type="tip" title="TELECHARGEMENT" icon="true">Le code destiné à une carte Arduino (MKR Wifi 1010) est disponible <html><a href="https://webge.fr/doc/wikis/code/Arduino/ARD_MKR1010_HTTP_SERVER.zip" target="_blank"><b>ICI</b></a></html></callout>