Utilizando los iconos de Bootstrap en Leaflet

por

bootstrap-en-leaflet

Bootstrap es un conjunto de herramientas de código abierto para el diseño de sitios y aplicaciones web.

Contiene plantillas de diseño con tipografía, formularios, botones, cuadros, menús de navegación y otros elementos de diseño basado en HTML y CSS, así como, extensiones de JavaScript adicionales.

Es el proyecto más popular en GitHub y hace que el desarrollo de las aplicaciones web sea más rápido y fácil. Se creó para personas con todos los niveles de destrezas, dispositivos de todo tipo y proyectos de todos los tamaños.

En esta ocasión lo que nos interesa de Bootstrap es su colección de iconos, que utilizaremos para personalizar los marcadores de Leaflet:

glyphicons

Para poder insertar los iconos que nos proporciona Bootstrap en el mapa nos serviremos del plugin Leaflet.awesome-markers. Veamos cómo hacerlo.

Incluyendo Bootstrap en Leaflet

En primer lugar debemos insertar en nuestro código las referencias a  Bootstrap. Esto lo podemos hacer de dos formas :

  1. Descargando el código CSS y JavaScript, para lo cual deberemos acudir a la página de Bootstrap http://getbootstrap.com/
  1. Utilizar la CDN de Bootstrap. La empresa NetDNA aloja de forma gratuita en su CDN (Content Delivery Network) una copia de los archivos CSS y JavaScript de Bootstrap. Este será el método que utilizaremos.
<!--  Bootstrap  -->
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" rel="stylesheet">
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

Incluyendo el plugin Leaflet.awesome-markers en Leaflet

Utilizar Leaflet.awesome-markers es sencillo. Basta con descargar los archivos e incluir la referencia a leaflet.awesome-markers.css y leaflet.awesome-markers.js en una página HTML de Leaflet:

<!-- Plugin Leaflet.awesome-markers  -->
  <link rel="stylesheet" href="../dist/leaflet.awesome-markers.css">
  <script src="../dist/leaflet.awesome-markers.js"></script>

Una vez creadas las referencias a  Bootstrap y a Leaflet.awesome-marker, procederemos a insertar los marcadores en nuestro mapa. Para ello utilizaremos la clase L.marker, con la que definiremos las coordenadas de los puntos y a continuación daremos las opciones de los iconos.

    L.marker([40.96618, -5.66237], {icon: L.AwesomeMarkers.icon({
      icon: 'refresh', 
      prefix: 'glyphicon', 
      markerColor: 'red', 
      spin:true}) 
     }).addTo(map);

    L.marker([40.96187, -5.66814], {icon: L.AwesomeMarkers.icon({
      icon: 'bell', 
      prefix: 'glyphicon', 
      markerColor: 'red'}) 
    }).addTo(map);

    L.marker([40.96588, -5.66814], {icon: L.AwesomeMarkers.icon({
      icon: 'tree-deciduous', 
      prefix: 'glyphicon', 
      markerColor: 'purple'}) 
    }).addTo(map);

    L.marker([40.96487, -5.66407], {icon: L.AwesomeMarkers.icon({
      icon: 'leaf', 
      prefix: 'glyphicon', 
      markerColor: 'green',
      spin:true}) 
    }).addTo(map);

    L.marker([40.96785, -5.66926], {icon: L.AwesomeMarkers.icon({
      icon: 'header', 
      prefix: 'glyphicon', 
      markerColor: 'blue', 
      iconColor: 'black'}) 
    }).addTo(map);

    L.marker([40.96387, -5.66616], {icon: L.AwesomeMarkers.icon({
      icon: 'plus-sign', 
      prefix: 'glyphicon', 
      markerColor: 'orange'}) 
    }).addTo(map);

Las opciones que hemos utilizado son:

  • icon: Nombre del icono (ej: ‘bell’, ‘leaf’,…) en el catálogo de Bootstrap. El valor por defecto es ‘home’.
  • prefix: Cuando utilizamos un icono de  Bootstrap es ‘glyphicon’. Si utilizásemos un icono de font-awesome sería ‘fa’.
  • markerColor: Color del marcador. Los valores posibles son : ‘red’, ‘darkred’, ‘orange’, ‘green’, ‘darkgreen’, ‘blue’, ‘purple’, ‘darkpuple’, ‘cadetblue’. Valor por defecto: ‘blue’.
  • iconColor: Color del icono. Valores posibles: ‘white’, ‘black’ o las de los estilos css (hex, rgba etc). Valor por defecto:  ‘white’.
  • spin: Hace que el icono gire. El valor por defecto es false.

Clic en la imagen para ver en vivo.

 

Si quieres aprender a crear visores web con Leaflet, inscríbete ya a nuestro curso online de visores webmapping con Leaflet.

Let’s connect!

Date de alta en nuestra newsletter y te enviaremos GRATIS el ebook que te ayudará a impulsar tu perfil GIS:
Vitaminas MappingGIS

Tan solo una vez al mes recibirás las últimas novedades del sector GIS y de nuestros cursos

SUSCRÍBETE