Articles with the tag maps

Fun with maps II

Posted on 2013-08-19

Last time I've created map with overlay that shows lightnings. Unfortunately standard OpenStreetMaps style is too bright for lightnings to be visible enough.

My solution was to add overlay layer that darken map to enhance visibility of Bliztordung.org layer. For this I've used OpenLayers.Layer.Image. This layer display provided image on the map (using provided bounds and size).

First. I created png image filled black, size 100x100px. Then created ImageLayer:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
var shade = new OpenLayers.Layer.Image(
    "Shade",
    "http://utek.pl/examples/fun-with-maps2/darken.png",
    new OpenLayers.Bounds(-20037508, -20037508, 20037508, 20037508.34),
    new OpenLayers.Size(100, 100), {
        isBaseLayer: false,
        visibility: true,
        opacity: 0.5
    }
);

Leave a comment

Fun with maps

Posted on 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:

Leave a comment

Categories

Tags

Links