JSFiddle - React, Tailwind, and code Playground

by HYEONGJINKIM

HTML

<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.14.1/ol.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.14.1/ol.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<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

.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: 280px;
}

.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

var iconFeature = new ol.Feature({
   geometry: new ol.geom.Point([0, 0]),
   name: 'Null Island',
   population: 4000,
   rainfall: 500
 });

 var iconFeature2 = new ol.Feature({
   geometry: new ol.geom.Point([0, 1000000]),
   name: 'Null Island',
   population: 4000,
   rainfall: 500
 });

 var iconStyle = new ol.style.Style({
   image: new ol.style.Icon( /** @type {olx.style.IconOptions} */ ({
     src: 'http://files.softicons.com/download/toolbar-icons/vista-base-software-icons-2-by-icons-land/png/32x32/Circle_Blue.png'
   }))
 });
 
  var iconStyle2 = new ol.style.Style({
   image: new ol.style.Icon( /** @type {olx.style.IconOptions} */ ({
     src: 'http://files.softicons.com/download/toolbar-icons/vista-base-software-icons-2-by-icons-land/png/32x32/Circle_Red.png'
   }))
 });

 iconFeature.setStyle(iconStyle);
 iconFeature2.setStyle(iconStyle2);

 var vectorSource = new ol.source.Vector({
   features: [iconFeature,iconFeature2]
 });

 var vectorLayer = new ol.layer.Vector({
   source: vectorSource
 });

 var rasterLayer = new ol.layer.Tile({
   source: new ol.source.XYZ({
     url: 'http://a.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png'
   }),
   name: 'Light'
 });

 var container = document.getElementById('popup');
 container.onmousemove = function(e) {
   e.stopPropagation();
 };
 var content = document.getElementById('popup-content');
 var closer = document.getElementById('popup-closer');

 /**
  * Create an overlay to anchor the popup to the map.
  */

 var overlay = new ol.Overlay( /** @type {olx.OverlayOptions} */ ({
   element: container,
   autoPan: true,
   stopEvent: true,
   autoPanAnimation: {
     duration: 250
   }
 }));

 closer.onclick = function() {
   overlay.setPosition(undefined);
   closer.blur();
   return false;
 };


 var map = new ol.Map({
   layers: [rasterLayer, vectorLayer],
   target: document.getElementById('map'),
   overlays: [overlay],
   view: new ol.View({
     center: [0, 0],
     zoom: 3
   })
 });

 // display...