El shortcode [leaflet-marker] que vimos en el artículo anterior es el punto de partida, pero Leaflet Map ofrece bastantes más opciones para personalizar los marcadores de tu mapa: cambiar el icono, añadir tooltips, controlar el comportamiento del popup, o usar marcadores con iconos de Font Awesome gracias al plugin complementario Extensions for Leaflet Map.
Aquí vamos a repasar las posibilidades de los marcadores en Leaflet Map, con ejemplos para que puedas entender claramente cómo puedes trabajar con ellos en tus mapas. Pero dejaremos para un siguiente artículo las las funcionalidades más avanzadas: clustering, listas de marcadores, mapas de resumen automáticos y más.
Si no tienes Leaflet Map instalado, empieza por aquí: Cómo instalar y configurar Leaflet Map desde cero.
El marcador nativo
Como vimos en el artículo anterior, insertar un marcador básico sobre un mapa base hecho con Leaflet Map es muy fácil. Básicamente, a continuación del shortcode del mapa base [leaflet-map] añadiremos el shortcode del marcador con las coordenadas y, si queremos, podremos incluir un texto para el pop-up (texto emergente) del marcador:
[leaflet-map zoom=13 lat=37.18 lng=-3.60]
[leaflet-marker lat=37.1760 lng=-3.5880]Alhambra[/leaflet-marker]Esto coloca un pin azul estándar en el mapa con un popup que muestra el texto «Alhambra» al hacer clic. A partir de aquí, vamos a ver cómo mejorarlo.
Tooltip con title
El parámetro title muestra una etiqueta de texto al pasar el ratón sobre el marcador, sin necesidad de hacer clic:
[leaflet-map zoom=13 lat=37.18 lng=-3.60]
[leaflet-marker lat=37.1760 lng=-3.5880 title="Alhambra"]Monumento más visitado de España[/leaflet-marker]
💡
titlees un parámetro importante más allá del tooltip: lo necesitarás si más adelante usas[listmarker]o[targetmarker]del plugin Extensions for Leaflet Map. Si no incluyes eltitle, esos módulos no podrán identificar el marcador.
Popup abierto por defecto con visible
Si quieres que el popup de un marcador aparezca abierto nada más cargar el mapa, sin que el usuario tenga que hacer clic, entonces tendrás que usar el parámetro visible:
[leaflet-map zoom=13 lat=37.18 lng=-3.60]
[leaflet-marker lat=37.1760 lng=-3.5880 visible=1]Alhambra[/leaflet-marker]
Esto te será muy útil en páginas de detalle, en el que a lo mejor hay más marcadores, de un lugar concreto donde ese marcador concreto sea el protagonista del mapa.
Marcador arrastrable con draggable
Ahora imaginemos que el marcador que queremos añadir queremos poder arrastrarlo nosotros por el mapa y poder cambiarlo de lugar. Para ello, utilizaremos el parámetro draggable:
[leaflet-map zoom=13 lat=37.18 lng=-3.60]
[leaflet-marker lat=37.1760 lng=-3.5880 draggable=1]Arrastra este marcador[/leaflet-marker]
Lo cierto es que se usa poco en mapas de producción, pero podría ser útil si estás construyendo herramientas interactivas o quieres demostrar coordenadas en un tutorial.
HTML en el popup
Hasta ahora hemos estado añadiendo texto plano al contenido de los marcadores, pero quizá te interese saber que éste admite HTML básico:
[leaflet-map zoom=13 lat=37.18 lng=-3.60]
[leaflet-marker lat=37.1760 lng=-3.5880]
<b>Alhambra</b><br>
Siglo XIII · <a href="https://www.alhambra-patronato.es" target="_blank">Web oficial</a>
[/leaflet-marker]Icono personalizado con imagen propia
El pin azul estándar de Leaflet Map está muy bien, pero debemos poder utilizar otras posibilidades, y una de ellas es sustituirlo por cualquier imagen. El parámetro para ello es iconUrl:
[leaflet-map zoom=13 lat=37.18 lng=-3.60]
[leaflet-marker lat=37.1760 lng=-3.5880 iconUrl="https://tudominio.com/wp-content/uploads/icono-monumento.png" iconSize="32,32" iconAnchor="16,32" popupAnchor="0,-32"]Alhambra[/leaflet-marker]
Aquí es importante que aclaremos cuáles son los parámetros de tamaño y posición, para que entendamos bien cómo posicionar correctamente la imagen y que se comporte bien sin hacer cosas raras:
iconSize: se trata del tamaño del icono en píxeles, formato"ancho,alto". Por ejemplo"32,32"para un icono cuadrado de 32px.iconAnchor: punto del icono que se ancla a la coordenada geográfica, formato"x,y". Para un icono de 32×32 con la punta abajo, el valor correcto es"16,32": centro horizontal, base inferior.popupAnchor: posición del popup respecto al icono, formato"x,y". Con"0,-32"el popup aparece encima del icono, y no se superpondrá al marcador.tooltipAnchor: igual quepopupAnchorpero para el tooltip.
💡 El valor de
iconAnchores el que más confunde. Piénsalo de la siguiente forma: es el píxel de la imagen que va a coincidir exactamente con el punto del mapa. Si tu icono es una chincheta con la punta abajo, ese píxel es el centro horizontal y la fila inferior de la imagen.
Añadir sombra al marcador
Podemos añadirle una sombra al marcador, para ello, tenemos que tener la imagen de la sombra, no es un efecto como tal, y tendremos que hacer una pequeña «ñapa» para dar esa sensación de tridimensionalidad. Fíjate en el siguiente ejemplo en los parámetros shadowURL, que define la imagen de la sombras, shadowSize, que indica el tamaño de la misma y el shadowAnchor, que indica el punto de anclaje de la sombra, a diferencia del de la propia imagen:
[leaflet-marker lat=37.1760 lng=-3.5880 iconUrl="https://tudominio.com/icono.png" iconSize="32,32" iconAnchor="16,32" shadowUrl="https://tudominio.com/sombra.png" shadowSize="40,20" shadowAnchor="12,20"]Alhambra[/leaflet-marker]
Varios marcadores con iconos diferentes
Es muy típico tener tener marcadores de distintos tipos en el mismo mapa. Con iconos personalizados puedes diferenciarlos visualmente:
[leaflet-map zoom=13 lat=37.18 lng=-3.60]
[leaflet-marker lat=37.1760 lng=-3.5880 iconUrl="https://tudominio.com/icono-monumento.png" iconSize="32,32" iconAnchor="16,32"]<b>Alhambra</b><br>Monumento[/leaflet-marker]
[leaflet-marker lat=37.1767 lng=-3.5994 iconUrl="https://tudominio.com/icono-iglesia.png" iconSize="32,32" iconAnchor="16,32"]<b>Catedral de Granada</b><br>Iglesia[/leaflet-marker]
[leaflet-marker lat=37.1771 lng=-3.5902 iconUrl="https://tudominio.com/icono-museo.png" iconSize="32,32" iconAnchor="16,32"]<b>Museo de la Alhambra</b><br>Museo[/leaflet-marker]
⚠️ Este sistema funciona bien con pocos marcadores. Pero, si tienes muchos puntos con distintas categorías, el módulo
[geojsonmarker]de Extensions for Leaflet Map es mucho más eficiente: pero esto lo veremos en el siguiente artículo.
Marcadores con iconos de Font Awesome
Si la opción anterior se te ha quedado corta, el plugin Extensions for Leaflet Map nos permite darle un poco más de «vidilla» a nuestros marcadores, ya que permite diferenciarlos un poco mejor añadiendo iconos de Font Awesome. Esto nos permite tener marcadores con iconos vectoriales sin necesidad de tener que preparar imágenes PNG.
Extensions for Leaflet Map incluye el shortcode [leaflet-extramarker], basado en la librería Leaflet.ExtraMarkers.
Lo primero que debes hacer es instalar Extensions for Leaflet Map:
- Ve a Plugins > Añadir nuevo.
- Busca Extensions for Leaflet Map.
- Instala y activa.
Veamos un ejemplo básico en el que creamos un marcador rojo (markerColor="red") y, en lugar de la forma típica de marcador, le asignamos una forma circular (shape="circle"). Además, le añadimos un favicon con el símbolo de museo (icon="fa-landmark"). Fíjate que hay que añadirle también prefix="fa".
[leaflet-map zoom=13 lat=37.18 lng=-3.60]
[leaflet-extramarker lat=37.1760 lng=-3.5880 markerColor="red" shape="circle" icon="fa-landmark" prefix="fa" title="Alhambra"]Alhambra[/leaflet-extramarker]
De esta forma, podemos añadir varios marcadores diferenciados tanto por color como por icono:
[leaflet-map zoom=13 lat=37.18 lng=-3.60]
[leaflet-extramarker lat=37.1760 lng=-3.5880 markerColor="red" shape="circle" icon="fa-landmark" prefix="fa" title="Alhambra"]<b>Alhambra</b><br>Monumento[/leaflet-extramarker]
[leaflet-extramarker lat=37.1767 lng=-3.5994 markerColor="blue" shape="square" icon="fa-church" prefix="fa" title="Catedral de Granada"]<b>Catedral de Granada</b><br>Iglesia[/leaflet-extramarker]
[leaflet-extramarker lat=37.1771 lng=-3.5902 markerColor="green" shape="circle" icon="fa-building-columns" prefix="fa" title="Museo de la Alhambra"]<b>Museo de la Alhambra</b><br>Museo[/leaflet-extramarker]
[leaflet-extramarker lat=37.1804 lng=-3.5862 markerColor="orange" shape="star" icon="fa-tree" prefix="fa" title="Jardines del Generalife"]<b>Jardines del Generalife</b><br>Jardín[/leaflet-extramarker]
Tenemos varios colores disponibles para markerColor: red, blue, green, orange, purple, darkred, darkblue, darkgreen, cadetblue, white, black, gray
En cuanto a formas disponibles para shape, tenemos: circle, square, star, penta
⚠️ Si el
titletiene más de una palabra, escríbelo siempre entre comillas:title="Jardines del Generalife". Sin comillas, el shortcode solo procesa la primera palabra y el resto desaparece.
Cuándo usar cada tipo de marcador
Conviene saber cuándo usar cada marcador para no desperdiciar recursos, ni matar moscas a cañonazos. Así:
Para mapas sencillos con pocos puntos donde el aspecto visual no es prioritario, y no necesitas dependencias adicionales, deberás usar el marcador nativo [leaflet-marker] con pin estándar.
Cuando tienes iconos propios diseñados específicamente para tu proyecto y quieres control total sobre la imagen, te recomiendo que utilices el marcador nativo [leaflet-marker] con iconUrl.
Cuando necesites diferenciar visualmente tipos de lugares con colores y formas, sin preparar imágenes, utiliza [leaflet-extramarker]. Éste requiere el plugin adicional Extensions for Leaflet Map.
En un próximo artículo veremos las funcionalidades avanzadas de Extensions for Leaflet Map: clustering para mapas con muchos marcadores, listas de marcadores, marcadores desde archivos GeoJSON y mapas de resumen automáticos a partir del contenido de tu WordPress.
