Tag Archives: heatmap

Collaborative Heatmap: Fav. Bike Route


I’ve been playing around with a cool, real-time, client-side code driven cloud database called Firebase for the last while, and here is one of the projects that came out of it.

There is a local need to identify the streets and other routes that are actually used by cyclists in Prince George, BC (not just “where are the bike routes?”). That sounds like a heatmap to me. Using jQuery Mobile (frontend), Google Maps API (maps), and Firebase (backend), the user can add a direction line to the map (“Add Route” button), modify the directions if they do not show the desired route (drag the route or end points), and save the route (“Submit Route” button). Once the route has been saved, the heatmap will update to reflect the addition. And the cool part is: it will update everyone else’s view in real time, which is important because I know this will go viral. Also cool, I didn’t write a single line of server-side code.

Go ahead and play with the map – add as many lines as you want. I’ve set it so the directions default to Prince George, but you can drag and submit them wherever you want. The biggest limitation of the map is that the directions are converted to points to feed into the heatmap, so in the end it is really a heatmap of most popular corners, not routes.

Disclaimer: this seems to work fine in my versions of Chrome and IE (surprise), but not my iPad’s Safari. Please let me know if you have any insight.

PaperJS Heatmap


This map uses the Google Maps Directions Service to generate PaperJS lines between locations, hit tests those line corners, and increases the opacity of the corresponding pixels (in an originally transparent PaperJS raster grid). The end result is a map showing the pixels most often used in the directions (well, technically, it’s the pixels most often turned at in the directions).

Random Movement, Dynamic Symbology


Here‘s another visualization I’ve been working on. Lots of wildlife biology these days deals with how animals interact with the human world around them. Here in the forests of western Alberta, that generally means either forestry activity (cutblocks) or oil infrastructure (wells, pipelines, seismic lines, facilities, etc.). This is a proof-of-concept map, showing a randomized individual (maybe a bear…?) moving amongst randomly placed points (maybe oil wells…?). As the individual moves closer to a point, the point size increases.

The tricky part was managing the distance calculations. It was bogging down in the attempt to calculate the distance to every point on the map (500 of them) each time a new point was drawn. To overcome this limitation, I set it so for every 25 new locations it would find all of the points within 50km and remember them – usually it was about 50 points. Then, for each newly drawn point, it would cycle through only those 50 nearest points and adjust their symbology to be inversely related to distance.

Note: works fine in Chrome, not so well in Firefox, and don’t even bother trying it in Internet Explorer.

Visualize GPS Data in Google Maps


Obviously, maps are a great way to show spatial data. But have you ever tried to show how things on the landscape change through time? Where do animals move, where are wildfires burning, where are Mountain Pine Beetles going to and coming from? Most often, this is accomplished by showing a series of maps – lifeless, static, blah. The map series can be animated by certain pieces of software (generally costing a pretty penny), but we haven’t found anything nearly as smooth as what we’ve produced using a little bit of Python programming to format GPS data, and HTML/Javascript to display the animated map using the Google Maps API (a way for the public to use the Google Maps framework). This is all free of charge, by the way.

The Grizzly Bear Program at the Foothills Research Institute have fitted several bears with GPS collars. They collect an immense amount of locations and give an awful lot of presentations; showing those paths in an engaging way is important. The solution Python-whiz Julie Duval and I came up with takes GPS location files (text files), and produces an HTML file ready to display an animated map of bear movements on a Google Map.

You can look at an example here, although it only shows randomly generated paths – sorry, I can’t show you the location of local grizzly bears! The site is best viewed in Chrome or Firefox, not Internet Explorer.

If you are an FRI partner, please contact me (dwiens@foothillsri.ca) for more information on how you might better display your time-dependent data. Also, in a few days we should have a distributable copy of the ArcGIS script tool that you can use to plot your own data on a Google Map (sorry, partners only).