2

I have a problem, property from GeoJson is not recognizable by OpenLayers3. Debbuger says: Uncaught ReferenceError: feature is not defined on line futher below in OpenLayers3 code:

var icon = feature.get("icon");

GeoJson

{
    "type": "FeatureCollection",
    "features": [
        {
            "type": "Feature",
            "geometry": {
                "type": "Point",
                "coordinates": [
                    12.231,
                    30.342
                ]
            },
            "properties": {
                "temperature": "21.1",
                "icon": "4"
            }
        },...

OpenLayers3 v.3.1.1.

var icon = feature.get("icon");
var styleTemperature = new ol.style.Style({
        image: new ol.style.Icon({
        src: 'http://prognoza.hr/metsimboli/' + icon + '.gif'
})
      });

var weatherLayer=new ol.layer.Vector({
        layer:'weather',
        visible: false,
        source: new ol.source.GeoJSON ({
                   projection: 'EPSG:4326',
                   url: 'path/to/geojson.geojson'
        }),
        style: styleTemperature
});

Can somebody suggest me something?

EDIT:

This part of the code works, but there is no added style to it, or should I say style is default:

var weatherLayer = new ol.layer.Vector({
        layer:'weather',
        source: new ol.source.GeoJSON ({
                projection: 'EPSG:3765',
                url: 'path/to/file.geojson'
        })
});
  • Where and how are you defining your feature? – Lars Jul 26 '16 at 16:02
  • I thought its going to be defined through var icon... but its not. Can you suggest me how to define it? – vayacondios2015 Jul 26 '16 at 16:07
2

You should load your style using a style function (API reference) similar to this:

var vectorLayer = new ol.layer.Vector({
  source: new ol.source.Vector({
    url: 'path/to/file.geojson',
    format: new ol.format.GeoJSON()
  }),
  style: function(feature, resolution) {
    return new ol.style.Style({
        image: new ol.style.Icon({
            src: 'http://prognoza.hr/metsimboli/' + feature.get("icon") + '.gif'
        })
    });
  }
});

EDIT: JSFiddle Demo

| improve this answer | |
  • I have tried different variations...i dont know why but you suggestion is not working...can you please take a look at the code again...it only works without "style". – vayacondios2015 Jul 27 '16 at 14:30
  • Have a look at the jsfiddle example – Lars Jul 27 '16 at 16:41
  • Thank you on that! This really actually works, but what if the source of geojson is in external file? – vayacondios2015 Jul 27 '16 at 21:16
  • This should help: gis.stackexchange.com/questions/134688/… – Lars Jul 28 '16 at 10:28
  • Thanks Lars! In the meanwhile I found nice example: plnkr.co/edit/GvdVNE?p=preview. But what happened is that modified, downloaded and locally opened files from this plnkr site wouldnt read geojson file in Chrome, but in Firefox geojson was preety much visible. So I am still solving that problem. Any idea on that? – vayacondios2015 Jul 29 '16 at 2:32

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.