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 -->
<code class="language-html" data-lang="html"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
<code class="language-css" data-lang="css">@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");
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 online de Análisis GeoEspacial con Python y de los cursos online de webmapping. Echa un vistazo a todos nuestros cursos de SIG online.