En este artículo vamos a ver cómo geolocalizar un artículo de blog, y cómo mostrar esos artículos localizados en un mapa. Una característica muy práctica para blogs de viajes, webs de hoteles, etc.
Anteriormente hemos visto cómo crear mapas con Marcadores en Leaflet Map. Incluso hemos visto cómo utilizar estos marcadores de una forma más avanzada, y «vitaminarlos» un poco más. Ahora vamos a subir un escalón más con los mapas destacados y los mapas resumen. Para ello, vamos a plantear el siguiente ejemplo. Imagina que tienes una web de viajes, en la que cada entrada es un destino.
Tendría lógica que cada uno de las entradas que cuentan ese destino mostrasen un mapa con la ubicación del mismo. Esto es lo que llamamos un Mapa destacado.
Pero, por otro lado, tendría sentido, en la página donde mostramos la lista o el loop con todos los destinos, mostrar un mapa en el que éstos se vean localizados con un marcador. Y, por supuesto, que no haya que hacerlo a mano, sino de forma automática.
Geolocalizar las entradas
Para geolocalizar las entradas, debemos recurrir a los campos personalizados, que pueden ser los nativos de WordPress, o puedes utilizar cualquier otro plugin como ACF para crear fácilmente dichos campos.
En este ejemplo, para no complicarlo mucho, vamos a utilizar los custom fields nativos de WordPress. Recuerda que, para activarlos, deberás ir a los tres puntitos que hay arriba a la derecha en el editor de WordPress, a continuación hacer clic en Preferencias, y activar el interruptor de Campos personalizados, que encontrarás abajo.
Recuerda también que los campos personalizados están en un metabox que aparece al fondo del editor, donde puedes leer Cajas meta. Despliega ese panel tirando hacia arriba y verás los campos personalizados.
Te recuerdo que estamos en la entrada de un destino determinado, ese destino debe tener unas coordenadas de latitud y de longitud que puedes consultar en Google Maps o en OpenStreetMap. Pues son estas coordenadas las que vamos a añadir como campos personalizados, de modo que los campos que vamos a definir son:
geo_latitude: coordenada de latitud, siempre usando el punto para los decimales. Ejemplo:18.90839958580139geo_longitude: coordenada de longitud. Ejemplo:-70.08178710937501geo_address: ésta sería la dirección que vamos a utilizar en la etiqueta, en este casoSanto Domingo, Rep. Dominicana.
Mapa destacado con [featured-map]
Ahora que tenemos las coordenadas asociadas a nuestra entrada, es hora de mostrar el mapa destacado. Yo, por ejemplo, quiero mostrarlo al principio de la entrada, o bien después del primer párrafo de la misma.
En principio, sería suficiente con añadir el shortcode [featured-map], sin nada más. Por supuesto, podrás personalizar el mapa con todos los parámetros que acepta este comando, pero aquí lo he hecho más simple para que sea más fácil de comprender. Por tanto, en el editor, tendríamos lo siguiente:
Y en el frontend ya podríamos ver publicado el mapa con el punto de ubicación que hemos definido en los campos personalizados de la entrada.
Pero imagina que quieres complicar un poco más el mapa, en el siguiente ejemplo podemos añadirle un popup, darle color al marcador, añadir un simbolito dentro, etc.
[featured-map zoom=9 height=200 popup=geo_address marker=leaflet-extramarker markerColor=blue shape=circle icon=fa-house prefix=fa extraClasses=fa-5x iconColor=#98A700]De esta forma, vemos cómo cambiaríamos el aspecto del marcador en el mapa.
Otro ejemplo sería el siguiente, donde repetimos el shortcode anterior, pero las coordenadas en los campos personalizados son diferentes.
Como podemos ver, en el frontend se reflejará el resultado correspondiente.
Lo siguiente sería hacer el mapa resumen automático.
Mapa de resumen automático con [overviewmap]
Ahora, lo que queremos es mostrar en un mapa resumen todos los marcadores de las entradas creadas gracias a posicionar las entradas con las coordenadas de esos lugares en los campos personalizados. Este mapa resumen lo haremos con el comando [overviewmap].
Opcionalmente puedes añadir también el atributo overview-icon, que indica el icono del marcador para ese post concreto, y podemos mostrar la imagen destacada en el popup con el atributo show_thumbnails=1.
Para crear nuestro mapa básico, basiquísimo, haríamos lo siguiente:
[leaflet-map fitbounds]
[overviewmap latlngs=codex]
[hover]Fíjate que, para que tome las coordenadas de algún sitio, le hemos indicado que éstas vienen del sistema de geoposicionamiento de WordPress, es decir, los campos estándar de WordPress que hemos utilizado (geo_latitude y geo_longitude).
Y finalmente, nos mostrará el mapa que queremos ver, con aquellos marcadores asociados a las entradas a las que le hayamos añadido los campos de coordenadas.
Pero además, si tenemos clasificadas las entradas por categorías, también podemos filtrar en el mapa dichas categorías de la siguiente forma.
[leaflet-map fitbounds]
[overviewmap category="Asia"]O podríamos filtrar por una lista de categorías:
[leaflet-map fitbounds]
[overviewmap category="Asia,África"]Pero es que, si le añadimos AND al inicio, solo mostraría posts que perteneciesen a todas las categorías de la lista simultáneamente, como si estuviésemos haciendo una consulta SQL:
[leaflet-map fitbounds]
[overviewmap category="AND,aventura,historia"]Si ahora quisiésemos utilizar una imagen destacada y añadir un enlace a la categoría:
[leaflet-map fitbounds]
[overviewmap show_thumbnails thumbsize="100,100" show_category newtab]Imagina que el mapa no muestra los marcadores que esperas. En ese caso, el parámetro debug generará una tabla con todos los posts que está leyendo el plugin y sus campos personalizados:
[leaflet-map fitbounds]
[overviewmap debug]Esto te permite ver exactamente qué datos encuentra el plugin en cada post y dónde está el error. Algo así como lo que puedes ver a continuación.
Enlazar marcadores con [targetmarker] y [targetlink]
Ahora imagina que quieres crear un enlace en cualquier parte de tu web en el que, al hacer clic, lleve al usuario a un mapa y abra automáticamente el popup de un marcador concreto.
En la misma página
Si el enlace y el mapa los tienes en la misma página, solo necesitas añadir [zoomhomemap] al mapa, y luego el enlace hacerlo con [targetlink], y es importante que el marcador tenga title, que es el nexo que vamos a utilizar. Así que podemos crear este mapa:
[leaflet-map fitbounds]
[leaflet-marker lat=37.1760 lng=-3.5880 title="Alhambra"]Alhambra[/leaflet-marker]
[leaflet-marker lat=37.1767 lng=-3.5994 title="Catedral de Granada"]Catedral de Granada[/leaflet-marker]
[leaflet-marker lat=37.1771 lng=-3.5902 title="Museo de la Alhambra"]Museo de la Alhambra[/leaflet-marker]
[zoomhomemap]Y en cualquier punto del texto de la misma página:
[targetlink title="Alhambra" linktext="Ver la Alhambra en el mapa"]
[targetlink title="Catedral de Granada" linktext="Ver la Catedral en el mapa"]
[targetlink title="Museo de la Alhambra" linktext="Ver el Museo de la Alhambra en el mapa"]
[targetlink title="Jardines del Generalife" linktext="Ver los Jardines del Generalife en el mapa"]Como puedes ver, el comportamiento es exactamente igual que cuando hacemos un anchor dentro de una página web, solo que nos mandará a un marcador determinado del mapa, y abrirá el popup.
En páginas diferentes
Pero si el enlace está en una página y el mapa en otra, el mapa de destino necesita los shortcodes [zoomhomemap] y [targetmarker]:
[leaflet-map fitbounds]
[leaflet-marker lat=37.1760 lng=-3.5880 title="Alhambra"]Alhambra[/leaflet-marker]
[leaflet-marker lat=37.1767 lng=-3.5994 title="Catedral de Granada"]Catedral de Granada[/leaflet-marker]
[zoomhomemap]
[targetmarker]Y en la página de origen:
[targetlink title="Alhambra" link="https://tudominio.com/mapa-granada/" linktext="Ver la Alhambra en el mapa"]
Desde un sitio externo
Vamos a complicar más la cosa. ¿Y si queremos enlazar al mapa desde otro sitio? Para ello usaremos una querystring directamente en la URL, sin shortcode:
https://tudominio.com/mapa-granada/?lat=37.1760&lng=-3.5880
El parámetro zoom es opcional: ?lat=37.1760&lng=-3.5880&zoom=16
También funciona con GeoJSON
Y si usas GeoJSON ¿vas a poder usarlo? Sí, [targetlink] también funciona con GeoJSON, fíjate:
[targetlink property=name value="Alhambra" link="https://tudominio.com/mapa-granada/" linktext="Ver en el mapa"]
⚠️ Fíjate que el orden de los shortcodes en el mapa de destino es fijo:
[cluster]→[zoomhomemap]→[targetmarker]. Si tienes varios mapas en la misma página,[targetmarker]solo puede aparecer una vez y debe ser el último shortcode.
Conclusiones
Como puedes ver, Extensions for Leaflet Map ofrece unas posibilidades alucinantes a la hora de trabajar con marcadores dinámicos, hasta este punto de hacer que se comporten como enlaces a páginas web.
Si quieres más información, te recomiendo que explores los ejemplos que trae la documentación de Extensions for Leaflet Map, que puede llegar a ser infinita.
