0

I am getting a geoJSON response in the below format:

{
   "type":"FeatureCollection",
   "totalFeatures":3,
   "features":[
      {
         "type":"Feature",
         "id":"Site_view.36cda49f-25c6-4dca-be68-f12784bb8b20",
         "geometry":{
            "type":"MultiPolygon",
            "coordinates":[
               [
                  [
                     [
                        174877.4813,
                        130159.3695
                     ],
                     [
                        174991.5857,
                        130162.2884
                     ],
                     [
                        175085.7881,
                        130172.9028
                     ],
                     [
                        175204.6689,
                        130195.7236
                     ],
                     [
                        175205.9957,
                        130192.274
                     ],
                     [
                        175084.4613,
                        130170.7799
                     ],
                     [
                        174989.7282,
                        130158.8387
                     ],
                     [
                        174877.4813,
                        130159.3695
                     ]
                  ]
               ]
            ]
         },
         "geometry_name":"geometry",
         "properties":{
            "id":22632,
            "name":"test CA 24 05-10-2017",
            "nomParent":null,
            "status":"Inscription",
            "idPowalco":"18006818",
            "bbox":[
               174877.4813,
               130158.8387,
               175205.9957,
               130195.7236
            ]
         }
      },
      {
         "type":"Feature",
         "id":"Site_view.e85ec725-936e-4fae-945b-ef1f461b655c",
         "geometry":{
            "type":"MultiPolygon",
            "coordinates":[
               [
                  [
                     [
                        174865.8055,
                        130168.1263
                     ],
                     [
                        175247.3917,
                        130213.768
                     ],
                     [
                        175250.8413,
                        130192.5393
                     ],
                     [
                        175109.405,
                        130153.7969
                     ],
                     [
                        174866.867,
                        130142.9172
                     ],
                     [
                        174865.8055,
                        130168.1263
                     ]
                  ]
               ]
            ]
         },
         "geometry_name":"geometry",
         "properties":{
            "id":22633,
            "name":"test CA 24 05-10-2017",
            "nomParent":null,
            "status":"Inscription",
            "idPowalco":"18006818",
            "bbox":[
               174865.8055,
               130142.9172,
               175250.8413,
               130213.768
            ]
         }
      },
      {
         "type":"Feature",
         "id":"Site_view.c847b92f-b920-4d5e-b8b6-7d47ab66de3d",
         "geometry":null,
         "geometry_name":"geometry",
         "properties":{
            "id":22634,
            "name":"test CA 24 05-10-2017",
            "nomParent":null,
            "status":"Inscription",
            "idPowalco":"18006818"
         }
      }
   ],
   "crs":{
      "type":"name",
      "properties":{
         "name":"urn:ogc:def:crs:EPSG::31370"
      }
   },
   "bbox":[
      174865.8055,
      130142.9172,
      175250.8413,
      130213.768
   ]
}

I am basically creating two polygons on the map with the given coordinates(using "coordinates"). Right now the styling is common for all the polygons, But now I want to give different styling(color, boundaries etc) to the different polygons.

Is it possible to give different styling to the different polygons received in the same geoJSON response.

Please find the logic for coloring the polygon below:

  var styles = {

  'MultiPolygon': [new ol.style.Style({
    stroke: new ol.style.Stroke({
                    color: 'red',
                    opacity: 1,
                    width: 4
                    }),
                    fill: new ol.style.Stroke ({
                        color: [255, 255, 255, 0.2]
                    })
  })]
};

var styleFunction = function(feature, resolution) {
  return styles[feature.getGeometry().getType()];
};

var vectorLayer = new ol.layer.Vector({
  source: vectorSource,
  style: styleFunction,
  name: 'VectorLayer'
});
1

You need to use a function for this intent in the style block like illustrated in the Openlayers official workshop part called Dynamic style

You will need to use a property (in your case id, name, nomParent, status, idPowalco) to distinguish styles you want to use.

So your code should look more or less like below code (if using property id and using the ES syntax new Style(... instead of new ol.style.Style(...):

const style1 = new Style({
  fill: new Fill({
    color: 'red'
  }),
  stroke: new Stroke({
    color: 'white'
  })
})

const style2 = new Style({
  fill: new Fill({
    color: 'blue'
  }),
  stroke: new Stroke({
    color: 'white'
  })
})

const layer = new VectorLayer({
  source: source, //  I suppose you have a source elsewhere in your code
  style: function(feature, resolution) {
    const featureId = feature.get('id');
    return featureId > 22632 ? style1 : style2; // assuming these are created elsewhere
  }
});
  • I cannot hard code "featureId>22632". For every response it will be different. Is there any other way. – Subhranil Sengupta Jul 11 '18 at 7:56
  • The sample above is an illustration. Normally, to colour your polygons, you need a logic and your sample does not have any (hence the illustration using the id property of your features : you could have a color property in order to change style for each polygon. You want to colour polygons but following which logic? You don't provide it so I only guess. – ThomasG77 Jul 11 '18 at 9:00
  • Currently we when ever we get the above geoJson response, we get the coordinates and transform it into polygon and show on the map. But now what we want to do is if we are getting more than one polygon coordinates in the geojson response; we need to give different colors to both of them. – Subhranil Sengupta Jul 11 '18 at 9:39
  • I have put the logic in my question – Subhranil Sengupta Jul 11 '18 at 9:46
  • It's not really OpenLayers anymore, it's just JavaScript. You need to pick colours randomly (purely random or amongst a list of chosen colours) to create each time a style in function(feature, resolution) { For random colours, one solution could be paulirish.com/2009/random-hex-color-code-snippets You can also look at Chroma.js github.com/gka/chroma.js – ThomasG77 Jul 11 '18 at 9:46

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.