Floating Image Layer in OpenLayers

Question

I'm making a Map Visualization which requires an overlay that shows the light/dark patterns across the planet (like this). I accomplished this by building a simple image layer that loads an image with a cosine wave shaded black on the top half (I'm not worried about seasonal adjustments yet). I can set the extent on the according to the current time to get a map that shows the light patterns in real time. However, I can't figure out how to move the Image Layer without moving the base Layer to show the light/dark overlay in the past or future.

My first inclination was to use some sort of move() method, but I couldn't find it in the API. So I tried to adjust the Layer's extent on each change like this:

sunLayer({extent : new OpenLayers.Bounds(newLong, -90, newLong+360, 90)});
sunLayer.redraw();

But nothing happens. I was thinking that maybe I need to build a Vector Layer with just one Feature (the image), and then tie the dimensions of the graphic to the dimensions of the map and move the feature around, but this approach feels wrong to me.

Has anyone else done something like this (where you entirely decouple an Image Layer from the base layer)?

Answer 1

try to use following codes. it works every hour and removes old hours image layer and adds new hour image on your map.

var hours = new Date().getHours();
var opt = {   
        opacity: 0.9, 
        isBaseLayer: false,
        numZoomLevels: 5
    };    

window.setInterval(function(){    
var lyrName = parseInt(hours - 1) + '_dayandnight'
var lyr = maps.getLayersByName(lyrName) 
lyr.destroy();

var newLyrName = hours + '_dayandnight'
var newUrl = 'http://aa.com/' + newLyrName + '.jpg'
var imgLayer = new OpenLayers.Layer.Image( newLyrName,  
        newUrl , extent, opt);

map.addLayers(imgLayer);    
}, 60000);

beside this you can check out Day Light Map which produces day and night maps from wms...

i hope it helps you...