3

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.

  • 1
    When you say "it just doesn't work" that doesn't tell us much. Can you edit your question to give specific errors? – Dowlers Oct 1 '15 at 17:09
  • You are absolutely right, I added a bit of (crucial) information! – PIDZB Oct 1 '15 at 18:51
5

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.

  • This works amazing, thank you for your explanation. I still don't really understand the ol.Feature function. For example, how do I retrieve the "Functie" property from my JSON object? – PIDZB Oct 2 '15 at 9:03
  • See updated answer and demo. – Jonatas Walker Oct 2 '15 at 9:16
  • Thank you VERY much! I can finally work with something and try to test my way into understanding! :D – PIDZB Oct 2 '15 at 9:54
  • You're welcome. Have a good day! – Jonatas Walker Oct 2 '15 at 10:02

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.