Geolocalización y mapas en TypeScript: bibliotecas, API y ejemplos de código

Geolocalización y mapas en TypeScript: guía completa de bibliotecas y herramientas

Las aplicaciones web modernas requieren cada vez más la integración con datos geográficos: desde la determinación de la ubicación del usuario hasta la visualización de mapas interactivos. TypeScript, gracias a su tipificación estricta y soporte de estándares modernos, se convierte en la elección ideal para desarrollar tales soluciones. En este artículo, analizaremos en detalle las bibliotecas y herramientas para trabajar con geolocalización y mapas en TypeScript, proporcionaremos ejemplos prácticos de código y daremos recomendaciones para su elección.

1. Obtención de geolocalización: Navigator Geolocation API

La API integrada del navegador navigator.geolocation es la base para obtener las coordenadas del usuario. TypeScript proporciona tipos para esta API, lo que hace que el trabajo sea seguro y conveniente.

// Función tipificada para obtener la posición actualfunction getCurrentPosition(): Promise<GeolocationPosition> {    return new Promise((resolve, reject) => {        if (!navigator.geolocation) {            reject(new Error('La geolocalización no es compatible con el navegador'));            return;        }                navigator.geolocation.getCurrentPosition(            (position: GeolocationPosition) => {                resolve(position);            },            (error: GeolocationPositionError) => {                reject(error);            },            {                enableHighAccuracy: true,                timeout: 5000,                maximumAge: 0            }        );    });}

// Ejemplo de usoasync function showUserLocation(): Promise<void> {    try {        const position = await getCurrentPosition();        const { latitude, longitude } = position.coords;        console.log(`Latitud: ${latitude}, Longitud: ${longitude}`);    } catch (error) {        console.error('Error al obtener la geolocalización:', error);    }}

2. Visualización de mapas: comparación de bibliotecas populares

Para trabajar con mapas en TypeScript, hay varias bibliotecas potentes disponibles. Consideremos las tres opciones más populares.

2.1 Leaflet con TypeScript

Leaflet es una biblioteca ligera y de código abierto para mapas interactivos. Tiene tipos oficiales (@types/leaflet), lo que garantiza soporte completo para TypeScript.

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

// Creación del mapa con tipificaciónconst map: L.Map = L.map('map', {    center: [55.751244, 37.618423], // Moscú    zoom: 10,    zoomControl: true});

// Adición de teselas de OpenStreetMapL.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {    attribution: '© OpenStreetMap contributors'}).addTo(map);

// Marcador con opciones tipificadasconst marker: L.Marker = L.marker([55.751244, 37.618423], {    draggable: true,    title: 'Moscú'}).addTo(map);

// Manejo de eventos con tipificaciónmarker.on('dragend', (event: L.LeafletMouseEvent) => {    const coords: L.LatLng = event.target.getLatLng();    console.log(`Nuevas coordenadas: ${coords.lat}, ${coords.lng}`);});

2.2 Mapbox GL JS

Mapbox ofrece mapas vectoriales de alto rendimiento con ricas capacidades de estilo. El SDK de TypeScript está disponible a través de mapbox-gl.

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

// Configuración del token de accesomapboxgl.accessToken = 'YOUR_MAPBOX_TOKEN';

// Creación del mapa con parámetros tipificadosconst map: mapboxgl.Map = new mapboxgl.Map({    container: 'map',    style: 'mapbox://styles/mapbox/dark-v11',    center: [37.618423, 55.751244],    zoom: 12,    pitch: 45 // inclinación del mapa});

// Adición de marcador con HTML personalizadoconst marker: mapboxgl.Marker = new mapboxgl.Marker({    color: '#FF0000',    draggable: true,    rotation: 45})    .setLngLat([37.618423, 5