Map Rendering Speed: Flash vs. HTML5 Canvas

Many people are talking about html5 and the death of Flash in these days, so I decided to do a small speed comparison of map renderings between HTML5 and Flash. I took the quick and dirty example from my previous map rendering tutorial and ported it into html5/javascript. The only thing it does is reading in a fat list of 95,162 map coordinates, projecting them using the Hatano projection and finally rendering the resulting polygons on screen. I chose Hatano because it’s a nice looking projection with only a few lines of code. You can benchmark the rendering yourself by visiting the html5 map rendering demo and the flash map rendering demo. I tested the browsers Firefox 3.6.3, Chome 4.1 and Internet Explorer 8 on my notebook (intel core 2 cpu, t5600 @1.83GHz, 2gb ram) and averaged the results over 10 test runs.

So here are my results. I achieved the fastest map projection calculations in Firefox (314ms), followed by Chrome (657ms) and Flash (1,036ms). The fastest map renderings were achieved in Flashplayer (83ms), followed in distance by Chrome (446ms) and Firefox (610ms). Seems as if the days of flash aren’t counted yet (no big surprise).

Also no surprise are the bad results of the internet explorer, because it lacks a native implementation of the html5 canvas. If you really want to run the tests in IE8 you probably want to disable the javascript timeout notifications in the registry ;-). You find the complete list of my test results below.

Map Projection in ActionScript

Today I want to introduce as3-proj, an actionscript port of the java map projection library by Jerry Huxtable, which is itself an partial port of the PROJ.4 library. It’s basically a huge set of over sixty map projection classes which you can use to convert geographical coodinates (pairs of latitude and longitude values) into screen coordinates.

Usage example

You can use the projection classes like this:

var lat:Number, lng:Number, proj:Projection, p:Point;
lat = 40.2302; // degrees
lng = 24.32434; // degrees
proj = new RobinsonProjection();
proj->initialize();
p = proj->project(lat, lng, new Point());
// p contains converted values in metres

Demonstration

I built a sample application that shows static world maps in different map projection. You can switch the map projection using the menu at the bottom. Also you can filter out some map projections, e.g. to only display rectilinear map projections. The visualization of some projections (like the Orthographic Projection) still need a little more coding to be perfect (eg. removal of hidden lines and faces), but this was out of the scope of this demo.

Supported projections

You find a alphabetically sorted list of all included map projections and their properties below.

projection has invers parallels are parallels is rectilinear is conformal is equal area
Airy’s Minimum-Error Azimuthal no no no no no
Aitoff no no no no no
Albers Equal Area yes no no yes yes
Boggs Eumorphic no yes no no yes
Bonne yes no no no yes
Cassini yes no no no no
Central Cylindrical yes yes yes yes no
Collignon yes yes no no yes
Craster Parabolic (Putnins P4) yes no no no yes
Cylindrical Equal Area yes yes yes yes no
Denoyer Semi-elliptical no yes no no no
Eckert I yes yes no no no
Eckert II yes yes no no no
Eckert IV yes yes no no no
Eckert V yes yes no no no
Euler yes no no yes no
Fahey yes yes no no no
Foucaut Sinusoidal yes yes yes yes no
Gall Stereographic yes yes yes yes no
Gall-Peters yes yes yes yes yes
projection has invers parallels are parallels is rectilinear is conformal is equal area
Ginsburg VIII (TsNIIGAiK) no yes no no no
Goode Homolosine yes yes no no yes
Hammer & Eckert-Greifendorff no no no no yes
Hatano Asymmetrical Equal Area yes yes no no no
Kavraisky V yes yes no no yes
Lagrange no no no yes no
Lambert Conformal Conic yes no no yes no
Lambert Equal Area Conic yes no no yes yes
Landsat no no no no no
Larrivée no no no no no
Laskowski Tri-Optimal no no no no no
Loximuthal yes yes no no no
McBride-Thomas Flat-Polar Parabolic yes yes no no no
McBryde-Thomas Flat-Polar Quartic yes yes no no no
McBryde-Thomas Flat-Polar Sine I yes yes no no no
McBryde-Thomas Flat-Polar Sine II yes yes no no no
Mercator yes yes yes yes no
Miller Cylindrical yes yes yes yes no
Mollweide yes yes no no yes
Murdoch I yes no no yes no
projection has invers parallels are parallels is rectilinear is conformal is equal area
Murdoch II yes no no yes no
Murdoch III yes no no yes no
Nell yes yes no no yes
Nell-Hammer yes yes no no no
Nicolosi Globular no no no no no
Orthographic Azimuthal yes no no no no
Perspective Conic yes no no yes no
Plate Carrée yes yes yes yes no
Putnins P’4 yes yes no no yes
Putnins P’5 yes no no no no
Craster Parabolic (Putnins P4) yes no no no yes
Putnins P5 yes no no no no
Quartic Authalic yes yes no no yes
Robinson yes yes no no no
Sinusoidal yes yes no no no
Transverse Central Cylindrical no no no no no
Transverse Cylindrical Equal Area yes no no no yes
Tissot yes no no yes no
Urmaev Flat-Polar Sinusoidal yes no no no no
van der Grinten (I) yes no no no no
projection has invers parallels are parallels is rectilinear is conformal is equal area
Vitkovsky yes no no yes no
Wagner II yes no no no no
Wagner III yes yes no no no
Wagner IV yes yes no no no
Wagner V yes yes no no no
Wagner VII no no no no yes
Werenskiold I yes yes no no yes
Winkel Tripel no no no no no

The following projection are also included but are a bit buggy yet. Maybe someone with more knowledge about map projection math is able to stop those formulas from throwing weird exceptions.

projection has invers parallels are parallels is rectilinear is conformal is equal area
August Epicycloidal no no no yes no
Bipolar Conic yes no no no no
Equidistant Azimuthal yes no no no no
Lambert Equal Area Azimuthal yes no no no yes
Space-oblique Mercator yes no no no no

Since I only tested the one-way projection of geographic coordinates into screen coordinates there still might be some bugs on the inverse projections. The java code of the map projection library had a few errors. Hope the classes are helpful anyway.

Download & License

The source code of as3-proj is released under the Apache License.

You can download the sources from my bitbucket account. Here is a direct link to the zipped sources.

If my work is useful to you, please feel free to donate an amount of your choice via paypal. Thanks!