Geolocalización y mapas en TypeScript: bibliotecas y ejemplos prácticos

Geolocalización y mapas en TypeScript: revisión de herramientas y ejemplos de código

Las aplicaciones web modernas requieren cada vez más trabajar con datos geográficos: desde la simple visualización de la ubicación del usuario hasta rutas complejas y agrupación por clusters. TypeScript, con su tipificación estricta, hace que el desarrollo de estas funciones sea más fiable y cómodo. En este artículo, analizaremos bibliotecas populares para trabajar con mapas y geolocalización, mostraremos ejemplos de integración con TypeScript y daremos consejos prácticos.

1. Fundamentos de geolocalización en el navegador

Antes de conectar mapas, es necesario obtener las coordenadas del usuario. La API de geolocalización integrada (navigator.geolocation) se tipifica perfectamente en TypeScript.

interface Position {  latitude: number;  longitude: number;  accuracy?: number;}

function getCurrentPosition(): Promise<Position> {  return new Promise((resolve, reject) => {    navigator.geolocation.getCurrentPosition(      (pos) => {        resolve({          latitude: pos.coords.latitude,          longitude: pos.coords.longitude,          accuracy: pos.coords.accuracy        });      },      (error) => reject(error)    );  });}

// UsogetCurrentPosition()  .then((pos) => console.log(`Latitud: ${pos.latitude}, Longitud: ${pos.longitude}`))  .catch((err) => console.error('Error de geolocalización:', err));

2. Leaflet — biblioteca ligera y popular

Leaflet es una de las bibliotecas más simples y rápidas para mostrar mapas. Para TypeScript existe el paquete @types/leaflet.

Instalación

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

Ejemplo: mapa con marcador

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

// Función de inicialización tipificadafunction initMap(containerId: string, coords: [number, number]): L.Map {  const map = L.map(containerId).setView(coords, 13);

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

  L.marker(coords)    .addTo(map)    .bindPopup('¡Estás aquí!');

  return map;}

// Usoconst map = initMap('map', [55.7558, 37.6173]); // Moscú

Tipificación avanzada de eventos

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

3. OpenLayers — herramienta potente para tareas complejas

OpenLayers soporta una gran cantidad de formatos (GeoJSON, KML, WMS) y es adecuado para sistemas de información geográfica profesionales. Los tipos se incluyen junto con el paquete.

Instalación

npm install ol

Ejemplo: mapa con marcador y tooltip emergente

import Map from 'ol/Map';import View from 'ol/View';import TileLayer from 'ol/layer/Tile';import OSM from 'ol/source/OSM';import { fromLonLat } from 'ol/proj';import Feature from 'ol/Feature';import Point from 'ol/geom/Point';import VectorLayer from 'ol/layer/Vector';import VectorSource from 'ol/source/Vector';import Style from 'ol/style/Style';import Icon from 'ol/style/Icon';import Overlay from 'ol/Overlay';

function createMap(containerId: string, lon: number, lat: number): void {  const container = document.getElementById(containerId) as HTMLElement;

  // Creamos el marcador  const marker = new Feature({    geometry: new Point(fromLonLat([lon, lat]))  });

  marker.setStyle(new Style({    image: new Icon({      anchor: [0.5, 1],      src: 'https://openlayers.org/en/latest/examples/data/icon.png'    })  }));

  // Capa vectorial  const vectorLayer = new VectorLayer({    source: new VectorSource({      features: [marker]    })  });

  // Mapa  const map = new Map({    target: container,    layers: [