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:
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 :
- Descargando el código CSS y JavaScript, para lo cual deberemos acudir a la página de Bootstrap http://getbootstrap.com/
- 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.
Tutor del curso de visores webmapping con Leaflet. Ingeniero Agrónomo desarrollador de aplicaciones webmapping. Echa un vistazo a todos nuestros cursos de SIG online.