In OpenLayers 2, this was an easy feat. I was able to simply instantiate a LinearRect given the coordinates of my BoundingBox, and then add the LinearRect as a feature to a vector layer I had added to the map. In OpenLayers 3, I can't seem to find any easy way to do this using extents. Say I have the current extent (it is transformed to match OSM, since the back-end for this application serves EPSG:4326):

# Colorado Springs
extent = ol.proj.transformExtent([aoi.west, aoi.south, aoi.east, aoi.north], "EPSG:4326", "EPSG:900913")

I am trying to add this extent to the map using the following code:

lr = new ol.geom.LinearRing([
  [aoi.west, aoi.north],
  [aoi.east, aoi.north],
  [aoi.west, aoi.south],
  [aoi.east, aoi.south]
]).transform("EPSG:4326", "EPSG:900913")

layer = new ol.layer.Vector
  source: new ol.source.Vector()
  style: new ol.style.Style
    fill: new ol.style.Stroke
      color: '#ffcc33'
      width: 2
    stroke: new ol.style.Stroke
      color: '#ffcc33'
      width: 2
    image: new ol.style.Circle
      radius: 7
      fill: new ol.style.Fill
        color: '#ffcc33'
  features: [
    new ol.Feature
      color: '#BADA55'
      where: 'inner'
      geometry: lr


There are no errors thrown – the only problem is that the shape is not displayed on the map (although the base OSM layer is). Checking the maps layers (console.log map.getLayers().getArray()) reveals that the vector layer is making its way into the map.

For reference, the aoi object looks like this:

aoi = { west: -104.8, south: 39.8, east: -104.7, north: 39.9 }

You're passing the features object to the ol.layer.Vector object, but you should pass it to the ol.source.Vector object instead. I don't understand how it does not throw any errors as you at least miss commas between object properties.

  • I moved the features array into the initialization of ol.source.Vector. Still nothing on the map (as far as I can tell), but now I get an assertion error when I traverse the part of the map where the vector should be (it contains no details or stack trace). Also, the reason there are missing commas is because I'm using CoffeeScript. – Steven Petryk Sep 20 '14 at 18:40
  • Can you try with something else than LinearRing? A point will do, just to be sure we're creating the geometry right. A jsfiddle would be useful btw. – Michal Zimmermann Sep 20 '14 at 18:46
  • I tried to make a fiddle, but couldn't find an easy way to include OpenLayers (to ensure my example actually worked)! OpenLayers 3 doesn't seem to be on a CDN yet. However, creating a single ol.geom.Point with the coordinates [aoi.west, aoi.north] worked (after transforming the projection). I tried converting all coordinates in the LinearRing to transformed Points, but I'm getting assertion errors again. It seems as though I need to pass in Coordinates, but I'm not sure how to create a list of coordinates. – Steven Petryk Sep 20 '14 at 18:56
  • Where does aoi variable come from? – Michal Zimmermann Sep 20 '14 at 18:58
  • I showed its definition in my original post. It's a bounding box representing Colorado Springs – coordinates are in EPSG:4326. – Steven Petryk Sep 20 '14 at 19:01

In order to render this as a polygon, you need to enclose the coordinates in an additional pair of square brackets:

lr = new ol.geom.Polygon([[
  [aoi.west, aoi.north],
  [aoi.east, aoi.north],
  [aoi.west, aoi.south],
  [aoi.east, aoi.south]
]]).transform("EPSG:4326", "EPSG:900913")

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.