Añadir y modificar los controles en Leaflet

De forma predeterminada, Leaflet coloca los botones de zoom arriba a la izquierda, y la atribución abajo a la derecha. De hecho, ya lo hemos visto con la creación de un web mapping sencillo. La modificación de los mismos, más la introducción de una escala y de capas, se hacen con una extensión de la clase L.control. Estas extensiones de L.control nos permiten añadir y modificar los controles en Leaflet.

Es necesario conocer la estructura básica de una web HTML, así como ligeras nociones de JavaScript y CSS. Además, no está de más conocer un poco más en detalle Leaflet. Con todo esto comprendido, vamos a ponernos manos a la obra.

Pero antes de eso, es importante saber que existen multitud de plugins que permiten aumentar todo el potencial de Leaflet. Ahí queda eso.

Añadir y modificar los controles en Leaflet

Veamos cómo modificar cada uno de estos 4 elementos: el zoom, la atribución, la escala y las capas.

L.control.zoom

Esta extensión de L.control nos permite modificar el zoom.

  • L.control.zoom({opciones}): modifica el zoom. Entre las opciones para poner en su interior tenemos:
    • position: puede “topleft” o “topright” o “bottomleft” o “bottomright
    • zoomInText: permite cambiar el texto que aparece en el zoom in (por defecto es +)
    • zoomOutText: permite cambiar el texto que aparece en el zoom out (por defecto es -)
    • zoomInTitle: texto que se muestra al pasar el ratón sobre el botón de zoom in (por defecto es Zoom in)
    • zoomOutTitle: texto que se muestra al pasar el ratón sobre el botón de zoom out (por defecto es Zoom out)

Si añadimos la siguiente línea en nuestro código, nos aparece efectivamente el control de zoom arriba a la derecha. Sin embargo, no nos ha eliminado el que aparece por defecto.

L.control.zoom({position: "topright"}).addTo(map);

Para quitar el zoom predeterminado hay que editar la clase L.map. Tenemos que añadir una opción a esa clase, que es zoomControl, tal y como se ve a continuación:

var map = L.map("map", {center: [40.418889, -3.691944], zoom: 6, zoomControl: false});

Esta opción de añadir zoomControl: false es la que se emplea para ocultar el zoom predeterminado.

L.control.attribution

Vamos a poder controlar la atribución del mapa base de nuestro web mapping. Su zona predeterminada es en la esquina inferior derecha. Pero esto también lo podemos cambiar con L.control.attribution. Su sintaxis es:

  • L.control.attribution({opciones}): modifica la posición de la atribución.
    • position: equivalente al descrito en L.control.zoom.
    • prefix: es lógico (true/false). De serie es true y nos pone Leaflet como prefijo. Si queremos desactivarlo ponemos false.

Si añadimos esta línea en nuestro código, nos aparece efectivamente la atribución en la zona inferior a la izquierda, además de habernos quitado el prefijo de Leaflet.

L.control.attribution({position: "bottomleft", prefix: false}).addTo(map);

Para quitar quitar la atribución predeterminada hay que editar la clase L.map. Tenemos que añadir una opción a esa clase, que es attributionControl, tal y como se ve a continuación:

var map = L.map("map", {center: [40.418889, -3.691944], zoom: 6, zoomControl: false, attributionControl: false});

Esta opción es la que se emplea para ocultar la atribución predeterminada.

L.control.scale

Nos permite añadir una escala a nuestro mapa. La sintaxis y opciones son las siguientes:

  • L.control.scale({opciones}):
    • position: idem a los anteriores.
    • maxWidth: ancho de la escala en píxeles.
    • metric: valor lógico (true/false). En true se muestra la escala en m/km.
    • imperial: valor lógico (true/false). En true se muestra la escala en millas/pies.

Por ejemplo:

L.control.scale({position: “bottomleft”, maxWidth: 100, metric: true, imperial: false}).addTo(map);

L.control.layers

Es el control de capas, por lo que nos permite seleccionar la visión de diferentes capas, bases o temáticas (superpuestas). La sintaxis de L.control.layers es la siguiente:

  • L.control.layers({Objeto baselayers, Objeto overlays, opciones}):
    • Objeto baselayers: se sefiere a las capas base con el nombre que queramos dar a cada una. Podemos tener varias capas base y su selección está indicada por un botón circular. Sólo podemos tener seleccionada una al mismo tiempo. Su estructura es:
      • baselayers = {"Nombre de la capa": objeto_capa_temática}
    • Objeto overlays: se refiere a los objetos de la o las capas temáticas con su nombre. Podemos tener activas varias capas al mismo tiempo. Su activación está en botones cuadrados que son casillas de verificación. Su estructura es:
      • overlays = {"Nombre de la capa": objeto_capa_temática}
      • Si solo hemos creado un objeto, éste tendrá la función de baselayers independiente que sean capas temáticas.
    • Opciones:
      • position: equivalente a los anteriores.

