Merge remote-tracking branch 'upstream/master' into feature/add-thunderforest-source

Conflicts:
	src/components/App.jsx

src/components/App.jsx

@@ -1,5 +1,9 @@
 import React from 'react'
 import Mousetrap from 'mousetrap'
+import cloneDeep from 'lodash.clonedeep'
+import clamp from 'lodash.clamp'
+import {arrayMove} from 'react-sortable-hoc'
+import url from 'url'
 
 import MapboxGlMap from './map/MapboxGlMap'
 import OpenLayers3Map from './map/OpenLayers3Map'
@@ -9,8 +13,15 @@ import Toolbar from './Toolbar'
 import AppLayout from './AppLayout'
 import MessagePanel from './MessagePanel'
 
+import SettingsModal from './modals/SettingsModal'
+import ExportModal from './modals/ExportModal'
+import SourcesModal from './modals/SourcesModal'
+import OpenModal from './modals/OpenModal'
+import ShortcutsModal from './modals/ShortcutsModal'
+import SurveyModal from './modals/SurveyModal'
+
 import { downloadGlyphsMetadata, downloadSpriteMetadata } from '../libs/metadata'
-import styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec'
+import * as styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec'
 import style from '../libs/style.js'
 import { initialStyleUrl, loadStyleUrl } from '../libs/urlopen'
 import { undoMessages, redoMessages } from '../libs/diffmessage'
@@ -20,9 +31,11 @@ import { RevisionStore } from '../libs/revisions'
 import LayerWatcher from '../libs/layerwatcher'
 import tokens from '../config/tokens.json'
 import isEqual from 'lodash.isequal'
+import Debug from '../libs/debug'
+import queryUtil from '../libs/query-util'
 
 import MapboxGl from 'mapbox-gl'
-import mapboxUtil from 'mapbox-gl/src/util/mapbox'
+import { normalizeSourceURL } from 'mapbox-gl/src/util/mapbox'
 
 
 function updateRootSpec(spec, fieldName, newValues) {
@@ -46,6 +59,79 @@ export default class App extends React.Component {
       onLocalStyleChange: mapStyle => this.onStyleChanged(mapStyle, false)
     })
 
+    
+    const keyCodes = {
+      "esc": 27,
+      "?": 191,
+      "o": 79,
+      "e": 69,
+      "s": 83,
+      "d": 68,
+      "i": 73,
+      "m": 77,
+    }
+
+    const shortcuts = [
+      {
+        keyCode: keyCodes["?"],
+        handler: () => {
+          this.toggleModal("shortcuts");
+        }
+      },
+      {
+        keyCode: keyCodes["o"],
+        handler: () => {
+          this.toggleModal("open");
+        }
+      },
+      {
+        keyCode: keyCodes["e"],
+        handler: () => {
+          this.toggleModal("export");
+        }
+      },
+      {
+        keyCode: keyCodes["d"],
+        handler: () => {
+          this.toggleModal("sources");
+        }
+      },
+      {
+        keyCode: keyCodes["s"],
+        handler: () => {
+          this.toggleModal("settings");
+        }
+      },
+      {
+        keyCode: keyCodes["i"],
+        handler: () => {
+          this.changeInspectMode();
+        }
+      },
+      {
+        keyCode: keyCodes["m"],
+        handler: () => {
+          document.querySelector(".mapboxgl-canvas").focus();
+        }
+      },
+    ]
+
+    document.body.addEventListener("keyup", (e) => {
+      if(e.keyCode === keyCodes["esc"]) {
+        e.target.blur();
+        document.body.focus();
+      }
+      else if(document.activeElement === document.body) {
+        const shortcut = shortcuts.find((shortcut) => {
+          return (shortcut.keyCode === e.keyCode)
+        })
+
+        if(shortcut) {
+          shortcut.handler(e);
+        }
+      }
+    })
+
     const styleUrl = initialStyleUrl()
     if(styleUrl) {
       this.styleStore = new StyleStore()
@@ -57,9 +143,21 @@ export default class App extends React.Component {
           this.styleStore = new StyleStore()
         }
         this.styleStore.latestStyle(mapStyle => this.onStyleChanged(mapStyle))
+
+        if(Debug.enabled()) {
+          Debug.set("maputnik", "styleStore", this.styleStore);
+          Debug.set("maputnik", "revisionStore", this.revisionStore);
+        }
       })
     }
 
