JSFiddle - React, Tailwind, and code Playground

by ahocevar

HTML

<script src="http://54.82.179.174:8080/geoserver/www/ol.js"></script>
<link rel="stylesheet" href="http://54.82.179.174:8080/geoserver/www/ol.css">
<div id="map"></div>

CSS

#map {
  width: 100%;
  height: 100%;
  margin: 0;
  background-color: #A0C2F7;
}

.info {
  position: relative;
  font-family: sans-serif;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 4px;
  color: white;
  padding: 4px 8px;
  opacity: 0.7;
  white-space: nowrap;
}

JavaScript

var capabilitiesUrl = 'http://54.82.179.174:8080/geoserver/gwc/service/wmts?REQUEST=GetCapabilities';
var layerName = 'opengeo:cal_foss4g';

var poly = [
  new ol.style.Style({
    fill: new ol.style.Fill({
      color: 'rgb(237, 233, 217)'
    })
  })
];
var lineStroke = new ol.style.Stroke({
  color: '#fff',
  width: 1
});
var line = [
  new ol.style.Style({
    stroke: lineStroke
  })
];
var outerStroke = new ol.style.Stroke({
  color: '#fff',
  width: 4
});
var innerStroke = new ol.style.Stroke({
  color: '#fff',
  width: 2
});
var complexLine = [
  new ol.style.Style({
    stroke: outerStroke,
    zIndex: 0
  }),
  new ol.style.Style({
    stroke: innerStroke,
    zIndex: 1
  })
];

var layer = new ol.layer.VectorTile({
  style: function(feature, resolution) {
    if (feature.get('layer') == 'land_polygon_fullres_north_americas') {
      return poly;
    } else if (feature.get('layer') == 'roads') {
      var lineStyle, width;
      var type = feature.get('type');
      if (type == 'path' || type == 'footway' || type == 'cycleway' || type == 'construction') {
        lineStyle = line;
        lineStroke.setColor('#fff');
        lineStroke.setWidth(2);
        lineStroke.setLineDash([10, 5]);
        lineStyle[0].setZIndex(1);
      } else if (type == 'service' || type == 'trunk' || type == 'raceway' || type == 'pedestrian' || type == 'steps' || type == 'track' || type == 'corridor' || type == 'living_street') {
        lineStyle = complexLine;
        innerStroke.setColor('#fff');
        innerStroke.setWidth(width = Math.min(8 / resolution, 4));
        outerStroke.setColor('rgb(223, 218, 209)');
        outerStroke.setWidth(width * 1.3);
        complexLine[0].setZIndex(2);
        complexLine[1].setZIndex(3);
      } else if (type == 'residential' || type == 'unclassified' || type == 'tertiary_link') {
        lineStyle = complexLine;
        innerStroke.setColor('#fff');
        innerStroke.setWidth(width = Math.min(15 / resolution, 7));
       ...