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

window.olMap = new ol.Map({
    layers: [new ol.layer.Tile({
        source: new ol.source.BingMaps({
            key: 'AqTGBsziZHIJYYxgivLBf0hVdrAk9mWO5cQcb8Yux8sW5M8c8opEC2lZqKR1ZZXf',
            imagerySet: 'Road'
        })
    })],
    view: new ol.View2D({
        zoom: 1,
        // 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:4326',
    url: 'https://dl.dropboxusercontent.com/u/28584686/kml/2012_Earthquakes_Mag5.kml'
    //url: 'https://dl.dropboxusercontent.com/u/28584686/kml/zambia.kml'
});

//debugger;

var vectorLayer = new ol.layer.Vector({
    source: kmlSource,

    ////////////////////// CREATE Style ////////////////////////////////

    style: function (feature, resolution) {
        debugger;
        return [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
            })
        })];
    }

});

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



// Add vectory layer to map
olMap.addLayer(vectorLayer);

// getAllFeatures() is empty (if I add features above from the readFeatures call, it will return those, but it still won't render)

//console.log(olMap.getLayers().getAt(1).getSource().getAllFeatures());