Les marqueurs

Il est possible de rajouter des marqueurs sur la carte, en passant une liste de coordonnées (de type LatLon) à la méthode setMarkers. Les marqueurs sont numérotés dans l'ordre en commençant à 1.

La couleur des marqueurs peut être changée depuis la configuration passée en paramêtre à la construction de la carte (fonction createMap). Les propriétés concernées sont :

Les marqueurs sont regroupés automatiquement s'ils sont trop rapprochés. Les regroupements sont représentez par un disque avec le nombre de marqueurs du groupe au centre. Les autres marqueurs sont représentez par un pin avec le numéro du marqueur dans la tête du pin.

Il est possible de définir un texte info-bulle sur les markers. Pour cela, il faut rajouter un listener sur la carte et écouter les événements du type markerhover.

Le retour de la callback doit retourner un objet du type MarkerUpdate. Cet objet peut définir une surcharge des couleurs du pin (fill et stroke) ainsi qu'un élément du DOM à afficher en tant qu'info-bulle. Cet élément sera inclus dans le lightdom de la carte, pour que les styles de la page s'appliquent.

Lorsque l'utilisateur sélectionne un marqueur, s'il s'agit d'un regroupement, la carte zoome jusqu'à pouvoir afficher les marqueurs séparement. Parfois, les marqueurs peuvent être exactement à la même position. Dans ce cas, les marqueurs sont affichés sur un ou plusieurs cercles autour du marqueur du groupe, ce qui permet de pouvoir sélectionner un marqueur spécifique.

Pour la sélection des marqueurs classiques, il y a un mécanisme similaire aux info-bulles pour pouvoir surcharger la couleur et définir un éventuel dialogue. Il faut dans ce cas écouter les événements de type markerselected, et avoir la callback qui retourne un objet du type MarkerUpdate. Attention: un évênement de type markerselected est envoyé lorsque la position, la taille ou le zoom de la carte change. Il convient donc de vérifier si le marqueur précédemment sélectionné a changé avant d'effectuer une opération couteuse.

Il est également possible de présélectionner un marqueur particulier lors de l'appel à la fonction setMarkers en passant l'index de ce marqueur en paramètre supplémentaire. Attention cependant, la sélection ne sera pas visible si le marqueur est regroupé avec d'autres.

Example

typescript 
/// <reference path="./public.d.ts">

import {createMap, IGNConf, MapTypes, ZoomOptions, IGNStyles}
  from 'https://tmaps.rc.preprod:8181/v2/mod.mjs';

// add styles to the page
const hoverColor = '#888888';
const selectionColor = '#222222';
const stylesheet = new CSSStyleSheet();
stylesheet.insertRule(`div.tooltip{color:${hoverCColor}`);
stylesheet.insertRule(`div.popup{color:${selectionColor}}`);
document.adoptedStyleSheets = [ stylesheet ];

const targetElement = document.querySelector('map-placeholder')!;
const options: IGNConf = {
  target: targetElement, 
  center: [2.5, 46.5],
  range: [8, 5.5],
  allow_zoom: ZoomOptions.always,
  style: IGNStyles.light,
  stroke: '#222222',
  fill: '#ffffff'
};
const map = await createMap(MapTypes.IGN, options);
await map.setMarkers(
  [
    {lon: -1.7848, lat:47.4721, label: 'A'},
    {lon: -0.1981, lat:44.2159, label: 'B'},
    {lon: 1.5502,  lat:45.8282, label: 'C'},
    {lon: 1.1131,  lat:46.4753, label: 'D'},
    {lon: 1.0293,  lat:46.4546, label: 'E'},
    {lon: 0.5383,  lat:45.3884, label: 'F'},
    {lon: 0.5383,  lat:45.3884, label: 'G'},
    {lon: -1.2043, lat:46.1616, label: 'H'}
  ],
  2 // pre-select 'C'
);
// set position and zoom to show all markers
await map.fitToMarkers();
// tooltips
map.addEventListener('markerhover',e=>{
  const element = document.createElement('div');
  element.classList.add('tooltip');
  element.innerHTML = `Marker&nbsp;${e.detail.marker.label}`;
  e.detail.update = { fill: hoverColor, element };
});
// popup
map.addEventListener('markerselected',e=>{
  const element = document.createElement('div');
  element.classList.add('popup');
  element.innerHTML = `Marker&nbsp;${e.detail.marker.label}`;
  e.detail.update = { fill: selectionColor, element };
});
carte