JSFiddle - React, Tailwind, and code Playground

by Nick Karnik

HTML

<script src="https://dl.dropboxusercontent.com/u/28584686/require-2.16-min.js"></script>
<script src="https://dl.dropboxusercontent.com/u/28584686/ol-debug-3.2.0.js"></script>
<!--  <script type='text/javascript' src="https://dl.dropboxusercontent.com/u/28584686/require-2.16-min.js"></script>
 <script type='text/javascript' src="https://dl.dropboxusercontent.com/u/28584686/ol-debug-3.2.0.js"></script>
 -->    
  <button onclick="load()">LOAD</button>
<div id=map></div>

CSS

#map {
    width: 800px;
    height:800px;
}
.rotate-north {
    top: 65px;
    left: .5em;
}
.ol-touch .rotate-north {
    top: 80px;
}
.presentationlabel {
    //width: 400px;
    //height: 400px;
    //background-color:red;
    top: 125px;
    left: .5em;
}

JavaScript

function load() {
//
 // Create map, giving it a rotate to north control.
 //


 var map = new ol.Map({
     controls: ol.control.defaults({
         attributionOptions: /** @type {olx.control.AttributionOptions} */
         ({
             collapsible: false
         })
     }),
     //.extend([new app.RotateNorthControl()]),
     layers: [
     new ol.layer.Tile({
         source: new ol.source.OSM()
     })],
     renderer: "canvas",
     target: 'map',
     view: new ol.View({
         center: [0, 0],
         zoom: 2,
         //rotation: 1
     })
 });

var v = new ol.source.Vector();
}