Rename to mapital

This commit is contained in:
lukasmartinelli 2016-09-19 15:06:34 +02:00
parent 9c6eb50343
commit 0cf37e6cd2
10 changed files with 30 additions and 13 deletions

View file

@ -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/`.

View file

Before

Width:  |  Height:  |  Size: 34 KiB

After

Width:  |  Height:  |  Size: 34 KiB

View file

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

View file

@ -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>

View file

@ -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() {

View file

@ -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() {

View file

@ -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}}>

View file

@ -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);
});

View file

@ -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
})

View file

@ -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('')