Cómo personalizar marcadores con Leaflet Awesome Markers


En este tutorial veremos cómo personalizar marcadores en Leaflet con el plugin Leaflet.awesome-markers.

Este plugin te permite utilizar los diferentes íconos de Font Awesome para personalizar marcadores puntuales en tu mapa. Es una buena herramienta para hacer que tus marcadores tengan una buena apariencia en tu mapa.

Puedes acceder al repositorio en github.

Recuerda que para utilizar los íconos de Font Awesome deberás cargar el archivo de estilos en tu proyecto:

					
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
					
				

Después cargas los archivos .css y .js de awesome-markers en tu proyecto.

					
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.js"></script>
					
				

En tu código solamente tienes que crear un objeto AwesomeMarkers.icon. Este objeto admite las siguientes propiedades: icon, prefix, markerColor, iconColor, spin, extraClasses.

También puedes cambiar el tamaño y la posición de los marcadores con css:

					
.awesome-marker i {
	font-size: 18px;
	margin-top: 8px;
}
					
				

Aquí tienes un ejemplo sencillo de cómo queda:

					
var map = L.map('map').setView([-31.6333294, -60.6900008], 12);
var marcadorEscuelas = L.AwesomeMarkers.icon({
	icon: 'school',
	prefix:'fa',
	markerColor: 'red',
	iconColor: 'white'
});
L.marker([-31.6333294, -60.6900008], {icon:marcadorEscuelas}).addTo(map);
					
				


Sobre el Autor


Pedro Calás Blasco

Cartógrafo. Valenciano por el Mundo. He vivido en Mexico, Brasil y Argentina. Entusiasta de los mapas y las tecnologías Web Mapping. Fundador y coordinador de Mapearte. impulsamos y desarrollamos proyectos que contribuyan al desarrollo social a través de las tecnologías.


¿Eres desarrollador? Únete a la red