Question

Is it possible to create two layers (with one being translucent) in OpenLayers and move them independently? If so, how?
I want to let the user choose which layer to move or if that’s not possible, move one layer via my own JavaScript code while the other is controlled by the user.

Both will be prerendered pixmap layers, if that is important.

Answer 1

This is the solution I came up with. It isn’t pretty but it works for my purposes.

Better alternatives are very welcome …

/**
* @requires OpenLayers/Layer/TMS.js
*/
MyLayer = OpenLayers.Class(OpenLayers.Layer.TMS, {
    latShift: 0.0,
    latShiftPx: 0,

    setMap: function(map) {
        OpenLayers.Layer.TMS.prototype.setMap.apply(this, arguments);
        map.events.register("moveend", this, this.mapMoveEvent)
    },
    // This is the function you will want to modify for your needs
    mapMoveEvent: function(event) {
        var resolution = this.map.getResolution();
        var center = this.map.getCenter();

        // This is some calculation I use, replace it whatever you like:
        var h = center.clone().transform(projmerc, proj4326);
        var elliptical = EllipticalMercator.fromLonLat(h.lon, h.lat);
        var myCenter = new OpenLayers.LonLat(elliptical.x, elliptical.y);

        this.latShift = myCenter.lat - center.lat;
        this.latShiftPx = Math.round(this.latShift/resolution);

        this.div.style.top = this.latShiftPx + "px";
    },
    moveTo: function(bounds, zoomChanged, dragging) {
        bounds = bounds.add(0, this.latShift);
        OpenLayers.Layer.TMS.prototype.moveTo.apply(this, [bounds, zoomChanged, dragging]);
    },
    // mostly copied and pasted from Grid.js ...
    moveGriddedTiles: function() {
        var buffer = this.buffer + 1;
        while(true) {
            var tlTile = this.grid[0][0];
            var tlViewPort = {
                x: tlTile.position.x +
                    this.map.layerContainerOriginPx.x,
                y: tlTile.position.y +
                    this.map.layerContainerOriginPx.y + this.latShiftPx // ... except this line
            };
            var ratio = this.getServerResolution() / this.map.getResolution();
            var tileSize = {
                w: Math.round(this.tileSize.w * ratio),
                h: Math.round(this.tileSize.h * ratio)
            };
            if (tlViewPort.x > -tileSize.w * (buffer - 1)) {
                this.shiftColumn(true, tileSize);
            } else if (tlViewPort.x < -tileSize.w * buffer) {
                this.shiftColumn(false, tileSize);
            } else if (tlViewPort.y > -tileSize.h * (buffer - 1)) {
                this.shiftRow(true, tileSize);
            } else if (tlViewPort.y < -tileSize.h * buffer) {
                this.shiftRow(false, tileSize);
            } else {
                break;
            }
        }
    },
    CLASS_NAME: "MyLayer"
});

Note that this only works with OpenLayers 2.13 or newer