¿Qué es Leaflet WordPress?
Leaflet es una librería JavaScript de código abierto (“open-source”) para crear y utilizar mapas interactivos proporcionados por diversos proveedores de servicios de mapeado, como OpenStreetMap o el propio Google Maps.
A pesar de su aparente sencillez y fácil uso, es una de las librerías de este tipo más utilizadas, y sitios web reconocidos como Wikimedia, Foursquare, Pinterest, Washington Post o Flickr la utilizan para mostrar sus mapas interactivos.
Desde el punto de vista técnico, Leaflet ofrece un repertorio muy completo de funcionalidades, a través de una API relativamente sencilla e intuitiva, con herramientas y utilidades muy potentes, como marcadores, capas, zoom, animación o aceleración hardware.
Además, está diseñado teniendo en cuenta la tecnología de los dispositivos móviles, por lo que la interacción de los mapas responde a todos los gestos que utilizamos habitualmente sin necesidad de configuraciones o complementos adicionales.
En principio, debido a la filosofía de su diseño y construcción, la librería Leaflet debe utilizarse desde código JavaScript, con llamadas a funciones de su API. Es decir, que podemos creer que requiere una cualificación técnica especializada para utilizarlo en un sitio web.
Si bien esto es cierto para aprovechar sus características más avanzadas, disponemos de un plugin (como veremos en una sección posterior) que, mediante la utilización de un conjunto de shortcodes en WordPress dentro de las páginas web, permiten crear y utilizar mapas interactivos sin necesidad de desarrollar código JavaScript.
Características de Leaflet para WordPress
En su instalación básica, sin ningún complemento o plugin adicional, la librería Leaflet permite crear mapas interactivos utilizando las siguientes tecnologías:
- HTML, que es el lenguaje de etiquetado que define la organización y disposición interna de una página web. CSS, u hojas de estilo, que definen cómo se visualiza y muestra la información contenido en la página web.
- JavaScript, que es un lenguaje de programación con el que se accede a las funciones de Leaflet y se define el comportamiento de los mapas dentro de la página web.
Frente a otras librerías similares para mapas interactivos, Leaflet ofrece las siguientes ventajas:
- Completo repertorio de funcionalidades básicas, que cubren prácticamente todas las necesidades de la gran mayoría de sitios web.
- Documentación muy detallada, con ejemplos de uso de las funciones de la API que facilitan la curva de aprendizaje.
- API intuitiva, sencilla y versátil, que permite utilizar las funcionalidades más potentes con pocas líneas de programación.
- Soporte móvil integrado, de forma que no hace falta ningún desarrollo o tratamiento posterior de los mapas para su integración y utilización en dispositivos móviles.
- Disponibilidad de muchos complementos o plugins que amplían la funcionalidad de Leaflet sin desarrollos ni implantaciones adicionales.
- Compatible con todos los navegadores web modernos que soporten HTML5 y CSS3, así como versiones antiguas de éstos.
¿Por qué utilizar OpenStreetMap?
Leaflet permite utilizar diversos proveedores de servicios de mapeado; entre ellos, el conocido y extendido Google Maps. Además, también contempla un proveedor de licencia libre y gratuita, OpenStreetMap.
La pregunta que surge en este punto es que, teniendo disponible Google Maps, que también es “gratuito” (entre comillas porque la utilización de algunas funcionalidades sí que tienen coste) y con la ventaja añadida de que es uno de los más utilizados, ¿por qué utilizar otro proveedor, como OpenStreetMap?
Veamos a continuación algunas razones que pueden justificar el uso de OpenStreetMap frente a Google Maps: Para un servicio básico de mapeado, como visualización y localización de lugares o generación de rutas, OpenStreetMap ofrece prácticamente el mismo nivel funcional que Google Maps, suficiente para la mayoría de sitios web que quieren incluir mapas interactivos en sus páginas.
OpenStreetMap es una plataforma con licencia libre (“open licence”), cuyo contenido se amplía y mantiene con la aportación y colaboración de los propios usuarios (bajo la misma filosofía que la Wikipedia, por ejemplo).
Como consecuencia de esta idiosincrasia, su funcionamiento nunca estará regulado o influenciado por intereses comerciales o financieros.
Toda la información disponible en OpenStreetMap es de uso libre (al ser recopilada directamente por los usuarios y no por otros organismos); por tanto, se puede disponer o descargar libremente todos sus datos sin restricciones.
A diferencia de Google Maps, las condiciones de uso del servicio de OpenStreetMap nunca cambiarán, lo que garantiza que siempre dispondremos de las mismas características de servicio, sin limitaciones ni restricciones.
Finalmente, hay que tener en cuenta que cada proveedor de servicios de mapeado puede ofrecer servicios especializados de cartografía, que proveedores “generalistas” como Google Maps u OpenStreetMap no contemplan en su catálogo, lo que puede influir a la hora de elegir uno u otro, en función de lo que necesitemos hacer con el mapa interactivo.
Instalación y configuración del plugin Leaflet para WordPress
Como se ha mencionado anteriormente, Leaflet proporciona un interface de programación en JavaScript para utilizar dentro de las páginas web, independientemente de la tecnología o plataforma que utilicemos en nuestro sitio web.
Ahora bien, esto no significa que para utilizar Leaflet debamos escribir nuestras propias aplicaciones en JavaScript. Si ya tienes o vas a crear una web WordPress, dispones de un plugin, Leaflet Map, con el que podrás insertar mapas interactivos sin necesidad de codificar en JavaScript y directamente dentro del contenido de las páginas web, mediante shortcodes.
Parámetros de configuración del plugin Leaflet Map
Tal como se muestra en el vídeo anterior, el proceso de instalación y configuración del plugin de Leaflet es muy sencillo, siendo la configuración por defecto válida para la mayoría de los sitios web, cuando solo precisen la funcionalidad básica de los mapas interactivos (como ubicar una localización o navegar a través del mapa).
Sin embargo, hay algunos parámetros de su configuración, relacionados con la conexión con el proveedor de servicios de mapeado, que no son evidentes a primera vista y pueden resultar confusos si optamos por usar otro proveedor que no sea OpenStreetMap.
Veamos a continuación cuáles son estos parámetros, qué significan y, si decidimos modificar alguno, qué consideraciones debemos tener en cuenta para que Leaflet pueda insertar correctamente el mapa interactivo:
Configuración del proveedor de servicios de mapeado:
En este apartado, se selecciona y configura la conexión con el proveedor de servicios de mapeado en el parámetro “Default Tiling Service”.
Por defecto, el plugin utiliza OpenStreetMap y los parámetros “Map Tile URL” y “Map Tile URL Subdomains” contienen los datos de conexión con el servidor del proveedor (los que se muestran en la imagen anterior).
Podemos cambiar estos datos por los de otro servidor, consultando las cadenas de conexión en la dirección URL que aparece bajo el parámetro “Map Tile URL”.
El plugin nos permite seleccionar otro proveedor, MapQuest, pero en este caso es necesario registrarse en su sitio web y generar una Consumer Key, que deberemos copiar en el parámetro “MapQuest Key App”.
Conexión con la librería Leaflet.js
El plugin habilita la utilización de shortcodes en las páginas web para incrustar los mapas interactivos, pero no incorpora la librería Leaflet.js propiamente dicha ni las CSS de visualización del mapa.
Estos parámetros indican donde se encuentra dicha librería. Por defecto, contienen la dirección URL de la librería y la hoja de estilos CSS del sitio web del desarrollador de la librería.
Podemos optar por descargar esa librería en nuestro propio servidor web, para no tener que conectar con un servidor remoto y así evitar el consiguiente retraso que se produce mientras conecta y descarga desde ese servidor.
Sin embargo, si optamos por tener una copia de la librería en nuestro servidor, no debemos olvidar revisarlo periódicamente para comprobar que no haya nuevas versiones de la librería.
Configuración del GeoCoder
Como vimos, un GeoCoder permite obtener las coordenadas (latitud y longitud) de un punto geográfico a partir de su dirección y así poder localizarlo en el mapa interactivo.
Por defecto, el plugin utiliza el GeoCoder de OpenStreetMap, “Nominatim”, pero también podemos utilizar el de Google Maps (lo que puede ser necesario en las áreas geográficas más distantes y menos populosas).
En tal caso, deberemos registrarnos en la plataforma de Google Maps y crear un proyecto para obtener la API Key que copiaremos en el parámetro “Google API Key”. En principio, salvo que hagamos un uso bastante intenso de este servicio, no supondrá ningún coste para nosotros.
Cómo utilizar los shortcodes de Leaflet
Incrustar un mapa interactivo en una página web con Leaflet es tan fácil como escribir un shortcode y especificar el valor de los parámetros para que el mapa muestre el área geográfica y la información que nos interese.
La relación completa de shortcodes del plugin la podemos consultar en la página web del desarrollador Estos shortcodes son muy versátiles, con la posibilidad de utilizar muchos parámetros para aprovechar toda la potencia de la librería Leaflet y hacer prácticamente cualquier cosa que necesitemos.
