Fun with maps 2013-08-13

While working on my geo enabled appliction I wondered if one could use data from Blitzortung.org to display map of lightings.

I'm using OpenLayers to display map using data from OpenStreetMap. So to display data from Blitzortung.org I needed to create new layer. But instead of using OpenLayers.Layer.OSM I'm using OpenLayers.Layer.XYZ.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
var lightings_15 = new OpenLayers.Layer.XYZ(
    "0-15 minutes", [
        "http://images.lightningmaps.org/blitzortung/europe/index.php?tile&zoom=${z}&x=${x}&y=${y}&type=0"
    ], {
        attribution: "Lightning data from <a href='http://blitzortung.org'>Blitzortung.org</a>",
        tileSize: new OpenLayers.Size(1024, 1024),
        transitionEffect: "resize",
        isBaseLayer: false,
        visibility: true,
        sphericalMercator: true
    }
);

To "refresh" lightings map I created small function that replace url in lightings_15 layer and force redraw on that layer.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
var url = "http://images.lightningmaps.org/blitzortung/europe/index.php?tile&zoom=${z}&x=${x}&y=${y}&type={type}&bo_t={date_str}";

function updateLayer() {
    var date = new Date();
    date_str = date.getUTCDate() + "_" + date.getUTCHours() + "_" + date.getUTCMinutes();
    new_url = url.replace("{type}", i);
    new_url = new_url.replace("{date_str}", date_str);
    lightings_15.url[0] = new_url; // As we have only one url in layer XYZ
    if (lightings_15.visibility){
        lightings_15.redraw({
            force: true
         });
    }
};

Finally after page load I'm setting interval using setInverval and defined updateLayer function

1
setInterval(updateLayer, 5*60000);

Check example

Todo:

blog comments powered by Disqus

Categories

Tags

Links