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 walk through creating a simple map from the beginning. Create a new file in your text editor to get started. To make it easy, save this file in the sandbox folder. Remember that all the samples are set up to use the version of OpenLayers we've provided in the assets folder:

  1. Start with the HTML code needed to set up the page:
    <!doctype html>
    <html>
      <head>
        <title> Map Examples </title>
        <link rel="stylesheet" href="../assets/ol3/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/ol.js">
    </script>

    We are just setting up a standard HTML 5 web page and including our stylesheets and the OpenLayers ...

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