Les contrôles

La carte peut avoir des éléments d'interface affichés en périphérie de celle-ci, tels que les boutons de zoom, les mentions d'attribution, l'échelle de distance et le bouton pour passer en mode plein écran.

Par défaut, la carte affiche les boutons de zoom en haut à droite si le zoom n'est pas bloqué, et les mentions d'attribution en bas à droite.

Ces boutons de zoom et mentions d'attribution peuvent être repositionnés grâce aux options de configuration à l'appel de createMap.

D'autres contrôles peuvent être ajoutés, en spécifiant leur positionnement et leur contenu.

Example

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

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

const targetElement = document.querySelector('map-placeholder')!;
const options: BaseConf = {
  target: targetElement,
  center: {
    lat: 46.16175,
    lon: -1.20431
  },
  range: {
    lat: 5.5,
    lon: 8
  },
  allow_zoom: ZoomOptions.with_modifier,
  zoom_control_position: ControlPositions.top_right,
  fullscreen_control_position: ControlPositions.top_right
  attribution_control_position: ControlPositions.bottom_right
  scale_control_position: ControlPositions.bottom_left
};
const map = await createMap(MapTypes.OpenStreetMap, options);
const myControl = document.createElement('div');
myControl.textContent='🗺';
myControl.setAttribute(
  'style', 
  'cursor:pointer;font-size:2em;padding:.25em'
);
myControl.addEventListener(
  'click',
  _ => map.position({zoom: 4, animate: true})
);
map.addControl(
  Symbol("my_control"),
  myControl,
  ControlPositions.top_left
);
carte