I am using OpenLayers to render a WMS inside of a div tag. This is right out of the OpenLayers documentation. My WMS layer is rendering well.

<div id="map"></div>

Using the jQuery UI documentation I have been able to create a draggable div tag that will, hopefully, house controls for editing vector features. Using the code below I am able to draw my draggable box.




<div id="map">
<!--Sample Box using jQuery UI-->
<div id="makeMeDraggable"></div>

I was able to get overlap working by setting the map position to absolute and assigning appropriate z-indices to each div. (In the CSS file)

#map{ position:absolute; z-index:1;}

This allows the box to be dragged around the map's "container" (div tag) without issue. I am struggling to figure out how to have the map's position remain constant as I drag the box? The map is registering an onClick event over the entire page and so the box and map move in tandem. I am relatively new to jQuery and OpenLayers. I am probably missing something straight forward in the documentation?

Edit: URL to jsfiddle.net for anyone interested in checking out this problem. The map displays after zooming once. I still need to modify that...


1 Answer 1


Please put your code, or a short version, at http://jsfiddle.net/ so we can play with it.

Also try:

<div id="map"></div>

<div id="makeMeDraggable"></div>
  • What an awesome site! URL added as an edit above.
    – Jay Laura
    Commented Feb 27, 2012 at 22:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.