Prezados leitores,

Os próximos 13 posts, serão dedicados a uma introdução ao framework Leaflet. Estarei começando do zero e cada postagem no blog será adicionado um pouco mais ao projeto. As postagens provavelmente não serão publicadas todos os dias.

Parte 1 – Configurando um Mapa Simples

Para começar, vamos criar um modelo, copiado diretamente dos documentos do Leaflet:

<!DOCTYPE html>
<head>
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
  crossorigin=""/>  
  <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
  crossorigin=""></script>
  <style>
      #mapDIV{
          height: 700px;
          width: 700px;
          border: solid 1px black;
      }
</style>
</head>
<body>
    <div id='mapDIV'>i</div>
</body>
</html>

Também criamos um div para manter o id do mapa (mapDIV) na seção head, e adicionamos um estilo para definir o tamanho do mapa quando exibido no navegador. Este HTML irá “carregar” o Leaflet, mas você não verá nada. Precisamos adicionar um script que crie o mapa.

<script>
      var map = L.map(document.getElementById('mapDIV'), {
      center: [-20.1438, -44.1301],
      zoom: 15
      });
      var basemap = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
          });
          basemap.addTo(map);
</script>

Este pequeno script, colocado depois da mapDiv, faz o seguinte:

  • Adiciona um objeto de mapa
  • Centraliza em uma latitude/longitude
  • Define o nível de zoom
  • Adiciona o mapa base do OpenStreetMap

Se nós carregarmos o arquivo em nosso navegador, nós veremos isto:

Este mapa é centrado na localização do desastre de Brumadinho que ocorreu no dia 25 de janeiro de 2019. Vamos movê-lo em um post posterior.

Esse é o nosso primeiro post. A atribuição é importante e vamos adicioná-la ao mapa, junto com outras novidades no próximo post.

Aqui está o arquivo HTML completo:

<!DOCTYPE html>
<head>
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
  crossorigin=""/>  
  <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
  crossorigin=""></script>
  <style>
      #mapDIV{
          height: 700px;
          width: 700px;
          border: solid 1px black;
      }
</style>
</head>
<body>
    <div id='mapDIV'>i</div>
<script>
      var map = L.map(document.getElementById('mapDIV'), {
      center: [-20.1438, -44.1301],
      zoom: 15
      });
      var basemap = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
          });
          basemap.addTo(map);
</script>
</body>
</html>