Merge remote-tracking branch 'upstream/master' into feature/add-range-slider

2025-12-27 00:20:00 +00:00 · 2019-10-26 17:22:52 +01:00
parent 1fec89b69e 7415b8af08
commit ea3b9a20c5
54 changed files with 8413 additions and 8594 deletions
--- a/src/components/App.jsx
+++ b/src/components/App.jsx
@@ -2,6 +2,7 @@ import autoBind from 'react-autobind';
 import React from 'react'
 import cloneDeep from 'lodash.clonedeep'
 import clamp from 'lodash.clamp'
+import get from 'lodash.get'
 import {arrayMove} from 'react-sortable-hoc'
 import url from 'url'

@@ -90,8 +91,15 @@ export default class App extends React.Component {
    autoBind(this);

    this.revisionStore = new RevisionStore()
+    const params = new URLSearchParams(window.location.search.substring(1))
+    let port = params.get("localport")
+    if (port == null && (window.location.port != 80 && window.location.port != 443)) {
+      port = window.location.port
+    }
    this.styleStore = new ApiStyleStore({
-      onLocalStyleChange: mapStyle => this.onStyleChanged(mapStyle, false)
+      onLocalStyleChange: mapStyle => this.onStyleChanged(mapStyle, false),
+      port: port,
+      host: params.get("localhost")
    })


@@ -218,6 +226,9 @@ export default class App extends React.Component {
        showCollisionBoxes: false,
        showOverdrawInspector: false,
      },
+      openlayersDebugOptions: {
+        debugToolbox: false,
+      },
    }

    this.layerWatcher = new LayerWatcher({
@@ -276,6 +287,27 @@ export default class App extends React.Component {
    })
  }

+  onChangeMetadataProperty = (property, value) => {
+    // If we're changing renderer reset the map state.
+    if (
+      property === 'maputnik:renderer' &&
+      value !== get(this.state.mapStyle, ['metadata', 'maputnik:renderer'], 'mbgljs')
+    ) {
+      this.setState({
+        mapState: 'map'
+      });
+    }
+
+    const changedStyle = {
+      ...this.state.mapStyle,
+      metadata: {
+        ...this.state.mapStyle.metadata,
+        [property]: value
+      }
+    }
+    this.onStyleChanged(changedStyle)
+  }
+
  onStyleChanged = (newStyle, save=true) => {

    const errors = validate(newStyle, latest)
@@ -409,6 +441,27 @@ export default class App extends React.Component {
    })
  }

