JSFiddle - React, Tailwind, and code Playground

by Jean-Philippe Janecek

HTML

<link rel="stylesheet" href="http://ol3js.org/en/master/css/ol.css">
<script src="http://ol3js.org/en/master/build/ol.js"></script>
<script src="http://pamtrak.github.io/mapPower/countries.geojson"></script>
<script src="http://pamtrak.github.io/mapPower/WMSCapabilities.xml"></script>
<script src="http://pamtrak.github.io/mapPower/mappower.js"></script>
<script src="http://spatialreference.org/ref/epsg/4326/proj4js/"></script>
<script src="http://pamtrak.github.io/proj4js-compressed.js"></script>
<body onload="init();">
    <div id="banner"> <a class="brand" href="./"><img src="http://geotribu.net/sites/default/public/public_res/img/logos-icones/logiciels_librairies/mapserver.png" width='5%' />+<img src="http://ol3js.org/en/master/resources/logo.png" width='5%' /></a>

    </div>
    <div id="panel-map">
        <div id="map" class="map">The map</div>
    </div>
    <div id="main">
        <div id="panel-left">
            <div id="row-service">
                <label>Service</label>
                <select id="service" onchange='updateService();' disabled="true">
                    <option>WMTS</option>
                    <option selected="true">WMS</option>
                </select>
                <label class="checkbox" for="world">
                    <input id="world" type="checkbox" checked="false">World</input>
                </label>
                <input class="css_btn_class" type="button" value="Reload" onclick='buildMapFromDiv();' />
            </div>
            <div id="row-params">
                <form>
                    <fieldset>
                        <legend>WMS parameters</legend>
                        <input id="mapUrl" type="text" style='width:400pt' readonly="true" />
                        <label>Layers</label>
                        <select id="layers" onchange='updateLayerOptions();'></select>
                        <label>Styles</label>
                        <select id="styles"></select>
                       ...

CSS

@import url(http://fonts.googleapis.com/css?family=Quattrocento+Sans:400, 400italic, 700);
 body {
    padding-top: 60px;
}
.map {
    height: 400px;
    width: 100%;
    background: url(textured_paper.jpeg) repeat;
}
.ol-attribution {
    max-width: 50%;
}
#tags {
    display: none;
}
body, h1, h2, h3, h4, p, li, td, th {
    font-family: Quattrocento Sans;
}
.navbar-inverse .navbar-inner {
    background: #1F6B75;
}
.navbar-inverse .brand {
    color: white;
    padding: 5px;
}
#banner, #panel-map, #panel-left, #panel-right, #footer {
    padding:1px 0;
}
#banner {
    background-color:#0b4df4;
    text-align:left;
}
#panel-map {
    background-color:#1F2126;
    text-align:center;
    color:#FFFFFF;
}
#main {
    max-with:960px;
    margin:auto;
}
#panel-left, #row-params {
    float:left;
    width:450px;
    background-color:#1F2126;
    color:#FFFFFF;
}
#panel-right {
    margin-left:250px;
    background-color:#1F2126;
    color:#FFFFFF;
}
#footer {
    background-color:#669933;
    text-align:center;
    clear:both;
}
#mapUrl, #layers, #styles, #times, #elevations {
    padding:1px 0;
    text-align:left;
}
.css_btn_class {
    font-size:16px;
    font-family:Arial;
    font-weight:normal;
    -moz-border-radius:8px;
    -webkit-border-radius:8px;
    border-radius:8px;
    border:1px solid #dcdcdc;
    padding:9px 18px;
    margin-left:150px;
    text-decoration:none;
    background:-moz-linear-gradient(center top, #ededed 5%, #dfdfdf 100%);
    background:-ms-linear-gradient(top, #ededed 5%, #dfdfdf 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
    background:-webkit-gradient(linear, left top, left bottom, color-stop(5%, #ededed), color-stop(100%, #dfdfdf));
    background-color:#ededed;
    color:#777777;
    display:inline-block;
    text-shadow:1px 1px 0px #ffffff;
    -webkit-box-shadow:inset 1px 1px 0px 0px #ffffff;
    -moz-box-shadow:inset 1px 1px 0px 0px #ffffff;
   ...

JavaScript

var url = 'http://geo.weather.gc.ca/geomet/?lang=E&service=wms&request=GetCapabilities';
$.getJSON('http://whateverorigin.org/get?url=' + encodeURIComponent(url) + '&callback=?',

function (data) {
    //$("#capabilities").html(data.contents);
    document.getElementById('capabilities').innerHTML = data.contents;
    var editor = CodeMirror.fromTextArea(document.getElementById("capabilities"), {
        mode: "application/xml",
        lineNumbers: true
    });
}); < script src = "http://spatialreference.org/ref/epsg/4326/proj4js/"
type = "text/javascript" / >