Book Image

OpenLayers 3: Beginner's Guide

By : Thomas Gratier, Paul Spencer, Erik Hazzard
Book Image

OpenLayers 3: Beginner's Guide

By: Thomas Gratier, Paul Spencer, Erik Hazzard

Overview of this book

<p>This book is a practical, hands-on guide that provides you with all the information you need to get started with mapping using the OpenLayers 3 library.</p> <p>The book starts off by showing you how to create a simple map. Through the course of the book, we will review each component needed to make a map in OpenLayers 3, and you will end up with a full-fledged web map application. You will learn the key role of each OpenLayers 3 component in making a map, and important mapping principles such as projections and layers. You will create your own data files and connect to backend servers for mapping. A key part of this book will also be dedicated to building a mapping application for mobile devices and its specific components.</p>
Table of Contents (22 chapters)
OpenLayers 3 Beginner's Guide
Credits
About the Authors
About the Reviewers
www.PacktPub.com
Preface
Index

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: 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,...