To illustrate the simplest use case for ol.Overlay
, let's perform the following steps:
Copy the HTML model
2360_08_01_simple_select.html
, we always used in the chapter, in a new file2360_08_05_simple_overlay.html
. You can also check the code at the Packt code book URL.Add into
assets/css/samples.css
this code:#popup { background: red; }
In the HTML code, replace
<div id="map" class="map"></div>
with<div id="map" class="map">
, as follows:<div id="popup"><b>OpenLayers 3 Code Sprint</b> <i>Humanities A3</i></div> </div>
Replace all the JavaScript part with the following code:
var popup = new ol.Overlay({ element: document.getElementById('popup') }); var osmLayer = new ol.layer.Tile({ source: new ol.source.OSM() }); var ol3_sprint_location = ol.proj.transform([-1.20472, 52.93646], 'EPSG:4326', 'EPSG:3857'); var view = new ol.View({ center: ol3_sprint_location,...