Primeros pasos con el folleto

Implementando Leaflet.js con HTML y JavaScript

Para usar Leaflet, cargue su hoja de estilo y archivo JavaScript en su página:

<link rel="stylesheet" href="/css/leaflet.css" />
<script src="/js/leaflet.js"></script>

Estos recursos se pueden descargar desde una variedad de ubicaciones, como la página de inicio de Leaflet o el repositorio de Leaflet Github, o puede usar CDN directamente como,

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<script src="https://unpkg.com/[email protected]/dist/leaflet.js" ></script>

Necesitas un contenedor para tu mapa. Es común que los desarrolladores usen un div con una identificación de “mapa” para esto. Asegúrese de darle a su mapa div una altura también o el mapa podría no aparecer.

<div id="map" style="height: 200px;"></div>

La inicialización del mapa se realiza creando un objeto de mapa usando el método Leaflet.map(mapContainerId). En el siguiente ejemplo, la latitud y la longitud se establecen de forma predeterminada con un nivel de zoom predeterminado de 13.

var map = L.map('map').setView([42.35, -71.08], 13);

Esto crea nuestro mapa vacío, ahora deberíamos proporcionar una capa de mosaico para que actúe como nuestro mapa base. Un mosaico es un servicio que proporciona imágenes de mapas en mosaicos, imágenes pequeñas a las que se accede mediante los parámetros x, y y z en un orden particular (ver más abajo).

Una URL de capa de mosaico podría verse así, donde {s}, {z}, {x} y {y} son marcadores de posición que Leaflet cambiará automáticamente durante la operación:

"http://{s}.domain.com/foo/{z}/{x}/{y}.png"

Ahora podemos agregar nuestro mosaico, junto con la información de atribución y el máximo nivel de zoom posible, y agregarlo al mapa:

L.tileLayer('http://tiles.mapc.org/basemap/{z}/{x}/{y}.png',
{
  attribution: 'Tiles by <a href="http://mapc.org">MAPC</a>, Data by <a href="http://mass.gov/mgis">MassGIS</a>',
  maxZoom: 17,
  minZoom: 5
}).addTo(map);

Nota: La inicialización del mapa y la carga de la capa de mosaico deben ocurrir después de la inclusión de leaflet.js y el elemento div del contenedor del mapa.

Folleto de inicio rápido

<!DOCTYPE html>
<html>

  <head>
    <title>My Leaflet Map</title>
    <link rel="stylesheet" href="//unpkg.com/[email protected]/dist/leaflet.css" />
    <style type="text/css">
      #map { 
        height: 500px; 
      }
    </style>
  </head>

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

    <script src="//unpkg.com/[email protected]/dist/leaflet.js"></script>    
    <script>
      var map = L.map('map').setView([51.505, -0.09], 13);

      L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
          attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
      }).addTo(map);
      
      L.marker([51.5, -0.09]).addTo(map)
          .bindPopup('A pretty CSS3 popup.<br> Easily customizable.')
          .openPopup();
    </script>
  </body>

</html>