I'm having a hard time to get my vector features showing as i would like to. I have a geojson file with polygon which overlaps. They are generated with OpenTripPlanner and the features are isochrones.

I have made a small test like this which looks as it should but is not transparent: Polygons looks ok but not transparent

If I set opacity to 0.4 i get this:

Not the result i want

Is there a way? - I would like to just request the polygons from the opentripplanner api.


Here is some of the styling I'm doing:

var red = [255, 0, 0, 1]
var green = [0, 255, 0, 1]
var blue = [0, 0, 255, 1]

var interval_Isochrone = {
    300: red,
    600: green,
    900: blue

var defaultStyle = new ol.style.Style({
    fill: new ol.style.Fill({
    color: [255, 0, 0, 1]
    stroke: new ol.style.Stroke({
    color: [255, 255, 255],
    width: 1

var styleCache_Isochrone = {}

function styleIsochrone(feature, resolution){
    var tid = feature.get('time');

    if (!tid || !interval_Isochrone[tid]){
    return [defaultStyle];

    if (!styleCache_Isochrone[tid]){
    styleCache_Isochrone[tid] = new ol.style.Style({
        fill: new ol.style.Fill({
        color: interval_Isochrone[tid]
        stroke: new ol.style.Stroke({
        color: [0, 0, 0],
        width: 1

    return [styleCache_Isochrone[tid]];

geojson = new ol.layer.Vector({
      source: new ol.source.Vector({
        url: 'isochrone.json',
        format: new ol.format.GeoJSON()
      style: styleIsochrone
  • Please provide us with the code of your vector layer or even better a jsfiddle with a simplified version of your problem. Thx – fidelfisch Sep 4 '15 at 11:14

Vittrup, can you please explain what you are trying to achieve? Your colours have been defined as rgba but with opacity set at 1. Your second screenshot seems to show correctly i.e. green/blue changing colour when sat on top of red. If you require each of the layers/shapes to be transparent then adapt your colour values to something like:

var red = [255, 0, 0, 0.5]
var green = [0, 255, 0, 0.5]
var blue = [0, 0, 255, 0.5]
  • I'm trying to not be able to see the red background on both the green and the blue area, if you understand. I was thinking it was possible to render just like image one and just make that transparent. that can be done with wms but what about vector – Vittrup Sep 7 '15 at 10:52
  • If these are separate polygons which overlap each other, my understanding is that openlayers 3 may not be able to natively detect that there is an intersection. If it could then you could adapt your style functions so that that the red object in question could be filled with [0,0,0] or even [255,0,0,0]. This link might provide an answer for how to detect that the areas overlap: gis.stackexchange.com/questions/147829/… – dvmac01 Sep 7 '15 at 11:29

You can do as follow:

style = new ol.style.Style({
   fill: new ol.style.Stroke({
      color: 'transparent'
  • I cannot get the transparent setting to work. i have added some of my code. – Vittrup Sep 7 '15 at 8:27

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.