Différences

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

--- web:javascript:leaflet [2026/03/24 11:07] – [3. Création de la carte] mno
+++ web:javascript:leaflet [2026/05/04 17:05] (Version actuelle) – [3. Création de la carte] mno
@@ Ligne 3: / Ligne 3: @@
 ===== JavaScript (jQuery) - Créer une carte Leaflet =====
 {{ :web:javascript:leaflet1.jpg?nolink|}}
-[Mise à jour le 11/6/2025]
+[Mise à jour le 4/5/2026]
 \\
@@ Ligne 68: / Ligne 68: @@
  <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 -->
+ <!-- Remplacer x.x.x par la version de la bibliothèque utilisée dans le projet -->
+ <script src="scripts/jquery-x.x.x.min.js"></script>
  <script type="text/javascript" src="scripts/geolocalisation.js"></script>
 </code>
@@ Ligne 89: / Ligne 90: @@
     </code>
-=== 3.2 Code du fichier geolocalisation.js ===
 <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. \\
@@ Ligne 95: / Ligne 95: @@
 </callout>
-<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>
+=== 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**
@@ Ligne 115: / Ligne 116: @@
 </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.). \\
+      * **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.
+      * **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**
@@ Ligne 125: / Ligne 126: @@
 </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.
+      * 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)
@@ Ligne 150: / Ligne 151: @@
   * **Etape 5. Gérer la communication avec la carte Arduino**
-    * **Ressource** :
+    * **Ressource** : <html><a href="https://webge.fr/dokuwiki/doku.php?id=web:javascript:serveurhttp#lecture_de_n_valeurs_transmises_au_format_json" target="_blank">C++ & jQuery - Communiquer avec une carte à microcontrôleur</a></html>
-    * **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//.
+    * **Explication du code ci-dessous** \\ On suppose que la fonction //chargerCoordonnees// a reçu l'objet au format JSON :**{"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. Ces potentiomètres simulent la latitude et la longitude // \\ \\ Cet objet est contenu dans la variable **data**. \\ On récupère la valeur de la latitude et de la longitude avec : \\ - **data.val0** \\ - **data.val1** \\ 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"]>
@@ Ligne 163: / Ligne 164: @@
             dataType: 'json',
             success: function (data) {
-                $.each(data, function (entryIndex, entry) {
+                    // Pour les tests, on souhaite 0 < val0 < 1023 => 47.01328 < latitude < 47.07970
-                    // 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;
+                    latitude = a * parseFloat(data.val0) + b;
-                    // Pour les tests, on souhaite 0 < val1 < 1000 => 2.199468 < longitude < 2.409102
+                    // Pour les tests, on souhaite 0 < val1 < 1023 => 2.199468 < longitude < 2.409102
                     // Calculer la valeur de c et de d et les remplacer ci-dessous
-                    longitude = c * parseFloat(entry.val1) + d;
+                    longitude = c * parseFloat(data.val1) + d;
                     // Afficher les valeurs numériques
@@ Ligne 181: / Ligne 181: @@
                     });
                     marker = L.marker([latitude, longitude]).addTo(map);
-                })
             },
             timeout: delaiError,
@@ Ligne 195: / Ligne 194: @@
         loadCoordinates()
     }, delaiMesure);
-</code>
+</code> \\ \\ **Résultat attendu**
+{{ :web:javascript:resultat_attendu_gps.png?nolink&500 |}}
 <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>