Curso sobre creación y desarrollo de mapas – Parte 11: minZoom, maxZoom y maxBounds en el mapa

En esta onceava parte vamos a seguir mostrar algunas propiedades que nos ofrece Leaflet como son el minZoom, maxZoom y maxBounds para tener un mapa mucho más controlado.

No siempre necesitas agregar una de las propiedades que menciono arriba. Es siempre a tus necesidades.

En la primera parte realizamos un mapa simple, ahora copiamos ese código y nombramos la carpeta por ejemplo_propiedades_mapa

Ejemplo Propiedades Mapas
Ejemplo Propiedades Mapas

Abrimos nuestro editor (en mi caso Atom) y modificamos algunas lineas.

Modificaciones en el index.html
Modificaciones en el index.html

Si se fijan modificamos el título y lo que está en el body. Ahora entramos a nuestro navegador favorito y tecleamos en la barra de direcciones: http://localhost/curso_mapas/ejemplo_marcadores/

Mapa incial
Mapa incial

Tenemos el mapa inicial!!!

Volvemos a entrar al editor Atom y nos dirigimos al archivo MapaOSM.js. Agregamos las siquientes propiedades:

  • minZoom: es la cantidad mínima del zoom que se va a aplicar al mapa.
  • maxZoom: es la cantidad máxima del zoom que se va a aplicar al mapa.
  • maxBounds: es la cantidad máxima del límite del mapa.
Agregar propiedades y se cambia el zoom por defecto
Agregar propiedades y se cambia el zoom por defecto

Pueden observar que se cambio el zoom por defecto.

Ahora refrescamos el navegador:

Probar las propiedades del mapa
Probar las propiedades del mapa

Hagan zoom in, zoom out y muevan el mapa verán que esta limitado!!! Utilicen la documentación por cualquier cosa

Si tienen dudas o comentarios, háganlo.

Curso de mapas
Demo: Ejemplo de propiedades del mapa
Código fuente: ejemplo_propiedades_mapa/

(Visited 222 times, 1 visits today)

Comments

comments


Post Relacionados

Be the first to comment

Leave a Reply

Tu dirección de correo no será publicada.


*