1

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
  ]

map.addLayer(layer)

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 }

2 Answers 2

2

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.

9
  • 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. Commented Sep 20, 2014 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. Commented Sep 20, 2014 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. Commented Sep 20, 2014 at 18:56
  • Where does aoi variable come from? Commented Sep 20, 2014 at 18:58
  • I showed its definition in my original post. It's a bounding box representing Colorado Springs – coordinates are in EPSG:4326. Commented Sep 20, 2014 at 19:01
0

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")
0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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