Home/ Questions/Q 4606800
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-22T00:36:55+00:00

I have an openlayers map and I have positioned a div to sit inside/over

  • 0

I have an openlayers map and I have positioned a div to sit inside/over the map component.

This works fine, however when dragging the map, if the mouse moves through/over the div the drag action is terminated.

How can I avoid the drag action from terminating?

thanks, p.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
  <script type="text/javascript" src="http://www.openlayers.org/api/OpenLayers.js"></script>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.0.0/prototype.js"></script>
</head>
<body>

<div id="map" style="margin:0px; width:300px; height:200px;"></div>
<div id="overlay" style="position:absolute; width:100px; height:75px; border:1px solid red; background-color:white; z-index:5000; text-align:center;">I want to drag through this</div>

<script type="text/javascript">
    // create map
    var map = new OpenLayers.Map("map", {"maxResolution":0.703125});
    map.addLayers([new OpenLayers.Layer.WMS("World Map", "http://labs.metacarta.com/wms-c/Basic.py?", {layers:"basic", format:"image/png"})]);
    map.zoomToMaxExtent();

    // put div over map
    Position.clone($("map"), $("overlay"), {offsetLeft:100, offsetTop:62.5, setWidth:false, setHeight:false});
</script>

</body>
</html>

EDIT: solution using accepted answer:

<div class="mapDragThrough">some content which gets positioned over the map</div>

initialise: function()
{
    this.map.events.register("movestart", this, this.applyDragThrough);
    this.map.events.register("moveend", this, this.applyDragThrough);
},

applyDragThrough: function(event)
{
    var elements = Element.select(document.body, ".mapDragThrough");
    var value = this.map.dragging ? "none" : "auto";
    elements.invoke("setStyle", {"pointerEvents":value});
},
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You can set pointer-events css attributes of the overlay DIV to none.
    This causes the element not to receive mouse events at all, allowing the map dragging to continue uninterrupted.

    Here’s a working example:

    <html>
<head>
  <script type="text/javascript" src="http://www.openlayers.org/api/OpenLayers.js"></script>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.0.0/prototype.js"></script>
</head>
<body>

<div id="map" style="margin:0px; width:300px; height:200px;"></div>
<div id="overlay" style="position:absolute; width:100px; height:75px; border:1px solid red; background-color:white; z-index:5000; text-align:center;">I want to drag through this</div>

<script type="text/javascript">
    // create map
    var map = new OpenLayers.Map("map", {"maxResolution":0.703125});
    map.addLayers([new OpenLayers.Layer.WMS("World Map", "http://labs.metacarta.com/wms-c/Basic.py?", {layers:"basic", format:"image/png"})]);
    map.zoomToMaxExtent();

    // put div over map
    Position.clone($("map"), $("overlay").setStyle({'pointerEvents': 'none'}), {offsetLeft:100, offsetTop:62.5, setWidth:false, setHeight:false});
</script>

</body>
</html>
    • 0