Práctica 3 – visores web con Leaflet
En esta práctica se crearán visores con Leaflet para datos sencillos generados
manualmente y datos geojson ya proporcionados
La puntuación de la práctica es de 0,5 puntos.
Debe realizarse de forma individual y entregarse en el plazo especificado en el
campus online, a través del propio campus online.
Trabajo a realizar
Debe crearse un visor web que contenga un mapa con las capas y
comportamientos especificados a continuación:
• Dos capas base (capas de fondo) a elegir. Se recomienda que una de ellas,
la que se muestre por defecto, sea la capa estándar de OpenStreetMaps.
• Una capa, denominada “Municipio”, que incluya únicamente un marcador
ubicado en un municipio cualquiera (a elección de cada estudiante). Al
pulsar en el marcador se desplegará un popup. El contenido del popup
incluirá, al menos, el nombre del municipio (destacado), un breve texto con
información del municipio y una fotografía relevante del municipio. Esta
información puede obtenerse de cualquier fuente pública.
• Una capa, denominada “Museos”, en la que se incorporarán los museos
disponibles en el archivo [Link]. Deberá incorporarse el
siguiente comportamiento específico:
• Solo deben incorporarse museos que tengan un valor en la propiedad
“fee”. Pueden filtrarse aquellos que no tengan la propiedad en el
propio visor, para que no se añadan a la capa. Si esto genera
problemas, esto puede realizarse eliminando manualmente los
museos del archivo geojson.
• Al pulsar en cada museo se abrirá un popup que incluya al menos el
nombre del museo (propiedad name) y la URL asociada (propiedad
website), si existe.
• Debe existir una forma de distinguir entre los museos que son
gratuitos y los que no. Esto puede distinguirse a partir de las
propiedades de cada museo: fee=yes significa que es de pago;
fee=no significa que es gratuito.
• Mecanismo más sencillo: incorporar la indicación de si el
museo es gratuito a un popup asociado a cada museo, de
forma que pueda saberse al pulsar en el.
• Mecanismo más avanzado: utilizar dos iconos diferentes (o
tres, si se quiere considerar por separado los museos que no
tienen valor en “fee”), y cambiar el icono utilizado en el
marcador dependiendo del valor del atributo “fee”.
• El mapa deberá estar centrado inicialmente y con un nivel de zoom
adecuado, de tal forma que se pueda ver el conjunto de museos y el
municipio escogido.
• El mapa debe permitir seleccionar si las capas “Municipio” y “Museo” son
visibles o no de forma independiente. Para ello, estas capas deben cargarse
en el control de capas como overlays.
Tareas adicionales (opcionales, no necesarias para alcanzar la puntuación total):
• Añadir un botón de geolocalización que al pulsarlo obtenga la ubicación del
usuario y centre el mapa en ese punto.
• Mejorar los popups:
o Añadir otras propiedades relevantes al popup de cada museo.
Formatearlo de forma que se vea correctamente
independientemente de cuantas propiedades existan.
o Modificar el archivo de museos para incorporar imágenes de fondo a
(al menos uno de) los museos. Incorporar la imagen a los popups de
cada museo
Entrega y evaluación
Debe entregarse un archivo zip que contenga
- Una memoria en formato PDF con una breve explicación de los pasos
realizados y los problemas encontrados si fuese el caso.
- Los archivos que comprendan el visor:
o Archivo .html principal
o Archivo .js con los datos de museos, una vez renombrado/editado el
fichero proporcionado.
o Cualquier otro archivo necesario: imágenes del municipio o iconos
descargados para los museos; archivos de estilos .css; etc.
