We want to make a fun mobile app that people could use while they are biking so we can collect data (bike path locations, road conditions, road aesthetics) in background. And it will allow the cyclists to collaboratively collect data about where they can travel by bicycle.

System Component

Samsung Galaxy Nexus with Android 4.0 and inner sensors: gyroscope, GPS module, camera


  • Sensors

  • Map View

1. Embed Webpage into Android Native App
We chose a web map client as UI other than the Google Maps API because we have more experience on web map development and it is easier to build a prototype of UI by HTML elements and CSS. We embed the webpage as part of the app following the instruction. Then the webpage can be manipulated as a Java object by other part of the program. And we also follow this instruction to build a bridge between the Java code and JavaScript code so that the two parts can call the functions in the opposite part well.
2. Web Map Client
The web map client we chose is Leaflet.js. It is an open source JavaScript library fully supports HTML5.
The base layer we choose is the tile map service by CouldMade . And the new path is stored and displayed as a vector polyline layer.
3. Fog Style
The fog style as the app Fog of World has is a challenge in this project. There is no native API in leaflet to render as a cover over the base layer which should also be partially erased by the existing path.
Initially we tried the server side technique which provides the fog layer as WMS. However this plan did not work with the limitation of the GIS data server, GeoServer. Therefore we choose the client-side rendering approach.
The key is to utilize the TileLayer.Canvas in Leaflet to render each tile independently controlling the alpha channel of the while color to simulate cloud. And it also requires mapping geographic coordinates of each node on path to the pixels in corresponding tiles to remove the cover on the path. The key JS functions can be found in PolylineTest.html in GitHub.
4. Path Data
So far the previous path data are stored in local and accessed by the Java IO objects. And data are stored as GeoJSON format, which is a prevalent JSON-style web standard for exchanging geographic information over the Internet. And the GeoJSON format can be parsed and displayed by the geojson layer in Leaflet.
5. Visualization
We also implement a color ramp for rendering different properties. So far we can visualize different speed. As the location is reported with fixed interval, the visualization of speed turns to visualize the distance between each pair of nodes in the path.

Future Work

1. Add an integrate UI.
2. Utilize data collected from gyroscope and accelerator for analyzing road conditions.

Video: TO ADD
Final Presentation