JSFiddle - React, Tailwind, and code Playground

by ahocevar

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="//openlayers.org/en/v3.11.2/build/ol.js"></script>
<link rel="stylesheet" href="//openlayers.org/en/v3.11.2/css/ol.css">
<div id="map" class="map"></div>

CSS

.map {
  background: #f8f4f0;
}

JavaScript

var map = new ol.Map({
  layers: [
    new ol.layer.VectorTile({
      source: new ol.source.VectorTile({
        format: new ol.format.MVT(),
        tileGrid: ol.tilegrid.createXYZ(),
        url: 'https://s3.amazonaws.com/gwc.maps.opengeo.org//LayerInfoImpl--49a6272c%3A14fb2eb0af7%3A-7ffd/EPSG%3A900913/pbf/default/{z}/{x}/{-y}.mapbox-vectortile'
      })
    })
  ],
  target: 'map',
  view: new ol.View({
    center: ol.proj.fromLonLat([-73.70, 40.74]),
    zoom: 11
  })
});