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:
Create a new file called
overlay.html
in thesandbox
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> <script src="../assets/ol3/js/ol.js"></script> <script> </script> </body> </html>
Now, add the following code to set...