2 votos

Diseño óptimo de la página con Leaflet

Esta es una pregunta un tanto amplia. Básicamente estoy buscando la mejor o más fácil manera de controlar el diseño de una página con un mapa de Leaflet. Digamos que quiero que el mapa esté ubicado en el lado derecho de la pantalla, que sea amigable con los dispositivos móviles y que tenga capacidad de respuesta. He estado jugando con Leaflet durante un tiempo y no he encontrado una manera conveniente de controlar la ubicación y el tamaño de los mapas en la página. ¿Es mejor usar el CSS tradicional o tal vez algo como Bootstrap? ¿Podría haber un plugin que he pasado por alto?

Como he dicho, es una pregunta amplia. No busco detalles. Sólo un sentido de la orientación, para no correr por agujeros de conejo innecesarios.

2voto

Daniel X Moore Puntos 6026

El framework Leaflet sólo puede utilizarse para controlar el mapa en sí y sus controles (como el zoom, la búsqueda, etc.), no el resto de la página web.

Por lo tanto, el mapa en sí tiene que estar dentro de un elemento div normal. Para cambiar el tamaño o la posición de este elemento div puedes usar CSS/HTML normal o cualquier framework de frontend (por ejemplo, bootstrap) que te guste.

1voto

user65318 Puntos 11

Hace un tiempo desarrollé un framework responsivo general para mis mapas web. Está basado en Bootstrap y jQuery. Puedes encontrarlo aquí: https://github.com/nobohan/responsive-webmap

Las características de este marco son:

  • el mapa ocupa el 100% del ancho de la página,
  • toda la página ocupa el 100% de la altura, sin barra de desplazamiento vertical,
  • hay un panel plegable a la izquierda,
  • hay una barra de navegación,
  • es "sensible", lo que significa que algunos elementos cambian entre los dispositivos de pequeña y gran escala.

Puede verlo en acción aquí .

Tenga en cuenta que fue desarrollado para OpenLayers 3, pero puede pasar fácilmente a Leaflet. De hecho tengo un proyecto basado en LeafletJS construido sobre el mismo framework aquí .

Seguramente se puede mejorar. Estaría encantado de recibir comentarios.

i-Ciencias.com

I-Ciencias es una comunidad de estudiantes y amantes de la ciencia en la que puedes resolver tus problemas y dudas.
Puedes consultar las preguntas de otros usuarios, hacer tus propias preguntas o resolver las de los demás.

Powered by:

X