From 356880577938e05ddaa47f47dd031b7748064a10 Mon Sep 17 00:00:00 2001
From: Caesar Mukama <caesar@laboremus.no>
Date: Thu, 24 Nov 2016 16:14:37 +0100
Subject: [PATCH] added waterways

---
 README.md                                  |   2 +-
 app/components/CompareBar/index.js         |  10 +-
 app/components/Legend/style.css            |  23 ++
 app/components/Map/glstyles/index.js       |   5 +-
 app/components/Map/glstyles/waterways.json | 302 +++++++++++++++++++++
 app/components/Stats/index.js              |   4 +-
 app/settings/options.js                    |  13 +-
 7 files changed, 346 insertions(+), 13 deletions(-)
 create mode 100644 app/components/Map/glstyles/waterways.json

diff --git a/README.md b/README.md
index 24618a6..17f1eb8 100644
--- a/README.md
+++ b/README.md
@@ -10,7 +10,7 @@ Say, you'd like to know when most of a specific feature type (e.g. buildings) in
 Features
 --------
 
-* supported feature types: *buildings* (any closed osm way with a building tag), *roads* (any osm way with a highway tag)
+* supported feature types: *buildings* (any closed osm way with a building tag), *roads* (any osm way with a highway tag), *rivers* (any osm way with a waterway tag)
 * graphs of feature *recency* or *mapper experience*
 * highlighting of features by custom date range or user experience interval
 * calculated statistics: total number/length of features in selected region and date/experience range, number of contributors
