JSFiddle - React, Tailwind, and code Playground

by Nick Karnik

HTML

<script src="http://ol3js.org/en/master/build/ol-whitespace.js"></script>
<link rel="stylesheet" href="http://ol3js.org/en/master/css/ol.css">
<div id="map" class="map"><div id="info"></div></div>

CSS

#map {
        position: relative;
      }
      #info {
        position: absolute;
        height: 1px;
        width: 1px;
        z-index: 100;
      }

JavaScript

var styleFunction = function(feature, resolution) {
    console.log("inside style");
  
    /*var offset = 0;
  var name = feature.get('name'); // e.g. GMT -08:30
//  var match = name.match(/([\-+]\d{2}):(\d{2})$/);
  //if (match) {
    //var hours = parseInt(match[1], 10);
    //var minutes = parseInt(match[2], 10);
    //offset = 60 * hours + minutes;
 // }
  //var date = new Date();
  var local = new Date(date.getTime() +
      (date.getTimezoneOffset() + offset) * 60000);
  // offset from local noon (in hours)
  var delta = Math.abs(12 - local.getHours() + (local.getMinutes() / 60));
  if (delta > 12) {
    delta = 24 - delta;
  }
  var opacity = 0.75 * (1 - delta / 12);
  */
    
    return [new ol.style.Style({
    fill: new ol.style.Fill({
      color: [0xff, 0xff, 0x33, 1]
    }),
    stroke: new ol.style.Stroke({
      color: '#ffffff'
    })
  })];
};

var vector = new ol.layer.Vector({
  source: new ol.source.KML({
    projection: 'EPSG:3857',
//url:'https://dl.dropboxusercontent.com/u/28584686/kml/timezones.kml
      url:'https://dl.dropboxusercontent.com/u/28584686/kml/zambia2.kml'
  }),
  style: styleFunction
});

var raster = new ol.layer.Tile({
  source: new ol.source.Stamen({
    layer: 'toner'
  })
});

var map = new ol.Map({
  layers: [raster, vector],
  renderer: 'canvas',
  target: 'map',
  view: new ol.View2D({
    center: [0, 0],
    zoom: 2
  })
});