Is this the New Aesthetic on Google Maps?

Floating Shiny Knot is an impressive experiment using canvas with Street View.

The application superimposes an animated shiny knot on top of any Street View image (you can choose a chrome or glass finish for the knot). This is very impressive. However if you rotate and drag the Street View around then the application soars to even higher levels of impressiveness.

To view this you will need a modern browser (try Chrome).

What is the New Aesthetic?

Hat-tip: Street View Funny

Google Maps, HTML5 & WebGL Demos

Click to Release features a number of very cool experiments using HTML5 (which means that you should probably use the Chrome browser to view these demos).


Urban Arteries uses the Google Maps API, three.js and what I can only guess is black magic to create a 3D view of the city around you using just the major road arteries around your location.

The app automatically detects your location but you can also use any address or use the quick links provided to see some of the major cities.


WebGL Google Street Viewer lets you explore Google Maps Street Views around the world without Flash.


I couldn't get the WebGL Weather Globe to run on my steam driven laptop but I think it uses the recently added weather data on Google Maps and places it on the Google Data Arts Team WebGL Globe. The screenshot looks cool anyway.

_________________

HTML5 Elevation with Google Maps

Vizzuality, the Spanish developers of some of the coolest Google Maps apps, has created a Google Map that allows you to view all the world's mountain ranges.

The map uses an HTML5 canvas overlay to visualise elevation data worldwide. The map includes a slider that allows you to adjust the elevation above sea level that is shown on the map.

If you set the slider to 0 metres then most of the world's land is shaded on the map. If you drag the slider up to 5400 meters then suddenly the Himalayas look very lonely.

Visual Raster

_________________

HTML5 & Google Maps

GIS Cloud HTML5 Canvas

This Google Map demonstrates the advantages of using HTML5 canvas to create an overlay for a map.

What impresses me most about the map is how fast the canvas element is drawn on the map. There are a few thousand polygons on this map and they load seamlessly. If you zoom in and out on the map you can really appreciate the speed with which the polygons are displayed.

I think the overlay shows US monthly employment rates.

_________________

Using Canvas with Google Maps

Canvas Bar Charts

In the last couple of weeks I've been experimenting with using the canvas element of HTML5 with Google Maps. The canvas element allows for dynamic, scriptable rendering of 2D shapes on a web page, so I thought it would be perfect for creating data visualisations with Google Maps.

This example map presents the populations of the American states by using the canvas element to draw a bar graph for each state. To view a state's population on the map just mouse-over the state on the map.

With the canvas element it is also possible to animate shapes. This example tweens between the different bar charts as you roll over the states. I didn't particularly like the effect so I gave up on it - hence it will only work for some of the eastern states.

Of course much more complex animations are possible. Tim Poon has created a great particle animation with canvas. When I saw his animation I thought it would look great with Google Sky as a background. And it does.



In my example I have used z-index to overlay the canvas element over the map canvas. The disadvantage of doing this is it makes the map inaccessible so you can't interact with the map. The answer is to add the canvas element as an overlay on the map.

The excellent Mapnificent does this to visualise travel distances on Google Maps. Adding the canvas element as an overlay on the map means that on Mapnificent you can still interact with the map.



Another great use of the canvas element is to create dynamic markers. Using the canvas element to draw the markers rather than using static images means that you can change the size of markers to reflect the size of something you wish to represent.

Monocubed did this with their map of the London Bike Hire scheme. The map used markers drawn in canvas to show the number of bikes being hired by each bike station. The size of each marker represented the number of bikes hired from that station (unfortunately the map no longer seems to work).

If you want to use canvas for your markers a good place to start would be Paul Kinlan's tutorial Using Canvas to Create Beautiful Custom Markers in Google Maps.

________________