JSFiddle - React, Tailwind, and code Playground

by Kesavamoorthi Subramanian

HTML

<script src="https://openlayers.org/en/v4.6.5/build/ol.js"></script>
<link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css">
<div class="description-box">
  <div id="map1" class="map" style="width:400px;display:inline-block;border:1px solid #ccc;"></div>
  <p>
    renderMode: 'image'
  </p>
</div>
<div class="description-box">
  <div id="map2" class="map" style="width:400px;display:inline-block;border:1px solid #ccc;"></div>
  <p>
    ImageVector
  </p>
</div>

CSS

* {
  font-family: sans-serif;
}

.description-box {
  padding: 5px;
  margin: 5px;
  border: 1px solid #ccc;
  background-color: #eee;
  width: 402px;
  display: inline-block;
}

.map {
  background: #fff;
}

JavaScript

// style to display only the label attribute
function styleText(feature, resolution) {
  return new ol.style.Style({
    text: new ol.style.Text({
      font: '18px sans-serif',
      exceedLength: true,
      text: feature.get('label'),
      fill: '#000',
      placement: 'point',
      textBaseline: 'middle'
    })
  });
}
// style to display only the stroke
function styleOutline(feature, resolution) {
  return new ol.style.Style({
    stroke: new ol.style.Stroke({
      width: 2,
      color: '#000',
    }),
  });
}
// style used for selection (should be an overlay to be the most flexible)
function styleSelect(feature, resolution) {
  return new ol.style.Style({
    stroke: new ol.style.Stroke({
      width: 2,
      color: '#f00',
    }),
    fill: new ol.style.Fill({
      color: 'rgba(255,0,0,0.25)'
    }),
  });
}

// create source with a simple feature
function getSource() {
  let src = new ol.source.Vector();
  let feature = new ol.Feature({
    geometry: ol.geom.Polygon.fromExtent([-1000, -1000, 1000, 1000])
  });
  feature.set('label', 'Test');
  src.addFeature(feature);
  return src;
}

function showMap() {
  let src = getSource();
  // text layer with new renderMode image
  let layerTextRenderModeImage = new ol.layer.Vector({
    renderMode: 'image',
    source: src,
    style: styleText,
  });
  // text layer with deprecated ImageVector source
  let layerTextImageVector = new ol.layer.Image({
    source: new ol.source.ImageVector({
      source: src,
      style: styleText,
    }),
  });
  // feature outline layer for selection
  let layerOutline = new ol.layer.Vector({
    source: src,
    style: styleOutline
  });
  window.vectorSource = src;
  window.layerTextRmi = layerTextRenderModeImage;
  window.layerTextIv = layerTextImageVector;

  let map1 = new ol.Map({
    layers: [layerTextRenderModeImage, layerOutline],
    target: 'map1',
    view: new ol.View({
      center: [0, 0],
      zoom: 12
    })
  });
  let map2 = new ol.Map({
    layers:...