Javascript: "ReferenceError: icon is not defined"

Question

I am using openlayers to add points to a map and style them with a stylefunction. This code worked one week ago and today I loaded it without any changes and got the error "ReferenceError: icon is not defined".

The function asks for an attribute of the vector and then styles it with different images, according to the attribute.

var styleFunction = function(feature, resolution) {
    if(feature.get('class') === 'Artificial surface') {
        icon = 'icons/Artificial_surfaces.svg'
    } else if(feature.get('class') === 'Bare land') {
        icon = 'icons/Barrenlands.svg'
    } else if(feature.get('class') === 'Cultivated land') {
        icon = 'icons/Cultivated_land.svg'
    } else if(feature.get('class') === 'Forest') {
        icon = 'icons/Forests.svg'
    } else if(feature.get('class') === 'Grassland') {
        icon = 'icons/Grasslands.svg'
    } else if(feature.get('class') === 'Shrubland') {
        icon = 'icons/Shrublands.svg'
    } else if(feature.get('class') === 'Water body') {
        icon = 'icons/Waterbodies.svg'
    } else if(feature.get('class') === 'Wetland') {
        icon = 'icons/Wetland.svg'
    }
    return [new ol.style.Style({
        image: new ol.style.Icon({
            src: icon,
            scale: 0.7
        })
    })]
};

var points = new ol.layer.Vector ({
    title: 'Gathered Points',
    source: vectorTwo,
    style: styleFunction
});

I am quite new to javascript, so probably it is a simple error I am facing, but I did not find a solution for it and I am kind of confused because it worked a week ago and I didn't apply any changes.

Answer 1

Your code needs some syntax adjustments. You are missing many semicolons ; and your icon variable is declared as global. I have had trouble doing that at times and found that making it local with the var keyword cleaned things up. If you need to have that variable global, just declare it outside of the function without a value, then assign the value within the function. Here is my version of better syntax with your code:

var styleFunction = function(feature, resolution) {
    var icon ;
    if(feature.get('class') === 'Artificial surface') {
        icon = 'icons/Artificial_surfaces.svg' ;
    } else if(feature.get('class') === 'Bare land') {
        icon = 'icons/Barrenlands.svg' ;
    } else if(feature.get('class') === 'Cultivated land') {
        icon = 'icons/Cultivated_land.svg' ;
    } else if(feature.get('class') === 'Forest') {
        icon = 'icons/Forests.svg' ;
    } else if(feature.get('class') === 'Grassland') {
        icon = 'icons/Grasslands.svg' ;
    } else if(feature.get('class') === 'Shrubland') {
        icon = 'icons/Shrublands.svg' ;
    } else if(feature.get('class') === 'Water body') {
        icon = 'icons/Waterbodies.svg' ;
    } else if(feature.get('class') === 'Wetland') {
        icon = 'icons/Wetland.svg' ;
    }
    return [new ol.style.Style({
        image: new ol.style.Icon({
            src: icon,
            scale: 0.7
        })
    })] ;
};

var points = new ol.layer.Vector ({
    title: 'Gathered Points',
    source: vectorTwo,
    style: styleFunction
}) ;

Also, I highly suggest using a switch statement over the many if else statements you use. Makes for cleaner code and you only need to pass one argument. You can read about switch statements here. They should be fairly easy to understand.