Cómo fraccionar el nivel de zoom en Leaflet

Leaflet es una librería JavaScript ampliamente utilizada para publicar mapas en la web. Hemos repetido en muchas ocasiones que una de las principales ventajas de su empleo es la facilidad de aprendizaje.

Es fácil de aprender porque su arquitectura es sencilla y porque dispone de información y documentación completa y accesible. Hoy vamos a utilizar uno de los tutoriales de la página de Leaflet para abordar una de las novedades de la versión 1.0.0. Desde esa versión, Leaflet dispone de la opción de fraccionar el nivel de zoom.

zoom en Leaflet

 

Hablemos del zoom

Prácticamente todos los mapas en la web disponen de un control de zoom que nos permite alejar o acercar la vista sobre un elemento del mapa. Pero, ¿qué está sucediendo cuando actuamos sobre el control de zoom?

Cuando representamos el mundo en el nivel de zoom cero, su tamaño es de 256 píxeles de ancho y alto. Es decir utilizamos una representación en forma de cuadrado con 256 píxeles de lado. Algo como lo siguiente:

Cuando entramos en el nivel de zoom uno, duplicamos su ancho y alto, y puede representarse mediante cuatro imágenes de 256 píxeles por 256 píxeles.

En cada nivel de zoom, cada tesela se divide en cuatro, y su tamaño (longitud del borde, dado por la opción tileSize) se duplica, cuadruplicando el área. Así hasta el nivel 18 que es el que suelen ofrecer la mayor parte de los servidores de tiles.

¿Qué sucede con la escala?

En un mapa estamos representado la superficie esférica de la tierra en una superficie plana. Para realizar esta conversión hay varios modelos. Uno de ellos consiste en proyectar la superficie de la tierra sobre un cilindro, como la famosa proyección de Mercator ,que es una proyección cilíndrica y conforme, ya que conserva los ángulos y las formas aunque las distancias y las superficies se deforman mucho, especialmente en las latitudes altas.

En la práctica esto supone que, al desplazar el mapa en dirección norte-sur la escala cambia, para mantener el mismo nivel de zoom.

Al agregar un control de escala, si desplazamos el centro del  mapa del ecuador a 60 ° de latitud norte, podremos ver cómo se duplica el factor de escala. El siguiente ejemplo usa tiempos de espera de javascript para hacer esto automáticamente:

Ejemplo interactivo:

L.Control.Scale muestra la escala que se aplica al punto central del mapa. En niveles de zoom altos, la escala cambia muy poco y no se nota.

Control de zoom en Leaflet

Un mapa de Leaflet tiene varias formas de controlar el nivel de zoom que se muestra, pero el más obvio es setZoom (). Por ejemplo, map.setZoom (0); establecerá el nivel de zoom del mapa en 0.

Este ejemplo utiliza nuevamente tiempos de espera para alternar automáticamente entre los niveles de zoom 0 y 1:

Ejemplo interactivo:

En un mapa de leaflet podemos actuar sobre el zoom de varias formas:

  • Mediante el control de zoom.
  • Por el teclado: con las teclas + / –
  • Por el ratón: con la rueda.
  • Mediante la combinación de teclado y ratón: pulsando en mayúsculas y pinchando y arrastrando para seleccionar un área con el ratón.

Fraccionar el nivel de zoom

Una característica introducida en la versión 1.0.0 de Leaflet fue el concepto de zoom fraccional. Antes el nivel de zoom del mapa podía ser solo un número entero (0, 1, 2, etc.); pero desde entonces se puede usar números fraccionarios como 1.5 o 1.25.

El zoom fraccional está deshabilitado por defecto. Para habilitarlo, utilizamos la opción zoomSnap del mapa.

  • La opción de zoomSnap tiene un valor predeterminado de 1 (lo que significa que el nivel de zoom del mapa puede ser 0, 1, 2, etc.).
  • Si establecemos el valor de zoomSnap en 0.5, los niveles de zoom válidos del mapa serán 0, 0.5, 1, 1.5, 2, y así sucesivamente.
  • Si establecemos el valor de zoomSnap 0.1, los niveles de zoom válidos del mapa serán 0, 0.1, 0.2, 0.3, 0.4, y así sucesivamente.

El siguiente ejemplo usa un valor de zoomSnap de 0.25.

Ejemplo:

Como se puede ver en el mapa precedente, Leaflet solo cargará las teselas para los niveles de zoom 0 o 1, y las escalará según sea necesario. En ese caso Leaflet ajustará el nivel de zoom al más cercano válido. Por ejemplo, si tenemos zoomSnap: 0.25 e intentamos hacer map.setZoom (0.8), el zoom volverá a 0.75.

La opción zoomDelta

También podemos establecer el valor de zoomSnap en cero, lo que significa que Leaflet no ajustará el nivel de zoom y en consecuencia podremos tener tener cualquier nivel de zoom. Esto cobra sentido si lo asociamos a la opción zoomDelta. Esto controla la cantidad de niveles de acercamiento para acercar / alejar cuando se usan los botones del control de zoom o las teclas +/- del teclado. Vamos a escribir un ejemplo en que el valor de zoomSnap sea cero y el de zommDelta: 0.25

En ese caso al actuar sobre el control de zoom o mediante el teclado el nivel de zoom aumenta/disminuye en intervalos de 0,25, sin embargo si actuamos con la rueda del ratón o con mayúsculas+ratón veremos que cualquier nivel de zoom es posible. Se entenderá mejor practicando sobre el mapa que insertamos a continuación.

Ejemplo:

Si quieres aprender a crear visores web profesionales como éste, inscríbete ya en nuestro curso online visores webmapping con Leaflet.

Let’s connect!

Date de alta en nuestra newsletter
y recibe este ebook gratuito

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