Géolocalisation et cartes en TypeScript : bibliothèques, API et exemples de code

Géolocalisation et cartes en TypeScript : guide complet des bibliothèques et outils

Les applications web modernes nécessitent de plus en plus l'intégration de données géographiques : de la détermination de la localisation de l'utilisateur à l'affichage de cartes interactives. TypeScript, grâce à son typage strict et à sa prise en charge des normes modernes, devient un choix idéal pour développer de telles solutions. Dans cet article, nous allons détailler les bibliothèques et outils pour travailler avec la géolocalisation et les cartes en TypeScript, fournir des exemples de code pratiques et donner des recommandations pour le choix.

1. Obtention de la géolocalisation : API Navigator Geolocation

L'API intégrée du navigateur navigator.geolocation est la base pour obtenir les coordonnées de l'utilisateur. TypeScript fournit des types pour cette API, ce qui rend le travail sûr et pratique.

// Fonction typée pour obtenir la position actuellefunction getCurrentPosition(): Promise<GeolocationPosition> {    return new Promise((resolve, reject) => {        if (!navigator.geolocation) {            reject(new Error('La géolocalisation n\\'est pas prise en charge par le navigateur'));            return;        }                navigator.geolocation.getCurrentPosition(            (position: GeolocationPosition) => {                resolve(position);            },            (error: GeolocationPositionError) => {                reject(error);            },            {                enableHighAccuracy: true,                timeout: 5000,                maximumAge: 0            }        );    });}

// Exemple d'utilisationasync function showUserLocation(): Promise<void> {    try {        const position = await getCurrentPosition();        const { latitude, longitude } = position.coords;        console.log(`Latitude : ${latitude}, Longitude : ${longitude}`);    } catch (error) {        console.error('Erreur lors de l\\'obtention de la géolocalisation :', error);    }}

2. Affichage des cartes : comparaison des bibliothèques populaires

Pour travailler avec les cartes en TypeScript, plusieurs bibliothèques puissantes sont disponibles. Examinons trois options les plus populaires.

2.1 Leaflet avec TypeScript

Leaflet est une bibliothèque légère et open-source pour les cartes interactives. Elle dispose de types officiels (@types/leaflet), ce qui garantit une prise en charge complète de TypeScript.

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

// Création de la carte avec typageconst map: L.Map = L.map('map', {    center: [55.751244, 37.618423], // Moscou    zoom: 10,    zoomControl: true});

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

// Marqueur avec options typéesconst marker: L.Marker = L.marker([55.751244, 37.618423], {    draggable: true,    title: 'Moscou'}).addTo(map);

// Gestion d'événement avec typagemarker.on('dragend', (event: L.LeafletMouseEvent) => {    const coords: L.LatLng = event.target.getLatLng();    console.log(`Nouvelles coordonnées : ${coords.lat}, ${coords.lng}`);});

2.2 Mapbox GL JS

Mapbox propose des cartes vectorielles haute performance avec de riches possibilités de stylisation. Le SDK TypeScript est disponible via mapbox-gl.

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

// Définition du jeton d'accèsmapboxgl.accessToken = 'YOUR_MAPBOX_TOKEN';

// Création de la carte avec paramètres typésconst map: mapboxgl.Map = new mapboxgl.Map({    container: 'map',    style: 'mapbox://styles/mapbox/dark-v11',    center: [37.618423, 55.751244],    zoom: 12,    pitch: 45 // inclinaison de la carte});

// Ajout d'un marqueur avec HTML personnaliséconst marker: mapboxgl.Marker = new mapboxgl.Marker({    color: '#FF0000',    draggable: true,    rotation: 45})    .setLngLat([37.618423, 5