JSFiddle - React, Tailwind, and code Playground

by Luffydude

HTML

<!DOCTYPE html>
<html>
<head>
	
<link type="text/css" rel="stylesheet" href="app.css" />
<link type="text/css" rel="stylesheet" href="http://dbauszus-webmaps.appspot.com/materialize/css/materialize.min.css"  media="screen,projection"/>
<link type="text/css" rel="stylesheet" href="http://dbauszus-webmaps.appspot.com/stylesheets/main.css" />
<link type="text/css" rel="stylesheet" href="http://dbauszus-webmaps.appspot.com/stylesheets/ol-btn-material.css" />
<link type="text/css" rel="stylesheet" href="http://dbauszus-webmaps.appspot.com/stylesheets/ol-popup.css" />
<link type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.16.0/ol.css" type="text/css">

<script type="text/javascript" src="http://dbauszus-webmaps.appspot.com/jscripts/jQuery.2.1.4.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.16.0/ol.js"></script>

<script type="text/javascript" src="http://dbauszus-webmaps.appspot.com/materialize/js/materialize.min.js"></script>

<title>WFS Editting App</title>
</head>

<body>
	<div id="btnSelect" class="btnMenu btn-floating btn-large waves-effect waves-light teal"><i class="mdi-action-speaker-notes"></i></div>
	<div id="btnEdit" class="btnMenu btn-floating btn-large waves-effect waves-light teal"><i class="mdi-editor-mode-edit"></i></div>
	<div id="btnDrawPoint" class="btnMenu btn-floating btn-large waves-effect waves-light teal"><i class="mdi-maps-place"></i></div>
	<div id="btnDrawLine" class="btnMenu btn-floating btn-large waves-effect waves-light teal"><i class="mdi-social-share"></i></div>
	<div id="btnDrawPoly" class="btnMenu btn-floating btn-large waves-effect waves-light teal"><i class="mdi-device-signal-cellular-null"></i></div>
	<div...

JavaScript

controlMousePos = new ol.control.MousePosition({
	coordinateFormat: ol.coordinate.createStringXY(4),
	});

popup = document.getElementById('popup');
$('#popup-closer').on('click', function() {
	overlayPopup.setPosition(undefined);
	});
overlayPopup = new ol.Overlay({
	element: popup
	});

// format used to parse WFS GetFeature responses
var geojsonFormat = new ol.format.GeoJSON();

var vectorSource = new ol.source.Vector({
  loader: function(extent) {
   var url1 =	'http://localhost:8080/geoserver/wfs?service=WFS&' +
        'version=1.1.0&request=GetFeature&typename=BFTchambers:bft&' +
        'outputFormat=text/javascript&format_options=callback:loadFeatures' +
        '&srsname=EPSG:27700&bbox=' + extent.join(',') + ',EPSG:27700';
	
	// use jsonp: false to prevent jQuery from adding the "callback"
    // parameter to the URL
    $.ajax({url: url1, dataType: 'jsonp', jsonp: false});
  },
  strategy: ol.loadingstrategy.tile(ol.tilegrid.createXYZ({
    maxZoom: 20
  }))
});


/**
 * JSONP WFS callback function.
 * @param {Object} response The response object.
 */
window.loadFeatures = function(response) {
console.log("here");
  vectorSource.addFeatures(geojsonFormat.readFeatures(response));
};

selectPointerMove = new ol.interaction.Select({
	condition: ol.events.condition.pointerMove
	});

var layerVector = new ol.layer.Vector({
  source: vectorSource,
  style: new ol.style.Style({
    stroke: new ol.style.Stroke({
      color: 'rgba(0, 0, 255, 1.0)',
      width: 2
    })
  })
});

var raster = new ol.layer.Tile({
  source: new ol.source.BingMaps({
    imagerySet: 'Road',
    key: 'AsBPC3VYKwiu_XhkUWVqfNQGC6upeSXaFwwVyN9SdMEu8znuAtNkymIX9xzRTfs6'
  })
});

var map = new ol.Map({
  layers: [raster, layerVector],
  target: document.getElementById('map'),
  view: new ol.View({
	center: [-12000,6711790],	
    zoom: 12
  })
});
map.addInteraction(selectPointerMove);

var interaction;
var select = new ol.interaction.Select({
	style: new ol.style.Style({
		stroke: new...