Continuing on with Cesium, this is a map with an animated vehicle (delivered with Cesium) following a random set of Google Maps API directions, in amongst some 3D buildings from a previous experiment.
Here (http://darrenwiens.net/nordiccentre_animated.html) is an old project I made last year and updated over the holidays. It’s a map of the Hinton Nordic Centre, with the handy feature of calculating the length of your route. Click and drag the green points to change the start and end positions. Click and drag anywhere on the blue highlighted route to move that part of the path. Oh, if you notice an error in the trails (for example, it doesn’t exist), go ahead and change it using Google Map Maker.
Disclaimer: this was something I did for fun, because I love skiing at the Hinton Nordic Centre, and I hate calculating my distances. This is not any sort of official product of the Nordic Centre. Also, this map does not work well in old browsers like Internet Explorer 8, but if you are using it, it’s time to upgrade anyway.
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).
edit: I just changed the map so the vehicles seem to follow roads in the proper direction. However, some of them appear to slide sideways, so if you want to take a look at the code I’d be happy to hear what I’m missing!
I played around with PaperJS/Google Maps API again today – this time calculating directions between pairs of random points. The directions result from Google is displayed by a PaperJS path, which includes color animation. Try it out.
edit: check out this Stack Overflow question which redirects to this project and provides a douche-y indictment for something this map isn’t intended to do (namely, allow interaction between the user and map).
The Foothills Research Institute’s Annual General Meeting is approaching, and part of it will be an interpretive bus tour. Above is a draft version of the bus tour, showing some of the stops (they could very well change in the future). More to my tastes, the map uses the Google Maps API in a variety of ways, including calculating optimal directions between waypoints to produce the polyline, and animating both marker and polyline symbols. Future development will focus on loading content into infowindows.