Terminado

Formulario con dos dropdown para filtrar información en un mapa

Publicado el 01 Febrero, 2022 en Programación y Tecnología

Sobre este proyecto

Abierto

Necesito en una a dos semanas, un formulario que tenga dos listas, dropdowns o menús y el usuario pueda seleccionar valores de ambos campos.
Estos campos deben filtrar una tabla de información que se visualiza en un mapa con puntos. Cada vez que el usuario selecciona los valores, el mapa debe actualizarse con los filtros seleccionados.
Importante que sea vea bien en un navegador de escritorio y móvil.

Contexto general del proyecto

El proyecto consisten en documento web con un mapa que visualiza objetos geo-referenciados. Pero estos deben ser filtrados con base en propiedades que el usuario debe seleccionar. La información proviene de una base de datos y se puede obtener en csv o json. Los campos que contiene, en resumen, son: Nombre del lugar, Latitud, Longitud, Propiedad 1, y Propiedad 2. Los dropdowns deberían filtrar en las siguientes combinaciones: 1) Estado default: se muestran todos los puntos 2) Si no se ha seleccionado propiedad 1, filtrar por propiedad 2 todos los registros. 3) Si se selecciona Propiedad 1, actualizar los valores de propiedad 2 y filtrar los registros. No soy programador web, pero de alguna forma hice una versión inicial en Nuxtjs+vue que se puede ver aquí: https://dltxlt-reporte.netlify.app/formulario-mapas/ (el dropdown está en un formulario, que según el valor seleccionado, carga mediante un iframe un mapa o el default. Justamente lo que no sé hacer es esta parte dinámica). Y aquí: https://dltxlt-reporte.netlify.app/mapa/ (este mapa solo muestra todos los objetos, sin filtrar) De preferencia, el mapa debe desplegarse en Google Maps para poder personalizar de manera sencilla el ícono del marcador, pero estaría abierto a usar OpenStreetMaps si la edición del ícono no es compleja o usar esta OSM es mejor opción. El documento web no debe tener otros elementos aparte de los dos dropdown lists y el mapa. Ya que se empotraría como iframe en un sitio web de Squarespace. Sería ideal que el código fuente sea limpio y ordenado para darle mantenimiento (ajuste de colores, tamaño y posiciones) de mi parte. De igual forma, busco que el código fuente se almacenara en un repositorio privado de Git para que una vez entregado, yo pudiera crear un pipeline en Netlify y emplear el documento web. Tengo un proyecto en Nuxtjs que se puede utilizar como base o referencia para partir. De igual manera no estoy cerrado al framework que se proponga, pero lo ideal para mí sería al Vuejs o React. La librería que usé fue esta: https://www.npmjs.com/package/nuxt-gmaps / https://codesandbox.io/s/6182d?file=/pages/index.vue:4988-4994 , pero si se usa otra o una implementación propia, no es problema.

Categoría Programación y Tecnología
Subcategoría Programación Web
¿Cuál es el alcance del proyecto? Cambio mediano
¿Es un proyecto o una posición? Un proyecto
Actualmente tengo Tengo las especificaciones
Disponibilidad requerida Según se necesite
Integraciones de API Otros (Otras APIs)
Roles necesarios Programador

Plazo de Entrega: 12 Febrero, 2022

Habilidades necesarias