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 – creating a map

Let's create a new OpenLayers application and identify the components as we go:

  1. First, create a new file called components.html in the sandbox directory and put in the standard HTML structure for our applications as follows:
    <!doctype html>
    <html>
      <head>
        <title>OpenLayers Components</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>
  2. Now, we can add our code inside the second, empty script tag. First, we'll create a layer to display our map. The layer will be added to the map's layers ...

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