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 vector layer

We'll begin by creating a basic vector layer. Start a new page using the sandbox template. We'll use some existing vector data (found in the assets/data folder of the sample code that comes with this book) that contains polygons outlining countries of the world and display it in a map:

  1. Add the following code to the <script> tag to create our vector layer:
    var vectorSource = new ol.source.GeoJSON({
      projection: 'EPSG:3857',
      url: '../assets/data/countries.geojson'
    });
    var vectorLayer = new ol.layer.vector({
      source: vectorSource
    });
  2. Next, create a view object:
    var center = ol.proj.transform([0, 0], 'EPSG:4326', 'EPSG:3857');
    var view = new ol.View ({
      center: center,
      zoom: 1,
    });
  3. Now, create a map variable and add ...

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