D3 Examples - Vanilla JS fork of ol3-ext GeoBookmark http://bl.ocks.org/ThomasG77/77bee632812a3441a72eb534603930a6 (original version at http://viglino.github.io/ol3-ext/examples/map.control.geobookmark.html) due to jQuery dependency

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
  <head>
    <meta charset=utf-8>
    <meta name=description content="">
    <meta name=viewport content="width=device-width, initial-scale=1">
    <title>Simple OpenStreetMap Map</title>
​
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestanimationframe,element.prototype.classlist,url"></script>
    <script src="https://openlayers.org/en/v4.4.1/build/ol.js" type="text/javascript"></script>
    <link rel="stylesheet" href="https://openlayers.org/en/v4.4.1/css/ol.css">
 
    <!-- Vanilla fork of ol3-ext GeoBookmark https://viglino.github.io/ol3-ext/examples/map.control.geobookmark.html -->
    <script src="geo-bookmarks.js"></script>
    <link rel="stylesheet" href="geobookmarkcontrol.css" type="text/css" />
​
​
    <style type="text/css">
      html, body {
        margin: 0;
        height: 100%;
      }
      #map {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
      }
​
    </style>
  </head>
  <body>
    <div id="map" class="map">
    </div>
    <script>
​
      var map = new ol.Map({
        layers: [
          new ol.layer.Tile({
            source: new ol.source.OSM()
          })
        ],
        target: 'map',
        view: new ol.View({
          center: [0, 0],
          zoom: 2
        })
      });
​
      var bm = new ol.control.GeoBookmark({
        marks: {
          "Paris": {
            pos: ol.proj.fromLonLat([2.351828, 48.856578]),
            zoom: 11,
            permanent: true
          },
          "London": {
            pos: ol.proj.fromLonLat([-0.1275,51.507222]),
            zoom: 11,
            permanent: true
          },
          "Geneve": {
            pos: ol.proj.fromLonLat([6.149985,46.200013]),
            zoom: 13,
            permanent: true
          },
          "Bruxelles": {
            pos: ol.proj.fromLonLat([4.35,50.83]),
            zoom: 12,
            permanent: true
          },
          "Madrid": {
            pos: ol.proj.fromLonLat([-3.683333,40.433333]),
            zoom: 12
          },
          "Roma": {
            pos: ol.proj.fromLonLat([12.48657,41.888732]),
            zoom: 12
          }
        }
      });
      map.addControl(bm);
​
    </script>
  </body>
</html>
​
    