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 – overlaying information

In the previous example, we added an overlay but we didn't really investigate how it behaves. Let's do something a bit more interesting with overlays to illustrate what they do. In this example, we'll build an OpenLayers application that displays the latitude and longitude of the mouse position in an overlay when you click on the map:

  1. Create a new file called overlay.html in the sandbox directory. Add the standard boilerplate content to get started:
    <!doctype html> <html> <head> <title>OpenLayers Overlays</title> <link rel="stylesheet" href="../assets/ol3/css/ol.css" type="text/css" /> <link rel="stylesheet" href="../assets/css/samples.css" type="text/css" /> </head> <body> <div id="map" class="map"></div> ...

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