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 – geometries in action

The last example only used one linear ring for the polygon. Let's use the Web Inspector's console to create a polygon and then add a linear ring to see what happens. Open the vector_template.html file in your browser and then open the Web Inspector's Console. We'll be typing the commands into the console directly and observing the result on the map.

  1. First, create a polygon using the preceding example:
    var polygon = new ol.geom.Polygon([ [ [-20,-20],[-20,20],[20,20],[20,-20],[-20,-20] ] ]);
  2. We'll need to reproject the coordinates into our view's projection:
    polygon.transform('EPSG:4326', 'EPSG:3857');
  3. Now, we'll need a source and a layer:
    var source = new ol.source.vector({ features: [new ol.Feature(polygon)], projection: ...

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