CODEWITHSUNDEEP
openlayers-3
NoRyb
NoRyb

Reputation: 1544

ol.style.Circle with ol.layer.Vector throws error

I draw features on a map (WKT POINTs). Now I would like to give those points a radius. Before I even add Features and the layer to the map I do the following:

var src = new ol.source.Vector();
var layer = new ol.layer.Vector({
    source: src,
    style: new ol.style.Circle({
        radius: 30
    })
});

This throws the following error:

AssertionError: Assertion failed: obj geometry must be an ol.style.Style instance
    at goog.asserts.DEFAULT_ERROR_HANDLER (http://localhost:33464/app/lib/openLayers/ol-debug.js:4330:52)
    at goog.asserts.doAssertFailure_ (http://localhost:33464/app/lib/openLayers/ol-debug.js:4365:3)
    at goog.asserts.assertInstanceof (http://localhost:33464/app/lib/openLayers/ol-debug.js:4575:5)
    at ol.style.createStyleFunction (http://localhost:33464/app/lib/openLayers/ol-debug.js:56402:7)
    at ol.layer.Vector.prototype.setStyle (http://localhost:33464/app/lib/openLayers/ol-debug.js:58228:3)
    at ol.layer.Vector (http://localhost:33464/app/lib/openLayers/ol-debug.js:58115:3)

If instead I add the same style to the "new ol.layer.Tile" I'm using to display the OpenStreetMap (ol.source.OSM) in the background everything works perfect:

map = new ol.Map({
    target: 'map',
    layers: [
      new ol.layer.Tile({
        source: new ol.source.OSM(),
        style: new ol.style.Circle({
            radius: 30
        })
      })
    ]
});

I don't really understand that. I guess it has something to do with ol.style.Circle extending ol.style.Image (which doesn't sound like something for a vector layer - rather the raster layer "Tile"). But if I add the style to the Tile-Layer, why are the features on the vector-Layer rendering with this style?

My questions:

  1. What is the correct way of doing this?

  2. Is there a "style-Inheritance" going on?

Upvotes: 0

Views: 4531

Answers (1)

Alexandre Dubé
Alexandre Dubé

Reputation: 2829

style is not a valid option of the ol.layer.Tile object, thus it is simply ignored. See its documentation: http://openlayers.org/en/v3.10.1/apidoc/ol.layer.Tile.html

The style definition defined in the ol.layer.Vector has to be either of the following:

  • a ol.style.Style object
  • an array of ol.style.Style objects
  • a style function, i.e. ol.style.StyleFunction.

So, in order for your example to work, you could define a style that looks like this:

var src = new ol.source.Vector();
var layer = new ol.layer.Vector({
    source: src,
    style: new ol.style.Style({
        image: new ol.style.Circle({
            radius: 30,
            fill: new ol.style.Fill({color: 'red'})
        })
    })
});

This example demonstrates custom style: http://openlayers.org/en/v3.10.1/examples/custom-interactions.html

See also the API documentation: http://openlayers.org/en/v3.10.1/apidoc/ol.layer.Vector.html

Upvotes: 2

Related Questions