1

I am working with a GeoJSON feature collection file. It has >100 features, each feature has a set of coordinates labelled "geometry" and a set of characteristics labelled "properties". I have been able to display the geometry (polygons) on my map with the following code:

var geojsonLayer = new ol.layer.Vector({
    source: new ol.source.Vector({
        format: new ol.format.GeoJSON(),
        url: 'http://myserver.com/mygeojson.js'
    }),
    style: new ol.style.Style({
    stroke: new ol.style.Stroke({
      color: "red",
      lineDash: [4],
      width: 3
    }),
    fill: new ol.style.Fill({
       color: 'rgba(0, 0, 255, 0.1)'
    })
  })
});

geojsonLayer.setZIndex(100);
map_obj.addLayer(geojsonLayer);    // map_obj is the map defined elsewhere.

There are some more coordinates stored in the properties of the GeoJSON which I want to access and display, I'm also interested in a couple of other parameters. How do I go about accessing these features in OpenLayers? Or maybe this is not possible with OL and I need to parse it using fetch or something similar?

The file is large, so below I have indcluded just one feature:

{
  "type": "FeatureCollection",
  "features": [
    {
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [
              5.785,
              60.497
            ],
            [
              6.026,
              60.502
            ],
            [
              6.103,
              60.584
            ],
            [
              6.137,
              60.748
            ],
            [
              6.093,
              60.83
            ],
            [
              5.971,
              60.827
            ],
            [
              5.833,
              60.742
            ],
            [
              5.785,
              60.497
            ]
          ]
        ]
      },
      "type": "Feature",
      "properties": {
        "NumIdBirth": 2,
        "CType": 6,
        "LonTrajCellCG": [
          5.9569,
          5.97
        ],
        "CRainRate": 0,
        "ConvTypeMethod": 1,
        "ConvType": 1,
        "SeverityIntensity": 0,
        "ConvTypeQuality": 3,
        "MvtDirection": 299,
        "CTPressure": 60600,
        "NumIdCell": 1,
        "CTReff": 0,
        "LonG": 5.9569,
        "LatTrajCellCG": [
          60.6425,
          60.62
        ],
        "ExpansionRate": 57.384,
        "CTPhase": 1,
        "LatG": 60.6425,
        "BTmin": 268.25,
        "BTmoy": 273.98,
        "CTCot": 23.57,
        "CTCwp": 0.237,
        "NbPosLightning": 0,
        "SeverityType": "",
        "PhaseLife": 2,
        "MvtSpeed": 0.645,
        "Surface": 240,
        "Duration": 900,
        "CoolingRate": -11.2104
      }
    }
13
  • 1
    GeoJSON object properties are in OL accessible through .get(propertyName) method. For example, if your GeoJSON has property named otherParameter, you can access it in OL with geojsonLayer.get('otherParameter').
    – TomazicM
    Nov 5 '20 at 9:43
  • That's returning undefined.
    – dwright
    Nov 5 '20 at 10:03
  • 1
    Please edit your question and include excerpt from your GeoJSON, showing those additional properties that you want to access.
    – TomazicM
    Nov 5 '20 at 11:01
  • I have added a single feature from the feature collection, I'm interested in the values after "properties", in particulat MvtSpeed and LatTrajCellCG and LonTrajCellCG
    – dwright
    Nov 5 '20 at 11:20
  • I can't even use geojsonLayer.features, which seems odd - maybe it's something to do with the file?
    – dwright
    Nov 5 '20 at 13:46
1

You can use forEachFeatureAtPixel for that. Something like this:

var displayFeatureInfo = function (pixel) {
  var feature = map_obj.forEachFeatureAtPixel(pixel, function (feature) {
    return feature;
  });  
  if (feature) {
    console.log(feature.get('MvtSpeed'), feature.get('LatTrajCellCG'), feature.get('LonTrajCellCG'));
  }
};
     
map_obj.on('click', function (evt) {
  displayFeatureInfo(evt.pixel);
}); 

demo

7
  • So for my case, would "map" be my geojsonLayer vector layer? Or my map object?
    – dwright
    Nov 5 '20 at 14:40
  • Oh, sorry. map would be map_obj. I've updated the answer. Nov 5 '20 at 14:57
  • Thank you - but unfortunetly that does not work for me. Put some console logs in the function and it does not appear to get past var displayFeatureInfo = function (pixel) {
    – dwright
    Nov 5 '20 at 15:08
  • Here is a working demo: anatolysukhanov.com/openlayers/1.html (The feature is at anatolysukhanov.com/openlayers/data.json) Nov 5 '20 at 16:04
  • Yes, I have had success displaying the polygons. What I am trying to do is extract a few of the properties, perform some calculations and display them.
    – dwright
    Nov 5 '20 at 16:17
1

You can do it directly from the features in the layer

  geojsonLayer.getSource().forEachFeature(dothis);

  function dothis(feature){

    console.log(feature.get('MvtSpeed'));
    console.log(feature.get('LatTrajCellCG'));
    console.log(feature.get('LonTrajCellCG'));

  }

Note that if doing this at the start of the application you must wait for the source to load

2
  • Thanks, but that doesn't work for me.
    – dwright
    Nov 5 '20 at 16:21
  • How does it not work? Do you get errors? Do you get bad results? Nov 6 '20 at 12:08
1

You can also use layer's source addfeature event handler to access features as they are loaded:

geojsonLayer.getSource().on('addfeature', function(feature) {
  console.log(feature.get('MvtSpeed');
});
map_obj.addLayer(geojsonLayer);
5
  • It is the source's event geojsonLayer.getSource().on
    – Mike
    Nov 5 '20 at 17:00
  • Thanks, I'm really getting sloppy. Corrected.
    – TomazicM
    Nov 5 '20 at 17:24
  • The event type is 'addfeature'. Nov 5 '20 at 17:48
  • geojsonLayer.getSource().on('addfeature', function(e) { console.log(e.feature.get('MvtSpeed')); }); Nov 5 '20 at 17:49
  • 1
    Corrected. This happens, when one doesn't test answer before publishing it.
    – TomazicM
    Nov 5 '20 at 20:17
0

I ended up using jquery to load the geoJSON to access the properties. Here is the code:

$.getJSON( "http://myserver.com/mygeojson.js", function( data ) {

  data.features.forEach(dothis);

  function dothis(item){

    console.log(item.properties.MvtSpeed);
    console.log(item.properties.LatTrajCellCG);
    console.log(item.properties.LonTrajCellCG);

  }

});

It's a shame I had to do it that way (its a lot more work to now manipulate these properties than using OL), but the option suggested by @Anatoly Sukhanov didn't work me. Neither did the .get method suggested by @TomazicM.

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.