mirror of
https://github.com/a-nyx/maputnik-with-pmtiles.git
synced 2024-11-10 06:47:44 +01:00
Rename to mapital
This commit is contained in:
parent
9c6eb50343
commit
0cf37e6cd2
10 changed files with 30 additions and 13 deletions
|
@ -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/`.
|
||||
|
||||
|
|
Before Width: | Height: | Size: 34 KiB After Width: | Height: | Size: 34 KiB |
|
@ -1,5 +1,5 @@
|
|||
{
|
||||
"name": "mapolo",
|
||||
"name": "mapital",
|
||||
"version": "0.0.1",
|
||||
"description": "A MapboxGL visual style editor",
|
||||
"main": "''",
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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() {
|
||||
|
|
|
@ -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() {
|
||||
|
|
|
@ -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}}>
|
||||
|
|
10
src/map.jsx
10
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);
|
||||
});
|
||||
|
|
|
@ -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
|
||||
})
|
||||
|
|
|
@ -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('')
|
||||
|
|
Loading…
Reference in a new issue