Client Webmapping - Leaflet

Exercice - Première carte + Géolocalisation

• (créez une nouvelle route /map et une vue associée leaflet.php)
• utilisez l’API Leaflet et affichez la map
  • suivez le tutoriel du site
  • éventuellement, voilà une liste de provider de tuiles (attention, certains nécessitent un token)
• utilisez l’API de géolocalisation pour vous positionner sur la carte
  • créez un marqueur et centrez la map à ces coordonnées

Bonus

Ajoutez un bloc avec les coordonnées géographiques qui suit la position de la souris sur la map

• ajoutez une div#coords n’importe où dans la page
• ajoutez l’événement Leaflet mousemove sur la map
  • récupérez la div#coords
  • modifiez son contenu (avec les coordonnées géographiques récupérées de la map) (event.latlng)
  • modifiez son CSS (avec les coordonnées pixels de la souris: position: absolute, top et left, z-index)
• n’activez cette option que lorsqu’une checkbox est cochée (.checked)

Géolocalisation

Permet de récupérer la position géographique de l'utilisateur, basé sur son IP, triangulation WIFI/GSM/3G ou sur puce GPS si l'appareil en dispose.

Affiche les coordonnées de l'utilisateur

navigator.geolocation.getCurrentPosition(function (position) {
    console.log(position.coords.latitude, position.coords.longitude, position.coords.altitude);
});

Pour suivre la position, une autre méthode est disponible:

Suivi de la position

navigator.geolocation.watchPosition(function (position) {
    console.log(position.coords.latitude, position.coords.longitude, position.coords.altitude);
});

Attention, les fonctions getCurrentPosition et watchPosition sont asynchrones. Une fonction de callback est donc nécessaire.

Une gestion des erreurs est également possible:

Gestion des erreurs

function watch (pos) { }
function error (err) {
    switch (err.code) {
        case err.TIMEOUT:
        break;
        case err.PERMISSION_DENIED:
        break;
        case err.POSITION_UNAVAILABLE:
        break;
        case err.UNKNOWN_ERROR:
        break;
    }
}
let suivi = navigator.geolocation.watchPosition(watch, error);

// annuler le suivi
navigator.geolocation.clearWatch(suivi);

Webmapping

Pour aller plus loin sur le webmapping, voir la partie dédiée