Question

I’m trying to make an image overlay for open street maps. It chould look something like this:

preview http://www.wildurb.at/urbwalker-app/preview.png

The Problem im facing is that i can’t delegate the events through the transperant area of the image.

Here is the code i tried to use to trigger the events:

    <img id="overlay" style="position:absolute;" src="overlay.png"/>
    <div id="map"></div>

 

    #overlay {
            position:absolute;       
    }
    #map {
            position:absolute;
            width:300px;
            height:300px;
    }

 

    initMap();

    $('#overlay').bind({
            'mousedown' : function(event) {
                    event.preventDefault(); //no image dragging
                    $('#OpenLayers.Map_4_OpenLayers_ViewPort').trigger(event);
            }
    }
    $('#OpenLayers.Map_4_OpenLayers_ViewPort').bind('mousedown', function(event) {
            console.log(event);
    }

mousedown is never fired and im not sure which selector to use here
is there a way to pass all events that occur on overlay to the map?

Thanks in advance

best regards chaos

—- edit —

i created a fiddle

Answer 1

i found out that one could use pointer-events:none; for chrome firefox and safarie and a workaround with svg for ie and opera

var map;

$(document).ready(function() {
    map = new OpenLayers.Map('map');
    layer = new OpenLayers.Layer.OSM("Simple OSM Map");
    map.addLayer(layer);

    map.setCenter(
        new OpenLayers.LonLat(-71.147, 42.472).transform(
        new OpenLayers.Projection("EPSG:4326"),
        map.getProjectionObject()),
        12
    );

    if($.browser.msie || $.browser.opera) {
        var over = '<svg id="overlay"><image width="300" height="300" xlink:href="overlay.png"></image></svg>';
    } else {
        var over = '<img id="imgOverlay" src="overlay.png"/>';
    }
    $('body').append(over);
});

view this fiddle for working solution