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>
<!-- I'm able to create a Vector Layer without any issues. However, it won't show up in the map in spite of adding styles. There could be a few issues: 1. Incorrect Styles 2. Vector layer doesn't seem to have features unless I explicitly add them (even then it won't render) 3. Projection issues -->

CSS

body {
         height: 100%;
         width: 100%;
         margin: 0;
         overflow: hidden;
     }
     map {
         top: 0;
     bottom: 0;
     left: 0;
     right: 0;
 }

JavaScript

////////////////////// CREATE MAP ////////////////////////////////

window.olMap = new ol.Map({
    layers: [new ol.layer.Tile({
        source: new ol.source.BingMaps({
            key: 'AqTGBsziZHIJYYxgivLBf0hVdrAk9mWO5cQcb8Yux8sW5M8c8opEC2lZqKR1ZZXf',
            imagerySet: 'Road'
        })
    })],
    view: new ol.View2D({
        zoom: 3,
        // Enabling this doesn't render the map?! It worked in v2.
        //projection: new ol.proj.Projection({code: 'EPSG:4326'}),
        center: [0, 0]
    }),
    renderer: 'canvas',
    target: 'map'
});


////////////////////// CREATE KML SOURCE ////////////////////////////////
var kmlSource = new ol.source.KML({
    //projection: 'EPSG:3857',
    projection: 'EPSG:4326',
    url:'https://dl.dropboxusercontent.com/u/28584686/kml/2012_Earthquakes_Mag5.kml'
});

var styleCache = {};

var vectorLayer = new ol.layer.Vector({
    source: kmlSource,
    style: function (feature, resolution) {
        alert(1);
         var text = resolution < 5000 ? feature.get('name') : '';
    if (!styleCache[text]) {
      styleCache[text] = [new ol.style.Style({
        fill: new ol.style.Fill({
          color: 'rgba(255, 255, 255, 0.6)'
        }),
        stroke: new ol.style.Stroke({
          color: '#319FD3',
          width: 1
        }),
        text: new ol.style.Text({
          font: '12px Calibri,sans-serif',
          text: text,
          fill: new ol.style.Fill({
            color: '#000'
          }),
          stroke: new ol.style.Stroke({
            color: '#fff',
            width: 3
          })
        })
      })];
    }
    return styleCache[text];
        
        
        
        /*console.log('test');    
        return new ol.style.Style({
            fill: new ol.style.Fill({
                //color: 'rgba(255, 255, 255, 0.6)'
                color: 'green'
            }),
            stroke: new ol.style.Stroke({    
                color: 'red',
                width: 1
            })
        });
   ...