Leaflet es una herramienta de JavaScript fácil de usar y bastante poderosa que nos permite crear y mostrar mapas en un sitio web. Este artículo lo guiará en la configuración de Folleto, y luego la construcción de un mapa simple que tiene una capa de mosaico de Mapbox y algunas otras capas y características.

Parte uno de dos:
Configurando el Mapa

  1. 1 Abra o cree su página web. Si aún no tiene una página web en la que desea insertar el mapa, puede usar la siguiente plantilla HTML5; guárdelo como 'map_page.html': 
      <html lang="en"> <cabeza> <meta juego de caracteres="utf-8"> <título>Mi folleto Mapa</título> </cabeza> <cuerpo>  </cuerpo> </html>
  2. 2 Incluye los archivos de JavaScript y CSS de Leaflet. Su página web deberá incluir el archivo JavaScript de Leaflet y el archivo CSS. Para hacer esto, pegue la siguiente línea de código en su archivo HTML, dentro del área, en una nueva línea debajo del : 
     <guión src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></guión> <enlazar rel="hoja de estilo" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
  3. 3 Agregue un contenedor de mapa HTML. Leaflet mostrará el mapa dentro de un elemento HTML, por lo que debe proporcionar uno para ello. Pegue la siguiente línea de marcado dentro del : 
     <div carné de identidad="mapa"></div>
  4. 4 Estilo el contenedor del mapa. Debes establecer qué tan grande será el mapa cuando se muestre, y debes usar CSS para hacer esto. Puede agregar lo siguiente al documento : 
     <>> #mapa  altura: 500px; anchura: 700px;  >
  5. 5 Crea el objeto del mapa. Para comenzar a escribir el código JavaScript que configura el mapa, deberá agregar un área al después el contenedor del mapa div. También dentro de esto, puede crear el objeto del mapa llamando al mapa() función del objeto del folleto, como este: 
     <tipo de script='texto / javascript'> var mapa = L.mapa('mapa'); guión>
  6. 6 Establecer la vista del mapa. La propiedad de vista del mapa de un prospecto es lo que administra qué parte del mapa se ve. Establezca la vista de su mapa para centrarse en las coordenadas [0, 0] (fuera de la costa de África central):
    Nota: A diferencia de la biblioteca de mapeo OpenLayers, Leaflet trata con las coordenadas en el formato [latitud, longitud]. 
     mapa.setView([0, 0], 2);
  7. 7 Agrega una capa de mosaico. Los mapas de folletos tienen capas apiladas una encima de otra y son lo que realmente ves en un mapa. Hay varios tipos de capas: IU (marcadores y ventanas emergentes), Ráster (capas de mosaico), Vector (formas) y Otro. Las capas de mosaico son las capas estándar 'base' y pueden provenir de proveedores de mapas como Google Maps, MapQuest o OpenStreetMaps. Cada capa tiene una urlTemplate, que le dice a Leaflet de dónde viene la información de la capa. También debe proporcionar información de atribución para indicar a los visitantes de dónde provienen los mosaicos del mapa. 
     var capa = L.tileLayer('http: // s .tile.osm.org / z / x / y .png',  atribución: '© OpenStreetMap Contribuyentes ); capa.añadir(mapa);


Parte dos de dos:
Agregar capas y características adicionales

  1. 1 Agrega un marcador. Los marcadores muestran la ubicación de un punto en un mapa. En Leaflet, los marcadores son un tipo de 'capa UI', por lo que se pueden agregar directamente a los mapas. Simplemente copie la siguiente línea de código en su elemento:. 
     var marcador = L.marcador([20, 20]); marcador.añadir(mapa);
  2. 2 Agregar una ventana emergente Las ventanas emergentes se utilizan para agregar información contextual a un marcador u otra capa. 
     marcador.bindPopup('Chad'); marcador.abrirPopup();
  3. 3 Agregue una polilínea. En Leaflet, una polilínea es una línea con múltiples segmentos, y es un tipo de 'capa vectorial'. 
     var polilínea = L.polilínea([ [20, 10], [10, 20], [20, 30] ]) polilínea.añadir(mapa);
  4. 4 Establecer el estilo de una capa vectorial. Los estilos determinan cómo se ve el vector e incluyen el color de línea, el estilo de línea, el color de relleno, la opacidad, etc. Las diferentes opciones de estilo se aplican a diferentes tipos de vectores; por ejemplo, una polilínea no tiene área, por lo que las opciones de relleno no se aplican. 
     polilínea.setStyle( color: 'rojo' );
  5. 5 Agrega un control de escala. Los controles le permiten interactuar con el mapa de varias maneras o mostrar información adicional sobre el mapa. Un control de escala muestra cómo están las grandes distancias en el mapa, que cambia cuando se hace zoom en el mapa. 
     var escala = L.controlar.escala() escala.añadir(mapa);
  6. 6 El mapa terminado