Géolocalisation et cartes en TypeScript : bibliothèques et exemples pratiques

Géolocalisation et cartes en TypeScript : aperçu des outils et exemples de code

Les applications web modernes nécessitent de plus en plus souvent de travailler avec des données géographiques : de l'affichage simple de la localisation de l'utilisateur à des itinéraires complexes et au clustering. TypeScript, avec son typage strict, rend le développement de telles fonctions plus fiable et plus pratique. Dans cet article, nous allons passer en revue les bibliothèques populaires pour travailler avec les cartes et la géolocalisation, montrer des exemples d'intégration avec TypeScript et donner des conseils pratiques.

1. Bases de la géolocalisation dans le navigateur

Avant de connecter des cartes, il faut obtenir les coordonnées de l'utilisateur. L'API de géolocalisation intégrée (navigator.geolocation) est parfaitement typée en TypeScript.

interface Position {\n  latitude: number;\n  longitude: number;\n  accuracy?: number;\n}\n\nfunction getCurrentPosition(): Promise<Position> {\n  return new Promise((resolve, reject) => {\n    navigator.geolocation.getCurrentPosition(\n      (pos) => {\n        resolve({\n          latitude: pos.coords.latitude,\n          longitude: pos.coords.longitude,\n          accuracy: pos.coords.accuracy\n        });\n      },\n      (error) => reject(error)\n    );\n  });\n}\n\n// Utilisation\ngetCurrentPosition()\n  .then((pos) => console.log(`Latitude : ${pos.latitude}, Longitude : ${pos.longitude}`))\n  .catch((err) => console.error('Erreur de géolocalisation :', err));

2. Leaflet — une bibliothèque légère et populaire

Leaflet est l'une des bibliothèques les plus simples et les plus rapides pour afficher des cartes. Pour TypeScript, il existe le paquet @types/leaflet.

Installation

npm install leaflet\nnpm install --save-dev @types/leaflet

Exemple : carte avec un marqueur

import L from 'leaflet';\nimport 'leaflet/dist/leaflet.css';\n\n// Fonction d'initialisation typée\nfunction initMap(containerId: string, coords: [number, number]): L.Map {\n  const map = L.map(containerId).setView(coords, 13);\n\n  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {\n    attribution: '© Contributeurs OpenStreetMap'\n  }).addTo(map);\n\n  L.marker(coords)\n    .addTo(map)\n    .bindPopup('Vous êtes ici !');\n\n  return map;\n}\n\n// Utilisation\nconst map = initMap('map', [55.7558, 37.6173]); // Moscou

Typage avancé des événements

map.on('click', (e: L.LeafletMouseEvent) => {\n  const { lat, lng } = e.latlng;\n  console.log(`Clic : ${lat}, ${lng}`);\n});

3. OpenLayers — un outil puissant pour les tâches complexes

OpenLayers prend en charge un grand nombre de formats (GeoJSON, KML, WMS) et convient aux systèmes d'information géographique professionnels. Les types sont fournis avec le paquet.

Installation

npm install ol

Exemple : carte avec marqueur et infobulle

import Map from 'ol/Map';\nimport View from 'ol/View';\nimport TileLayer from 'ol/layer/Tile';\nimport OSM from 'ol/source/OSM';\nimport { fromLonLat } from 'ol/proj';\nimport Feature from 'ol/Feature';\nimport Point from 'ol/geom/Point';\nimport VectorLayer from 'ol/layer/Vector';\nimport VectorSource from 'ol/source/Vector';\nimport Style from 'ol/style/Style';\nimport Icon from 'ol/style/Icon';\nimport Overlay from 'ol/Overlay';\n\nfunction createMap(containerId: string, lon: number, lat: number): void {\n  const container = document.getElementById(containerId) as HTMLElement;\n\n  // Création du marqueur\n  const marker = new Feature({\n    geometry: new Point(fromLonLat([lon, lat]))\n  });\n\n  marker.setStyle(new Style({\n    image: new Icon({\n      anchor: [0.5, 1],\n      src: 'https://openlayers.org/en/latest/examples/data/icon.png'\n    })\n  }));\n\n  // Couche vectorielle\n  const vectorLayer = new VectorLayer({\n    source: new VectorSource({\n      features: [marker]\n    })\n  });\n\n  // Carte\n  const map = new Map({\n    target: container,\n    layers: [\n