11 | {this.props.children}
12 |
13 | }
14 | }
15 |
16 |
--------------------------------------------------------------------------------
/src/libs/mapbox-rtl.js:
--------------------------------------------------------------------------------
1 | import MapboxGl from 'mapbox-gl'
2 | import {readFileSync} from 'fs'
3 |
4 | const data = readFileSync(__dirname+"/../../node_modules/@mapbox/mapbox-gl-rtl-text/mapbox-gl-rtl-text.js", "utf8");
5 |
6 | const blob = new window.Blob([data], {
7 | type: "text/javascript"
8 | });
9 | const objectUrl = window.URL.createObjectURL(blob);
10 |
11 | MapboxGl.setRTLTextPlugin(objectUrl);
12 |
--------------------------------------------------------------------------------
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": [
3 | "@babel/preset-env",
4 | "@babel/preset-react"
5 | ],
6 | "plugins": [
7 | "static-fs",
8 | "react-hot-loader/babel",
9 | "@babel/plugin-proposal-class-properties"
10 | ],
11 | "env": {
12 | "test": {
13 | "plugins": [
14 | ["istanbul", {
15 | "exclude": ["node_modules/**", "test/**"]
16 | }]
17 | ]
18 | }
19 | }
20 | }
21 |
--------------------------------------------------------------------------------
/src/util/spec-helper.js:
--------------------------------------------------------------------------------
1 | /**
2 | * If we don't have a default value just make one up
3 | */
4 | export function findDefaultFromSpec (spec) {
5 | if (spec.hasOwnProperty('default')) {
6 | return spec.default;
7 | }
8 |
9 | const defaults = {
10 | 'color': '#000000',
11 | 'string': '',
12 | 'boolean': false,
13 | 'number': 0,
14 | 'array': [],
15 | }
16 |
17 | return defaults[spec.type] || '';
18 | }
19 |
--------------------------------------------------------------------------------
/src/components/SmallError.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import PropTypes from 'prop-types'
3 | import './SmallError.scss';
4 |
5 |
6 | export default class SmallError extends React.Component {
7 | static propTypes = {
8 | children: PropTypes.node,
9 | }
10 |
11 | render () {
12 | return (
13 |
14 | Error: {this.props.children}
15 |
16 | );
17 | }
18 | }
19 |
20 |
--------------------------------------------------------------------------------
/test/example-layer-style.json:
--------------------------------------------------------------------------------
1 | {
2 | "id": "test-style",
3 | "version": 8,
4 | "name": "Test Style",
5 | "metadata": {
6 | "maputnik:renderer": "mbgljs"
7 | },
8 | "sources": {},
9 | "glyphs": "https://example.local/fonts/{fontstack}/{range}.pbf",
10 | "sprites": "https://example.local/fonts/{fontstack}/{range}.pbf",
11 | "layers": [
12 | {
13 | "id": "background",
14 | "type": "background"
15 | }
16 | ]
17 | }
18 |
19 |
--------------------------------------------------------------------------------
/src/components/FieldColor.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import PropTypes from 'prop-types'
3 | import Block from './Block'
4 | import InputColor from './InputColor'
5 |
6 |
7 | export default class FieldColor extends React.Component {
8 | static propTypes = {
9 | ...InputColor.propTypes,
10 | }
11 |
12 | render() {
13 | const {props} = this;
14 |
15 | return
7 | {children}
8 |
9 | )
10 | }
11 |
12 | export function Wrapper ({children}) {
13 | return (
14 |
15 | {children}
16 |
17 | );
18 | };
19 |
20 | export function InputContainer ({children}) {
21 | return (
22 |
23 | {children}
24 |
25 | );
26 | };
27 |
28 |
--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/other-issue.md:
--------------------------------------------------------------------------------
1 | ---
2 | name: Other issue
3 | about: Feature request or other issue which is no bug report
4 | title: ''
5 | labels: ''
6 | assignees: ''
7 |
8 | ---
9 |
10 |
11 |
12 |
--------------------------------------------------------------------------------
/src/components/_DeleteStopButton.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import PropTypes from 'prop-types'
3 |
4 | import InputButton from './InputButton'
5 | import {MdDelete} from 'react-icons/md'
6 |
7 |
8 | export default class DeleteStopButton extends React.Component {
9 | static propTypes = {
10 | onClick: PropTypes.func,
11 | }
12 |
13 | render() {
14 | return
17 |
23 |
17 |
22 |
17 |
21 |
17 |
18 | {[...Array(50).keys()].map(() => {
19 | return
22 |
23 | Some text
20 | })} 21 |
17 |
23 |
17 |
18 | {[...Array(50).keys()].map(() => {
19 | return
22 |
23 | Some text
20 | })} 21 |
17 |
24 |
17 |
24 |
17 |
24 |
17 |
24 | Maputnik component library
14 |15 | This is the Maputnik component library, which shows the uses of some commonly used components from the Maputnik editor. This is a stand alone place where we can better refine them and improve their API separate from their use inside the editor. 16 |
17 |18 | This should also help us better refine our CSS and make it more modular as currently we rely on the cascade quite a bit in a number of places. 19 |
20 |
21 | {this.props.children}
22 |
23 | )
24 | }
25 | else {
26 | return (
27 |
14 |
27 | }
28 | }
29 |
30 |
--------------------------------------------------------------------------------
/src/components/FieldMaxZoom.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import PropTypes from 'prop-types'
3 |
4 | import {latest} from '@mapbox/mapbox-gl-style-spec'
5 | import Block from './Block'
6 | import InputNumber from './InputNumber'
7 |
8 | export default class FieldMaxZoom extends React.Component {
9 | static propTypes = {
10 | value: PropTypes.number,
11 | onChange: PropTypes.func.isRequired,
12 | error: PropTypes.object,
13 | }
14 |
15 | render() {
16 | return
15 |
20 |
22 |
23 |
24 | {this.props.children}
25 |
26 |
33 | {}}
35 | value={value}
36 | errors={[]}
37 | fieldName={"Color"}
38 | fieldType={"color"}
39 | fieldSpec={latest['paint_fill']['fill-color']}
40 | />
41 |
42 | };
43 |
44 |
--------------------------------------------------------------------------------
/src/components/InputCheckbox.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import PropTypes from 'prop-types'
3 |
4 | export default class InputCheckbox extends React.Component {
5 | static propTypes = {
6 | value: PropTypes.bool,
7 | style: PropTypes.object,
8 | onChange: PropTypes.func,
9 | }
10 |
11 | static defaultProps = {
12 | value: false,
13 | }
14 |
15 | onChange = () => {
16 | this.props.onChange(!this.props.value);
17 | }
18 |
19 | render() {
20 | return
21 |
29 |
37 | }
38 | }
39 |
40 |
--------------------------------------------------------------------------------
/src/components/InputSelect.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import PropTypes from 'prop-types'
3 |
4 | export default class InputSelect extends React.Component {
5 | static propTypes = {
6 | value: PropTypes.string.isRequired,
7 | "data-wd-key": PropTypes.string,
8 | options: PropTypes.array.isRequired,
9 | style: PropTypes.object,
10 | onChange: PropTypes.func.isRequired,
11 | title: PropTypes.string,
12 | 'aria-label': PropTypes.string,
13 | }
14 |
15 |
16 | render() {
17 | let options = this.props.options
18 | if(options.length > 0 && !Array.isArray(options[0])) {
19 | options = options.map(v => [v, v])
20 | }
21 |
22 | return
33 | }
34 | }
35 |
36 |
37 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2015 Lukas Martinelli
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
23 |
--------------------------------------------------------------------------------
/test/functional/index.js:
--------------------------------------------------------------------------------
1 | var config = require("../config/specs");
2 | var helper = require("./helper");
3 |
4 |
5 | describe('maputnik', function() {
6 |
7 | before(function(done) {
8 | require("./util/webdriverio-ext");
9 | helper.startGeoserver(done);
10 | });
11 |
12 | after(function(done) {
13 | helper.stopGeoserver(done);
14 | });
15 |
16 | beforeEach(function() {
17 | browser.url(config.baseUrl+"?debug&style="+helper.getStyleUrl([
18 | "geojson:example",
19 | "raster:raster"
20 | ]));
21 | browser.acceptAlert();
22 | browser.execute(function() {
23 | localStorage.setItem("survey", true);
24 | });
25 | const elem = $(".maputnik-toolbar-link");
26 | elem.waitForExist();
27 | browser.flushReactUpdates();
28 | });
29 |
30 | // -------- setup --------
31 | require("./util/coverage");
32 | // -----------------------
33 |
34 | // ---- All the tests ----
35 | require("./history");
36 | require("./layers");
37 | require("./map");
38 | require("./modals");
39 | require("./screenshots");
40 | require("./accessibility");
41 | require("./keyboard");
42 | // ------------------------
43 |
44 | });
45 |
46 |
--------------------------------------------------------------------------------
/test/functional/map/index.js:
--------------------------------------------------------------------------------
1 | var config = require("../../config/specs");
2 | var helper = require("../helper");
3 |
4 |
5 | describe("map", function() {
6 | describe.skip("zoom level", function() {
7 | it("via url", function() {
8 | var zoomLevel = "12.37"
9 | browser.url(config.baseUrl+"?debug&style="+helper.getStyleUrl([
10 | "geojson:example"
11 | ])+"#"+zoomLevel+"/41.3805/2.1635");
12 | browser.alertAccept();
13 |
14 | browser.waitUntil(function () {
15 | return (
16 | browser.isVisible(".mapboxgl-ctrl-zoom")
17 | && browser.getText(".mapboxgl-ctrl-zoom") === "Zoom level: "+(zoomLevel)
18 | );
19 | }, 10*1000)
20 | })
21 | it("via map controls", function() {
22 | var zoomLevel = 12.37;
23 | browser.url(config.baseUrl+"?debug&style="+helper.getStyleUrl([
24 | "geojson:example"
25 | ])+"#"+zoomLevel+"/41.3805/2.1635");
26 | browser.alertAccept();
27 |
28 | browser.click(".mapboxgl-ctrl-zoom-in")
29 | browser.waitUntil(function () {
30 | var text = browser.getText(".mapboxgl-ctrl-zoom")
31 | return text === "Zoom level: "+(zoomLevel+1);
32 | }, 10*1000)
33 | })
34 | })
35 | })
36 |
--------------------------------------------------------------------------------
/src/components/LayerListGroup.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import PropTypes from 'prop-types'
3 | import Collapser from './Collapser'
4 |
5 | export default class LayerListGroup extends React.Component {
6 | static propTypes = {
7 | title: PropTypes.string.isRequired,
8 | "data-wd-key": PropTypes.string,
9 | isActive: PropTypes.bool.isRequired,
10 | onActiveToggle: PropTypes.func.isRequired,
11 | 'aria-controls': PropTypes.string,
12 | }
13 |
14 | render() {
15 | return
30 |
35 |
36 | this.props.onActiveToggle(!this.props.isActive)}
19 | >
20 |
27 |
28 |
33 | 34 | {this.props.message} 35 |
36 |
37 |
| ID | 33 |Preview | 34 |
40 | {type}
41 | |
42 |
43 | |
45 |
27 | {this.props.toolbar}
28 |
43 | }
44 | }
45 |
46 | export default AppLayout
47 |
--------------------------------------------------------------------------------
/src/components/IconLayer.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import PropTypes from 'prop-types'
3 |
4 | import IconLine from './IconLine.jsx'
5 | import IconFill from './IconFill.jsx'
6 | import IconSymbol from './IconSymbol.jsx'
7 | import IconBackground from './IconBackground.jsx'
8 | import IconCircle from './IconCircle.jsx'
9 | import IconMissing from './IconMissing.jsx'
10 |
11 | export default class IconLayer extends React.Component {
12 | static propTypes = {
13 | type: PropTypes.string.isRequired,
14 | style: PropTypes.object,
15 | }
16 |
17 | render() {
18 | const iconProps = { style: this.props.style }
19 | switch(this.props.type) {
20 | case 'fill-extrusion': return
29 | {this.props.layerList}
30 |
31 |
32 |
33 | {this.props.layerEditor}
34 |
35 |
36 | {this.props.map}
37 | {this.props.bottom &&
38 | {this.props.bottom}
39 |
40 | }
41 | {this.props.modals}
42 |
17 | {}}
46 | onLayerSelect={() => {}}
47 | onLayerDestroy={() => {}}
48 | onLayerCopy={() => {}}
49 | onLayerVisibilityToggle={() => {}}
50 | onMoveLayer={() => {}}
51 | sources={{}}
52 | errors={[]}
53 | />
54 |
55 |
29 | 
30 | Take the Maputnik Survey
33 |
35 | You + Maputnik = Maputnik better for you
31 |We don’t track you, so we don’t know how you use Maputnik. Help us make Maputnik better for you by completing a 7–minute survey carried out by our contributing designer.
32 |It takes 7 minutes, tops! Every question is optional.
34 |
28 | {this.props.fieldSpec &&
29 |
57 | }
58 | }
59 |
--------------------------------------------------------------------------------
/src/components/_FieldFont.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import Block from './Block'
3 | import PropTypes from 'prop-types'
4 | import FieldAutocomplete from './FieldAutocomplete'
5 |
6 | export default class FieldFont extends React.Component {
7 | static propTypes = {
8 | value: PropTypes.array,
9 | default: PropTypes.array,
10 | fonts: PropTypes.array,
11 | style: PropTypes.object,
12 | onChange: PropTypes.func.isRequired,
13 | }
14 |
15 | static defaultProps = {
16 | fonts: []
17 | }
18 |
19 | get values() {
20 | const out = this.props.value || this.props.default || [];
21 |
22 | // Always put a "" in the last field to you can keep adding entries
23 | if (out[out.length-1] !== ""){
24 | return out.concat("");
25 | }
26 | else {
27 | return out;
28 | }
29 | }
30 |
31 | changeFont(idx, newValue) {
32 | const changedValues = this.values.slice(0)
33 | changedValues[idx] = newValue
34 | const filteredValues = changedValues
35 | .filter(v => v !== undefined)
36 | .filter(v => v !== "")
37 |
38 | this.props.onChange(filteredValues);
39 | }
40 |
41 | render() {
42 | const inputs = this.values.map((value, i) => {
43 | return
30 |
36 | }
37 | {!this.props.fieldSpec &&
38 |
39 | {props.label}
40 |
41 | }
42 |
43 | {this.props.action}
44 |
45 |
46 | {props.children}
47 |
48 | {this.props.fieldSpec &&
49 |
53 |
55 | }
56 | -
56 | {inputs}
57 |
-
57 | {inputs}
58 |
48 | {content} 49 |
50 | }) 51 | 52 | const infos = this.props.infos.map((m, i) => { 53 | return{m}
54 | }) 55 | 56 | return
57 | {errors}
58 | {infos}
59 |
60 | }
61 | }
62 |
63 |
--------------------------------------------------------------------------------
/stories/InputEnum.stories.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import {useActionState} from './helper';
3 | import InputEnum from '../src/components/InputEnum';
4 | import {InputContainer} from './ui';
5 | import {withA11y} from '@storybook/addon-a11y';
6 |
7 | export default {
8 | title: 'InputEnum',
9 | component: InputEnum,
10 | decorators: [withA11y],
11 | };
12 |
13 |
14 | export const BasicFew = () => {
15 | const options = ["Foo", "Bar", "Baz"];
16 | const [value, setValue] = useActionState("onChange", "Foo");
17 |
18 | return (
19 |
48 |
49 |
59 |
63 | {this.props.title}
50 | 51 | 58 |
60 |
62 | {this.props.children}
61 |
69 | {expressionInputButton}
70 | {makeDataInputButton}
71 | {makeZoomInputButton}
72 |
73 | }
74 | else {
75 | return {expressionInputButton}
76 | }
77 | }
78 | }
79 |
--------------------------------------------------------------------------------
/src/styles/_codemirror.scss:
--------------------------------------------------------------------------------
1 | .CodeMirror-lint-tooltip {
2 | z-index: 2000 !important;
3 | }
4 |
5 | .codemirror-container {
6 | max-width: 100%;
7 | position: relative;
8 | overflow: auto;
9 | }
10 |
11 | .cm-s-maputnik.CodeMirror {
12 | height: 100%;
13 | font-size: 12px;
14 | background: transparent;
15 | }
16 |
17 | .cm-s-maputnik.CodeMirror, .cm-s-maputnik .CodeMirror-gutters {
18 | color: #8e8e8e;
19 | border: none;
20 | }
21 |
22 | .cm-s-maputnik .CodeMirror-gutters {
23 | background: #212328;
24 | }
25 |
26 | .cm-s-maputnik .CodeMirror-cursor {
27 | border-left: solid thin #f0f0f0 !important;
28 | }
29 |
30 | .cm-s-maputnik.CodeMirror-focused div.CodeMirror-selected {
31 | background: rgba(255, 255, 255, 0.10);
32 | }
33 |
34 | .cm-s-maputnik .CodeMirror-line::selection,
35 | .cm-s-maputnik .CodeMirror-line > span::selection,
36 | .cm-s-maputnik .CodeMirror-line > span > span::selection {
37 | background: rgba(255, 255, 255, 0.10);
38 | }
39 |
40 | .cm-s-maputnik .CodeMirror-line::-moz-selection,
41 | .cm-s-maputnik .CodeMirror-line > span::-moz-selection,
42 | .cm-s-maputnik .CodeMirror-line > span > span::-moz-selection {
43 | background: rgba(255, 255, 255, 0.10);
44 | }
45 |
46 | .cm-s-maputnik span.cm-string, .cm-s-maputnik span.cm-string-2 {
47 | color: #8f9d6a;
48 | }
49 | .cm-s-maputnik span.cm-number { color: #91675f; }
50 | .cm-s-maputnik span.cm-property { color: #b8a077; }
51 |
52 | .cm-s-maputnik .CodeMirror-activeline-background {
53 | background: rgba(255,255,255,0.1);
54 | }
55 |
56 | .cm-s-maputnik .CodeMirror-matchingbracket {
57 | background: hsla(223, 12%, 35%, 1);
58 | color: $color-white !important;
59 | }
60 |
61 | .cm-s-maputnik .CodeMirror-nonmatchingbracket {
62 | background-color: #bb0000;
63 | color: white !important;
64 | }
65 |
66 | @keyframes JSONEditor__animation-fade {
67 | from {
68 | opacity: 1;
69 | }
70 | to {
71 | opacity: 0;
72 | }
73 | }
74 |
75 | .JSONEditor__message {
76 | position: absolute;
77 | right: 0;
78 | font-size: 0.85em;
79 | z-index: 99999;
80 | padding: 0.3em 0.5em;
81 | background: hsla(0, 0%, 0%, 0.3);
82 | color: $color-lowgray;
83 | border-bottom-left-radius: 2px;
84 | transition: opacity 320ms ease;
85 | opacity: 0;
86 | pointer-events: none;
87 |
88 | &--on {
89 | opacity: 1;
90 | animation: 320ms ease 0s JSONEditor__animation-fade;
91 | animation-delay: 2000ms;
92 | animation-fill-mode: forwards;
93 | }
94 |
95 | kbd {
96 | font-family: monospace;
97 | }
98 | }
99 |
--------------------------------------------------------------------------------
/src/components/PropertyGroup.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import PropTypes from 'prop-types'
3 |
4 | import FieldFunction from './FieldFunction'
5 | const iconProperties = ['background-pattern', 'fill-pattern', 'line-pattern', 'fill-extrusion-pattern', 'icon-image']
6 |
7 | /** Extract field spec by {@fieldName} from the {@layerType} in the
8 | * style specification from either the paint or layout group */
9 | function getFieldSpec(spec, layerType, fieldName) {
10 | const groupName = getGroupName(spec, layerType, fieldName)
11 | const group = spec[groupName + '_' + layerType]
12 | const fieldSpec = group[fieldName]
13 | if(iconProperties.indexOf(fieldName) >= 0) {
14 | return {
15 | ...fieldSpec,
16 | values: spec.$root.sprite.values
17 | }
18 | }
19 | if(fieldName === 'text-font') {
20 | return {
21 | ...fieldSpec,
22 | values: spec.$root.glyphs.values
23 | }
24 | }
25 | return fieldSpec
26 | }
27 |
28 | function getGroupName(spec, layerType, fieldName) {
29 | const paint = spec['paint_' + layerType] || {}
30 | if (fieldName in paint) {
31 | return 'paint'
32 | } else {
33 | return 'layout'
34 | }
35 | }
36 |
37 | export default class PropertyGroup extends React.Component {
38 | static propTypes = {
39 | layer: PropTypes.object.isRequired,
40 | groupFields: PropTypes.array.isRequired,
41 | onChange: PropTypes.func.isRequired,
42 | spec: PropTypes.object.isRequired,
43 | errors: PropTypes.object,
44 | }
45 |
46 | onPropertyChange = (property, newValue) => {
47 | const group = getGroupName(this.props.spec, this.props.layer.type, property)
48 | this.props.onChange(group , property, newValue)
49 | }
50 |
51 | render() {
52 | const {errors} = this.props;
53 | const fields = this.props.groupFields.map(fieldName => {
54 | const fieldSpec = getFieldSpec(this.props.spec, this.props.layer.type, fieldName)
55 |
56 | const paint = this.props.layer.paint || {}
57 | const layout = this.props.layer.layout || {}
58 | const fieldValue = fieldName in paint ? paint[fieldName] : layout[fieldName]
59 | const fieldType = fieldName in paint ? 'paint' : 'layout';
60 |
61 | return
73 | {fields}
74 |
75 | }
76 | }
77 |
--------------------------------------------------------------------------------
/src/components/InputString.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import PropTypes from 'prop-types'
3 |
4 | export default class InputString extends React.Component {
5 | static propTypes = {
6 | "data-wd-key": PropTypes.string,
7 | value: PropTypes.string,
8 | style: PropTypes.object,
9 | default: PropTypes.string,
10 | onChange: PropTypes.func,
11 | onInput: PropTypes.func,
12 | multi: PropTypes.bool,
13 | required: PropTypes.bool,
14 | disabled: PropTypes.bool,
15 | spellCheck: PropTypes.bool,
16 | 'aria-label': PropTypes.string,
17 | }
18 |
19 | static defaultProps = {
20 | onInput: () => {},
21 | }
22 |
23 | constructor(props) {
24 | super(props)
25 | this.state = {
26 | editing: false,
27 | value: props.value || ''
28 | }
29 | }
30 |
31 | static getDerivedStateFromProps(props, state) {
32 | if (!state.editing) {
33 | return {
34 | value: props.value
35 | };
36 | }
37 | return {};
38 | }
39 |
40 | render() {
41 | let tag;
42 | let classes;
43 |
44 | if(!!this.props.multi) {
45 | tag = "textarea"
46 | classes = [
47 | "maputnik-string",
48 | "maputnik-string--multi"
49 | ]
50 | }
51 | else {
52 | tag = "input"
53 | classes = [
54 | "maputnik-string"
55 | ]
56 | }
57 |
58 | if(!!this.props.disabled) {
59 | classes.push("maputnik-string--disabled");
60 | }
61 |
62 | return React.createElement(tag, {
63 | "aria-label": this.props["aria-label"],
64 | "data-wd-key": this.props["data-wd-key"],
65 | spellCheck: this.props.hasOwnProperty("spellCheck") ? this.props.spellCheck : !(tag === "input"),
66 | disabled: this.props.disabled,
67 | className: classes.join(" "),
68 | style: this.props.style,
69 | value: this.state.value === undefined ? "" : this.state.value,
70 | placeholder: this.props.default,
71 | onChange: e => {
72 | this.setState({
73 | editing: true,
74 | value: e.target.value
75 | }, () => {
76 | this.props.onInput(this.state.value);
77 | });
78 | },
79 | onBlur: () => {
80 | if(this.state.value!==this.props.value) {
81 | this.setState({editing: false});
82 | this.props.onChange(this.state.value);
83 | }
84 | },
85 | onKeyDown: (e) => {
86 | if (e.keyCode === 13) {
87 | this.props.onChange(this.state.value);
88 | }
89 | },
90 | required: this.props.required,
91 | });
92 | }
93 | }
94 |
95 |
96 |
--------------------------------------------------------------------------------
/src/components/ModalDebug.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import PropTypes from 'prop-types'
3 |
4 | import Modal from './Modal'
5 |
6 |
7 | export default class ModalDebug extends React.Component {
8 | static propTypes = {
9 | isOpen: PropTypes.bool.isRequired,
10 | renderer: PropTypes.string.isRequired,
11 | onChangeMaboxGlDebug: PropTypes.func.isRequired,
12 | onChangeOpenlayersDebug: PropTypes.func.isRequired,
13 | onOpenToggle: PropTypes.func.isRequired,
14 | mapboxGlDebugOptions: PropTypes.object,
15 | openlayersDebugOptions: PropTypes.object,
16 | mapView: PropTypes.object,
17 | }
18 |
19 | render() {
20 | const {mapView} = this.props;
21 |
22 | const osmZoom = Math.round(mapView.zoom)+1;
23 | const osmLon = Number.parseFloat(mapView.center.lng).toFixed(5);
24 | const osmLat = Number.parseFloat(mapView.center.lat).toFixed(5);
25 |
26 | return Options
34 | {this.props.renderer === 'mbgljs' && 35 |-
36 | {Object.entries(this.props.mapboxGlDebugOptions).map(([key, val]) => {
37 | return
- 38 | 41 | 42 | })} 43 |
-
47 | {Object.entries(this.props.openlayersDebugOptions).map(([key, val]) => {
48 | return
- 49 | 52 | 53 | })} 54 |
Links
59 |60 | 65 | Open in OSM 66 | — Opens the current view on openstreetmap.org 67 |
68 |https://
31 | : <>http:// or https://
32 | }
33 | https:// domain
44 |
92 |
100 | );
101 | }
102 | }
103 |
104 |
--------------------------------------------------------------------------------
/src/libs/layerwatcher.js:
--------------------------------------------------------------------------------
1 | import throttle from 'lodash.throttle'
2 | import isEqual from 'lodash.isequal'
3 |
4 | /** Listens to map events to build up a store of available vector
5 | * layers contained in the tiles */
6 | export default class LayerWatcher {
7 | constructor(opts = {}) {
8 | this.onSourcesChange = opts.onSourcesChange || (() => {})
9 | this.onVectorLayersChange = opts.onVectorLayersChange || (() => {})
10 |
11 | this._sources = {}
12 | this._vectorLayers = {}
13 |
14 | // Since we scan over all features we want to avoid this as much as
15 | // possible and only do it after a batch of data has loaded because
16 | // we only care eventuall about knowing the fields in the vector layers
17 | this.throttledAnalyzeVectorLayerFields = throttle(this.analyzeVectorLayerFields, 5000)
18 | }
19 |
20 | analyzeMap(map) {
21 | const previousSources = { ...this._sources }
22 |
23 | Object.keys(map.style.sourceCaches).forEach(sourceId => {
24 | //NOTE: This heavily depends on the internal API of Mapbox GL
25 | //so this breaks between Mapbox GL JS releases
26 | this._sources[sourceId] = map.style.sourceCaches[sourceId]._source.vectorLayerIds
27 | })
28 |
29 | if(!isEqual(previousSources, this._sources)) {
30 | this.onSourcesChange(this._sources)
31 | }
32 |
33 | this.throttledAnalyzeVectorLayerFields(map)
34 | }
35 |
36 | analyzeVectorLayerFields(map) {
37 | const previousVectorLayers = { ...this._vectorLayers }
38 |
39 | Object.keys(this._sources).forEach(sourceId => {
40 | (this._sources[sourceId] || []).forEach(vectorLayerId => {
41 | const knownProperties = this._vectorLayers[vectorLayerId] || {}
42 | const params = { sourceLayer: vectorLayerId }
43 | map.querySourceFeatures(sourceId, params).forEach(feature => {
44 | Object.keys(feature.properties).forEach(propertyName => {
45 | const knownPropertyValues = knownProperties[propertyName] || {}
46 | knownPropertyValues[feature.properties[propertyName]] = {}
47 | knownProperties[propertyName] = knownPropertyValues
48 | })
49 | })
50 |
51 | this._vectorLayers[vectorLayerId] = knownProperties
52 | })
53 | })
54 |
55 | if(!isEqual(previousVectorLayers, this._vectorLayers)) {
56 | this.onVectorLayersChange(this._vectorLayers)
57 | }
58 |
59 | }
60 |
61 | /** Access all known sources and their vector tile ids */
62 | get sources() {
63 | return this._sources
64 | }
65 |
66 | get vectorLayers() {
67 | return this._vectorLayers
68 | }
69 | }
70 |
--------------------------------------------------------------------------------
/src/libs/apistore.js:
--------------------------------------------------------------------------------
1 | import style from './style.js'
2 | import {format} from '@mapbox/mapbox-gl-style-spec'
3 | import ReconnectingWebSocket from 'reconnecting-websocket'
4 |
5 | export class ApiStyleStore {
6 |
7 | constructor(opts) {
8 | this.onLocalStyleChange = opts.onLocalStyleChange || (() => {})
9 | const port = opts.port || '8000'
10 | const host = opts.host || 'localhost'
11 | this.localUrl = `http://${host}:${port}`
12 | this.websocketUrl = `ws://${host}:${port}/ws`
13 | this.init = this.init.bind(this)
14 | }
15 |
16 | init(cb) {
17 | fetch(this.localUrl + '/styles', {
18 | mode: 'cors',
19 | })
20 | .then((response) => {
21 | return response.json();
22 | })
23 | .then((body) => {
24 | const styleIds = body;
25 | this.latestStyleId = styleIds[0]
26 | this.notifyLocalChanges()
27 | cb(null)
28 | })
29 | .catch(function(e) {
30 | cb(new Error('Can not connect to style API'))
31 | })
32 | }
33 |
34 | notifyLocalChanges() {
35 | const connection = new ReconnectingWebSocket(this.websocketUrl)
36 | connection.onmessage = e => {
37 | if(!e.data) return
38 | console.log('Received style update from API')
39 | let parsedStyle = style.emptyStyle
40 | try {
41 | parsedStyle = JSON.parse(e.data)
42 | } catch(err) {
43 | console.error(err)
44 | }
45 | const updatedStyle = style.ensureStyleValidity(parsedStyle)
46 | this.onLocalStyleChange(updatedStyle)
47 | }
48 | }
49 |
50 | latestStyle(cb) {
51 | if(this.latestStyleId) {
52 | fetch(this.localUrl + '/styles/' + this.latestStyleId, {
53 | mode: 'cors',
54 | })
55 | .then(function(response) {
56 | return response.json();
57 | })
58 | .then(function(body) {
59 | cb(style.ensureStyleValidity(body))
60 | })
61 | } else {
62 | throw new Error('No latest style available. You need to init the api backend first.')
63 | }
64 | }
65 |
66 | // Save current style replacing previous version
67 | save(mapStyle) {
68 | const styleJSON = format(
69 | style.stripAccessTokens(
70 | style.replaceAccessTokens(mapStyle)
71 | )
72 | );
73 |
74 | const id = mapStyle.id
75 | fetch(this.localUrl + '/styles/' + id, {
76 | method: "PUT",
77 | mode: 'cors',
78 | headers: {
79 | "Content-Type": "application/json; charset=utf-8",
80 | },
81 | body: styleJSON
82 | })
83 | .catch(function(error) {
84 | if(error) console.error(error)
85 | })
86 | return mapStyle
87 | }
88 | }
89 |
--------------------------------------------------------------------------------
/test/functional/helper.js:
--------------------------------------------------------------------------------
1 | var wd = require("../wd-helper");
2 | var uuid = require('uuid/v1');
3 | var geoServer = require("../geojson-server");
4 |
5 | var testNetwork = process.env.TEST_NETWORK || "localhost";
6 | var geoserver;
7 |
8 | module.exports = {
9 | startGeoserver: function(done) {
10 | geoserver = geoServer.listen(9002, "0.0.0.0", done);
11 | },
12 | stopGeoserver: function(done) {
13 | geoserver.close(done);
14 | geoserver = undefined;
15 | },
16 | getStyleUrl: function(styles) {
17 | var port = geoserver.address().port;
18 | return "http://"+testNetwork+":"+port+"/styles/empty/"+styles.join(",");
19 | },
20 | getGeoServerUrl: function(urlPath) {
21 | var port = geoserver.address().port;
22 | return "http://"+testNetwork+":"+port+"/"+urlPath;
23 | },
24 | getStyleStore: function(browser) {
25 | var result = browser.executeAsync(function(done) {
26 | window.debug.get("maputnik", "styleStore").latestStyle(done);
27 | })
28 | return result;
29 | },
30 | getRevisionStore: function(browser) {
31 | var result = browser.execute(function(done) {
32 | var rs = window.debug.get("maputnik", "revisionStore")
33 |
34 | return {
35 | currentIdx: rs.currentIdx,
36 | revisions: rs.revisions
37 | };
38 | })
39 | return result.value;
40 | },
41 | modal: {
42 | addLayer: {
43 | open: function() {
44 | const selector = $(wd.$('layer-list:add-layer'));
45 | selector.click();
46 |
47 | // Wait for events
48 | browser.flushReactUpdates();
49 |
50 | const elem = $(wd.$('modal:add-layer'));
51 | elem.waitForExist();
52 | elem.isDisplayed();
53 | elem.isDisplayedInViewport();
54 |
55 | // Wait for events
56 | browser.flushReactUpdates();
57 | },
58 | fill: function(opts) {
59 | var type = opts.type;
60 | var layer = opts.layer;
61 | var id;
62 | if(opts.id) {
63 | id = opts.id
64 | }
65 | else {
66 | id = type+":"+uuid();
67 | }
68 |
69 | const selectBox = $(wd.$("add-layer.layer-type", "select"));
70 | selectBox.selectByAttribute('value', type);
71 | browser.flushReactUpdates();
72 |
73 | browser.setValueSafe(wd.$("add-layer.layer-id", "input"), id);
74 | if(layer) {
75 | browser.setValueSafe(wd.$("add-layer.layer-source-block", "input"), layer);
76 | }
77 |
78 | browser.flushReactUpdates();
79 | const elem_addLayer = $(wd.$("add-layer"));
80 | elem_addLayer.click();
81 |
82 | return id;
83 | }
84 | }
85 | }
86 | }
87 |
88 |
--------------------------------------------------------------------------------
/src/components/Doc.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import PropTypes from 'prop-types'
3 |
4 | export default class Doc extends React.Component {
5 | static propTypes = {
6 | fieldSpec: PropTypes.object.isRequired,
7 | }
8 |
9 | render () {
10 | const {fieldSpec} = this.props;
11 |
12 | const {doc, values} = fieldSpec;
13 | const sdkSupport = fieldSpec['sdk-support'];
14 |
15 | const headers = {
16 | js: "JS",
17 | android: "Android",
18 | ios: "iOS",
19 | macos: "macOS",
20 | };
21 |
22 | const renderValues = (
23 | !!values &&
24 | // HACK: Currently we merge additional values into the stylespec, so this is required
25 | // See
33 |
47 | }
48 | {sdkSupport &&
49 | {doc}
34 | {renderValues &&
35 | -
36 | {Object.entries(values).map(([key, value]) => {
37 | return (
38 |
-
39 |
{JSON.stringify(key)}40 |{value.doc}41 |
42 | );
43 | })}
44 |
50 |
51 |
52 |
78 |
79 | }
80 |
81 | );
82 | }
83 | }
84 |
--------------------------------------------------------------------------------
/src/styles/_zoomproperty.scss:
--------------------------------------------------------------------------------
1 | // ZOOM FUNC
2 | .maputnik-make-zoom-function {
3 | background-color: transparent;
4 | display: inline-block;
5 | vertical-align: middle;
6 | padding: 0 $margin-2 0 0;
7 |
8 | @extend .maputnik-icon-button;
9 | }
10 |
11 | // ZOOM PROPERTY
12 | .maputnik-zoom-spec-property {
13 | @extend .clearfix;
14 | }
15 |
16 | .maputnik-zoom-spec-property-label {
17 | display: inline-block;
18 | width: 41%;
19 | }
20 |
21 | .maputnik-zoom-spec-property-stop-item {
22 | margin-bottom: $margin-2;
23 | margin-top: $margin-2;
24 | }
25 |
26 | .maputnik-zoom-spec-property-stop-edit {
27 | display: inline-block;
28 | vertical-align: top;
29 | width: 16%;
30 | margin-right: 3%;
31 |
32 | > * {
33 | width: 100%;
34 | }
35 | }
36 |
37 | .maputnik-zoom-spec-property-stop-value {
38 | display: inline-block;
39 | width: 81%;
40 |
41 | > * {
42 | width: 100%;
43 | }
44 | }
45 |
46 | .maputnik-delete-stop {
47 | display: inline-block;
48 | padding-bottom: 0;
49 | padding-top: 0;
50 | vertical-align: middle;
51 |
52 | @extend .maputnik-icon-button;
53 | }
54 |
55 | .maputnik-add-stop {
56 | display: inline-block;
57 | float: right;
58 | margin-right: $margin-3;
59 | }
60 |
61 | // DATA FUNC
62 | .maputnik-make-data-function {
63 | background-color: transparent;
64 | display: inline-block;
65 | vertical-align: middle;
66 | padding: 0 $margin-2 0 0;
67 |
68 | @extend .maputnik-icon-button;
69 | }
70 |
71 | .maputnik-data-spec-property {
72 | .maputnik-input-block-label {
73 | width: 30%;
74 | }
75 |
76 | .maputnik-input-block-action {
77 | display: none;
78 | }
79 |
80 | .maputnik-input-block-content {
81 | width: 70%;
82 | }
83 |
84 | .maputnik-data-spec-property-group {
85 | margin-bottom: 3%;
86 |
87 | .maputnik-doc-wrapper {
88 | width: 25%;
89 | color: $color-lowgray;
90 | }
91 |
92 | .maputnik-doc-wrapper:hover {
93 | color: inherit;
94 | }
95 |
96 | .maputnik-data-spec-property-input {
97 | width: 75%;
98 | display: inline-block;
99 | }
100 | }
101 | }
102 |
103 | .maputnik-data-spec-block {
104 | overflow: auto;
105 |
106 | .maputnik-data-spec-property-stop-edit,
107 | .maputnik-data-spec-property-stop-data {
108 | display: inline-block;
109 | margin-bottom: 3%;
110 | }
111 |
112 | .maputnik-data-spec-property-stop-edit {
113 | width: 18%;
114 | margin-right: 3%;
115 | }
116 |
117 | .maputnik-data-spec-property-stop-data {
118 | width: 100%;
119 | }
120 |
121 | .maputnik-data-spec-property-stop-edit + .maputnik-data-spec-property-stop-data {
122 | width: 78%;
123 | }
124 | }
125 |
--------------------------------------------------------------------------------
/stories/MapMapboxGl.stories.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import MapMapboxGl from '../src/components/MapMapboxGl';
3 | import {action} from '@storybook/addon-actions';
4 | import {Wrapper} from './ui';
5 | import {withA11y} from '@storybook/addon-a11y';
6 |
7 |
8 | export default {
9 | title: 'MapMapboxGl',
10 | component: MapMapboxGl,
11 | decorators: [withA11y],
12 | };
13 |
14 | const mapStyle = {
15 | "version": 8,
16 | "sources": {
17 | "test1": {
18 | "type": "geojson",
19 | "data": {
20 | "type": "FeatureCollection",
21 | "features": [
22 | {
23 | "type": "Feature",
24 | "geometry": {
25 | "type": "Point",
26 | "coordinates": [0, -10]
27 | },
28 | "properties": {}
29 | }
30 | ]
31 | }
32 | },
33 | "test2": {
34 | "type": "geojson",
35 | "data": {
36 | "type": "FeatureCollection",
37 | "features": [
38 | {
39 | "type": "Feature",
40 | "geometry": {
41 | "type": "Point",
42 | "coordinates": [15, 10]
43 | },
44 | "properties": {}
45 | }
46 | ]
47 | }
48 | },
49 | "test3": {
50 | "type": "geojson",
51 | "data": {
52 | "type": "FeatureCollection",
53 | "features": [
54 | {
55 | "type": "Feature",
56 | "geometry": {
57 | "type": "Point",
58 | "coordinates": [-15, 10]
59 | },
60 | "properties": {}
61 | }
62 | ]
63 | }
64 | }
65 | },
66 | "sprite": "",
67 | "glyphs": "https://orangemug.github.io/font-glyphs/glyphs/{fontstack}/{range}.pbf",
68 | "layers": [
69 | {
70 | "id": "test1",
71 | "type": "circle",
72 | "source": "test1",
73 | "paint": {
74 | "circle-radius": 40,
75 | "circle-color": "red"
76 | }
77 | },
78 | {
79 | "id": "test2",
80 | "type": "circle",
81 | "source": "test2",
82 | "paint": {
83 | "circle-radius": 40,
84 | "circle-color": "green"
85 | }
86 | },
87 | {
88 | "id": "test3",
89 | "type": "circle",
90 | "source": "test3",
91 | "paint": {
92 | "circle-radius": 40,
93 | "circle-color": "blue"
94 | }
95 | }
96 | ]
97 | }
98 |
99 | export const Basic = () => {
100 | return | 54 | {Object.values(headers).map(header => { 55 | return | {header} | ; 56 | })} 57 ||
|---|---|---|
| {key} | 64 | {Object.keys(headers).map(k => { 65 | const value = supportObj[k]; 66 | if (supportObj.hasOwnProperty(k)) { 67 | return{supportObj[k]} | ; 68 | } 69 | else { 70 | returnno | ; 71 | } 72 | })} 73 |
101 | s}
105 | />
106 |
107 | };
108 |
109 |
110 |
--------------------------------------------------------------------------------
/src/components/MapMapboxGlFeaturePropertyPopup.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import PropTypes from 'prop-types'
3 | import Block from './Block'
4 | import FieldString from './FieldString'
5 |
6 | function displayValue(value) {
7 | if (typeof value === 'undefined' || value === null) return value;
8 | if (value instanceof Date) return value.toLocaleString();
9 | if (typeof value === 'object' ||
10 | typeof value === 'number' ||
11 | typeof value === 'string') return value.toString();
12 | return value;
13 | }
14 |
15 | function renderProperties(feature) {
16 | return Object.keys(feature.properties).map(propertyName => {
17 | const property = feature.properties[propertyName]
18 | return
32 |
34 |
36 | {renderFeatureId(feature)}
37 | {renderProperties(feature)}
38 |
39 | }
40 |
41 | function removeDuplicatedFeatures(features) {
42 | let uniqueFeatures = [];
43 |
44 | features.forEach(feature => {
45 | const featureIndex = uniqueFeatures.findIndex(feature2 => {
46 | return feature.layer['source-layer'] === feature2.layer['source-layer']
47 | && JSON.stringify(feature.properties) === JSON.stringify(feature2.properties)
48 | })
49 |
50 | if(featureIndex === -1) {
51 | uniqueFeatures.push(feature)
52 | } else {
53 | if(uniqueFeatures[featureIndex].hasOwnProperty('inspectModeCounter')) {
54 | uniqueFeatures[featureIndex].inspectModeCounter++
55 | } else {
56 | uniqueFeatures[featureIndex].inspectModeCounter = 2
57 | }
58 | }
59 | })
60 |
61 | return uniqueFeatures
62 | }
63 |
64 | class FeaturePropertyPopup extends React.Component {
65 | static propTypes = {
66 | features: PropTypes.array
67 | }
68 |
69 | render() {
70 | const features = removeDuplicatedFeatures(this.props.features)
71 | return {feature.layer['source']}: {feature.layer['source-layer']}{feature.inspectModeCounter && × {feature.inspectModeCounter}}
33 |
72 | {features.map(renderFeature)}
73 |
74 | }
75 | }
76 |
77 |
78 | export default FeaturePropertyPopup
79 |
--------------------------------------------------------------------------------
/src/components/SingleFilterEditor.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import PropTypes from 'prop-types'
3 |
4 | import { otherFilterOps } from '../libs/filterops.js'
5 | import InputString from './InputString'
6 | import InputAutocomplete from './InputAutocomplete'
7 | import InputSelect from './InputSelect'
8 |
9 | function tryParseInt(v) {
10 | if (v === '') return v
11 | if (isNaN(v)) return v
12 | return parseFloat(v)
13 | }
14 |
15 | function tryParseBool(v) {
16 | const isString = (typeof(v) === "string");
17 | if(!isString) {
18 | return v;
19 | }
20 |
21 | if(v.match(/^\s*true\s*$/)) {
22 | return true;
23 | }
24 | else if(v.match(/^\s*false\s*$/)) {
25 | return false;
26 | }
27 | else {
28 | return v;
29 | }
30 | }
31 |
32 | function parseFilter(v) {
33 | v = tryParseInt(v);
34 | v = tryParseBool(v);
35 | return v;
36 | }
37 |
38 | export default class SingleFilterEditor extends React.Component {
39 | static propTypes = {
40 | filter: PropTypes.array.isRequired,
41 | onChange: PropTypes.func.isRequired,
42 | properties: PropTypes.object,
43 | }
44 |
45 | static defaultProps = {
46 | properties: {},
47 | }
48 |
49 | onFilterPartChanged(filterOp, propertyName, filterArgs) {
50 | let newFilter = [filterOp, propertyName, ...filterArgs.map(parseFilter)]
51 | if(filterOp === 'has' || filterOp === '!has') {
52 | newFilter = [filterOp, propertyName]
53 | } else if(filterArgs.length === 0) {
54 | newFilter = [filterOp, propertyName, '']
55 | }
56 | this.props.onChange(newFilter)
57 | }
58 |
59 | render() {
60 | const f = this.props.filter
61 | const filterOp = f[0]
62 | const propertyName = f[1]
63 | const filterArgs = f.slice(2)
64 |
65 | return
66 |
92 | }
93 |
94 | }
95 |
96 |
--------------------------------------------------------------------------------
/stories/MapOpenLayers.stories.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import MapOpenLayers from '../src/components/MapOpenLayers';
3 | import {action} from '@storybook/addon-actions';
4 | import {Wrapper} from './ui';
5 | import {withA11y} from '@storybook/addon-a11y';
6 |
7 |
8 | export default {
9 | title: 'MapOpenLayers',
10 | component: MapOpenLayers,
11 | decorators: [withA11y],
12 | };
13 |
14 | const mapStyle = {
15 | "version": 8,
16 | "sources": {
17 | "test1": {
18 | "type": "geojson",
19 | "data": {
20 | "type": "FeatureCollection",
21 | "features": [
22 | {
23 | "type": "Feature",
24 | "geometry": {
25 | "type": "Point",
26 | "coordinates": [0, -10]
27 | },
28 | "properties": {}
29 | }
30 | ]
31 | }
32 | },
33 | "test2": {
34 | "type": "geojson",
35 | "data": {
36 | "type": "FeatureCollection",
37 | "features": [
38 | {
39 | "type": "Feature",
40 | "geometry": {
41 | "type": "Point",
42 | "coordinates": [15, 10]
43 | },
44 | "properties": {}
45 | }
46 | ]
47 | }
48 | },
49 | "test3": {
50 | "type": "geojson",
51 | "data": {
52 | "type": "FeatureCollection",
53 | "features": [
54 | {
55 | "type": "Feature",
56 | "geometry": {
57 | "type": "Point",
58 | "coordinates": [-15, 10]
59 | },
60 | "properties": {}
61 | }
62 | ]
63 | }
64 | }
65 | },
66 | "sprite": "",
67 | "glyphs": "https://orangemug.github.io/font-glyphs/glyphs/{fontstack}/{range}.pbf",
68 | "layers": [
69 | {
70 | "id": "test1",
71 | "type": "circle",
72 | "source": "test1",
73 | "paint": {
74 | "circle-radius": 40,
75 | "circle-color": "red"
76 | }
77 | },
78 | {
79 | "id": "test2",
80 | "type": "circle",
81 | "source": "test2",
82 | "paint": {
83 | "circle-radius": 40,
84 | "circle-color": "green"
85 | }
86 | },
87 | {
88 | "id": "test3",
89 | "type": "circle",
90 | "source": "test3",
91 | "paint": {
92 | "circle-radius": 40,
93 | "circle-color": "blue"
94 | }
95 | }
96 | ]
97 | }
98 |
99 | export const Basic = () => {
100 | return
67 | [propName, propName])}
71 | onChange={newPropertyName => this.onFilterPartChanged(filterOp, newPropertyName, filterArgs)}
72 | />
73 |
74 |
75 | this.onFilterPartChanged(newFilterOp, propertyName, filterArgs)}
79 | options={otherFilterOps}
80 | />
81 |
82 | {filterArgs.length > 0 &&
83 |
84 | this.onFilterPartChanged(filterOp, propertyName, v.split(','))}
88 | />
89 |
90 | }
91 |
101 | s}
105 | onChange={() => {}}
106 | debugToolbox={true}
107 | />
108 |
109 | };
110 |
111 |
112 |
113 |
--------------------------------------------------------------------------------
/src/libs/stylestore.js:
--------------------------------------------------------------------------------
1 | import style from './style.js'
2 | import { loadStyleUrl } from './urlopen'
3 | import publicSources from '../config/styles.json'
4 |
5 | const storagePrefix = "maputnik"
6 | const stylePrefix = 'style'
7 | const storageKeys = {
8 | latest: [storagePrefix, 'latest_style'].join(':'),
9 | accessToken: [storagePrefix, 'access_token'].join(':')
10 | }
11 |
12 | const defaultStyleUrl = publicSources[0].url
13 |
14 | // Fetch a default style via URL and return it or a fallback style via callback
15 | export function loadDefaultStyle(cb) {
16 | loadStyleUrl(defaultStyleUrl, cb)
17 | }
18 |
19 | // Return style ids and dates of all styles stored in local storage
20 | function loadStoredStyles() {
21 | const styles = []
22 | for (let i = 0; i < window.localStorage.length; i++) {
23 | const key = window.localStorage.key(i)
24 | if(isStyleKey(key)) {
25 | styles.push(fromKey(key))
26 | }
27 | }
28 | return styles
29 | }
30 |
31 | function isStyleKey(key) {
32 | const parts = key.split(":")
33 | return parts.length == 3 && parts[0] === storagePrefix && parts[1] === stylePrefix
34 | }
35 |
36 | // Load style id from key
37 | function fromKey(key) {
38 | if(!isStyleKey(key)) {
39 | throw "Key is not a valid style key"
40 | }
41 |
42 | const parts = key.split(":")
43 | const styleId = parts[2]
44 | return styleId
45 | }
46 |
47 | // Calculate key that identifies the style with a version
48 | function styleKey(styleId) {
49 | return [storagePrefix, stylePrefix, styleId].join(":")
50 | }
51 |
52 | // Manages many possible styles that are stored in the local storage
53 | export class StyleStore {
54 | // Tile store will load all items from local storage and
55 | // assume they do not change will working on it
56 | constructor() {
57 | this.mapStyles = loadStoredStyles()
58 | }
59 |
60 | init(cb) {
61 | cb(null)
62 | }
63 |
64 | // Delete entire style history
65 | purge() {
66 | for (let i = 0; i < window.localStorage.length; i++) {
67 | const key = window.localStorage.key(i)
68 | if(key.startsWith(storagePrefix)) {
69 | window.localStorage.removeItem(key)
70 | }
71 | }
72 | }
73 |
74 | // Find the last edited style
75 | latestStyle(cb) {
76 | if(this.mapStyles.length === 0) return loadDefaultStyle(cb)
77 | const styleId = window.localStorage.getItem(storageKeys.latest)
78 | const styleItem = window.localStorage.getItem(styleKey(styleId))
79 |
80 | if(styleItem) return cb(JSON.parse(styleItem))
81 | loadDefaultStyle(cb)
82 | }
83 |
84 | // Save current style replacing previous version
85 | save(mapStyle) {
86 | mapStyle = style.ensureStyleValidity(mapStyle)
87 | const key = styleKey(mapStyle.id)
88 | window.localStorage.setItem(key, JSON.stringify(mapStyle))
89 | window.localStorage.setItem(storageKeys.latest, mapStyle.id)
90 | return mapStyle
91 | }
92 | }
93 |
--------------------------------------------------------------------------------
/src/components/InputAutocomplete.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import PropTypes from 'prop-types'
3 | import classnames from 'classnames'
4 | import Autocomplete from 'react-autocomplete'
5 |
6 |
7 | const MAX_HEIGHT = 140;
8 |
9 | export default class InputAutocomplete extends React.Component {
10 | static propTypes = {
11 | value: PropTypes.string,
12 | options: PropTypes.array,
13 | onChange: PropTypes.func,
14 | keepMenuWithinWindowBounds: PropTypes.bool,
15 | 'aria-label': PropTypes.string,
16 | }
17 |
18 | state = {
19 | maxHeight: MAX_HEIGHT
20 | }
21 |
22 | static defaultProps = {
23 | onChange: () => {},
24 | options: [],
25 | }
26 |
27 | calcMaxHeight() {
28 | if(this.props.keepMenuWithinWindowBounds) {
29 | const maxHeight = window.innerHeight - this.autocompleteMenuEl.getBoundingClientRect().top;
30 | const limitedMaxHeight = Math.min(maxHeight, MAX_HEIGHT);
31 |
32 | if(limitedMaxHeight != this.state.maxHeight) {
33 | this.setState({
34 | maxHeight: limitedMaxHeight
35 | })
36 | }
37 | }
38 | }
39 |
40 | componentDidMount() {
41 | this.calcMaxHeight();
42 | }
43 |
44 | componentDidUpdate() {
45 | this.calcMaxHeight();
46 | }
47 |
48 | onChange (v) {
49 | this.props.onChange(v === "" ? undefined : v);
50 | }
51 |
52 | render() {
53 | return {
55 | this.autocompleteMenuEl = el;
56 | }}
57 | >
58 | item[0]}
77 | onSelect={v => this.onChange(v)}
78 | onChange={(e, v) => this.onChange(v)}
79 | shouldItemRender={(item, value="") => {
80 | if (typeof(value) === "string") {
81 | return item[0].toLowerCase().indexOf(value.toLowerCase()) > -1
82 | }
83 | }}
84 | renderItem={(item, isHighlighted) => (
85 |
97 | }
98 | }
99 |
100 |
101 |
--------------------------------------------------------------------------------
/src/config/styles.json:
--------------------------------------------------------------------------------
1 | [
2 | {
3 | "id": "osm-liberty",
4 | "title": "OSM Liberty",
5 | "url": "https://maputnik.github.io/osm-liberty/style.json",
6 | "thumbnail": "https://maputnik.github.io/thumbnails/osm-liberty.png"
7 | },
8 | {
9 | "id": "maptiler-basic-gl-style",
10 | "title": "Maptiler Basic",
11 | "url": "https://cdn.jsdelivr.net/gh/openmaptiles/klokantech-basic-gl-style@v1.9/style.json",
12 | "thumbnail": "https://maputnik.github.io/thumbnails/klokantech-basic.png"
13 | },
14 | {
15 | "id": "dark-matter",
16 | "title": "Dark Matter",
17 | "url": "https://cdn.jsdelivr.net/gh/openmaptiles/dark-matter-gl-style@v1.8/style.json",
18 | "thumbnail": "https://maputnik.github.io/thumbnails/dark-matter.png"
19 | },
20 | {
21 | "id": "positron",
22 | "title": "Positron",
23 | "url": "https://cdn.jsdelivr.net/gh/openmaptiles/positron-gl-style@v1.8/style.json",
24 | "thumbnail": "https://maputnik.github.io/thumbnails/positron.png"
25 | },
26 | {
27 | "id": "osm-bright",
28 | "title": "OSM Bright",
29 | "url": "https://cdn.jsdelivr.net/gh/openmaptiles/osm-bright-gl-style@v1.9/style.json",
30 | "thumbnail": "https://maputnik.github.io/thumbnails/osm-bright.png"
31 | },
32 | {
33 | "id": "maptiler-toner-gl-style",
34 | "title": "Toner",
35 | "url": "https://cdn.jsdelivr.net/gh/openmaptiles/toner-gl-style@339e5b7/style.json",
36 | "thumbnail": "https://maputnik.github.io/thumbnails/toner.png"
37 | },
38 | {
39 | "id": "os-zoomstack-outdoor",
40 | "title": "Zoomstack Outdoor",
41 | "url": "https://s3-eu-west-1.amazonaws.com/tiles.os.uk/v2/styles/open-zoomstack-outdoor/style.json",
42 | "thumbnail": "https://maputnik.github.io/thumbnails/os-zoomstack-outdoor.png"
43 | },
44 | {
45 | "id": "os-zoomstack-road",
46 | "title": "Zoomstack Road",
47 | "url": "https://s3-eu-west-1.amazonaws.com/tiles.os.uk/v2/styles/open-zoomstack-road/style.json",
48 | "thumbnail": "https://maputnik.github.io/thumbnails/os-zoomstack-road.png"
49 | },
50 | {
51 | "id": "os-zoomstack-light",
52 | "title": "Zoomstack Light",
53 | "url": "https://s3-eu-west-1.amazonaws.com/tiles.os.uk/v2/styles/open-zoomstack-light/style.json",
54 | "thumbnail": "https://maputnik.github.io/thumbnails/os-zoomstack-light.png"
55 | },
56 | {
57 | "id": "os-zoomstack-night",
58 | "title": "Zoomstack Night",
59 | "url": "https://s3-eu-west-1.amazonaws.com/tiles.os.uk/v2/styles/open-zoomstack-night/style.json",
60 | "thumbnail": "https://maputnik.github.io/thumbnails/os-zoomstack-night.png"
61 | },
62 | {
63 | "id": "empty-style",
64 | "title": "Empty Style",
65 | "url": "https://cdn.jsdelivr.net/gh/maputnik/editor@9cf74ca405d2be0608b57db8109cf3a6af5b9f49/src/config/empty-style.json",
66 | "thumbnail": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAECAQAAAAHDYbIAAAAEUlEQVR42mP8/58BDhiJ4wAA974H/U5Xe1oAAAAASUVORK5CYII="
67 | }
68 | ]
69 |
--------------------------------------------------------------------------------
/test/functional/history/index.js:
--------------------------------------------------------------------------------
1 | var assert = require("assert");
2 | var config = require("../../config/specs");
3 | var helper = require("../helper");
4 |
5 |
6 |
7 | describe("history", function() {
8 | let undoKeyCombo;
9 | let undoKeyComboReset;
10 | let redoKeyCombo;
11 | let redoKeyComboReset;
12 |
13 | before(function() {
14 | const isMac = browser.execute(function() {
15 | return navigator.platform.toUpperCase().indexOf('MAC') >= 0;
16 | });
17 | undoKeyCombo = ['Meta', 'z'];
18 | undoKeyComboReset = ['Meta'];
19 | redoKeyCombo = isMac ? ['Meta', 'Shift', 'z'] : ['Meta', 'y'];
20 | redoKeyComboReset = isMac ? ['Meta', 'Shift'] : ['Meta'];
21 | });
22 |
23 | /**
24 | * See
92 | {item[1]}
93 |
94 | )}
95 | />
96 |