ol.layer.Vector

by ahocevar

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.19.1/ol.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.19.1/ol.css">
<div id="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 {
  width: 512px;
  height: 256px;
}

.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 map = new ol.Map({
  target: 'map',
  layers: [
    new ol.layer.Tile({
      source: new ol.source.OSM()
    }),
    new ol.layer.Vector({
      title: 'Earthquakes',
      source: new ol.source.Vector({
        format: new ol.format.GeoJSON(),
        url: 'https://rawgit.com/openlayers/workshop/v3.16.0/src/en/data/layers/7day-M2.5.json'
      }),
      style: new ol.style.Style({
        image: new ol.style.Icon({
          src: 'https://rawgit.com/mapbox/maki/master/icons/triangle-15.svg'
        })
      })
    })
  ],
  view: new ol.View({
    center: [0, 0],
    zoom: 1
  })
});

var container = document.getElementById('popup');
var content = document.getElementById('popup-content');
var closer = document.getElementById('popup-closer');
var overlay = new ol.Overlay({
  element: container,
  autoPan: true,
  autoPanAnimation: {
    duration: 250
  }
});
map.addOverlay(overlay);

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

map.on('singleclick', function(e) {
  debugger
  var feature = map.forEachFeatureAtPixel(e.pixel, function(f) {
    return f;
  });
  if (feature) {
    content.innerHTML = feature.get('summary');
    overlay.setPosition(e.coordinate);
  } else {
    closePopup();
  }
});