Le plugin JavaScript Silverpeas map a été complété d'un nouveau composant pour permettre à l'utilisateur de cibler un point sur une carte et d'en récupérer la latitude et la longitude (coordonnées).
Le but de ce composant est de faciliter le renseignement de ces informations dans des formulaires.
Ci-après un exemple de sa mise en oeuvre.
Partons d'un formulaire de saisie dans lequel les coordonnées d'un point doivent être renseignées sous la forme d'une latitude et d'une longitude :
Dans le DOM, les identifiants techniques sont les suivants :
- Latitude :
#latitude
- Longitude :
#longitude
Dans un premier temps, il faut importer le plugin dans la page Silverpeas.
Si le formulaire de saisie est présenté depuis une page JSP dédiée, il suffit d'indiquer dans la balise head :
<view:includePlugin name="map" />
Mais dans notre exemple, le formulaire est affiché dynamiquement dans la page, et cette page n'inclue pas encore le plugin.
Le plugin est alors chargé dynamiquement en JavaScript :
sp.dom.includePlugin('map').then(function() {
// fonction exécutée quand le plugin est chargé
});
Quelle que soit la méthode de chargement, il faut ensuite décorer un des champs de saisie,
Longitude ou
Latitude.
Cette décoration consiste à ajouter un bouton depuis lequel l'utilisateur va ouvrir une popin présentant une carte.
Pour ce faire :
MapTargetPointButton.insertAfter("#longitude");
Les choses se présentent alors comme suit au niveau du formulaire :
Lorsque l'utilisateur clique sur le bouton, une popin s'ouvre avec la carte. A ce stade, dans notre exemple, la carte s'ouvre sur un centrage par défaut.
Il est possible de le modifier :
MapTargetPointButton.insertAfter("#longitude", {
center : new MapLonLat(5.254671357778211, 44.554984350540934)
});
La carte se présente comme ci-après dans la popin :
L'utilisateur peut alors cibler un point en cliquant sur la carte :
S'il clique sur le marqueur qui s'est affiché, un détail apparaît avec la latitude, la longitude et une adresse décodée à partir des coordonnées :
Pour renseigner automatiquement la latitude et la longitude dans le formulaire lorsque l'utilisateur valide le point qu'il a ciblé :
const mtpb = MapTargetPointButton.insertAfter("#longitude");
mtpb.addEventListener('map-lon-lat-target', function(e) {
const mapLonLat = e.detail.data;
document.querySelector('#latitude').value = mapLonLat.getLatitude();
document.querySelector('#longitude').value = mapLonLat.getLongitude();
});
A ce stade, lors de l'ouverture de la carte, si des coordonnées dans le formulaire sont déjà renseignées, elles ne sont pas prises en compte.
Pour que cela soit le cas, il faut compléter le code en utilisant la classe MapLocation (écoute de l'événement open) :
const mtpb = MapTargetPointButton.insertAfter("#longitude");
mtpb.addEventListener('map-lon-lat-target', function(e) {
const mapLonLat = e.detail.data;
document.querySelector('#latitude').value = mapLonLat.getLatitude();
document.querySelector('#longitude').value = mapLonLat.getLongitude();
});
mtpb.addEventListener('open', function(e) {
const latitude = document.querySelector('#latitude').value;
const longitude = document.querySelector('#longitude').value;
if (latitude && longitude) {
mtpb.setInitialMapLocation(new MapLocation(new MapLonLat(longitude, latitude)));
}
});
Si une localisation initiale est renseignée à l'ouverture, la carte s'affiche centrée sur celle-ci avec un zoom plus important :
PR : https://github.com/Silverpeas/Silverpeas-Core/pull/1286
Mis à jour par 
Mis à jour par