CODEWITHSUNDEEP
javascriptandroidopenlayers-3
Keithin8a
Keithin8a

Reputation: 961

Changing the colour of ol.geom.LineString in open layers 3

I am trying to write some javascript in my android app which will draw a line from one point to another based on the values passed in via a PolyLineOptions object from android.

I have wrote a couple of JSInterfaces to get the relevant info from the PolyLineOptions object such as latlng and colour and I can get it to draw the line fine, however when I try to change the colour of it, it doesn't do anything, ive even tried changing the width, and still nothing.

NOTE: I have wrote the colour value to the log and it is coming through correctly so all the JSInterface stuff is working as expected.

function drawPolyLine(polyLine){

if(polyLine != null){

    var list = window.JSInterface.getPointsFromPolyLine(polyLine)

    var count = window.JSInterface.getLengthFromLatLngList(list)

    for(var i = 0; i < count; i+=2)
    {
        var lat1 = window.JSInterface.getLatFromLatLngList(list, i);
        var lng1 = window.JSInterface.getLngFromLatLngList(list, i);
        var lat2 = window.JSInterface.getLatFromLatLngList(list, i+1);
        var lng2 = window.JSInterface.getLngFromLatLngList(list, i+1);

        var coordinates = [[lng1,lat1],[lng2,lat2]];

        var lineString = new ol.geom.LineString(coordinates);
        lineString.transform('EPSG:4326', 'EPSG:3857');

        var color = window.JSInterface.getColorFromPolyLine(polyLine);

      var styles = [
        // linestring
        new ol.style.Style({
          stroke: new ol.style.Stroke({
            color: '#ffcc33',
            width: 2
          })
        })
      ];

        var line = new ol.Feature({
                    geometry: lineString,
                    name: 'Line',
                    style: styles
                });
        linesSource.addFeature(line);

    }
}

}

Would anyone be able to help me figure out what I am doing wrong? It seems to be completely ignoring the style. I am guessing its something silly but I just can't see it.

Upvotes: 1

Views: 1299

Answers (1)

Keithin8a
Keithin8a

Reputation: 961

I Have figured it out. It turns out that you aren't allowed to set the style when you create the feature you need to use:

            var line = new ol.Feature({
                    geometry: lineString,
                    name: 'Line',
                    //style: styles
                });

                line.setStyle(styles);

I don't understand why, so if someone could explain then feel free to answer and I will mark your answer as correct.

Upvotes: 3

Related Questions