Geolocalização e Mapas em TypeScript: Bibliotecas e Ferramentas para Aplicações Web

Geolocalização e Mapas em TypeScript: Visão Geral Completa das Ferramentas

As aplicações web modernas exigem cada vez mais a integração de dados geográficos e mapas interativos. TypeScript, como uma extensão fortemente tipada do JavaScript, oferece excelentes oportunidades para trabalhar com geolocalização graças à tipagem estática e ao suporte aos padrões modernos. Neste artigo, vamos explorar as principais bibliotecas e ferramentas para trabalhar com mapas e dados geoespaciais em TypeScript, suas características e exemplos de uso.

1. Geolocation API Nativa

A Geolocation API do navegador é a ferramenta básica para obter as coordenadas do usuário. TypeScript adiciona segurança de tipo ao trabalhar com esta API.

// Função tipada para obter geolocalizaçãointerface 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('Erro ao obter posição:', error);  }})();

2. Leaflet — Biblioteca Cartográfica Leve

Leaflet é uma das bibliotecas open-source mais populares para mapas interativos. Ela possui excelente suporte a TypeScript através do pacote @types/leaflet.

Instalação e Configuração

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

Exemplo 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, 'Moscou');

3. Mapbox GL JS — Solução Profissional

Mapbox oferece uma plataforma poderosa com tiles vetoriais e estilização avançada. O SDK TypeScript está disponível através do pacote mapbox-gl.

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

// Tipagem para configuraçãointerface 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'      }    });  }}

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