Añadir marcadores a un mapa de Leaflet: L.marker y L.icon

Cuando hacemos un mapa web usando la librería Leaflet, tenemos que empezar a añadirle cosas. No nos basta, en principio, dejar una simple capa base. Queremos rellenarla. Y nada mejor para rellenarla utilizando unos marcadores, es decir, unos puntos o coordenadas geográficas con la información que queramos destacar.  Los marcadores van a actuar como una capa temática, ya que se van a situar por encima de la capa base. Se escribe entre el <script></script> del <body></body>. En esta ocasión os voy a enseñar cómo añadir marcadores a un mapa de Leaflet. Aunque si queréis modificar los controles del mapa, como las escalas, atribuciones, capas y el zoom, no os podéis perder cómo personalizarlos. Los mapas pueden quedar espectaculares, incluso si se le añaden multitud de plugins.

Aunque es importante destacar que, de forma predeterminada, cada marcador está compuesto por un botón azul y su sombra asociada. Pero como ya podéis adivinar, ésto también lo podemos modificar. Y aquí también os lo voy a mostrar.

Sin embargo, os recomiendo que tengáis una base de programación en HTML, CSS y JavaScript, para que podáis comprender en su plenitud los códigos que vamos a ver.

Añadir marcadores a un mapa de Leaflet

Quiero leer...

Añadir marcadores a un mapa de Leaflet

Para añadir marcadores a un mapa de Leaflet vamos a recurrir a la sintaxis de la función L.marker, mientras que para modificar el aspecto de los marcadores, usaremos la función L.icon.

Sintaxis y opciones de L.marker

Son los marcadores predefinidos por Leaflet. La sintaxis de L.marker es:

L.marker([latitud, longitud], {opción1, opción2...})

Las opciones son:

  • icon: cambiar el icono que viene por defecto con L.marker. Se utiliza también la clase L.icon.
  • draggable: nos permite desplazar el marcador cuando se ha seleccionado. Tiene valor lógico true/false. Por defecto viene false. Se escriben en minúsculas.
  • title: nos aparece un texto al pasar el ratón por encima del marcador.
  • opacity: indica la opacidad. Valores entre 0 y 1. Por defecto 1.

Podemos añadir métodos a la clase L.marker:

  • .addTo(): nos permite añadir el marcador al mapa.
  • .bindPopup: nos crea una ventana emergente que surge al hacer clic sobre el marcador. Se puede editar con HTML la ventana.
  • .seticon: cambia el icono del marcador.

Ejemplo con las provincias romanas:

var Augusta_Emerita = L.marker([38.91667, -6.33333], {
title: "Augusta Emerita",
draggable:true,
opacity: 0.75
}).bindPopup("<i>Augusta Emerita</i>")
.addTo(map);
var Corduba = L.marker([37.8847, -4.77639], {
title: "Corduba",
draggable:false,
opacity: 1
}).bindPopup("<b>Corduba</b>")
.addTo(map);
var Tarraco = L.marker([41.114722, 1.259306], {
title: "Tarraco",
draggable:false,
opacity: 0.5
}).bindPopup("<h2>Tarraco</h2>")
.addTo(map);

Como podemos observar en el mapa anterior, tenemos tres localizaciones: una para Augusta Emerita, otra para Corduba y otra para Tarraco. Podéis comprobar sobre ese mapa todo lo que vamos a comentar a continuación, ya que es interactivo:

  • Cada icono tiene un nivel de opacidad diferente.
  • Además, mediante el uso de .bindPopup hemos añadido ventanas emergentes que al hacer click sobre los iconos se abren.
  • Y más interesante si cabe es que podemos editar el estilo del texto de la ventana con códigos HTML. Por ejemplo, Tarraco está puesto como si fuese un heading 2 (h2).
  • Por último, podemos cambiar la posición de uno de los marcadores manualmente, pinchando y arrastrando. ¿Cuál es?

Sintaxis y opciones de L.icon

L.icon permite añadir marcadores propios con diseños diferentes, pero está conectada con L.marker. De hecho, L.icon actúa para editar los marcadores, pero luego hay que indicarle a L.marker que use sus características. Sería como algo similar a un estilo CSS. Su sintaxis es:

L.icon({opción1, opción2…})

Estas opciones son:

  • iconUrl: es obligatoria e indica la ruta de acceso al icono que queremos.
  • iconSize: establece el tamaño del icono (ancho por alto, en píxleles). Por ejemplo [20, 60].
  • iconAnchor: permite indicar dónde está la “punta” del icono, y nos servirá para indicar la ubicación. Para que en la punta recaigan las coordenadas geográficas, iconAnchor debe tener la mitad del ancho y la misma altura que el tamaño del icono indicado en iconSize([10, 6]) por ejemplo. De otro modo, si no se indica, el centro del icono será el que contenga las coordenadas.
  • shadowUrl: sirve para indicar la ubicación de la sombra del marcador.
  • shadowSize: permite establecer el tamaño de la sombra (en px).
  • shadowAnchor: indica las coordenadas de la punta de la sombra. La coordenada tomada como punta es la esquina superior izquierda, si no se especifica se toma la misma que la propiedad iconAnchor.
  • popAnchor: especifica las coordenadas de la ventana emergente que se abre. De forma predeterminada aparece en la “punta” del icono. Para situarla en el medio de la parte superior del icono debemos dar un valor [0, – la altura del icono]. Ejemplo [0, -60].

