JSFiddle - React, Tailwind, and code Playground

by Mike Gifford

HTML

<script src="http://openlayers.org/dev/OpenLayers.js"></script>
    <h1 id="title">Navigation Toolbar: Outside the Map</h1>
    <div id="tags">
        navigation toolbar, style, position, div
    </div>
    <div id="map" class="smallmap"></div>
    <div id="paneldiv" class="olControlNavToolbar"></div>
    <div id="docs">
     <p> To place the Naviation Toolbar outside the map:</p>
      <ul>
        <li>Load the default stylesheet into the page.</li>
        <li>Override the location of the Navigation toolbar in your CSS by setting <tt>#yourElementId div</tt> to have a top of 0px</li>
        <li>Specify the HTML element as a 'div' option in your NavToolbar constructor</li>
        <li>Add the olControlNavToolbar class to your div.</li>
      </ul>
   </div>

CSS

#map-id {
                width: 512px;
                height: 256px;
            }
            #slider-id {
                width: 492px;
                margin: 10px;
            }

JavaScript

var lon = 5;
var lat = 40;
var zoom = 5;
var map, layer;

function init() {
    map = new OpenLayers.Map('map', {
        controls: [new OpenLayers.Control.PanZoom()]
    });
    layer = new OpenLayers.Layer.WMS("OpenLayers WMS", "http://vmap0.tiles.osgeo.org/wms/vmap0", {
        layers: 'basic'
    });
    map.addLayer(layer);
    var panel = new OpenLayers.Control.NavToolbar({
        'div': OpenLayers.Util.getElement('paneldiv')
    });
    map.addControl(panel);
    map.setCenter(new OpenLayers.LonLat(lon, lat), zoom);

}