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.
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.
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.
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 (email@example.com) 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).
This map started off as a side project that seemed like it might be useful to FRI some day. Well, that day is here. It’s currently the featured content on FRI’s homepage. The map features lots of KML layers and a jQuery accordion.
This is an example using data from a crowd-sourced weather service, Open Weather Map. No one from Hinton is sharing. Typical.
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.
I almost forgot about this one. It uses jQuery to parse a KML file. When you click the “Change Color” button, it changes the polygon’s fill and border to random colors.