Table des matières

Sommaire Web

JavaScript (jQuery) - Créer une carte Leaflet

[Mise à jour le 11/6/2025]


Ressources

Prérequis

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


2. Présentation du projet

Objectif

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

Principe retenu

Matériels

Bibliothèques JavaScript


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

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.

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.

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.

Affichage de la carte

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

*.js 
  1. function chargerCoordonnees() {
  2.         let latitude;
  3.         let longitude;
  4.  
  5.         $.ajax({
  6.             url: 'scripts/lireval0et1.php',
  7.             type: 'get',
  8.             dataType: 'json',
  9.             success: function (data) {
  10.                 $.each(data, function (entryIndex, entry) {
  11.                     // Pour les tests, on souhaite 0 < val0 < 1000 => 47.07970 < latitude < 47.01328
  12.                     // Calculer la valeur de a et de b et les remplacer ci-dessous
  13.                     latitude = a * parseFloat(entry.val0) + b;
  14.                     // Pour les tests, on souhaite 0 < val1 < 1000 => 2.199468 < longitude < 2.409102
  15.                     // Calculer la valeur de c et de d et les remplacer ci-dessous
  16.                     longitude = c * parseFloat(entry.val1) + d;
  17.  
  18.                     // Afficher les valeurs numériques
  19.                     $('#latitude').html(/*A compléter*/);
  20.                     $('#longitude').html(/*(A compléter*/);
  21.  
  22.                     // Afficher un marqueur sur la carte (objet map)
  23.                     map.flyTo([latitude, longitude], zoom, {
  24.                         animate: true,
  25.                         duration: 2 // en secondes
  26.                     });
  27.                     marker = L.marker([latitude, longitude]).addTo(map);
  28.                 })
  29.             },
  30.             timeout: delaiError,
  31.             error: function () {
  32.                 // pour aller plus loin
  33.             }
  34.         });
  35.     }
  36.  
  37.     loadCoordinates(); // premier appel de la fonction
  38.  
  39.     setInterval(function () { // appel de la fonction toutes les delaiMesure ms
  40.         loadCoordinates()
  41.     }, 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.


4. Code du fichier lireval0et1.php

Présentation

Le fichier lireval0et1.php “fait le lien” entre le navigateur et la carte Arduino.
*.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);
?>


5. Pour aller plus loin ...

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.


6. Code de la carte Arduino MKR Wifi 1010

TELECHARGEMENT

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