Add and style category filter

static/css/style.css

@@ -18,24 +18,25 @@ body {
     height: 100%;
 }
 
-#year-picker {
+#filter-picker {
     position: absolute;
     z-index: 10;
     top: 6px;
     right: 6px;
+    pointer-events: none;
 }
 
-#year-picker ul {
+#filter-picker ul {
     margin: 0;
     padding: 0;
     list-style: none;
 }
 
-#year-picker li {
+.year-filter li {
     display: inline-block;
 }
 
-#year-picker a {
+.year-filter a {
     display: block;
     width: 72px;
     padding: 12px;
@@ -47,10 +48,64 @@ body {
     transition: background .3s ease;
 }
 
-#year-picker a:hover {
+.year-filter a:hover {
     background: #333;
 }
 
-#year-picker .active a {
+.year-filter .active a {
     background: #444;
 }
+
+.category-filter {
+    text-align: right;
+}
+
+.category-filter li {
+    margin: 12px 0;
+    opacity: .5;
+}
+
+.category-filter li.active {
+    opacity: 1;
+}
+
+.category-filter a {
+    text-decoration: none;
+    color: #333;
+    padding: 6px;
+    text-shadow: 0 0 20px rgba(255,255,255,.8);
+    position: relative;
+}
+
+.category-filter a:after {
+    content: '';
+    display: inline-block;
+    width: 9px;
+    height: 9px;
+    border-radius: 50%;
+    border: 2px solid #f00;
+    position: absolute;
+    top: 50%;
+    left: -.5em;
+    margin-top: -4.5px;
+}
+
+.category-filter .racism a:after {
+    border-color: #F8B195;
+}
+
+.category-filter .antisemitism a:after {
+    border-color: #F67280;
+}
+
+.category-filter .sexism a:after {
+    border-color: #C06C84;
+}
+
+.category-filter .homophobia a:after {
+    border-color: #6C5B7B;
+}
+
+.category-filter .uncategorized a:after {
+    border-color: #355C7D;
+}

static/js/main.js

@@ -1,6 +1,9 @@
 (function () {
   "use strict";
 
+  // http://www.colourlovers.com/palette/1811244/1001_Stories
+  var colors = [ '#F8B195', '#F67280', '#C06C84', '#6C5B7B', '#355C7D' ];
+
   // set up background map
   var map = L.map('map').setView([52.50, 13.40], 11);
   var layer = new L.StamenTileLayer('toner-lite');
@@ -20,15 +23,23 @@
   // logic for drawing follows
 
   var markers = [];
+  function createMarker (data) {
+    var options =  { color: pickColor(data) };
+    var marker = L.circleMarker([data.lat, data.lng], options).addTo(map);
+    return marker;
+  }
+
+  function pickColor (data) {
+    var categories = [ 'racism', 'antisemitism', 'sexism', 'homophobia' ];
+    return data.categories.length ? colors[categories.indexOf(data.categories[0])] : colors[4];
+  }
 
   /**
    * Display all incidents at once
    */
   function displayAll () {
     for (var i = 0, l = response.length; i < l; i++) {
-      markers.push(
-        L.marker([response[i].lat, response[i].lng]).addTo(map).bindPopup(response[i].description)
-      )
+      markers.push(createMarker(response[i]).bindPopup(response[i].description));
     }
   }
 })();