Leaflet proporciona una solución de mapas de código abierto
Cómo usar Leaflet para integrar un mapa completo en una aplicación.
En un viaje reciente a Boston, busqué mapas en mi teléfono y computadora para determinar dónde estoy y cómo ir del punto a al punto b. Los mapas interactivos ahora son una parte integral de nuestra vida diaria: es difícil recordar cuando no los teníamos. Si bien son funciones estándar en nuestras computadoras y dispositivos, hay muchas opciones para integrar fácilmente mapas completos en sus aplicaciones. Esta semana analizaré una de esas opciones: una biblioteca JavaScript de código abierto llamada Leaflet.
La simplicidad es la clave
Al igual que con cualquier cosa relacionada con el desarrollo web actual, hay muchas opciones para incluir la funcionalidad de mapas en su aplicación. Lo que decidas usar por lo general depende de tus preferencias personales: uno de mis requisitos es la simplicidad, y Leaflet no defrauda. Como dice su documentación, funciona en todas las principales plataformas móviles y de escritorio. Leaflet utiliza HTML5, CSS3 y JavaScript en las plataformas modernas y sigue siendo accesible y utilizable en las plataformas más antiguas.
Los siguientes pasos describen los pasos necesarios para agregar un mapa compatible con Leaflet a una página web:
1. Agregue una referencia a la biblioteca de JavaScript del folleto. El siguiente bloque de secuencia de comandos se coloca en la página; en el ejemplo de hoy, se hace referencia a él en el encabezado de la página:
Si desea alojar este archivo (y la biblioteca CSS) localmente, puede descargar estos archivos desde este sitio.
2. Agregue una referencia a la biblioteca Leaflet CSS. El siguiente contenido se puede colocar en el encabezado de la página:
3. Cree un contenedor DIV para el objeto de mapa Folleto. En mi ejemplo, nombré al elemento DIV trMap, pero puede llamarse como quieras. Se hace referencia a la identificación DIV en el código JavaScript para crear el objeto de mapa, por lo que debe tener en cuenta el nombre asignado al codificar:
4. Seleccione la fuente de datos para el mapa. Hay varias fuentes de este tipo, y pueden combinarse o superponerse. OpenStreetMap.org es un gran recurso gratuito. Se utilizará en nuestro ejemplo. Se especifica una fuente de datos cuando agrega una capa a un objeto de mapa, por lo que puede combinar varias fuentes a través de diferentes capas.
5. Agregue el código JavaScript que crea y completa el objeto de mapa creado en el paso 3. Cree un objeto de mapa con el método setView, que establece las coordenadas (longitud y latitud), con parámetros opcionales para configurar el nivel de zoom y más. Las capas se agregan al mapa a través del método TileLayer y obtienen la URL de datos del mapa que se le pasa. El método addTo se usa para agregar el mapa real al elemento DIV.
Los resultados de estos pasos se muestran en la lista a continuación, con el mapa centrado en Filadelfia, Pensilvania.
Ejemplo de folleto de Tecnopedia.com
La siguiente imagen muestra el mapa cargado en Internet Explorer 10.
Los mapas se pueden mejorar agregando marcadores al mapa junto con ventanas emergentes asignadas a los marcadores y ventanas emergentes regulares al hacer clic en cualquier área del mapa. La siguiente lista incluye código para agregar una ventana emergente (marcador y métodos bindPopup) y un evento de clic que usa la función onMapClick para mostrar las coordenadas del clic del mouse del usuario (en la ventana). El marcador se coloca en la ubicación del estadio de béisbol de los Philadelphia Phillies y, cuando el usuario hace clic en el mapa, se muestra una ventana emergente (muestra las coordenadas seleccionadas). La Figura B muestra el nuevo código ingresado y ejecutado en Chrome a través de jsFiddle. Vale la pena señalar que puede probar las coordenadas geográficas (longitud y latitud) en sitios como geohash, y puede encontrar coordenadas de ubicación en DateandTime.info.
función onMapClick(e) {
alert(‘Coordenadas del mapa:’ + e.latlng);
}
var mapa = L.map(‘trMap’).setView([39.57, -75.10],11);
L.tileLayer(‘http://tile.openstreetmap.org/{z}/{x}/{y}.png’,
{
identificación: ‘Filadelfia’,
Atribución: «Phillies» })
.addTo(mapa);
marca L. ([39.42, -75.09]).addTo(mapa).bindPopup(‘Citizens Bank Park’).openPopup();
map.on(‘clic’, onMapClick);
El código de muestra cubierto hasta ahora solo ha arañado la superficie de las muchas opciones y características disponibles para construir un mapa. Puede optar por utilizar una fuente de mosaico de mapa de su elección, o incluso crear su propio mapa: se muestra un excelente ejemplo de personalización de mapas a través de Leaflet en el sitio web de Texas Tribune para la elección del Senado de 2012. Además, puede aprovechar numerosos eventos, así como hacer zoom y colocar marcadores o símbolos en el mapa real. La página de características del folleto contiene mucha información adicional.
suponer
Las capacidades de mapeo ahora son un componente estándar de los dispositivos móviles y las aplicaciones web, por lo que los usuarios quieren saber cómo usarlas. Una amplia variedad de recursos de mapas están disponibles hoy en día, con Google Maps y otros como MapQuest y la opción de código abierto OpenLayers muy popular. Me atrae su tamaño muy pequeño, lo que puede conducir a un mejor rendimiento, especialmente cuando se dirige a dispositivos móviles. Sin embargo, el tamaño más pequeño da como resultado menos funcionalidad, pero proporciona la funcionalidad central necesaria para el mapeo básico, mientras que las alternativas como OpenLayers parecen intentar hacer todo. Al final, la solución dependerá de los requisitos de Leaflet para mis necesidades actuales.
