Silverpeas » Silverpeas Core

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 :

• 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" />

sp.dom.includePlugin('map').then(function() {
  // fonction exécutée quand le plugin est chargé
});

MapTargetPointButton.insertAfter("#longitude");

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

Intégré dans master et master-jackrabbit