5

First time using OpenLayers. I am getting an error "goog is not defined". Here are the steps I performed:

  1. Downloaded and unzipped v3.0.0-gamma.4
  2. It created the following directory structure:

    • apidoc
    • build
    • closure-library
    • css
    • doc
    • examples
    • ol
    • resources
  3. I proceed to create a file called ol3.html and place it in the examples folder shown above. Here is the code of that file:

<!doctype html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="../css/ol.css" type="text/css">
    <style>
      .map {
        height: 400px;
        width: 100%;
      }
    </style>
    <script src="../ol/ol/ol.js" type="text/javascript"></script>
    <title>OpenLayers 3 example</title>
  </head>
  <body>
    <h2>My Map</h2>
    <div id="map" class="map"></div>
    <script type="text/javascript">
      var map = new ol.Map({
        target: 'map',
        layers: [
          new ol.layer.Tile({
            source: new ol.source.MapQuestOpenAerial()
          })
        ],
        view: new ol.View2D({
          center: ol.proj.transform([37.41, 8.82], 'EPSG:4326', 'EPSG:3857'),
          zoom: 4
        })
      });
    </script>
  </body>
</html>
  1. When I load up the page, I get the error "goog is not defined". I can see that it finds the local ol.js file but it give the error "goog is not defined".

  2. If I switch this line:

    <script src="../ol/ol/ol.js" type="text/javascript"></script>

    To this:

    <script src="http://ol3js.org/en/v3.0.0-beta.1/build/ol.js" type="text/javascript"></script>

Then everything is fine and I can see the map. What am I missing?

8

You need to take the ol.js file from the build directory. That means "../build/ol.js".

There is a "ol-debug.js" file, too, which contains a uncompressed version of ol3.

  • Using from file from the build directory fixed the problem. Thanks! – user3657279 Sep 3 '14 at 13:54
4

This phenomenon is caused by the coding style of OpenLayers 3. OL3 is built with Google's Closure Library, which eases the development process, and offers a very good compression rate to the final code (maybe there are some other advantages which I don't know about). Closure has modular goog classes. The library gets rid of them when the final code is compiled and compressed (i.e. built).

Because of this, there are two ways to use OL3:

  • Use the compiled library from the build folder, as @Simon Zyx mentioned (faster, recommended for deployment).
  • Include the appropriate script files from the Closure Library along with the inbuilt code, e.g. <script src="closure-library/closure/goog/base.js"></script> (slower, recommended for development and testing).

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.