JSFiddle - React, Tailwind, and code Playground

by michelejs

HTML

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="http://openlayers.org/en/master/css/ol.css">
<script src="http://openlayers.org/en/master/build/ol-debug.js"></script>
<div class="row-fluid">
		    <div class="span12">
		        <div id="map" class="map"></div>
		        <button id="draw">Start drawing</button>
		        <button id="nodraw">Stop drawing</button>
		        <button id="check">Is in?</button>
            <button id="getWKTCode">Get WKT Polygon Code</button>
		        
		    </div>		        

		</div>
		<br><br>
		<div class="row">
			<div style="border-radius: 25px;border: 2px solid #73AD21;border: 2px solid #73AD21;" class="col-md-6">
		       	Coordinate:
		       	<div id="coordinate"></div>
			</div>
		    <div style="border-radius: 25px;border: 2px solid #73AD21;" class="col-md-6">
		    	POI:
		        <p>Firenze Santa Maria Novella: [11.2490443, 43.774704]</p>
		    </div>
        
        <div id="isin"style="border-radius: 25px;border: 2px solid #73AD21;border: 2px solid #73AD21;" class="col-md-6"></div>
        
        <div id="getAsWKT"style="border-radius: 25px;border: 2px solid #73AD21;border: 2px solid #73AD21;" class="col-md-6">WKT Code Here</div>
		</div>

				<div style="display: none;">
				  <!-- Clickable label for SMN  -->
				  <a class="overlay" id="smn" target="_blank" href="http://en.wikipedia.org/wiki/">SMN</a>
				  <div id="marker" title="Marker"></div>
				  <!-- Popup -->
				  <div id="popup" title="Welcome to ol3"></div>
				</div>

CSS

button#draw {
			  width: 100px;
			  background: green;
			  color: white;
			  height: 100px;
			}
			button#nodraw {
			  width: 100px;
			  background: red;
			  color: white;
			  height: 100px;
			}
      
      button#getWKTCode {
			  width: 100px;
			  background: black;
			  color: white;
			  height: 100px;
			}
      
			button#check {
			  width: 100px;
			  background: blue;
			  color: white;
			  height: 100px;
			}
			button#NoDraw {
			  width: 100px;
			  background: red;
			  color: white;
			  height: 100px;
			}
			.map {
		        height: 400px;
		        width: 100%;
		    }

		    #marker {
			  width: 20px;
			  height: 20px;
			  border: 1px solid #088;
			  border-radius: 10px;
			  background-color: #0FF;
			  opacity: 0.5;
			}
			#smn {
			  text-decoration: none;
			  color: white;
			  font-size: 11pt;
			  font-weight: bold;
			  text-shadow: black 0.1em 0.1em 0.2em;
			}
			.popover-content {
			  min-width: 180px;
			}

JavaScript

var geometryFunction, source, map, draw;
	var coordinates = [];
  
		var init = function () {
		    var raster = new ol.layer.Tile({
		        source: new ol.source.MapQuest({
		            layer: 'osm'
		        })
		    });
		    source = new ol.source.Vector({
		        wrapX: false
		    });
		    var vector = new ol.layer.Vector({
		        source: source,
		        style: new ol.style.Style({
		            fill: new ol.style.Fill({
		                color: 'rgba(255, 255, 255, 0.2)'
		            }),
		            stroke: new ol.style.Stroke({
		                color: '#ffcc33',
		                width: 2
		            }),
		            image: new ol.style.Circle({
		                radius: 7,
		                fill: new ol.style.Fill({
		                    color: '#ffcc33'
		                })
		            })
		        })
		    });
		    map = new ol.Map({
		        target: 'map',
		        layers: [raster,vector],
		        view: new ol.View({
		          center: ol.proj.fromLonLat([11.249367, 43.774298]),
		          zoom: 15
		        })
		    });

		    // SMN marker
		    var pos = ol.proj.fromLonLat([11.2490443, 43.774704]);
			var marker = new ol.Overlay({
			  position: pos,
			  positioning: 'center-center',
			  element: document.getElementById('marker'),
			  stopEvent: false
			});
			map.addOverlay(marker);
		
			// Vienna label
			var smn = new ol.Overlay({
			  position: pos,
			  element: document.getElementById('smn')
			});

			map.addOverlay(smn);

			// Popup showing the position the user clicked
			var popup = new ol.Overlay({
			  element: document.getElementById('popup')
			});
			map.addOverlay(popup);

			/*map.on('click', function(evt) {
			  var element = popup.getElement();
			  var coordinate = evt.coordinate;
			  var hdms = ol.coordinate.toStringHDMS(ol.proj.transform(
			      coordinate, 'EPSG:3857', 'EPSG:4326'));

			  $(element).popover('destroy');
			  popup.setPosition(coordinate);
			  // the keys are quoted to...