Différences

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

--- web:javascript:leaflet [2026/05/04 16:17] – mno
+++ web:javascript:leaflet [2026/05/04 17:05] (Version actuelle) – [3. Création de la carte] mno
@@ 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 95: / Ligne 96: @@
 === 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>
+<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 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 194: / Ligne 195: @@
     }, delaiMesure);
 </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>