1

How can I apply an array of styles to a WebGL Points layer in OpenLayers? For example, if I use the following code to apply a circle and an icon, only the icon is visible - so is what I want to do even possible?

https://jsfiddle.net/Sidders/cbzrLjqd/

Example code:

const webGLstyle = {
  'circle-stroke-width': 2,
  'circle-stroke-color': '#333333',
  'circle-radius': 18,
  'circle-fill-color': "#FE6000",
  'circle-rotate-with-view': false,
  'circle-displacement': [0, 0],
  'circle-opacity': 1,
  'icon-src': 'https://openlayers.org/en/latest/examples/data/icon.png',
  'icon-width': 18,
  'icon-height': 28,
  'icon-color': 'lightyellow',
  'icon-rotate-with-view': false,
  'icon-displacement': [0, 9],
}

const webGLSource = new ol.source.Vector({
  url: 'https://openlayers.org/en/latest/examples/data/geojson/world-cities.geojson',
  format: new ol.format.GeoJSON(),
  wrapX: true,
});

const myWebGLLayer = new ol.layer.WebGLPoints({
  source: webGLSource,
  style: webGLstyle
});

1 Answer 1

1

If it was possible you would need a flat style array, which does work with a standard vector layer

const webGLstyle = [
  {
    'circle-stroke-width': 2,
    'circle-stroke-color': '#333333',
    'circle-radius': 18,
    'circle-fill-color': "#FE6000",
    'circle-rotate-with-view': false,
    'circle-displacement': [0, 0],
    'circle-opacity': 1,
  },
  {
    'icon-src': 'https://openlayers.org/en/latest/examples/data/icon.png',
    'icon-width': 18,
    'icon-height': 28,
    'icon-color': 'lightyellow',
    'icon-rotate-with-view': false,
    'icon-displacement': [0, 9],
  },
];

const webGLSource = new ol.source.Vector({
  url: 'https://openlayers.org/en/latest/examples/data/geojson/world-cities.geojson',
  format: new ol.format.GeoJSON(),
  wrapX: true,
});

const myWebGLLayer = new ol.layer.Vector({
  source: webGLSource,
  style: webGLstyle
});

I cannot make that work with WebGLPointsLayer, but it will work with a WebGLVector layer https://jsfiddle.net/Lk7udqjp/

4
  • Thanks Mike - yes the style array works fine with non-WebGL layers, but as I'm optimizing a map project, I was keen to utilize WebGL for some of my Vector/Points layers. Unfortunately, as you can see, recreating arrays (icons + shapes) didn't work. I really hope there is a way around it though other than having to use just images.
    – Sidders
    Commented May 9 at 23:50
  • 1
    Quick solution would be to create two WebGL layers, one for each of the styles.
    – TomazicM
    Commented May 10 at 6:32
  • 1
    The style array will also work with a WebGL vector layer as in openlayers.org/en/latest/examples/webgl-vector-layer.html
    – Mike
    Commented May 10 at 8:26
  • Ah, sorry Mike! I missed that you made it work with a WebGL Vector Layer - thank you for following up - that's excellent!
    – Sidders
    Commented May 12 at 23:32

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.