+    if(Debug.enabled()) {
+      Debug.set("maputnik", "revisionStore", this.revisionStore);
+      Debug.set("maputnik", "styleStore", this.styleStore);
+    }
+
+    const queryObj = url.parse(window.location.href, true).query;
+
     this.state = {
       errors: [],
       infos: [],
@@ -69,6 +167,18 @@ export default class App extends React.Component {
       vectorLayers: {},
       inspectModeEnabled: false,
       spec: styleSpec.latest,
+      isOpen: {
+        settings: false,
+        sources: false,
+        open: false,
+        shortcuts: false,
+        export: false,
+        survey: localStorage.hasOwnProperty('survey') ? false : true
+      },
+      mapOptions: {
+        showTileBoundaries: queryUtil.asBool(queryObj, "show-tile-boundaries")
+      },
+      mapFilter: queryObj["color-blindness-emulation"],
     }
 
     this.layerWatcher = new LayerWatcher({
@@ -86,11 +196,6 @@ export default class App extends React.Component {
     Mousetrap.unbind(['mod+y', 'mod+shift+z'], this.onRedo.bind(this));
   }
 
-  onReset() {
-    this.styleStore.purge()
-    loadDefaultStyle(mapStyle => this.onStyleOpen(mapStyle))
-  }
-
   saveStyle(snapshotStyle) {
     this.styleStore.save(snapshotStyle)
   }
@@ -158,6 +263,24 @@ export default class App extends React.Component {
     })
   }
 
+  onMoveLayer(move) {
+    let { oldIndex, newIndex } = move;
+    let layers = this.state.mapStyle.layers;
+    oldIndex = clamp(oldIndex, 0, layers.length-1);
+    newIndex = clamp(newIndex, 0, layers.length-1);
+    if(oldIndex === newIndex) return;
+
+    if (oldIndex === this.state.selectedLayerIndex) {
+      this.setState({
+        selectedLayerIndex: newIndex
+      });
+    }
+
+    layers = layers.slice(0);
+    layers = arrayMove(layers, oldIndex, newIndex);
+    this.onLayersChange(layers);
+  }
+
   onLayersChange(changedLayers) {
     const changedStyle = {
       ...this.state.mapStyle,
@@ -166,6 +289,40 @@ export default class App extends React.Component {
     this.onStyleChanged(changedStyle)
   }
 
+  onLayerDestroy(layerId) {
+    let layers = this.state.mapStyle.layers;
+    const remainingLayers = layers.slice(0);
+    const idx = style.indexOfLayer(remainingLayers, layerId)
+    remainingLayers.splice(idx, 1);
+    this.onLayersChange(remainingLayers);
+  }
+
+  onLayerCopy(layerId) {
+    let layers = this.state.mapStyle.layers;
+    const changedLayers = layers.slice(0)
+    const idx = style.indexOfLayer(changedLayers, layerId)
+
+    const clonedLayer = cloneDeep(changedLayers[idx])
+    clonedLayer.id = clonedLayer.id + "-copy"
+    changedLayers.splice(idx, 0, clonedLayer)
+    this.onLayersChange(changedLayers)
+  }
+
+  onLayerVisibilityToggle(layerId) {
+    let layers = this.state.mapStyle.layers;
+    const changedLayers = layers.slice(0)
+    const idx = style.indexOfLayer(changedLayers, layerId)
+
+    const layer = { ...changedLayers[idx] }
+    const changedLayout = 'layout' in layer ? {...layer.layout} : {}
+    changedLayout.visibility = changedLayout.visibility === 'none' ? 'visible' : 'none'
+
+    layer.layout = changedLayout
+    changedLayers[idx] = layer
+    this.onLayersChange(changedLayers)
+  }
+
+
   onLayerIdChange(oldId, newId) {
     const changedLayers = this.state.mapStyle.layers.slice(0)
     const idx = style.indexOfLayer(changedLayers, oldId)
@@ -208,7 +365,7 @@ export default class App extends React.Component {
       if(!this.state.sources.hasOwnProperty(key) && val.type === "vector" && val.hasOwnProperty("url")) {
         let url = val.url;
         try {
-          url = mapboxUtil.normalizeSourceURL(url, MapboxGl.accessToken);
+          url = normalizeSourceURL(url, MapboxGl.accessToken);
         } catch(err) {
           console.warn("Failed to normalizeSourceURL: ", err);
         }
@@ -250,7 +407,8 @@ export default class App extends React.Component {
 
   mapRenderer() {
     const mapProps = {
-      mapStyle: style.replaceAccessTokens(this.state.mapStyle, {allowFallback: true}),
+      mapStyle: style.replaceAccessToken(this.state.mapStyle, {allowFallback: true}),
+      options: this.state.mapOptions,
       onDataChange: (e) => {
         this.layerWatcher.analyzeMap(e.map)
         this.fetchSources();
@@ -260,15 +418,26 @@ export default class App extends React.Component {
     const metadata = this.state.mapStyle.metadata || {}
     const renderer = metadata['maputnik:renderer'] || 'mbgljs'
 
+    let mapElement;
+
     // Check if OL3 code has been loaded?
     if(renderer === 'ol3') {
-      return <OpenLayers3Map {...mapProps} />
+      mapElement = <OpenLayers3Map {...mapProps} />
     } else {
-      return  <MapboxGlMap {...mapProps}
+      mapElement = <MapboxGlMap {...mapProps}
         inspectModeEnabled={this.state.inspectModeEnabled}
         highlightedLayer={this.state.mapStyle.layers[this.state.selectedLayerIndex]}
         onLayerSelect={this.onLayerSelect.bind(this)} />
     }
+
+    const elementStyle = {};
+    if(this.state.mapFilter) {
+      elementStyle.filter = `url('#${this.state.mapFilter}')`;
+    }
+
+    return <div style={elementStyle}>
+      {mapElement}
+    </div>
   }
 
   onLayerSelect(layerId) {
@@ -276,6 +445,19 @@ export default class App extends React.Component {
     this.setState({ selectedLayerIndex: idx })
   }
 
+  toggleModal(modalName) {
+    this.setState({
+      isOpen: {
+        ...this.state.isOpen,
+        [modalName]: !this.state.isOpen[modalName]
+      }
+    })
+
+    if(modalName === 'survey') {
+      localStorage.setItem('survey', '');
+    }
+  }
+
   render() {
     const layers = this.state.mapStyle.layers || []
     const selectedLayer = layers.length > 0 ? layers[this.state.selectedLayerIndex] : null
@@ -288,9 +470,14 @@ export default class App extends React.Component {
       onStyleChanged={this.onStyleChanged.bind(this)}
       onStyleOpen={this.onStyleChanged.bind(this)}
       onInspectModeToggle={this.changeInspectMode.bind(this)}
+      onToggleModal={this.toggleModal.bind(this)}
     />
 
     const layerList = <LayerList
+      onMoveLayer={this.onMoveLayer.bind(this)}
+      onLayerDestroy={this.onLayerDestroy.bind(this)}
+      onLayerCopy={this.onLayerCopy.bind(this)}
+      onLayerVisibilityToggle={this.onLayerVisibilityToggle.bind(this)}
       onLayersChange={this.onLayersChange.bind(this)}
       onLayerSelect={this.onLayerSelect.bind(this)}
       selectedLayerIndex={this.state.selectedLayerIndex}
@@ -300,10 +487,17 @@ export default class App extends React.Component {
 
     const layerEditor = selectedLayer ? <LayerEditor
       layer={selectedLayer}
+      layerIndex={this.state.selectedLayerIndex}
+      isFirstLayer={this.state.selectedLayerIndex < 1}
+      isLastLayer={this.state.selectedLayerIndex === this.state.mapStyle.layers.length-1}
       sources={this.state.sources}
       vectorLayers={this.state.vectorLayers}
       spec={this.state.spec}
+      onMoveLayer={this.onMoveLayer.bind(this)}
       onLayerChanged={this.onLayerChanged.bind(this)}
+      onLayerDestroy={this.onLayerDestroy.bind(this)}
+      onLayerCopy={this.onLayerCopy.bind(this)}
+      onLayerVisibilityToggle={this.onLayerVisibilityToggle.bind(this)}
       onLayerIdChange={this.onLayerIdChange.bind(this)}
     /> : null
 
@@ -312,12 +506,48 @@ export default class App extends React.Component {
       infos={this.state.infos}
     /> : null
 
+
+    const modals = <div>
+      <ShortcutsModal
+        isOpen={this.state.isOpen.shortcuts}
+        onOpenToggle={this.toggleModal.bind(this, 'shortcuts')}
+      />
+      <SettingsModal
+        mapStyle={this.state.mapStyle}
+        onStyleChanged={this.onStyleChanged.bind(this)}
+        isOpen={this.state.isOpen.settings}
+        onOpenToggle={this.toggleModal.bind(this, 'settings')}
+      />
+      <ExportModal
+        mapStyle={this.state.mapStyle}
+        onStyleChanged={this.onStyleChanged.bind(this)}
+        isOpen={this.state.isOpen.export}
+        onOpenToggle={this.toggleModal.bind(this, 'export')}
+      />
+      <OpenModal
+        isOpen={this.state.isOpen.open}
+        onStyleOpen={this.onStyleChanged.bind(this)}
+        onOpenToggle={this.toggleModal.bind(this, 'open')}
+      />
+      <SourcesModal
+        mapStyle={this.state.mapStyle}
+        onStyleChanged={this.onStyleChanged.bind(this)}
+        isOpen={this.state.isOpen.sources}
+        onOpenToggle={this.toggleModal.bind(this, 'sources')}
+      />
+      <SurveyModal
+        isOpen={this.state.isOpen.survey}
+        onOpenToggle={this.toggleModal.bind(this, 'survey')}
+      />
+    </div>
+
     return <AppLayout
       toolbar={toolbar}
       layerList={layerList}
       layerEditor={layerEditor}
       map={this.mapRenderer()}
       bottom={bottomPanel}
+      modals={modals}
     />
   }
 }

src/components/AppLayout.jsx

@@ -9,6 +9,7 @@ class AppLayout extends React.Component {
     layerEditor: PropTypes.element,
     map: PropTypes.element.isRequired,
     bottom: PropTypes.element,
+    modals: PropTypes.node,
   }
 
   static childContextTypes = {
@@ -39,6 +40,7 @@ class AppLayout extends React.Component {
           {this.props.bottom}
         </div>
       }
+      {this.props.modals}
     </div>
   }
 }

src/components/Button.jsx

@@ -4,6 +4,8 @@ import classnames from 'classnames'
 
 class Button extends React.Component {
   static propTypes = {
+    "data-wd-key": PropTypes.string,
+    "aria-label": PropTypes.string,
     onClick: PropTypes.func,
     style: PropTypes.object,
     className: PropTypes.string,
@@ -11,12 +13,14 @@ class Button extends React.Component {
   }
 
   render() {
-    return <a
+    return <button
       onClick={this.props.onClick}
+      aria-label={this.props["aria-label"]}
       className={classnames("maputnik-button", this.props.className)}
+      data-wd-key={this.props["data-wd-key"]}
       style={this.props.style}>
       {this.props.children}
-    </a>
+    </button>
   }
 }
 

src/components/Toolbar.jsx

@@ -16,12 +16,9 @@ import MdInsertEmoticon from 'react-icons/lib/md/insert-emoticon'
 import MdFontDownload from 'react-icons/lib/md/font-download'
 import HelpIcon from 'react-icons/lib/md/help-outline'
 import InspectionIcon from 'react-icons/lib/md/find-in-page'
+import SurveyIcon from 'react-icons/lib/md/assignment-turned-in'
 
 import logoImage from 'maputnik-design/logos/logo-color.svg'
-import SettingsModal from './modals/SettingsModal'
-import ExportModal from './modals/ExportModal'
-import SourcesModal from './modals/SourcesModal'
-import OpenModal from './modals/OpenModal'
 import pkgJson from '../../package.json'
 
 import style from '../libs/style'
@@ -41,6 +38,7 @@ class ToolbarLink extends React.Component {
     className: PropTypes.string,
     children: PropTypes.node,
     href: PropTypes.string,
+    onToggleModal: PropTypes.func,
   }
 
   render() {
@@ -55,19 +53,43 @@ class ToolbarLink extends React.Component {
   }
 }
 
-class ToolbarAction extends React.Component {
+class ToolbarLinkHighlighted extends React.Component {
   static propTypes = {
+    className: PropTypes.string,
     children: PropTypes.node,
-    onClick: PropTypes.func
+    href: PropTypes.string,
+    onToggleModal: PropTypes.func
   }
 
   render() {
     return <a
+      className={classnames('maputnik-toolbar-link', "maputnik-toolbar-link--highlighted", this.props.className)}
+      href={this.props.href}
+      rel="noopener noreferrer"
+      target="_blank"
+    >
+      <span className="maputnik-toolbar-link-wrapper">
+        {this.props.children}
+      </span>
+    </a>
+  }
+}
+
+class ToolbarAction extends React.Component {
+  static propTypes = {
+    children: PropTypes.node,
+    onClick: PropTypes.func,
+    wdKey: PropTypes.string
+  }
+
+  render() {
+    return <button
       className='maputnik-toolbar-action'
+      data-wd-key={this.props.wdKey}
       onClick={this.props.onClick}
     >
       {this.props.children}
-    </a>
+    </button>
   }
 }
 
@@ -81,7 +103,8 @@ export default class Toolbar extends React.Component {
     // A dict of source id's and the available source layers
     sources: PropTypes.object.isRequired,
     onInspectModeToggle: PropTypes.func.isRequired,
-    children: PropTypes.node
+    children: PropTypes.node,
+    onToggleModal: PropTypes.func,
   }
 
   constructor(props) {
@@ -97,68 +120,45 @@ export default class Toolbar extends React.Component {
     }
   }
 
-  toggleModal(modalName) {
-    this.setState({
-      isOpen: {
-        ...this.state.isOpen,
-        [modalName]: !this.state.isOpen[modalName]
-      }
-    })
-  }
-
   render() {
     return <div className='maputnik-toolbar'>
-      <SettingsModal
-        mapStyle={this.props.mapStyle}
-        onStyleChanged={this.props.onStyleChanged}
-        isOpen={this.state.isOpen.settings}
-        onOpenToggle={this.toggleModal.bind(this, 'settings')}
-      />
-      <ExportModal
-        mapStyle={this.props.mapStyle}
-        onStyleChanged={this.props.onStyleChanged}
-        isOpen={this.state.isOpen.export}
-        onOpenToggle={this.toggleModal.bind(this, 'export')}
-      />
-      <OpenModal
-        isOpen={this.state.isOpen.open}
-        onStyleOpen={this.props.onStyleOpen}
-        onOpenToggle={this.toggleModal.bind(this, 'open')}
-      />
-      <SourcesModal
-          mapStyle={this.props.mapStyle}
-          onStyleChanged={this.props.onStyleChanged}
-          isOpen={this.state.isOpen.sources}
-          onOpenToggle={this.toggleModal.bind(this, 'sources')}
-      />
       <div className="maputnik-toolbar__inner">
-        <ToolbarLink
-          href={"https://github.com/maputnik/editor"}
-          className="maputnik-toolbar-logo"
+        <div
+          className="maputnik-toolbar-logo-container"
         >
-          <img src={logoImage} alt="Maputnik" />
-          <h1>Maputnik
-            <span className="maputnik-toolbar-version">v{pkgJson.version}</span>
-          </h1>
-        </ToolbarLink>
+          <a className="maputnik-toolbar-skip" href="#skip-menu">
+            Skip navigation
+          </a>
+          <a
+            href="https://github.com/maputnik/editor"
+            rel="noopener noreferrer"
+            target="_blank"
+            className="maputnik-toolbar-logo"
+          >
+            <img src={logoImage} alt="Maputnik" />
+            <h1>Maputnik
+              <span className="maputnik-toolbar-version">v{pkgJson.version}</span>
+            </h1>
+          </a>
+        </div>
         <div className="maputnik-toolbar__actions">
-          <ToolbarAction onClick={this.toggleModal.bind(this, 'open')}>
+          <ToolbarAction wdKey="nav:open" onClick={this.props.onToggleModal.bind(this, 'open')}>
             <OpenIcon />
             <IconText>Open</IconText>
           </ToolbarAction>
-          <ToolbarAction onClick={this.toggleModal.bind(this, 'export')}>
+          <ToolbarAction wdKey="nav:export" onClick={this.props.onToggleModal.bind(this, 'export')}>
             <MdFileDownload />
             <IconText>Export</IconText>
           </ToolbarAction>
-          <ToolbarAction onClick={this.toggleModal.bind(this, 'sources')}>
+          <ToolbarAction wdKey="nav:sources" onClick={this.props.onToggleModal.bind(this, 'sources')}>
             <SourcesIcon />
-            <IconText>Sources</IconText>
+            <IconText>Data Sources</IconText>
           </ToolbarAction>
-          <ToolbarAction onClick={this.toggleModal.bind(this, 'settings')}>
+          <ToolbarAction wdKey="nav:settings" onClick={this.props.onToggleModal.bind(this, 'settings')}>
             <SettingsIcon />
             <IconText>Style Settings</IconText>
           </ToolbarAction>
-          <ToolbarAction onClick={this.props.onInspectModeToggle}>
+          <ToolbarAction wdKey="nav:inspect" onClick={this.props.onInspectModeToggle}>
             <InspectionIcon />
             <IconText>
               { this.props.inspectModeEnabled && <span>Map Mode</span> }
@@ -169,6 +169,10 @@ export default class Toolbar extends React.Component {
             <HelpIcon />
             <IconText>Help</IconText>
           </ToolbarLink>
+          <ToolbarLinkHighlighted href={"https://gregorywolanski.typeform.com/to/cPgaSY"}>
+            <SurveyIcon />
+            <IconText>Take the Maputnik Survey</IconText>
+          </ToolbarLinkHighlighted>
         </div>
       </div>
     </div>

src/components/fields/ColorField.jsx

@@ -105,6 +105,7 @@ class ColorField extends React.Component {
       {this.state.pickerOpened && picker}
       <div className="maputnik-color-swatch" style={swatchStyle}></div>
       <input
+        spellCheck="false"
         className="maputnik-color"
         ref={(input) => this.colorInput = input}
         onClick={this.togglePicker.bind(this)}

src/components/fields/FunctionSpecField.jsx

@@ -131,8 +131,7 @@ export default class FunctionSpecProperty  extends React.Component {
         />
       )
     }
-
-    return <div className={propClass}>
+    return <div className={propClass} data-wd-key={"spec-field:"+this.props.fieldName}>
       {specField}
     </div>
   }

src/components/fields/SpecField.jsx

@@ -58,70 +58,79 @@ export default class SpecField extends React.Component {
       name: this.props.fieldName,
       onChange: newValue => this.props.onChange(this.props.fieldName, newValue)
     }
-    switch(this.props.fieldSpec.type) {
-      case 'number': return (
-        <NumberInput
-          {...commonProps}
-          min={this.props.fieldSpec.minimum}
-          max={this.props.fieldSpec.maximum}
-        />
-      )
-      case 'enum':
-        const options = Object.keys(this.props.fieldSpec.values).map(v => [v, capitalize(v)])
 
-        if(options.length <= 3 && optionsLabelLength(options) <= 20) {
-          return <MultiButtonInput
+    function childNodes() {
+      switch(this.props.fieldSpec.type) {
+        case 'number': return (
+          <NumberInput
             {...commonProps}
-            options={options}
+            min={this.props.fieldSpec.minimum}
+            max={this.props.fieldSpec.maximum}
           />
-        } else {
-          return <SelectInput
-            {...commonProps}
-            options={options}
-          />
-        }
-      case 'string':
-        if(iconProperties.indexOf(this.props.fieldName) >= 0) {
-          return <IconInput
-            {...commonProps}
-            icons={this.props.fieldSpec.values}
-          />
-        } else {
-          return <StringInput
-            {...commonProps}
-          />
-        }
-      case 'color': return (
-        <ColorField
-          {...commonProps}
-        />
-      )
-      case 'boolean': return (
-        <CheckboxInput
-          {...commonProps}
-        />
-      )
-      case 'array':
-        if(this.props.fieldName === 'text-font') {
-          return <FontInput
-            {...commonProps}
-            fonts={this.props.fieldSpec.values}
-          />
-        } else {
-          if (this.props.fieldSpec.length) {
-            return <ArrayInput
+        )
+        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}
-              type={this.props.fieldSpec.value}
-              length={this.props.fieldSpec.length}
+              options={options}
             />
           } else {
-            return <DynamicArrayInput
+            return <SelectInput
               {...commonProps}
-              type={this.props.fieldSpec.value}
+              options={options}
             />
           }
-        }
-      default: return null
+        case 'string':
+          if(iconProperties.indexOf(this.props.fieldName) >= 0) {
+            return <IconInput
+              {...commonProps}
+              icons={this.props.fieldSpec.values}
+            />
+          } else {
+            return <StringInput
+              {...commonProps}
+            />
+          }
+        case 'color': return (
+          <ColorField
+            {...commonProps}
+          />
+        )
+        case 'boolean': return (
+          <CheckboxInput
+            {...commonProps}
+          />
+        )
+        case 'array':
+          if(this.props.fieldName === 'text-font') {
+            return <FontInput
+              {...commonProps}
+              fonts={this.props.fieldSpec.values}
+            />
+          } else {
+            if (this.props.fieldSpec.length) {
+              return <ArrayInput
+                {...commonProps}
+                type={this.props.fieldSpec.value}
+                length={this.props.fieldSpec.length}
+              />
+            } else {
+              return <DynamicArrayInput
+                {...commonProps}
+                type={this.props.fieldSpec.value}
+              />
+            }
+          }
+        default: return null
+      }
     }
+
+    return (
+      <div data-wd-key={"spec-field:"+this.props.fieldName}>
+      {childNodes.call(this)}
+      </div>
+    );
   }
 }

src/components/fields/_DataProperty.jsx

@@ -51,7 +51,8 @@ export default class DataProperty extends React.Component {
 
   changeStop(changeIdx, stopData, value) {
     const stops = this.props.value.stops.slice(0)
-    stops[changeIdx] = [stopData, value]
+    const changedStop = stopData.zoom === undefined ? stopData.value : stopData
+    stops[changeIdx] = [changedStop, value]
     const changedValue = {
       ...this.props.value,
       stops: stops,
@@ -75,8 +76,8 @@ export default class DataProperty extends React.Component {
     }
 
     const dataFields = this.props.value.stops.map((stop, idx) => {
-      const zoomLevel = stop[0].zoom
-      const dataLevel = stop[0].value
+      const zoomLevel = typeof stop[0] === 'object' ? stop[0].zoom : undefined;
+      const dataLevel = typeof stop[0] === 'object' ? stop[0].value : stop[0];
       const value = stop[1]
       const deleteStopBtn = <DeleteStopButton onClick={this.props.onDeleteStop.bind(this, idx)} />
 
@@ -94,8 +95,9 @@ export default class DataProperty extends React.Component {
         dataInput = <NumberInput {...dataProps} />
       }
 
-      return <InputBlock key={idx} action={deleteStopBtn} label="">
-        <div className="maputnik-data-spec-property-stop-edit">
+      let zoomInput = null;
+      if(zoomLevel !== undefined) {
+        zoomInput = <div className="maputnik-data-spec-property-stop-edit">
           <NumberInput
             value={zoomLevel}
             onChange={newZoom => this.changeStop(idx, {zoom: newZoom, value: dataLevel}, value)}
@@ -103,6 +105,10 @@ export default class DataProperty extends React.Component {
             max={22}
           />
         </div>
+      }
+
+      return <InputBlock key={idx} action={deleteStopBtn} label="">
+        {zoomInput}
         <div className="maputnik-data-spec-property-stop-data">
           {dataInput}
         </div>

src/components/fields/_ZoomProperty.jsx

@@ -37,7 +37,7 @@ export default class ZoomProperty extends React.Component {
     }
   }
 
-  componentWillMount() {
+  componentDidMount() {
     this.setState({
       refs: this.setStopRefs(this.props)
     })
@@ -66,7 +66,7 @@ export default class ZoomProperty extends React.Component {
     return newRefs;
   }
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     const newRefs = this.setStopRefs(nextProps);
     if(newRefs) {
       this.setState({

src/components/filter/FilterEditor.jsx

@@ -2,7 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { combiningFilterOps } from '../../libs/filterops.js'
 
-import styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec'
+import * as styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec'
 import DocLabel from '../fields/DocLabel'
 import SelectInput from '../inputs/SelectInput'
 import SingleFilterEditor from './SingleFilterEditor'
@@ -89,7 +89,7 @@ export default class CombiningFilterEditor extends React.Component {
     }
 
     return <div className="maputnik-filter-editor">
-      <div className="maputnik-filter-editor-compound-select">
+      <div className="maputnik-filter-editor-compound-select" data-wd-key="layer-filter">
         <DocLabel
           label={"Compound Filter"}
           doc={styleSpec.latest.layer.filter.doc + " Combine multiple filters together by using a compound filter."}
@@ -103,6 +103,7 @@ export default class CombiningFilterEditor extends React.Component {
       {editorBlocks}
       <div className="maputnik-filter-editor-add-wrapper">
         <Button
+          data-wd-key="layer-filter-button"
           className="maputnik-add-filter"
           onClick={this.addFilterItem.bind(this)}>
           Add filter

src/components/icons/LayerIcon.jsx

@@ -25,7 +25,6 @@ class LayerIcon extends React.Component {
       case 'line': return <LineIcon {...iconProps} />
       case 'symbol': return <SymbolIcon {...iconProps} />
       case 'circle': return <CircleIcon {...iconProps} />
-      default: return null
     }
   }
 }

src/components/inputs/AutocompleteInput.jsx

@@ -54,7 +54,7 @@ class AutocompleteInput extends React.Component {
     >
       <Autocomplete
         menuStyle={{
-          position: "absolute",
+          position: "fixed",
           overflow: "auto",
           maxHeight: this.state.maxHeight
         }}
@@ -63,7 +63,8 @@ class AutocompleteInput extends React.Component {
           style: null
         }}
         inputProps={{
-          className: "maputnik-string"
+          className: "maputnik-string",
+          spellCheck: false
         }}
         value={this.props.value}
         items={this.props.options}

src/components/inputs/InputBlock.jsx

@@ -6,6 +6,7 @@ import DocLabel from '../fields/DocLabel'
 /** Wrap a component with a label */
 class InputBlock extends React.Component {
   static propTypes = {
+    "data-wd-key": PropTypes.string,
     label: PropTypes.oneOfType([
       PropTypes.string,
       PropTypes.element,
@@ -24,6 +25,7 @@ class InputBlock extends React.Component {
 
   render() {
     return <div style={this.props.style}
+      data-wd-key={this.props["data-wd-key"]}
       className={classnames({
         "maputnik-input-block": true,
         "maputnik-action-block": this.props.action

src/components/inputs/NumberInput.jsx

@@ -17,7 +17,7 @@ class NumberInput extends React.Component {
     }
   }
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     this.setState({ value: nextProps.value })
   }
 
@@ -67,6 +67,7 @@ class NumberInput extends React.Component {
 
   render() {
     return <input
+      spellCheck="false"
       className="maputnik-number"
       placeholder={this.props.default}
       value={this.state.value}

src/components/inputs/SelectInput.jsx

@@ -4,6 +4,7 @@ import PropTypes from 'prop-types'
 class SelectInput extends React.Component {
   static propTypes = {
     value: PropTypes.string.isRequired,
+    "data-wd-key": PropTypes.string,
     options: PropTypes.array.isRequired,
     style: PropTypes.object,
     onChange: PropTypes.func.isRequired,
@@ -18,6 +19,7 @@ class SelectInput extends React.Component {
 
     return <select
       className="maputnik-select"
+      data-wd-key={this.props["data-wd-key"]}
       style={this.props.style}
       value={this.props.value}
       onChange={e => this.props.onChange(e.target.value)}

src/components/inputs/StringInput.jsx

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types'
 
 class StringInput extends React.Component {
   static propTypes = {
+    "data-wd-key": PropTypes.string,
     value: PropTypes.string,
     style: PropTypes.object,
     default: PropTypes.string,
@@ -17,7 +18,7 @@ class StringInput extends React.Component {
     }
   }
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     this.setState({ value: nextProps.value || '' })
   }
 
@@ -40,11 +41,17 @@ class StringInput extends React.Component {
     }
 
     return React.createElement(tag, {
+      "data-wd-key": this.props["data-wd-key"],
+      spellCheck: !(tag === "input"),
       className: classes.join(" "),
       style: this.props.style,
       value: this.state.value,
       placeholder: this.props.default,
-      onChange: e => this.setState({ value: e.target.value }),
+      onChange: e => {
+        this.setState({
+          value: e.target.value
+        })
+      },
       onBlur: () => {
         if(this.state.value!==this.props.value) this.props.onChange(this.state.value)
       }

src/components/layers/Collapse.jsx

@@ -0,0 +1,30 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import Collapse from 'react-collapse'
+import accessibility from '../../libs/accessibility'
+
+
+export default class CollapseAlt extends React.Component {
+  static propTypes = {
+    isActive: PropTypes.bool.isRequired,
+    children: PropTypes.element.isRequired
+  }
+
+  render() {
+    if (accessibility.reducedMotionEnabled()) {
+      return (
+        <div style={{display: this.props.isActive ? "block" : "none"}}>
+          {this.props.children}
+        </div>
+      )
+    }
+    else {
+      return (
+        <Collapse isOpened={this.props.isActive}>
+          {this.props.children}
+        </Collapse>
+      )
+    }
+  }
+}
+

src/components/layers/CommentBlock.jsx

@@ -11,7 +11,11 @@ class MetadataBlock extends React.Component {
   }
 
   render() {
-    return <InputBlock label={"Comments"} doc={"Comments for the current layer. This is non-standard and not in the spec."}>
+    return <InputBlock
+      label={"Comments"}
+      doc={"Comments for the current layer. This is non-standard and not in the spec."}
+      data-wd-key="layer-comment"
+    >
       <StringInput
         multi={true}
         value={this.props.value}

src/components/layers/JSONEditor.jsx

@@ -4,7 +4,6 @@ import PropTypes from 'prop-types'
 import {Controlled as CodeMirror} from 'react-codemirror2'
 import InputBlock from '../inputs/InputBlock'
 import StringInput from '../inputs/StringInput'
-import SelectInput from '../inputs/SelectInput'
 
 import 'codemirror/mode/javascript/javascript'
 import 'codemirror/addon/lint/lint'
@@ -30,7 +29,7 @@ class JSONEditor extends React.Component {
     }
   }
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     this.setState({
       code: JSON.stringify(nextProps.layer, null, 2)
     })

src/components/layers/LayerEditor.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import { Wrapper, Button, Menu, MenuItem } from 'react-aria-menubutton'
 
 import JSONEditor from './JSONEditor'
 import FilterEditor from '../filter/FilterEditor'
@@ -13,17 +14,14 @@ import CommentBlock from './CommentBlock'
 import LayerSourceBlock from './LayerSourceBlock'
 import LayerSourceLayerBlock from './LayerSourceLayerBlock'
 
+import MoreVertIcon from 'react-icons/lib/md/more-vert'
+
 import InputBlock from '../inputs/InputBlock'
 import MultiButtonInput from '../inputs/MultiButtonInput'
 
 import { changeType, changeProperty } from '../../libs/layer'
 import layout from '../../config/layout.json'
 
-class UnsupportedLayer extends React.Component {
-  render() {
-    return <div></div>
-  }
-}
 
 function layoutGroups(layerType) {
   const layerGroup = {
@@ -50,6 +48,13 @@ export default class LayerEditor extends React.Component {
     spec: PropTypes.object.isRequired,
     onLayerChanged: PropTypes.func,
     onLayerIdChange: PropTypes.func,
+    onMoveLayer: PropTypes.func,
+    onLayerDestroy: PropTypes.func,
+    onLayerCopy: PropTypes.func,
+    onLayerVisibilityToggle: PropTypes.func,
+    isFirstLayer: PropTypes.bool,
+    isLastLayer: PropTypes.bool,
+    layerIndex: PropTypes.number,
   }
 
   static defaultProps = {
@@ -74,7 +79,7 @@ export default class LayerEditor extends React.Component {
     this.state = { editorGroups }
   }
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     const additionalGroups = { ...this.state.editorGroups }
 
     layout[nextProps.layer.type].groups.forEach(group => {
@@ -126,6 +131,7 @@ export default class LayerEditor extends React.Component {
       case 'layer': return <div>
         <LayerIdBlock
           value={this.props.layer.id}
+          wdKey="layer-editor.layer-id"
           onChange={newId => this.props.onLayerIdChange(this.props.layer.id, newId)}
         />
         <LayerTypeBlock
@@ -177,16 +183,23 @@ export default class LayerEditor extends React.Component {
         layer={this.props.layer}
         onChange={this.props.onLayerChanged}
       />
-      default: return null
     }
   }
 
+  moveLayer(offset) {
+    this.props.onMoveLayer({
+      oldIndex: this.props.layerIndex,
+      newIndex: this.props.layerIndex+offset
+    })
+  }
+
   render() {
     const layerType = this.props.layer.type
     const groups = layoutGroups(layerType).filter(group => {
       return !(layerType === 'background' && group.type === 'source')
     }).map(group => {
       return <LayerEditorGroup
+        data-wd-key={group.title}
         key={group.title}
         title={group.title}
         isActive={this.state.editorGroups[group.title]}
@@ -196,8 +209,73 @@ export default class LayerEditor extends React.Component {
       </LayerEditorGroup>
     })
 
+    const layout = this.props.layer.layout || {}
+
+    const items = {
+      delete: {
+        text: "Delete",
+        handler: () => this.props.onLayerDestroy(this.props.layer.id)
+      },
+      duplicate: {
+        text: "Duplicate",
+        handler: () => this.props.onLayerCopy(this.props.layer.id)
+      },
+      hide: {
+        text: (layout.visibility === "none") ? "Show" : "Hide",
+        handler: () => this.props.onLayerVisibilityToggle(this.props.layer.id)
+      },
+      moveLayerUp: {
+        text: "Move layer up",
+        // Not actually used...
+        disabled: this.props.isFirstLayer,
+        handler: () => this.moveLayer(-1)
+      },
+      moveLayerDown: {
+        text: "Move layer down",
+        // Not actually used...
+        disabled: this.props.isLastLayer,
+        handler: () => this.moveLayer(+1)
+      }
+    }
+
+    function handleSelection(id, event) {
+      event.stopPropagation;
+      items[id].handler();
+    }
+
     return <div className="maputnik-layer-editor"
       >
+      <header>
+        <div className="layer-header">
+          <h2 className="layer-header__title">
+            Layer: {this.props.layer.id}
+          </h2>
+          <div className="layer-header__info">
+            <Wrapper
+              className='more-menu'
+              onSelection={handleSelection}
+              closeOnSelection={false}
+            >
+              <Button className='more-menu__button'>
+                <MoreVertIcon className="more-menu__button__svg" />
+              </Button>
+              <Menu>
+                <ul className="more-menu__menu">
+                  {Object.keys(items).map((id, idx) => {
+                    const item = items[id];
+                    return <li key={id}>
+                      <MenuItem value={id} className='more-menu__menu__item'>
+                        {item.text}
+                      </MenuItem>
+                    </li>
+                  })}
+                </ul>
+              </Menu>
+            </Wrapper>
+          </div>
+        </div>
+
+      </header>
       {groups}
     </div>
   }

src/components/layers/LayerEditorGroup.jsx

@@ -1,10 +1,12 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import Collapse from 'react-collapse'
 import Collapser from './Collapser'
+import Collapse from './Collapse'
+
 
 export default class LayerEditorGroup extends React.Component {
   static propTypes = {
+    "data-wd-key": PropTypes.string,
     title: PropTypes.string.isRequired,
     isActive: PropTypes.bool.isRequired,
     children: PropTypes.element.isRequired,
@@ -14,14 +16,17 @@ export default class LayerEditorGroup extends React.Component {
   render() {
     return <div>
       <div className="maputnik-layer-editor-group"
+        data-wd-key={"layer-editor-group:"+this.props["data-wd-key"]}
         onClick={e => this.props.onActiveToggle(!this.props.isActive)}
       >
         <span>{this.props.title}</span>
         <span style={{flexGrow: 1}} />
         <Collapser isCollapsed={this.props.isActive} />
       </div>
-      <Collapse isOpened={this.props.isActive}>
-        {this.props.children}
+      <Collapse isActive={this.props.isActive}>
+        <div className="react-collapse-container">
+          {this.props.children}
+        </div>
       </Collapse>
     </div>
   }

src/components/layers/LayerIdBlock.jsx

@@ -1,18 +1,21 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec'
+import * as styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec'
 import InputBlock from '../inputs/InputBlock'
 import StringInput from '../inputs/StringInput'
 
 class LayerIdBlock extends React.Component {
   static propTypes = {
     value: PropTypes.string.isRequired,
+    wdKey: PropTypes.string.isRequired,
     onChange: PropTypes.func.isRequired,
   }
 
   render() {
-    return <InputBlock label={"ID"} doc={styleSpec.latest.layer.id.doc}>
+    return <InputBlock label={"ID"} doc={styleSpec.latest.layer.id.doc}
+      data-wd-key={this.props.wdKey}
+    >
       <StringInput
         value={this.props.value}
         onChange={this.props.onChange}

src/components/layers/LayerList.jsx

@@ -1,7 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
-import cloneDeep from 'lodash.clonedeep'
 
 import Button from '../Button'
 import LayerListGroup from './LayerListGroup'
@@ -10,7 +9,7 @@ import AddIcon from 'react-icons/lib/md/add-circle-outline'
 import AddModal from '../modals/AddModal'
 
 import style from '../../libs/style.js'
-import {SortableContainer, SortableHandle, arrayMove} from 'react-sortable-hoc';
+import {SortableContainer, SortableHandle} from 'react-sortable-hoc';
 
 const layerListPropTypes = {
   layers: PropTypes.array.isRequired,
@@ -57,36 +56,6 @@ class LayerListContainer extends React.Component {
     }
   }
 
-  onLayerDestroy(layerId) {
-    const remainingLayers = this.props.layers.slice(0)
-    const idx = style.indexOfLayer(remainingLayers, layerId)
-    remainingLayers.splice(idx, 1);
-    this.props.onLayersChange(remainingLayers)
-  }
-
-  onLayerCopy(layerId) {
-    const changedLayers = this.props.layers.slice(0)
-    const idx = style.indexOfLayer(changedLayers, layerId)
-
-    const clonedLayer = cloneDeep(changedLayers[idx])
-    clonedLayer.id = clonedLayer.id + "-copy"
-    changedLayers.splice(idx, 0, clonedLayer)
-    this.props.onLayersChange(changedLayers)
-  }
-
-  onLayerVisibilityToggle(layerId) {
-    const changedLayers = this.props.layers.slice(0)
-    const idx = style.indexOfLayer(changedLayers, layerId)
-
-    const layer = { ...changedLayers[idx] }
-    const changedLayout = 'layout' in layer ? {...layer.layout} : {}
-    changedLayout.visibility = changedLayout.visibility === 'none' ? 'visible' : 'none'
-
-    layer.layout = changedLayout
-    changedLayers[idx] = layer
-    this.props.onLayersChange(changedLayers)
-  }
-
   toggleModal(modalName) {
     this.setState({
       isOpen: {
@@ -162,6 +131,7 @@ class LayerListContainer extends React.Component {
       const groupPrefix = layerPrefix(layers[0].id)
       if(layers.length > 1) {
         const grp = <LayerListGroup
+          data-wd-key={[groupPrefix, idx].join('-')}
           key={[groupPrefix, idx].join('-')}
           title={groupPrefix}
           isActive={!this.isCollapsed(groupPrefix, idx) || idx === this.props.selectedLayerIndex}
@@ -185,9 +155,9 @@ class LayerListContainer extends React.Component {
           visibility={(layer.layout || {}).visibility}
           isSelected={idx === this.props.selectedLayerIndex}
           onLayerSelect={this.props.onLayerSelect}
-          onLayerDestroy={this.onLayerDestroy.bind(this)}
-          onLayerCopy={this.onLayerCopy.bind(this)}
-          onLayerVisibilityToggle={this.onLayerVisibilityToggle.bind(this)}
+          onLayerDestroy={this.props.onLayerDestroy.bind(this)}
+          onLayerCopy={this.props.onLayerCopy.bind(this)}
+          onLayerVisibilityToggle={this.props.onLayerVisibilityToggle.bind(this)}
         />
         listItems.push(listItem)
         idx += 1
@@ -207,20 +177,22 @@ class LayerListContainer extends React.Component {
         <span className="maputnik-space" />
         <div className="maputnik-default-property">
           <div className="maputnik-multibutton">
-            <a 
+            <button
+              id="skip-menu"
               onClick={this.toggleLayers.bind(this)}
               className="maputnik-button">
               {this.state.areAllGroupsExpanded === true ? "Collapse" : "Expand"}
-            </a>
+            </button>
           </div>
         </div>
         <div className="maputnik-default-property">
           <div className="maputnik-multibutton">
-            <a
+            <button
               onClick={this.toggleModal.bind(this, 'add')}
+              data-wd-key="layer-list:add-layer"
               className="maputnik-button maputnik-button-selected">
              Add Layer
-            </a>
+            </button>
           </div>
         </div>
       </header>
@@ -234,18 +206,10 @@ class LayerListContainer extends React.Component {
 export default class LayerList extends React.Component {
   static propTypes = {...layerListPropTypes}
 
-  onSortEnd(move) {
-    const { oldIndex, newIndex } = move
-    if(oldIndex === newIndex) return
-    let layers = this.props.layers.slice(0)
-    layers = arrayMove(layers, oldIndex, newIndex)
-    this.props.onLayersChange(layers)
-  }
-
   render() {
     return <LayerListContainer
       {...this.props}
-      onSortEnd={this.onSortEnd.bind(this)}
+      onSortEnd={this.props.onMoveLayer.bind(this)}
       useDragHandle={true}
     />
   }

src/components/layers/LayerListGroup.jsx

@@ -5,6 +5,7 @@ import Collapser from './Collapser'
 export default class LayerListGroup extends React.Component {
   static propTypes = {
     title: PropTypes.string.isRequired,
+    "data-wd-key": PropTypes.string,
     isActive: PropTypes.bool.isRequired,
     onActiveToggle: PropTypes.func.isRequired
   }
@@ -12,6 +13,7 @@ export default class LayerListGroup extends React.Component {
   render() {
     return <li className="maputnik-layer-list-group">
       <div className="maputnik-layer-list-group-header"
+        data-wd-key={"layer-list-group:"+this.props["data-wd-key"]}
         onClick={e => this.props.onActiveToggle(!this.props.isActive)}
       >
         <span className="maputnik-layer-list-group-title">{this.props.title}</span>

src/components/layers/LayerListItem.jsx

@@ -33,25 +33,28 @@ class IconAction extends React.Component {
   static propTypes = {
     action: PropTypes.string.isRequired,
     onClick: PropTypes.func.isRequired,
+    wdKey: PropTypes.string
   }
 
   renderIcon() {
     switch(this.props.action) {
-      case 'copy': return <CopyIcon />
+      case 'duplicate': return <CopyIcon />
       case 'show': return <VisibilityIcon />
       case 'hide': return <VisibilityOffIcon />
       case 'delete': return <DeleteIcon />
-      default: return null
     }
   }
 
   render() {
-    return <a
+    return <button
+      tabIndex="-1"
+      title={this.props.action}
       className="maputnik-layer-list-icon-action"
+      data-wd-key={this.props.wdKey}
       onClick={this.props.onClick}
     >
       {this.renderIcon()}
-    </a>
+    </button>
   }
 }
 
@@ -92,6 +95,7 @@ class LayerListItem extends React.Component {
     return <li
       key={this.props.layerId}
       onClick={e => this.props.onLayerSelect(this.props.layerId)}
+      data-wd-key={"layer-list-item:"+this.props.layerId}
       className={classnames({
         "maputnik-layer-list-item": true,
         "maputnik-layer-list-item-selected": this.props.isSelected,
@@ -101,14 +105,17 @@ class LayerListItem extends React.Component {
         <span className="maputnik-layer-list-item-id">{this.props.layerId}</span>
         <span style={{flexGrow: 1}} />
         <IconAction
+          wdKey={"layer-list-item:"+this.props.layerId+":delete"}
           action={'delete'}
           onClick={e => this.props.onLayerDestroy(this.props.layerId)}
         />
         <IconAction
-          action={'copy'}
+          wdKey={"layer-list-item:"+this.props.layerId+":copy"}
+          action={'duplicate'}
           onClick={e => this.props.onLayerCopy(this.props.layerId)}
         />
         <IconAction
+          wdKey={"layer-list-item:"+this.props.layerId+":toggle-visibility"}
           action={this.props.visibility === 'visible' ? 'hide' : 'show'}
           onClick={e => this.props.onLayerVisibilityToggle(this.props.layerId)}
         />

src/components/layers/LayerSourceBlock.jsx

@@ -1,15 +1,15 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec'
+import * as styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec'
 import InputBlock from '../inputs/InputBlock'
 import StringInput from '../inputs/StringInput'
-import SelectInput from '../inputs/SelectInput'
 import AutocompleteInput from '../inputs/AutocompleteInput'
 
 class LayerSourceBlock extends React.Component {
   static propTypes = {
     value: PropTypes.string,
+    wdKey: PropTypes.string,
     onChange: PropTypes.func,
     sourceIds: PropTypes.array,
   }
@@ -20,7 +20,9 @@ class LayerSourceBlock extends React.Component {
   }
 
   render() {
-    return <InputBlock label={"Source"} doc={styleSpec.latest.layer.source.doc}>
+    return <InputBlock label={"Source"} doc={styleSpec.latest.layer.source.doc}
+      data-wd-key={this.props.wdKey}
+    >
       <AutocompleteInput
         value={this.props.value}
         onChange={this.props.onChange}

src/components/layers/LayerSourceLayerBlock.jsx

@@ -1,10 +1,9 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec'
+import * as styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec'
 import InputBlock from '../inputs/InputBlock'
 import StringInput from '../inputs/StringInput'
-import SelectInput from '../inputs/SelectInput'
 import AutocompleteInput from '../inputs/AutocompleteInput'
 
 class LayerSourceLayer extends React.Component {
@@ -22,7 +21,9 @@ class LayerSourceLayer extends React.Component {
   }
 
   render() {
-    return <InputBlock label={"Source Layer"} doc={styleSpec.latest.layer['source-layer'].doc}>
+    return <InputBlock label={"Source Layer"} doc={styleSpec.latest.layer['source-layer'].doc}
+      data-wd-key="layer-source-layer"
+    >
       <AutocompleteInput
         keepMenuWithinWindowBounds={!!this.props.isFixed}
         value={this.props.value}

src/components/layers/LayerTypeBlock.jsx

@@ -1,18 +1,21 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec'
+import * as styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec'
 import InputBlock from '../inputs/InputBlock'
 import SelectInput from '../inputs/SelectInput'
 
 class LayerTypeBlock extends React.Component {
   static propTypes = {
     value: PropTypes.string.isRequired,
+    wdKey: PropTypes.string,
     onChange: PropTypes.func.isRequired,
   }
 
   render() {
-    return <InputBlock label={"Type"} doc={styleSpec.latest.layer.type.doc}>
+    return <InputBlock label={"Type"} doc={styleSpec.latest.layer.type.doc}
+      data-wd-key={this.props.wdKey}
+    >
       <SelectInput
         options={[
           ['background', 'Background'],

src/components/layers/MaxZoomBlock.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec'
+import * as styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec'
 import InputBlock from '../inputs/InputBlock'
 import NumberInput from '../inputs/NumberInput'
 
@@ -12,7 +12,9 @@ class MaxZoomBlock extends React.Component {
   }
 
   render() {
-    return <InputBlock label={"Max Zoom"} doc={styleSpec.latest.layer.maxzoom.doc}>
+    return <InputBlock label={"Max Zoom"} doc={styleSpec.latest.layer.maxzoom.doc}
+      data-wd-key="max-zoom"
+    >
       <NumberInput
         value={this.props.value}
         onChange={this.props.onChange}

src/components/layers/MinZoomBlock.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec'
+import * as styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec'
 import InputBlock from '../inputs/InputBlock'
 import NumberInput from '../inputs/NumberInput'
 
@@ -12,7 +12,9 @@ class MinZoomBlock extends React.Component {
   }
 
   render() {
-    return <InputBlock label={"Min Zoom"} doc={styleSpec.latest.layer.minzoom.doc}>
+    return <InputBlock label={"Min Zoom"} doc={styleSpec.latest.layer.minzoom.doc}
+      data-wd-key="min-zoom"
+    >
       <NumberInput
         value={this.props.value}
         onChange={this.props.onChange}

src/components/map/MapboxGlMap.jsx

@@ -58,6 +58,7 @@ export default class MapboxGlMap extends React.Component {
     mapStyle: PropTypes.object.isRequired,
     inspectModeEnabled: PropTypes.bool.isRequired,
     highlightedLayer: PropTypes.object,
+    options: PropTypes.object,
   }
 
   static defaultProps = {
@@ -65,6 +66,7 @@ export default class MapboxGlMap extends React.Component {
     onDataChange: () => {},
     onLayerSelect: () => {},
     mapboxAccessToken: tokens.mapbox,
+    options: {},
   }
 
   constructor(props) {
@@ -79,7 +81,7 @@ export default class MapboxGlMap extends React.Component {
     }
   }
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     if(!this.state.map) return
     const metadata = nextProps.mapStyle.metadata || {}
     MapboxGl.accessToken = metadata['maputnik:mapbox_access_token'] || tokens.mapbox
@@ -92,20 +94,29 @@ export default class MapboxGlMap extends React.Component {
   }
 
   componentDidUpdate(prevProps) {
+    const map = this.state.map;
+
     if(this.props.inspectModeEnabled !== prevProps.inspectModeEnabled) {
       this.state.inspect.toggleInspector()
     }
     if(this.props.inspectModeEnabled) {
       this.state.inspect.render()
     }
+
+    map.showTileBoundaries = this.props.options.showTileBoundaries;
   }
 
   componentDidMount() {
-    const map = new MapboxGl.Map({
+    const mapOpts = {
+      ...this.props.options,
       container: this.container,
       style: this.props.mapStyle,
       hash: true,
-    })
+    }
+
+    const map = new MapboxGl.Map(mapOpts);
+
+    map.showTileBoundaries = mapOpts.showTileBoundaries;
 
     const zoom = new ZoomControl;
     map.addControl(zoom, 'top-right');
@@ -121,6 +132,7 @@ export default class MapboxGlMap extends React.Component {
       showMapPopupOnHover: false,
       showInspectMapPopupOnHover: true,
       showInspectButton: false,
+      blockHoverPopupOnClick: true,
       assignLayerColor: (layerId, alpha) => {
         return Color(colors.brightColor(layerId, alpha)).desaturate(0.5).string()
       },

src/components/map/OpenLayers3Map.jsx

@@ -29,7 +29,7 @@ class OpenLayers3Map extends React.Component {
     const styleFunc = olms.apply(this.map, newMapStyle)
   }
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     require.ensure(["ol", "ol-mapbox-style"], () => {
       if(!this.map) return
       this.updateStyle(nextProps.mapStyle)

src/components/modals/AddModal.jsx

@@ -4,7 +4,6 @@ import PropTypes from 'prop-types'
 import Button from '../Button'
 import InputBlock from '../inputs/InputBlock'
 import StringInput from '../inputs/StringInput'
-import SelectInput from '../inputs/SelectInput'
 import Modal from './Modal'
 
 import LayerTypeBlock from '../layers/LayerTypeBlock'
@@ -56,7 +55,7 @@ class AddModal extends React.Component {
     }
   }
 
-  componentWillUpdate(nextProps, nextState) {
+  UNSAFE_componentWillUpdate(nextProps, nextState) {
     // Check if source is valid for new type
     const oldType = this.state.type;
     const newType = nextState.type;
@@ -119,19 +118,25 @@ class AddModal extends React.Component {
       isOpen={this.props.isOpen}
       onOpenToggle={this.props.onOpenToggle}
       title={'Add Layer'}
+      data-wd-key="modal:add-layer"
     >
       <div className="maputnik-add-layer">
       <LayerIdBlock
         value={this.state.id}
-        onChange={v => this.setState({ id: v })}
+        wdKey="add-layer.layer-id"
+        onChange={v => {
+          this.setState({ id: v })
+        }}
       />
       <LayerTypeBlock
         value={this.state.type}
+        wdKey="add-layer.layer-type"
         onChange={v => this.setState({ type: v })}
       />
       {this.state.type !== 'background' &&
       <LayerSourceBlock
         sourceIds={sources}
+        wdKey="add-layer.layer-source-block"
         value={this.state.source}
         onChange={v => this.setState({ source: v })}
       />
@@ -144,7 +149,11 @@ class AddModal extends React.Component {
         onChange={v => this.setState({ 'source-layer': v })}
       />
       }
-      <Button className="maputnik-add-layer-button" onClick={this.addLayer.bind(this)}>
+      <Button
+        className="maputnik-add-layer-button"
+        onClick={this.addLayer.bind(this)}
+        data-wd-key="add-layer"
+      >
         Add Layer
       </Button>
       </div>

src/components/modals/ExportModal.jsx

@@ -2,10 +2,9 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { saveAs } from 'file-saver'
 
-import styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec'
+import * as styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec'
 import InputBlock from '../inputs/InputBlock'
 import StringInput from '../inputs/StringInput'
-import SelectInput from '../inputs/SelectInput'
 import CheckboxInput from '../inputs/CheckboxInput'
 import Button from '../Button'
 import Modal from './Modal'
@@ -32,7 +31,7 @@ class Gist extends React.Component {
     }
   }
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     this.setState({
       ...this.state,
       preview: !!(nextProps.mapStyle.metadata || {})['maputnik:openmaptiles_access_token']
@@ -236,12 +235,27 @@ class ExportModal extends React.Component {
   }
 
   downloadStyle() {
-    const blob = new Blob([styleSpec.format(stripAccessTokens(this.props.mapStyle))], {type: "application/json;charset=utf-8"});
+    const tokenStyle = styleSpec.format(stripAccessTokens(style.replaceAccessToken(this.props.mapStyle)));
+
+    const blob = new Blob([tokenStyle], {type: "application/json;charset=utf-8"});
     saveAs(blob, this.props.mapStyle.id + ".json");
   }
 
+  changeMetadataProperty(property, value) {
+    const changedStyle = {
+      ...this.props.mapStyle,
+      metadata: {
+        ...this.props.mapStyle.metadata,
+        [property]: value
+      }
+    }
+    this.props.onStyleChanged(changedStyle)
+  }
+
+
   render() {
     return <Modal
+      data-wd-key="export-modal"
       isOpen={this.props.isOpen}
       onOpenToggle={this.props.onOpenToggle}
       title={'Export Style'}
@@ -252,13 +266,29 @@ class ExportModal extends React.Component {
         <p>
           Download a JSON style to your computer.
         </p>
+
+        <p>
+          <InputBlock label={"OpenMapTiles Access Token: "}>
+            <StringInput
+              value={(this.props.mapStyle.metadata || {})['maputnik:openmaptiles_access_token']}
+              onChange={this.changeMetadataProperty.bind(this, "maputnik:openmaptiles_access_token")}
+            />
+          </InputBlock>
+          <InputBlock label={"Mapbox Access Token: "}>
+            <StringInput
+              value={(this.props.mapStyle.metadata || {})['maputnik:mapbox_access_token']}
+              onChange={this.changeMetadataProperty.bind(this, "maputnik:mapbox_access_token")}
+            />
+          </InputBlock>
+        </p>
+
         <Button onClick={this.downloadStyle.bind(this)}>
           <MdFileDownload />
           Download
         </Button>
       </div>
 
-      <div className="maputnik-modal-section">
+      <div className="maputnik-modal-section hide">
         <h4>Save style</h4>
         <Gist mapStyle={this.props.mapStyle} onStyleChanged={this.props.onStyleChanged}/>
       </div>

src/components/modals/LoadingModal.jsx

@@ -0,0 +1,49 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import Button from '../Button'
+import Modal from './Modal'
+
+
+class LoadingModal extends React.Component {
+  static propTypes = {
+    isOpen: PropTypes.bool.isRequired,
+    onCancel: PropTypes.func.isRequired,
+    title: PropTypes.string.isRequired,
+    message: PropTypes.node.isRequired,
+  }
+
+  constructor(props) {
+    super(props);
+  }
+
+  underlayOnClick(e) {
+    // This stops click events falling through to underlying modals.
+    e.stopPropagation();
+  }
+
+  render() {
+    return <Modal
+      data-wd-key="loading-modal"
+      isOpen={this.props.isOpen}
+      underlayClickExits={false}
+      underlayProps={{
+        onClick: (e) => underlayProps(e)
+      }}
+      closeable={false}
+      title={this.props.title}
+      onOpenToggle={() => this.props.onCancel()}
+    >
+      <p>
+        {this.props.message}
+      </p>
+      <p className="maputnik-dialog__buttons">
+        <Button onClick={(e) => this.props.onCancel(e)}>
+          Cancel
+        </Button>
+      </p>
+    </Modal>
+  }
+}
+
+export default LoadingModal

src/components/modals/Modal.jsx

@@ -1,33 +1,61 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import CloseIcon from 'react-icons/lib/md/close'
-import Overlay from './Overlay'
+import AriaModal from 'react-aria-modal'
+
 
 class Modal extends React.Component {
   static propTypes = {
+    "data-wd-key": PropTypes.string,
     isOpen: PropTypes.bool.isRequired,
     title: PropTypes.string.isRequired,
     onOpenToggle: PropTypes.func.isRequired,
     children: PropTypes.node,
+    underlayClickExits: PropTypes.bool,
+    underlayProps: PropTypes.object,
+  }
+
+  static defaultProps = {
+    underlayClickExits: true
+  }
+
+  getApplicationNode() {
+    return document.getElementById('app');
   }
 
   render() {
-    return <Overlay isOpen={this.props.isOpen}>
-      <div className="maputnik-modal">
-        <header className="maputnik-modal-header">
-          <h1 className="maputnik-modal-header-title">{this.props.title}</h1>
-          <span className="maputnik-modal-header-space"></span>
-          <a className="maputnik-modal-header-toggle"
-            onClick={() => this.props.onOpenToggle(false)}
-          >
-            <CloseIcon />
-          </a>
-        </header>
-        <div className="maputnik-modal-scroller">
-          <div className="maputnik-modal-content">{this.props.children}</div>
+    if(this.props.isOpen) {
+      return <AriaModal
+        titleText={this.props.title}
+        underlayClickExits={this.props.underlayClickExits}
+        underlayProps={this.props.underlayProps}
+        getApplicationNode={this.getApplicationNode}
+        data-wd-key={this.props["data-wd-key"]}
+        verticallyCenter={true}
+        onExit={() => this.props.onOpenToggle(false)}
+      >
+        <div className="maputnik-modal"
+          data-wd-key={this.props["data-wd-key"]}
+        >
+          <header className="maputnik-modal-header">
+            <h1 className="maputnik-modal-header-title">{this.props.title}</h1>
+            <span className="maputnik-modal-header-space"></span>
+            <button className="maputnik-modal-header-toggle"
+              onClick={() => this.props.onOpenToggle(false)}
+              data-wd-key={this.props["data-wd-key"]+".close-modal"}
+            >
+              <CloseIcon />
+            </button>
+          </header>
+          <div className="maputnik-modal-scroller">
+            <div className="maputnik-modal-content">{this.props.children}</div>
+          </div>
         </div>
-      </div>
-    </Overlay>
+      </AriaModal>
+    }
+    else {
+      return false;
+    }
   }
 }
 

src/components/modals/OpenModal.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import LoadingModal from './LoadingModal'
 import Modal from './Modal'
 import Button from '../Button'
 import FileReaderInput from 'react-file-reader-input'
@@ -23,6 +24,7 @@ class PublicStyle extends React.Component {
     return <div className="maputnik-public-style">
       <Button
         className="maputnik-public-style-button"
+        aria-label={this.props.title}
         onClick={() => this.props.onSelect(this.props.url)}
       >
         <header className="maputnik-public-style-header">
@@ -30,11 +32,12 @@ class PublicStyle extends React.Component {
           <span className="maputnik-space" />
           <AddIcon />
         </header>
-        <img
+        <div
           className="maputnik-public-style-thumbnail"
-          src={this.props.thumbnailUrl}
-          alt={this.props.title}
-        />
+          style={{
+            backgroundImage: `url(${this.props.thumbnailUrl})`
+          }}
+        ></div>
       </Button>
     </div>
   }
@@ -58,13 +61,33 @@ class OpenModal extends React.Component {
     })
   }
 
+  onCancelActiveRequest(e) {
+    // Else the click propagates to the underlying modal
+    if(e) e.stopPropagation();
+
+    if(this.state.activeRequest) {
+      this.state.activeRequest.abort();
+      this.setState({
+        activeRequest: null,
+        activeRequestUrl: null
+      });
+    }
+  }
+
   onStyleSelect(styleUrl) {
     this.clearError();
 
-    request({
+    const reqOpts = {
       url: styleUrl,
       withCredentials: false,
-    }, (error, response, body) => {
+    }
+
+    const activeRequest = request(reqOpts, (error, response, body) => {
+      this.setState({
+        activeRequest: null,
+        activeRequestUrl: null
+      });
+
         if (!error && response.statusCode == 200) {
           const mapStyle = style.ensureStyleValidity(JSON.parse(body))
           console.log('Loaded style ', mapStyle.id)
@@ -74,6 +97,11 @@ class OpenModal extends React.Component {
           console.warn('Could not open the style URL', styleUrl)
         }
     })
+
+    this.setState({
+      activeRequest: activeRequest,
+      activeRequestUrl: reqOpts.url
+    })
   }
 
   onOpenUrl() {
@@ -133,6 +161,7 @@ class OpenModal extends React.Component {
     }
 
     return <Modal
+      data-wd-key="open-modal"
       isOpen={this.props.isOpen}
       onOpenToggle={() => this.onOpenToggle()}
       title={'Open Style'}
@@ -141,7 +170,7 @@ class OpenModal extends React.Component {
       <section className="maputnik-modal-section">
         <h2>Upload Style</h2>
         <p>Upload a JSON style from your computer.</p>
-        <FileReaderInput onChange={this.onUpload.bind(this)}>
+        <FileReaderInput onChange={this.onUpload.bind(this)} tabIndex="-1">
           <Button className="maputnik-upload-button"><FileUploadIcon /> Upload</Button>
         </FileReaderInput>
       </section>
@@ -151,9 +180,9 @@ class OpenModal extends React.Component {
         <p>
           Load from a URL. Note that the URL must have <a href="https://enable-cors.org" target="_blank" rel="noopener noreferrer">CORS enabled</a>.
         </p>
-        <input type="text" ref={(input) => this.styleUrlElement = input} className="maputnik-input" placeholder="Enter URL..."/>
+        <input data-wd-key="open-modal.url.input" type="text" ref={(input) => this.styleUrlElement = input} className="maputnik-input" placeholder="Enter URL..."/>
         <div>
-          <Button className="maputnik-big-button" onClick={this.onOpenUrl.bind(this)}>Open URL</Button>
+          <Button data-wd-key="open-modal.url.button" className="maputnik-big-button" onClick={this.onOpenUrl.bind(this)}>Open URL</Button>
         </div>
       </section>
 
@@ -166,6 +195,13 @@ class OpenModal extends React.Component {
         {styleOptions}
         </div>
       </section>
+
+      <LoadingModal
+        isOpen={!!this.state.activeRequest}
+        title={'Loading style'}
+        onCancel={(e) => this.onCancelActiveRequest(e)}
+        message={"Loading: "+this.state.activeRequestUrl}
+      />
     </Modal>
   }
 }

src/components/modals/Overlay.jsx

@@ -1,24 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-
-
-class Overlay extends React.Component {
-  static propTypes = {
-    isOpen: PropTypes.bool.isRequired,
-    children: PropTypes.element.isRequired
-  }
-
-  render() {
-		let overlayStyle = {}
-		if(!this.props.isOpen) {
-			overlayStyle['display'] = 'none';
-		}
-
-    return <div className={"maputnik-overlay"} style={overlayStyle}>
-			<div className={"maputnik-overlay-viewport"} />
-      {this.props.children}
-    </div>
-  }
-}
-
-export default Overlay

src/components/modals/SettingsModal.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec'
+import * as styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec'
 import InputBlock from '../inputs/InputBlock'
 import StringInput from '../inputs/StringInput'
 import SelectInput from '../inputs/SelectInput'
@@ -42,6 +42,7 @@ class SettingsModal extends React.Component {
     const metadata = this.props.mapStyle.metadata || {}
     const inputProps = { }
     return <Modal
+      data-wd-key="modal-settings"
       isOpen={this.props.isOpen}
       onOpenToggle={this.props.onOpenToggle}
       title={'Style Settings'}
@@ -49,18 +50,21 @@ class SettingsModal extends React.Component {
       <div style={{minWidth: 350}}>
       <InputBlock label={"Name"} doc={styleSpec.latest.$root.name.doc}>
         <StringInput {...inputProps}
+          data-wd-key="modal-settings.name" 
           value={this.props.mapStyle.name}
           onChange={this.changeStyleProperty.bind(this, "name")}
         />
       </InputBlock>
       <InputBlock label={"Owner"} doc={"Owner ID of the style. Used by Mapbox or future style APIs."}>
         <StringInput {...inputProps}
+          data-wd-key="modal-settings.owner" 
           value={this.props.mapStyle.owner}
           onChange={this.changeStyleProperty.bind(this, "owner")}
         />
       </InputBlock>
       <InputBlock label={"Sprite URL"} doc={styleSpec.latest.$root.sprite.doc}>
         <StringInput {...inputProps}
+          data-wd-key="modal-settings.sprite" 
           value={this.props.mapStyle.sprite}
           onChange={this.changeStyleProperty.bind(this, "sprite")}
         />
@@ -68,6 +72,7 @@ class SettingsModal extends React.Component {
 
       <InputBlock label={"Glyphs URL"} doc={styleSpec.latest.$root.glyphs.doc}>
         <StringInput {...inputProps}
+          data-wd-key="modal-settings.glyphs" 
           value={this.props.mapStyle.glyphs}
           onChange={this.changeStyleProperty.bind(this, "glyphs")}
         />
@@ -75,6 +80,7 @@ class SettingsModal extends React.Component {
 
       <InputBlock label={"Mapbox Access Token"} doc={"Public access token for Mapbox services."}>
         <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")}
         />
@@ -82,6 +88,7 @@ class SettingsModal extends React.Component {
 
       <InputBlock label={"OpenMapTiles Access Token"} doc={"Public access token for the OpenMapTiles CDN."}>
         <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")}
         />
@@ -89,6 +96,7 @@ class SettingsModal extends React.Component {
 
       <InputBlock label={"Style Renderer"} doc={"Choose the default Maputnik renderer for this style."}>
         <SelectInput {...inputProps}
+          data-wd-key="modal-settings.maputnik:renderer" 
           options={[
             ['mbgljs', 'MapboxGL JS'],
             ['ol3', 'Open Layers 3'],

src/components/modals/ShortcutsModal.jsx

@@ -0,0 +1,73 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import Button from '../Button'
+import Modal from './Modal'
+
+
+class ShortcutsModal extends React.Component {
+  static propTypes = {
+    isOpen: PropTypes.bool.isRequired,
+    onOpenToggle: PropTypes.func.isRequired,
+  }
+
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    const help = [
+      {
+        key: "?",
+        text: "Shortcuts menu"
+      },
+      {
+        key: "o",
+        text: "Open modal"
+      },
+      {
+        key: "e",
+        text: "Export modal"
+      },
+      {
+        key: "d",
+        text: "Data Sources modal"
+      },
+      {
+        key: "s",
+        text: "Style Settings modal"
+      },
+      {
+        key: "i",
+        text: "Toggle inspect"
+      },
+      {
+        key: "m",
+        text: "Focus map"
+      },
+    ]
+
+
+    return <Modal
+      data-wd-key="shortcuts-modal"
+      isOpen={this.props.isOpen}
+      onOpenToggle={this.props.onOpenToggle}
+      title={'Shortcuts'}
+    >
+      <div className="maputnik-modal-section maputnik-modal-shortcuts">
+        <p>
+          Press <code>ESC</code> to lose focus of any active elements, then press one of:
+        </p>
+        <ul>
+          {help.map((item) => {
+            return <li key={item.key}>
+              <code>{item.key}</code> {item.text}
+            </li>
+          })}
+        </ul>
+      </div>
+    </Modal>
+  }
+}
+
+export default ShortcutsModal

src/components/modals/SourcesModal.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec'
+import * as styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec'
 import Modal from './Modal'
 import Button from '../Button'
 import InputBlock from '../inputs/InputBlock'

src/components/modals/SurveyModal.jsx

@@ -0,0 +1,41 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import Button from '../Button'
+import Modal from './Modal'
+
+import logoImage from 'maputnik-design/logos/logo-color.svg'
+
+class SurveyModal extends React.Component {
+  static propTypes = {
+    isOpen: PropTypes.bool.isRequired,
+    onOpenToggle: PropTypes.func.isRequired,
+  }
+
+  constructor(props) { super(props); }
+
+  onClick = () => {
+    window.open('https://gregorywolanski.typeform.com/to/cPgaSY', '_blank');
+
+    this.props.onOpenToggle();
+  }
+
+  render() {
+    return <Modal
+      data-wd-key="modal-survey"
+      isOpen={this.props.isOpen}
+      onOpenToggle={this.props.onOpenToggle}
+      title="Maputnik Survey"
+    >
+      <div className="maputnik-modal-survey">
+        <img className="maputnik-modal-survey__logo" src={logoImage} alt="" width="128" />
+        <h1>You + Maputnik = Maputnik better for you</h1>
+        <p className="maputnik-modal-survey__description">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.</p>
+        <Button onClick={this.onClick} className="maputnik-big-button maputnik-white-button maputnik-wide-button">Take the Maputnik Survey</Button>
+        <p className="maputnik-modal-survey__footnote">It takes 7 minutes, tops! Every question is optional.</p>
+      </div>
+    </Modal>
+  }
+}
+
+export default SurveyModal

src/components/sources/SourceTypeEditor.jsx

@@ -1,26 +1,32 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec'
+import * as styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec'
 import InputBlock from '../inputs/InputBlock'
 import StringInput from '../inputs/StringInput'
 import NumberInput from '../inputs/NumberInput'
+import SelectInput from '../inputs/SelectInput'
+
 
 class TileJSONSourceEditor extends React.Component {
   static propTypes = {
     source: PropTypes.object.isRequired,
     onChange: PropTypes.func.isRequired,
+    children: PropTypes.node,
   }
 
   render() {
-    return <InputBlock label={"TileJSON URL"} doc={styleSpec.latest.source_vector.url.doc}>
-      <StringInput
-        value={this.props.source.url}
-        onChange={url => this.props.onChange({
-          ...this.props.source,
-          url: url
-        })}
-      />
-    </InputBlock>
+    return <div>
+      <InputBlock label={"TileJSON URL"} doc={styleSpec.latest.source_vector.url.doc}>
+        <StringInput
+          value={this.props.source.url}
+          onChange={url => this.props.onChange({
+            ...this.props.source,
+            url: url
+          })}
+        />
+      </InputBlock>
+      {this.props.children}
+    </div>
   }
 }
 
@@ -28,6 +34,7 @@ class TileURLSourceEditor extends React.Component {
   static propTypes = {
     source: PropTypes.object.isRequired,
     onChange: PropTypes.func.isRequired,
+    children: PropTypes.node,
   }
 
   changeTileUrl(idx, value) {
@@ -73,6 +80,7 @@ class TileURLSourceEditor extends React.Component {
           })}
         />
       </InputBlock>
+      {this.props.children}
   </div>
 
   }
@@ -116,7 +124,18 @@ class SourceTypeEditor extends React.Component {
       case 'tilejson_raster': return <TileJSONSourceEditor {...commonProps} />
       case 'tilexyz_raster': return <TileURLSourceEditor {...commonProps} />
       case 'tilejson_raster-dem': return <TileJSONSourceEditor {...commonProps} />
-      case 'tilexyz_raster-dem': return <TileURLSourceEditor {...commonProps} />
+      case 'tilexyz_raster-dem': return <TileURLSourceEditor {...commonProps}>
+        <InputBlock label={"Encoding"} doc={styleSpec.latest.source_raster_dem.encoding.doc}>
+          <SelectInput
+            options={Object.keys(styleSpec.latest.source_raster_dem.encoding.values)}
+            onChange={encoding => this.props.onChange({
+              ...this.props.source,
+              encoding: encoding
+            })}
+            value={this.props.source.encoding || styleSpec.latest.source_raster_dem.encoding.default}
+          />
+        </InputBlock>
+      </TileURLSourceEditor>
       default: return null
     }
   }

src/config/styles.json

@@ -26,8 +26,8 @@
   {
     "id": "osm-liberty",
     "title": "OSM Liberty",
-    "url": "https://rawgit.com/lukasmartinelli/osm-liberty/gh-pages/style.json",
-    "thumbnail": "https://cdn.rawgit.com/lukasmartinelli/osm-liberty/gh-pages/thumbnail.png"
+    "url": "https://rawgit.com/maputnik/osm-liberty/gh-pages/style.json",
+    "thumbnail": "https://cdn.rawgit.com/maputnik/osm-liberty/gh-pages/thumbnail.png"
   },
   {
     "id": "empty-style",

src/libs/accessibility.js

@@ -0,0 +1,12 @@
+import lodash from 'lodash'
+
+
+// Throttle for 3 seconds so when a user enables it they don't have to refresh the page.
+const reducedMotionEnabled = lodash.throttle(() => {
+  return window.matchMedia("(prefers-reduced-motion: reduce)").matches
+}, 3000);
+
+
+export default {
+  reducedMotionEnabled
+}

src/libs/debug.js

@@ -0,0 +1,44 @@
+import querystring from 'querystring'
+
+
+const debugStore = {};
+
+function enabled() {
+  const qs = querystring.parse(window.location.search.slice(1));
+  if(qs.hasOwnProperty("debug")) {
+    return !!qs.debug.match(/^(|1|true)$/);
+  }
+  else {
+    return false;
+  }
+}
+
+function genErr() {
+  return new Error("Debug not enabled, enable by appending '?debug' to your query string");
+}
+
+function set(namespace, key, value) {
+  if(!enabled()) {
+    throw genErr();
+  }
+  debugStore[namespace] = debugStore[namespace] || {};
+  debugStore[namespace][key] = value;
+}
+
+function get(namespace, key) {
+  if(!enabled()) {
+    throw genErr();
+  }
+  if(debugStore.hasOwnProperty(namespace)) {
+    return debugStore[namespace][key];
+  }
+}
+
+const mod = {
+  enabled,
+  get,
+  set
+}
+
+window.debug = mod;
+export default mod;

src/libs/diffmessage.js

@@ -1,4 +1,4 @@
-import styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec'
+import * as styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec'
 
 export function diffMessages(beforeStyle, afterStyle) {
   const changes = styleSpec.diff(beforeStyle, afterStyle)

src/libs/filterops.js

@@ -1,4 +1,4 @@
-import styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec'
+import * as styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec'
 export const combiningFilterOps = ['all', 'any', 'none']
 export const setFilterOps = ['in', '!in']
 export const otherFilterOps = Object

src/libs/layer.js

@@ -1,4 +1,4 @@
-import styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec'
+import * as styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec'
 
 export function changeType(layer, newType) {
   const changedPaintProps = { ...layer.paint }

src/libs/query-util.js

@@ -0,0 +1,17 @@
+function asBool(queryObj, key) {
+  if(queryObj.hasOwnProperty(key)) {
+    if(queryObj[key].match(/^false|0$/)) {
+      return false;
+    }
+    else {
+      return true;
+    }
+  }
+  else {
+    return false;
+  }
+}
+
+module.exports = {
+  asBool
+}

src/styles/_base.scss

@@ -18,6 +18,11 @@ html {
   box-sizing: border-box;
 }
 
+body {
+  // The UI is 100% height so prevent bounce scroll on OSX
+  overflow: hidden;
+}
+
 *,
 *::before,
 *::after {
@@ -76,3 +81,7 @@ label:hover {
 a {
   color: white;
 }
+
+.hide {
+  display: none !important;
+}

src/styles/_components.scss

@@ -5,7 +5,11 @@
   right: 0;
   bottom: 0;
   height: calc(100% - #{$toolbar-height + $toolbar-offset});
-  width: 75%;
+  width: calc(
+    100%
+    - 200px /* layer list */
+    - 350px /* layer editor */
+  );
 }
 
 // DOC LABEL
@@ -53,8 +57,10 @@
   font-size: $font-size-6;
   padding: $margin-2;
   user-select: none;
+  border-width: 0;
   border-radius: 2px;
   box-sizing: border-box;
+  text-decoration: none;
 
   &:hover {
     background-color: lighten($color-midgray, 12);
@@ -69,6 +75,20 @@
   font-size: $font-size-5;
 }
 
+.maputnik-wide-button {
+  padding: $margin-2 $margin-3;
+}
+
+.maputnik-green-button {
+  background-color: $color-green;
+  color: $color-black;
+}
+
+.maputnik-white-button {
+  background-color: $color-white;
+  color: $color-black;
+}
+
 .maputnik-icon-button {
   background-color: transparent;
 

src/styles/_filtereditor.scss

@@ -3,24 +3,34 @@
 }
 
 .maputnik-filter-editor {
+  @extend .clearfix;
   color: $color-lowgray;
 }
 
 .maputnik-filter-editor-property {
   display: inline-block;
-  width: '22%';
+  width: 25%;
 }
 
 .maputnik-filter-editor-operator {
-  display: inline-block;
-  width: 19%;
   margin-left: 2%;
+  display: inline-block;
+  width: 17%;
+
+  .maputnik-select {
+    width: 100%;
+  }
 }
 
 .maputnik-filter-editor-args {
   display: inline-block;
   width: 54%;
   margin-left: 2%;
+
+  .maputnik-string,
+  .maputnik-number {
+    width: 100%;
+  }
 }
 
 .maputnik-filter-editor-compound-select {
@@ -40,10 +50,6 @@
   color: $color-midgray;
 }
 
-.maputnik-filter-editor {
-  @extend .clearfix;
-}
-
 .maputnik-add-filter {
   display: inline-block;
   float: right;
@@ -57,9 +63,6 @@
 .maputnik-filter-editor-block-action {
   margin-top: $margin-2;
   margin-bottom: $margin-2;
-}
-
-.maputnik-filter-editor-block-action {
   display: inline-block;
   width: 6%;
   margin-right: 1.5%;
@@ -70,27 +73,3 @@
   width: 92.5%;
 }
 
-.maputnik-filter-editor-property {
-  display: inline-block;
-  width: 25%;
-}
-
-.maputnik-filter-editor-operator {
-  display: inline-block;
-  width: 17%;
-
-  .maputnik-select {
-    width: 100%;
-  }
-}
-
-.maputnik-filter-editor-args {
-  display: inline-block;
-  width: 54%;
-
-  .maputnik-string,
-  .maputnik-number {
-    width: 100%;
-  }
-}
-

src/styles/_input.scss

@@ -41,7 +41,7 @@
 
 .maputnik-color-swatch {
   height: 26px;
-  width: 3px;
+  width: 14px;
   flex-shrink: 0;
   flex-grow: 0;
 }
@@ -91,7 +91,6 @@
 
 .maputnik-button-selected {
   background-color: lighten($color-midgray, 12);
-  outline: 1px $color-white;
   color: white;
 }
 
@@ -126,6 +125,10 @@
     border-width: 2px;
     border-color: $color-gray;
     transition: background-color 0.1s ease-out;
+
+    @media screen and (prefers-reduced-motion: reduce) {
+      transition-duration: 0ms;
+    }
   }
 
   &-icon {

src/styles/_layer.scss

@@ -43,17 +43,32 @@
     -webkit-transition: opacity 600ms, visibility 600ms;
     transition: opacity 600ms, visibility 600ms;
 
+    @media screen and (prefers-reduced-motion: reduce) {
+      transition-duration: 0;
+    }
+
     @include flex-row;
   }
 
-  &-icon-action svg {
-    fill: $color-black;
+  &-icon-action {
+    display: none;
+
+    svg {
+      fill: $color-black;
+    }
   }
 
   .maputnik-layer-list-item:hover,
   .maputnik-layer-list-item-selected {
     background-color: lighten($color-black, 2);
 
+    .maputnik-layer-list-icon-action {
+      display: block;
+      background: initial;
+      border: none;
+      padding: 0 2px;
+    }
+
     .maputnik-layer-list-icon-action svg {
       fill: darken($color-lowgray, 0.5);
 
@@ -122,6 +137,7 @@
   user-select: none;
   padding: $margin-2;
   line-height: 20px;
+  border-top: solid 1px #36383e;
 
   @include flex-row;
 
@@ -164,3 +180,41 @@
     color: $color-lowgray;
   }
 }
+
+.more-menu {
+  position: relative;
+
+  &__menu {
+    position: absolute;
+    z-index: 9999;
+    background: $color-black;
+    border: solid 1px $color-midgray;
+    right: 0;
+    min-width: 120px;
+  }
+
+  &__button__svg {
+    width: 24px;
+    height: 24px;
+  }
+
+  &__menu__item {
+    padding: 4px;
+  }
+}
+
+.layer-header {
+  display: flex;
+  padding: 6px;
+  background: $color-black;
+
+  &__title {
+    flex: 1;
+    margin: 0;
+    line-height: 24px;
+  }
+
+  &__info {
+    min-width: 28px;
+  }
+}

src/styles/_layout.scss

@@ -1,6 +1,6 @@
 //SCROLLING
 .maputnik-scroll-container {
-  overflow-x: visible;
+  overflow-x: hidden;
   overflow-y: scroll;
   bottom: 0;
   left: 0;

src/styles/_modal.scss

@@ -7,6 +7,7 @@
   box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.3);
   z-index: 3;
   position: relative;
+  font-family: $font-family;
 }
 
 .maputnik-modal-section {
@@ -42,7 +43,10 @@
 }
 
 .maputnik-modal-header-toggle {
-  cursor: pointer;
+  border: none;
+  background: initial;
+  color: white;
+  padding: 0;
 }
 
 .maputnik-modal-scroller {
@@ -60,31 +64,6 @@
   @extend .maputnik-space;
 }
 
-//OVERLAY
-.maputnik-overlay-viewport {
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: 2;
-  opacity: 0.875;
-  background-color: rgb(28, 31, 36);
-}
-
-.maputnik-overlay {
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  position: fixed;
-  align-items: center;
-  justify-content: center;
-  z-index: 9;
-
-  @include flex-row;
-}
-
 //OPEN MODAL
 .maputnik-upload-button {
   @extend .maputnik-big-button;
@@ -109,6 +88,7 @@
   background-color: $color-gray;
   padding: $margin-3;
   display: block;
+  width: 100%;
 
   &:hover {
     background-color: $color-midgray;
@@ -123,6 +103,9 @@
   display: block;
   margin-top: $margin-2;
   width: 100%;
+  padding-top: calc(400 / 600 * 100%);
+  background-size: cover;
+  background-color: $color-midgray;
 }
 
 .maputnik-add-layer {
@@ -160,6 +143,7 @@
   font-size: $font-size-5;
   color: $color-lowgray;
   background-color: transparent;
+  width: 100%;
 
   @include flex-row;
 }
@@ -243,3 +227,38 @@
   text-decoration: none;
   color: #ef5350;
 }
+
+.maputnik-modal-shortcuts {
+  code {
+    color: white;
+    background: #3c3c3c;
+    padding: 2px 6px;
+    display: inline-block;
+    text-align: center;
+    border-radius: 2px;
+    margin-right: 4px;
+    font-family: monospace;
+  }
+
+  li {
+    margin-bottom: 4px;
+  }
+}
+
+.maputnik-modal-survey {
+  width: 372px;
+}
+
+.maputnik-modal-survey__logo {
+  display: block;
+  margin: 0 auto;
+}
+
+.maputnik-modal-survey__description {
+  line-height: 1.5;
+}
+
+.maputnik-modal-survey__footnote {
+  color: $color-green;
+  margin-top: 16px;
+}

src/styles/_react-codemirror.scss

@@ -0,0 +1,3 @@
+.react-codemirror2 {
+  max-width: 100%;
+}

src/styles/_react-collapse.scss

@@ -0,0 +1,9 @@
+// See <https://github.com/nkbt/react-collapse/commit/4f4fbce7c6c07b082dc62062338c9294c656f9df>
+.react-collapse-container {
+  display: flex;
+  max-width: 100%;
+
+  > * {
+    flex: 1;
+  }
+}

src/styles/_toolbar.scss

@@ -9,15 +9,25 @@
   background-color: $color-black;
 }
 
+.maputnik-toolbar-logo-container {
+  position: relative;
+}
+
 .maputnik-toolbar-logo {
+  text-decoration: none;
+  display: block;
+  flex: 0 0 180px;
   width: 180px;
   text-align: left;
   background-color: $color-black;
   padding: $margin-2;
   height: $toolbar-height;
+  position: relative;
+  overflow: hidden;
 
   h1 {
     display: inline;
+    line-height: 26px;
   }
 
   img {
@@ -47,14 +57,38 @@
   }
 }
 
+.maputnik-toolbar-link--highlighted {
+  line-height: 1;
+  padding: $margin-2 $margin-3;
+
+  .maputnik-toolbar-link-wrapper {
+    background-color: $color-white;
+    border-radius: 2px;
+    padding: $margin-2;
+    margin-top: $margin-1;
+    color: $color-black;
+    display: block;
+  }
+
+  &:hover {
+    background-color: $color-black;
+  }
+
+  &:hover .maputnik-toolbar-link-wrapper {
+    background-color: lighten($color-midgray, 12);
+    color: $color-white;
+  }
+}
+
 .maputnik-toolbar-version {
-  position: absolute;
   font-size: 10px;
-  bottom: -2px;
   margin-left: 4px;
+  white-space: nowrap;
 }
 
 .maputnik-toolbar-action {
+  background: inherit;
+  border-width: 0;
   @extend .maputnik-toolbar-link;
 }
 
@@ -67,10 +101,6 @@
   margin-left: $margin-1;
 }
 
-.maputnik-toolbar-logo {
-  flex: 0 0 170px;
-}
-
 .maputnik-toolbar__inner {
   display: flex;
 }
@@ -80,3 +110,23 @@
   flex: 1;
   overflow-y: auto;
 }
+
+.maputnik-toolbar-skip {
+  position: absolute;
+  overflow: hidden;
+  width: 0px;
+  height: 100%;
+  text-align: center;
+  display: block;
+  background-color: $color-black;
+  z-index: 999;
+  line-height: 40px;
+  left: 0;
+  top: 0;
+
+  &:active,
+  &:focus {
+    width: 100%;
+  }
+}
+

src/styles/_zoomproperty.scss

@@ -64,10 +64,6 @@
   margin-right: $margin-3;
 }
 
-.maputnik-zoom-spec-property .maputnik-input-block:not(:first-child) .maputnik-input-block-label {
-  visibility: hidden;
-}
-
 // DATA FUNC
 .maputnik-make-data-function {
   background-color: transparent;
@@ -79,16 +75,15 @@
   @extend .maputnik-icon-button;
 }
 
-// DATA PROPERTY
-.maputnik-data-spec-block {
-  overflow: auto;
-}
-
 .maputnik-data-spec-property {
   .maputnik-input-block-label {
     width: 30%;
   }
 
+  .maputnik-input-block:not(:first-child) .maputnik-input-block-label {
+    visibility: hidden;
+  }
+
   .maputnik-input-block-content {
     width: 70%;
   }
@@ -117,6 +112,8 @@
 }
 
 .maputnik-data-spec-block {
+  overflow: auto;
+
   .maputnik-data-spec-property-stop-edit,
   .maputnik-data-spec-property-stop-data {
     display: inline-block;
@@ -129,6 +126,10 @@
   }
 
   .maputnik-data-spec-property-stop-data {
+    width: 100%;
+  }
+
+  .maputnik-data-spec-property-stop-edit + .maputnik-data-spec-property-stop-data {
     width: 78%;
   }
 }

src/styles/index.scss

@@ -4,6 +4,7 @@ $color-midgray: #36383e;
 $color-lowgray: #8e8e8e;
 $color-white: #f0f0f0;
 $color-red: #cf4a4a;
+$color-green: #53b972;
 $margin-1: 3px;
 $margin-2: 5px;
 $margin-3: 10px;
@@ -36,3 +37,16 @@ $toolbar-offset: 0;
 @import 'zoomproperty';
 @import 'popup';
 @import 'map';
+@import 'react-collapse';
+@import 'react-codemirror';
+
+/**
+ * Hacks for webdriverio isVisibleWithinViewport
+ */
+#app {
+  height: 100vh;
+}
+
+.maputnik-layout {
+  height: 100vh;
+}

src/template.html

@@ -69,6 +69,87 @@
   </style>
 </head>
 <body>
+  <!-- TODO: Import dynamically -->
+  <!-- From <https://github.com/hail2u/color-blindness-emulation> -->
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    version="1.1">
+    <defs>
+      <filter id="protanopia">
+        <feColorMatrix
+          in="SourceGraphic"
+          type="matrix"
+          values="0.567, 0.433, 0,     0, 0
+                  0.558, 0.442, 0,     0, 0
+                  0,     0.242, 0.758, 0, 0
+                  0,     0,     0,     1, 0"/>
+      </filter>
+      <filter id="protanomaly">
+        <feColorMatrix
+          in="SourceGraphic"
+          type="matrix"
+          values="0.817, 0.183, 0,     0, 0
+                  0.333, 0.667, 0,     0, 0
+                  0,     0.125, 0.875, 0, 0
+                  0,     0,     0,     1, 0"/>
+      </filter>
+      <filter id="deuteranopia">
+        <feColorMatrix
+          in="SourceGraphic"
+          type="matrix"
+          values="0.625, 0.375, 0,   0, 0
+                  0.7,   0.3,   0,   0, 0
+                  0,     0.3,   0.7, 0, 0
+                  0,     0,     0,   1, 0"/>
+      </filter>
+      <filter id="deuteranomaly">
+        <feColorMatrix
+          in="SourceGraphic"
+          type="matrix"
+          values="0.8,   0.2,   0,     0, 0
+                  0.258, 0.742, 0,     0, 0
+                  0,     0.142, 0.858, 0, 0
+                  0,     0,     0,     1, 0"/>
+      </filter>
+      <filter id="tritanopia">
+        <feColorMatrix
+          in="SourceGraphic"
+          type="matrix"
+          values="0.95, 0.05,  0,     0, 0
+                  0,    0.433, 0.567, 0, 0
+                  0,    0.475, 0.525, 0, 0
+                  0,    0,     0,     1, 0"/>
+      </filter>
+      <filter id="tritanomaly">
+        <feColorMatrix
+          in="SourceGraphic"
+          type="matrix"
+          values="0.967, 0.033, 0,     0, 0
+                  0,     0.733, 0.267, 0, 0
+                  0,     0.183, 0.817, 0, 0
+                  0,     0,     0,     1, 0"/>
+      </filter>
+      <filter id="achromatopsia">
+        <feColorMatrix
+          in="SourceGraphic"
+          type="matrix"
+          values="0.299, 0.587, 0.114, 0, 0
+                  0.299, 0.587, 0.114, 0, 0
+                  0.299, 0.587, 0.114, 0, 0
+                  0,     0,     0,     1, 0"/>
+      </filter>
+      <filter id="achromatomaly">
+        <feColorMatrix
+          in="SourceGraphic"
+          type="matrix"
+          values="0.618, 0.320, 0.062, 0, 0
+                  0.163, 0.775, 0.062, 0, 0
+                  0.163, 0.320, 0.516, 0, 0
+                  0,     0,     0,     1, 0"/>
+      </filter>
+    </defs>
+  </svg>
+
   <div id="app">
     <div id="loader">Loading...</div>
   </div>