fixed bug that causes layer with no paint property to crash app, also added default color support for added layers - closes #46

Author: justenPalmer

src/config/layer.json

@@ -3,46 +3,117 @@
 		"background":{
 			"label":"background",
 			"icon":"public",
-			"colorProperty":"background-color"
+			"colorProperty":"background-color",
+			"default":{
+				"layout":{
+					"visibility":"visible"
+				},
+				"paint":{
+					"background-color":"#37474F"
+				}
+			}
 		},
 		"circle":{
 			"label":"circle",
 			"icon":"grain",
-			"colorProperty":"circle-color"
+			"colorProperty":"circle-color",
+			"default":{
+				"layout":{
+					"visibility":"visible"
+				},
+				"paint":{
+					"circle-color":{"color":"light"},
+					"circle-radius":3
+				}
+			}
 		},
 		"fill":{
 			"label":"fill",
 			"icon":"stop",
-			"colorProperty":"fill-color"
+			"colorProperty":"fill-color",
+			"default":{
+				"layout":{
+					"visibility":"visible"
+				},
+				"paint":{
+					"fill-color":{"color":"light"}
+				}
+			}
 		},
 		"fill-extrusion":{
 			"label":"fill-extrusion",
 			"icon":"filter_none",
-			"colorProperty":"fill-extrusion-color"
+			"colorProperty":"fill-extrusion-color",
+			"default":{
+				"layout":{
+					"visibility":"visible"
+				},
+				"paint":{
+					"fill-extrusion-color":{"color":"light"}
+				}
+			}
 		},
 		"heatmap":{
 			"label":"heatmap",
 			"icon":"bubble_chart",
-			"colorProperty":"heatmap-color"
+			"colorProperty":"heatmap-color",
+			"default":{
+				"layout":{
+					"visibility":"visible"
+				},
+				"paint":{
+					"heatmap-color":{"color":"light"}
+				}
+			}
 		},
 		"hillshade":{
 			"label":"hillshade",
 			"icon":"landscape",
-			"colorProperty":["hillshade-shadow-color","hillshade-highlight-color","hillshade-accent-color"]
+			"colorProperty":["hillshade-shadow-color","hillshade-highlight-color","hillshade-accent-color"],
+			"default":{
+				"layout":{
+					"visibility":"visible"
+				},
+				"paint":{
+					"hillshade-shadow-color":{"color":"light"}
+				}
+			}
 		},
 		"line":{
 			"label":"line",
 			"icon":"show_chart",
-			"colorProperty":"line-color"
+			"colorProperty":"line-color",
+			"default":{
+				"layout":{
+					"visibility":"visible"
+				},
+				"paint":{
+					"line-color":{"color":"light"}
+				}
+			}
 		},
 		"raster":{
 			"label":"raster",
-			"icon":"image"
+			"icon":"image",
+			"default":{
+				"layout":{
+					"visibility":"visible"
+				}
+			}
 		},
 		"symbol":{
 			"label":"symbol",
 			"icon":"text_format",
-			"colorProperty":["text-color","icon-color"]
+			"colorProperty":["text-color","icon-color"],
+			"default":{
+				"layout":{
+					"visibility":"visible",
+					"text-font":["Open Sans Regular","Arial Unicode MS Regular"]
+				},
+				"paint":{
+					"text-color":{"color":"light"}
+				}
+			}
 		}
 	},
 

src/model/Mlayer.js

@@ -3,6 +3,10 @@ import Store from '../Store';
 import Mstyle from './Mstyle';
 //import Model from './Model';
 
