Digital Geography

20. November 2013

News from Vladimir Agafonkin / creator of leaflet

We love leaflet. In fact we have done some great projects with this nice little piece of code like our job-map. As I’ve checked the news from leaflet: they have released version 0.7 into the wilderness of the internet. So what’s new?

As Vladimir points out, the changes are focussing on stability and useability. Therefore he drops IE6 support (damn my company for using this in their Citrix environment), adds better support for IE7/8 and also touchy stuff like IE11. Additionally he and his contributors added shift-double-click to zoom out shortcut, significantly improved controls design on mobile devices and finally added an official FAQ. You can find all the improvements on his changelog.
Leaflet is now looking officially towards 1.0 release but will not skip 0.8.
I am hoping that he will have the time to work on leaflet as he joined the colleagues from mapbox and he is now a full time developer there. But it seems that he has still some time to play:

He combines raster analysis with a real time computation in javascript to calculate hillshade in real time. Do this in ArcGIS or QGIS and you will either take some time to compute and you will get a raster. Due to the usage of javascript he lets the visitor of the map compute it just for the visible area in the webmap and you can play a round as you like without waiting so long. He uses the RGB code of the Digital Elevation Model (DEM) to compute a height equivalent which is than used to compute slope and aspect as the key features for hillshade calculation.

function raster2dem(data, zFactor) {

    var values = new Uint16Array(256 * 256),
        dem = new Float32Array(256 * 256 * 2);

    var x, y, dx, dy, i, j;

    for (x = 0; x < 256; x++) {
        for (y = 0; y < 256; y++) {
            i = x + y * 256;
            j = i * 4;
            values[i] = data[j] + data[j + 1] * 2 + data[j + 2] * 3;
        }
    }

    for (x = 1; x < 255; x++) {
        for (y = 1; y < 255; y++) {             i = y * 256 + x;             dx = ((values[i - 255] + 2 * values[i + 1]   + values[i + 257]) -                   (values[i - 257] + 2 * values[i - 1]   + values[i + 255])) / 8;             dy = ((values[i + 255] + 2 * values[i + 256] + values[i + 257]) -                   (values[i - 257] + 2 * values[i - 256] + values[i - 255])) / 8;             j = (y * 256 + x) * 2;             dem[j] = Math.atan(zFactor * Math.sqrt(dx * dx + dy * dy)); // slope             dem[j + 1] = dx !== 0 ?                 Math.atan2(dy, -dx) :                 Math.PI / 2 * (dy > 0 ? 1 : -1); // aspect
        }
    }

    return dem;
}