Mapa creado con Leaflet con tres iconos diferentes personalizados
- Informática

Introducción a Leaflet: marcadores personalizados

En esta entrada continuaremos trabajando sobre el mapa creado en la primera entrada de este tutorial de introducción a Leaflet. En esta ocasión, crearemos varios marcadores y los personalizaremos utilizando un color diferente para cada uno de ellos.

El documento HTML

Utilizaremos el mismo documento HTML creado en la anterior entrada, con las referencias a la hoja de estilos de Leaflet, a nuestra hoja de estilos (mapa.css) en la que definiremos en tamaño del <div> en el que insertaremos el mapa, así como a la biblioteca leaflet.js y a nuestro fichero JavaScript en el que crearemos el mapa y los marcadores (mapa.js)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Mapa con un marcador</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.3/leaflet.css">
    <link rel="stylesheet" href="css/mapa.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.3/leaflet.js"></script>
  </head>
  <body>
    <div id="mapa"></div>
    <script src="js/mapa.js"></script>
  </body>
</html>

Inicializando el mapa

Como en el caso anterior, reaprovecharemos el código de la primera entrada, con un único pequeño cambio en el nivel de zoom inicial (17) que aumentaremos un poco ya que los marcadores que queremos insertar están bastante cerca unos de los otros.

var miMapa = L.map('mapa').setView([41.3602185,2.0954249], 17);
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
    attribution: 'Rubén Alcaraz. Map data &copy; <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>',
    maxZoom: 20,
    id: 'mapbox.comic',
    accessToken: 'pk.eyJ1IjoicmFsY2FyYXoiLCJhIjoiY2prNmRxcmh1MXNqODNya2NocWY5azEweCJ9.4Qf2Wgh-d1e_ujcRkvq0MA'
}).addTo(miMapa);
 
var estiloPopup = {'maxWidth': '300'}

Añadiendo los marcadores e iconos

Los iconos en Leaflet se definen mediante el objeto L.icon. Si no queremos utilizar el icono azul que Leaflet muestra por defecto, podemos utilizar las propiedades de L.icon para personalizarlo.

Como queremos utilizar tres iconos diferentes, vamos a crear una clase personalizada (iconoBase) que herede las propiedades del objeto L.icon. De esta manera, evitaremos repetir propiedades idénticas en los tres iconos diferentes que queremos utilizar.

Con la propiedad icon Size definimos el tamaño de los iconos, con iconAnchor el punto del icono que se corresponde con la localización del marcador, y con popupAnchor el punto desde el cual el popup se abrirá en relación con el iconAnchor.

var iconoBase = L.Icon.extend({
    options: {
        iconSize:     [38, 95],
        iconAnchor:   [22, 94],
        popupAnchor:  [-3, -76]
    }
});

Ahora, sólo queda definir las propiedades específicas de cada icono, o lo que es lo mismo, la imagen de cada icono, mediante el atributo iconURL. Como se puede observar en el siguiente fragmento de código, lo que hacemos es reutilizar la clase iconoBase creada anteriormente para no tener que repetir tres veces los valores iconSize, iconAnchor y popupAnchor.

var iconoVerde = new iconoBase({iconUrl: 'verde.png'}),
		iconoRojo = new iconoBase({iconUrl: 'rojo.png'}),
		iconoAzul = new iconoBase({iconUrl: 'azul.png'});

Finalmente, creamos los tres marcadores, cada uno de ellos con su propia localización, icono y popup.

