Geolocalização e Mapas em TypeScript: bibliotecas e exemplos práticos

Geolocalização e Mapas em TypeScript: visão geral das ferramentas e exemplos de código

As aplicações web modernas cada vez mais exigem trabalho com dados geográficos: desde a simples exibição da localização do usuário até rotas complexas e clusterização. O TypeScript, com sua tipagem estrita, torna o desenvolvimento dessas funções mais confiável e conveniente. Neste artigo, abordaremos bibliotecas populares para trabalhar com mapas e geolocalização, mostraremos exemplos de integração com TypeScript e daremos dicas práticas.

1. Fundamentos de geolocalização no navegador

Antes de conectar mapas, é necessário obter as coordenadas do usuário. A API de geolocalização integrada (navigator.geolocation) é perfeitamente tipada em 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(`Latitude: ${pos.latitude}, Longitude: ${pos.longitude}`))  .catch((err) => console.error('Erro de geolocalização:', err));

2. Leaflet — biblioteca leve e popular

Leaflet é uma das bibliotecas mais simples e rápidas para exibir mapas. Para TypeScript, existe o pacote @types/leaflet.

Instalação

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

Exemplo: mapa com marcador

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

// Função de inicialização tipadafunction 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('Você está aqui!');

  return map;}

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

Tipagem avançada de eventos

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

3. OpenLayers — ferramenta poderosa para tarefas complexas

OpenLayers suporta uma grande quantidade de formatos (GeoJSON, KML, WMS) e é adequado para sistemas de informação geográfica profissionais. Os tipos são fornecidos junto com o pacote.

Instalação

npm install ol

Exemplo: mapa com marcador e dica flutuante

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;

  // Criando 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'    })  }));

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

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