Mix colors when in multiple categories

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) {