JSFiddle - React, Tailwind, and code Playground

by Nick Karnik

HTML

<script src="http://ol3js.org/en/master/build/ol-whitespace.js"></script>
<script src="http://ol3js.org/en/master/examples/jquery.min.js"></script>
<div id=map class=map></div>

<!-- 
This fiddle is using the example http://ol3js.org/en/master/examples/kml.html and pointing to my KML file here: https://dl.dropboxusercontent.com/u/28584686/kml/EMOD-Madagascar_districts.kml
 -->

JavaScript

var raster = new ol.layer.Tile({
  source: new ol.source.BingMaps({
    imagerySet: 'Aerial',
    key: 'Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3'
  })
});

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

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