Geolocalização e Mapas em TypeScript: Bibliotecas, API e Exemplos de Código

Geolocalização e Mapas em TypeScript: Guia Completo de Bibliotecas e Ferramentas

Os aplicativos web modernos cada vez mais exigem integração com dados geográficos: desde a determinação da localização do usuário até a exibição de mapas interativos. TypeScript, graças à tipagem estrita e ao suporte aos padrões modernos, torna-se a escolha ideal para o desenvolvimento de tais soluções. Neste artigo, vamos detalhar as bibliotecas e ferramentas para trabalhar com geolocalização e mapas em TypeScript, fornecer exemplos práticos de código e dar recomendações de escolha.

1. Obtendo Geolocalização: Navigator Geolocation API

A API nativa do navegador navigator.geolocation é a base para obter as coordenadas do usuário. TypeScript fornece tipos para esta API, tornando o trabalho seguro e conveniente.

// Função tipada para obter a posição atualfunction getCurrentPosition(): Promise<GeolocationPosition> {    return new Promise((resolve, reject) => {        if (!navigator.geolocation) {            reject(new Error('Geolocalização não suportada pelo navegador'));            return;        }                navigator.geolocation.getCurrentPosition(            (position: GeolocationPosition) => {                resolve(position);            },            (error: GeolocationPositionError) => {                reject(error);            },            {                enableHighAccuracy: true,                timeout: 5000,                maximumAge: 0            }        );    });}

// Exemplo de usoasync function showUserLocation(): Promise<void> {    try {        const position = await getCurrentPosition();        const { latitude, longitude } = position.coords;        console.log(`Latitude: ${latitude}, Longitude: ${longitude}`);    } catch (error) {        console.error('Erro ao obter geolocalização:', error);    }}

2. Exibindo Mapas: Comparação de Bibliotecas Populares

Para trabalhar com mapas em TypeScript, várias bibliotecas poderosas estão disponíveis. Vamos considerar as três opções mais populares.

2.1 Leaflet com TypeScript

Leaflet é uma biblioteca leve e open-source para mapas interativos. Ela possui tipos oficiais (@types/leaflet), garantindo suporte completo ao TypeScript.

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

// Criando um mapa com tipagemconst map: L.Map = L.map('map', {    center: [55.751244, 37.618423], // Moscou    zoom: 10,    zoomControl: true});

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

// Marcador com opções tipadasconst marker: L.Marker = L.marker([55.751244, 37.618423], {    draggable: true,    title: 'Moscou'}).addTo(map);

// Manipulação de evento com tipagemmarker.on('dragend', (event: L.LeafletMouseEvent) => {    const coords: L.LatLng = event.target.getLatLng();    console.log(`Novas coordenadas: ${coords.lat}, ${coords.lng}`);});

2.2 Mapbox GL JS

Mapbox oferece mapas vetoriais de alto desempenho com ricas capacidades de estilização. O SDK TypeScript está disponível através do mapbox-gl.

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

// Configurando o token de acessomapboxgl.accessToken = 'YOUR_MAPBOX_TOKEN';

// Criando um mapa com parâmetros tipadosconst map: mapboxgl.Map = new mapboxgl.Map({    container: 'map',    style: 'mapbox://styles/mapbox/dark-v11',    center: [37.618423, 55.751244],    zoom: 12,    pitch: 45 // inclinação do mapa});

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