| layout | category | published | title | subtitle | permalink | image | tags | |
|---|---|---|---|---|---|---|---|---|
blog |
blog |
true |
Mapas Dinámicos Rápidos con OpenStreetMap, MapBox.js y Google Spreadsheets |
In time for Desarrollando América Latina: an example of quickly building a geo application with MapBox Streets, MapBox.js and Google Spreadsheets |
/blog/aplicacion-mapas-rapido |
|
The Desarrollando América Latina hackathons are about to kick off this weekend. Here is a walk through of a simple site using OpenStreetMap based MapBox Streets, MapBox.js and Google Spreadsheets to quickly gather and present crime data in Ayacucho Peru. We are publishing this example having the attendees of this weekend's hackathon in mind. It illustrates an approach that was a topic in last weekend's series of webcasts and the workshop in Lima, Peru. The full post is below in Spanish.
En los talleres de mapeo en la preparación de Desarrollando América Latina de este fin de semana hablamos, entre otros temas, de cómo utilizar Google Spreadsheets y MapBox.js. Es una arquitectura especialmente favorable en el contexto de una hackathon ya que permite crear rápidamente 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 datos estos automáticamente son mostrados en el mapa y en los gráficos estadísticos.
Se han desarrollado dos sitios, uno donde registrar datos de los incidentes delictivos y otro donde se muestra la información registrada al público. El sitio de registro de datos es un formulario Google 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 pueden descargar los datos, incluyendo por ejemplo su información geográfica, para usarlos 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 ninguna restricción 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
Empezamos creando un formulario en Google Doc, y seguidamente, ingresamos los atributos que se quieren recoger. Una vez realizada esta acción, automáticamente se crea una hoja de cálculo vinculada al formulario, con los campos que se ingresaron en éste. 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. Para ello 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 varias formas rápidas de cambiar esto. Nosotros optamos por crear otro formulario reutilizando el mismo código del formulario de Google y con Twitter Bootstrap tenemos rápidamente un estilo agradable y limpio, 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 con opciones predeterminadas.
- 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 el mapa utilizamos una extensión de mapbox.js que 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 con éstos.
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 nuevo incidente delictivo. Estos datos son recuperados a través de la extensión de mapbox.js. Una vez la información es recuperada en arrays, se ingresa como parámetro a los gráficos estadísticos que brinda Google Chart.
Esperamos que este ejemplo te de ideas para las aplicaciones que se crearán este fin de semana. Para encontrar más ejemplos utilizando mapas en aplicaciones ligeras de HTML y Javascript, echa una mirada a MapBox Site Templates. Si quieres aprender más sobre cómo crear tus propios mapas de datos de OpenStreetMap, lee 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 estará allí en Escuelab y en linea en #mapbox en irc.freenode.net. De todas formas te deseamos mucha suerte!*