Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. It's 100% free, no registration required.

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

Since I'm new to OpenLayers this question might be the simplest of them all but after a quick search on the subject I couldn't find anything useful, so:

Is it possible to put a OpenLayers zoom bar/slider outside the map container in another div? Like for example OpenLayers.Control.Zoom().

share|improve this question
up vote 5 down vote accepted

First, create your map with no controls.

var map = new OpenLayers.Map('map', { controls: [] });

To place the controls outside the map container, create a container <div> to put it inside.

<div id="external_control"></div>

Then create the controls and place them inside the #external_control container.

var external_control = new OpenLayers.Control.Zoom({
    div: document.getElementById('external_control') });


This tutorial might help you. Specifically, the section on "Adding Controls Outside of Map"

share|improve this answer
Oh, it was that simple! Thanks! – Oskar Karlin Jul 26 '12 at 14:46
Funny thing: I had that tutorial open in another browser window already, but I was only on step 2! – Oskar Karlin Jul 26 '12 at 14:47
Glad I could keep you aligned with that tutorial. I've used it when I was first starting out with OL. – Michael Markieta Jul 26 '12 at 14:59

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.