M09

Mapa Interativo com Mapbox GL JS

Demonstra a integração entre JSON Server e a biblioteca Mapbox GL JS para exibir marcadores geolocalizados em um mapa interativo. Os dados de localização (latitude/longitude) são armazenados no JSON Server e carregados dinamicamente. O usuário pode navegar pelo mapa, clicar nos marcadores para ver popups com detalhes e usar a geolocalização do navegador.

Conceitos trabalhados

Mapbox GL JS

Biblioteca de mapas vetoriais interativos. Requer um token de acesso (mapboxgl.accessToken) obtido gratuitamente em mapbox.com.

Marcadores e Popups

new mapboxgl.Marker({ color }) cria um pino no mapa. .setPopup(popup) associa um balão de informação ao clicar.

Geolocalização do navegador

navigator.geolocation.getCurrentPosition() obtém as coordenadas do dispositivo — o navegador pede permissão ao usuário.

flyTo — animação suave

map.flyTo({ center, zoom, duration }) anima a câmera do mapa até um ponto específico, criando uma transição fluida.

Dados do JSON Server

Endpoint: GET /api/locais

json db/db.json → "locais" (unidades PUC Minas)

[
  {
    "id": 1,
    "descricao": "PUC Minas – Coração Eucarístico",
    "endereco": "Av. Dom José Gaspar, 500",
    "cidade": "Belo Horizonte – MG",
    "latlong": [-43.9946, -19.9222],
    "cor": "#4f46e5",
    "url": "https://www.pucminas.br/campus/coracao-eucaristico"
  },
  {
    "id": 2,
    "descricao": "PUC Minas – Praça da Liberdade",
    "endereco": "Praça da Liberdade, 500",
    "cidade": "Belo Horizonte – MG",
    "latlong": [-43.9397, -19.9322],
    "cor": "#10b981",
    "url": "https://www.pucminas.br/campus/praca-da-liberdade"
  }
  // ... mais locais
]

Padrão: dados → marcadores no mapa

javascript

// 1. Inicializar o mapa
mapboxgl.accessToken = 'SEU_TOKEN_AQUI';
const map = new mapboxgl.Map({
  container: 'map',          // ID do elemento 
  style: 'mapbox://styles/mapbox/streets-v12',
  center: [-43.9397, -19.9322], // [longitude, latitude]
  zoom: 10
});

// 2. Para cada local do JSON Server, adicionar um marcador
locais.forEach(local => {
  const popup = new mapboxgl.Popup({ offset: 25 })
    .setHTML(`<h3>${local.descricao}</h3><p>${local.endereco}</p>`);

  new mapboxgl.Marker({ color: local.cor })
    .setLngLat(local.latlong)  // [lng, lat] — longitude primeiro!
    .setPopup(popup)
    .addTo(map);
});

// 3. Navegar suavemente ao clicar em um item da lista
function irPara(local) {
  map.flyTo({ center: local.latlong, zoom: 14, duration: 1200 });
}

Exercícios sugeridos

Adicione novos locais ao db.json (ex: bibliotecas, pontos turísticos) e veja-os aparecer automaticamente.
Implemente um filtro por cor/tipo no painel lateral para mostrar/ocultar categorias de locais.
Substitua os marcadores padrão por ícones personalizados usando mapboxgl.Marker({ element }).
Adicione um campo telefone ao popup de cada local.
Altere o estilo do mapa dinamicamente com um menu (satélite, ruas, relevo).