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:
- Some sort of cache of Blitzortung.org layer
- Improve visibility