Fonds de carte

La librairie tmaps version 2 peut afficher des fonds de carte différents. La sélection se fait en passant le type correspondant en premier argument de la fonction createMap du module. Certains fonds de carte nécessitent des paramètres supplémentaires dans les options de configuration (comme une clé api par exemple).

La liste des choix possibles est exposée par l'object MapTypes.

TouristicMaps

Carte vectorielle créée par Raccourci Agency.

carte

Google

La version bitmap est utilisée.

Il est possible de choisir entre différents types de fonds, exposés par l'object GoogleLayerCodes.

Sans clé API, les limites d'utilisation sont vite atteintes.

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

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

const myApiKey: string = "<...>";
const targetElement = document.querySelector('map-placeholder')!;
const options: GoogleConf = {
  target: targetElement,
  center: {
    lat: 46.16175,
    lon: -1.20431
  },
  zoom: 10,
  allow_zoom: ZoomOptions.with_modifier,
  api_key: myApiKey,
  layer_code: GoogleLayerCodes.hybrid
};
const map = await createMap(MapTypes.Google, options);
carte

OpenStreetMap

La version bitmap est utilisée.

L'utilisation de ces tuiles est proscrite pour les sites à fort trafic.

carte

Etalab

Tuiles vectorielles OpenMapTiles (basées sur les données d'OpenStreetMap) fournies gratuitement par Etalab pour les zones du territoire français.

carte

IGN

Tuiles vectorielles fournies commercialement par IGN.

Il est possible de choisir entre différents styles, exposés par l'object IGNStyles.

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

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

const myApiKey: string = "<...>";
const targetElement = document.querySelector('map-placeholder')!;
const options: IGNConf = {
  target: targetElement,
  center: {
    lat: 46.16175,
    lon: -1.20431
  },
  zoom: 10,
  allow_zoom: ZoomOptions.with_modifier,
  api_key: myApiKey,
  style: IGNStyles.light
};
const map = await createMap(MapTypes.IGN, options);
carte