[GIS] Openlayers-3 – Extracting data for styling from the GeoJSON

geojsonopenlayers

I am trying to understand how to get data from my GeoJSON while rendering the map, so I can style every polygon/point differently.

What i'd like is to create style-groups with the property named "Functie" from my GeoJSON.
It just doesn't seem to work -> there is no styling applied to the element and the element does not appears on the map. If I don't add any styling, the points do appear with the basic styling.

My GeoJSON:

var puntobject = {
    "type": "Feature",
    "properties": {
        "property_a": 4,
        "property_d": 123,
        "property_c": 1242345,
        "property_d": 55151,
    },
    "geometry": {
        "type": "Point",
        "coordinates": [5.533485496901196, 51.609474175170639, 0.0]
    }
}

My code so far, based on an example. This code does not get the specific property, but the type. But this doesn't seem to work either -> no styling or visible elements?

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

var styles = {
    'Feature': [new ol.style.Style({
        image: circle
    })],
    'LineString': [new ol.style.Style({
        stroke: new ol.style.Stroke({
            color: 'green',
            width: 1
        })
    })]
};

var puntObjectenSource = new ol.source.Vector ({
  features: (new ol.format.GeoJSON()).readFeatures(puntobject)
});
//Puntobjecten style
var puntObjectenStyle = new ol.style.Style ({
   image:circle
});
//Puntobjecten layer
var puntObjecten = new ol.layer.Vector ({
  source: puntObjectenSource,
  style: styleFunction
});

And the final javascript in my html:

   var map = new ol.Map({
      target: 'map',
      layers: [
        new ol.layer.Tile({
          //source: new ol.source.MapQuest({layer: 'sat'})
          source: new ol.source.OSM({layer:'hot'})
        }),
        puntObjecten
      ],
      view: new ol.View({
        center: ol.proj.transform(lonlat, 'EPSG:4326', 'EPSG:3857'),
        zoom: 15
      })
    });

I am trying to get the properties out of my JSON -> ON LOAD. This way I can add the styling on rendering per element and add some colors.
How can I get this done?

P.S.
I am new to Openlayers and having HUGE difficulties trying to understand the documentation on the website. Any tips on how to understand the documentation are welcome.

Best Answer

Some basic understanding:

  • a ol.source.Vector is feed with features (ol.Feature);
  • a ol.Feature requires a geometry like ol.geom.Point, ol.geom.LineString;
  • you will choose a valid ol.style.Style;
  • and then style your ol.Feature based on its geometry from geojson;

When you write something like:

var vectorLayer = new ol.layer.Vector ({
    source: vectorSource,
    style: function(feature, resolution){
        var geom_name = feature.getGeometry().getType();

        // return styles[geom_name]
        // with this you tell browser to search in `styles` object
        // some entry with a key equal to `geom_name`
        // so styles['Point'] or styles['LineString']

        return styles[geom_name];
    }
});

Your styles object should be like:

var styles = {
    'Point': [new ol.style.Style({
        image: new ol.style.Circle({
            fill: new ol.style.Fill({ color: [255,255,255,1] }),
            stroke: new ol.style.Stroke({ color: [0,0,0,1] }),
            radius: 5
        })
    })],
    'LineString': [new ol.style.Style({
        stroke: new ol.style.Stroke({
            color: 'green',
            width: 1
        })
    })]
};

UDATE: I forgot the extracting part from GeoJSON. So let's say you will click and see the info on your browser console:

map.on('click', function(evt){
    var feature = map.forEachFeatureAtPixel(
        evt.pixel, function(ft, l) { return ft; }
    );

    if (feature) {
        //you can see all properties with getProperties()
        console.info(feature.getProperties());

        //and you can get directly a property
        console.info(feature.get('any-property'));
    }
});

A working demo.

Related Question