Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I am using open layers 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 for anyone interested in checking out this problem. The map displays after zooming once. I still need to modify that...

share|improve this question
up vote 3 down vote accepted

Please put your code, or a short version, at so we can play with it.

Also try:

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

<div id="makeMeDraggable"></div>
share|improve this answer
What an awesome site! URL added as an edit above. – Jay Laura Feb 27 '12 at 22:55
It was a nesting issue. Thanks neil. – Jay Laura Feb 28 '12 at 1:15

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

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