Animer les marqueurs d'une carte interactive

Comment réaliser des marqueurs mobiles avec leaflet en javascript ?

2 juillet 2015

Marqueurs animés sur la carte interactive de Lyon

Introduction

Dans un précédent article, nous avons décrit comment réaliser une carte interactive maison, nous souhaitons maintenant animer un ensemble de marqueurs pour qu'ils suivent un chemin.

Nous avons développé un plug-in pour leaflet nommé js-leaflet-animated qui permet d'animer un ou plusieurs marqueurs sur une carte en suivant un parcours.

Nous nous sommes inspiré d'un exemple réalisé par openplans.

Nous avons utilisé notre plug-in pour animer des éléments sur la carte de notre Portail Web Lyonnais.

Fonctionnement

Le marqueur se déplace en suivant un tracé défini par des coordonnées GPS (latitude et longitude).

On indique la vitesse de déplacement du marqueur en m/s (mètre par seconde).

Pour cliquer facilement sur le marqueur, il s'arrête lorsque le pointeur de la souris est dessus et redémarre lorsque le pointeur est en dehors.

Une fois que le marqueur a parcouru le chemin, il recommence son déplacement dans le sens inverse.

L'animation est stoppée lorsque la page n'est plus visible (changement d'onglet) et redémarre une fois visible.

Exemples d'utilisation

//l'url de test
var host = "http://lyon.glicer.com/";

//créer l'icône du vaporeto
var iconVaporeto = L.icon({
    iconUrl: host + '/img/markermap/vaporeto.png',
    iconSize: [48, 48],
    iconAnchor: [24, 24]
});

//créer le chemin à parcourir sous forme d'un ensemble de points gps
var pathVaporeto = L.polyline([
    [45.767662, 4.821465],
    [45.767668, 4.827387],
    [45.764887, 4.830295],
    [45.761890, 4.830151],
    [45.758972, 4.828184],
    [45.756644, 4.825809],
    [45.753922, 4.824376],
    [45.751732, 4.822665],
    [45.749795, 4.819693],
    [45.747416, 4.816353],
    [45.744802, 4.813936],
    [45.742893, 4.813782],
    [45.741433, 4.818652]
]);

// créer le marqueur vaporeto
// il se déplacera à une vitesse de 64 m/s
var vaporeto = L.GlAnimatedMarker(pathVaporeto.getLatLngs(), { icon: iconVaporeto, speed: 64 });

// Fonction appelée à chaque clique sur le vaporeto
vaporeto.on("click", function () {
    console.log("vaporeto clicked");
});

// Ajouter le vaporeto à la carte
leafletmap.addLayer(vaporeto);

Exemple complet html + javascript.

Compatibilité

Le plugin utilise CSS3 et la fonctionnalité visibilitychange.

NameVersion
Chrome33
Firefox18
IE10
Opera12.10
Safari6.1

Versions des logiciels et langages utilisés