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().


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"

| improve this answer | |
  • Funny thing: I had that tutorial open in another browser window already, but I was only on step 2! – oskarlin 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 clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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