En Tiempo para Desarrollando América Latina: Una Receta para Desarrollar Rápidamente Aplicaciones Geográficas
En los talleres de mapeo en preparación a Desarrollando América Latina de este fin de semana, pasamos una parte hablando de cómo utilizar Google Spreadsheets y MapBox.js. Es una arquitectura especialmente favorable en el contexto de una hackathon ya que permite rápidamente crear una aplicación para la colección y presentación de datos geográficos. Aquí les mostramos un ejemplo.
Este sitio es un prototipo que desarrollamos con la Sub Gerencia de Seguridad Ciudadana de la Municipalidad Provincial de Huamanga. Permite registrar incidentes delictivos en la ciudad de Ayacucho y mostrar automáticamente los datos de manera dinámica y en tiempo real.
Los datos son almacenados en Google Spreadsheet Data API y mediante MapBox.js los visualizamos en un mapa de MapBox Streets. A medida que se van ingresando los datos estos automáticamente son mostrados en el mapa y en los gráficos estadísticos.
Se han desarrollado dos sitios, uno donde registrar los datos de los incidentes delictivos y otro donde mostrar la información registrada al público. El sitio de registro de datos es un Google form con un diseño personalizado de uso interno para la Sub Gerencia de Seguridad Ciudadana. El sitio publico permite observar incidentes delictivos por fechas en que ocurrieron y por clasificación. También se puede descargar los datos incluso su información geográfica por ejemplo para hacer uso en programas de hojas de cálculo o Tilemill.
Sitio de Presentación al Público
Seguidamente se explica cada uno los paso realizados para la creación de este ejemplo. El código de los dos sitios se puede bajar de GitHub sin ningunas restricciones de uso:
Para el mapa del Sitio de Presentación al Público, se ha utilizado MapBox Streets, un mapa base mundial creado con datos de OpenStreetMap. La cuenta básica de MapBox es libre y te permitirá diseñar tu versión de MapBox Streets personalizada.
Peru en MapBox Streets, colores por defecto
Peru en MapBox Streets, colores personalizados y hill shades
Iniciamos creando un formulario en Google Doc, y seguidamente, ingresamos los atributos que se quiere recoger, una vez realizado esta acción, automáticamente se crea una hoja de cálculo vinculado al formulario, con los campos que se ingresaron en el formulario. Por consiguiente todos los datos registrados por el formulario serán almacenados en el hoja de cálculo.
Para permitir a nuestra aplicación de web a consumir datos directamente del Google Spreadsheet, necesitamos publicar los datos en JSONP, pulsamos en la opción "Archivos/Publicar en la Web" y luego “Iniciar Publicación” - puedes encontrar más información sobre este punto en la documentación de Google Docs.
El formulario que proporciona Google Docs no es tan atractivo y tiene algunas limitaciones. Hay formas rápidas de cambiar esto, optamos por crear otro formulario reutilizando el mismo código del formulario de Google y con Twitter Bootstrap que nos proporciona estilos agradables y limpios, para la web.
Formulario de Google Spreadsheet personalizado
Esto nos permitió también de mejorar la interfaz:
- Para el campo de “incidentes” se muestra una lista de los incidentes en forma predeterminada.
- En los campos “Fecha del incidente” y “Hora del incidente” utilizamos librerías de JQuery para el ingreso de fechas y hora.
- Los demás campos permiten ingreso de una “referencia de dirección” y la “descripción del incidente” donde validamos el ingreso de texto.
- Para el ingreso de los valores del campo "Latitud" y "Longitud" se ha utilizado Leaflet, para capturar automáticamente la coordenadas donde ocurrió un incidente delictivo.
Desde el Sitio de Presentación al Público, se realiza la petición de los datos de la hoja de cálculo, para mostrarlo en este, para esto utilizamos una extencion de mapbox.js, este nos permite hacer la llamada a los datos de la hoja de cálculo y convertirlos en un array de datos. Un vez que los datos se encuentran en el array pasamos a mapear todo los incidentes haciendo uso de mapbox.js, que nos permitirá mostrar en el mapa la información sobrepuesta a través de markers y la interacción en estos.
Para el gráfico de sectores se ha creado una hoja de cálculo adicional, que contiene toda la información resumida de los incidentes, que automáticamente se actualiza al ingresar un incidente delictivo. Estos datos son recuperados a través de la extensión de mapbox.js, la información es recuperada en arrays y seguidamente se ingresa como parámetro a los gráficos estadísticos que brinda Google Chart.
Espero que este ejemplo te dará unas ideas para la aplicación que crearás este fin de semana. Para encontrar más ejemplos alrededor de utilizar mapas en aplicaciones ligeras de HTML y Javascript, echa una mirada a MapBox Site Templates. Si quieres aprender más sobre crear tus propios mapas de datos de OpenStreetMap, lea Create a custom map of your city in 30 minutes with TileMill and OpenStreetMap.
Desarrollando América Latina tiene lugar este fin de semana en Argentina, Uruguay, Brasil, Bolivia, Perú, México, Costa Rica y Chile. La inscripción todavía está abierta!. Si atiendes la hackathon en Lima, nos vemos en persona. Si tienes algunas preguntas, el equipo MapBox estaremos allí en Escuelab y en linea en #mapbox en irc.freenode.net. De todas formas te deseamos mucha suerte!*