Merge pull request #438 from onaio/staging

Release v1.3.6

docs/layers/heatmap.md

@@ -0,0 +1,62 @@
+# HeatMaps
+
+This directory contains documentation on adding heatmap layers.\
+For full documentation follow this [link](https://docs.mapbox.com/help/tutorials/make-a-heatmap-with-mapbox-gl-js/).
+
+## Sample heatmap layer
+
+```
+{
+    "label": "Sample Layer",
+    "type": "heatmap",
+    "source": {...},
+    "priority": <number>,
+    "paint": {
+        "heatmap-weight": [
+            'interpolate',
+            ['linear'],
+            ['get', 'magnititude'],
+            <magnititude lowest point>,  0,
+            <magnititude highest point>, 1
+        ],
+        "heatmap-intensity": [
+            'interpolate',
+            ['linear'],
+            ['zoom'],
+            0, 1,
+            9,  3
+        ],
+        "heatmap-radius": [
+            'interpolate',
+            ['linear'],
+            ['zoom'],
+            0, 2,
+            9, 20
+        ],
+        "heatmap-opacity": [
+            'interpolate',
+            ['linear'],
+            ['zoom'],
+            7,  1,
+            9, 0
+        ],
+        "heatmap-color": [
+            'interpolate',
+            ['linear'],
+            ['heatmap-density'],
+            0, 'rgba(33,102,172,0)',
+            0.2, 'rgb(103,169,207)',
+            0.4, 'rgb(209,229,240)',
+            0.6, 'rgb(253,219,199)',
+            0.8, 'rgb(239,138,98)',
+            1,  'rgb(178,24,43)'
+        ]
+    }
+}
+```
+
+### paint properties
+
+Note: The property `magnitude` in `heatmap-weight` can be any property from the dataset.
+
+For more details about the meaning and functions of each paint propery go to [Heatmap paint properties](https://docs.mapbox.com/help/tutorials/make-a-heatmap-with-mapbox-gl-js/#heatmap-paint-properties) on Mapbox.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "gisida",
-  "version": "1.3.3",
+  "version": "1.3.6",
   "description": "A dashboard builder library for map visualizations",
   "keywords": [
     "data visualization",

src/index.js

@@ -6,7 +6,7 @@ import locationsReducer from './store/reducers/locations';
 import regions from './store/reducers/regions';
 import styles from './store/reducers/styles';
 import supersetConfig from './store/reducers/superset-config';
-import MAP from './store/reducers/createMapReducer/createMapReducer';
+import MAP, { createMapReducer } from './store/reducers/map';
 
 // eslint-disable-next-line no-underscore-dangle, global-require
 if (!global._babelPolyfill) require('babel-polyfill');
@@ -17,18 +17,18 @@ gisida.version = require('../package.json').version;
 gisida.initStore = require('./store/initStore').default;
 gisida.loadLayers = require('./store/initStore').loadLayers;
 gisida.reducerRegistry = require('./store/reducerRegistry').default;
-gisida.createMapReducer = require('./store/reducers/app').createMapReducer;
 
+gisida.createMapReducer = createMapReducer
 gisida.defaultReducers = {
-    APP,
-    filter,
-    layersReducer,
-    loc,
-    locationsReducer,
-    regions,
-    styles,
-    supersetConfig,
-    'map-1': MAP,
+  APP,
+  filter,
+  layersReducer,
+  loc,
+  locationsReducer,
+  regions,
+  styles,
+  supersetConfig,
+  'map-1': MAP,
 };
 gisida.Actions = require('./store/actions/actions').default;
 gisida.prepareLayer = require('./map/prepareLayer').default;
@@ -79,4 +79,4 @@ gisida.localStorage.loadState = require('./utils/localStorage').loadState;
 gisida.localStorage.saveState = require('./utils/localStorage').saveState;
 gisida.isTokenExpired = require('./utils/isTokenExpired').default;
 
-module.exports = gisida;
+module.exports = gisida;

src/map/addLayer.js

@@ -90,7 +90,7 @@ export default function (layer, mapConfig, dispatch) {
       layout: {},
       paint: {
         'circle-color':
-          layer.categories.color instanceof Array && !layer.paint
+          layer.categories && layer.categories.color instanceof Array && !layer.paint
             ? {
               property: layer.source.join[0],
               stops: timefield ? stops[0][stops[0].length - 1] : stops[0][0],
@@ -105,7 +105,7 @@ export default function (layer, mapConfig, dispatch) {
         'circle-opacity': 0.8,
         'circle-stroke-color': layer['radius-prop'] ? 'transparent' : '#fff',
         'circle-stroke-width':
-          layer.categories.color instanceof Array && !layer.paint
+          layer.categories && layer.categories.color instanceof Array && !layer.paint
             ? {
               property: layer.source.join[0],
               stops: timefield ? stops[5][stops[5].length - 1] : stops[5][0],
@@ -350,12 +350,12 @@ export default function (layer, mapConfig, dispatch) {
 
     if (layer.categories && layer.categories.shape) {
       const iconStops = [];
-
-      layer.categories.type.forEach((type, index) => {	
-        iconStops.push([type, layer.categories.shape[index]]);
-      })
-
-      styleSpec.layout['icon-image'].stops = iconStops;
+      if (layer.categories && layer.categories.type && typeof layer.layout["icon-image"] === "object") {
+        layer.categories.type.forEach((type, index) => {
+          iconStops.push([type, layer.categories.shape[index]]);
+        });
+        styleSpec.layout['icon-image'].stops = iconStops;
+      }
     }
 
     if (
@@ -374,7 +374,63 @@ export default function (layer, mapConfig, dispatch) {
       ];
     }
   }
+
   /*
+   * heatmap ==========================================================
+   */
+  if (layer.type === 'heatmap') {
+    styleSpec = {
+      id: layer.id,
+      type: 'heatmap',
+      source: {
+        type: layer.source.type,
+      },
+      minzoom: layer.source.minzoom ? layer.source.minzoom : mapConfig.zoom,
+      maxzoom: layer.source.maxzoom ? layer.source.maxzoom : 22,
+      paint: layer.paint ? { ...layer.paint } : {},
+    };
+
+    // add filter
+    if (layer.filter) {
+      styleSpec.filter = layer.filter;
+    }
+
+    if (layer.source.type === 'geojson') {
+      if (
+        (layer.source.data && (layer.source.data.type === 'Point' || layer.source.data.type === 'FeatureCollection')) ||
+        (layer.source.data.features &&
+          layer.source.data.features[0] &&
+          layer.source.data.features[0].geometry)
+      ) {
+        styleSpec.source.data = layer.source.data;
+      } else if (layer.properties && layer.properties.length) {
+        styleSpec.source.data = {
+          type: 'FeatureCollection',
+          features: layer.source.data.map((d) => {
+            const propertiesMap = {};
+            layer.properties.forEach((prop) => {
+              propertiesMap[prop] = isNumber(d[prop])
+                ? d[prop]
+                : Number(d[prop]);
+            });
+            return {
+              type: 'Feature',
+              properties: propertiesMap,
+              geometry: {
+                type: 'Point',
+                coordinates: [Number(d.Longitude), Number(d.Latitude)],
+              },
+            };
+          }),
+        };
+      }
+    } else {
+      styleSpec.source.url = layer.source.url;
+      styleSpec['source-layer'] = layer.source.layer;
+    }
+  }
+  /*
+
    * CHART ==========================================================
    */