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'
});

////////////////////// LOAD KML AS STRING ////////////////////////////////
////////////////////// This is a region in Southern Zambia  ////////////////////////////////

var kml = '<?xml version="1.0" encoding="UTF-8"?><kml xmlns="http://earth.google.com/kml/2.0" xmlns:atom="http://www.w3.org/2005/Atom">    <Document>        <name>2012 Earthquakes, Magnitude 5</name>        <atom:author>            <atom:name>U.S. Geological Survey</atom:name>        </atom:author>        <atom:link href="http://earthquake.usgs.gov"/>        <Folder>            <name>Magnitude 5</name>            <Placemark id="2012 Jan 15 13:40:16.40 UTC">                <name>M 5.9 - 2012 Jan 15, SOUTH SHETLAND ISLANDS</name>                <magnitude>5.9</magnitude>                <Point>                    <coordinates>-56.072,-60.975,0</coordinates>                </Point>            </Placemark>            <Placemark id="2012 Jan 19 06:48:48.75 UTC">                <name>M 5.9 - 2012 Jan 19, OFF W. COAST OF S. ISLAND, N.Z.</name>                <magnitude>5.9</magnitude>                <Point>                    <coordinates>165.778,-46.686,0</coordinates>                </Point>            </Placemark>            <Placemark id="2012 Jan 28 17:42:51.72 UTC">                <name>M 5.9 - 2012 Jan 28, KERMADEC ISLANDS, NEW ZEALAND</name>                <magnitude>5.9</magnitude>                <Point>                   ...