Añadir capas base

Pasos para añadir capas base (objeto baselayers):

  • Cogemos el objeto creado anteriormente L.tileLayer y lo convertimos en un objeto con nombre osm (var osm). Antes no tenía nombre, y es importante. Además, para que no aparezca de serie como capa base de fondo, y para que quede por activar, eliminamos del final de la línea addTo(map):
var osm = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'});
  • Creamos el objeto capas_base (objeto baselayers), que va a a contener el texto que queremos mostrar en el control y el objeto que contiene la capa “capa base OSM: osm“.
var capas_base = {"capa base OSM": osm };
  • Añadimos la clase L.control.layers con el objeto capas_base y e método addTo para cargar el control del mapa.
L.control.layers(capas_base).addTo(map);

Añadir capas temáticas

Existen varios pasos para añadir capas temáticas (objeto overlays) con L.LayerGroup. Vamos a agrupar las 3 coordenadas de las provincias romanas para poder activarlas/desactivarlas:

  • Creamos un objeto llamado capitales con la clase L.LayerGroup:
var capitales = new L.LayerGroup();
  • Añadimos el objeto capitales con addTo a cada coordenada de las 3 provincias romanas:
var Augusta_Emerita = L.marker([38.91667, -6.33333], {
   title: "Augusta Emerita",
   draggable:true,
   opacity: 0.75
   }).bindPopup("<i>Augusta Emerita</i>")
   .addTo(map);
var Corduba = L.marker([37.8847, -4.77639], {
   title: "Corduba",
   draggable:false,
   opacity: 1
   }).bindPopup("<b>Corduba</b>")
   .addTo(map);
var Tarraco = L.marker([41.114722, 1.259306], {
   title: "Tarraco",
   draggable:false,
   opacity: 0.5
   }).bindPopup("<h2>Tarraco</h2>")
   .addTo(map);
  • Creamos ahora el objeto overlay:
var capas_tematicas = { "Capitales romanas de Hispania": capitales };
  • Y lo añadimos a L.control.layers:
L.control.layers(capas_base, capas_tematicas).addTo(map);

Añadir y modificar los controles en Leaflet: un ejemplo de cómo se implementan

A continuación se muestra el código final haciendo que la capa base aparezca añadiendo .addTo(map) en L.tileLayer:

<!DOCTYPE html>
<html>
<head>	
	<meta charset="UTF-8" >
 	<title>Hispania Romana</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css"   integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ=="   crossorigin=""/>
    <script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"   integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw==" crossorigin=""></script>
     <style>
	#map {
		width: 800px;
		height: 600px;
		}
</style>
</head>
<body>
    <div id="map"></div> 
    
    <script>    
     var map = L.map('map',{center: [40.418889, -3.691944], zoom: 6});          
     
    var osm = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'}).addTo(map);  
    
        var capitales = new L.LayerGroup();
        
    var Augusta_Emerita = L.marker([38.91667, -6.33333], {
        title: "Augusta Emerita", 
        draggable:true, 
        opacity: 0.75
            }).bindPopup("<i>Augusta Emerita</i>")
            .addTo(capitales);
        
    var Corduba = L.marker([37.8847, -4.77639], {
        title: "Corduba", 
        draggable:false, 
        opacity: 1
            }).bindPopup("<b>Corduba</b>")
            .addTo(capitales);
        
    var Tarraco = L.marker([41.114722, 1.259306], {
        title: "Tarraco", 
        draggable:false, 
        opacity: 0.5
            }).bindPopup("<h2>Tarraco</h2>")
            .addTo(capitales);
        
        var capas_base = {
            "capa base OSM": osm
        };
        var capas_tematicas = {
            "Capitales romanas de Hispania": capitales
        };
        
        L.control.layers(capas_base, capas_tematicas).addTo(map);
    </script>
    
</body>
</html>

Con el código anterior tenemos el siguiente mapa interactivo de Leaflet.

1 comentario en “Añadir y modificar los controles en Leaflet”

Deja un comentario