Positionner la carte

Pour positionner la carte, il y a deux méthodes possibles. On peut donner un centre et un niveau de zoom, ou un intervalle de latitude et longitude. L'intérêt de l'intervalle est de zoomer la carte pour afficher une même zone quelle que soit la taille de la zone d'affichage de la carte.

La position initiale de la carte doit être donnée dans les options de configuration à l'appel de createMap. Cet appel renvoie une instance de carte, sur laquelle on peut ensuite utiliser la méthode position pour changer soit le centre, le niveau de zoom ou l'intervalle de latitude et longitude.

La carte émet des événements lorsque la position et le zoom changent. On peut écouter ses événements pour réagir et effectuer une action appropriée (recentrer la carte par exemple).

Il est possible de bloquer le déplacement de la carte en assignant allow_pan: never dans la configuration.

Par défaut, il est nécessaire de maintenir la touche contrôle ou commande pour pouvoir zoomer, mais il est possible de changer ce comportement avec la propriété allow_zoom.

En cas de redimensionnement de la carte, le zoom et la position de la carte sont automatiquement modifiés pour que la zone visible reste affichée.

Example

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

import {createMap, BaseConf, MapTypes, ZoomOptions}
  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.never,
};
const map = await createMap(MapTypes.IGN, options);

// recenter the map on another point
await map.position({
  center: {
    lat: 46.15577,
    lon: -1.15711
  }
});

// change the zoom level with animation
await map.position({
  zoom: 13,
  animate: true
});

// change both center and range
await map.position({
  center: [-1.20431, 46.16175],
  range: [8, 5.5]
});

// recenter the map with an animation
// if the map is moved to another location
let moving = false;
map.addEventListener('moveend',async({center,zoom})=>{
  // check if we are already moving to prevent infinite loop
  if (moving) return;
  moving = true;
  try {
    await map.position({
      center: [-1.20431, 46.16175],
      animate: true
    });
  } finally {
    moving = false;
  }
});