Personalización de los iconos de los marcadores de Leaflet

La personalización de los marcadores o iconos se hace en dos pasos principales.

Características del icono personalizado (L.icon)

Generamos el estilo y personalización de los iconos que queremos, por ejemplo creando un objeto (Icono), que será de clase L.icon. Se escribe entre el <script></script> del <body></body>. Además, tenemos que indicar la ruta tanto del icono como de su sombra, si es que la quisiéramos.

var Icono = L.icon({
iconUrl: "Datos/icon.png",
iconSize: [30, 40],
iconAnchor: [15, 40],
shadowUrl: "Datos/marker-shadow.png",
shadowSize: [35, 50],
shadowAnchor: [0, 55],
popupAnchor: [0, -40]
});

Añadimos el L.icon a L.marker

Como hemos mencionado, L.icon contiene la información de cómo van a ser los nuevos marcadores. Pero ahora toca indicar a los marcadores creados con L.marker que utilice el estilo creado en L.icon. Y lo hacemos utilizando la opción icon de L.marker, tal y como vemos a continuación:

var Augusta_Emerita = L.marker([38.91667, -6.33333], {
title: "Augusta Emerita",
draggable:true,
opacity: 0.75,
icon: Icono
}).bindPopup("<i>Augusta Emerita</i>")
.addTo(map);
var Corduba = L.marker([37.8847, -4.77639], {
title: "Corduba",
draggable:false,
opacity: 1,
icon: Icono
}).bindPopup("<b>Corduba</b>")
.addTo(map);
var Tarraco = L.marker([41.114722, 1.259306], {
title: "Tarraco",
draggable:false,
opacity: 0.5,
icon: Icono
}).bindPopup("<h2>Tarraco</h2>")
.addTo(map);

El código HTML completo que origina el mapa anterior es el siguiente:

<!DOCTYPE html> 
<html>
   <head>
      <meta charset="UTF-8" >
      <link rel="stylesheet" 
		  href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" 
		  integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" 
		  crossorigin=""/>
      <script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js" 
		  integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw==" 
		  crossorigin="">
	  </script> 
      <style> #map { width: 800px; height: 600px; } </style>
   </head>
   <body>
	  <h2>Añadir marcadores a un mapa de Leaflet: L.marker y L.icon</h2>
      <div id="map"></div>
      <script> var map = L.map('map',{ 
		  center: [40.418889, -3.691944], 
		  zoom: 6, 
		  maxBounds: [[39.53,-13.09],[40,6.24]], 
		  minZoom: 5, 
		  maxZoom: 7 }); 
		  
		  L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' }).addTo(map); 
	   </script> 
  <script>    
    var Icono = L.icon({
		iconUrl: "https://vivaelsoftwarelibre.com/wp-content/uploads/2020/05/icono.png",
		iconSize: [30, 40],
		iconAnchor: [15, 40],
		shadowUrl: "https://vivaelsoftwarelibre.com/wp-content/uploads/2020/05/icono_sombra.png",
		shadowSize: [35, 50],
		shadowAnchor: [0, 55],
		popupAnchor: [0, -40]});
        
    var Augusta_Emerita = L.marker([38.91667, -6.33333], {
        title: "Augusta Emerita", 
        draggable:true, 
        opacity: 0.75,
        icon: Icono
            }).bindPopup("<i>Augusta Emerita</i>")
            .addTo(map);
        
    var Corduba = L.marker([37.8847, -4.77639], {
        title: "Corduba", 
        draggable:false, 
        opacity: 1,
        icon: Icono
            }).bindPopup("<b>Corduba</b>")
            .addTo(map);
        
    var Tarraco = L.marker([41.114722, 1.259306], {
        title: "Tarraco", 
        draggable:false, 
        opacity: 0.5,
        icon: Icono
            }).bindPopup("<h2>Tarraco</h2>")
            .addTo(map);
    </script>
   </body>
</html>

1 comentario en «Añadir marcadores a un mapa de Leaflet: L.marker y L.icon»

  1. Hola, gracias por tu artículo. Estoy trabajando en un proyecto y necesito incorporar la ubicación que elija el usuario en un mapa al hacer clic. ¿Puedes decirme cómo puedo conseguir que un usuario cree el marcador haciendo clic en el mapa y disponer de las coordenadas para guardarlas? Muchas gracias.

    Responder

Deja un comentario