Leaflet es una librería JavasScript de código abierto para embeber mapas. Es una librería perfecta para sustituir a Google Maps en los sitios en que queremos incluir un mapa de situación de nuestro negocio o una serie de marcadores con direcciones de interés.
Recientemente, hemos utilizado esta librería en el proyecto Podorunners, en el que estamos colaborando junto a un grupo de especialistas en podología. En el sitio web que estamos construyendo, hay una sección donde se puede localizar en un mapa a los miembros del equipo. Para construir esta sección hemos usado Leaflet y Mapbox.
Configurando el sitio
El sitio está construido en Wordpress. Se ha creado un tipo de contenido personalizado para los miembros del equipo y campos personalizados para los diferentes datos. Uno de estos campos es la dirección de la clínica o la localidad de residencia del especialista. El dato que se va a usar son las coordenadas.
El tema visual se ha construido con Timber. Para la página de miembros del equipo se ha realizado una plantilla donde se hace una iteración de los miembros y se usa el campo coordenadas para ubicar los marcadores en el mapa construido con Leaflet.
Primero deberemos crear el tipo de contenido personalizado en el archivo functions.php de nuestro tema:
/** Custom post types */
function create_posttype() {
register_post_type( 'team',
array(
'labels' => array(
'name' => __( 'Equipos' ),
'singular_name' => __( 'Equipo' )
),
'public' => true,
'has_archive' => false,
'publicly_queryable' => true,
'hierarchical' => true,
'supports' => array( 'title','editor', 'excerpt', 'thumbnail','custom-fields' ),
'rewrite' => array('slug' => 'team')
)
);
}
add_action( 'init', 'create_posttype' );
Al crear el tipo de contenido indicamos que se usaran custom-fields.
En segundo lugar definimos la ruta en la que podremos visualizar los post de nuestro tipo de contenido personalizado. En el archivo functions.php:
Routes::map('equipo', function($params){
$query = '';
$params = array();
Routes::load('equipo.php', [], '', 200);
});
En tercer lugar definimos qué datos se mostrarán en la página de equipo, en el archivo equipo.php que hemos designado anteriormente:
$context = Timber::get_context();
$args = array(
'post_type' => 'team', //para listar unicamente el tipo de contenido personalizado
'posts_per_page' => -1, //para listar todos los post
'orderby' => array(
'title' => 'ASC' //los ordenamos por orden alfabetico ascendente
),
);
$context['posts'] = new Timber\PostQuery($args);
$templates = array( 'equipo.twig' ); //enviamos los datos a la plantilla
Timber::render( $templates, $context );
Preparando la plantilla de "Equipo"
Los datos que hemos preparado se envían a la plantilla equipo.twig. Aquí es donde cargaremos los scripts y construiremos nuestro mapa a partir de los datos obtenidos del campo "Coordenadas" del contenido personalizado "Equipo".
Las plantillas de Twig extienden a la plantilla base.twig que mediante el sistema de bloques nos permite incluir contenido en la etiqueta <head> que solo estará disponible cuando se cargue la plantilla determinada:
{% extends "base.twig" %}
{% block head %}
//scripts
{% endblock %}
{% block content %}
//donde se visualizara el mapa
{% endblock %}
Incluyendo el mapa
Una vez preparada la estructura, ya podemos empezar a incluir los scripts de Leaflet para la visualización de los datos sobre el mapa.
En primer lugar incluiremos los archivos de Leaflet en la etiqueta <head> de la página:
// incluimos la hoja de estilo de Leaflet
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" crossorigin=""/>
// definimos la altura de nuestro mapa
<style>
#mapid { height:550px; }
</style>
// incluimos el script de Leaflet
<script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js" integrity="sha512-QVftwZFqvtRNi0ZyCtsznlKSWOStnDORoefr1enyq5mVL4tmKB3S/EnC3rRJcxCPavG10IcrVGSmPh6Qw5lwrg==" crossorigin=""></script>
Ahora incluimos el contenedor del mapa en el bloque de contenido:
<div id="mapid"></div>
a continuación el script para cargar el mapa. Definiremos las coordenadas y el nivel de zoom:
var mymap = L.map('mapid').setView([39.8860292,-3.3515843], 6);
Ahora añadiremos un capa al mapa. En este caso usaremos una capa de Mapbox Streets (para usar capas de Mapbox hay que solicitar una clave de validación). ( Nota: Leaflet no obliga a utilizar un proveedor de capas determinado)
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=tu.clave.de.validacion.de.mapbox', {
maxZoom: 18,
attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
'<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
id: 'mapbox.streets'
}).addTo(mymap);
Hay que asegurarse que cargamos el script después de llamar al contenedor <div id="mapid"></div> y haber cargado los archivos de Leaflet (en nuestro caso están en la etiqueta <head>).
Nota: Siempre que se utilice algo basado en OpenStreetMap, es obligatorio incluir la atribución por cuestiones de derechos. También otros proveedores de capas como Mapbox requieren atribución.
Incluyendo marcadores en el mapa a partir de nuestros datos
Para añadir un marcador con ventana emergente asociada lo incluiremos de esta manera:
var marker = L.marker([lonitud, latitud]).addTo(mymap);.bindPopup("texto"); // siendo longitud y latitud los valores numericos correspondientes y texto el texto a incluir en la ventana, siendo valido incluir etiquetas html
En nuestra plantilla disponemos de los valores del campo personalizado "Coordenadas" de nuestro tipo de contenido. Así que para colocar todos los marcadores asociados en el mapa, tendremos que iterar por todos los post y mostrar las coordenadas de cada uno de ellos:
{% for post in posts %}
L.marker([{{ post.meta('coordenadas') }}]).addTo(mymap).bindPopup("<div class='card border-0'><img src='{{post.thumbnail.src|resize(350)}}' class='card-img-top' alt='{{post.title}}'><div class='card-body text-center'><p class='card-text'><a href='{{post.link}}'><strong>{{post.title}}</strong></a></p></div></div>");
{% endfor %}
Este es el resultado final: https://podorunners.com/equipo
Conclusión
Separar la lógica de la presentación para construir un tema visual (en este caso en Wordpress usando el plugin Timber) nos permite un manejo de los datos más preciso y sencillo. Este acceso directo a los datos, posibilita el uso de herramientas de código abierto para construir visualizaciones enriquecidas, como en el mapa de este ejemplo que hemos descrito.
