diff --git a/static/js/main.js b/static/js/main.js index df46b97..ac1051a 100644 --- a/static/js/main.js +++ b/static/js/main.js @@ -59,14 +59,43 @@ return marker; } - function pickColor (data) { - var categories = [ 'racism', 'antisemitism', 'sexism', 'homophobia' ]; - return data.categories.length ? colors[categories.indexOf(data.categories[0])] : colors[4]; + function mixColors (colors) { + var rgb = colors.map(function (color) { + var r = color.substr(1, 2) + , g = color.substr(3, 2) + , b = color.substr(5, 2); + + return [parseInt(r, 16), parseInt(g, 16), parseInt(b, 16)]; + }); + + var result = [ 0, 0, 0 ]; + for (var i = 0, l = rgb.length; i < l; i++) { + result[0] += rgb[i][0] / l; + result[1] += rgb[i][1] / l; + result[2] += rgb[i][2] / l; + } + + return '#' + result[0].toString(16) + result[1].toString(16) + result[2].toString(16); + } + + function pickColor (incident) { + var categories = ['racism', 'antisemitism', 'sexism', 'homophobia'].map(function (category, index) { + if (incident.categories.indexOf(category) !== -1) + return index; + }).filter(function (value) { + return value != null + }); + + var categoryColors = colors.filter(function (color, index) { + return categories.indexOf(index) !== -1; + }); + + return incident.categories.length ? mixColors(categoryColors) : colors[4]; } /** * Clear the map and render new markers - * @param {Array[Object]} data The incidents to be shown + * @param {Array[Object]} incidents The incidents to be shown */ function displayMarkers (incidents) { markers.forEach(function (marker) { diff --git a/views/index.tpl b/views/index.tpl index 4faf2a8..f82825e 100644 --- a/views/index.tpl +++ b/views/index.tpl @@ -9,13 +9,14 @@