diff --git a/app/components/CompareBar/index.js b/app/components/CompareBar/index.js
index 3ed8823..30419dd 100644
--- a/app/components/CompareBar/index.js
+++ b/app/components/CompareBar/index.js
@@ -31,11 +31,11 @@ class CompareBar extends Component {
           return (<li key={filter} title={filterOptions.find(f => f.id === filter).altText}>
             <span className="number">{
               numberWithCommas(
-                (filter === 'highways' ? unitSystems[this.props.stats.unitSystem].distance.convert : x=>x)(
+                (filter === 'highways' || filter === 'waterways' ? unitSystems[this.props.stats.unitSystem].distance.convert : x=>x)(
                   (this.state.featureCounts[filter].find(counts => counts && counts.id === this.props.map.times[0]) || {}).value
               ))
             }</span><br/>
-            {filter === 'highways'
+            {filter === 'highways' || filter === 'waterways'
             ? <UnitSelector
                 unitSystem={this.props.stats.unitSystem}
                 unit='distance'
@@ -52,11 +52,11 @@ class CompareBar extends Component {
           return (<li key={filter} title={filterOptions.find(f => f.id === filter).altText}>
             <span className="number">{
               numberWithCommas(
-                (filter === 'highways' ? unitSystems[this.props.stats.unitSystem].distance.convert : x=>x)(
+                (filter === 'highways' || filter === 'waterways' ? unitSystems[this.props.stats.unitSystem].distance.convert : x=>x)(
                   (this.state.featureCounts[filter].find(counts => counts && counts.id === this.props.map.times[1]) || {}).value
               ))
             }</span><br/>
-            {filter === 'highways'
+            {filter === 'highways' || filter === 'waterways'
             ? <UnitSelector
                 unitSystem={this.props.stats.unitSystem}
                 unit='distance'
@@ -110,7 +110,7 @@ class CompareBar extends Component {
               featureCounts[filter][timeIdx] = {
                 id: timeOption.id,
                 day: +timeOption.timestamp,
-                value: filter === 'highways'
+                value: filter === 'highways' || filter === 'waterways'
                   ? data.features.reduce((prev, feature) => prev + (feature.properties._length || 0.0), 0.0)
                   : data.features.reduce((prev, feature) => prev + (feature.properties._count || 1), 0)
               }
diff --git a/app/components/Legend/style.css b/app/components/Legend/style.css
index 2780b43..678157f 100644
--- a/app/components/Legend/style.css
+++ b/app/components/Legend/style.css
@@ -73,6 +73,29 @@
         }
       }
 
+      &.waterways {
+        background-color: #c89ab7;
+        border-color: #c89ab7;
+
+        &.feature {
+          background-color: transparent;
+          border-style: solid;
+          border-width: 2px;
+          border-top-width: 0;
+          border-left-width: 0;
+          transform: translateX(-2px) rotate(-20deg);
+        }
+        &.high {
+          opacity: 1.0;
+        }
+        &.mid {
+          opacity: 0.55;
+        }
+        &.low {
+          opacity: 0.1;
+        }
+      }
+
       &.pois {
         background-color: #FF0000;
 
diff --git a/app/components/Map/glstyles/index.js b/app/components/Map/glstyles/index.js
index 4786664..cb253ce 100644
--- a/app/components/Map/glstyles/index.js
+++ b/app/components/Map/glstyles/index.js
@@ -1,5 +1,6 @@
 import buildings from './buildings.json'
 import highways from './highways.json'
+import waterways from './waterways.json'
 import pois from './pois.json'
 
 import settings from '../../../settings/settings'
@@ -13,6 +14,7 @@ export default function getStyle(filters, options) {
   const filterStyles = {
     buildings,
     highways,
+    waterways,
     pois
   }
   var allSources = {}
@@ -56,7 +58,8 @@ export default function getStyle(filters, options) {
       })
   }
   buildings,
-  highways
+  highways,
+  waterways
 }
 
 export function getCompareStyles(filters, compareTimes) {
diff --git a/app/components/Map/glstyles/waterways.json b/app/components/Map/glstyles/waterways.json
new file mode 100644
index 0000000..48b9f9d
--- /dev/null
+++ b/app/components/Map/glstyles/waterways.json
@@ -0,0 +1,302 @@
+{
+  "version": 8,
+  "sources": {
+    "osm-waterways-raw": {
+      "type": "vector",
+      "tiles": [
+        "{{server}}/waterways/{z}/{x}/{y}.pbf"
+      ],
+      "minzoom": 13,
+      "maxzoom": 14
+    },
+    "osm-waterways-aggregated": {
+      "type": "vector",
+      "tiles": [
+        "{{server}}/waterways/{z}/{x}/{y}.pbf"
+      ],
+      "minzoom": 0,
+      "maxzoom": 12
+    }
+  },
+  "layers": [{
+    "id": "waterways-raw",
+    "type": "line",
+    "source": "osm-waterways-raw",
+    "source-layer": "osm",
+    "paint": {
+      "line-width": 1,
+      "line-color": "#c89ab7",
+      "line-opacity": 1
+    }
+  }, {
+    "id": "waterways-raw-highlight",
+    "type": "line",
+    "source": "osm-waterways-raw",
+    "source-layer": "osm",
+    "paint": {
+      "line-width": 2,
+      "line-color": "#5CBAD8",
+      "line-opacity": 1
+    },
+    "filter": ["==", "_timestamp", -1]
+  },
+
+  {
+    "id": "waterways-aggregated-0",
+    "type": "fill",
+    "source": "osm-waterways-aggregated",
+    "source-layer": "osm",
+    "maxzoom": 12.01,
+    "paint": {
+      "fill-color": "#c89ab7",
+      "fill-antialias": false,
+      "fill-opacity": {
+        "base": 1,
+        "stops": [[10, 0.1], [13, 1.0]]
+      }
+    },
+    "filter": ["all",
+      ["<", "_lineDistance", 3]
+    ]
+  }, {
+    "id": "waterways-aggregated-1",
+    "type": "fill",
+    "source": "osm-waterways-aggregated",
+    "source-layer": "osm",
+    "maxzoom": 12.01,
+    "paint": {
+      "fill-color": "#c89ab7",
+      "fill-antialias": false,
+      "fill-opacity": {
+        "base": 1,
+        "stops": [[8, 0.1], [11, 1.0], [12, 1.0]]
+      }
+    },
+    "filter": ["all",
+      [">=", "_lineDistance", 3],
+      ["<", "_lineDistance", 16]
+    ]
+  }, {
+    "id": "waterways-aggregated-2",
+    "type": "fill",
+    "source": "osm-waterways-aggregated",
+    "source-layer": "osm",
+    "maxzoom": 12.01,
+    "paint": {
+      "fill-color": "#c89ab7",
+      "fill-antialias": false,
+      "fill-opacity": {
+        "base": 1,
+        "stops": [[6, 0.1], [9, 1.0], [12, 1.0]]
+      }
+    },
+    "filter": ["all",
+      [">=", "_lineDistance", 16],
+      ["<", "_lineDistance", 160]
+    ]
+  }, {
+    "id": "waterways-aggregated-3",
+    "type": "fill",
+    "source": "osm-waterways-aggregated",
+    "source-layer": "osm",
+    "maxzoom": 12.01,
+    "paint": {
+      "fill-color": "#c89ab7",
+      "fill-antialias": false,
+      "fill-opacity": {
+        "base": 1,
+        "stops": [[4, 0.1], [7, 1.0], [12, 1.0]]
+      }
+    },
+    "filter": ["all",
+      [">=", "_lineDistance", 160],
+      ["<", "_lineDistance", 1250]
+    ]
+  }, {
+    "id": "waterways-aggregated-4",
+    "type": "fill",
+    "source": "osm-waterways-aggregated",
+    "source-layer": "osm",
+    "maxzoom": 12.01,
+    "paint": {
+      "fill-color": "#c89ab7",
+      "fill-antialias": false,
+      "fill-opacity": {
+        "base": 1,
+        "stops": [[2, 0.1], [5, 1.0], [12, 1.0]]
+      }
+    },
+    "filter": ["all",
+      [">=", "_lineDistance", 1250],
+      ["<", "_lineDistance", 10000]
+    ]
+  }, {
+    "id": "waterways-aggregated-5",
+    "type": "fill",
+    "source": "osm-waterways-aggregated",
+    "source-layer": "osm",
+    "maxzoom": 12.01,
+    "paint": {
+      "fill-color": "#c89ab7",
+      "fill-antialias": false,
+      "fill-opacity": {
+        "base": 1,
+        "stops": [[0, 0.1], [3, 1.0], [12, 1.0]]
+      }
+    },
+    "filter": ["all",
+      [">=", "_lineDistance", 10000],
+      ["<", "_lineDistance", 80000]
+    ]
+  }, {
+    "id": "waterways-aggregated-6",
+    "type": "fill",
+    "source": "osm-waterways-aggregated",
+    "source-layer": "osm",
+    "maxzoom": 12.01,
+    "paint": {
+      "fill-color": "#c89ab7",
+      "fill-antialias": false,
+      "fill-opacity": {
+        "base": 1,
+        "stops": [[0, 0.7], [2, 1.0], [12, 1.0]]
+      }
+    },
+    "filter": ["all",
+      [">=", "_lineDistance", 80000]
+    ]
+  },
+
+  {
+    "id": "waterways-aggregated-highlight-0",
+    "type": "fill",
+    "source": "osm-waterways-aggregated",
+    "source-layer": "osm",
+    "maxzoom": 12.01,
+    "paint": {
+      "fill-color": "#5CBAD8",
+      "fill-antialias": false,
+      "fill-opacity": {
+        "base": 1,
+        "stops": [[10, 0.1], [13, 1.0]]
+      }
+    },
+    "filter": ["==", "_timestamp", -1],
+    "densityFilter": ["all",
+      ["<", "_lineDistance", 3]
+    ]
+  }, {
+    "id": "waterways-aggregated-highlight-1",
+    "type": "fill",
+    "source": "osm-waterways-aggregated",
+    "source-layer": "osm",
+    "maxzoom": 12.01,
+    "paint": {
+      "fill-color": "#5CBAD8",
+      "fill-antialias": false,
+      "fill-opacity": {
+        "base": 1,
+        "stops": [[8, 0.1], [11, 1.0], [12, 1.0]]
+      }
+    },
+    "filter": ["==", "_timestamp", -1],
+    "densityFilter": ["all",
+      [">=", "_lineDistance", 3],
+      ["<", "_lineDistance", 16]
+    ]
+  }, {
+    "id": "waterways-aggregated-highlight-2",
+    "type": "fill",
+    "source": "osm-waterways-aggregated",
+    "source-layer": "osm",
+    "maxzoom": 12.01,
+    "paint": {
+      "fill-color": "#5CBAD8",
+      "fill-antialias": false,
+      "fill-opacity": {
+        "base": 1,
+        "stops": [[6, 0.1], [9, 1.0], [12, 1.0]]
+      }
+    },
+    "filter": ["==", "_timestamp", -1],
+    "densityFilter": ["all",
+      [">=", "_lineDistance", 16],
+      ["<", "_lineDistance", 160]
+    ]
+  }, {
+    "id": "waterways-aggregated-highlight-3",
+    "type": "fill",
+    "source": "osm-waterways-aggregated",
+    "source-layer": "osm",
+    "maxzoom": 12.01,
+    "paint": {
+      "fill-color": "#5CBAD8",
+      "fill-antialias": false,
+      "fill-opacity": {
+        "base": 1,
+        "stops": [[4, 0.1], [7, 1.0], [12, 1.0]]
+      }
+    },
+    "filter": ["==", "_timestamp", -1],
+    "densityFilter": ["all",
+      [">=", "_lineDistance", 160],
+      ["<", "_lineDistance", 1250]
+    ]
+  }, {
+    "id": "waterways-aggregated-highlight-4",
+    "type": "fill",
+    "source": "osm-waterways-aggregated",
+    "source-layer": "osm",
+    "maxzoom": 12.01,
+    "paint": {
+      "fill-color": "#5CBAD8",
+      "fill-antialias": false,
+      "fill-opacity": {
+        "base": 1,
+        "stops": [[2, 0.1], [5, 1.0], [12, 1.0]]
+      }
+    },
+    "filter": ["==", "_timestamp", -1],
+    "densityFilter": ["all",
+      [">=", "_lineDistance", 1250],
+      ["<", "_lineDistance", 10000]
+    ]
+  }, {
+    "id": "waterways-aggregated-highlight-5",
+    "type": "fill",
+    "source": "osm-waterways-aggregated",
+    "source-layer": "osm",
+    "maxzoom": 12.01,
+    "paint": {
+      "fill-color": "#5CBAD8",
+      "fill-antialias": false,
+      "fill-opacity": {
+        "base": 1,
+        "stops": [[0, 0.1], [3, 1.0], [12, 1.0]]
+      }
+    },
+    "filter": ["==", "_timestamp", -1],
+    "densityFilter": ["all",
+      [">=", "_lineDistance", 10000],
+      ["<", "_lineDistance", 80000]
+    ]
+  }, {
+    "id": "waterways-aggregated-highlight-6",
+    "type": "fill",
+    "source": "osm-waterways-aggregated",
+    "source-layer": "osm",
+    "maxzoom": 12.01,
+    "paint": {
+      "fill-color": "#5CBAD8",
+      "fill-antialias": false,
+      "fill-opacity": {
+        "base": 1,
+        "stops": [[0, 0.7], [2, 1.0], [12, 1.0]]
+      }
+    },
+    "filter": ["==", "_timestamp", -1],
+    "densityFilter": ["all",
+      [">=", "_lineDistance", 80000]
+    ]
+  }]
+}
diff --git a/app/components/Stats/index.js b/app/components/Stats/index.js
index 91b88b4..bf7528c 100644
--- a/app/components/Stats/index.js
+++ b/app/components/Stats/index.js
@@ -114,14 +114,14 @@ class Stats extends Component {
         {features.map(filter => {
           return (<li key={filter.filter} title={filters.find(f => f.id === filter.filter).altText}>
             <span className="number">{
-              numberWithCommas(Number((filter.filter === 'highways'
+              numberWithCommas(Number((filter.filter === 'highways' || filter.filter === 'waterways'
                 ? unitSystems[this.props.stats.unitSystem].distance.convert(
                   filter.highlightedFeatures.reduce((prev, feature) => prev+(feature.properties._length || 0.0), 0.0)
                 )
                 : filter.highlightedFeatures.reduce((prev, feature) => prev+(feature.properties._count || 1), 0))
               ).toFixed(0))
             }</span><br/>
-            {filter.filter === 'highways'
+            {filter.filter === 'highways' || filter.filter === 'waterways'
             ? <UnitSelector
                 unitSystem={this.props.stats.unitSystem}
                 unit='distance'
diff --git a/app/settings/options.js b/app/settings/options.js
index 889749e..3b34553 100644
--- a/app/settings/options.js
+++ b/app/settings/options.js
@@ -9,6 +9,11 @@ export const filters = [
     description: 'Roads',
     altText: 'Lines with a highway=* tag (highways & roads, but also tracks and paths)'
   },
+  {
+    id: 'waterways',
+    description: 'Rivers',
+    altText: 'Lines with a waterway=* tag (waterways, rivers & streams)'
+  },
   {
     id: 'pois',
     description: 'POIs',
@@ -35,9 +40,9 @@ export const compareTimes = [
   { id: '2010', timestamp: new Date('2010-01-01'), except: ['pois'] },
   { id: '2011', timestamp: new Date('2011-01-01'), except: ['pois'] },
   { id: '2012', timestamp: new Date('2012-01-01'), except: ['pois'] },
-  { id: '2013', timestamp: new Date('2013-01-01'), except: ['pois'] },
-  { id: '2014', timestamp: new Date('2014-01-01'), except: ['pois'] },
-  { id: '2015', timestamp: new Date('2015-01-01'), except: ['highways', 'pois'] },
-  { id: '2016', timestamp: new Date('2016-01-01'), except: ['highways', 'pois'] },
+  { id: '2013', timestamp: new Date('2013-01-01'), except: ['waterways', 'pois'] },
+  { id: '2014', timestamp: new Date('2014-01-01'), except: ['waterways', 'pois'] },
+  { id: '2015', timestamp: new Date('2015-01-01'), except: ['highways', 'waterways', 'pois'] },
+  { id: '2016', timestamp: new Date('2016-01-01'), except: ['highways', 'waterways', 'pois'] },
   { id: 'now',  timestamp: new Date() }
 ]