L.marker([41.361027,2.097278], {icon: iconoVerde}).bindPopup("<h1>Casa Espanya</h2><p>La Casa Espanya, o Casa Llunell, és un casal gòtic de l'Hospitalet de Llobregat (Barcelonès), declarat bé cultural d'interès nacional.</p>",estiloPopup).addTo(miMapa);
	L.marker([41.3602185,2.0954249], {icon: iconoRojo}).bindPopup("<h1>La Talaia</h1><p>Torre de vigilància construïda en una època on sovintejaven els atacs corsaris a la costa catalana. Formava part de l'antic mas Modolell de la Torre, situat a la sortida del poble, cap a Cornellà. Va ser construïda el 1587 i traslladada al seu actual emplaçament, el carrer del Xipreret, el 1972, quan es va enderrocar la masia. És una torre de planta quadrada, de cinc pisos, el més alt dels quals està obert als quatre cantons mitjançant tres arcades adovellades de punt rodó. Sembla que les arcades superiors no són les originals, que eren gòtiques i que, segons fonts no contrastades, havien desaparegut temps abans.</p>.",estiloPopup).addTo(miMapa);
	L.marker([41.3602,2.09664], {icon: iconoAzul}).bindPopup("<h1>Can Sumarro</h1><p>Can Sumarro és una masia del segle XVI situada al centre del nucli urbà de l'Hospitalet de Llobregat, catalogada com a Bé Cultural d'Interès Nacional[1] des de 1975, es troba molt a prop d'altres edificis històrics com Can Llunell actual seu del Museu d'Història de la ciutat i el Casal de l'Harmonia seu de l'Ateneu de Cultura Popular.</p>",estiloPopup).addTo(miMapa);

Todo junto:

var miMapa = L.map('mapa').setView([41.3602185,2.0954249], 17);
 
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
    attribution: 'Rubén Alcaraz. Map data &copy; <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>',
    maxZoom: 20,
    id: 'mapbox.comic',
    accessToken: 'pk.eyJ1IjoicmFsY2FyYXoiLCJhIjoiY2prNmRxcmh1MXNqODNya2NocWY5azEweCJ9.4Qf2Wgh-d1e_ujcRkvq0MA'
}).addTo(miMapa);
 
var estiloPopup = {'maxWidth': '300'}
 
	var iconoBase = L.Icon.extend({
		options: {
			iconSize:     [24, 39],
			iconAnchor:   [16, 87],
			popupAnchor:  [-3, -76]
		}
	});
 
	var iconoVerde = new iconoBase({iconUrl: 'verde.png'}),
		iconoRojo = new iconoBase({iconUrl: 'rojo.png'}),
		iconoAzul = new iconoBase({iconUrl: 'azul.png'});
 
	L.marker([41.361027,2.097278], {icon: iconoVerde}).bindPopup("<h1>Casa Espanya</h2><p>La Casa Espanya, o Casa Llunell, és un casal gòtic de l'Hospitalet de Llobregat (Barcelonès), declarat bé cultural d'interès nacional.</p>",estiloPopup).addTo(miMapa);
	L.marker([41.3602185,2.0954249], {icon: iconoRojo}).bindPopup("<h1>La Talaia</h1><p>Torre de vigilància construïda en una època on sovintejaven els atacs corsaris a la costa catalana. Formava part de l'antic mas Modolell de la Torre, situat a la sortida del poble, cap a Cornellà. Va ser construïda el 1587 i traslladada al seu actual emplaçament, el carrer del Xipreret, el 1972, quan es va enderrocar la masia. És una torre de planta quadrada, de cinc pisos, el més alt dels quals està obert als quatre cantons mitjançant tres arcades adovellades de punt rodó. Sembla que les arcades superiors no són les originals, que eren gòtiques i que, segons fonts no contrastades, havien desaparegut temps abans.</p>.",estiloPopup).addTo(miMapa);
	L.marker([41.3602,2.09664], {icon: iconoAzul}).bindPopup("<h1>Can Sumarro</h1><p>Can Sumarro és una masia del segle XVI situada al centre del nucli urbà de l'Hospitalet de Llobregat, catalogada com a Bé Cultural d'Interès Nacional[1] des de 1975, es troba molt a prop d'altres edificis històrics com Can Llunell actual seu del Museu d'Història de la ciutat i el Casal de l'Harmonia seu de l'Ateneu de Cultura Popular.</p>",estiloPopup).addTo(miMapa);

El resultado final es este:

Mapa creado con Leaflet con tres iconos diferentes personalizados

Para saber más:

Icon“. En: Leaflet.Docs.

Sobre mí Rubén Alcaraz

Bibliotecario-documentalista e informático en continua iteración que habla de web y tecnología. There's no place like 127.0.0.1
Lee todas las entradas de Rubén Alcaraz

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.