JSFiddle - React, Tailwind, and code Playground

by oterral

HTML

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.4.0/ol.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.4.0/ol.js"></script>
 <div class="row-fluid">
   <div class="span12">
     <div id="map" class="map"></div>

     <input type="checkbox">Add/remove feature</input>
   </div>
 </div>

JavaScript

var polyCoords = [];
var coords = "95.61,38.60 95.22,37.98 95.60,37.66 94.97,37.65".split(' ');

for (var i in coords) {
  var c = coords[i].split(',');
  polyCoords.push(ol.proj.transform([parseFloat(c[0]), parseFloat(c[1])], 'EPSG:4326', 'EPSG:3857'));
}

var feature = new ol.Feature({
geometry: new ol.geom.Polygon([polyCoords])
})

/** Not needed if you use the FeatureOverlay
var layer = new ol.layer.Vector({
source: new ol.source.Vector({
    features: [feature]
    })
});
*/

var map = new ol.Map({
  target: 'map',
  layers: [
    new ol.layer.Tile({
      source: new ol.source.MapQuest({layer: 'sat'})
    })
/** Not needed if you use the FeatureOverlay,
    layer            
*/
  ],
  view: new ol.View({
    center: ol.proj.transform([95.22, 37.98], 'EPSG:4326', 'EPSG:3857'),
    zoom: 4
  })
});

var featureOverlay = new ol.FeatureOverlay({
    map: map
});
var updateFeat = function(){
    var $this = $(this);

    if($this.is(":checked")){
        featureOverlay.addFeature(feature);
    }else{
        featureOverlay.removeFeature(feature);
    }
};
$("input:checkbox").each(updateFeat).change(updateFeat);