CODEWITHSUNDEEP
javascriptarraysleaflet
Jordi Z
Jordi Z

Reputation: 179

Generating variable Leaflet marker colors bases on arrays

I'm trying to give the points on my map a dynamic color, based on an array filled with colors.

Currently, the colors in my code are defined in a function:

function getColor(keten) {
    return  keten == "MacDonalds"   ? '#800888' :
            keten == "Subway"       ? '#969696' :
            keten == "KFC"          ? '#081d58' :
                                      '#252525' ;
    }

Which is called in Leaflet:

    window["mapDataLayer"] = L.geoJson(geojson, {
        pointToLayer: function (feature, latlng) {
            var markerStyle = { 
                fillColor: getColor(feature.properties.Fastfoodketen),
........

Because of reasons, I now have dynamic data, and need to change my code a bit.

I've created two arrays, one filled with colors and one (dynamically) filled with restaurant chain names. Then I loop through both arrays and try to generate a variable that looks like the data in my getColor() function. That variable could then be returned in the same way.

arrayKleur =  ["#a6cee3", "#1f78b4", "#b2df8a", "#33a02c", "#fb9a99", "#e31a1c", "#fdbf6f", "#ff7f00", "#6a3d9a", "#b15928"];
// filled for testing purposes, normally it's filled somewhere else
arrayKeten =  ["Kwalitaria", "NYPizza", "Dominos", "BurgerKing", "KFC", "Subway", "MacDonalds"];

var leafletData = [];

for (i= 0; i < arrayKeten.length; i++){
    leafletData += 'keten == '+arrayKeten[i]+'   ? '+arrayKleur[i]+' :</br>';
    }
leafletData += 'red;' ;

function getColor(keten) {
    return  leafletData;
    }

With this new code I get a string which look just like the content of getColor(), but I think Leaflet can't work with a string, because all the markers on my map are black now.

I tried changing my original getColor() function to incorporate my arrays, just to see if it works.

function getColor(keten) {
    return  keten == arrayKeten[0]   ? arrayKleur[0]:
            keten == arrayKeten[1]   ? arrayKleur[1]:
            keten == arrayKeten[2]   ? arrayKleur[2]:
                                      '#999999' ;
    }

This works flawlessly, so I think I'm pretty close to the solution with my string.

What do I need to change to get my code to work properly? Or am I maybe overcomplicating things?

Upvotes: 0

Views: 475

Answers (2)

IvanSanchez
IvanSanchez

Reputation: 19069

You're overcomplicating things. Your string is not a color, is a string of text that looks like javascript but is not evaluated. And using eval() is wrong 99.9999% of the time.

Instead, use good ol' indexOf:

function getColor(keten) {
    var i = arrayKeten.indexOf(keten);
    if (i !== -1) {
        return arrayKleur[ i ];
    } else {
        return '#999999';
    }   
}

Upvotes: 1

Nina Scholz
Nina Scholz

Reputation: 386604

Why not use an object for the colors with a default value?

function getColor(keten) {
    var colors = { Kwalitaria: "#a6cee3", NYPizza: "#1f78b4", Dominos: "#b2df8a", BurgerKing: "#33a02c", KFC: "#fb9a99", Subway: "#e31a1c", MacDonalds: "#fdbf6f" };
    return colors[keten] || '#999999';
}

Upvotes: 1

Related Questions