leafletEmpezando con el folleto


Observaciones

Logo del folleto

Leaflet es una biblioteca de código abierto de JavaScript para crear mapas interactivos.

Versiones

Versión Fecha de lanzamiento
1.0.3 2017-01-23
1.0.2 2016-11-21
1.0.1 2016-09-30
1.0 2016-09-27
0.7 2013-11-18
0.6 2013-06-26
0.5 2013-01-17
0.4 2012-07-30
0.3 2012-02-13
0.2 2011-06-17
0.1 2011-05-16

Implementando Leaflet.js con HTML y JavaScript

Para usar Leaflet, cargue su hoja de estilo y el 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 directamente CDN como,

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js" ></script>
 

Necesitas un contenedor para tu mapa. Es común que los desarrolladores utilicen un div con un ID de "mapa" para esto. Asegúrate también de darle una altura a tu div mapa 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 utilizando el Leaflet.map(mapContainerId) . En el siguiente ejemplo, la latitud y la longitud se establecen como predeterminadas 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 tilelayer 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, z en un orden particular (ver más abajo).

Una URL de capa de mosaico podría tener este aspecto, donde {s} , {z} , {x} y {y} son marcadores de posición que el Folleto cambiará automáticamente durante la operación:

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

Ahora podemos agregar nuestra capa de mosaico, junto con la información de atribución y el nivel de zoom máximo 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 contenedor de mapa.

Inicio rápido del folleto

<!DOCTYPE html>
<html>

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

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

    <script src="//unpkg.com/leaflet@1.0.2/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>