Rename to mapital

src/fields/color.jsx

@@ -12,7 +12,8 @@ static propTypes = {
   }
 
 	onChange(e) {
-		return this.props.onChange(e.target.value)
+		const value = e.target.value
+		return this.props.onChange(value === "" ? null: value)
 	}
 
 	render() {
@@ -22,7 +23,7 @@ static propTypes = {
 				style={inputStyle.input}
 				name={this.props.name}
 				placeholder={this.props.default}
-				value={this.props.value}
+				value={this.props.value ? this.props.value : ""}
 				onChange={this.onChange.bind(this)}
 			/>
 		</div>

src/fields/number.jsx

@@ -15,7 +15,12 @@ class NumberField extends React.Component {
   }
 
 	onChange(e) {
-		return this.props.onChange(parseFloat(e.target.value))
+		const value = parseFloat(e.target.value)
+		/*TODO: we can do range validation already here?
+		if(this.props.min && value < this.props.min) return
+		if(this.props.max && value > this.props.max) return
+		*/
+		this.props.onChange(value)
 	}
 
 	render() {

src/fields/string.jsx

@@ -12,7 +12,8 @@ static propTypes = {
   }
 
 	onChange(e) {
-		return this.props.onChange(e.target.value)
+		const value = e.target.value
+		return this.props.onChange(value === "" ? null: value)
 	}
 
 render() {

src/layers/editor.jsx

@@ -136,7 +136,7 @@ export class LayerEditor extends React.Component {
 				borderRight: 0,
 				borderStyle: "solid",
 				borderColor: theme.borderColor,
-				borderLeftColor: this.props.layer.getIn(['metadata', 'mapolo:color'])
+				borderLeftColor: this.props.layer.getIn(['metadata', 'mapital:color'])
 			}}>
 			<Toolbar onClick={this.toggleLayer.bind(this)}>
 				<NavItem style={{fontWeight: 400}}>

src/map.jsx

@@ -3,6 +3,7 @@ import MapboxGl from 'mapbox-gl';
 import { fullHeight } from './theme.js'
 import style from './style.js'
 import Immutable from 'immutable'
+import validateColor from 'mapbox-gl-style-spec/lib/validate/validate_color'
 
 export class Map extends React.Component {
 	static propTypes = {
@@ -26,6 +27,15 @@ export class Map extends React.Component {
 		// TODO: If there is no map yet we need to apply the changes later?
 		if(this.state.map) {
 			style.diffStyles(this.props.mapStyle, nextProps.mapStyle).forEach(change => {
+
+				//TODO: Invalid outline color can cause map to freeze?
+				if(change.command === "setPaintProperty" && change.args[1] === "fill-outline-color" ) {
+					const value = change.args[2]
+					if(validateColor({value}).length > 0) {
+						return
+					}
+				}
+
 				console.log(change.command, ...change.args)
 				this.state.map[change.command].apply(this.state.map, change.args);
 			});

src/style.js

@@ -62,8 +62,8 @@ export function colorizeLayers(layers) {
 		if(!layer.metadata) {
 			layer.metadata = {}
 		}
-		if(!"mapolo:color" in layer.metadata) {
-			layer.metadata["mapolo:color"] = randomColor()
+		if(!"mapital:color" in layer.metadata) {
+			layer.metadata["mapital:color"] = randomColor()
 		}
 	  return layer
 	})

src/stylestore.js

@@ -2,7 +2,7 @@ import { colorizeLayers } from './style.js'
 import Immutable from 'immutable'
 import style from './style.js'
 
-const storagePrefix = "mapolo"
+const storagePrefix = "mapital"
 const storageKeys = {
 	latest: [storagePrefix, 'latest_style'].join(''),
 	accessToken: [storagePrefix, 'access_token'].join('')