schnabu/maputnik
1
0
Fork 0
mirror of https://github.com/a-nyx/maputnik-with-pmtiles.git synced 2024-12-27 09:25:24 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

Moved to using @mapbox/mapbox-gl-style-spec

Browse source
This commit is contained in:
orangemug 2017-04-10 13:29:57 +01:00
parent ac8ae0da66
commit c3174a0c72
19 changed files with 52 additions and 56 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
config/webpack.loaders.js
View file

@ -6,7 +6,7 @@ module.exports = [
},
{
test: /\.jsx?$/,
exclude: /(node_modules|bower_components|public)/,
exclude: /(.*node_modules(?!\/@mapbox\/mapbox-gl-style-spec)|bower_components|public)/,
loader: 'babel',
query: {
presets: ['es2015', 'react'],

3
package.json
View file

@ -20,6 +20,7 @@
"license": "MIT",
"homepage": "https://github.com/maputnik/editor#readme",
"dependencies": {
"@mapbox/mapbox-gl-style-spec": "^8.11.0",
"classnames": "^2.2.5",
"codemirror": "^5.18.2",
"color": "^1.0.3",
@ -30,7 +31,7 @@
"lodash.clonedeep": "^4.5.0",
"lodash.isequal": "^4.4.0",
"lodash.throttle": "^4.1.1",
"mapbox-gl": "^0.34.0",
"mapbox-gl": "^0.35.0",
"mapbox-gl-inspect": "^1.2.3",
"mousetrap": "^1.6.0",
"ol-mapbox-style": "1.0.1",

8
src/components/App.jsx
View file

@ -10,9 +10,7 @@ import AppLayout from './AppLayout'
import MessagePanel from './MessagePanel'
import { downloadGlyphsMetadata, downloadSpriteMetadata } from '../libs/metadata'
import GlSpec from 'mapbox-gl/src/style-spec/reference/latest'
import validateStyleMin from 'mapbox-gl/src/style-spec/validate_style.min'
import formatStyle from 'mapbox-gl/src/style-spec/format'
import styleSpec from '@mapbox/mapbox-gl-style-spec'
import style from '../libs/style.js'
import { initialStyleUrl, loadStyleUrl } from '../libs/urlopen'
import { undoMessages, redoMessages } from '../libs/diffmessage'
@ -65,7 +63,7 @@ export default class App extends React.Component {
sources: {},
vectorLayers: {},
inspectModeEnabled: false,
spec: GlSpec,
spec: styleSpec.latest,
}
this.layerWatcher = new LayerWatcher({
@ -115,7 +113,7 @@ export default class App extends React.Component {
this.updateIcons(newStyle.sprite)
}
const errors = validateStyleMin(newStyle, GlSpec)
const errors = styleSpec.validate(newStyle, styleSpec.latest)
if(errors.length === 0) {
this.revisionStore.addRevision(newStyle)
if(save) this.saveStyle(newStyle)

4
src/components/filter/FilterEditor.jsx
View file

@ -1,7 +1,7 @@
import React from 'react'
import { combiningFilterOps } from '../../libs/filterops.js'
import GlSpec from 'mapbox-gl/src/style-spec/reference/latest'
import styleSpec from '@mapbox/mapbox-gl-style-spec'
import DocLabel from '../fields/DocLabel'
import SelectInput from '../inputs/SelectInput'
import SingleFilterEditor from './SingleFilterEditor'
@ -91,7 +91,7 @@ export default class CombiningFilterEditor extends React.Component {
<div className="maputnik-filter-editor-compound-select">
<DocLabel
label={"Compound Filter"}
doc={GlSpec.layer.filter.doc + " Combine multiple filters together by using a compound filter."}
doc={styleSpec.latest.layer.filter.doc + " Combine multiple filters together by using a compound filter."}
/>
<SelectInput
value={combiningOp}

4
src/components/layers/LayerIdBlock.jsx
View file

@ -1,6 +1,6 @@
import React from 'react'
import GlSpec from 'mapbox-gl/src/style-spec/reference/latest'
import styleSpec from '@mapbox/mapbox-gl-style-spec'
import InputBlock from '../inputs/InputBlock'
import StringInput from '../inputs/StringInput'
@ -11,7 +11,7 @@ class LayerIdBlock extends React.Component {
}
render() {
return <InputBlock label={"ID"} doc={GlSpec.layer.id.doc}>
return <InputBlock label={"ID"} doc={styleSpec.latest.layer.id.doc}>
<StringInput
value={this.props.value}
onChange={this.props.onChange}

4
src/components/layers/LayerSourceBlock.jsx
View file

@ -1,6 +1,6 @@
import React from 'react'
import GlSpec from 'mapbox-gl/src/style-spec/reference/latest'
import styleSpec from '@mapbox/mapbox-gl-style-spec'
import InputBlock from '../inputs/InputBlock'
import StringInput from '../inputs/StringInput'
import SelectInput from '../inputs/SelectInput'
@ -19,7 +19,7 @@ class LayerSourceBlock extends React.Component {
}
render() {
return <InputBlock label={"Source"} doc={GlSpec.layer.source.doc}>
return <InputBlock label={"Source"} doc={styleSpec.latest.layer.source.doc}>
<AutocompleteInput
value={this.props.value}
onChange={this.props.onChange}

4
src/components/layers/LayerSourceLayerBlock.jsx
View file

@ -1,6 +1,6 @@
import React from 'react'
import GlSpec from 'mapbox-gl/src/style-spec/reference/latest'
import styleSpec from '@mapbox/mapbox-gl-style-spec'
import InputBlock from '../inputs/InputBlock'
import StringInput from '../inputs/StringInput'
import SelectInput from '../inputs/SelectInput'
@ -19,7 +19,7 @@ class LayerSourceLayer extends React.Component {
}
render() {
return <InputBlock label={"Source Layer"} doc={GlSpec.layer['source-layer'].doc}>
return <InputBlock label={"Source Layer"} doc={styleSpec.latest.layer['source-layer'].doc}>
<AutocompleteInput
value={this.props.value}
onChange={this.props.onChange}

4
src/components/layers/LayerTypeBlock.jsx
View file

@ -1,6 +1,6 @@
import React from 'react'
import GlSpec from 'mapbox-gl/src/style-spec/reference/latest'
import styleSpec from '@mapbox/mapbox-gl-style-spec'
import InputBlock from '../inputs/InputBlock'
import SelectInput from '../inputs/SelectInput'
@ -11,7 +11,7 @@ class LayerTypeBlock extends React.Component {
}
render() {
return <InputBlock label={"Type"} doc={GlSpec.layer.type.doc}>
return <InputBlock label={"Type"} doc={styleSpec.latest.layer.type.doc}>
<SelectInput
options={[
['background', 'Background'],

10
src/components/layers/MaxZoomBlock.jsx
View file

@ -1,6 +1,6 @@
import React from 'react'
import GlSpec from 'mapbox-gl/src/style-spec/reference/latest'
import styleSpec from '@mapbox/mapbox-gl-style-spec'
import InputBlock from '../inputs/InputBlock'
import NumberInput from '../inputs/NumberInput'
@ -11,13 +11,13 @@ class MaxZoomBlock extends React.Component {
}
render() {
return <InputBlock label={"Max Zoom"} doc={GlSpec.layer.maxzoom.doc}>
return <InputBlock label={"Max Zoom"} doc={styleSpec.latest.layer.maxzoom.doc}>
<NumberInput
value={this.props.value}
onChange={this.props.onChange}
min={GlSpec.layer.maxzoom.minimum}
max={GlSpec.layer.maxzoom.maximum}
default={GlSpec.layer.maxzoom.maximum}
min={styleSpec.latest.layer.maxzoom.minimum}
max={styleSpec.latest.layer.maxzoom.maximum}
default={styleSpec.latest.layer.maxzoom.maximum}
/>
</InputBlock>
}

10
src/components/layers/MinZoomBlock.jsx
View file

@ -1,6 +1,6 @@
import React from 'react'
import GlSpec from 'mapbox-gl/src/style-spec/reference/latest'
import styleSpec from '@mapbox/mapbox-gl-style-spec'
import InputBlock from '../inputs/InputBlock'
import NumberInput from '../inputs/NumberInput'
@ -11,13 +11,13 @@ class MinZoomBlock extends React.Component {
}
render() {
return <InputBlock label={"Min Zoom"} doc={GlSpec.layer.minzoom.doc}>
return <InputBlock label={"Min Zoom"} doc={styleSpec.latest.layer.minzoom.doc}>
<NumberInput
value={this.props.value}
onChange={this.props.onChange}
min={GlSpec.layer.minzoom.minimum}
max={GlSpec.layer.minzoom.maximum}
default={GlSpec.layer.minzoom.minimum}
min={styleSpec.latest.layer.minzoom.minimum}
max={styleSpec.latest.layer.minzoom.maximum}
default={styleSpec.latest.layer.minzoom.minimum}
/>
</InputBlock>
}

3
src/components/map/MapboxGlMap.jsx
View file

@ -1,10 +1,9 @@
import React from 'react'
import ReactDOM from 'react-dom'
import MapboxGl from 'mapbox-gl/dist/mapbox-gl.js'
import MapboxGl from 'mapbox-gl'
import MapboxInspect from 'mapbox-gl-inspect'
import FeatureLayerPopup from './FeatureLayerPopup'
import FeaturePropertyPopup from './FeaturePropertyPopup'
import validateColor from 'mapbox-gl/src/style-spec/validate/validate_color'
import style from '../../libs/style.js'
import tokens from '../../config/tokens.json'
import colors from 'mapbox-gl-inspect/lib/colors'

9
src/components/modals/ExportModal.jsx
View file

@ -1,7 +1,7 @@
import React from 'react'
import { saveAs } from 'file-saver'
import GlSpec from 'mapbox-gl/src/style-spec/reference/latest'
import styleSpec from '@mapbox/mapbox-gl-style-spec'
import InputBlock from '../inputs/InputBlock'
import StringInput from '../inputs/StringInput'
import SelectInput from '../inputs/SelectInput'
@ -10,7 +10,6 @@ import Button from '../Button'
import Modal from './Modal'
import MdFileDownload from 'react-icons/lib/md/file-download'
import style from '../../libs/style.js'
import formatStyle from 'mapbox-gl/src/style-spec/format'
import GitHub from 'github-api'
@ -44,8 +43,8 @@ class Gist extends React.Component {
const preview = this.state.preview && (this.props.mapStyle.metadata || {})['maputnik:openmaptiles_access_token'];
const mapStyleStr = preview ?
formatStyle(stripAccessTokens(style.replaceAccessToken(this.props.mapStyle))) :
formatStyle(stripAccessTokens(this.props.mapStyle));
styleSpec.format(stripAccessTokens(style.replaceAccessToken(this.props.mapStyle))) :
styleSpec.format(stripAccessTokens(this.props.mapStyle));
const styleTitle = this.props.mapStyle.name || 'Style';
const htmlStr = `
<!DOCTYPE html>
@ -197,7 +196,7 @@ class ExportModal extends React.Component {
}
downloadStyle() {
const blob = new Blob([formatStyle(stripAccessTokens(this.props.mapStyle))], {type: "application/json;charset=utf-8"});
const blob = new Blob([styleSpec.format(stripAccessTokens(this.props.mapStyle))], {type: "application/json;charset=utf-8"});
saveAs(blob, this.props.mapStyle.id + ".json");
}

8
src/components/modals/SettingsModal.jsx
View file

@ -1,6 +1,6 @@
import React from 'react'
import GlSpec from 'mapbox-gl/src/style-spec/reference/latest'
import styleSpec from '@mapbox/mapbox-gl-style-spec'
import InputBlock from '../inputs/InputBlock'
import StringInput from '../inputs/StringInput'
import SelectInput from '../inputs/SelectInput'
@ -46,7 +46,7 @@ class SettingsModal extends React.Component {
title={'Style Settings'}
>
<div style={{minWidth: 350}}>
<InputBlock label={"Name"} doc={GlSpec.$root.name.doc}>
<InputBlock label={"Name"} doc={styleSpec.latest.$root.name.doc}>
<StringInput {...inputProps}
value={this.props.mapStyle.name}
onChange={this.changeStyleProperty.bind(this, "name")}
@ -58,14 +58,14 @@ class SettingsModal extends React.Component {
onChange={this.changeStyleProperty.bind(this, "owner")}
/>
</InputBlock>
<InputBlock label={"Sprite URL"} doc={GlSpec.$root.sprite.doc}>
<InputBlock label={"Sprite URL"} doc={styleSpec.latest.$root.sprite.doc}>
<StringInput {...inputProps}
value={this.props.mapStyle.sprite}
onChange={this.changeStyleProperty.bind(this, "sprite")}
/>
</InputBlock>
<InputBlock label={"Glyphs URL"} doc={GlSpec.$root.glyphs.doc}>
<InputBlock label={"Glyphs URL"} doc={styleSpec.latest.$root.glyphs.doc}>
<StringInput {...inputProps}
value={this.props.mapStyle.glyphs}
onChange={this.changeStyleProperty.bind(this, "glyphs")}

4
src/components/modals/SourcesModal.jsx
View file

@ -1,5 +1,5 @@
import React from 'react'
import GlSpec from 'mapbox-gl/src/style-spec/reference/latest'
import styleSpec from '@mapbox/mapbox-gl-style-spec'
import Modal from './Modal'
import Button from '../Button'
import InputBlock from '../inputs/InputBlock'
@ -138,7 +138,7 @@ class AddSource extends React.Component {
onChange={v => this.setState({ sourceId: v})}
/>
</InputBlock>
<InputBlock label={"Source Type"} doc={GlSpec.source_tile.type.doc}>
<InputBlock label={"Source Type"} doc={styleSpec.latest.source_tile.type.doc}>
<SelectInput
options={[
['geojson', 'GeoJSON'],

12
src/components/sources/SourceTypeEditor.jsx
View file

@ -1,5 +1,5 @@
import React from 'react'
import GlSpec from 'mapbox-gl/src/style-spec/reference/latest'
import styleSpec from '@mapbox/mapbox-gl-style-spec'
import InputBlock from '../inputs/InputBlock'
import StringInput from '../inputs/StringInput'
import NumberInput from '../inputs/NumberInput'
@ -11,7 +11,7 @@ class TileJSONSourceEditor extends React.Component {
}
render() {
return <InputBlock label={"TileJSON URL"} doc={GlSpec.source_tile.url.doc}>
return <InputBlock label={"TileJSON URL"} doc={styleSpec.latest.source_tile.url.doc}>
<StringInput
value={this.props.source.url}
onChange={url => this.props.onChange({
@ -42,7 +42,7 @@ class TileURLSourceEditor extends React.Component {
const prefix = ['1st', '2nd', '3rd', '4th', '5th', '6th', '7th']
const tiles = this.props.source.tiles || []
return tiles.map((tileUrl, tileIndex) => {
return <InputBlock key={tileIndex} label={prefix[tileIndex] + " Tile URL"} doc={GlSpec.source_tile.tiles.doc}>
return <InputBlock key={tileIndex} label={prefix[tileIndex] + " Tile URL"} doc={styleSpec.latest.source_tile.tiles.doc}>
<StringInput
value={tileUrl}
onChange={this.changeTileUrl.bind(this, tileIndex)}
@ -54,7 +54,7 @@ class TileURLSourceEditor extends React.Component {
render() {
return <div>
{this.renderTileUrls()}
<InputBlock label={"Min Zoom"} doc={GlSpec.source_tile.minzoom.doc}>
<InputBlock label={"Min Zoom"} doc={styleSpec.latest.source_tile.minzoom.doc}>
<NumberInput
value={this.props.source.minzoom || 0}
onChange={minzoom => this.props.onChange({
@ -63,7 +63,7 @@ class TileURLSourceEditor extends React.Component {
})}
/>
</InputBlock>
<InputBlock label={"Max Zoom"} doc={GlSpec.source_tile.maxzoom.doc}>
<InputBlock label={"Max Zoom"} doc={styleSpec.latest.source_tile.maxzoom.doc}>
<NumberInput
value={this.props.source.maxzoom || 22}
onChange={maxzoom => this.props.onChange({
@ -84,7 +84,7 @@ class GeoJSONSourceEditor extends React.Component {
}
render() {
return <InputBlock label={"GeoJSON Data"} doc={GlSpec.source_geojson.data.doc}>
return <InputBlock label={"GeoJSON Data"} doc={styleSpec.latest.source_geojson.data.doc}>
<StringInput
value={this.props.source.data}
onChange={data => this.props.onChange({

4
src/libs/diffmessage.js
View file

@ -1,7 +1,7 @@
import diffStyles from 'mapbox-gl/src/style-spec/diff'
import styleSpec from '@mapbox/mapbox-gl-style-spec'
export function diffMessages(beforeStyle, afterStyle) {
const changes = diffStyles(beforeStyle, afterStyle)
const changes = styleSpec.diff(beforeStyle, afterStyle)
return changes.map(cmd => cmd.command + ' ' + cmd.args.join(' '))
}

4
src/libs/filterops.js
View file

@ -1,6 +1,6 @@
import GlSpec from 'mapbox-gl/src/style-spec/reference/latest'
import styleSpec from '@mapbox/mapbox-gl-style-spec'
export const combiningFilterOps = ['all', 'any', 'none']
export const setFilterOps = ['in', '!in']
export const otherFilterOps = Object
.keys(GlSpec.filter_operator.values)
.keys(styleSpec.latest.filter_operator.values)
.filter(op => combiningFilterOps.indexOf(op) < 0)

6
src/libs/layer.js
View file

@ -1,16 +1,16 @@
import GlSpec from 'mapbox-gl/src/style-spec/reference/latest'
import styleSpec from '@mapbox/mapbox-gl-style-spec'
export function changeType(layer, newType) {
const changedPaintProps = { ...layer.paint }
Object.keys(changedPaintProps).forEach(propertyName => {
if(!(propertyName in GlSpec['paint_' + newType])) {
if(!(propertyName in styleSpec.latest['paint_' + newType])) {
delete changedPaintProps[propertyName]
}
})
const changedLayoutProps = { ...layer.layout }
Object.keys(changedLayoutProps).forEach(propertyName => {
if(!(propertyName in GlSpec['layout_' + newType])) {
if(!(propertyName in styleSpec.latest['layout_' + newType])) {
delete changedLayoutProps[propertyName]
}
})

5
src/libs/style.js
View file

@ -1,6 +1,5 @@
import React from 'react';
import spec from 'mapbox-gl/src/style-spec/reference/latest'
import derefLayers from 'mapbox-gl/src/style-spec/deref'
import deref from '@mapbox/mapbox-gl-style-spec/deref'
import tokens from '../config/tokens.json'
// Empty style is always used if no style could be restored or fetched
@ -37,7 +36,7 @@ function ensureHasNoInteractive(style) {
function ensureHasNoRefs(style) {
const derefedStyle = {
...style,
layers: derefLayers(style.layers)
layers: deref(style.layers)
}
return derefedStyle
}