Merge remote-tracking branch 'upstream/master' into feature/color-accessibility-ui

Conflicts: src/components/App.jsx src/styles/_components.scss
2025-12-27 00:20:00 +00:00 · 2018-09-23 11:39:15 +01:00
parent 85a28999fb 7ffb44f604
commit 8f07a79a49
63 changed files with 666 additions and 663 deletions
--- a/src/components/App.jsx
+++ b/src/components/App.jsx
@@ -1,12 +1,11 @@
+import autoBind from 'react-autobind';
 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 {arrayMove} from 'react-sortable-hoc'
 import url from 'url'

 import MapboxGlMap from './map/MapboxGlMap'
-import OpenLayers3Map from './map/OpenLayers3Map'
 import LayerList from './layers/LayerList'
 import LayerEditor from './layers/LayerEditor'
 import Toolbar from './Toolbar'
@@ -18,13 +17,14 @@ 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 * as styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec'
-import style from '../libs/style.js'
+import style from '../libs/style'
 import { initialStyleUrl, loadStyleUrl } from '../libs/urlopen'
 import { undoMessages, redoMessages } from '../libs/diffmessage'
-import { loadDefaultStyle, StyleStore } from '../libs/stylestore'
+import { StyleStore } from '../libs/stylestore'
 import { ApiStyleStore } from '../libs/apistore'
 import { RevisionStore } from '../libs/revisions'
 import LayerWatcher from '../libs/layerwatcher'
