Como Integrar o LeafletJS com Dados Externos Usando Apenas o Front-end – Blog – Devdata Sistemas

Este post apresenta uma implementação direta de mapas com LeafletJS alimentados por dados externos, usando apenas HTML, CSS e JavaScript. Ideal para aplicações que necessitam exibir múltiplos pontos geográficos de forma leve e rápida.

1. Setup Mínimo

Crie um arquivo index.html com o seguinte conteúdo:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Mapa com LeafletJS</title>
  <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
  <style>
    #map { height: 100vh; width: 100%; margin: 0; padding: 0; }
    body { margin: 0; }
  </style>
</head>
<body>

<div id="map"></div>

<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
<script>
  const mapa = L.map('map').setView([-26.2386, -49.5228], 14);

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

</body>
</html>

Esse código inicializa um mapa centrado na latitude/longitude informada, com zoom 14 e usando tiles do OpenStreetMap.

2. Inserindo Marcadores via Array Local

Adicione o seguinte logo após a criação do mapa:

const marcadores = [
  { nome: "Ponto A", lat: -26.2386, lng: -49.5228 },
  { nome: "Ponto B", lat: -26.2350, lng: -49.5200 },
  { nome: "Ponto C", lat: -26.2400, lng: -49.5300 }
];

marcadores.forEach(ponto => {
  L.marker([ponto.lat, ponto.lng])
    .addTo(mapa)
    .bindPopup(ponto.nome);
});

3. Carregando Dados de um JSON Externo

Crie um arquivo chamado marcadores.json:[ { "nome": "Ponto A", "lat": -26.2386, "lng": -49.5228 }, { "nome": "Ponto B", "lat": -26.2350, "lng": -49.5200 }, { "nome": "Ponto C", "lat": -26.2400, "lng": -49.5300 } ]

Depois, substitua o array local por um fetch:

fetch('marcadores.json')
  .then(response => response.json())
  .then(data => {
    data.forEach(ponto => {
      L.marker([ponto.lat, ponto.lng])
        .addTo(mapa)
        .bindPopup(ponto.nome);
    });
  })
  .catch(erro => console.error('Erro ao carregar dados:', erro));

Importante: use um servidor local para evitar bloqueios por CORS (por exemplo, php -S localhost:8000 ou python3 -m http.server).

4. [Extra] Usando PHP para Servir os Dados Diretamente no HTML

Se os dados estiverem em um script PHP, você pode renderizar os marcadores diretamente no JavaScript com json_encode:

<?php
$marcadores = [
  [ "nome" => "Ponto A", "lat" => -26.2386, "lng" => -49.5228 ],
  [ "nome" => "Ponto B", "lat" => -26.2350, "lng" => -49.5200 ],
  [ "nome" => "Ponto C", "lat" => -26.2400, "lng" => -49.5300 ]
];
?>
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Mapa PHP + Leaflet</title>
  <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
  <style>
    #map { height: 100vh; margin: 0; }
    body { margin: 0; }
  </style>
</head>
<body>
<div id="map"></div>
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
<script>
  const mapa = L.map('map').setView([-26.2386, -49.5228], 14);

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

  const marcadores = <?php echo json_encode($marcadores, JSON_UNESCAPED_UNICODE); ?>;

  marcadores.forEach(ponto => {
    L.marker([ponto.lat, ponto.lng])
      .addTo(mapa)
      .bindPopup(ponto.nome);
  });
</script>
</body>
</html>

Essa técnica elimina a necessidade de requisições AJAX e funciona bem em sistemas leves ou com backend mínimo.

5. Expansões Futuras

A estrutura está pronta para evoluir com:

Ícones personalizados (L.icon)
Agrupamento de marcadores com leaflet.markercluster
Camadas de calor com leaflet.heat
Traçado de rotas com leaflet-routing-machine
Integração com APIs de tempo real

Considerações Finais

Este modelo é leve, funcional e pronto para ser integrado em dashboards, sistemas de monitoramento ou interfaces públicas. Nenhum backend é necessário, o que permite aplicação imediata até mesmo em ambientes estáticos.