Using Paper.js with Google Maps

Darren Wiens has been experimenting with Paper.js and the Google Maps API. You can view his posts and links to the experiments with Paper.js on Darren's Side Projects blog.

Paper.js is an open source vector graphics scripting framework that runs on top of the HTML5 Canvas. In his experiments Darren has been overlaying vector graphics created using Paper.js as a canvas layer on top of Google Maps.

One of Darren's experiments is the Randomised City Map. On this map Paper.js is used to animate a line between two randomly generated locations. The Google Maps API Direction Service is then used to animate the driving route between the two locations.  Then another line between two random locations is generated and the driving route for that journey calculated and so on, ad infinitum.

The map then uses the Google Maps API Heatmap Layer to show the most heavily generated roads and intersections.The result of all this is a rather cool city traffic flow stimulator.


Another of Darren's Paper.js and Google Maps experiments is this Polygon Hit Detection Map. This map creates a number of polygons and a randomly generated moving line. Hit test detection is used to show when the moving line intersects with any of the polygons. In the screen-shot above the yellow stars show where the line has moved through a polygon.

This hit-test detection could be used in any number of ways. Darren gives the example of using it to highlight when GPS tracked elephants wander onto farmland. It could also be used to help create geo-location games, for example, to determine when a player has entered a pre-defined zone.