Free Mapas Interativos Com Leaflet.js 2025

## Instalação, Mapa Básico, Marcadores e Camadas: Começando com Mapas Interativos

Neste post, vamos explorar os passos essenciais para criar mapas interativos, começando do zero. Abordaremos a instalação de uma biblioteca popular, a criação de um mapa base e a adição de elementos importantes como marcadores e camadas.

A primeira etapa é instalar a biblioteca que usaremos para construir nossos mapas. Existem diversas opções, mas para este tutorial, utilizaremos [Nome da biblioteca]. Para instalar, abra o terminal ou prompt de comando e execute o seguinte comando:

Substitua [nome da biblioteca] pelo nome real da biblioteca (ex: folium, leaflet, etc.). Aguarde a conclusão da instalação.

Com a biblioteca instalada, podemos criar nosso mapa base. Vamos começar com um mapa simples, centralizado em uma localização específica. Veja o código de exemplo:

Este código importa a biblioteca, define as coordenadas de um local e cria um objeto mapa. A função zoom_start define o nível de zoom inicial. Finalmente, o mapa é exibido, seja salvando-o em um arquivo HTML ou mostrando-o diretamente em um ambiente interativo.

Marcadores são essenciais para indicar pontos de interesse no mapa. Vamos adicionar alguns marcadores ao nosso mapa base:

Este código adiciona dois marcadores ao mapa. Cada marcador é criado com sua localização, texto de popup e dica (tooltip). O método .add_to(mapa) adiciona cada marcador ao mapa.

Camadas permitem visualizar informações adicionais no mapa, como polígonos, linhas ou dados de diferentes fontes. Vamos adicionar uma camada simples, como um polígono:

Este exemplo adiciona um polígono vermelho ao mapa. A função Polygon recebe as coordenadas dos vértices, define a cor e o preenchimento, e o método .add_to(mapa) adiciona a camada ao mapa.

Source: Dev.to