Ajout d’interactivité
Au niveau interactivités nous voulons :
- Au survol d’une ligne, qu’elle soit surlignée
- Au survol d’une station, que son marqueur s’agrandisse
- Au survol des 2, affichage dans un encart des informations de l’élément survolé
Pour l’ajout de ces interactions, pour les deux calques GeoJSON on va utiliser un paramètre « onEachFeature », qui correspond à une fonction exécutée pour chaque feature.
Cette fonction permet d’attacher des listener d’événements (dans notre cas, « mouseover » et « mouseout »).
Ajout de l’encart
Mais avant d’ajouter ces interactions, il faut d’abord ajouter l’encart. Pour Leaflet, l’encart correspond à un contrôle, qui se crée comme ceci :
var info = L.control();
Avant d’ajouter ce contrôle à notre carte, il d’abord lui rajouter deux méthodes « onAdd » et « update ».
La première, qui prend la carte en paramètre d’entrée, ajoute dans le DOM notre encart et y attache la méthode « update » :
info.onAdd = function (map) {
this._div = L.DomUtil.create('div', 'info');
this.update();
return this._div;
};
La deuxième, qui prend en entrée des propriétés d’objet GeoJSON, met à jour le contenu de l’encart. La distinction ligne/station ce fait sur la présence ou non d’une propriété « line » :
info.update = function (props) {
if(props) {
if(props.line){
this._div.innerHTML = '<p>Ligne ' + props.line + '</p>';
} else {
this._div.innerHTML = '<p>' + props.name + ' – ' + props.about + '</p>';
}
} else {
this._div.innerHTML = '<p>Survoler un élément</p>';
}
};
Une fois ces deux méthodes déclarées, on peut rajouter notre contrôle à la carte :
info.addTo(map);
Ajout de l’interactivité des stations
Pour s’assurer que le pictogramme de la station survolée soit toujours affiché au-dessus des autres, il faut mettre aux marqueurs un paramètre « riseOnHover » à true :
return L.marker(latlng,{
icon: L.icon({
iconUrl: './symbole.1541586932.svg',
iconSize: [14, 14],
iconAnchor: [7, 7]
}),
riseOnHover: true
});
Pour les stations, la fonction appelée par « onEachFeature » est :
function onEachStation(feature, layer) {
layer.on({
mouseover: highlightStation,
mouseout: resetStation
});
}
Les deux fonctions correspondant aux deux événements sont :
function highlightStation(e) {
info.update(e.target.feature.properties);
e.target.setIcon(
L.icon({
iconUrl: './symbole.1541586932.svg',
iconSize: [18, 18],
iconAnchor: [9, 9]
})
);
}
function resetStation(e) {
info.update();
e.target.setIcon(
L.icon({
iconUrl: './symbole.1541586932.svg',
iconSize: [14, 14],
iconAnchor: [7, 7]
})
);
}
Une fois tout cela fait, on ajoute le paramètre « onEachFeature » à notre calque :
var stations = L.geoJson(metro_stations, {
pointToLayer: function(feature, latlng) {
return L.marker(latlng,{
icon: L.icon({
iconUrl: './symbole.1541586932.svg',
iconSize: [14, 14],
iconAnchor: [7, 7]
}),
riseOnHover: true
});
},
onEachFeature: onEachStation
}).addTo(map);
Ajout de l’interactivé des lignes
Pour les lignes, la fonction appelée par « onEachFeature » est :
function onEachLine(feature, layer) {
layer.on({
mouseover: highlightLine,
mouseout: resetLine
});
}
Les deux fonctions correspondant aux événements sont :
function highlightLine(e) {
var target = e.target;
info.update(target.feature.properties);
target.setStyle({weight:6});
if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
target.bringToFront(); // positionne la ligne au-dessus dans le calque
}
}
function resetLine(e) {
info.update();
lines.resetStyle(e.target);
}
Une fois la fonction « onEachLine » rajoutée dans le paramètre « onEachFeature » du calque des lignes, notre carte est terminée :
Sources sur la prédominance de Leaflet :
Une version complète et plus grande est disponible sur mon site.