Rename to mapital

README.md

@@ -1,9 +1,9 @@
-# Mapolo
+# Mapital
 
-<img width="200" align="right" alt="Mapolo" src="mapolo.png" />
+<img width="200" align="right" alt="Mapital" src="mapolo.png" />
 
 A free and open visual editor for the [Mapbox GL styles](https://www.mapbox.com/mapbox-gl-style-spec/)
-targeted at developers and map designers. Creating your own custom map is easy with **Mapolo**.
+targeted at developers and map designers. Creating your own custom map is easy with **Mapital**.
 
 ## Reasons for building a Mapbox GL Style Editor
 
@@ -40,7 +40,7 @@ This is why I think we should rally behind and build our own style editor for th
 
 ## Develop
 
-Mapolo is written in ES6 and is using [React](https://github.com/facebook/react), [Immutable.js](https://facebook.github.io/immutable-js/) and [Mapbox GL JS](https://www.mapbox.com/mapbox-gl-js/api/).
+Mapital is written in ES6 and is using [React](https://github.com/facebook/react), [Immutable.js](https://facebook.github.io/immutable-js/) and [Mapbox GL JS](https://www.mapbox.com/mapbox-gl-js/api/).
 
 Install the deps, start the dev server and open the web browser on `http://localhost:8888/`.
 

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "mapolo",
+  "name": "mapital",
   "version": "0.0.1",
   "description": "A MapboxGL visual style editor",
   "main": "''",

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) {
+		if(!"mapital:color" in layer.metadata) {
-			layer.metadata["mapolo:color"] = randomColor()
+			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('')