Simple Map with GeoJSON markers by ThomasG77

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>Simple Map with GeoJSON markers</title>
    <link rel="stylesheet" href="//openlayers.org/en/v3.18.2/css/ol.css" type="text/css">
    <style>
      html, body {
        height: 100%;
        padding: 0;
        margin: 0;
      }
      #map {
        /* configure the size of the map */
        width: 100%;
        height: 100%;
      }
      .marker-properties {
        border-collapse: collapse;
        margin: 0;
        font-size: 11px;
        border: 1px solid #eee;
      }
      .marker-properties tr:nth-child(2n) th, .marker-properties tr:nth-child(2n) td {
        background-color: #f7f7f7;
      }
      .marker-properties th {
        padding: 5px 10px;
        white-space: nowrap;
        border: 1px solid #eee;
      }
      .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;
      }
    </style>
    <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
    <script src="//cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
    <script src="//openlayers.org/en/v3.18.2/build/ol.js"></script>
  </head>
  <body>
    <div id="map" class="map"></div>
    <div id="popup" class="ol-popup"></div>
    <script>
      var map = new ol.Map({
        layers: [
          new ol.layer.Tile({
            // This illustrates a custom tiles source but for using
            // official OpenStreetMap server new ol.source.OSM()
            // instead of new ol.source.XYZ(...) is enough
            source: new ol.source.XYZ({
              attributions: [
              ol.source.OSM.ATTRIBUTION,
                'Tiles courtesy of ' +
                '<a href="//openstreetmap.org">' +
                'OpenStreetMap' +
                '</a>'
              ],
              url: '//{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png'
            })
          })
        ],
        controls: ol.control.defaults({
          // Set to display OSM attributions on the bottom right control
          attributionOptions:  {
            collapsed: false
          }
        }).extend([
          new ol.control.ScaleLine() // Add scale line to the defaults controls
        ]),
        target: 'map',
        view: new ol.View({
          center: ol.proj.fromLonLat([0, 0]),
          zoom: 2
        })
      });

      // Add vector layer with a feature and a style using an icon
      var vectorLayer = new ol.layer.Vector({
        source: new ol.source.Vector({
          url: '//rawgit.com/openlayers/workshop/master/src/fr/data/layers/7day-M2.5.json',
          format: new ol.format.GeoJSON()
        }),
        style: new ol.style.Style({
          image: new ol.style.Icon({
            anchor: [0.5, 46],
            anchorXUnits: 'fraction',
            anchorYUnits: 'pixels',
            src: '//openlayers.org/en/latest/examples/data/icon.png'
          })
        })
      });

      map.addLayer(vectorLayer);

      // Overlay to manage popup on the top of the map
      var popup = document.getElementById('popup');
      var overLay = new ol.Overlay({
        element: popup
      });

      map.addOverlay(overLay);

      // Manage click on the map to display/hide popup
      map.on('click', function(e) {
        var info = [];
        var coordinate = e.coordinate;
        map.forEachFeatureAtPixel(e.pixel, function (feature) {
          info.push('<table class="marker-properties"><tbody>' + feature.getKeys().slice(1).map((k, i) => {
            return '<tr><th>' + k + '</th>'
            + '<td>' + feature.get(k) + '</td>' + '</tr>';
          }).join('') + '</tbody></table>');
        });
        if (info.length > 0) {
          // console.log(info);
          popup.innerHTML = info.join(',').replace(/<img[^>]*>/g,"");
          popup.style.display = 'inline';
          overLay.setPosition(coordinate);
        } else {
          popup.innerHTML = '&nbsp;';
          popup.style.display = 'none';
        }
      });
    </script>
  </body>
</html>