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="//ahocevar.net/ol3/vectortile/build/ol.js"></script>
<link rel="stylesheet" href="//ahocevar.net/ol3/vectortile/css/ol.css">
<div class="row-fluid">
  <div class="span12">
    <div id="map" class="map"></div>
  </div>
</div>

CSS

.map {
  background: #f8f4f0;
}

JavaScript

var url = 'http://192.168.126.27/cgi-bin/tilestache.py/parcely-mercator/';

var extent = ol.proj.get('EPSG:3857').getExtent();
var tileGrid = ol.tilegrid.createXYZ({maxZoom: 19});
map = new ol.Map({
  layers: [
    new ol.layer.VectorTile({
      source: new ol.source.VectorTile({
        rightHandedPolygons: true,
        format: new ol.format.TopoJSON(),
        tileGrid: tileGrid,
        tileUrlFunction: function(tileCoord) {
          return url + tileCoord[0] + '/' + tileCoord[1] + '/' +
              (-tileCoord[2] - 1) + '.topojson';
        }
      })
    })
  ],
  target: 'map',
  view: new ol.View({
    center: ol.proj.fromLonLat([14.42, 50.18]),
    zoom: 11
  })
});