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.4.0/dist/leaflet.css"
  crossorigin=""/> Â
  <script src="https://unpkg.com/leaflet@1.4.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.4.0/dist/leaflet.css"
  crossorigin=""/> Â
  <script src="https://unpkg.com/leaflet@1.4.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>