Introduction: Visualizing Information Around Bicycle Trip
In this tutorial, we will present a way to make a mobile application that calculates speed of a bicycle and visualizes on a map how fast it was traveling. This will allow us to better understand our own cycling activity. Also, we could collect different types of data such as road conditions through sensors embedded in a mobile phone and/or additional sensors equipped on a bicycle.
In this tutorial, we will use
• Samsung Galaxy Nexus (Android 4.0)
• Bicycle
• Cellet Bicycle Phone Holder
We will first introduce how to calculate traveling speed of a bicycle, one of the most basic information around cycling activity, from GPS information that is acquired from a mobile phone attached to a bicycle. We will then present a visualization that shows how fast a user was traveling between each point where GPS information was acquired.
Acquiring GPS information to get location and travel speed
With an Android device, we can acquire GPS location in a form of latitude and longitude through its LocationManager API built in the LocationManager class. For more information, see this instruction.
In order to calculate traveling speed of a cyclist, we need at least two GPS locations and to calculate how much they travelled and how long it took for the cyclist to travel that distance. To this end, we collect lat-long points from GPS information constantly with the interval of 30 seconds. In order to calculate a metric distance between two lat-long points, we use a Harvesine formula (wikipedia). We can enter two pairs of lat-long coordinates to calculate the distance. Note, the formula described in the previous Wikipedia link assume latitude and longitude angles in radian where the latitude and longitude returned by the LocationManager API returns the values in degrees, so it is your program’s responsibility to convert degree to radians. Once you have distance and time interval, you can calculate traveling speed.
Next is to create a view that visualizes data on top of a map.
In this tutorial, we will use
• Samsung Galaxy Nexus (Android 4.0)
• Bicycle
• Cellet Bicycle Phone Holder
We will first introduce how to calculate traveling speed of a bicycle, one of the most basic information around cycling activity, from GPS information that is acquired from a mobile phone attached to a bicycle. We will then present a visualization that shows how fast a user was traveling between each point where GPS information was acquired.
Acquiring GPS information to get location and travel speed
With an Android device, we can acquire GPS location in a form of latitude and longitude through its LocationManager API built in the LocationManager class. For more information, see this instruction.
In order to calculate traveling speed of a cyclist, we need at least two GPS locations and to calculate how much they travelled and how long it took for the cyclist to travel that distance. To this end, we collect lat-long points from GPS information constantly with the interval of 30 seconds. In order to calculate a metric distance between two lat-long points, we use a Harvesine formula (wikipedia). We can enter two pairs of lat-long coordinates to calculate the distance. Note, the formula described in the previous Wikipedia link assume latitude and longitude angles in radian where the latitude and longitude returned by the LocationManager API returns the values in degrees, so it is your program’s responsibility to convert degree to radians. Once you have distance and time interval, you can calculate traveling speed.
Next is to create a view that visualizes data on top of a map.
Step 1: Making a MapView to Visualize Cycling Activity
In order to visualize one’s cycling activity on top of a map, we use Leaflet.js and CouldMade. Here we use JavaScript and HTML5 for visualization and we will explain how to integrate JavaScript with Java in the next section. Leaflet.js is an open source JavaScript library for map visualization that fully supports HTML5. On top of the map layer is a path layer, and paths are stored/rendered a vector polyline.
We embed the webpage as part of the app by using the web view widget as described in the following link. This way, the JavaScript functions can be called just like methods in Java object from other part of the program (we need this in order to change color of path vectors according to the data we acquire in Java objects). And we also follow the following instruction to make methods in Java Object callable from JavaScript (link).
First we draw path between points that a user has traveled. Each point represents a point where GPS location was acquired. Different color for the paths that connects points color represents different properties such as, as we mentioned earlier, different speed of a bicycle between points.
In addition to visualizing the places that are traveled by a user, we also visualize places that are not traveled by users as fog, white shade that hides parts of the map. 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. The key is to utilize the TileLayer.Canvas in Leaflet to render each tile independently controlling the alpha channel of the white color to simulate fog. 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.
The path that a user has traveled can be stored in local storage and accessed by the Java IO objects. Data are stored in GeoJSON format, which is a prevalent JSON-style web standard for exchanging geographic information over the Internet. GeoJSON format can be parsed and displayed by the GeoJSON layer in Leaflet.
We embed the webpage as part of the app by using the web view widget as described in the following link. This way, the JavaScript functions can be called just like methods in Java object from other part of the program (we need this in order to change color of path vectors according to the data we acquire in Java objects). And we also follow the following instruction to make methods in Java Object callable from JavaScript (link).
First we draw path between points that a user has traveled. Each point represents a point where GPS location was acquired. Different color for the paths that connects points color represents different properties such as, as we mentioned earlier, different speed of a bicycle between points.
In addition to visualizing the places that are traveled by a user, we also visualize places that are not traveled by users as fog, white shade that hides parts of the map. 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. The key is to utilize the TileLayer.Canvas in Leaflet to render each tile independently controlling the alpha channel of the white color to simulate fog. 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.
The path that a user has traveled can be stored in local storage and accessed by the Java IO objects. Data are stored in GeoJSON format, which is a prevalent JSON-style web standard for exchanging geographic information over the Internet. GeoJSON format can be parsed and displayed by the GeoJSON layer in Leaflet.