+  setDefaultValues = (styleObj) => {
+    const metadata = styleObj.metadata || {}
+    if(metadata['maputnik:renderer'] === undefined) {
+      const changedStyle = {
+        ...styleObj,
+        metadata: {
+          ...styleObj.metadata,
+          'maputnik:renderer': 'mbgljs'
+        }
+      }
+      return changedStyle
+    } else {
+      return styleObj
+    }
+  }
+
+  openStyle = (styleObj) => {
+    styleObj = this.setDefaultValues(styleObj)
+    this.onStyleChanged(styleObj)
+  }
+
  fetchSources() {
    const sourceList = {...this.state.sources};

@@ -479,9 +532,10 @@ export default class App extends React.Component {
  }

  mapRenderer() {
+    const metadata = this.state.mapStyle.metadata || {};
+
    const mapProps = {
      mapStyle: style.replaceAccessTokens(this.state.mapStyle, {allowFallback: true}),
-      options: this.state.mapboxGlDebugOptions,
      onDataChange: (e) => {
        this.layerWatcher.analyzeMap(e.map)
        this.fetchSources();
@@ -496,9 +550,12 @@ export default class App extends React.Component {
    if(renderer === 'ol') {
      mapElement = <OpenLayersMap
        {...mapProps}
+        debugToolbox={this.state.openlayersDebugOptions.debugToolbox}
+        onLayerSelect={this.onLayerSelect}
      />
    } else {
      mapElement = <MapboxGlMap {...mapProps}
+        options={this.state.mapboxGlDebugOptions}
        inspectModeEnabled={this.state.mapState === "inspect"}
        highlightedLayer={this.state.mapStyle.layers[this.state.selectedLayerIndex]}
        onLayerSelect={this.onLayerSelect} />
@@ -540,11 +597,20 @@ export default class App extends React.Component {
    this.setModal(modalName, !this.state.isOpen[modalName]);
  }

+  onChangeOpenlayersDebug = (key, value) => {
+    this.setState({
+      openlayersDebugOptions: {
+        ...this.state.openlayersDebugOptions,
+        [key]: value,
+      }
+    });
+  }
+
  onChangeMaboxGlDebug = (key, value) => {
    this.setState({
      mapboxGlDebugOptions: {
        ...this.state.mapboxGlDebugOptions,
-        [key]: value, 
+        [key]: value,
      }
    });
  }
@@ -555,6 +621,7 @@ export default class App extends React.Component {
    const metadata = this.state.mapStyle.metadata || {}

    const toolbar = <Toolbar
+      renderer={this._getRenderer()}
      mapState={this.state.mapState}
      mapStyle={this.state.mapStyle}
      inspectModeEnabled={this.state.mapState === "inspect"}
@@ -578,6 +645,7 @@ export default class App extends React.Component {
    />

    const layerEditor = selectedLayer ? <LayerEditor
+      key={selectedLayer.id}
      layer={selectedLayer}
      layerIndex={this.state.selectedLayerIndex}
      isFirstLayer={this.state.selectedLayerIndex < 1}
@@ -603,7 +671,9 @@ export default class App extends React.Component {
      <DebugModal
        renderer={this._getRenderer()}
        mapboxGlDebugOptions={this.state.mapboxGlDebugOptions}
+        openlayersDebugOptions={this.state.openlayersDebugOptions}
        onChangeMaboxGlDebug={this.onChangeMaboxGlDebug}
+        onChangeOpenlayersDebug={this.onChangeOpenlayersDebug}
        isOpen={this.state.isOpen.debug}
        onOpenToggle={this.toggleModal.bind(this, 'debug')}
      />
@@ -615,8 +685,10 @@ export default class App extends React.Component {
      <SettingsModal
        mapStyle={this.state.mapStyle}
        onStyleChanged={this.onStyleChanged}
+        onChangeMetadataProperty={this.onChangeMetadataProperty}
        isOpen={this.state.isOpen.settings}
        onOpenToggle={this.toggleModal.bind(this, 'settings')}
+        openlayersDebugOptions={this.state.openlayersDebugOptions}
      />
      <ExportModal
        mapStyle={this.state.mapStyle}
@@ -626,7 +698,7 @@ export default class App extends React.Component {
      />
      <OpenModal
        isOpen={this.state.isOpen.open}
-        onStyleOpen={this.onStyleChanged}
+        onStyleOpen={this.openStyle}
        onOpenToggle={this.toggleModal.bind(this, 'open')}
      />
      <SourcesModal
--- a/src/components/Toolbar.jsx
+++ b/src/components/Toolbar.jsx
@@ -114,6 +114,7 @@ export default class Toolbar extends React.Component {
    onToggleModal: PropTypes.func,
    onSetMapState: PropTypes.func,
    mapState: PropTypes.string,
+    renderer: PropTypes.string,
  }

  state = {
@@ -139,6 +140,7 @@ export default class Toolbar extends React.Component {
      {
        id: "inspect",
        title: "Inspect",
+        disabled: this.props.renderer !== 'mbgljs',
      },
      {
        id: "filter-deuteranopia",
--- a/src/components/fields/ColorField.jsx
+++ b/src/components/fields/ColorField.jsx
@@ -2,6 +2,7 @@ import React from 'react'
 import Color from 'color'
 import ChromePicker from 'react-color/lib/components/chrome/Chrome'
 import PropTypes from 'prop-types'
+import lodash from 'lodash';

 function formatColor(color) {
  const rgb = color.rgb
@@ -23,6 +24,15 @@ class ColorField extends React.Component {
    pickerOpened: false
  }

+  constructor () {
+    super();
+    this.onChangeNoCheck = lodash.throttle(this.onChangeNoCheck, 1000/30);
+  }
+
+  onChangeNoCheck (v) {
+    this.props.onChange(v);
+  }
+
  //TODO: I much rather would do this with absolute positioning
  //but I am too stupid to get it to work together with fixed position
  //and scrollbars so I have to fallback to JavaScript
@@ -57,6 +67,10 @@ class ColorField extends React.Component {
    }
  }

+  onChange (v) {
+    this.props.onChange(v === "" ? undefined : v);
+  }
+
  render() {
    const offset = this.calcPickerOffset()
    var currentColor = this.color.object()
@@ -78,7 +92,7 @@ class ColorField extends React.Component {
      }}>
      <ChromePicker
        color={currentColor}
-        onChange={c => this.props.onChange(formatColor(c))}
+        onChange={c => this.onChangeNoCheck(formatColor(c))}
      />
      <div
        className="maputnik-color-picker-offset"
@@ -110,7 +124,7 @@ class ColorField extends React.Component {
        name={this.props.name}
        placeholder={this.props.default}
        value={this.props.value ? this.props.value : ""}
-        onChange={(e) => this.props.onChange(e.target.value)}
+        onChange={(e) => this.onChange(e.target.value)}
      />
    </div>
  }
--- a/src/components/fields/PropertyGroup.jsx
+++ b/src/components/fields/PropertyGroup.jsx
@@ -59,7 +59,7 @@ export default class PropertyGroup extends React.Component {
        onChange={this.onPropertyChange}
        key={fieldName}
        fieldName={fieldName}
-        value={fieldValue === undefined ? fieldSpec.default : fieldValue}
+        value={fieldValue}
        fieldSpec={fieldSpec}
      />
    })
--- a/src/components/fields/SpecField.jsx
+++ b/src/components/fields/SpecField.jsx
@@ -11,6 +11,7 @@ import ArrayInput from '../inputs/ArrayInput'
 import DynamicArrayInput from '../inputs/DynamicArrayInput'
 import FontInput from '../inputs/FontInput'
 import IconInput from '../inputs/IconInput'
+import EnumInput from '../inputs/SelectInput'
 import capitalize from 'lodash.capitalize'

 const iconProperties = ['background-pattern', 'fill-pattern', 'line-pattern', 'fill-extrusion-pattern', 'icon-image']
@@ -70,17 +71,10 @@ export default class SpecField extends React.Component {
        case 'enum':
          const options = Object.keys(this.props.fieldSpec.values).map(v => [v, capitalize(v)])

-          if(options.length <= 3 && optionsLabelLength(options) <= 20) {
-            return <MultiButtonInput
-              {...commonProps}
-              options={options}
-            />
-          } else {
-            return <SelectInput
-              {...commonProps}
-              options={options}
-            />
-          }
+          return <EnumInput
+            {...commonProps}
+            options={options}
+          />
        case 'formatted':
        case 'string':
          if(iconProperties.indexOf(this.props.fieldName) >= 0) {
@@ -119,6 +113,7 @@ export default class SpecField extends React.Component {
            } else {
              return <DynamicArrayInput
                {...commonProps}
+                fieldSpec={this.props.fieldSpec}
                type={this.props.fieldSpec.value}
              />
            }
--- a/src/components/inputs/ArrayInput.jsx
+++ b/src/components/inputs/ArrayInput.jsx
@@ -12,29 +12,89 @@ class ArrayInput extends React.Component {
    onChange: PropTypes.func,
  }

-  changeValue(idx, newValue) {
-    console.log(idx, newValue)
-    const values = this.values.slice(0)
-    values[idx] = newValue
-    this.props.onChange(values)
+  static defaultProps = {
+    value: [],
+    default: [],
  }

-  get values() {
-    return this.props.value || this.props.default || []
+  constructor (props) {
+    super(props);
+    this.state = {
+      value: this.props.value.slice(0),
+      // This is so we can compare changes in getDerivedStateFromProps
+      initialPropsValue: this.props.value.slice(0),
+    };
+  }
+
+  static getDerivedStateFromProps(props, state) {
+    const value = [];
+    const initialPropsValue = state.initialPropsValue.slice(0);
+
+    Array(props.length).fill(null).map((_, i) => {
+      if (props.value[i] === state.initialPropsValue[i]) {
+        value[i] = state.value[i];
+      }
+      else {
+        value[i] = state.value[i];
+        initialPropsValue[i] = state.value[i];
+      }
+    })
+
+    return {
+      value,
+      initialPropsValue,
+    };
+  }
+
+  isComplete (value) {
+    return Array(this.props.length).fill(null).every((_, i) => {
+      const val = value[i]
+      return !(val === undefined || val === "");
+    });
+  }
+
+  changeValue(idx, newValue) {
+    const value = this.state.value.slice(0);
+    value[idx] = newValue;
+
+    this.setState({
+      value,
+    }, () => {
+      if (this.isComplete(value)) {
+        this.props.onChange(value);
+      }
+      else {
+        // Unset until complete
+        this.props.onChange(undefined);
+      }
+    });
  }

  render() {
-    const inputs = this.values.map((v, i) => {
+    const {value} = this.state;
+
+    const containsValues = (
+      value.length > 0 &&
+      !value.every(val => {
+        return (val === "" || val === undefined)
+      })
+    );
+
+    const inputs = Array(this.props.length).fill(null).map((_, i) => {
      if(this.props.type === 'number') {
        return <NumberInput
          key={i}
-          value={v}
+          default={containsValues ? undefined : this.props.default[i]}
+          value={value[i]}
+          required={containsValues ? true : false}
          onChange={this.changeValue.bind(this, i)}
        />
      } else {
        return <StringInput
          key={i}
-          value={v}
+          default={containsValues ? undefined : this.props.default[i]}
+          value={value[i]}
+          required={containsValues ? true : false}
          onChange={this.changeValue.bind(this, i)}
        />
      }
--- a/src/components/inputs/AutocompleteInput.jsx
+++ b/src/components/inputs/AutocompleteInput.jsx
@@ -44,6 +44,10 @@ class AutocompleteInput extends React.Component {
    this.calcMaxHeight();
  }

+  onChange (v) {
+    this.props.onChange(v === "" ? undefined : v);
+  }
+
  render() {
    return <div
      ref={(el) => {
@@ -68,8 +72,8 @@ class AutocompleteInput extends React.Component {
        value={this.props.value}
        items={this.props.options}
        getItemValue={(item) => item[0]}
-        onSelect={v => this.props.onChange(v)}
-        onChange={(e, v) => this.props.onChange(v)}
+        onSelect={v => this.onChange(v)}
+        onChange={(e, v) => this.onChange(v)}
        shouldItemRender={(item, value="") => {
          if (typeof(value) === "string") {
            return item[0].toLowerCase().indexOf(value.toLowerCase()) > -1
--- a/src/components/inputs/DynamicArrayInput.jsx
+++ b/src/components/inputs/DynamicArrayInput.jsx
@@ -5,6 +5,8 @@ import NumberInput from './NumberInput'
 import Button from '../Button'
 import {MdDelete} from 'react-icons/md'
 import DocLabel from '../fields/DocLabel'
+import EnumInput from '../inputs/SelectInput'
+import capitalize from 'lodash.capitalize'


 class DynamicArrayInput extends React.Component {
@@ -14,6 +16,7 @@ class DynamicArrayInput extends React.Component {
    default: PropTypes.array,
    onChange: PropTypes.func,
    style: PropTypes.object,
+    fieldSpec: PropTypes.object,
  }

  changeValue(idx, newValue) {
@@ -31,6 +34,11 @@ class DynamicArrayInput extends React.Component {
    const values = this.values.slice(0)
    if (this.props.type === 'number') {
      values.push(0)
+    }
+    else if (this.props.type === 'enum') {
+      const {fieldSpec} = this.props;
+      const defaultValue = Object.keys(fieldSpec.values)[0];
+      values.push(defaultValue);
    } else {
      values.push("")
    }
@@ -48,15 +56,28 @@ class DynamicArrayInput extends React.Component {
  render() {
    const inputs = this.values.map((v, i) => {
      const deleteValueBtn= <DeleteValueButton onClick={this.deleteValue.bind(this, i)} />
-      const input = this.props.type === 'number' 
-        ? <NumberInput
+      let input;
+      if (this.props.type === 'number') {
+        input = <NumberInput
          value={v}
          onChange={this.changeValue.bind(this, i)}
        />
-        : <StringInput
+      }
+      else if (this.props.type === 'enum') {
+        const options = Object.keys(this.props.fieldSpec.values).map(v => [v, capitalize(v)]);
+
+        input = <EnumInput
+          options={options}
          value={v}
          onChange={this.changeValue.bind(this, i)}
        />
+      }
+      else {
+        input = <StringInput
+          value={v}
+          onChange={this.changeValue.bind(this, i)}
+        />
+      }

      return <div
        style={this.props.style}
--- a/src/components/inputs/EnumInput.jsx
+++ b/src/components/inputs/EnumInput.jsx
@@ -0,0 +1,45 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import SelectInput from '../inputs/SelectInput'
+import MultiButtonInput from '../inputs/MultiButtonInput'
+
+
+function optionsLabelLength(options) {
+  let sum = 0;
+  options.forEach(([_, label]) => {
+    sum += label.length
+  })
+  return sum
+}
+
+
+class EnumInput extends React.Component {
+  static propTypes = {
+    "data-wd-key": PropTypes.string,
+    value: PropTypes.string,
+    style: PropTypes.object,
+    default: PropTypes.string,
+    onChange: PropTypes.func,
+    options: PropTypes.array,
+  }
+
+  render() {
+    const {options, value, onChange} = this.props;
+
+    if(options.length <= 3 && optionsLabelLength(options) <= 20) {
+      return <MultiButtonInput
+        options={options}
+        value={value || this.props.default}
+        onChange={onChange}
+      />
+    } else {
+      return <SelectInput
+        options={options}
+        value={value || this.props.default}
+        onChange={onChange}
+      />
+    }
+  }
+}
+
+export default EnumInput
--- a/src/components/inputs/FontInput.jsx
+++ b/src/components/inputs/FontInput.jsx
@@ -16,13 +16,25 @@ class FontInput extends React.Component {
  }

  get values() {
-   return this.props.value || this.props.default.slice(1) || []
+    const out = this.props.value || this.props.default.slice(1) || [""];
+
+    // Always put a "" in the last field to you can keep adding entries
+    if (out[out.length-1] !== ""){
+      return out.concat("");
+    }
+    else {
+      return out;
+    }
  }

  changeFont(idx, newValue) {
    const changedValues = this.values.slice(0)
    changedValues[idx] = newValue
-    this.props.onChange(changedValues)
+    const filteredValues = changedValues
+      .filter(v => v !== undefined)
+      .filter(v => v !== "")
+
+    this.props.onChange(filteredValues);
  }

  render() {
--- a/src/components/inputs/InputBlock.jsx
+++ b/src/components/inputs/InputBlock.jsx
@@ -20,7 +20,7 @@ class InputBlock extends React.Component {

  onChange(e) {
    const value = e.target.value
-    return this.props.onChange(value === "" ? null: value)
+    return this.props.onChange(value === "" ? undefined : value)
  }

  render() {
--- a/src/components/inputs/NumberInput.jsx
+++ b/src/components/inputs/NumberInput.jsx
@@ -11,6 +11,7 @@ class NumberInput extends React.Component {
    allowRange: PropTypes.bool,
    rangeStep: PropTypes.number,
    wdKey: PropTypes.string,
+    required: PropTypes.bool,
  }

  static defaultProps = {
@@ -33,14 +34,14 @@ class NumberInput extends React.Component {
        dirtyValue: props.value,
      };
    }
-    else {
-      return null;
-    }
+    return {};
  }

  changeValue(newValue) {
    this.setState({editing: true});
-    const value = parseFloat(newValue)
+    const value = (newValue === "" || newValue === undefined) ?
+      undefined :
+      parseFloat(newValue);

    const hasChanged = this.state.value !== value;
    if(this.isValid(value) && hasChanged) {
@@ -53,6 +54,10 @@ class NumberInput extends React.Component {
  }

  isValid(v) {
+    if (v === undefined) {
+      return true;
+    }
+
    const value = parseFloat(v)
    if(isNaN(value)) {
      return false
@@ -73,7 +78,7 @@ class NumberInput extends React.Component {
    this.setState({editing: false});
    // Reset explicitly to default value if value has been cleared
    if(this.state.value === "") {
-      return this.changeValue(this.props.default)
+      return;
    }

    // If set value is invalid fall back to the last valid value from props or at last resort the default value
@@ -81,7 +86,7 @@ class NumberInput extends React.Component {
      if(this.isValid(this.props.value)) {
        this.changeValue(this.props.value)
      } else {
-        this.changeValue(this.props.default)
+        this.changeValue(undefined);
      }
    }
  }
@@ -108,6 +113,7 @@ class NumberInput extends React.Component {
  }

  render() {
+<<<<<<< HEAD
    if(
      this.props.hasOwnProperty("min") && this.props.hasOwnProperty("max") &&
      this.props.min !== undefined && this.props.max !== undefined &&
@@ -152,18 +158,15 @@ class NumberInput extends React.Component {
      </div>
    }
    else {
-      return <div className="maputnik-number-container">
-        <input
-          key="text"
-          type="text"
-          spellCheck="false"
-          className="maputnik-number"
-          placeholder={this.props.default}
-          value={this.state.value}
-          onChange={e => this.changeValue(e.target.value)}
-          onBlur={this.resetValue}
-        />
-      </div>
+      return <input
+        spellCheck="false"
+        className="maputnik-number"
+        placeholder={this.props.default}
+        value={this.state.value === undefined ? "" : this.state.value}
+        onChange={e => this.changeValue(e.target.value)}
+        onBlur={this.resetValue}
+        required={this.props.required}
+      />
    }
  }
 }
--- a/src/components/inputs/StringInput.jsx
+++ b/src/components/inputs/StringInput.jsx
@@ -9,6 +9,7 @@ class StringInput extends React.Component {
    default: PropTypes.string,
    onChange: PropTypes.func,
    multi: PropTypes.bool,
+    required: PropTypes.bool,
  }

  constructor(props) {
@@ -50,7 +51,7 @@ class StringInput extends React.Component {
      spellCheck: !(tag === "input"),
      className: classes.join(" "),
      style: this.props.style,
-      value: this.state.value,
+      value: this.state.value === undefined ? "" : this.state.value,
      placeholder: this.props.default,
      onChange: e => {
        this.setState({
@@ -63,7 +64,8 @@ class StringInput extends React.Component {
          this.setState({editing: false});
          this.props.onChange(this.state.value);
        }
-      }
+      },
+      required: this.props.required,
    });
  }
 }
--- a/src/components/layers/JSONEditor.jsx
+++ b/src/components/layers/JSONEditor.jsx
@@ -1,9 +1,9 @@
 import React from 'react'
 import PropTypes from 'prop-types'

-import {Controlled as CodeMirror} from 'react-codemirror2'
 import InputBlock from '../inputs/InputBlock'
 import StringInput from '../inputs/StringInput'
+import CodeMirror from 'codemirror';

 import 'codemirror/mode/javascript/javascript'
 import 'codemirror/addon/lint/lint'
@@ -19,42 +19,89 @@ import '../../vendor/codemirror/addon/lint/json-lint'
 class JSONEditor extends React.Component {
  static propTypes = {
    layer: PropTypes.object.isRequired,
+    maxHeight: PropTypes.number,
    onChange: PropTypes.func,
  }

  constructor(props) {
    super(props)
    this.state = {
-      code: JSON.stringify(props.layer, null, 2)
-    }
+      isEditing: false,
+      prevValue: this.getValue(),
+    };
+  }
+
+  getValue () {
+    return JSON.stringify(this.props.layer, null, 2);
+  }
+
+  componentDidMount () {
+    this._doc = CodeMirror(this._el, {
+      value: this.getValue(),
+      mode: {
+        name: "javascript",
+        json: true
+      },
+      tabSize: 2,
+      theme: 'maputnik',
+      viewportMargin: Infinity,
+      lineNumbers: true,
+      lint: true,
+      gutters: ["CodeMirror-lint-markers"],
+      scrollbarStyle: "null",
+    });
+
+    this._doc.on('change', this.onChange);
+    this._doc.on('focus', this.onFocus);
+    this._doc.on('blur', this.onBlur);
+  }
+
+  onFocus = () => {
+    this.setState({
+      isEditing: true
+    });
+  }
+
+  onBlur = () => {
+    this.setState({
+      isEditing: false
+    });
+  }
+
+  componentWillUnMount () {
+    this._doc.off('change', this.onChange);
+    this._doc.off('focus', this.onFocus);
+    this._doc.off('blur', this.onBlur);
  }

  componentDidUpdate(prevProps) {
-    if (prevProps.layer !== this.props.layer) {
-      this.setState({
-        code: JSON.stringify(this.props.layer, null, 2)
-      })
+    if (!this.state.isEditing && prevProps.layer !== this.props.layer) {
+      this._cancelNextChange = true;
+      this._doc.setValue(
+        this.getValue(),
+      )
    }
  }

-  onCodeUpdate(newCode) {
-    try {
-      const parsedLayer = JSON.parse(newCode)
-      this.props.onChange(parsedLayer)
-    } catch(err) {
-      console.warn(err)
-    } finally {
-      this.setState({
-        code: newCode
-      })
+  onChange = (e) => {
+    if (this._cancelNextChange) {
+      this._cancelNextChange = false;
+      return;
+    }
+    const newCode = this._doc.getValue();
+
+    if (this.state.prevValue !== newCode) {
+      try {
+        const parsedLayer = JSON.parse(newCode)
+        this.props.onChange(parsedLayer)
+      } catch(err) {
+        console.warn(err)
+      }
    }
-  }

-  resetValue() {
-    console.log('reset')
    this.setState({
-      code: JSON.stringify(this.props.layer, null, 2)
-    })
+      prevValue: newCode,
+    });
  }

  render() {
@@ -69,11 +116,15 @@ class JSONEditor extends React.Component {
      scrollbarStyle: "null",
    }

-    return <CodeMirror
-      value={this.state.code}
-      onBeforeChange={(editor, data, value) => this.onCodeUpdate(value)}
-      onFocusChange={focused => focused ? true : this.resetValue()}
-      options={codeMirrorOptions}
+    const style = {};
+    if (this.props.maxHeight) {
+      style.maxHeight = this.props.maxHeight;
+    }
+
+    return <div
+      className="codemirror-container"
+      ref={(el) => this._el = el}
+      style={style}
    />
  }
 }
--- a/src/components/layers/LayerEditor.jsx
+++ b/src/components/layers/LayerEditor.jsx
@@ -141,7 +141,7 @@ export default class LayerEditor extends React.Component {
          onChange={v => this.changeProperty(null, 'source', v)}
        />
        }
-        {['background', 'raster', 'hillshade', 'heatmap'].indexOf(this.state.type) < 0 &&
+        {['background', 'raster', 'hillshade', 'heatmap'].indexOf(this.props.layer.type) < 0 &&
        <LayerSourceLayerBlock
          sourceLayerIds={sourceLayerIds}
          value={this.props.layer['source-layer']}
--- a/src/components/layers/LayerList.jsx
+++ b/src/components/layers/LayerList.jsx
@@ -1,6 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
+import lodash from 'lodash';

 import LayerListGroup from './LayerListGroup'
 import LayerListItem from './LayerListItem'
@@ -116,6 +117,50 @@ class LayerListContainer extends React.Component {
    return collapsed === undefined ? true : collapsed
  }

+  shouldComponentUpdate (nextProps, nextState) {
+    // Always update on state change
+    if (this.state !== nextState) {
+      return true;
+    }
+
+    // This component tree only requires id and visibility from the layers
+    // objects
+    function getRequiredProps (layer) {
+      const out = {
+        id: layer.id,
+      };
+
+      if (layer.layout) {
+        out.layout = {
+          visibility: layer.layout.visibility
+        };
+      }
+      return out;
+    }
+    const layersEqual = lodash.isEqual(
+      nextProps.layers.map(getRequiredProps),
+      this.props.layers.map(getRequiredProps),
+    );
+
+    function withoutLayers (props) {
+      const out = {
+        ...props
+      };
+      delete out['layers'];
+      return out;
+    }
+
+    // Compare the props without layers because we've already compared them
+    // efficiently above.
+    const propsEqual = lodash.isEqual(
+      withoutLayers(this.props),
+      withoutLayers(nextProps)
+    );
+
+    const propsChanged = !(layersEqual && propsEqual);
+    return propsChanged;
+  }
+
  render() {

    const listItems = []
--- a/src/components/map/FeatureLayerPopup.jsx
+++ b/src/components/map/FeatureLayerPopup.jsx
@@ -34,6 +34,11 @@ class FeatureLayerPopup extends React.Component {
  }

  _getFeatureColor(feature, zoom) {
+    // Guard because openlayers won't have this
+    if (!feature.layer.paint) {
+      return;
+    }
+
    try {
      const paintProps = feature.layer.paint;
      let propName;
@@ -105,11 +110,13 @@ class FeatureLayerPopup extends React.Component {
              this.props.onLayerSelect(feature.layer.id)
            }}
          >
-            <LayerIcon type={feature.layer.type} style={{
-              width: 14,
-              height: 14,
-              paddingRight: 3
-            }}/>
+            {feature.layer.type && 
+              <LayerIcon type={feature.layer.type} style={{
+                width: 14,
+                height: 14,
+                paddingRight: 3
+              }}/>
+            }
            {feature.layer.id}
            {feature.counter && <span> × {feature.counter}</span>}
          </label>
--- a/src/components/map/MapboxGlMap.jsx
+++ b/src/components/map/MapboxGlMap.jsx
@@ -94,16 +94,6 @@ export default class MapboxGlMap extends React.Component {
    }
  }

-  shouldComponentUpdate(nextProps, nextState) {
-    let should = false;
-    try {
-      should = JSON.stringify(this.props) !== JSON.stringify(nextProps) || JSON.stringify(this.state) !== JSON.stringify(nextState);
-    } catch(e) {
-      // no biggie, carry on
-    }
-    return should;
-  }
-
  componentDidUpdate(prevProps) {
    if(!IS_SUPPORTED) return;

@@ -144,7 +134,7 @@ export default class MapboxGlMap extends React.Component {
    const zoom = new ZoomControl;
    map.addControl(zoom, 'top-right');

-    const nav = new MapboxGl.NavigationControl();
+    const nav = new MapboxGl.NavigationControl({visualizePitch:true});
    map.addControl(nav, 'top-right');

    const tmpNode = document.createElement('div');
--- a/src/components/map/OpenLayersMap.jsx
+++ b/src/components/map/OpenLayersMap.jsx
@@ -1,11 +1,28 @@
 import React from 'react'
+import {throttle} from 'lodash';
 import PropTypes from 'prop-types'
 import { loadJSON } from '../../libs/urlopen'

+import FeatureLayerPopup from './FeatureLayerPopup';
+
 import 'ol/ol.css'
 import {apply} from 'ol-mapbox-style';
-import {Map, View} from 'ol';
+import {Map, View, Proj, Overlay} from 'ol';

+import {toLonLat} from 'ol/proj';
+import {toStringHDMS} from 'ol/coordinate';
+
+
+function renderCoords (coords) {
+  if (!coords || coords.length < 2) {
+    return null;
+  }
+  else {
+    return <span className="maputnik-coords">
+      {coords.map((coord) => String(coord).padStart(7, "\u00A0")).join(', ')}
+    </span>
+  }
+}

 export default class OpenLayersMap extends React.Component {
  static propTypes = {
@@ -13,49 +30,137 @@ export default class OpenLayersMap extends React.Component {
    mapStyle: PropTypes.object.isRequired,
    accessToken: PropTypes.string,
    style: PropTypes.object,
+    onLayerSelect: PropTypes.func.isRequired,
+    debugToolbox: PropTypes.bool.isRequired,
  }

  static defaultProps = {
    onMapLoaded: () => {},
    onDataChange: () => {},
+    onLayerSelect: () => {},
  }

  constructor(props) {
    super(props);
+    this.state = {
+      zoom: 0,
+      rotation: 0,
+      cursor: [],
+      center: [],
+    };
+    this.updateStyle = throttle(this._updateStyle.bind(this), 200);
  }

-  updateStyle(newMapStyle) {
+  _updateStyle(newMapStyle) {
    if(!this.map) return;
+
+    // See <https://github.com/openlayers/ol-mapbox-style/issues/215#issuecomment-493198815>
+    this.map.getLayers().clear();
    apply(this.map, newMapStyle);
  }

-  componentDidUpdate() {
-    this.updateStyle(this.props.mapStyle);
+  componentDidUpdate(prevProps) {
+    if (this.props.mapStyle !== prevProps.mapStyle) {
+      this.updateStyle(this.props.mapStyle);
+    }
  }

  componentDidMount() {
-    this.updateStyle(this.props.mapStyle);
+    this.overlay = new Overlay({
+      element: this.popupContainer,
+      autoPan: true,
+      autoPanAnimation: {
+        duration: 250
+      }
+    });

    const map = new Map({
      target: this.container,
-      layers: [],
+      overlays: [this.overlay],
      view: new View({
-        zoom: 2,
-        center: [52.5, -78.4]
+        zoom: 1,
+        center: [180, -90],
+      })
+    });
+
+    map.on('pointermove', (evt) => {
+      var coords = toLonLat(evt.coordinate);
+      this.setState({
+        cursor: [
+          coords[0].toFixed(2),
+          coords[1].toFixed(2)
+        ]
      })
    })
+
+    map.on('postrender', (evt) => {
+      const center = toLonLat(map.getView().getCenter());
+      this.setState({
+        center: [
+          center[0].toFixed(2),
+          center[1].toFixed(2),
+        ],
+        rotation: map.getView().getRotation().toFixed(2),
+        zoom: map.getView().getZoom().toFixed(2)
+      });
+    });
+
+
+
    this.map = map;
+    this.updateStyle(this.props.mapStyle);
+  }
+
+  closeOverlay = (e) => {
+    e.target.blur();
+    this.overlay.setPosition(undefined);
  }

  render() {
-    return <div
-      ref={x => this.container = x}
-      style={{
-        width: "100%",
-        height: "100%",
-        backgroundColor: '#fff',
-        ...this.props.style,
-      }}>
+    return <div className="maputnik-ol-container">
+      <div
+        ref={x => this.popupContainer = x}
+        style={{background: "black"}}
+        className="maputnik-popup"
+      >
+        <button
+          className="mapboxgl-popup-close-button"
+          onClick={this.closeOverlay}
+          aria-label="Close popup"
+        >
+          ×
+        </button>
+        <FeatureLayerPopup
+          features={this.state.selectedFeatures || []}
+          onLayerSelect={this.props.onLayerSelect}
+        />
+      </div>
+      <div className="maputnik-ol-zoom">
+        Zoom level: {this.state.zoom}
+      </div>
+      {this.props.debugToolbox &&
+        <div className="maputnik-ol-debug">
+          <div>
+            <label>cursor: </label>
+            <span>{renderCoords(this.state.cursor)}</span>
+          </div>
+          <div>
+            <label>center: </label>
+            <span>{renderCoords(this.state.center)}</span>
+          </div>
+          <div>
+            <label>rotation: </label>
+            <span>{this.state.rotation}</span>
+          </div>
+        </div>
+      }
+      <div
+        className="maputnik-ol"
+        ref={x => this.container = x}
+        style={{
+          ...this.props.style,
+        }}>
+      </div>
    </div>
  }
 }
--- a/src/components/modals/AddModal.jsx
+++ b/src/components/modals/AddModal.jsx
@@ -53,10 +53,10 @@ class AddModal extends React.Component {
    }
  }

-  UNSAFE_componentWillUpdate(nextProps, nextState) {
+  componentDidUpdate(prevProps, prevState) {
    // Check if source is valid for new type
-    const oldType = this.state.type;
-    const newType = nextState.type;
+    const oldType = prevState.type;
+    const newType = this.state.type;

    const availableSourcesOld = this.getSources(oldType);
    const availableSourcesNew = this.getSources(newType);
@@ -64,11 +64,11 @@ class AddModal extends React.Component {
    if(
      // Type has changed
      oldType !== newType
-      && this.state.source !== ""
+      && prevState.source !== ""
      // Was a valid source previously
-      && availableSourcesOld.indexOf(this.state.source) > -1
+      && availableSourcesOld.indexOf(prevState.source) > -1
      // And is not a valid source now
-      && availableSourcesNew.indexOf(nextState.source) < 0
+      && availableSourcesNew.indexOf(this.state.source) < 0
    ) {
      // Clear the source
      this.setState({
@@ -91,10 +91,19 @@ class AddModal extends React.Component {
        "line",
        "symbol",
        "circle",
-        "fill-extrusion"
+        "fill-extrusion",
+        "heatmap"
      ],
      raster: [
        "raster"
+      ],
+      geojson: [
+        "fill",
+        "line",
+        "symbol",
+        "circle",
+        "fill-extrusion",
+        "heatmap"
      ]
    }

--- a/src/components/modals/DebugModal.js
+++ b/src/components/modals/DebugModal.js
@@ -9,8 +9,10 @@ class DebugModal extends React.Component {
    isOpen: PropTypes.bool.isRequired,
    renderer: PropTypes.string.isRequired,
    onChangeMaboxGlDebug: PropTypes.func.isRequired,
+    onChangeOpenlayersDebug: PropTypes.func.isRequired,
    onOpenToggle: PropTypes.func.isRequired,
    mapboxGlDebugOptions: PropTypes.object,
+    openlayersDebugOptions: PropTypes.object,
  }

  render() {
@@ -33,9 +35,15 @@ class DebugModal extends React.Component {
          </ul>
        }
        {this.props.renderer === 'ol' &&
-          <div>
-            No debug options available for the OpenLayers renderer
-          </div>
+          <ul>
+            {Object.entries(this.props.openlayersDebugOptions).map(([key, val]) => {
+              return <li key={key}>
+                <label>
+                  <input type="checkbox" checked={val} onClick={(e) => this.props.onChangeOpenlayersDebug(key, e.target.checked)} /> {key}
+                </label>
+              </li>
+            })}
+          </ul>
        }
      </div>
    </Modal>
--- a/src/components/modals/SettingsModal.jsx
+++ b/src/components/modals/SettingsModal.jsx
@@ -3,40 +3,81 @@ import PropTypes from 'prop-types'

 import {latest} from '@mapbox/mapbox-gl-style-spec'
 import InputBlock from '../inputs/InputBlock'
+import ArrayInput from '../inputs/ArrayInput'
+import NumberInput from '../inputs/NumberInput'
 import StringInput from '../inputs/StringInput'
 import SelectInput from '../inputs/SelectInput'
+import EnumInput from '../inputs/EnumInput'
+import ColorField from '../fields/ColorField'
 import Modal from './Modal'

 class SettingsModal extends React.Component {
  static propTypes = {
    mapStyle: PropTypes.object.isRequired,
    onStyleChanged: PropTypes.func.isRequired,
+    onChangeMetadataProperty: PropTypes.func.isRequired,
    isOpen: PropTypes.bool.isRequired,
    onOpenToggle: PropTypes.func.isRequired,
  }

+  changeTransitionProperty(property, value) {
+    const transition = {
+      ...this.props.mapStyle.transition,
+    }
+
+    if (value === undefined) {
+      delete transition[property];
+    }
+    else {
+      transition[property] = value;
+    }
+
+    this.props.onStyleChanged({
+      ...this.props.mapStyle,
+      transition,
+    });
+  }
+
+  changeLightProperty(property, value) {
+    const light = {
+      ...this.props.mapStyle.light,
+    }
+
+    if (value === undefined) {
+      delete light[property];
+    }
+    else {
+      light[property] = value;
+    }
+
+    this.props.onStyleChanged({
+      ...this.props.mapStyle,
+      light,
+    });
+  }
+
  changeStyleProperty(property, value) {
    const changedStyle = {
      ...this.props.mapStyle,
-      [property]: value
-    }
-    this.props.onStyleChanged(changedStyle)
-  }
+    };

-  changeMetadataProperty(property, value) {
-    const changedStyle = {
-      ...this.props.mapStyle,
-      metadata: {
-        ...this.props.mapStyle.metadata,
-        [property]: value
-      }
+    if (value === undefined) {
+      delete changedStyle[property];
    }
-    this.props.onStyleChanged(changedStyle)
+    else {
+      changedStyle[property] = value;
+    }
+    this.props.onStyleChanged(changedStyle);
  }

  render() {
    const metadata = this.props.mapStyle.metadata || {}
+    const {onChangeMetadataProperty, mapStyle} = this.props;
    const inputProps = { }
+
+    const light = this.props.mapStyle.light || {};
+    const transition = this.props.mapStyle.transition || {};
+
    return <Modal
      data-wd-key="modal-settings"
      isOpen={this.props.isOpen}
@@ -78,7 +119,7 @@ class SettingsModal extends React.Component {
        <StringInput {...inputProps}
          data-wd-key="modal-settings.maputnik:mapbox_access_token" 
          value={metadata['maputnik:mapbox_access_token']}
-          onChange={this.changeMetadataProperty.bind(this, "maputnik:mapbox_access_token")}
+          onChange={onChangeMetadataProperty.bind(this, "maputnik:mapbox_access_token")}
        />
      </InputBlock>

@@ -86,7 +127,7 @@ class SettingsModal extends React.Component {
        <StringInput {...inputProps}
          data-wd-key="modal-settings.maputnik:openmaptiles_access_token" 
          value={metadata['maputnik:openmaptiles_access_token']}
-          onChange={this.changeMetadataProperty.bind(this, "maputnik:openmaptiles_access_token")}
+          onChange={onChangeMetadataProperty.bind(this, "maputnik:openmaptiles_access_token")}
        />
      </InputBlock>

@@ -94,7 +135,101 @@ class SettingsModal extends React.Component {
        <StringInput {...inputProps}
          data-wd-key="modal-settings.maputnik:thunderforest_access_token" 
          value={metadata['maputnik:thunderforest_access_token']}
-          onChange={this.changeMetadataProperty.bind(this, "maputnik:thunderforest_access_token")}
+          onChange={onChangeMetadataProperty.bind(this, "maputnik:thunderforest_access_token")}
+        />
+      </InputBlock>
+
+      <InputBlock label={"Center"} doc={latest.$root.center.doc}>
+        <ArrayInput
+          length={2}
+          type="number"
+          value={mapStyle.center}
+          default={latest.$root.center.default || [0, 0]}
+          onChange={this.changeStyleProperty.bind(this, "center")}
+        />
+      </InputBlock>
+
+      <InputBlock label={"Zoom"} doc={latest.$root.zoom.doc}>
+        <NumberInput
+          {...inputProps}
+          value={mapStyle.zoom}
+          default={latest.$root.zoom.default || 0}
+          onChange={this.changeStyleProperty.bind(this, "zoom")}
+        />
+      </InputBlock>
+
+      <InputBlock label={"Bearing"} doc={latest.$root.bearing.doc}>
+        <NumberInput
+          {...inputProps}
+          value={mapStyle.bearing}
+          default={latest.$root.bearing.default}
+          onChange={this.changeStyleProperty.bind(this, "bearing")}
+        />
+      </InputBlock>
+
+      <InputBlock label={"Pitch"} doc={latest.$root.pitch.doc}>
+        <NumberInput
+          {...inputProps}
+          value={mapStyle.pitch}
+          default={latest.$root.pitch.default}
+          onChange={this.changeStyleProperty.bind(this, "pitch")}
+        />
+      </InputBlock>
+
+      <InputBlock label={"Light anchor"} doc={latest.light.anchor.doc}>
+        <EnumInput
+          {...inputProps}
+          value={light.anchor}
+          options={Object.keys(latest.light.anchor.values)}
+          default={latest.light.anchor.default}
+          onChange={this.changeLightProperty.bind(this, "anchor")}
+        />
+      </InputBlock>
+
+      <InputBlock label={"Light color"} doc={latest.light.color.doc}>
+        <ColorField
+          {...inputProps}
+          value={light.color}
+          default={latest.light.color.default}
+          onChange={this.changeLightProperty.bind(this, "color")}
+        />
+      </InputBlock>
+
+      <InputBlock label={"Light intensity"} doc={latest.light.intensity.doc}>
+        <NumberInput
+          {...inputProps}
+          value={light.intensity}
+          default={latest.light.intensity.default}
+          onChange={this.changeLightProperty.bind(this, "intensity")}
+        />
+      </InputBlock>
+
+      <InputBlock label={"Light position"} doc={latest.light.position.doc}>
+        <ArrayInput
+          {...inputProps}
+          type="number"
+          length={latest.light.position.length}
+          value={light.position}
+          default={latest.light.position.default}
+          onChange={this.changeLightProperty.bind(this, "position")}
+        />
+      </InputBlock>
+
+      <InputBlock label={"Transition delay"} doc={latest.transition.delay.doc}>
+        <NumberInput
+          {...inputProps}
+          value={transition.delay}
+          default={latest.transition.delay.default}
+          onChange={this.changeTransitionProperty.bind(this, "delay")}
+        />
+      </InputBlock>
+
+      <InputBlock label={"Transition duration"} doc={latest.transition.duration.doc}>
+        <NumberInput
+          {...inputProps}
+          value={transition.duration}
+          default={latest.transition.duration.default}
+          onChange={this.changeTransitionProperty.bind(this, "duration")}
        />
      </InputBlock>

@@ -106,9 +241,12 @@ class SettingsModal extends React.Component {
            ['ol', 'Open Layers (experimental)'],
          ]}
          value={metadata['maputnik:renderer'] || 'mbgljs'}
-          onChange={this.changeMetadataProperty.bind(this, 'maputnik:renderer')}
+          onChange={onChangeMetadataProperty.bind(this, 'maputnik:renderer')}
        />
      </InputBlock>
+
+
+
      </div>
    </Modal>
  }
--- a/src/components/modals/SourcesModal.jsx
+++ b/src/components/modals/SourcesModal.jsx
@@ -52,7 +52,14 @@ function editorMode(source) {
    if(source.tiles) return 'tilexyz_vector'
    return 'tilejson_vector'
  }
-  if(source.type === 'geojson') return 'geojson'
+  if(source.type === 'geojson') {
+    if (typeof(source.data) === "string") {
+      return 'geojson_url';
+    }
+    else {
+      return 'geojson_json';
+    }
+  }
  return null
 }

@@ -106,9 +113,13 @@ class AddSource extends React.Component {
  defaultSource(mode) {
    const source = (this.state || {}).source || {}
    switch(mode) {
-      case 'geojson': return {
+      case 'geojson_url': return {
        type: 'geojson',
-        data: source.data || 'http://localhost:3000/geojson.json'
+        data: 'http://localhost:3000/geojson.json'
+      }
+      case 'geojson_json': return {
+        type: 'geojson',
+        data: {}
      }
      case 'tilejson_vector': return {
        type: 'vector',
@@ -155,7 +166,8 @@ class AddSource extends React.Component {
      <InputBlock label={"Source Type"} doc={latest.source_vector.type.doc}>
        <SelectInput
          options={[
-            ['geojson', 'GeoJSON'],
+            ['geojson_json', 'GeoJSON (JSON)'],
+            ['geojson_url', 'GeoJSON (URL)'],
            ['tilejson_vector', 'Vector (TileJSON URL)'],
            ['tilexyz_vector', 'Vector (XYZ URLs)'],
            ['tilejson_raster', 'Raster (TileJSON URL)'],
--- a/src/components/sources/SourceTypeEditor.jsx
+++ b/src/components/sources/SourceTypeEditor.jsx
@@ -5,6 +5,7 @@ import InputBlock from '../inputs/InputBlock'
 import StringInput from '../inputs/StringInput'
 import NumberInput from '../inputs/NumberInput'
 import SelectInput from '../inputs/SelectInput'
+import JSONEditor from '../layers/JSONEditor'


 class TileJSONSourceEditor extends React.Component {
@@ -86,14 +87,14 @@ class TileURLSourceEditor extends React.Component {
  }
 }

-class GeoJSONSourceEditor extends React.Component {
+class GeoJSONSourceUrlEditor extends React.Component {
  static propTypes = {
    source: PropTypes.object.isRequired,
    onChange: PropTypes.func.isRequired,
  }

  render() {
-    return <InputBlock label={"GeoJSON Data"} doc={latest.source_geojson.data.doc}>
+    return <InputBlock label={"GeoJSON URL"} doc={latest.source_geojson.data.doc}>
      <StringInput
        value={this.props.source.data}
        onChange={data => this.props.onChange({
@@ -105,6 +106,28 @@ class GeoJSONSourceEditor extends React.Component {
  }
 }

+class GeoJSONSourceJSONEditor extends React.Component {
+  static propTypes = {
+    source: PropTypes.object.isRequired,
+    onChange: PropTypes.func.isRequired,
+  }
+
+  render() {
+    return <InputBlock label={"GeoJSON"} doc={latest.source_geojson.data.doc}>
+      <JSONEditor
+        layer={this.props.source.data}
+        maxHeight={200}
+        onChange={data => {
+          this.props.onChange({
+            ...this.props.source,
+            data,
+          })
+        }}
+      />
+    </InputBlock>
+  }
+}
+
 class SourceTypeEditor extends React.Component {
  static propTypes = {
    mode: PropTypes.string.isRequired,
@@ -118,7 +141,8 @@ class SourceTypeEditor extends React.Component {
      onChange: this.props.onChange,
    }
    switch(this.props.mode) {
-      case 'geojson': return <GeoJSONSourceEditor {...commonProps} />
+      case 'geojson_url': return <GeoJSONSourceUrlEditor {...commonProps} />
+      case 'geojson_json': return <GeoJSONSourceJSONEditor {...commonProps} />
      case 'tilejson_vector': return <TileJSONSourceEditor {...commonProps} />
      case 'tilexyz_vector': return <TileURLSourceEditor {...commonProps} />
      case 'tilejson_raster': return <TileJSONSourceEditor {...commonProps} />