@@ -34,7 +34,7 @@ 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) {
@@ -53,6 +53,8 @@ function updateRootSpec(spec, fieldName, newValues) {
 export default class App extends React.Component {
  constructor(props) {
    super(props)
+    autoBind(this);
+
    this.revisionStore = new RevisionStore()
    this.styleStore = new ApiStyleStore({
      onLocalStyleChange: mapStyle => this.onStyleChanged(mapStyle, false)
@@ -172,9 +174,11 @@ export default class App extends React.Component {
        open: false,
        shortcuts: false,
        export: false,
+        survey: localStorage.hasOwnProperty('survey') ? false : true
      },
      mapOptions: {
-        showTileBoundaries: queryUtil.asBool(queryObj, "show-tile-boundaries")
+        showTileBoundaries: queryUtil.asBool(queryObj, "show-tile-boundaries"),
+        showCollisionBoxes: queryUtil.asBool(queryObj, "show-collision-boxes")
      },
    }

@@ -183,14 +187,31 @@ export default class App extends React.Component {
    })
  }

+  handleKeyPress(e) {
+    if(navigator.platform.toUpperCase().indexOf('MAC') >= 0) {
+      if(e.metaKey && e.shiftKey && e.keyCode === 90) {
+        this.onRedo(e);
+      }
+      else if(e.metaKey && e.keyCode === 90) {
+        this.onUndo(e);
+      }
+    }
+    else {
+      if(e.ctrlKey && e.keyCode === 90) {
+        this.onUndo(e);
+      }
+      else if(e.ctrlKey && e.keyCode === 89) {
+        this.onRedo(e);
+      }
+    }
+  }
+
  componentDidMount() {
-    Mousetrap.bind(['mod+z'], this.onUndo.bind(this));
-    Mousetrap.bind(['mod+y', 'mod+shift+z'], this.onRedo.bind(this));
+    window.addEventListener("keydown", this.handleKeyPress);
  }

  componentWillUnmount() {
-    Mousetrap.unbind(['mod+z'], this.onUndo.bind(this));
-    Mousetrap.unbind(['mod+y', 'mod+shift+z'], this.onRedo.bind(this));
+    window.removeEventListener("keydown", this.handleKeyPress);
  }

  saveStyle(snapshotStyle) {
@@ -213,7 +234,7 @@ export default class App extends React.Component {
    })
  }

-  onStyleChanged(newStyle, save=true) {
+  onStyleChanged = (newStyle, save=true) => {

    const errors = styleSpec.validate(newStyle, styleSpec.latest)
    if(errors.length === 0) {
@@ -240,7 +261,7 @@ export default class App extends React.Component {
    this.fetchSources();
  }

-  onUndo() {
+  onUndo = () => {
    const activeStyle = this.revisionStore.undo()
    const messages = undoMessages(this.state.mapStyle, activeStyle)
    this.saveStyle(activeStyle)
@@ -250,7 +271,7 @@ export default class App extends React.Component {
    })
  }

-  onRedo() {
+  onRedo = () => {
    const activeStyle = this.revisionStore.redo()
    const messages = redoMessages(this.state.mapStyle, activeStyle)
    this.saveStyle(activeStyle)
@@ -260,7 +281,7 @@ export default class App extends React.Component {
    })
  }

-  onMoveLayer(move) {
+  onMoveLayer = (move) => {
    let { oldIndex, newIndex } = move;
    let layers = this.state.mapStyle.layers;
    oldIndex = clamp(oldIndex, 0, layers.length-1);
@@ -278,7 +299,7 @@ export default class App extends React.Component {
    this.onLayersChange(layers);
  }

-  onLayersChange(changedLayers) {
+  onLayersChange = (changedLayers) => {
    const changedStyle = {
      ...this.state.mapStyle,
      layers: changedLayers
@@ -286,7 +307,7 @@ export default class App extends React.Component {
    this.onStyleChanged(changedStyle)
  }

-  onLayerDestroy(layerId) {
+  onLayerDestroy = (layerId) => {
    let layers = this.state.mapStyle.layers;
    const remainingLayers = layers.slice(0);
    const idx = style.indexOfLayer(remainingLayers, layerId)
@@ -294,7 +315,7 @@ export default class App extends React.Component {
    this.onLayersChange(remainingLayers);
  }

-  onLayerCopy(layerId) {
+  onLayerCopy = (layerId) => {
    let layers = this.state.mapStyle.layers;
    const changedLayers = layers.slice(0)
    const idx = style.indexOfLayer(changedLayers, layerId)
@@ -305,7 +326,7 @@ export default class App extends React.Component {
    this.onLayersChange(changedLayers)
  }

-  onLayerVisibilityToggle(layerId) {
+  onLayerVisibilityToggle = (layerId) => {
    let layers = this.state.mapStyle.layers;
    const changedLayers = layers.slice(0)
    const idx = style.indexOfLayer(changedLayers, layerId)
@@ -320,7 +341,7 @@ export default class App extends React.Component {
  }


-  onLayerIdChange(oldId, newId) {
+  onLayerIdChange = (oldId, newId) => {
    const changedLayers = this.state.mapStyle.layers.slice(0)
    const idx = style.indexOfLayer(changedLayers, oldId)

@@ -332,7 +353,7 @@ export default class App extends React.Component {
    this.onLayersChange(changedLayers)
  }

-  onLayerChanged(layer) {
+  onLayerChanged = (layer) => {
    const changedLayers = this.state.mapStyle.layers.slice(0)
    const idx = style.indexOfLayer(changedLayers, layer.id)
    changedLayers[idx] = layer
@@ -340,7 +361,7 @@ export default class App extends React.Component {
    this.onLayersChange(changedLayers)
  }

-  setMapState(newState) {
+  setMapState = (newState) => {
    this.setState({
      mapState: newState
    })
@@ -362,12 +383,14 @@ 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);
        }

-        fetch(url)
+        fetch(url, {
+          mode: 'cors',
+        })
          .then((response) => {
            return response.json();
          })
@@ -404,7 +427,7 @@ export default class App extends React.Component {

  mapRenderer() {
    const mapProps = {
-      mapStyle: style.replaceAccessToken(this.state.mapStyle, {allowFallback: true}),
+      mapStyle: style.replaceAccessTokens(this.state.mapStyle, {allowFallback: true}),
      options: this.state.mapOptions,
      onDataChange: (e) => {
        this.layerWatcher.analyzeMap(e.map)
@@ -419,28 +442,29 @@ export default class App extends React.Component {

    // Check if OL3 code has been loaded?
    if(renderer === 'ol3') {
-      mapElement = <OpenLayers3Map {...mapProps} />
+      mapElement = <div>TODO</div>
    } else {
      mapElement = <MapboxGlMap {...mapProps}
        inspectModeEnabled={this.state.mapState === "inspect"}
        highlightedLayer={this.state.mapStyle.layers[this.state.selectedLayerIndex]}
-        onLayerSelect={this.onLayerSelect.bind(this)} />
+        onLayerSelect={this.onLayerSelect} />
    }

-    let filterName = "";
+    let filterName;
    if(this.state.mapState.match(/^filter-/)) {
      filterName = this.state.mapState.replace(/^filter-/, "");
    }
-    const elementStyle = {
-      "filter": `url('#${filterName}')`
+    const elementStyle = {};
+    if (filterName) {
+      elementStyle.filter = `url('color-accessibility.svg#${filterName}')`;
    };

-    return <div style={elementStyle}>
+    return <div style={elementStyle} className="maputnik-map__container">
      {mapElement}
    </div>
  }

-  onLayerSelect(layerId) {
+  onLayerSelect = (layerId) => {
    const idx = style.indexOfLayer(this.state.mapStyle.layers, layerId)
    this.setState({ selectedLayerIndex: idx })
  }
@@ -452,6 +476,10 @@ export default class App extends React.Component {
        [modalName]: !this.state.isOpen[modalName]
      }
    })
+
+    if(modalName === 'survey') {
+      localStorage.setItem('survey', '');
+    }
  }

  render() {
@@ -464,19 +492,19 @@ export default class App extends React.Component {
      mapStyle={this.state.mapStyle}
      inspectModeEnabled={this.state.mapState === "inspect"}
      sources={this.state.sources}
-      onStyleChanged={this.onStyleChanged.bind(this)}
-      onStyleOpen={this.onStyleChanged.bind(this)}
-      onSetMapState={this.setMapState.bind(this)}
+      onStyleChanged={this.onStyleChanged}
+      onStyleOpen={this.onStyleChanged}
+      onSetMapState={this.setMapState}
      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)}
+      onMoveLayer={this.onMoveLayer}
+      onLayerDestroy={this.onLayerDestroy}
+      onLayerCopy={this.onLayerCopy}
+      onLayerVisibilityToggle={this.onLayerVisibilityToggle}
+      onLayersChange={this.onLayersChange}
+      onLayerSelect={this.onLayerSelect}
      selectedLayerIndex={this.state.selectedLayerIndex}
      layers={layers}
      sources={this.state.sources}
@@ -490,12 +518,12 @@ export default class App extends React.Component {
      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)}
+      onMoveLayer={this.onMoveLayer}
+      onLayerChanged={this.onLayerChanged}
+      onLayerDestroy={this.onLayerDestroy}
+      onLayerCopy={this.onLayerCopy}
+      onLayerVisibilityToggle={this.onLayerVisibilityToggle}
+      onLayerIdChange={this.onLayerIdChange}
    /> : null

    const bottomPanel = (this.state.errors.length + this.state.infos.length) > 0 ? <MessagePanel
@@ -511,27 +539,31 @@ export default class App extends React.Component {
      />
      <SettingsModal
        mapStyle={this.state.mapStyle}
-        onStyleChanged={this.onStyleChanged.bind(this)}
+        onStyleChanged={this.onStyleChanged}
        isOpen={this.state.isOpen.settings}
        onOpenToggle={this.toggleModal.bind(this, 'settings')}
      />
      <ExportModal
        mapStyle={this.state.mapStyle}
-        onStyleChanged={this.onStyleChanged.bind(this)}
+        onStyleChanged={this.onStyleChanged}
        isOpen={this.state.isOpen.export}
        onOpenToggle={this.toggleModal.bind(this, 'export')}
      />
      <OpenModal
        isOpen={this.state.isOpen.open}
-        onStyleOpen={this.onStyleChanged.bind(this)}
+        onStyleOpen={this.onStyleChanged}
        onOpenToggle={this.toggleModal.bind(this, 'open')}
      />
      <SourcesModal
        mapStyle={this.state.mapStyle}
-        onStyleChanged={this.onStyleChanged.bind(this)}
+        onStyleChanged={this.onStyleChanged}
        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
--- a/src/components/Toolbar.jsx
+++ b/src/components/Toolbar.jsx
@@ -1,22 +1,15 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import FileReaderInput from 'react-file-reader-input'
 import classnames from 'classnames'
 import { Wrapper, Button, Menu, MenuItem } from 'react-aria-menubutton'

 import MdFileDownload from 'react-icons/lib/md/file-download'
-import MdFileUpload from 'react-icons/lib/md/file-upload'
 import OpenIcon from 'react-icons/lib/md/open-in-browser'
 import SettingsIcon from 'react-icons/lib/md/settings'
-import MdInfo from 'react-icons/lib/md/info'
 import SourcesIcon from 'react-icons/lib/md/layers'
-import MdSave from 'react-icons/lib/md/save'
-import MdStyle from 'react-icons/lib/md/style'
-import MdMap from 'react-icons/lib/md/map'
-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 ColorIcon from 'react-icons/lib/md/color-lens'
 import MapIcon from 'react-icons/lib/md/map'
@@ -26,7 +19,6 @@ import ViewIcon from 'react-icons/lib/md/remove-red-eye'
 import logoImage from 'maputnik-design/logos/logo-color.svg'
 import pkgJson from '../../package.json'

-import style from '../libs/style'

 class IconText extends React.Component {
  static propTypes = {
@@ -58,6 +50,28 @@ class ToolbarLink extends React.Component {
  }
 }

+class ToolbarLinkHighlighted extends React.Component {
+  static propTypes = {
+    className: PropTypes.string,
+    children: PropTypes.node,
+    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,
@@ -89,16 +103,13 @@ export default class Toolbar extends React.Component {
    onToggleModal: PropTypes.func,
  }

-  constructor(props) {
-    super(props)
-    this.state = {
-      isOpen: {
-        settings: false,
-        sources: false,
-        open: false,
-        add: false,
-        export: false,
-      }
+  state = {
+    isOpen: {
+      settings: false,
+      sources: false,
+      open: false,
+      add: false,
+      export: false,
    }
  }

@@ -211,6 +222,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>
--- a/src/components/fields/ColorField.jsx
+++ b/src/components/fields/ColorField.jsx
@@ -19,17 +19,14 @@ class ColorField extends React.Component {
    default: PropTypes.string,
  }

-  constructor(props) {
-    super(props)
-    this.state = {
-      pickerOpened: false,
-    }
+  state = {
+    pickerOpened: false
  }

  //TODO: I much rather would do this with absolute positioning
  //but I am too stupid to get it to work together with fixed position
  //and scrollbars so I have to fallback to JavaScript
-  calcPickerOffset() {
+  calcPickerOffset = () => {
    const elem = this.colorInput
    if(elem) {
      const pos = elem.getBoundingClientRect()
@@ -45,7 +42,7 @@ class ColorField extends React.Component {
    }
  }

-  togglePicker() {
+  togglePicker = () => {
    this.setState({ pickerOpened: !this.state.pickerOpened })
  }

@@ -85,7 +82,7 @@ class ColorField extends React.Component {
      />
      <div
        className="maputnik-color-picker-offset"
-        onClick={this.togglePicker.bind(this)}
+        onClick={this.togglePicker}
        style={{
          zIndex: -1,
          position: 'fixed',
@@ -108,7 +105,7 @@ class ColorField extends React.Component {
        spellCheck="false"
        className="maputnik-color"
        ref={(input) => this.colorInput = input}
-        onClick={this.togglePicker.bind(this)}
+        onClick={this.togglePicker}
        style={this.props.style}
        name={this.props.name}
        placeholder={this.props.default}
--- a/src/components/fields/DocLabel.jsx
+++ b/src/components/fields/DocLabel.jsx
@@ -17,7 +17,7 @@ export default class DocLabel extends React.Component {
        <div className="maputnik-doc-popup">
          {this.props.doc}
        </div>
-      </div >
+      </div>
    </label>
  }
 }
--- a/src/components/fields/FunctionSpecField.jsx
+++ b/src/components/fields/FunctionSpecField.jsx
@@ -32,7 +32,7 @@ export default class FunctionSpecProperty  extends React.Component {
    ]),
  }

-  addStop() {
+  addStop = () => {
    const stops = this.props.value.stops.slice(0)
    const lastStop = stops[stops.length - 1]
    if (typeof lastStop[0] === "object") {
@@ -53,7 +53,7 @@ export default class FunctionSpecProperty  extends React.Component {
    this.props.onChange(this.props.fieldName, changedValue)
  }

-  deleteStop(stopIdx) {
+  deleteStop = (stopIdx) => {
    const stops = this.props.value.stops.slice(0)
    stops.splice(stopIdx, 1)

@@ -69,7 +69,7 @@ export default class FunctionSpecProperty  extends React.Component {
    this.props.onChange(this.props.fieldName, changedValue)
  }

-  makeZoomFunction() {
+  makeZoomFunction = () => {
    const zoomFunc = {
      stops: [
        [6, this.props.value],
@@ -79,7 +79,7 @@ export default class FunctionSpecProperty  extends React.Component {
    this.props.onChange(this.props.fieldName, zoomFunc)
  }

-  makeDataFunction() {
+  makeDataFunction = () => {
    const dataFunc = {
      property: "",
      type: "categorical",
@@ -102,8 +102,8 @@ export default class FunctionSpecProperty  extends React.Component {
          fieldName={this.props.fieldName}
          fieldSpec={this.props.fieldSpec}
          value={this.props.value}
-          onDeleteStop={this.deleteStop.bind(this)}
-          onAddStop={this.addStop.bind(this)}
+          onDeleteStop={this.deleteStop}
+          onAddStop={this.addStop}
        />
      )
    }
@@ -114,8 +114,8 @@ export default class FunctionSpecProperty  extends React.Component {
          fieldName={this.props.fieldName}
          fieldSpec={this.props.fieldSpec}
          value={this.props.value}
-          onDeleteStop={this.deleteStop.bind(this)}
-          onAddStop={this.addStop.bind(this)}
+          onDeleteStop={this.deleteStop}
+          onAddStop={this.addStop}
        />
      )
    }
@@ -126,8 +126,8 @@ export default class FunctionSpecProperty  extends React.Component {
          fieldName={this.props.fieldName}
          fieldSpec={this.props.fieldSpec}
          value={this.props.value}
-          onZoomClick={this.makeZoomFunction.bind(this)}
-          onDataClick={this.makeDataFunction.bind(this)} 
+          onZoomClick={this.makeZoomFunction}
+          onDataClick={this.makeDataFunction} 
        />
      )
    }
--- a/src/components/fields/PropertyGroup.jsx
+++ b/src/components/fields/PropertyGroup.jsx
@@ -42,7 +42,7 @@ export default class PropertyGroup extends React.Component {
    spec: PropTypes.object.isRequired,
  }

-  onPropertyChange(property, newValue) {
+  onPropertyChange = (property, newValue) => {
    const group = getGroupName(this.props.spec, this.props.layer.type, property)
    this.props.onChange(group , property, newValue)
  }
@@ -56,7 +56,7 @@ export default class PropertyGroup extends React.Component {
      const fieldValue = fieldName in paint ? paint[fieldName] : layout[fieldName]

      return <FunctionSpecField
-        onChange={this.onPropertyChange.bind(this)}
+        onChange={this.onPropertyChange}
        key={fieldName}
        fieldName={fieldName}
        value={fieldValue === undefined ? fieldSpec.default : fieldValue}
--- a/src/components/fields/SpecField.jsx
+++ b/src/components/fields/SpecField.jsx
@@ -1,6 +1,5 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import color from 'color'

 import ColorField from './ColorField'
 import NumberInput from '../inputs/NumberInput'
--- a/src/components/fields/_FunctionButtons.jsx
+++ b/src/components/fields/_FunctionButtons.jsx
@@ -16,7 +16,7 @@ export default class FunctionButtons extends React.Component {

  render() {
    let makeZoomButton, makeDataButton
-    if (this.props.fieldSpec['zoom-function']) {
+    if (this.props.fieldSpec.expression.parameters.includes('zoom')) {
      makeZoomButton = <Button
        className="maputnik-make-zoom-function"
        onClick={this.props.onZoomClick}
--- a/src/components/fields/_ZoomProperty.jsx
+++ b/src/components/fields/_ZoomProperty.jsx
@@ -13,6 +13,30 @@ import docUid from '../../libs/document-uid'
 import sortNumerically from '../../libs/sort-numerically'


+/**
+ * We cache a reference for each stop by its index.
+ *
+ * When the stops are reordered the references are also updated (see this.orderStops) this allows React to use the same key for the element and keep keyboard focus.
+ */
+function setStopRefs(props, state) {
+  // This is initialsed below only if required to improved performance.
+  let newRefs;
+
+  if(props.value && props.value.stops) {
+    props.value.stops.forEach((val, idx) => {
+      if(!state.refs.hasOwnProperty(idx)) {
+        if(!newRefs) {
+          newRefs = {...state};
+        }
+        newRefs[idx] = docUid("stop-");
+      }
+    })
+  }
+
+  return newRefs;
+}
+
+
 export default class ZoomProperty extends React.Component {
  static propTypes = {
    onChange: PropTypes.func,
@@ -29,45 +53,13 @@ export default class ZoomProperty extends React.Component {
    ]),
  }

-
-  constructor() {
-    super()
-    this.state = {
-      refs: {}
-    }
+  state = {
+    refs: {}
  }

  componentDidMount() {
-    this.setState({
-      refs: this.setStopRefs(this.props)
-    })
-  }
+    const newRefs = setStopRefs(this.props, this.state);

-  /**
-   * We cache a reference for each stop by its index.
-   *
-   * When the stops are reordered the references are also updated (see this.orderStops) this allows React to use the same key for the element and keep keyboard focus.
-   */
-  setStopRefs(props) {
-    // This is initialsed below only if required to improved performance.
-    let newRefs;
-
-    if(props.value && props.value.stops) {
-      props.value.stops.forEach((val, idx) => {
-        if(!this.state.refs.hasOwnProperty(idx)) {
-          if(!newRefs) {
-            newRefs = {...this.state.refs};
-          }
-          newRefs[idx] = docUid("stop-");
-        }
-      })
-    }
-
-    return newRefs;
-  }
-
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    const newRefs = this.setStopRefs(nextProps);
    if(newRefs) {
      this.setState({
        refs: newRefs
@@ -75,6 +67,16 @@ export default class ZoomProperty extends React.Component {
    }
  }

+  static getDerivedStateFromProps(props, state) {
+    const newRefs = setStopRefs(props, state);
+    if(newRefs) {
+      return {
+        refs: newRefs
+      };
+    }
+    return null;
+  }
+
  // Order the stops altering the refs to reflect their new position.
  orderStopsByZoom(stops) {
    const mappedWithRef = stops
--- a/src/components/filter/FilterEditor.jsx
+++ b/src/components/filter/FilterEditor.jsx
@@ -9,9 +9,6 @@ import SingleFilterEditor from './SingleFilterEditor'
 import FilterEditorBlock from './FilterEditorBlock'
 import Button from '../Button'

-import DeleteIcon from 'react-icons/lib/md/delete'
-import AddIcon from 'react-icons/lib/fa/plus'
-
 function hasCombiningFilter(filter) {
  return combiningFilterOps.indexOf(filter[0]) >= 0
 }
@@ -60,7 +57,7 @@ export default class CombiningFilterEditor extends React.Component {
    this.props.onChange(newFilter)
  }

-  addFilterItem() {
+  addFilterItem = () => {
    const newFilterItem = this.combiningFilter().slice(0)
    newFilterItem.push(['==', 'name', ''])
    this.props.onChange(newFilterItem)
@@ -105,7 +102,7 @@ export default class CombiningFilterEditor extends React.Component {
        <Button
          data-wd-key="layer-filter-button"
          className="maputnik-add-filter"
-          onClick={this.addFilterItem.bind(this)}>
+          onClick={this.addFilterItem}>
          Add filter
        </Button>
      </div>
--- a/src/components/inputs/AutocompleteInput.jsx
+++ b/src/components/inputs/AutocompleteInput.jsx
@@ -14,18 +14,15 @@ class AutocompleteInput extends React.Component {
    keepMenuWithinWindowBounds: PropTypes.bool
  }

+  state = {
+    maxHeight: MAX_HEIGHT
+  }
+
  static defaultProps = {
    onChange: () => {},
    options: [],
  }

-  constructor(props) {
-    super(props);
-    this.state = {
-      maxHeight: MAX_HEIGHT
-    };
-  }
-
  calcMaxHeight() {
    if(this.props.keepMenuWithinWindowBounds) {
      const maxHeight = window.innerHeight - this.autocompleteMenuEl.getBoundingClientRect().top;
@@ -38,6 +35,7 @@ class AutocompleteInput extends React.Component {
      }
    }
  }
+
  componentDidMount() {
    this.calcMaxHeight();
  }
--- a/src/components/inputs/DynamicArrayInput.jsx
+++ b/src/components/inputs/DynamicArrayInput.jsx
@@ -27,14 +27,13 @@ class DynamicArrayInput extends React.Component {
    return this.props.value || this.props.default || []
  }

-  addValue() {
+  addValue = () => {
    const values = this.values.slice(0)
    if (this.props.type === 'number') {
      values.push(0)
    } else {
      values.push("")
    }
-    

    this.props.onChange(values)
  }
@@ -77,7 +76,7 @@ class DynamicArrayInput extends React.Component {
      {inputs}
      <Button
        className="maputnik-array-add-value"
-        onClick={this.addValue.bind(this)}
+        onClick={this.addValue}
      >
        Add value
      </Button>
--- a/src/components/inputs/NumberInput.jsx
+++ b/src/components/inputs/NumberInput.jsx
@@ -17,8 +17,10 @@ class NumberInput extends React.Component {
    }
  }

-  UNSAFE_componentWillReceiveProps(nextProps) {
-    this.setState({ value: nextProps.value })
+  static getDerivedStateFromProps(props, state) {
+    return {
+      value: props.value
+    };
  }

  changeValue(newValue) {
@@ -49,7 +51,7 @@ class NumberInput extends React.Component {
    return true
  }

-  resetValue() {
+  resetValue = () => {
    // Reset explicitly to default value if value has been cleared
    if(this.state.value === "") {
      return this.changeValue(this.props.default)
@@ -72,7 +74,7 @@ class NumberInput extends React.Component {
      placeholder={this.props.default}
      value={this.state.value}
      onChange={e => this.changeValue(e.target.value)}
-      onBlur={this.resetValue.bind(this)}
+      onBlur={this.resetValue}
    />
  }
 }
--- a/src/components/inputs/StringInput.jsx
+++ b/src/components/inputs/StringInput.jsx
@@ -18,8 +18,10 @@ class StringInput extends React.Component {
    }
  }

-  UNSAFE_componentWillReceiveProps(nextProps) {
-    this.setState({ value: nextProps.value || '' })
+  static getDerivedStateFromProps(props, state) {
+    return {
+      value: props.value || ''
+    };
  }

  render() {
--- a/src/components/layers/JSONEditor.jsx
+++ b/src/components/layers/JSONEditor.jsx
@@ -29,10 +29,10 @@ class JSONEditor extends React.Component {
    }
  }

-  UNSAFE_componentWillReceiveProps(nextProps) {
-    this.setState({
-      code: JSON.stringify(nextProps.layer, null, 2)
-    })
+  static getDerivedStateFromProps(props, state) {
+    return {
+      code: JSON.stringify(props.layer, null, 2)
+    };
  }

  shouldComponentUpdate(nextProps, nextState) {
--- a/src/components/layers/LayerEditor.jsx
+++ b/src/components/layers/LayerEditor.jsx
@@ -16,9 +16,6 @@ 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'

@@ -36,7 +33,7 @@ function layoutGroups(layerType) {
    title: 'JSON Editor',
    type: 'jsoneditor'
  }
-    return [layerGroup, filterGroup].concat(layout[layerType].groups).concat([editorGroup])
+  return [layerGroup, filterGroup].concat(layout[layerType].groups).concat([editorGroup])
 }

 /** Layer editor supporting multiple types of layers. */
@@ -79,18 +76,18 @@ export default class LayerEditor extends React.Component {
    this.state = { editorGroups }
  }

-  UNSAFE_componentWillReceiveProps(nextProps) {
-    const additionalGroups = { ...this.state.editorGroups }
+  static getDerivedStateFromProps(props, state) {
+    const additionalGroups = { ...state.editorGroups }

-    layout[nextProps.layer.type].groups.forEach(group => {
+    layout[props.layer.type].groups.forEach(group => {
      if(!(group.title in additionalGroups)) {
        additionalGroups[group.title] = true
      }
    })

-    this.setState({
+    return {
      editorGroups: additionalGroups
-    })
+    };
  }

  getChildContext () {
--- a/src/components/layers/LayerList.jsx
+++ b/src/components/layers/LayerList.jsx
@@ -2,13 +2,10 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'

-import Button from '../Button'
 import LayerListGroup from './LayerListGroup'
 import LayerListItem from './LayerListItem'
-import AddIcon from 'react-icons/lib/md/add-circle-outline'
 import AddModal from '../modals/AddModal'

-import style from '../../libs/style.js'
 import {SortableContainer, SortableHandle} from 'react-sortable-hoc';

 const layerListPropTypes = {
@@ -45,15 +42,12 @@ class LayerListContainer extends React.Component {
    onLayerSelect: () => {},
  }

-  constructor(props) {
-    super(props)
-    this.state = {
-      collapsedGroups: {},
-      areAllGroupsExpanded: false,
-      isOpen: {
-        add: false,
-      }
-    }
+  state = {
+    collapsedGroups: {},
+    areAllGroupsExpanded: false,
+    isOpen: {
+      add: false,
+    } 
  }

  toggleModal(modalName) {
@@ -65,7 +59,7 @@ class LayerListContainer extends React.Component {
    })
  }

-  toggleLayers() {
+  toggleLayers = () => {
    let idx=0

    let newGroups=[]
@@ -179,7 +173,7 @@ class LayerListContainer extends React.Component {
          <div className="maputnik-multibutton">
            <button
              id="skip-menu"
-              onClick={this.toggleLayers.bind(this)}
+              onClick={this.toggleLayers}
              className="maputnik-button">
              {this.state.areAllGroupsExpanded === true ? "Collapse" : "Expand"}
            </button>
--- a/src/components/layers/LayerListItem.jsx
+++ b/src/components/layers/LayerListItem.jsx
@@ -1,6 +1,5 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import Color from 'color'
 import classnames from 'classnames'

 import CopyIcon from 'react-icons/lib/md/content-copy'
@@ -9,7 +8,6 @@ import VisibilityOffIcon from 'react-icons/lib/md/visibility-off'
 import DeleteIcon from 'react-icons/lib/md/delete'

 import LayerIcon from '../icons/LayerIcon'
-import LayerEditor from './LayerEditor'
 import {SortableElement, SortableHandle} from 'react-sortable-hoc'

@SortableHandle
@@ -116,7 +114,7 @@ class LayerListItem extends React.Component {
        />
        <IconAction
          wdKey={"layer-list-item:"+this.props.layerId+":toggle-visibility"}
-          action={this.props.visibility === 'visible' ? 'hide' : 'show'}
+          action={this.props.visibility === 'visible' ? 'show' : 'hide'}
          onClick={e => this.props.onLayerVisibilityToggle(this.props.layerId)}
        />
    </li>
--- a/src/components/layers/LayerSourceBlock.jsx
+++ b/src/components/layers/LayerSourceBlock.jsx
@@ -3,7 +3,6 @@ import PropTypes from 'prop-types'

 import * as styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec'
 import InputBlock from '../inputs/InputBlock'
-import StringInput from '../inputs/StringInput'
 import AutocompleteInput from '../inputs/AutocompleteInput'

 class LayerSourceBlock extends React.Component {
--- a/src/components/layers/LayerSourceLayerBlock.jsx
+++ b/src/components/layers/LayerSourceLayerBlock.jsx
@@ -3,7 +3,6 @@ import PropTypes from 'prop-types'

 import * as styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec'
 import InputBlock from '../inputs/InputBlock'
-import StringInput from '../inputs/StringInput'
 import AutocompleteInput from '../inputs/AutocompleteInput'

 class LayerSourceLayer extends React.Component {
--- a/src/components/map/FeatureLayerPopup.jsx
+++ b/src/components/map/FeatureLayerPopup.jsx
@@ -1,7 +1,5 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import InputBlock from '../inputs/InputBlock'
-import StringInput from '../inputs/StringInput'
 import LayerIcon from '../icons/LayerIcon'

 function groupFeaturesBySourceLayer(features) {
--- a/src/components/map/MapboxGlMap.jsx
+++ b/src/components/map/MapboxGlMap.jsx
@@ -5,7 +5,6 @@ import MapboxGl from 'mapbox-gl'
 import MapboxInspect from 'mapbox-gl-inspect'
 import FeatureLayerPopup from './FeatureLayerPopup'
 import FeaturePropertyPopup from './FeaturePropertyPopup'
-import style from '../../libs/style.js'
 import tokens from '../../config/tokens.json'
 import colors from 'mapbox-gl-inspect/lib/colors'
 import Color from 'color'
@@ -15,6 +14,9 @@ import 'mapbox-gl/dist/mapbox-gl.css'
 import '../../mapboxgl.css'
 import '../../libs/mapbox-rtl'

+
+const IS_SUPPORTED = MapboxGl.supported();
+
 function renderPropertyPopup(features) {
  var mountNode = document.createElement('div');
  ReactDOM.render(<FeaturePropertyPopup features={features} />, mountNode)
@@ -66,6 +68,7 @@ export default class MapboxGlMap extends React.Component {
    onDataChange: () => {},
    onLayerSelect: () => {},
    mapboxAccessToken: tokens.mapbox,
+    options: {},
  }

  constructor(props) {
@@ -80,21 +83,27 @@ export default class MapboxGlMap extends React.Component {
    }
  }

-  UNSAFE_componentWillReceiveProps(nextProps) {
+  updateMapFromProps(props) {
+    if(!IS_SUPPORTED) return;
+
    if(!this.state.map) return
-    const metadata = nextProps.mapStyle.metadata || {}
+    const metadata = props.mapStyle.metadata || {}
    MapboxGl.accessToken = metadata['maputnik:mapbox_access_token'] || tokens.mapbox

-    if(!nextProps.inspectModeEnabled) {
+    if(!props.inspectModeEnabled) {
      //Mapbox GL now does diffing natively so we don't need to calculate
      //the necessary operations ourselves!
-      this.state.map.setStyle(nextProps.mapStyle, { diff: true})
+      this.state.map.setStyle(props.mapStyle, { diff: true})
    }
  }

  componentDidUpdate(prevProps) {
+    if(!IS_SUPPORTED) return;
+
    const map = this.state.map;

+    this.updateMapFromProps(this.props);
+
    if(this.props.inspectModeEnabled !== prevProps.inspectModeEnabled) {
      this.state.inspect.toggleInspector()
    }
@@ -102,10 +111,15 @@ export default class MapboxGlMap extends React.Component {
      this.state.inspect.render()
    }

-    map.showTileBoundaries = this.props.options.showTileBoundaries;
+    if (map) {
+      map.showTileBoundaries = this.props.options.showTileBoundaries;
+      map.showCollisionBoxes = this.props.options.showCollisionBoxes;
+    }
  }

  componentDidMount() {
+    if(!IS_SUPPORTED) return;
+
    const mapOpts = {
      ...this.props.options,
      container: this.container,
@@ -116,6 +130,7 @@ export default class MapboxGlMap extends React.Component {
    const map = new MapboxGl.Map(mapOpts);

    map.showTileBoundaries = mapOpts.showTileBoundaries;
+    map.showCollisionBoxes = mapOpts.showCollisionBoxes;

    const zoom = new ZoomControl;
    map.addControl(zoom, 'top-right');
@@ -161,9 +176,20 @@ export default class MapboxGlMap extends React.Component {
  }

  render() {
-    return <div
-      className="maputnik-map"
-      ref={x => this.container = x}
-    ></div>
+    if(IS_SUPPORTED) {
+      return <div
+        className="maputnik-map__map"
+        ref={x => this.container = x}
+      ></div>
+    }
+    else {
+      return <div
+        className="maputnik-map maputnik-map--error"
+      >
+        <div className="maputnik-map__error-message">
+          Error: Cannot load MapboxGL, WebGL is either unsupported or disabled
+        </div>
+      </div>
+    }
  }
 }
--- a/src/components/map/OpenLayers3Map.jsx
+++ b/src/components/map/OpenLayers3Map.jsx
@@ -1,7 +1,5 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import style from '../../libs/style.js'
-import isEqual from 'lodash.isequal'
 import { loadJSON } from '../../libs/urlopen'
 import 'ol/ol.css'

@@ -29,10 +27,10 @@ class OpenLayers3Map extends React.Component {
    const styleFunc = olms.apply(this.map, newMapStyle)
  }

-  UNSAFE_componentWillReceiveProps(nextProps) {
+  componentDidUpdate() {
    require.ensure(["ol", "ol-mapbox-style"], () => {
      if(!this.map) return
-      this.updateStyle(nextProps.mapStyle)
+      this.updateStyle(this.props.mapStyle)
    })
  }

--- a/src/components/modals/AddModal.jsx
+++ b/src/components/modals/AddModal.jsx
@@ -2,8 +2,6 @@ import React from 'react'
 import PropTypes from 'prop-types'

 import Button from '../Button'
-import InputBlock from '../inputs/InputBlock'
-import StringInput from '../inputs/StringInput'
 import Modal from './Modal'

 import LayerTypeBlock from '../layers/LayerTypeBlock'
@@ -22,7 +20,7 @@ class AddModal extends React.Component {
    sources: PropTypes.object.isRequired,
  }

-  addLayer() {
+  addLayer = () => {
    const changedLayers = this.props.layers.slice(0)
    const layer = {
      id: this.state.id,
@@ -151,7 +149,7 @@ class AddModal extends React.Component {
      }
      <Button
        className="maputnik-add-layer-button"
-        onClick={this.addLayer.bind(this)}
+        onClick={this.addLayer}
        data-wd-key="add-layer"
      >
        Add Layer
--- a/src/components/modals/ExportModal.jsx
+++ b/src/components/modals/ExportModal.jsx
@@ -10,207 +10,9 @@ import Button from '../Button'
 import Modal from './Modal'
 import MdFileDownload from 'react-icons/lib/md/file-download'
 import TiClipboard from 'react-icons/lib/ti/clipboard'
-import style from '../../libs/style.js'
-import GitHub from 'github-api'
-import { CopyToClipboard } from 'react-copy-to-clipboard'
+import style from '../../libs/style'


-class Gist extends React.Component {
-  static propTypes = {
-    mapStyle: PropTypes.object.isRequired,
-    onStyleChanged: PropTypes.func.isRequired,
-  }
-
-  constructor(props) {
-    super(props);
-    this.state = {
-      preview: false,
-      public: false,
-      saving: false,
-      latestGist: null,
-    }
-  }
-
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    this.setState({
-      ...this.state,
-      preview: !!(nextProps.mapStyle.metadata || {})['maputnik:openmaptiles_access_token']
-    })
-  }
-
-  onSave() {
-    this.setState({
-      ...this.state,
-      saving: true
-    });
-
-    const preview = this.state.preview;
-    
-    const mapboxToken = (this.props.mapStyle.metadata || {})['maputnik:mapbox_access_token'];
-
-    const mapStyleStr = preview ?
-        styleSpec.format(stripAccessTokens(style.replaceAccessToken(this.props.mapStyle))) :
-        styleSpec.format(stripAccessTokens(this.props.mapStyle));
-    const styleTitle = this.props.mapStyle.name || 'Style';
-    const htmlStr = `
-  <!DOCTYPE html>
-  <html>
-  <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>`+styleTitle+` Preview</title>
-    <link rel="stylesheet" type="text/css" href="https://api.mapbox.com/mapbox-gl-js/v0.44.0/mapbox-gl.css" />
-    <script src="https://api.mapbox.com/mapbox-gl-js/v0.44.0/mapbox-gl.js"></script>
-    <style>
-      body { margin:0; padding:0; }
-      #map { position:absolute; top:0; bottom:0; width:100%; }
-    </style>
-  </head>
-  <body>
-    <div id='map'></div>
-    <script>
-        mapboxgl.accessToken = '${mapboxToken}';
-        var map = new mapboxgl.Map({
-          container: 'map',
-          style: 'style.json',
-          attributionControl: true,
-          hash: true
-        });
-        map.addControl(new mapboxgl.NavigationControl());
-    </script>
-  </body>
-  </html>
-`
-    const files = {
-      "style.json": {
-        content: mapStyleStr
-      }
-    }
-    if(preview) {
-      files["index.html"] = {
-        content: htmlStr
-      }
-    }
-    const gh = new GitHub();
-    let gist = gh.getGist(); // not a gist yet
-    gist.create({
-      public: this.state.public,
-      description: styleTitle,
-      files: files
-    }).then(function({data}) {
-      return gist.read();
-    }).then(function({data}) {
-      this.setState({
-        ...this.state,
-        latestGist: data,
-        saving: false,
-      });
-    }.bind(this));
-  }
-
-  onPreviewChange(value) {
-    this.setState({
-      ...this.state,
-      preview: value
-    })
-  }
-
-  onPublicChange(value) {
-    this.setState({
-      ...this.state,
-      public: value
-    })
-  }
-
-  changeMetadataProperty(property, value) {
-    const changedStyle = {
-      ...this.props.mapStyle,
-      metadata: {
-        ...this.props.mapStyle.metadata,
-        [property]: value
-      }
-    }
-    this.props.onStyleChanged(changedStyle)
-  }
-
-  renderPreviewLink() {
-    const gist = this.state.latestGist;
-    const user = gist.user || 'anonymous';
-    const preview = !!gist.files['index.html'];
-    if(preview) {
-      return <span><a target="_blank" rel="noopener noreferrer" href={"https://bl.ocks.org/"+user+"/"+gist.id}>Preview</a>,{' '}</span>
-    }
-    return null;
-  }
-
-  renderLatestGist() {
-    const gist = this.state.latestGist;
-    const saving = this.state.saving;
-    if(saving) {
-      return <p>Saving...</p>
-    } else if(gist) {
-      const user = gist.user || 'anonymous';
-      const rawGistLink = "https://gist.githubusercontent.com/" + user + "/" + gist.id + "/raw/" + gist.history[0].version + "/style.json"
-      const maputnikStyleLink = "https://maputnik.github.io/editor/?style=" + rawGistLink
-      return <div className="maputnik-render-gist">
-        <p>
-          Latest saved gist:{' '}
-          {this.renderPreviewLink(this)}
-          <a target="_blank" rel="noopener noreferrer" href={"https://gist.github.com/" + user + "/" + gist.id}>Source</a>
-        </p>
-        <p>
-          <CopyToClipboard text={maputnikStyleLink}>
-            <span>Share this style: <Button><TiClipboard size={18} /></Button></span>
-          </CopyToClipboard>
-          <StringInput value={maputnikStyleLink} />
-        </p>
-      </div>
-    }
-  }
-
-  render() {
-    return <div className="maputnik-export-gist">
-      <Button onClick={this.onSave.bind(this)}>
-        <MdFileDownload />
-        Save to Gist (anonymous)
-      </Button>
-      <div className="maputnik-modal-sub-section">
-        <CheckboxInput
-          value={this.state.public}
-          name='gist-style-public'
-          onChange={this.onPublicChange.bind(this)}
-        />
-        <span> Public gist</span>
-      </div>
-      <div className="maputnik-modal-sub-section">
-        <CheckboxInput
-          value={this.state.preview}
-          name='gist-style-preview'
-          onChange={this.onPreviewChange.bind(this)}
-        />
-        <span> Include preview</span>
-      </div>
-      {this.state.preview ?
-          <div>
-            <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>
-            <a target="_blank" rel="noopener noreferrer" href="https://openmaptiles.com/hosting/">Get your free access token</a>
-          </div>
-      : null}
-      {this.renderLatestGist()}
-    </div>
-  }
-}

 function stripAccessTokens(mapStyle) {
  const changedMetadata = { ...mapStyle.metadata }
@@ -235,10 +37,24 @@ 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.replaceAccessTokens(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"
@@ -252,16 +68,34 @@ class ExportModal extends React.Component {
        <p>
          Download a JSON style to your computer.
        </p>
+
+        <p>
+          <InputBlock label={"MapTiler 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>
+          <InputBlock label={"Thunderforest Access Token: "}>
+            <StringInput
+              value={(this.props.mapStyle.metadata || {})['maputnik:thunderforest_access_token']}
+              onChange={this.changeMetadataProperty.bind(this, "maputnik:thunderforest_access_token")}
+            />
+          </InputBlock>
+        </p>
+
        <Button onClick={this.downloadStyle.bind(this)}>
          <MdFileDownload />
          Download
        </Button>
      </div>

-      <div className="maputnik-modal-section hide">
-        <h4>Save style</h4>
-        <Gist mapStyle={this.props.mapStyle} onStyleChanged={this.props.onStyleChanged}/>
-      </div>
    </Modal>
  }
 }
--- a/src/components/modals/LoadingModal.jsx
+++ b/src/components/modals/LoadingModal.jsx
@@ -13,10 +13,6 @@ class LoadingModal extends React.Component {
    message: PropTypes.node.isRequired,
  }

-  constructor(props) {
-    super(props);
-  }
-
  underlayOnClick(e) {
    // This stops click events falling through to underlying modals.
    e.stopPropagation();
--- a/src/components/modals/OpenModal.jsx
+++ b/src/components/modals/OpenModal.jsx
@@ -4,7 +4,6 @@ import LoadingModal from './LoadingModal'
 import Modal from './Modal'
 import Button from '../Button'
 import FileReaderInput from 'react-file-reader-input'
-import request from 'request'

 import FileUploadIcon from 'react-icons/lib/md/file-upload'
 import AddIcon from 'react-icons/lib/md/add-circle-outline'
@@ -74,42 +73,48 @@ class OpenModal extends React.Component {
    }
  }

-  onStyleSelect(styleUrl) {
+  onStyleSelect = (styleUrl) => {
    this.clearError();

-    const reqOpts = {
-      url: styleUrl,
-      withCredentials: false,
-    }
-
-    const activeRequest = request(reqOpts, (error, response, body) => {
+    const activeRequest = fetch(styleUrl, {
+      mode: 'cors',
+      credentials: "same-origin"
+    })
+    .then(function(response) {
+      return response.json();
+    })
+    .then((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)
-          this.props.onStyleOpen(mapStyle)
-          this.onOpenToggle()
-        } else {
-          console.warn('Could not open the style URL', styleUrl)
-        }
+      const mapStyle = style.ensureStyleValidity(body)
+      console.log('Loaded style ', mapStyle.id)
+      this.props.onStyleOpen(mapStyle)
+      this.onOpenToggle()
+    })
+    .catch((err) => {
+      this.setState({
+        activeRequest: null,
+        activeRequestUrl: null
+      });
+      console.error(err);
+      console.warn('Could not open the style URL', styleUrl)
    })

    this.setState({
      activeRequest: activeRequest,
-      activeRequestUrl: reqOpts.url
+      activeRequestUrl: styleUrl
    })
  }

-  onOpenUrl() {
+  onOpenUrl = () => {
    const url = this.styleUrlElement.value;
    this.onStyleSelect(url);
  }

-  onUpload(_, files) {
+  onUpload = (_, files) => {
    const [e, file] = files[0];
    const reader = new FileReader();

@@ -146,7 +151,7 @@ class OpenModal extends React.Component {
        url={style.url}
        title={style.title}
        thumbnailUrl={style.thumbnail}
-        onSelect={this.onStyleSelect.bind(this)}
+        onSelect={this.onStyleSelect}
      />
    })

@@ -170,7 +175,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)} tabIndex="-1">
+        <FileReaderInput onChange={this.onUpload} tabIndex="-1">
          <Button className="maputnik-upload-button"><FileUploadIcon /> Upload</Button>
        </FileReaderInput>
      </section>
@@ -182,7 +187,7 @@ class OpenModal extends React.Component {
        </p>
        <input data-wd-key="open-modal.url.input" type="text" ref={(input) => this.styleUrlElement = input} className="maputnik-input" placeholder="Enter URL..."/>
        <div>
-          <Button data-wd-key="open-modal.url.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}>Open URL</Button>
        </div>
      </section>

--- a/src/components/modals/SettingsModal.jsx
+++ b/src/components/modals/SettingsModal.jsx
@@ -15,10 +15,6 @@ class SettingsModal extends React.Component {
    onOpenToggle: PropTypes.func.isRequired,
  }

-  constructor(props) {
-    super(props);
-  }
-
  changeStyleProperty(property, value) {
    const changedStyle = {
      ...this.props.mapStyle,
@@ -86,7 +82,7 @@ class SettingsModal extends React.Component {
        />
      </InputBlock>

-      <InputBlock label={"OpenMapTiles Access Token"} doc={"Public access token for the OpenMapTiles CDN."}>
+      <InputBlock label={"MapTiler Access Token"} doc={"Public access token for MapTiler Cloud."}>
        <StringInput {...inputProps}
          data-wd-key="modal-settings.maputnik:openmaptiles_access_token" 
          value={metadata['maputnik:openmaptiles_access_token']}
@@ -94,12 +90,20 @@ class SettingsModal extends React.Component {
        />
      </InputBlock>

+      <InputBlock label={"Thunderforest Access Token"} doc={"Public access token for Thunderforest services."}>
+        <StringInput {...inputProps}
+          data-wd-key="modal-settings.maputnik:thunderforest_access_token" 
+          value={metadata['maputnik:thunderforest_access_token']}
+          onChange={this.changeMetadataProperty.bind(this, "maputnik:thunderforest_access_token")}
+        />
+      </InputBlock>
+
      <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'],
+            // ['ol3', 'Open Layers 3'],
          ]}
          value={metadata['maputnik:renderer'] || 'mbgljs'}
          onChange={this.changeMetadataProperty.bind(this, 'maputnik:renderer')}
--- a/src/components/modals/ShortcutsModal.jsx
+++ b/src/components/modals/ShortcutsModal.jsx
@@ -1,7 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'

-import Button from '../Button'
 import Modal from './Modal'


@@ -11,10 +10,6 @@ class ShortcutsModal extends React.Component {
    onOpenToggle: PropTypes.func.isRequired,
  }

-  constructor(props) {
-    super(props);
-  }
-
  render() {
    const help = [
      {
--- a/src/components/modals/SourcesModal.jsx
+++ b/src/components/modals/SourcesModal.jsx
@@ -236,9 +236,12 @@ class SourcesModal extends React.Component {
        <p>
          Add one of the publicly available sources to your style.
        </p>
-        <div style={{maxwidth: 500}}>
+        <div className="maputnik-public-sources" style={{maxwidth: 500}}>
        {tilesetOptions}
        </div>
+        <p>
+          <strong>Note:</strong> Some of the tilesets are not optimised for online use, and as a result the file sizes of the tiles can be quite large (heavy) for online vector rendering. Please review any tilesets before use.
+        </p>
      </div>

      <div className="maputnik-modal-section">
--- a/src/components/modals/SurveyModal.jsx
+++ b/src/components/modals/SurveyModal.jsx
@@ -0,0 +1,39 @@
+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,
+  }
+
+  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
--- a/src/config/layout.json
+++ b/src/config/layout.json
@@ -193,7 +193,8 @@
            "raster-brightness-max",
            "raster-saturation",
            "raster-contrast",
-            "raster-fade-duration"
+            "raster-fade-duration",
+            "raster-resampling"
          ]
        }
      ]
--- a/src/config/styles.json
+++ b/src/config/styles.json
@@ -26,31 +26,13 @@
  {
    "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",
    "title": "Empty Style",
    "url": "https://rawgit.com/maputnik/editor/master/src/config/empty-style.json",
    "thumbnail": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAECAQAAAAHDYbIAAAAEUlEQVR42mP8/58BDhiJ4wAA974H/U5Xe1oAAAAASUVORK5CYII="
-  },
-  {
-    "id": "mapbox-satellite",
-    "title": "Mapbox Satellite",
-    "url": "https://rawgit.com/mapbox/mapbox-gl-styles/master/styles/satellite-v9.json",
-    "thumbnail": "https://maputnik.github.io/thumbnails/mapbox-satellite.png"
-  },
-  {
-    "id": "mapbox-bright",
-    "title": "Mapbox Bright",
-    "url": "https://rawgit.com/mapbox/mapbox-gl-styles/master/styles/bright-v9.json",
-    "thumbnail": "https://maputnik.github.io/thumbnails/mapbox-bright.png"
-  },
-  {
-    "id": "mapbox-basic",
-    "title": "Mapbox Basic",
-    "url": "https://rawgit.com/mapbox/mapbox-gl-styles/master/styles/basic-v9.json",
-    "thumbnail": "https://maputnik.github.io/thumbnails/mapbox-basic.png"
  }
 ]
--- a/src/config/tilesets.json
+++ b/src/config/tilesets.json
@@ -1,12 +1,17 @@
 {
-  "mapbox-streets": {
-    "type": "vector",
-    "url": "mapbox://mapbox.mapbox-streets-v7",
-    "title": "Mapbox Streets"
-  },
  "openmaptiles": {
    "type": "vector",
    "url": "https://free.tilehosting.com/data/v3.json?key={key}",
    "title": "OpenMapTiles"
+  },
+  "thunderforest_transport": {
+    "type": "vector",
+    "url": "https://tile.thunderforest.com/thunderforest.transport-v1.json?apikey={key}",
+    "title": "Thunderforest Transport (heavy)"
+  },
+  "thunderforest_outdoors": {
+    "type": "vector",
+    "url": "https://tile.thunderforest.com/thunderforest.outdoors-v1.json?apikey={key}",
+    "title": "Thunderforest Outdoors (heavy)"
  }
 }
--- a/src/config/tokens.json
+++ b/src/config/tokens.json
@@ -1,4 +1,5 @@
 {
  "mapbox": "pk.eyJ1IjoibW9yZ2Vua2FmZmVlIiwiYSI6ImNpeHJmNXNmZTAwNHIycXBid2NqdTJibjMifQ.Dv1-GDpTWi0NP6xW9Fct1w",
-  "openmaptiles": "Og58UhhtiiTaLVlPtPgs"
+  "openmaptiles": "Og58UhhtiiTaLVlPtPgs",
+  "thunderforest": "b71f7f0ba4064f5eb9e903859a9cf5c6"
 }
--- a/src/libs/accessibility.js
+++ b/src/libs/accessibility.js
@@ -1,8 +1,8 @@
-import lodash from 'lodash'
+import throttle from 'lodash.throttle'


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

--- a/src/libs/apistore.js
+++ b/src/libs/apistore.js
@@ -1,4 +1,3 @@
-import request from 'request'
 import style from './style.js'
 import ReconnectingWebSocket from 'reconnecting-websocket'

@@ -14,15 +13,20 @@ export class ApiStyleStore {
  }

  init(cb) {
-    request(localUrl + '/styles', (error, response, body) => {
-      if (!error && body && response.statusCode == 200) {
-        const styleIds = JSON.parse(body)
-        this.latestStyleId = styleIds[0]
-        this.notifyLocalChanges()
-        cb(null)
-      } else {
-        cb(new Error('Can not connect to style API'))
-      }
+    fetch(localUrl + '/styles', {
+      mode: 'cors',
+    })
+    .then(function(response) {
+      return response.json();
+    })
+    .then(function(body) {
+      const styleIds = body;
+      this.latestStyleId = styleIds[0]
+      this.notifyLocalChanges()
+      cb(null)
+    })
+    .catch(function() {
+      cb(new Error('Can not connect to style API'))
    })
  }

@@ -44,8 +48,14 @@ export class ApiStyleStore {

  latestStyle(cb) {
    if(this.latestStyleId) {
-      request(localUrl + '/styles/' + this.latestStyleId, (error, response, body) => {
-        cb(style.ensureStyleValidity(JSON.parse(body)))
+      fetch(localUrl + '/styles/' + this.latestStyleId, {
+        mode: 'cors',
+      })
+      .then(function(response) {
+        return response.json();
+      })
+      .then(function(body) {
+        cb(style.ensureStyleValidity(body))
      })
    } else {
      throw new Error('No latest style available. You need to init the api backend first.')
@@ -55,11 +65,15 @@ export class ApiStyleStore {
  // Save current style replacing previous version
  save(mapStyle) {
    const id = mapStyle.id
-    request.put({
-      url: localUrl + '/styles/' + id,
-      json: true,
-      body: mapStyle
-    }, (error, response, body) => {
+    fetch(localUrl + '/styles/' + id, {
+      method: "PUT",
+      mode: 'cors',
+      headers: {
+        "Content-Type": "application/json; charset=utf-8",
+      },
+      body: JSON.stringify(mapStyle)
+    })
+    .catch(function(error) {
      if(error) console.error(error)
    })
    return mapStyle
--- a/src/libs/mapbox-rtl.js
+++ b/src/libs/mapbox-rtl.js
@@ -1,9 +1,9 @@
-import MapboxGl from 'mapbox-gl/dist/mapbox-gl.js'
+import MapboxGl from 'mapbox-gl'

 // Load mapbox-gl-rtl-text using object urls without needing http://localhost for AJAX.
-const data = require("base64-loader?mimetype=text/javascript!@mapbox/mapbox-gl-rtl-text/mapbox-gl-rtl-text.js");
+const data = require("raw-loader?mimetype=text/javascript!@mapbox/mapbox-gl-rtl-text/mapbox-gl-rtl-text.js");

-const blob = new window.Blob([window.atob(data)]);
+const blob = new window.Blob([data]);
 const objectUrl = window.URL.createObjectURL(blob, {
  type: "text/javascript"
 });
--- a/src/libs/metadata.js
+++ b/src/libs/metadata.js
@@ -1,22 +1,19 @@
-import request from 'request'
 import npmurl from 'url'

 function loadJSON(url, defaultValue, cb) {
-  request({
-    url: url,
-    withCredentials: false,
-  }, (error, response, body) => {
-    if (!error && body && response.statusCode == 200) {
-      try {
-        cb(JSON.parse(body))
-      } catch(err) {
-        console.error(err)
-        cb(defaultValue)
-      }
-    } else {
-      console.warn('Can not metadata for ' + url)
-      cb(defaultValue)
-    }
+  fetch(url, {
+    mode: 'cors',
+    credentials: "same-origin"
+  })
+  .then(function(response) {
+    return response.json();
+  })
+  .then(function(body) {
+    cb(body)
+  })
+  .catch(function() {
+    console.warn('Can not metadata for ' + url)
+    cb(defaultValue)
  })
 }

--- a/src/libs/style.js
+++ b/src/libs/style.js
@@ -1,4 +1,3 @@
-import React from 'react';
 import deref from '@mapbox/mapbox-gl-style-spec/deref'
 import tokens from '../config/tokens.json'

@@ -54,18 +53,28 @@ function indexOfLayer(layers, layerId) {
  return null
 }

-function replaceAccessToken(mapStyle, opts={}) {
-  const omtSource = mapStyle.sources.openmaptiles
-  if(!omtSource) return mapStyle
-  if(!omtSource.hasOwnProperty("url")) return mapStyle
+function getAccessToken(sourceName, mapStyle, opts) {
+  if(sourceName === "thunderforest_transport" || sourceName === "thunderforest_outdoors") {
+    sourceName = "thunderforest"
+  }

  const metadata = mapStyle.metadata || {}
-  let accessToken = metadata['maputnik:openmaptiles_access_token'];
+  let accessToken = metadata[`maputnik:${sourceName}_access_token`]

  if(opts.allowFallback && !accessToken) {
-    accessToken = tokens.openmaptiles;
+    accessToken = tokens[sourceName]
  }

+  return accessToken;
+}
+
+function replaceSourceAccessToken(mapStyle, sourceName, opts={}) {
+  const source = mapStyle.sources[sourceName]
+  if(!source) return mapStyle
+  if(!source.hasOwnProperty("url")) return mapStyle
+
+  const accessToken = getAccessToken(sourceName, mapStyle, opts)
+
  if(!accessToken) {
    // Early exit.
    return mapStyle;
@@ -73,16 +82,34 @@ function replaceAccessToken(mapStyle, opts={}) {

  const changedSources = {
    ...mapStyle.sources,
-    openmaptiles: {
-      ...omtSource,
-      url: omtSource.url.replace('{key}', accessToken)
+    [sourceName]: {
+      ...source,
+      url: source.url.replace('{key}', accessToken)
    }
  }
  const changedStyle = {
    ...mapStyle,
-    glyphs: mapStyle.glyphs ? mapStyle.glyphs.replace('{key}', accessToken) : mapStyle.glyphs,
    sources: changedSources
  }
+  return changedStyle
+}
+
+function replaceAccessTokens(mapStyle, opts={}) {
+  let changedStyle = mapStyle
+
+  Object.keys(mapStyle.sources).forEach((sourceName) => {
+    changedStyle = replaceSourceAccessToken(changedStyle, sourceName, opts);
+  })
+
+  if (mapStyle.glyphs && mapStyle.glyphs.match(/\.tilehosting\.com/)) {
+    const newAccessToken = getAccessToken("openmaptiles", mapStyle, opts);
+    if (newAccessToken) {
+      changedStyle = {
+        ...changedStyle,
+        glyphs: mapStyle.glyphs.replace('{key}', newAccessToken)
+      }
+    }
+  }

  return changedStyle
 }
@@ -92,5 +119,5 @@ export default {
  emptyStyle,
  indexOfLayer,
  generateId,
-  replaceAccessToken,
+  replaceAccessTokens,
 }
--- a/src/libs/stylestore.js
+++ b/src/libs/stylestore.js
@@ -1,8 +1,6 @@
-import { colorizeLayers } from './style.js'
 import style from './style.js'
 import { loadStyleUrl } from './urlopen'
 import publicSources from '../config/styles.json'
-import request from 'request'

 const storagePrefix = "maputnik"
 const stylePrefix = 'style'
--- a/src/libs/urlopen.js
+++ b/src/libs/urlopen.js
@@ -1,4 +1,3 @@
-import request from 'request'
 import url from 'url'
 import style from './style.js'

@@ -9,34 +8,40 @@ export function initialStyleUrl() {

 export function loadStyleUrl(styleUrl, cb) {
  console.log('Loading style', styleUrl)
-  request({
-    url: styleUrl,
-    withCredentials: false,
-  }, (error, response, body) => {
-      if (!error && response.statusCode == 200) {
-        cb(style.ensureStyleValidity(JSON.parse(body)))
-      } else {
-        console.warn('Could not fetch default style', styleUrl)
-        cb(style.emptyStyle)
-      }
+  fetch(styleUrl, {
+    mode: 'cors',
+    credentials: "same-origin"
+  })
+  .then(function(response) {
+    return response.json();
+  })
+  .then(function(body) {
+    cb(style.ensureStyleValidity(body))
+  })
+  .catch(function() {
+    console.warn('Could not fetch default style', styleUrl)
+    cb(style.emptyStyle)
  })
 }

 export function loadJSON(url, defaultValue, cb) {
-  request({
-    url: url,
-    withCredentials: false,
-  }, (error, response, body) => {
-    if (!error && body && response.statusCode == 200) {
-      try {
-        cb(JSON.parse(body))
-      } catch(err) {
-        console.error(err)
-        cb(defaultValue)
-      }
-    } else {
-      console.error('Can not load JSON from ' + url)
+  fetch(url, {
+    mode: 'cors',
+    credentials: "same-origin"
+  })
+  .then(function(response) {
+    return response.json();
+  })
+  .then(function(body) {
+    try {
+      cb(body)
+    } catch(err) {
+      console.error(err)
      cb(defaultValue)
    }
  })
+  .catch(function() {
+    console.error('Can not load JSON from ' + url)
+    cb(defaultValue)
+  })
 }
--- a/src/styles/_base.scss
+++ b/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 {
--- a/src/styles/_components.scss
+++ b/src/styles/_components.scss
@@ -1,11 +1,31 @@
 // MAP
-.maputnik-map {
+.maputnik-map__container {
+  display: flex;
  position: fixed !important;
  top: $toolbar-height + $toolbar-offset;
  right: 0;
  bottom: 0;
  height: calc(100% - #{$toolbar-height + $toolbar-offset});
-  width: 75%;
+  width: calc(
+    100%
+    - 200px /* layer list */
+    - 350px /* layer editor */
+  );
+
+  &--error {
+    align-items: center;
+    justify-content: center;
+  }
+
+  &__error-message {
+    margin: 16px;
+    text-align: center;
+  }
+}
+
+.maputnik-map__map {
+  width: 100%;
+  height: 100%;
 }

 // DOC LABEL
@@ -56,6 +76,7 @@
  border-width: 0;
  border-radius: 2px;
  box-sizing: border-box;
+  text-decoration: none;

  &:hover {
    background-color: lighten($color-midgray, 12);
@@ -70,6 +91,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;

--- a/src/styles/_layout.scss
+++ b/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;
--- a/src/styles/_modal.scss
+++ b/src/styles/_modal.scss
@@ -125,6 +125,10 @@
 }

 //SOURCE MODAL
+.maputnik-public-sources {
+  margin-bottom: 1.5%;
+}
+
 .maputnik-public-source {
  vertical-align: top;
  margin-top: 1.5%;
@@ -150,6 +154,7 @@

 .maputnik-public-source-id {
  font-weight: 400;
+  text-align: left;
 }

 .maputnik-active-source-type-editor {
@@ -240,3 +245,21 @@
    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;
+}
--- a/src/styles/_react-codemirror.scss
+++ b/src/styles/_react-codemirror.scss
@@ -0,0 +1,3 @@
+.react-codemirror2 {
+  max-width: 100%;
+}
--- a/src/styles/_react-collapse.scss
+++ b/src/styles/_react-collapse.scss
@@ -1,6 +1,7 @@
 // See <https://github.com/nkbt/react-collapse/commit/4f4fbce7c6c07b082dc62062338c9294c656f9df>
 .react-collapse-container {
  display: flex;
+  max-width: 100%;

  > * {
    flex: 1;
--- a/src/styles/_toolbar.scss
+++ b/src/styles/_toolbar.scss
@@ -57,6 +57,29 @@
  }
 }

+.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 {
  font-size: 10px;
  margin-left: 4px;
--- a/src/styles/index.scss
+++ b/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;
@@ -37,6 +38,7 @@ $toolbar-offset: 0;
@import 'popup';
@import 'map';
@import 'react-collapse';
+@import 'react-codemirror';

 /**
 * Hacks for webdriverio isVisibleWithinViewport