Monthly Archives: July 2012

Google Maps API/HTML5 Interaction


Although this map looks simple, I have a feeling it will be a game-changer for me (actually, it is pretty simple once you figure it out). The map itself is fairly basic: the entire world (256 x 256 pixels). You can’t interact with it directly (ie. no pan, zoom, etc.) because it’s underneath an HTML5 canvas. Everything else is made with HTML5 and KineticJS: longitude lines, circle marker, and textbox.

The real beauty of this map is the ability to pass HTML5 events (in this case, “dragstart” and “dragend” ) to the Google Map. Specifically, you can send pixel coordinates of where you drag objects to (“clientX” and “clientY”) and convert them to Lat/Long coordinates on the map.

circle.on('dragend', function(event)
            var proj = map.getProjection();
            var point = new google.maps.Point(event.clientX, event.clientY);
            var location = proj.fromPointToLatLng(point); // lat/long coordinates

That’s the meat and potatoes of it. I added a geocoder to figure out the name of the state/province of the coordinates, and, why not, some KineticJS animations as an example of actually using the HTML objects.

Note: this example requires an HTML5 compliant browser – that means no Internet Explorer or you’ll blow its mind.


Example: Street View Image API


This is a simple example using the Google Street View Image API. It very quickly loads four Street View images from the marker location. Give it a try here.

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 ( 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).

Northern Rockies Highway Guide Map


This was actually a project (Trans Canada Ecotour – Northern Rockies Highway Guide), not a side project. This Google Map has a few fun features: custom infowindows, custom icons, HTML elements animated with jQuery, styled map, and weather.