JSFiddle - React, Tailwind, and code Playground

by devdatta

HTML

<script src="http://dev.openlayers.org/sandbox/bjornharrtell/swipe/lib/OpenLayers.js"></script>
<div id="map" class="smallmap"></div>
<ul id="controlToggle">
    <li>
        <input type="checkbox" name="swipe" value="none" id="swipe" onclick="toggleControl(this);" "/>
                <label for="swipe ">Activate Swipe Control</label>
            </li>
        </ul>

CSS

.smallmap {
    width: 450px;
    height: 250px;
}

JavaScript

var map;
var swipe;

map = new OpenLayers.Map({
    div: "map"
});

var format = "image/png";
var bm = new OpenLayers.Layer.WMS(
    "BlueMarbe", "http://demo.opengeo.org/geoserver/nasa/wms", {
    LAYERS: 'nasa:bluemarble',
    STYLES: '',
    format: format,
    transparent: true
}, {
    isBaseLayer: true
});


var admin = new OpenLayers.Layer.WMS(
    "Admin", "http://demo.opengeo.org/geoserver/ne/wms", {
    LAYERS: 'ne:ne_10m_admin_0_countries',
    STYLES: '',
    format: format,
    transparent: true
});


map.addLayers([bm, admin]);

swipe = new OpenLayers.Control.Swipe(admin);

map.addControl(swipe);

map.setCenter(new OpenLayers.LonLat(5, 5).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject()), 2);
alert("done");

function toggleControl(element) {
    if (element.checked) {
        swipe.activate();
    } else {
        swipe.deactivate();
    }
}