CODEWITHSUNDEEP
javascriptopenlayers-3
interwebjill
interwebjill

Reputation: 950

Can't get Openlayers 3 style to be applied

I am knocking my head against the wall wondering why this style is not being applied. The points render in the default style.

                if ((Math.abs(prevCoord[0] - currCoord[0]) < 500) && (Math.abs(prevCoord[1] - currCoord[1]) < 500)) {
                    console.log("tortuous");
                    var tortySource = new ol.source.Vector(); // create an empty source instance

                    var tortyPoint = new ol.geom.Point(currCoord);

                    var tortyFeature = new ol.Feature({ // create a feature with the point geometry
                        geometry: tortyPoint,
                        style: new ol.style.Style({
                            fill: new ol.style.Fill({
                                color: 'rgba(255,0,0,0.5)'
                            })
                        })
                    });

                    tortySource.addFeature(tortyFeature); // add the feature to the source

                    var tortyLayer = new ol.layer.Vector({ // create a layer with that source
                        source: tortySource
                    });

                    map.addLayer(tortyLayer);
                };

EDIT When I tried using setStyle, I did it like this. All of my points disappeared.

                if ((Math.abs(prevCoord[0] - currCoord[0]) < 500) && (Math.abs(prevCoord[1] - currCoord[1]) < 500)) {
                    console.log("tortuous");
                    var tortySource = new ol.source.Vector(); // create an empty source instance

                    var tortyPoint = new ol.geom.Point(currCoord);

                    var tortyFeature = new ol.Feature({ // create a feature with the point geometry
                        geometry: tortyPoint
                    });

                    tortyFeature.setStyle(
                        new ol.style.Style({
                            fill: new ol.style.Fill({
                                color: [255, 0, 0, 0.5]
                            })
                        })
                    );

                    tortySource.addFeature(tortyFeature); // add the feature to the source

                    var tortyLayer = new ol.layer.Vector({ // create a layer with that source
                        source: tortySource
                    });

                    map.addLayer(tortyLayer);
                };

Upvotes: 1

Views: 2990

Answers (2)

Jonatas Walker
Jonatas Walker

Reputation: 14168

ol.Feature doesn't have a style property. You can't set style on constructor. You should use ol.Feature#setStyle. So:

feature.setStyle(
  new ol.style.Style({
    image: new ol.style.Circle({
        fill: new ol.style.Fill({ color: [255,0,0,1] }),
        stroke: new ol.style.Stroke({ color: [0,0,0,1] }),
        radius: 5
    })
  })
);

Better, store the style in a variable so OL doesn't re-create the style.

Upvotes: 3

Stranded Kid
Stranded Kid

Reputation: 1405

Long time I'm not in OL3, but looking at the docs.

http://openlayers.org/en/v3.5.0/apidoc/ol.Feature.html

Features can be styled individually with setStyle; otherwise they use the style of their vector layer or feature overlay.

So maybe passing the style as properties when creating a "class instance" won't work.

What if you try to first create the feature, then do

tortyFeature.setStyle({    
    fill: new ol.style.Fill({
        color: 'rgba(255,0,0,0.5)'
    })
}

Also note that accordint to the docs, http://openlayers.org/en/v3.5.0/apidoc/ol.style.Style.html is still experimental, as well as everything related.

Or try to add the style to the tortySource.

It's just a way to explore, I can't act this will work 100%.

Upvotes: 0

Related Questions