OpenLayers – How to Display Control (Zoom Bar) Outside Map Container

openlayers-2

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

Best Answer

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') });

map.addControl(external_control);

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

Related Question