JSFiddle - React, Tailwind, and code Playground

by Mike Gifford

HTML

<script src="http://openlayers.org/dev/OpenLayers.js"></script>
<h1>My Map</h1>

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

Slider
<div id="slider-id">

Handle
<div class="ui-slider-handle"></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 = new OpenLayers.Map('map', {
    controls: [new OpenLayers.Control.PanZoom()]
});
var layer = 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);