O'Reilly logo

OpenLayers 3 : Beginner's Guide by Erik Hazzard, Paul Spencer, Thomas Gratier

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Time for action – introducing ol.Overlay with a static example

To illustrate the simplest use case for ol.Overlay, let's perform the following steps:

  1. Copy the HTML model 2360_08_01_simple_select.html, we always used in the chapter, in a new file 2360_08_05_simple_overlay.html. You can also check the code at the Packt code book URL.
  2. Add into assets/css/samples.css this code:
    #popup {
      background: red;
    }
  3. 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>
  4. 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: ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required