Géolocalisation et cartes en TypeScript : bibliothèques et…

Géolocalisation et cartes en TypeScript : aperçu complet des outils

Les applications web modernes nécessitent de plus en plus l'intégration de données géographiques et de cartes interactives. TypeScript, en tant qu'extension fortement typée de JavaScript, offre d'excellentes possibilités pour travailler avec la géolocalisation grâce au typage statique et à la prise en charge des normes modernes. Dans cet article, nous examinerons les principales bibliothèques et outils pour travailler avec les cartes et les données géographiques en TypeScript, leurs caractéristiques et des exemples d'utilisation.

1. API Geolocation intégrée

L'API Geolocation du navigateur est un outil de base pour obtenir les coordonnées de l'utilisateur. TypeScript ajoute une sécurité de typage lors de l'utilisation de cette API.

// Fonction typée pour obtenir la géopositioninterface PositionOptions {  enableHighAccuracy?: boolean;  timeout?: number;  maximumAge?: number;}

async function getCurrentPosition(  options?: PositionOptions): Promise<GeolocationPosition> {  return new Promise((resolve, reject) => {    navigator.geolocation.getCurrentPosition(      resolve,      reject,      options    );  });}

// Utilisation(async () => {  try {    const position = await getCurrentPosition({ timeout: 5000 });    const { latitude, longitude } = position.coords;    console.log(`Coordonnées : ${latitude}, ${longitude}`);  } catch (error) {    console.error('Erreur lors de l\\'obtention de la position :', error);  }})();

2. Leaflet — bibliothèque cartographique légère

Leaflet est l'une des bibliothèques open-source les plus populaires pour les cartes interactives. Elle bénéficie d'un excellent support TypeScript via le package @types/leaflet.

Installation et configuration

npm install leafletnpm install --save-dev @types/leaflet

Exemple de carte de base

import L from 'leaflet';import 'leaflet/dist/leaflet.css';

class MapManager {  private map: L.Map;

  constructor(containerId: string, center: [number, number]) {    this.map = L.map(containerId).setView(center, 13);

    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {      attribution: '© Contributeurs OpenStreetMap'    }).addTo(this.map);  }

  addMarker(lat: number, lng: number, title?: string): void {    const marker = L.marker([lat, lng]).addTo(this.map);    if (title) {      marker.bindPopup(`<b>${title}</b>`).openPopup();    }  }

  setView(center: [number, number], zoom?: number): void {    this.map.setView(center, zoom || 13);  }}

// Utilisationconst map = new MapManager('map', [55.751244, 37.618423]);map.addMarker(55.751244, 37.618423, 'Moscou');

3. Mapbox GL JS — solution professionnelle

Mapbox propose une plateforme puissante avec des tuiles vectorielles et un style avancé. Le SDK TypeScript est disponible via le package mapbox-gl.

import mapboxgl from 'mapbox-gl';import 'mapbox-gl/dist/mapbox-gl.css';

// Typage pour la configurationinterface MapConfig {  container: string;  style: string;  center: [number, number];  zoom: number;  accessToken: string;}

class MapboxMap {  private map: mapboxgl.Map;

  constructor(config: MapConfig) {    mapboxgl.accessToken = config.accessToken;    this.map = new mapboxgl.Map(config);  }

  addGeoJSONLayer(data: GeoJSON.FeatureCollection): void {    this.map.addSource('geojson-data', {      type: 'geojson',      data    });

    this.map.addLayer({      id: 'geojson-layer',      type: 'circle',      source: 'geojson-data',      paint: {        'circle-radius': 6,        'circle-color': '#007cbf'      }    });  }}

// Exemple d'utilisationconst mapboxMap = new MapboxMap({  container: 'map',  style: 'mapbox://styles/mapbox/streets-v12',  center: [37.618423, 55.751244],  zoom: 10,  accessToken: process.env.MAPBOX_TOKEN || ''});