LeafletJS - Primeiros passos

O que é Leaflet.js

Leaflet.js é uma biblioteca de código aberto com a qual podemos implantar mapas da web simples, interativos e leves.

  • A biblioteca JavaScript do folheto permite que você use camadas como camadas de mosaico, WMS, marcadores, pop-ups, camadas de vetor (polilinhas, polígonos, círculos, etc.), sobreposições de imagens e GeoJSON.

  • Você pode interagir com os mapas de Folheto arrastando o mapa, ampliando (por clique duplo ou rolagem), usando o teclado, usando o tratamento de eventos e arrastando os marcadores.

  • O folheto é compatível com navegadores como Chrome, Firefox, Safari 5+, Opera 12+, IE 7–11 na área de trabalho e navegadores como Safari, Android, Chrome, Firefox para celulares.

Etapas para carregar o mapa em uma página da web

Siga as etapas abaixo para carregar um mapa em sua página da web -

Etapa 1: Crie uma página HTML

Crie uma página HTML básica com head e body tags como mostrado abaixo -

<!DOCTYPE html>
<html>
   <head>
   </head>
   
   <body>
      ...........
   </body>
</html>

Etapa 2: carregar o script CSS do folheto

Inclua o script CSS do folheto no exemplo -

<head>
   <link rel = "stylesheet" href = "http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
</head>

Etapa 3: Carregar o Script do Folheto

Carregue ou inclua a API Leaflet usando a tag de script -

<head>
   <script src = "http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
</head>

Etapa 4: crie o contêiner

Para manter o mapa, temos que criar um elemento de contêiner. Geralmente, a tag <div> (um contêiner genérico) é usada para esse propósito.

Crie um elemento de contêiner e defina suas dimensões -

<div id = "sample" style = "width:900px; height:580px;"></div>

Etapa 5: opções de mapa

O folheto fornece várias opções, como tipos de opções de controle, opções de interação, opções de estado do mapa, opções de animação, etc. Ao definir valores para estes, podemos personalizar o mapa como desejado.

Criar uma mapOptions objeto (é criado como um literal) e definir valores para as opções center e zoom, onde

  • center - Como um valor para esta opção, você precisa passar um LatLngobjeto especificando o local onde queremos centralizar o mapa. (Basta especificar os valores de latitude e longitude dentro[] suspensórios)

  • zoom - Como valor para esta opção, você precisa passar um inteiro representando o nível de zoom do mapa, conforme mostrado abaixo.

var mapOptions = {
   center: [17.385044, 78.486671],
   zoom: 10
}

Etapa 6: Criar um objeto de mapa

Usando o Mapclasse de folheto API, você pode criar um mapa em uma página. Você pode criar um objeto de mapa instanciando o chamadoMapda API Folheto. Ao instanciar esta classe, você precisa passar dois parâmetros -

  • Como parâmetro para esta opção, você precisa passar uma variável String que representa o id do DOM ou uma instância do elemento <div>. Aqui, o elemento <div> é um contêiner HTML para conter o mapa.

  • Um literal de objeto opcional com opções de mapa.

Crie um objeto Map passando o id do elemento <div> e o objeto mapOptions criado na etapa anterior.

var map = new L.map('map', mapOptions);

Etapa 7: Criando o objeto de camada

Você pode carregar e exibir vários tipos de mapas (camadas de blocos) instanciando o TileLayerclasse. Ao instanciá-lo, você precisa passar um modelo de URL solicitando a camada de blocos desejada (mapa) do provedor de serviços, na forma de uma variável String.

Crie o objeto da camada de blocos conforme mostrado abaixo.

var layer = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');

Aqui nós usamos o openstreetmap.

Etapa 8: Adicionar Camada ao Mapa

Por fim, adicione a camada criada na etapa anterior ao objeto do mapa usando o addlayer() método conforme mostrado abaixo.

map.addLayer(layer);

Exemplo

O exemplo a seguir mostra como carregar um open street map da cidade de Hyderabad com um valor de zoom de 10.

<!DOCTYPE html>
<html>
   <head>
      <title>Leaflet sample</title>
      <link rel = "stylesheet" href = "http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css"/>
      <script src = "http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
   </head>

   <body>
      <div id = "map" style = "width: 900px; height: 580px"></div>
      <script>
         // Creating map options
         var mapOptions = {
            center: [17.385044, 78.486671],
            zoom: 10
         }
         
         // Creating a map object
         var map = new L.map('map', mapOptions);
         
         // Creating a Layer object
         var layer = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
         
         // Adding layer to the map
         map.addLayer(layer);
      </script>
   </body>
   
</html>

Ele gera a seguinte saída -

Fornecedores de mapas de folhetos

Assim como open street map, você pode carregar as camadas de vários provedores de serviço, como Open Topo, floresta Thunder, Hydda, ESRI, Open weather, NASA GIBS, etc. Para fazer isso, você precisa passar seu respectivo URL ao criar o TileLayer objeto

var layer = new L.TileLayer('URL of the required map');

A tabela a seguir lista os URLs e seus respectivos exemplos de mapas das camadas fornecidas pelo Openstreetmap.

Tipo de mapa URL e saída
Mapnik

http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png

Preto e branco

http://{s}.tiles.wmflabs.org/bw-mapnik/{z}/{x}/{y}.png

DE

http://{s}.tile.openstreetmap.de/tiles/osmde/{z}/{x}/ {y}.png

França

http://{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png

Quente

http://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png

BZH

http://tile.openstreetmap.bzh/br/{z}/{x}/{y}.png