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//. \\ \\
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap 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//.
// 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 © OpenStreetMap contributors, Imagery © Mapbox',
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 \\ \\
let marker = L.marker([initLatitude, initLongitude]).addTo(map);
* **Explications** \\
* Voir les explications de l'étape 2.
Entrer l'URL permettant d'accéder à //outilleaflet.html// sur le serveur. La carte doit s'afficher comme ci-dessous.
{{ :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//.
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);
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 ====
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**
\\
====5. Pour aller plus loin ... ====
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 ====
Le code destiné à une carte Arduino (MKR Wifi 1010) est disponible ICI