Different colors for each feature of a collection of features

Question

I've uploaded a geojson file in my map with openlayers 3. The geojson file is a FeatureCollection with 5 features of type LineString. How can I color each feature differently to distinguish my paths? If I add the color to the style of the geojson file this is not read and if I add color to stroke, all the features are colored in a single color.

Below I add the code.

Thanks.

var vector = new ol.layer.Vector({
            source: new ol.source.Vector({
                format: new ol.format.GeoJSON(),
                url: 'http://localhost/joggo_wp/percorsi.geojson'
            }),
            style: new ol.style.Style({
                stroke: new ol.style.Stroke({
                    color: "#ff000",
                    width: 2.5,                     
                })
            }),     
        });

FILE GEOJSON:

"type": "FeatureCollection", "crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:EPSG::4326" } }, "features": [ { "type": "Feature", "properties": { "ID": 1.0, "LUNGH_M": 1970.0, "NOME": "Percorso 1", "PARTENZA": "Via del Poggio Imperiale 4", "ARRIVO": "Via di S. Leonardo 59n", "LUNGHEZZA": "1,97 km" }, "style": { "color": "#ff0000" }, "geometry": { "type": "LineString", "coordinates": [ [ 11.24203700040032, 43.759969754752376 ], [ 11.247204649917521, 43.750208064502473 ], [ 11.247446659153409, 43.750240561464494 ], [ 11.247746238597509, 43.750179530458503 ], [ 11.247960306028226, 43.750118937742307 ], [ 11.248108264989046, 43.749966781403657 ], [ 11.248240378523741, 43.749814084940027 ], [ 11.248897533371567, 43.75006527742493 ], [ 11.249140299088037, 43.750277668555015 ], [ 11.250198620263028, 43.751078552926899 ], [ 11.250259518649738, 43.751623211022611 ], [ 11.250562891152564, 43.751940055106814 ], [ 11.250844806161599, 43.752116454510677 ], [ 11.250976903611187, 43.752184285854881 ], [ 11.251025276742347, 43.752394633135999 ], [ 11.251095944135562, 43.752551715399683 ], [ 11.252075754111447, 43.753064192693351 ], [ 11.252260569522404, 43.753162663730734 ], [ 11.252298216347477, 43.753302788154329 ], [ 11.252042422884459, 43.753607171300693 ], [ 11.252089750740879, 43.754005360713535 ], [ 11.252046702595303, 43.754152945071198 ], [ 11.251940462780629, 43.754342861090443 ], [ 11.251887408111035, 43.754762904036816 ] ] } }, .........

pavlos pavlos · Accepted Answer · 2017-07-04T11:21:09

You need to create a style function to handle such cases.

So make your style function:

 var styleFunction = function(feature) {
       console.log(feature);
     //now you can use any property of your feature to identify the different colors
     //I am using the ID property of your data just to demonstrate
      var color;
      if (feature.get("ID")==1){
      color = "red";
      } else if (feature.get("ID")==2){
      color = "green";
      } else {
     color = "black"; 
      }

      var retStyle =   new ol.style.Style({
          stroke: new ol.style.Stroke({ 
            color: color,
            width: 5
          })
        });
       return retStyle;

      };

And then assign this function to the style of your vector layer

var vector = new ol.layer.Vector({
            source: new ol.source.Vector({
                format: new ol.format.GeoJSON(),
                url: 'http://localhost/joggo_wp/percorsi.geojson'
            }),
            style: styleFunction     
        });

here is a fiddle

Different colors for each feature of a collection of features

1 Answers