workshop ol popup

by Francesco Boccacci

HTML

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/css/ol.css">
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/build/ol.js"></script>
<body>
  <div id="map" class="map"></div>
  <div id="popup" class="popup">
    <h3>
      Firenze
    </h3>
    <div>
      (FI)
    </div>
  </div>
</body>

CSS

html, body {
  height: 100%;
  width: 100%;
  margin: 0;
}

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

.popup {
  padding: 5px;
  border: 1px solid grey;
  border-radius: 5px;
  color: red;
  background: white;
}

JavaScript

const firenze = [1253220.67184, 5430658.10783];

const map = new ol.Map({
      layers: [
        new ol.layer.Tile({
          source: new ol.source.OSM()
        })
      ],
      target: 'map',
      view: new ol.View({
        center: firenze,
        zoom: 13
      })
});

const layer = new ol.layer.Vector({
	source: new ol.source.Vector({
		features: [new ol.Feature({
    	geometry: new ol.geom.Point(firenze)
        })
    ]
  })
});
map.addLayer(layer);

const popup = new ol.Overlay({
	element: document.getElementById('popup'),
  offset: [10, 0],
  positioning: 'center-left'
});

map.addOverlay(popup);
popup.setPosition(firenze);