JSFiddle - React, Tailwind, and code Playground

by Petar Pilipovic

HTML

<script src="https://openlayers.org/en/v3.12.1/build/ol.js"></script>
<link rel="stylesheet" href="https://openlayers.org/en/v3.12.1/css/ol.css">
<div id="map" class="map"></div>
    <div id="popup" class="ol-popup">
      <a href="#" id="popup-closer" class="ol-popup-closer"></a>
      <div id="popup-content"></div>
    </div>

CSS

.map {
    height: 500px;
    width: 100%;
}

.ol-popup {
    position: absolute;
    background-color: white;
    -webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
    filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
    padding: 15px;
    border-radius: 10px;
    border: 1px solid #cccccc;
    bottom: 12px;
    left: -50px;
    min-width: 80px;
}

.ol-popup:after, .ol-popup:before {
    top: 100%;
    border: solid transparent;
    content: "";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.ol-popup:after {
  border-top-color: white;
  border-width: 10px;
  left: 48px;
  margin-left: -10px;
}

.ol-popup:before {
  border-top-color: #cccccc;
  border-width: 11px;
  left: 48px;
  margin-left: -11px;
}

.ol-popup-closer {
  text-decoration: none;
  position: absolute;
  top: 2px;
  right: 8px;
}

.ol-popup-closer:after {
  content: "✖";
}

JavaScript

/* Create the map */

// Elements that make up the popup
var container = document.getElementById('popup');
var content = document.getElementById('popup-content');
var closer = document.getElementById('popup-closer');

// Add a click handler to hide the popup.
// @return {boolean}.
closer.onclick = function() {
  overlay.setPosition(undefined);
  closer.blur();
  return false;
};

// Create an overlay to anchor the popup
// to the map
var overlay = new ol.Overlay({
  element: container,
  autoPan: true,
  autoPanAnimation: {
    duration: 250
  }
});

// setting up coordinates for map to display
var city = ol.proj.transform([-73.920935,40.780229], 'EPSG:4326', 'EPSG:3857'); 

// setting up openlayer3 view
var view = new ol.View({
    center: city,
    zoom: 13
});

// Create the map
var map = new ol.Map({
  layers: [
    new ol.layer.Tile({
      source: new ol.source.OSM({
        crossOrigin: 'anonymous'
      })
    })
  ],
  overlays: [overlay],
  target: 'map',
  view: view
});

// Setup markers
var markers = new ol.layer.Vector({
  source: new ol.source.Vector({
    features: [
      new ol.Feature({
        geometry: new ol.geom.Point(ol.proj.fromLonLat([-73.927870, 40.763633])),
        name: 'Crescent St',
        description: 'Apartment'
      }),
      new ol.Feature({
        geometry: new ol.geom.Point(ol.proj.fromLonLat([-73.917356, 40.763958])),
        name: 'Long Island City',
        description: 'Apartment',
        number: '23-08 21st Ave'
      }),
      new ol.Feature({
        geometry: new ol.geom.Point(ol.proj.fromLonLat([-73.915530, 40.779665])),
        name: 'Long Island City',
        description: 'Apartment',
        number: '23-3 Ditmars Blvd'
      }),
      new ol.Feature({
        geometry: new ol.geom.Point(ol.proj.fromLonLat([-73.916045, 40.779372])),
        name: 'Long Island City',
        description: 'Apartment',
        number: '22-11 23rd St'
      }),
      new ol.Feature({
        geometry: new...