JSFiddle - React, Tailwind, and code Playground

by davidhequet

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>
<link rel="stylesheet" href="//openlayers.org/en/master/css/ol.css">
<script src="//openlayers.org/en/master/build/ol.js"></script>
<div id="map" class="map"></div>

CSS

html, body, #map {
    margin: 0;
    height: 100%;
    width: 100%
}

JavaScript

var projection = ol.proj.get('EPSG:4326');
var urlTemplate = 'http://data.mapguide.com/mapguide/mapagent/mapagent.fcgi?USERNAME=Anonymous&mapdefinition=Library%3A%2F%2FSamples%2FSheboygan%2FMapsTiled%2FSheboygan.MapDefinition&basemaplayergroupname=Base%20Layer%20Group&operation=GETTILEIMAGE&version=1.2.0&tilecol={x}&tilerow={y}&scaleindex={z}';
var metersPerUnit = 111319.4908;
var dpi = 96;
var tileSize = [300, 300]
var extent = [-87.764987,43.691398,-87.695522,43.797520];
var scales = [100000,51794.74679,26826.95795,13894.95494,7196.85673,3727.59372,1930.69773,1000];
var zOrigin = scales.length - 1;
var inPerUnit = 39.37 * metersPerUnit;
var len = scales.length;
var resolutions = new Array(len);
for (var i = 0; i < len; ++i) {
  resolutions[i] = scales[i] / inPerUnit / dpi;
} 

var tileGrid = new ol.tilegrid.TileGrid({
  origin: ol.extent.getTopLeft(extent),
  resolutions: resolutions,
  tileSize: tileSize
});

var map = new ol.Map({
  target: 'map',
  layers: [
    new ol.layer.Tile({
      source: new ol.source.TileImage({
        tileGrid: tileGrid,
        projection: projection,
        tileUrlFunction: function(tileCoord) {
          return urlTemplate
              .replace('{z}', (zOrigin - tileCoord[0]).toString())
              .replace('{x}', tileCoord[1].toString())
              .replace('{y}', (-tileCoord[2] - 1).toString());
        },
        wrapX: false
      })
    })
  ],
  view: new ol.View({
    projection: projection,
    resolutions: tileGrid.getResolutions()
  })
});
map.getView().fitExtent(extent, map.getSize());