Add admin-bounds overlay

app/assets/scripts/components/map-layer-control.js

@@ -6,6 +6,7 @@ import { t } from '../utils/i18n';
 
 import Dropdown from './dropdown';
 
+// Mapbox Control class.
 export default class LayerControl {
   onAdd (map) {
     this.theMap = map;
@@ -31,10 +32,16 @@ export default class LayerControl {
       case 'origins':
         this.theMap.setLayoutProperty('eta', 'visibility', active ? 'visible' : 'none');
         break;
+      case 'admin-bounds':
+        this.theMap.setLayoutProperty('admin-bounds', 'visibility', active ? 'visible' : 'none');
+        break;
     }
   }
 }
 
+// React component for the layer control.
+// It is disconnected from the global state because it needs to be included
+// via the mapbox code.
 class LayerControlDropdown extends React.Component {
   constructor (props) {
     super(props);
@@ -73,12 +80,12 @@ class LayerControlDropdown extends React.Component {
             <span className='form__option__text'>{t('Destinations')}</span>
             <span className='form__option__ui'></span>
           </label>
-          { /* <label htmlFor='switch3' className='form__option form__option--switch' title={t('Toggle on/off')}>
+          <label htmlFor='switch3' className='form__option form__option--switch' title={t('Toggle on/off')}>
             <input type='checkbox' name='switch3' id='switch3' value='on' checked={this.state['admin-bounds']} onChange={this.toggleLayer.bind(this, 'admin-bounds')}/>
             <span className='form__option__text'>{t('Admin boundaries')}</span>
             <span className='form__option__ui'></span>
           </label>
-          <label htmlFor='switch4' className='form__option form__option--switch' title={t('Toggle on/off')}>
+          { /* <label htmlFor='switch4' className='form__option form__option--switch' title={t('Toggle on/off')}>
             <input type='checkbox' name='switch4' id='switch4' value='on' checked={this.state['road-network']} onChange={this.toggleLayer.bind(this, 'road-network')}/>
             <span className='form__option__text'>{t('Road network')}</span>
             <span className='form__option__ui'></span>

app/assets/scripts/components/scenario/scenario-results-map.js

@@ -78,23 +78,33 @@ class ResultsMap extends React.Component {
     const bucketSize = Math.floor(feats.length / totalBuckets);
     const pop = feats.map(f => f.properties.p).sort((a, b) => a - b);
 
-    // Prepare the buckets array.
-    // Get the pop value to build the buckets. All buckets have the same
-    // amount of values.
-    let buckets = Array.apply(null, Array(totalBuckets - 1)).map((_, i) => pop[(i + 1) * bucketSize - 1]);
-
-    // Add first and last values as well.
-    buckets.unshift(0);
-    buckets.push(pop[pop.length - 1]);
+    let buckets;
+    if (pop.length < 5) {
+      buckets = [0].concat(pop);
+    } else {
+      // Prepare the buckets array.
+      // Get the pop value to build the buckets. All buckets have the same
+      // amount of values.
+      buckets = Array.apply(null, Array(totalBuckets - 1)).map((_, i) => pop[(i + 1) * bucketSize - 1]);
+
+      // Add first and last values as well.
+      buckets.unshift(0);
+      buckets.push(pop[pop.length - 1]);
+    }
+
     return buckets;
   }
 
   getCircleRadiusPaintProp (data) {
     let buckets = this.getPopBuckets(data);
     // Last value is not needed.
     buckets.pop();
+    // Start from the last to account for less than 5 buckets.
+    buckets.reverse();
 
-    let stops = buckets.map((b, idx) => ([{zoom: 6, value: b}, (idx + 1) * 4]));
+    let stops = buckets.map((b, idx) => ([{zoom: 6, value: b}, (5 - idx) * 4]));
+    // Reverse to ensure ascending order.
+    stops.reverse();
 
     return {
       'base': 1,
@@ -113,11 +123,33 @@ class ResultsMap extends React.Component {
   }
 
   setupData () {
-    if (this.props.data.fetched) {
-      if (this.theMap.getSource('etaData')) {
-        return;
-      }
+    if (!this.theMap.getSource('admin-bounds')) {
+      this.theMap.addSource('admin-bounds', {
+        type: 'vector',
+        tiles: [`${config.api}/projects/${this.props.projectId}/tiles/admin-bounds/{z}/{x}/{y}`]
+      });
+      this.theMap.addLayer({
+        'id': 'admin-bounds',
+        'type': 'line',
+        'source': 'admin-bounds',
+        'source-layer': 'bounds',
+        'layout': {
+          'visibility': 'none'
+        },
+        'paint': {
+          'line-color': '#526980',
+          'line-width': {
+            'stops': [
+              [4, 1],
+              [14, 2]
+            ]
+          },
+          'line-opacity': 0.48
+        }
+      }, 'eta');
+    }
 
+    if (this.props.data.fetched && !this.theMap.getSource('etaData')) {
       this.theMap.addSource('etaData', {
         'type': 'geojson',
         'data': clone(this.props.data.data.geojson)
@@ -156,11 +188,7 @@ class ResultsMap extends React.Component {
       }, 'poi');
     }
 
-    if (this.props.poi.fetched) {
-      if (this.theMap.getSource('poiData')) {
-        return;
-      }
-
+    if (this.props.poi.fetched && !this.theMap.getSource('poiData')) {
       this.theMap.addSource('poiData', {
         type: 'geojson',
         data: clone(this.props.poi.data.geojson)
@@ -233,7 +261,13 @@ class ResultsMap extends React.Component {
         const to = all[idx];
         const r = idx * 4;
 
-        legend.push(<dt key={`dt-${r}`} title={`${from} - ${to}`}>{r}px radius</dt>);
+        let scale = ['xs', 's', 'm', 'l', 'xl'];
+        if (stops.length < 6) {
+          // Cut the scale when it's not big enough.
+          scale = scale.slice(scale.length - stops.length + 1);
+        }
+
+        legend.push(<dt key={`dt-${r}`} className={`bucket bucket--${scale[idx - 1]}`} title={`${from} - ${to}`}>{r}px radius</dt>);
         legend.push(<dd key={`dd-${r}`} title={`${from} - ${to}`}>{shorten(from)}-{shorten(to)}</dd>);
       }
     });
@@ -294,6 +328,8 @@ class ResultsMap extends React.Component {
 }
 
 ResultsMap.propTypes = {
+  projectId: T.number,
+  scenarioId: T.number,
   bbox: T.array,
   data: T.object,
   poi: T.object,

app/assets/scripts/components/scenario/scenario-results.js

@@ -207,6 +207,8 @@ const ScenarioResults = React.createClass({
         />
 
         <ResultsMap
+          projectId={this.props.projectId}
+          scenarioId={this.props.scenarioId}
           data={this.props.geojsonResults}
           poi={this.props.scenarioPoi}
           bbox={this.props.bbox}

app/assets/styles/scenarios/_single.scss

@@ -193,7 +193,7 @@
 }
 
 .legend__dl--size {
-  dt {
+  .bucket {
     background: $base-alpha-color;
     border-radius: $full-border-radius;
 
@@ -202,27 +202,27 @@
     }
   }
 
-  dt:nth-of-type(1)::before {
+  .bucket--xs::before {
     height: 0.25rem;
     width: 0.25rem;
   }
 
-  dt:nth-of-type(2)::before {
+  .bucket--s::before {
     height: 0.5rem;
     width: 0.5rem;
   }
 
-  dt:nth-of-type(3)::before {
+  .bucket--m::before {
     height: 0.75rem;
     width: 0.75rem;
   }
 
-  dt:nth-of-type(4)::before {
+  .bucket--l::before {
     height: 1rem;
     width: 1rem;
   }
 
-  dt:nth-of-type(5)::before {
+  .bucket--xl::before {
     height: 1.25rem;
     width: 1.25rem;
   }