JSFiddle - React, Tailwind, and code Playground

by leggetter

HTML

<script src="http://openlayers.org/dev/OpenLayers.js"></script>
<link rel="stylesheet" href="http://openlayers.org/dev/theme/default/style.css">
<link rel="stylesheet" href="http://openlayers.org/dev/examples/style.css">
<h1 id="title">OpenLayers Example</h1>
        <div id="tags">simple, basic, light</div>
        <p id="shortdesc">
            Demonstrate a simple map with an overlay that includes layer switching controls.
        </p>
        <div id="map" class="smallmap"></div>
        <div id="docs">
            <p>This is a basic example demonstrating the use of a map with two layers and a few controls.</p>
        </div>

JavaScript

var mapEl = document.getElementById( 'map' );
var map = new OpenLayers.Map( mapEl ); // map doesn't render
//var map = new OpenLayers.Map( 'map' ); // map will render

var ol_wms = new OpenLayers.Layer.WMS(
    "OpenLayers WMS",
    "http://vmap0.tiles.osgeo.org/wms/vmap0",
    {layers: "basic"}
);

var dm_wms = new OpenLayers.Layer.WMS(
    "Canadian Data",
    "http://www2.dmsolutions.ca/cgi-bin/mswms_gmap",
    {
        layers: "bathymetry,land_fn,park,drain_fn,drainage," +
                "prov_bound,fedlimit,rail,road,popplace",
        transparent: "true",
        format: "image/png"
    },
    {isBaseLayer: false, visibility: false}
);

map.addLayers([ol_wms, dm_wms]);
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.zoomToMaxExtent();