Geolocalización y mapas en TypeScript: bibliotecas y…

Geolocalización y mapas en TypeScript: resumen completo de herramientas

Las aplicaciones web modernas requieren cada vez más la integración de datos geográficos y mapas interactivos. TypeScript, como extensión fuertemente tipada de JavaScript, ofrece excelentes capacidades para trabajar con geolocalización gracias a su tipificación estática y soporte de estándares modernos. En este artículo, revisaremos las bibliotecas y herramientas clave para trabajar con mapas y datos geoespaciales en TypeScript, sus características y ejemplos de uso.

1. Geolocation API integrada

La Geolocation API del navegador es la herramienta básica para obtener las coordenadas del usuario. TypeScript añade seguridad de tipos al trabajar con esta API.

// Función tipada para obtener la geolocalizacióninterface 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    );  });}

// Uso(async () => {  try {    const position = await getCurrentPosition({ timeout: 5000 });    const { latitude, longitude } = position.coords;    console.log(`Coordenadas: ${latitude}, ${longitude}`);  } catch (error) {    console.error('Error al obtener la posición:', error);  }})();

2. Leaflet — biblioteca cartográfica ligera

Leaflet es una de las bibliotecas open-source más populares para mapas interactivos. Tiene un excelente soporte para TypeScript a través del paquete @types/leaflet.

Instalación y configuración

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

Ejemplo de mapa básico

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: '© OpenStreetMap contributors'    }).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);  }}

// Usoconst map = new MapManager('map', [55.751244, 37.618423]);map.addMarker(55.751244, 37.618423, 'Moscú');

3. Mapbox GL JS — solución profesional

Mapbox ofrece una potente plataforma con teselas vectoriales y estilización avanzada. El SDK de TypeScript está disponible a través del paquete mapbox-gl.

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

// Tipificación para la configuracióninterface 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'      }    });  }}

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