web:javascript:leaflet [WebGE]

[Mise à jour le 11/6/2025]

Ressources

Généralités sur zestedesavoir.com
Site coordonnees-gps.fr
Site Leaflet : tutoriels
Vidéo Les coordonnées géographiques, latitude, longitude, UTM

Prérequis

Base de HTML, de CSS et de JavaScript (jQuery).

“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 plug-ins , dispose d'une API élégante, facile à utiliser et bien documentée, ainsi que d'un code source simple et lisible.” source Leaflet

Objectif

Créer une carte interractive (projet de la spécialité SIN du baccalauréat STI2D, etc.).

Principe retenu

Matériels

PC
Raspberry Pi
Arduino MKR1010 + GPS Groove (Air530 ou potentiomètres pour les tests)

Bibliothèques JavaScript

jQuery
Leaflet

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

Présentation

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.

Créer un fichier outilleaflet.html contenant le code ci-dessous à la racine de votre dossier projet (GeneriqueWifi).

*.html

<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <title>nomprojet outilleaflet</title>
</head>
<body>
 
</body>
</html>

Placer les liens suivants à la suite de title

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

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.

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

Dimensionner la carte avec une règle CSS (à placer dans l'en-tête du document à la suite des balises script).

*.css

    <style>
        #map {
            width: /*A compléter*/;
            height: /*A compléter*/;
        }
    </style>

3.2 Code du fichier geolocalisation.js

Présentation

Le fichier geolocalisation.js contient le code partiel de la carte et de la communication avec une Arduino MKR Wifi 1010.

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.
  *.js
  $(document).ready(function () {
  // L'ensemble du code doit être placé ici
  });

TELECHARGEMENT

Télécharger ICI 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.

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
  *.js
  let initLatitude = /* A compléter */; let initLongitude = /* A compléter */;

Etape 2. Créer et initialiser la carte
- Ressource : la classe Map
  Le document contient le code ci-dessous.
  *.js
  let map = L.map('map').setView([initLatitude, initLongitude], zoom);
- 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 TileLayer
  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.
  *.js
  L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { attribution: '© <a href="https://osm.org/copyright">OpenStreetMap</a> contributors' }).addTo(map);
- 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.
  *.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 © <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);*/

Etape 4. Ajouter un marqueur sur la carte
- Ressource : la méthode Marker
  *.js
  let marker = L.marker([initLatitude, initLongitude]).addTo(map);
- Explications
  - Voir les explications de l'étape 2.

Affichage de la carte

Entrer l'URL permettant d'accéder à outilleaflet.html sur le serveur. La carte doit s'afficher comme ci-dessous.

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.

*.js

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

Pour aller plus loin...

La communication avec la carte Arduino est réalisée par la méthode $.ajax 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 JSON (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.

Présentation

Le fichier lireval0et1.php “fait le lien” entre le navigateur et la carte Arduino.

Etape 6. Modifier l'url pour l'adapter à la carte à microcontrôleur utilisée

*.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);
?>

Améliorations

Apporter des améliorations (personnaliser les marqueurs, les relier entre-eux, etc.) à votre projet en vous aidant de la documentation de Leaflet ou en consultant le tutoriel sur le site zestedesavoir.

TELECHARGEMENT

Le code destiné à une carte Arduino (MKR Wifi 1010) est disponible ICI

JavaScript (jQuery) - Créer une carte Leaflet

Ressources

Prérequis

1. La bibliothèque Leaflet

2. Présentation du projet

Objectif

3. Création de la carte

3.1 Code du fichier outilleaflet.html

Présentation

3.2 Code du fichier geolocalisation.js

Présentation

TELECHARGEMENT

Affichage de la carte

Pour aller plus loin...

4. Code du fichier lireval0et1.php

Présentation

5. Pour aller plus loin ...

Améliorations

6. Code de la carte Arduino MKR Wifi 1010

TELECHARGEMENT

WebGE