+import MaterialColor from '../utility/MaterialColor';
+
+import config from '../config/layer.json';
+
 const types = [
 	{name:'fill',value:'fill'},
 	{name:'line',value:'line'},
@@ -22,6 +26,9 @@ export default {
 		return new Promise((resolve,reject)=>{
 			if (!layer.id) return reject('no layerId');
 
+			// add default properties based on layer type
+			layer = this.addDefaultProps(layer);
+			
 			Store.dispatch({
 				type:'LAYER_ADD',
 				payload:layer
@@ -33,6 +40,28 @@ export default {
 
 	},
 
+	addDefaultProps:function(layer){
+		if (!config.types || !config.types[layer.type] || !config.types[layer.type].default) return layer;
+
+		for (let i in config.types[layer.type].default){
+			if (!layer[i]) layer[i] = config.types[layer.type].default[i];
+		}
+
+		return this.addDefaultColors(layer,layer);
+	},
+
+	addDefaultColors:function(layer,part){
+		for (let i in part){
+			if (part[i] && part[i].color && part[i].color === 'light'){
+				part[i] = MaterialColor.getLight(layer.id);
+			}
+			if (typeof part[i] === 'object' && part[i] !== null){
+				part[i] = this.addDefaultColors(layer,part[i]);
+			}
+		}
+		return part;
+	},
+
 	set:function(layerId,layer){
 		return new Promise((resolve,reject)=>{
 			if (!layerId) return reject('no layerId');

src/utility/MaterialColor.js

@@ -52,6 +52,37 @@ export default {
 		return colors[color][shade];
 	},
 
+    getLight:(key)=>{
+
+        let patternColor;
+
+        // look for patterns
+        for (const i in PATTERNS){
+            if (key.indexOf(i) !== -1){
+                patternColor = PATTERNS[i];
+                //console.log('pattern color:',patternColor);
+            }
+        }
+
+        const code = hashCode(key);
+        const ratio = (code+CODE_MAX)/CODE_RANGE;
+
+        let a=[];
+        while(a.length<3){
+            a.push(ratio%Math.pow(0.1,a.length)*Math.pow(10,a.length));
+        }
+
+        const colorInd = Math.floor(a[0]*COLOR.length);
+        const color = patternColor || COLOR[colorInd];
+
+        const shadeInd = Math.floor(a[2]*SHADE.length);
+        const shade = SHADE[shadeInd];
+
+        //console.log('code:',code,ratio,color,shade,shadeInd,over);
+
+        return colors[color][shade];
+    },
+
     getAll:()=>{
         return colors;
     }

src/view/Vlayer/VlayerAdd.jsx

@@ -36,7 +36,14 @@ export default class VlayerAdd extends React.Component {
 					//return;
 				//}
 
-				Mlayer.add(this.state).then((layer)=>{
+				const rec = {
+					id:this.state.id,
+					source:this.state.source,
+					type:this.state.type,
+					'source-layer':this.state['source-layer']
+				};
+
+				Mlayer.add(rec).then((layer)=>{
 					console.log('added:',layer);
 					handle.route('layer/'+layer.id);
 				}).catch((e)=>{

src/view/Vlayer/VlayerGroup/VlayerGroupLayout.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import {Map, List} from 'immutable';
 
 import styleSpec from '../../../vendor/style-spec/style-spec';
 
@@ -47,7 +48,7 @@ export default class VlayerGroupLayout extends React.Component {
 		//console.log('layout error:',error);
 
 		return <div className="p-1">
-			{layerGroup && layerGroup.keySeq().map((key)=>{
+			{layerGroup && Map.isMap(layerGroup) && layerGroup.keySeq().map((key)=>{
 				let name = group+'.'+key;
 
 				return <Vproperty key={name} property={{

src/view/Vlayer/VlayerGroup/VlayerGroupPaint.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import {Map, List} from 'immutable';
 
 import styleSpec from '../../../vendor/style-spec/style-spec';
 
@@ -47,7 +48,7 @@ export default class VlayerGroupPaint extends React.Component {
 		//console.log('paint error:',error);
 
 		return <div className="p-1">
-			{layerGroup.keySeq().map((key)=>{
+			{layerGroup && Map.isMap(layerGroup) && layerGroup.keySeq().map((key)=>{
 				let name = group+'.'+key;
 
 				return <Vproperty key={name} property={{