Bing Maps and HTML5 (Part 4 - Final optimization)

Part 1 - Basic
Part 2 - Canvas
Part 3 - Optimizing
Part 4 - Final Optimization

In Part 3 of this "Bing Maps and HTML5" series I optimized the drawing of the Canvas quite a bit. The time taken to draw the canvas with 140.000 points was cut from 800ms to 75ms.

Anyway, and as I said previously, my target was (and is) the 40ms mark (1000/25) for a full canvas render with all the points. Why? Because I want the data to be continuously drawn while the map is zoomed/panned, and it has to be fluid.
After profiling my code, the bottleneck is still the function where wgs84 coordinates are converted to pixel coordinates.

Update 26/07/2012: I've added a working example here. I've also added a zip file with the project here.
I modified the demo so that the data is not fetched from a node.js but from a separate js file instead.



Let's check the code:

function latLongToPixelXY(latitude, longitude, mapWidth) {

    var sinLatitude = Math.sin(latitude * Math.PI / 180);
    var pixelX = ((longitude + 180) / 360) * 256 * Math.pow(2, mapWidth) ;
    var pixelY = (0.5 - Math.log((1 + sinLatitude) / (1 - sinLatitude)) 
                                                   / (4 * Math.PI)) * mapWidth;

    var pixel = new Object();
    
    pixel.x = (0.5 + pixelX) | 0;
    pixel.y = (0.5 + pixelY) | 0;

    return pixel;
}

This function is being called for each coordinate in each frame, so every redundant operation has a lot of weight in the total time.

Optimization #1: Replace the PI operations with precalculated constants

This was suggested in the comments section of my previous post. Simple enough, instead of having Math.PI / 180 and Math.PI * 4, replace it with the corresponding constant values.

It thus becomes:

function latLongToPixelXY(latitude, longitude, mapWidth) {

    var sinLatitude = Math.sin(latitude * pi_180);
    var pixelX = ((longitude + 180) / 360) * 256 * Math.pow(2, mapWidth) ;
    var pixelY = (0.5 - Math.log((1 + sinLatitude) / (1 - sinLatitude)) 
                                                   / (pi_4)) * mapWidth;

    var pixel = new Object();
    
    pixel.x = (0.5 + pixelX) | 0;
    pixel.y = (0.5 + pixelY) | 0;

    return pixel;
}

Optimization #2: Instead of storing the coordinates, store a pixel "factor"

First, lets change the method a little bit so that it's easier to refactor it

function latLongToPixelXY(latitude, longitude, mapWidth) {

    var sinLatitude = Math.sin(latitude * pi_180);

    var pixelYFactor = (0.5 - Math.log((1 + sinLatitude) / (1 - sinLatitude)) 
                                                         / (pi_4));
    var pixelXFactor = ((longitude + 180) / 360);

    var pixelY = pixelYFactor * mapWidth;
    var pixelX = pixelXFactor * mapWidth;

    var pixel = new Object();
    pixel.x = (0.5 + pixelX) | 0;
    pixel.y = (0.5 + pixelY) | 0;

    return pixel;
}

The variable in the process is the zoom level (mapWidth) so, if we store the PixelFactors instead of the coordinates, our method becomes:

function latLongToPixelXY(pixelFactor, mapWidth) {

    var pixelY = pixelFactor.Y * mapWidth;
    var pixelX = pixelFactor.X * mapWidth;

    var pixel = new Object();
    pixel.x = (0.5 + pixelX) | 0;
    pixel.y = (0.5 + pixelY) | 0;

    return }

Well, isn't it nicer? No we just need to do the previous calculations when the points are loaded. The difference is that this operation is only done once for each coordinate.

var socket = io.connect('http://localhost:88');
socket.on('coordinates', function (items) {

    points = items;
    pixelFactors = new Array();

    for (var i = 0; i < points.length; i++) {

        var pixelFactor = new Object();

        var sinLatitude = Math.sin(points[i].lat * pi_180);

        pixelFactor.Y = (0.5 - Math.log((1 + sinLatitude) / (1 - sinLatitude)) 
                                                          / (pi_4));
        pixelFactor.X = ((points[i].lon + 180) / 360);
        pixelFactors.push(pixelFactor);
    }    
    loadCanvas();
});

Let's see if this improved the drawing speed.

Not bad at all. Time to try this baby out.

I've uploaded a video capture that I did directly on my PC to show the drawing being done continuously without interruption. Also, I've modified the algorithm a little bit so that at closer zoom levels the points appear larger. 

Although this concludes this series I've got much more to try out regarding maps and HTML5.