1.6.0

Make popups scrollable

.babelrc

@@ -1,4 +1,19 @@
 {
-  "presets": ["env", "react"],
+  "presets": [
-  "plugins": ["transform-object-rest-spread", "transform-class-properties"]
+    "@babel/preset-env",
+    "@babel/preset-react"
+  ],
+  "plugins": [
+    "react-hot-loader/babel",
+    "@babel/plugin-proposal-class-properties"
+  ],
+  "env": {
+    "test": {
+      "plugins": [
+        ["istanbul", {
+          "exclude": ["node_modules/**", "test/**"]
+        }]
+      ]
+    }
+  }
 }

.circleci/config.yml

@@ -0,0 +1,102 @@
+version: 2
+templates:
+  # Test the build **only** no webdriver
+  build-steps: &build-steps
+    - checkout
+    - run:
+        name: "Create artifacts directory"
+        command: mkdir /tmp/artifacts
+    - restore_cache:
+        key: v1-dependencies-{{ arch }}-{{ checksum "package.json" }}
+
+    - run: npm install
+
+    - save_cache:
+        paths:
+          - node_modules
+        key: v1-dependencies-{{ arch }}-{{ checksum "package.json" }}
+
+    - run: mkdir -p /tmp/artifacts/logs
+    - run: npm run build
+    - run: npm run lint
+    - run: npm run lint-styles
+    - store_artifacts:
+        path: /tmp/artifacts
+        destination: /artifacts
+  # Test in webdriver
+  wdio-steps: &wdio-steps
+    - checkout
+    - run:
+        name: "Create artifacts directory"
+        command: mkdir /tmp/artifacts
+    - restore_cache:
+        key: v1-dependencies-{{ arch }}-{{ checksum "package.json" }}
+
+    - run: npm install
+
+    - save_cache:
+        paths:
+          - node_modules
+        key: v1-dependencies-{{ arch }}-{{ checksum "package.json" }}
+
+    - run: mkdir -p /tmp/artifacts/logs
+    - run: npm run build
+    - run: npm run lint
+    - run: npm run lint-styles
+    - run: DOCKER_HOST=localhost npm test
+    - run: ./node_modules/.bin/istanbul report --include /tmp/artifacts/coverage/coverage.json --dir /tmp/artifacts/coverage html lcov
+    - store_artifacts:
+        path: /tmp/artifacts
+        destination: /artifacts
+jobs:
+  build-linux-node-v8:
+    docker:
+      - image: node:8
+    working_directory: ~/repo-linux-node-v8
+    steps: *build-steps
+  build-linux-node-v10:
+    docker:
+      - image: node:10
+      - image: selenium/standalone-chrome:3.141.59
+    working_directory: ~/repo-linux-node-v10
+    steps: *wdio-steps
+  build-linux-node-v12:
+    docker:
+      - image: node:12
+    working_directory: ~/repo-linux-node-v12
+    steps: *build-steps
+  build-osx-node-v8:
+    macos:
+      xcode: "9.0"
+    dependencies:
+      override:
+        - brew install node@8
+    working_directory: ~/repo-osx-node-v8
+    steps: *build-steps
+  build-osx-node-v10:
+    macos:
+      xcode: "9.0"
+    dependencies:
+      override:
+        - brew install node@10
+    working_directory: ~/repo-osx-node-v10
+    steps: *build-steps
+  build-osx-node-v12:
+    macos:
+      xcode: "9.0"
+    dependencies:
+      override:
+        - brew install node@12
+    working_directory: ~/repo-osx-node-v12
+    steps: *build-steps
+
+workflows:
+  version: 2
+  build:
+    jobs:
+      - build-linux-node-v8
+      - build-linux-node-v10
+      - build-linux-node-v12
+      - build-osx-node-v8
+      - build-osx-node-v10
+      - build-osx-node-v12

.gitignore

@@ -30,3 +30,6 @@ node_modules
 
 # Ignore build files
 public
+/errorShots
+/old
+/build

.topissuesrc

@@ -0,0 +1,15 @@
+{
+    "labels": {
+        "bug": 5,
+        "maintenance": 3,
+        "mentioned in the 1st survey": 2
+    },
+    "reactions": {
+        "+1": 2,
+        "-1": -1,
+        "laugh": 1,
+        "hooray": 2,
+        "confused": 1,
+        "heart": 2
+    }
+}

.travis.yml

@@ -1,41 +0,0 @@
-language: node_js
-addons:
-  firefox: latest
-matrix:
-  include:
-    - os: linux
-      node_js: "6"
-    - os: linux
-      env: CXX=g++-4.8
-      node_js: "7"
-    - os: linux
-      node_js: "8"
-    - os: linux
-      env: CXX=g++-4.8
-      node_js: "9"
-    - os: osx
-      node_js: "6"
-    - os: osx
-      node_js: "7"
-    - os: osx
-      node_js: "8"
-    - os: osx
-      node_js: "9"
-before_install:
-  - export CHROME_BIN=chromium-browser
-  - export DISPLAY=:99.0
-  - if [[ "$TRAVIS_OS_NAME" == "linux" ]]; then sh -e /etc/init.d/xvfb start; fi
-install:
-  - npm install
-script:
-  - mkdir public
-  - node --stack_size=100000 $(which npm) run build
-  - npm run lint
-  - npm run lint-styles
-  - npm run test
-addons:
-  apt:
-    sources:
-      - ubuntu-toolchain-r-test
-    packages:
-      - g++-4.8

Dockerfile

@@ -1,4 +1,9 @@
-FROM nodesource/xenial:6.1.0
+FROM node:10-slim
+
+RUN apt-get update && apt-get install -y --no-install-recommends \
+    git \
+    python \
+ && rm -rf /var/lib/apt/lists/*
 
 EXPOSE 8888
 
@@ -9,7 +14,8 @@ COPY . ${HOME}/
 
 WORKDIR ${HOME}
 
-RUN npm install -d --dev
+RUN npm install -d
 RUN npm run build
 
-CMD npm run start -- --host 0.0.0.0
+WORKDIR ${HOME}/build/build
+CMD python -m SimpleHTTPServer 8888

README.md

@@ -1,26 +1,32 @@
 # Maputnik
 
-[![Build Status](https://travis-ci.org/maputnik/editor.svg?branch=master)][travis]
+[![Build Status](https://circleci.com/gh/maputnik/editor/tree/master.svg?style=shield)][circleci]
 [![Windows Build Status](https://ci.appveyor.com/api/projects/status/anelbgv6jdb3qnh9/branch/master?svg=true)][appveyor]
 [![Dependency Status](https://david-dm.org/maputnik/editor.svg)][dm-prod]
 [![Dev Dependency Status](https://david-dm.org/maputnik/editor/dev-status.svg)][dm-dev]
 [![License](https://img.shields.io/badge/license-MIT-blue.svg)][license]
 
-[travis]:      https://travis-ci.org/maputnik/editor
+[circleci]:    https://circleci.com/gh/maputnik/editor/tree/master
 [appveyor]:    https://ci.appveyor.com/project/lukasmartinelli/editor
 [dm-prod]:     https://david-dm.org/maputnik/editor
-[dm-dev]:      https://david-dm.org/maputnik/editor#info=devDependencies
+[dm-dev]:      https://david-dm.org/maputnik/editor?type=dev
 [license]:     https://tldrlegal.com/license/mit-license
 
-<img width="200" align="right" alt="Maputnik" src="src/img/maputnik.png" />
+<img width="200" align="right" alt="Maputnik" src="https://cdn.jsdelivr.net/gh/maputnik/editor@1.5.0/src/img/maputnik.png" />
 
 A free and open visual editor for the [Mapbox GL styles](https://www.mapbox.com/mapbox-gl-style-spec/)
 targeted at developers and map designers.
 
 - :link: Design your maps online at **<https://maputnik.github.io/editor/>** (all in local storage)
+- :link: Try out the v1.6.0-beta release at: https://maputnik.github.io/releases/v1.6.0-beta/
 - :link: Use the [Maputnik CLI](https://github.com/maputnik/editor/wiki/Maputnik-CLI) for local style development
 
-Mapbox has built one of the best and most amazing OSS ecosystems. A key component to ensure its longevity and independance is an OSS map designer.
+Mapbox has built one of the best and most amazing OSS ecosystems. A key component to ensure its longevity and independence is an OSS map designer.
+
+
+## Donations
+If you or your organisation has seen value from Maputnik, please consider donating at <https://maputnik.github.io/donate>
+
 
 ## Documentation
 
@@ -35,10 +41,7 @@ The documentation can be found in the [Wiki](https://github.com/maputnik/editor/
 
 Maputnik is written in ES6 and is using [React](https://github.com/facebook/react) and [Mapbox GL JS](https://www.mapbox.com/mapbox-gl-js/api/).
 
-We ensure building and developing Maputnik works with
+We ensure building and developing Maputnik works with the [current active LTS Node.js version and above](https://github.com/nodejs/Release#release-schedule).
-
-- Linux, OSX and Windows
-- Node >4
 
 Install the deps, start the dev server and open the web browser on `http://localhost:8888/`.
 
@@ -49,12 +52,18 @@ npm install
 npm start
 ```
 
-The build process will watch for changes to the filesystem, rebuild and autoreload the editor. However note this from the webpack-dev-server docs
+If you want Maputnik to be accessible externally use the [`--host` option](https://webpack.js.org/configuration/dev-server/#devserverhost):
 
-> webpack uses the file system to get notified of file changes. In some cases this does not work. For example, when using Network File System (NFS). Vagrant also has a lot of problems with this. 
+```bash
-Snippet from <https://webpack.js.org/configuration/dev-server/#devserver-watchoptions->
+# start externally accessible dev server
+npm start -- --host 0.0.0.0 
+```
 
-To enable polling add `export WEBPACK_DEV_SERVER_POLLING=1` to your enviroment.
+The build process will watch for changes to the filesystem, rebuild and autoreload the editor. However note this from the [webpack-dev-server docs](https://webpack.js.org/configuration/dev-server/):
+
+> webpack uses the file system to get notified of file changes. In some cases this does not work. For example, when using Network File System (NFS). Vagrant also has a lot of problems with this. ([snippet source](https://webpack.js.org/configuration/dev-server/#devserverwatchoptions-))
+
+To enable polling add `export WEBPACK_DEV_SERVER_POLLING=1` to your environment.
 
 ```
 npm run build
@@ -68,6 +77,33 @@ npm run lint
 npm run lint-styles
 ```
 
+
+## Tests
+For testing we use [webdriverio](http://webdriver.io) and [selenium-standalone](https://github.com/vvo/selenium-standalone)
+
+[selenium-standalone](https://github.com/vvo/selenium-standalone) starts a server that will launch browsers on your local machine. We use chrome so you **must** have chrome installed on your machine.
+
+Now open a terminal and run the following. This will install the drivers on your local machine
+
+```
+./node_modules/.bin/selenium-standalone install
+```
+
+Now start the standalone server
+
+```
+./node_modules/.bin/selenium-standalone start
+```
+
+Then open another terminal and run
+
+```
+npm test
+```
+
+After some time you should see a browser launch which will be automated by the test runner.
+
+
 ## Related Projects
 
 - [maputnik-dev-server](https://github.com/nycplanning/labs-maputnik-dev-server) - An express.js server that allows for quickly loading the style from any mapboxGL map into mapuntnik. 
@@ -83,13 +119,13 @@ Thanks to the supporters of the **[Kickstarter campaign](https://www.kickstarter
 - [Terranodo](http://terranodo.io/)
 
 <a href="https://getwemap.com/">
-  <img width="33%" alt="Wemap" style="display:inline" src="media/sponsors/wemap.jpg" />
+  <img width="33%" alt="Wemap" style="display:inline" src="https://cdn.jsdelivr.net/gh/maputnik/editor@1.5.0/media/sponsors/wemap.jpg" />
 </a>
 <a href="http://terranodo.io/">
-  <img width="33%" alt="Terranodo" style="display:inline" src="media/sponsors/terranodo.png" />
+  <img width="33%" alt="Terranodo" style="display:inline" src="https://cdn.jsdelivr.net/gh/maputnik/editor@1.5.0/media/sponsors/terranodo.png" />
 </a>
 <a href="https://www.orbiconinformatik.dk/">
-  <img width="32%" alt="Terranodo" style="display:inline" src="media/sponsors/orbicon_informatik.png" />
+  <img width="32%" alt="Terranodo" style="display:inline" src="https://cdn.jsdelivr.net/gh/maputnik/editor@1.5.0/media/sponsors/orbicon_informatik.png" />
 </a>
 
 <br/>
@@ -101,13 +137,13 @@ Thanks to the supporters of the **[Kickstarter campaign](https://www.kickstarter
 - [Dreipol](https://www.dreipol.ch/)
 
 <a href="https://www.klokantech.com/">
-  <img width="18%" alt="Klokan Technologies" style="display:inline-block" src="media/sponsors/klokantech.png" />
+  <img width="18%" alt="Klokan Technologies" style="display:inline-block" src="https://cdn.jsdelivr.net/gh/maputnik/editor@1.5.0/media/sponsors/klokantech.png" />
 </a>
 <a href="http://www.geofabrik.de/">
-  <img width="18%" alt="Geofabrik" style="display:inline-block" src="media/sponsors/geofabrik.png" />
+  <img width="18%" alt="Geofabrik" style="display:inline-block" src="https://cdn.jsdelivr.net/gh/maputnik/editor@1.5.0/media/sponsors/geofabrik.png" />
 </a>
 <a href="https://www.dreipol.ch/">
-  <img width="18%" alt="Dreipol" style="display:inline-block" src="media/sponsors/dreipol.png" />
+  <img width="18%" alt="Dreipol" style="display:inline-block" src="https://cdn.jsdelivr.net/gh/maputnik/editor@1.5.0/media/sponsors/dreipol.png" />
 </a>
 
 <br/>
@@ -130,6 +166,6 @@ Sina Martinelli, Nicholas Doiron, Neil Cawse, Urs42, Benedikt Groß, Manuel Roth
 
 Maputnik is [licensed under MIT](LICENSE) and is Copyright (c) Lukas Martinelli and contributors.
 
-**Disclaimer** This project is not affiliated with Mapbox or Mapbox Studio. It is a independent style editor for the
+**Disclaimer** This project is not affiliated with Mapbox or Mapbox Studio. It is an independent style editor for the
 open source technology in the Mapbox GL ecosystem.
 As contributor please take extra care of not violating any Mapbox trademarks. Do not get inspired by Mapbox Studio and make your own decisions for a good style editor.

appveyor.yml

@@ -1,19 +1,26 @@
+image: Visual Studio 2015
 environment:
   matrix:
-    - nodejs_version: "6"
-    - nodejs_version: "7"
     - nodejs_version: "8"
-    - nodejs_version: "9"
+    - nodejs_version: "10"
+    - nodejs_version: "12"
 platform:
   - x86
   - x64
 install:
-  - ps: Install-Product node $env:nodejs_version
+  # https://github.com/appveyor/ci/issues/2921#issuecomment-501016533
+  - ps: |
+      try {
+      Install-Product node $env:nodejs_version $env:platform
+      } catch {
+      echo "Unable to install node $env:nodejs_version, trying update..."
+      Update-NodeJsInstallation (Get-NodeJsLatestBuild $env:nodejs_version) $env:platform
+      }
   - md public
-  - npm install --global --production windows-build-tools
+  - npm --vs2015 install --global windows-build-tools
   - npm install
 build_script:
   - npm run build
 test_script:
   - npm run lint
-  - npm test
+  - npm run lint-styles

circle.yml

@@ -1,6 +0,0 @@
-machine:
-  node:
-    version: 6
-test:
-  post:
-    - npm run build

config/wdio.conf.js

@@ -1,48 +1,288 @@
 var webpack          = require("webpack");
 var WebpackDevServer = require("webpack-dev-server");
-var webpackConfig    = require("./webpack.production.config");
+var webpackConfig    = require("./webpack.config");
 var testConfig       = require("../test/config/specs");
+var artifacts        = require("../test/artifacts");
+var isDocker         = require("is-docker");
 
 
 var server;
+var SCREENSHOT_PATH = artifacts.pathSync("screenshots");
 
 exports.config = {
-  specs: [
+    //
-    './test/specs/**/*.js'
+    // ====================
-  ],
+    // Runner Configuration
-  exclude: [
+    // ====================
-  ],
+    //
-  maxInstances: 10,
+    // WebdriverIO allows it to run your tests in arbitrary locations (e.g. locally or
-  capabilities: [{
+    // on a remote machine).
-    maxInstances: 5,
+    runner: 'local',
-    browserName: 'firefox'
+    //
-  }],
+    // ==================
-  sync: true,
+    // Specify Test Files
-  logLevel: 'verbose',
+    // ==================
-  coloredLogs: true,
+    // Define which test specs should run. The pattern is relative to the directory
-  bail: 0,
+    // from which `wdio` was called. Notice that, if you are calling `wdio` from an
-  screenshotPath: './errorShots/',
+    // NPM script (see https://docs.npmjs.com/cli/run-script) then the current working
-  baseUrl: 'http://localhost',
+    // directory is where your package.json resides, so `wdio` will be called from there.
-  waitforTimeout: 10000,
+    //
-  connectionRetryTimeout: 90000,
+    specs: [
-  connectionRetryCount: 3,
+        './test/functional/index.js'
-  services: ['phantomjs'],
+    ],
-  framework: 'mocha',
+    // Patterns to exclude.
-  reporters: ['spec'],
+    exclude: [
-  phantomjsOpts: {
+        // 'path/to/excluded/files'
-    webdriverLogfile: 'phantomjs.log'
+    ],
-  },
+    //
-  mochaOpts: {
+    // ============
-    ui: 'bdd',
+    // Capabilities
-    // Because we don't know how long the initial build will take...
+    // ============
-    timeout: 2*60*1000
+    // Define your capabilities here. WebdriverIO can run multiple capabilities at the same
-  },
+    // time. Depending on the number of capabilities, WebdriverIO launches several test
-  onPrepare: function (config, capabilities) {
+    // sessions. Within your capabilities you can overwrite the spec and exclude options in
-    var compiler = webpack(webpackConfig);
+    // order to group specific specs to a specific capability.
-    server = new WebpackDevServer(compiler, {});
+    //
-    server.listen(testConfig.port);
+    // First, you can define how many instances should be started at the same time. Let's
-  },
+    // say you have 3 different capabilities (Chrome, Firefox, and Safari) and you have
-  onComplete: function(exitCode) {
+    // set maxInstances to 1; wdio will spawn 3 processes. Therefore, if you have 10 spec
-    server.close();
+    // files and you set maxInstances to 10, all spec files will get tested at the same time
-  }
+    // and 30 processes will get spawned. The property handles how many capabilities
+    // from the same test should run tests.
+    //
+    maxInstances: 10,
+    //
+    // If you have trouble getting all important capabilities together, check out the
+    // Sauce Labs platform configurator - a great tool to configure your capabilities:
+    // https://docs.saucelabs.com/reference/platforms-configurator
+    //
+    capabilities: [{
+        // maxInstances can get overwritten per capability. So if you have an in-house Selenium
+        // grid with only 5 firefox instances available you can make sure that not more than
+        // 5 instances get started at a time.
+        maxInstances: 5,
+        //
+        browserName: 'chrome',
+        // If outputDir is provided WebdriverIO can capture driver session logs
+        // it is possible to configure which logTypes to include/exclude.
+        // excludeDriverLogs: ['*'], // pass '*' to exclude all driver session logs
+        // excludeDriverLogs: ['bugreport', 'server'],
+    }],
+    //
+    // ===================
+    // Test Configurations
+    // ===================
+    // Define all options that are relevant for the WebdriverIO instance here
+    //
+    // Level of logging verbosity: trace | debug | info | warn | error | silent
+    logLevel: 'info',
+    //
+    // Set specific log levels per logger
+    // loggers:
+    // - webdriver, webdriverio
+    // - @wdio/applitools-service, @wdio/browserstack-service, @wdio/devtools-service, @wdio/sauce-service
+    // - @wdio/mocha-framework, @wdio/jasmine-framework
+    // - @wdio/local-runner, @wdio/lambda-runner
+    // - @wdio/sumologic-reporter
+    // - @wdio/cli, @wdio/config, @wdio/sync, @wdio/utils
+    // Level of logging verbosity: trace | debug | info | warn | error | silent
+    // logLevels: {
+        // webdriver: 'debug',
+        // '@wdio/applitools-service': 'info'
+    // },
+    //
+    // If you only want to run your tests until a specific amount of tests have failed use
+    // bail (default is 0 - don't bail, run all tests).
+    bail: 0,
+    //
+    screenshotPath: SCREENSHOT_PATH,
+    // Note: This is here because @orangemug currently runs Maputnik inside a docker container.
+    host: process.env.DOCKER_HOST || "0.0.0.0",
+    // Set a base URL in order to shorten url command calls. If your `url` parameter starts
+    // with `/`, the base url gets prepended, not including the path portion of your baseUrl.
+    // If your `url` parameter starts without a scheme or `/` (like `some/path`), the base url
+    // gets prepended directly.
+    baseUrl: 'http://localhost',
+    //
+    // Default timeout for all waitFor* commands.
+    waitforTimeout: 10000,
+    //
+    // Default timeout in milliseconds for request
+    // if Selenium Grid doesn't send response
+    connectionRetryTimeout: 90000,
+    //
+    // Default request retries count
+    connectionRetryCount: 3,
+    //
+    // Test runner services
+    // Services take over a specific job you don't want to take care of. They enhance
+    // your test setup with almost no effort. Unlike plugins, they don't add new
+    // commands. Instead, they hook themselves up into the test process.
+    services: ['selenium-standalone'],
+    //
+    // Framework you want to run your specs with.
+    // The following are supported: Mocha, Jasmine, and Cucumber
+    // see also: https://webdriver.io/docs/frameworks.html
+    //
+    // Make sure you have the wdio adapter package for the specific framework installed
+    // before running any tests.
+    framework: 'mocha',
+    //
+    // The number of times to retry the entire specfile when it fails as a whole
+    // specFileRetries: 1,
+    //
+    // Test reporter for stdout.
+    // The only one supported by default is 'dot'
+    // see also: https://webdriver.io/docs/dot-reporter.html
+    reporters: ['spec'],
+    
+    //
+    // Options to be passed to Mocha.
+    // See the full list at http://mochajs.org/
+    mochaOpts: {
+        ui: 'bdd',
+        // Because we don't know how long the initial build will take...
+        timeout: 4*60*1000
+    },
+    onPrepare: function (config, capabilities) {
+      return new Promise(function(resolve, reject) {
+        var compiler = webpack(webpackConfig);
+        server = new WebpackDevServer(compiler, {
+          stats: {
+            colors: true
+          }
+        });
+        server.listen(testConfig.port, (isDocker() ? "0.0.0.0" : "localhost"), function(err) {
+          if(err) {
+            reject(err);
+          }
+          else {
+            resolve();
+          }
+        });
+      })
+    },
+    onComplete: function(exitCode) {
+      server.close()
+    }
+    //
+    // =====
+    // Hooks
+    // =====
+    // WebdriverIO provides several hooks you can use to interfere with the test process in order to enhance
+    // it and to build services around it. You can either apply a single function or an array of
+    // methods to it. If one of them returns with a promise, WebdriverIO will wait until that promise got
+    // resolved to continue.
+    /**
+     * Gets executed once before all workers get launched.
+     * @param {Object} config wdio configuration object
+     * @param {Array.<Object>} capabilities list of capabilities details
+     */
+    // onPrepare: function (config, capabilities) {
+    // },
+    /**
+     * Gets executed just before initialising the webdriver session and test framework. It allows you
+     * to manipulate configurations depending on the capability or spec.
+     * @param {Object} config wdio configuration object
+     * @param {Array.<Object>} capabilities list of capabilities details
+     * @param {Array.<String>} specs List of spec file paths that are to be run
+     */
+    // beforeSession: function (config, capabilities, specs) {
+    // },
+    /**
+     * Gets executed before test execution begins. At this point you can access to all global
+     * variables like `browser`. It is the perfect place to define custom commands.
+     * @param {Array.<Object>} capabilities list of capabilities details
+     * @param {Array.<String>} specs List of spec file paths that are to be run
+     */
+    // before: function (capabilities, specs) {
+    // },
+    /**
+     * Runs before a WebdriverIO command gets executed.
+     * @param {String} commandName hook command name
+     * @param {Array} args arguments that command would receive
+     */
+    // beforeCommand: function (commandName, args) {
+    // },
+    
+    /**
+     * Hook that gets executed before the suite starts
+     * @param {Object} suite suite details
+     */
+    // beforeSuite: function (suite) {
+    // },
+    /**
+     * Function to be executed before a test (in Mocha/Jasmine) or a step (in Cucumber) starts.
+     * @param {Object} test test details
+     */
+    // beforeTest: function (test) {
+    // },
+    /**
+     * Hook that gets executed _before_ a hook within the suite starts (e.g. runs before calling
+     * beforeEach in Mocha)
+     */
+    // beforeHook: function () {
+    // },
+    /**
+     * Hook that gets executed _after_ a hook within the suite starts (e.g. runs after calling
+     * afterEach in Mocha)
+     */
+    // afterHook: function () {
+    // },
+    /**
+     * Function to be executed after a test (in Mocha/Jasmine) or a step (in Cucumber) starts.
+     * @param {Object} test test details
+     */
+    // afterTest: function (test) {
+    // },
+    /**
+     * Hook that gets executed after the suite has ended
+     * @param {Object} suite suite details
+     */
+    // afterSuite: function (suite) {
+    // },
+    
+    /**
+     * Runs after a WebdriverIO command gets executed
+     * @param {String} commandName hook command name
+     * @param {Array} args arguments that command would receive
+     * @param {Number} result 0 - command success, 1 - command error
+     * @param {Object} error error object if any
+     */
+    // afterCommand: function (commandName, args, result, error) {
+    // },
+    /**
+     * Gets executed after all tests are done. You still have access to all global variables from
+     * the test.
+     * @param {Number} result 0 - test pass, 1 - test fail
+     * @param {Array.<Object>} capabilities list of capabilities details
+     * @param {Array.<String>} specs List of spec file paths that ran
+     */
+    // after: function (result, capabilities, specs) {
+    // },
+    /**
+     * Gets executed right after terminating the webdriver session.
+     * @param {Object} config wdio configuration object
+     * @param {Array.<Object>} capabilities list of capabilities details
+     * @param {Array.<String>} specs List of spec file paths that ran
+     */
+    // afterSession: function (config, capabilities, specs) {
+    // },
+    /**
+     * Gets executed after all workers got shut down and the process is about to exit. An error
+     * thrown in the onComplete hook will result in the test run failing.
+     * @param {Object} exitCode 0 - success, 1 - fail
+     * @param {Object} config wdio configuration object
+     * @param {Array.<Object>} capabilities list of capabilities details
+     * @param {<Object>} results object containing test results
+     */
+    // onComplete: function(exitCode, config, capabilities, results) {
+    // },
+    /**
+    * Gets executed when a refresh happens.
+    * @param {String} oldSessionId session ID of the old session
+    * @param {String} newSessionId session ID of the new session
+    */
+    //onReload: function(oldSessionId, newSessionId) {
+    //}
 }

config/webpack.config.js

@@ -1,7 +1,7 @@
 "use strict";
 var webpack = require('webpack');
 var path = require('path');
-var loaders = require('./webpack.loaders');
+var rules = require('./webpack.rules');
 var HtmlWebpackPlugin = require('html-webpack-plugin');
 var CopyWebpackPlugin = require('copy-webpack-plugin');
 
@@ -10,6 +10,7 @@ const PORT = process.env.PORT || "8888";
 
 module.exports = {
   target: 'web',
+  mode: 'development',
   entry: [
     `webpack-dev-server/client?http://${HOST}:${PORT}`,
     `webpack/hot/only-dev-server`,
@@ -25,10 +26,9 @@ module.exports = {
   },
   module: {
     noParse: [
-      /mapbox-gl\/dist\/mapbox-gl.js/,
+      /mapbox-gl\/dist\/mapbox-gl.js/
-      /openlayers\/dist\/ol.js/
     ],
-    loaders: loaders
+    rules: rules
   },
   node: {
     fs: "empty",

config/webpack.loaders.js

@@ -1,43 +0,0 @@
-module.exports = [
-  {
-    test: /\.jsx?$/,
-    exclude: /(node_modules|bower_components|public)/,
-    loaders: ['react-hot-loader/webpack']
-  },
-  {
-    test: /\.jsx?$/,
-    exclude: /(.*node_modules(?![\/\\]@mapbox[\/\\]mapbox-gl-style-spec)|bower_components|public)/,
-    loader: 'babel-loader',
-    query: {
-      presets: ['env', 'react'],
-      plugins: ['transform-runtime', 'transform-decorators-legacy', 'transform-class-properties'],
-    }
-  },
-  {
-    test: /\.(eot|ttf|woff|woff2)$/,
-    loader: 'file-loader?name=fonts/[name].[ext]'
-  },
-  {
-    test: /\.ico$/,
-    loader: 'file-loader?name=[name].[ext]'
-  },
-  {
-    test: /\.(svg|gif|jpg|png)$/,
-    loader: 'file-loader?name=img/[name].[ext]'
-  },
-  {
-    test: /\.json$/,
-    loader: 'json-loader'
-  },
-  {
-    test: /[\/\\](node_modules|global|src)[\/\\].*\.scss$/,
-    loaders: ["style-loader", "css-loader", "sass-loader"]
-  },
-  {
-    test: /[\/\\](node_modules|global|src)[\/\\].*\.css$/,
-    loaders: [
-      'style-loader?sourceMap',
-      'css-loader'
-    ]
-  }
-];

config/webpack.production.config.js

@@ -1,58 +1,31 @@
-
 var webpack = require('webpack');
 var path = require('path');
-var loaders = require('./webpack.loaders');
+var rules = require('./webpack.rules');
-var ExtractTextPlugin = require('extract-text-webpack-plugin');
 var HtmlWebpackPlugin = require('html-webpack-plugin');
 var WebpackCleanupPlugin = require('webpack-cleanup-plugin');
 var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 var CopyWebpackPlugin = require('copy-webpack-plugin');
+var artifacts = require("../test/artifacts");
 
-var OUTPATH;
+var OUTPATH = artifacts.pathSync("/build");
-if(process.env.CIRCLE_ARTIFACTS) {
-  OUTPATH = path.join(process.env.CIRCLE_ARTIFACTS, "build");
-}
-else {
-  OUTPATH = path.join(__dirname, '..', 'public');
-}
 
 module.exports = {
   entry: {
     app: './src/index.jsx',
-    vendor: [
-        'file-saver',
-        'mapbox-gl/dist/mapbox-gl.js',
-        "lodash.clonedeep",
-        "lodash.throttle",
-        'color',
-        'react',
-        "react-dom",
-        "react-color",
-        "react-file-reader-input",
-        "react-collapse",
-        "react-height",
-        "react-icon-base",
-        "react-motion",
-        "react-sortable-hoc",
-        "request",
-        //TODO: Icons raise multi vendor errors?
-        //"react-icons",
-    ]
   },
   output: {
     path: OUTPATH,
-    filename: '[name].[chunkhash].js',
+    filename: '[name].[contenthash].js',
-    chunkFilename: '[chunkhash].js'
+    chunkFilename: '[contenthash].js'
   },
   resolve: {
     extensions: ['.js', '.jsx']
   },
   module: {
     noParse: [
-      /mapbox-gl\/dist\/mapbox-gl.js/,
+      /mapbox-gl\/dist\/mapbox-gl.js/
-      /openlayers\/dist\/ol.js/
     ],
-    loaders
+    rules: rules
   },
   node: {
     fs: "empty",
@@ -61,22 +34,12 @@ module.exports = {
   },
   plugins: [
     new webpack.NoEmitOnErrorsPlugin(),
-    new webpack.optimize.CommonsChunkPlugin({ name: 'vendor', filename: '[chunkhash].vendor.js' }),
     new WebpackCleanupPlugin(),
     new webpack.DefinePlugin({
       'process.env': {
         NODE_ENV: '"production"'
       }
     }),
-    new webpack.optimize.UglifyJsPlugin({
-      compress: {
-        warnings: false,
-        screw_ie8: true,
-      }
-    }),
-    new ExtractTextPlugin('[contenthash].css', {
-      allChunks: true
-    }),
     new HtmlWebpackPlugin({
       template: './src/template.html',
       title: 'Maputnik'
@@ -85,8 +48,8 @@ module.exports = {
       {
         from: './src/manifest.json',
         to: 'manifest.json'
-      }
+    }
-    ]),
+  ]),
     new BundleAnalyzerPlugin({
       analyzerMode: 'static',
       defaultSizes: 'gzip',

config/webpack.rules.js

@@ -0,0 +1,38 @@
+const path = require("path");
+
+module.exports = [
+  {
+    test: /\.jsx?$/,
+    exclude: [
+      path.resolve(__dirname, '../node_modules')
+    ],
+    use: 'babel-loader'
+  },
+  {
+    test: /\.(eot|ttf|woff|woff2)$/,
+    use: 'file-loader?name=fonts/[name].[ext]'
+  },
+  {
+    test: /\.ico$/,
+    use: 'file-loader?name=[name].[ext]'
+  },
+  {
+    test: /\.(svg|gif|jpg|png)$/,
+    use: 'file-loader?name=img/[name].[ext]'
+  },
+  {
+    test: /[\/\\](node_modules|global|src)[\/\\].*\.scss$/,
+    use: [
+      'style-loader',
+      "css-loader",
+      "sass-loader"
+    ]
+  },
+  {
+    test: /[\/\\](node_modules|global|src)[\/\\].*\.css$/,
+    use: [
+      'style-loader',
+      'css-loader'
+    ]
+  }
+];

package.json

@@ -1,16 +1,16 @@
 {
   "name": "maputnik",
-  "version": "1.1.0-beta",
+  "version": "1.6.0",
   "description": "A MapboxGL visual style editor",
   "main": "''",
   "scripts": {
     "stats": "webpack --config config/webpack.production.config.js --profile --json > stats.json",
     "build": "webpack --config config/webpack.production.config.js --progress --profile --colors",
-    "test": "wdio config/wdio.conf.js",
+    "test": "cross-env NODE_ENV=test wdio config/wdio.conf.js",
-    "test-watch": "wdio config/wdio.conf.js --watch",
+    "test-watch": "cross-env NODE_ENV=test wdio config/wdio.conf.js --watch",
     "start": "webpack-dev-server --progress --profile --colors --config config/webpack.config.js",
-    "lint": "eslint --ext js --ext jsx {src,test}",
+    "lint": "eslint --ext js --ext jsx src test",
-    "lint-styles": "stylelint 'src/styles/*.scss'"
+    "lint-styles": "stylelint \"src/styles/*.scss\""
   },
   "repository": {
     "type": "git",
@@ -20,48 +20,61 @@
   "license": "MIT",
   "homepage": "https://github.com/maputnik/editor#readme",
   "dependencies": {
-    "@mapbox/mapbox-gl-rtl-text": "^0.1.1",
+    "@babel/runtime": "^7.1.2",
-    "@mapbox/mapbox-gl-style-spec": "^10.0.1",
+    "@mapbox/mapbox-gl-rtl-text": "^0.2.2",
-    "classnames": "^2.2.5",
+    "@mapbox/mapbox-gl-style-spec": "^13.7.2",
-    "codemirror": "^5.32.0",
+    "classnames": "^2.2.6",
-    "color": "^2.0.0",
+    "codemirror": "^5.40.2",
-    "file-saver": "^1.3.3",
+    "color": "^3.0.0",
-    "github-api": "^3.0.0",
+    "detect-browser": "^4.5.0",
+    "file-saver": "^1.3.8",
     "jsonlint": "github:josdejong/jsonlint#85a19d7",
     "lodash.capitalize": "^4.2.1",
+    "lodash.clamp": "^4.0.3",
     "lodash.clonedeep": "^4.5.0",
+    "lodash.get": "^4.4.2",
     "lodash.isequal": "^4.5.0",
     "lodash.throttle": "^4.1.1",
-    "mapbox-gl": "^0.43.0",
+    "mapbox-gl": "^1.2.0",
-    "mapbox-gl-inspect": "^1.2.4",
+    "mapbox-gl-inspect": "^1.3.1",
     "maputnik-design": "github:maputnik/design",
-    "mousetrap": "^1.6.1",
+    "ol": "^6.0.0-beta.8",
-    "ol-mapbox-style": "^1.0.1",
+    "ol-mapbox-style": "^5.0.0-beta.2",
-    "openlayers": "^4.4.2",
+    "prop-types": "^15.6.2",
-    "prop-types": "^15.6.0",
+    "react": "^16.5.2",
-    "react": "16.0.0",
+    "react-aria-menubutton": "^6.0.1",
-    "react-addons-pure-render-mixin": "^15.6.2",
+    "react-aria-modal": "^3.0.0",
-    "react-autocomplete": "^1.7.2",
+    "react-autobind": "^1.0.6",
-    "react-codemirror2": "^3.0.7",
+    "react-autocomplete": "^1.8.1",
+    "react-codemirror2": "^5.1.0",
     "react-collapse": "^4.0.3",
-    "react-color": "^2.13.8",
+    "react-color": "^2.14.1",
-    "react-copy-to-clipboard": "^5.0.1",
+    "react-dom": "^16.5.2",
-    "react-dom": "16.0.0",
+    "react-file-reader-input": "^2.0.0",
-    "react-file-reader-input": "^1.1.4",
+    "react-icon-base": "^2.1.2",
-    "react-height": "^3.0.0",
+    "react-icons": "^3.1.0",
-    "react-icon-base": "^2.1.1",
-    "react-icons": "^2.2.7",
     "react-motion": "^0.5.2",
-    "react-sortable-hoc": "^0.6.8",
+    "react-sortable-hoc": "^0.8.3",
     "reconnecting-websocket": "^3.2.2",
-    "request": "^2.83.0",
+    "slugify": "^1.3.1",
     "url": "^0.11.0"
   },
   "jshintConfig": {
     "esversion": 6
   },
   "stylelint": {
-    "extends": "stylelint-config-standard"
+    "extends": "stylelint-config-recommended-scss",
+    "rules": {
+      "no-descending-specificity": null,
+      "media-feature-name-no-unknown": [
+        true,
+        {
+          "ignoreMediaFeatureNames": [
+            "prefers-reduced-motion"
+          ]
+        }
+      ]
+    }
   },
   "eslintConfig": {
     "plugins": [
@@ -87,47 +100,51 @@
     }
   },
   "devDependencies": {
-    "babel-core": "^6.26.0",
+    "@babel/core": "^7.1.2",
-    "babel-eslint": "^8.0.2",
+    "@babel/plugin-proposal-class-properties": "^7.1.0",
-    "babel-loader": "7.1.1",
+    "@babel/plugin-transform-runtime": "^7.1.0",
-    "babel-plugin-transform-class-properties": "^6.24.1",
+    "@babel/preset-env": "^7.1.0",
-    "babel-plugin-transform-decorators-legacy": "^1.3.4",
+    "@babel/preset-flow": "^7.0.0",
-    "babel-plugin-transform-flow-strip-types": "^6.22.0",
+    "@babel/preset-react": "^7.0.0",
-    "babel-plugin-transform-object-rest-spread": "^6.26.0",
+    "@wdio/cli": "^5.10.4",
-    "babel-plugin-transform-runtime": "^6.23.0",
+    "@wdio/local-runner": "^5.10.4",
-    "babel-preset-env": "^1.6.1",
+    "@wdio/mocha-framework": "^5.10.1",
-    "babel-preset-react": "^6.24.1",
+    "@wdio/selenium-standalone-service": "^5.9.3",
-    "babel-runtime": "^6.26.0",
+    "@wdio/spec-reporter": "^5.9.3",
-    "base64-loader": "^1.0.0",
+    "@wdio/sync": "^5.10.1",
-    "copy-webpack-plugin": "^4.2.0",
+    "babel-eslint": "^10.0.1",
-    "css-loader": "^0.28.7",
+    "babel-loader": "8.0.4",
-    "eslint": "^4.10.0",
+    "babel-plugin-istanbul": "^5.0.1",
-    "eslint-plugin-react": "^7.4.0",
+    "copy-webpack-plugin": "^4.5.2",
-    "extract-text-webpack-plugin": "^3.0.2",
+    "cors": "^2.8.4",
-    "file-loader": "^1.1.5",
+    "cross-env": "^5.2.0",
-    "html-webpack-plugin": "^2.30.1",
+    "css-loader": "^1.0.0",
-    "json-loader": "^0.5.7",
+    "eslint": "^5.6.1",
-    "karma": "^1.7.1",
+    "eslint-plugin-react": "^7.11.1",
-    "karma-chrome-launcher": "^2.2.0",
+    "express": "^4.17.1",
-    "karma-firefox-launcher": "^1.0.1",
+    "file-loader": "^2.0.0",
-    "karma-mocha": "^1.3.0",
+    "html-webpack-plugin": "^3.2.0",
-    "karma-webpack": "^2.0.5",
+    "is-docker": "^2.0.0",
-    "mocha": "^4.0.1",
+    "istanbul": "^0.4.5",
-    "mocha-loader": "^1.1.1",
+    "istanbul-lib-coverage": "^2.0.1",
-    "node-sass": "^4.6.0",
+    "mkdirp": "^0.5.1",
-    "react-hot-loader": "^3.1.1",
+    "mocha": "^6.1.4",
-    "sass-loader": "^6.0.6",
+    "node-sass": "^4.12.0",
-    "style-loader": "^0.19.0",
+    "raw-loader": "^0.5.1",
-    "stylelint": "^7.13.0",
+    "react-hot-loader": "^4.3.11",
-    "stylelint-config-standard": "^15.0.1",
+    "sass-loader": "^7.1.0",
+    "selenium-standalone": "^6.16.0",
+    "style-loader": "^0.23.0",
+    "stylelint": "^10.0.0",
+    "stylelint-config-recommended-scss": "^3.2.0",
+    "stylelint-scss": "^3.5.4",
     "transform-loader": "^0.2.4",
-    "wdio-mocha-framework": "^0.5.11",
+    "uuid": "^3.3.2",
-    "wdio-phantomjs-service": "^0.2.2",
+    "webdriverio": "^5.10.4",
-    "wdio-spec-reporter": "^0.1.2",
+    "webpack": "^4.20.2",
-    "webdriverio": "^4.8.0",
+    "webpack-bundle-analyzer": "^3.0.2",
-    "webpack": "^3.8.1",
-    "webpack-bundle-analyzer": "^2.9.0",
     "webpack-cleanup-plugin": "^0.5.1",
-    "webpack-dev-server": "^2.9.4"
+    "webpack-cli": "^3.1.2",
+    "webpack-dev-server": "^3.1.9"
   }
 }

src/components/App.jsx

@@ -1,25 +1,76 @@
+import autoBind from 'react-autobind';
 import React from 'react'
-import Mousetrap from 'mousetrap'
+import cloneDeep from 'lodash.clonedeep'
+import clamp from 'lodash.clamp'
+import get from 'lodash.get'
+import {arrayMove} from 'react-sortable-hoc'
+import url from 'url'
 
 import MapboxGlMap from './map/MapboxGlMap'
-import OpenLayers3Map from './map/OpenLayers3Map'
+import OpenLayersMap from './map/OpenLayersMap'
 import LayerList from './layers/LayerList'
 import LayerEditor from './layers/LayerEditor'
 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 DebugModal from './modals/DebugModal'
+
 import { downloadGlyphsMetadata, downloadSpriteMetadata } from '../libs/metadata'
-import styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec'
+import {latest, validate} from '@mapbox/mapbox-gl-style-spec'
-import style from '../libs/style.js'
+import style from '../libs/style'
-import { initialStyleUrl, loadStyleUrl } from '../libs/urlopen'
+import { initialStyleUrl, loadStyleUrl, removeStyleQuerystring } 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'
 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'
+
+
+// Similar functionality as <https://github.com/mapbox/mapbox-gl-js/blob/7e30aadf5177486c2cfa14fe1790c60e217b5e56/src/util/mapbox.js>
+function normalizeSourceURL (url, apiToken="") {
+  const matches = url.match(/^mapbox:\/\/(.*)/);
+  if (matches) {
+    // mapbox://mapbox.mapbox-streets-v7
+    return `https://api.mapbox.com/v4/${matches[1]}.json?secure&access_token=${apiToken}`
+  }
+  else {
+    return url;
+  }
+}
+
+function setFetchAccessToken(url, mapStyle) {
+  const matchesTilehosting = url.match(/\.tilehosting\.com/);
+  const matchesMaptiler = url.match(/\.maptiler\.com/);
+  const matchesThunderforest = url.match(/\.thunderforest\.com/);
+  if (matchesTilehosting || matchesMaptiler) {
+    const accessToken = style.getAccessToken("openmaptiles", mapStyle, {allowFallback: true})
+    if (accessToken) {
+      return url.replace('{key}', accessToken)
+    }
+  }
+  else if (matchesThunderforest) {
+    const accessToken = style.getAccessToken("thunderforest", mapStyle, {allowFallback: true})
+    if (accessToken) {
+      return url.replace('{key}', accessToken)
+    }
+  }
+  else {
+    return url;
+  }
+}
 
 function updateRootSpec(spec, fieldName, newValues) {
   return {
@@ -37,25 +88,121 @@ function updateRootSpec(spec, fieldName, newValues) {
 export default class App extends React.Component {
   constructor(props) {
     super(props)
+    autoBind(this);
+
     this.revisionStore = new RevisionStore()
+    const params = new URLSearchParams(window.location.search.substring(1))
+    let port = params.get("localport")
+    if (port == null && (window.location.port != 80 && window.location.port != 443)) {
+      port = window.location.port
+    }
     this.styleStore = new ApiStyleStore({
-      onLocalStyleChange: mapStyle => this.onStyleChanged(mapStyle, false)
+      onLocalStyleChange: mapStyle => this.onStyleChanged(mapStyle, false),
+      port: port,
+      host: params.get("localhost")
+    })
+
+
+    const shortcuts = [
+      {
+        key: "?",
+        handler: () => {
+          this.toggleModal("shortcuts");
+        }
+      },
+      {
+        key: "o",
+        handler: () => {
+          this.toggleModal("open");
+        }
+      },
+      {
+        key: "e",
+        handler: () => {
+          this.toggleModal("export");
+        }
+      },
+      {
+        key: "d",
+        handler: () => {
+          this.toggleModal("sources");
+        }
+      },
+      {
+        key: "s",
+        handler: () => {
+          this.toggleModal("settings");
+        }
+      },
+      {
+        key: "i",
+        handler: () => {
+          this.setMapState(
+            this.state.mapState === "map" ? "inspect" : "map"
+          );
+        }
+      },
+      {
+        key: "m",
+        handler: () => {
+          document.querySelector(".mapboxgl-canvas").focus();
+        }
+      },
+      {
+        key: "!",
+        handler: () => {
+          this.toggleModal("debug");
+        }
+      },
+    ]
+
+    document.body.addEventListener("keyup", (e) => {
+      if(e.key === "Escape") {
+        e.target.blur();
+        document.body.focus();
+      }
+      else if(this.state.isOpen.shortcuts || document.activeElement === document.body) {
+        const shortcut = shortcuts.find((shortcut) => {
+          return (shortcut.key === e.key)
+        })
+
+        if(shortcut) {
+          this.setModal("shortcuts", false);
+          shortcut.handler(e);
+        }
+      }
     })
 
     const styleUrl = initialStyleUrl()
-    if(styleUrl) {
+    if(styleUrl && window.confirm("Load style from URL: " + styleUrl + " and discard current changes?")) {
       this.styleStore = new StyleStore()
       loadStyleUrl(styleUrl, mapStyle => this.onStyleChanged(mapStyle))
+      removeStyleQuerystring()
     } else {
+      if(styleUrl) {
+        removeStyleQuerystring()
+      }
       this.styleStore.init(err => {
         if(err) {
           console.log('Falling back to local storage for storing styles')
           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: [],
@@ -63,8 +210,25 @@ export default class App extends React.Component {
       selectedLayerIndex: 0,
       sources: {},
       vectorLayers: {},
-      inspectModeEnabled: false,
+      mapState: "map",
-      spec: styleSpec.latest,
+      spec: latest,
+      isOpen: {
+        settings: false,
+        sources: false,
+        open: false,
+        shortcuts: false,
+        export: false,
+        survey: localStorage.hasOwnProperty('survey') ? false : true,
+        debug: false,
+      },
+      mapboxGlDebugOptions: {
+        showTileBoundaries: false,
+        showCollisionBoxes: false,
+        showOverdrawInspector: false,
+      },
+      openlayersDebugOptions: {
+        debugToolbox: false,
+      },
     }
 
     this.layerWatcher = new LayerWatcher({
@@ -72,20 +236,35 @@ export default class App extends React.Component {
     })
   }
 
+  handleKeyPress = (e) => {
+    if(navigator.platform.toUpperCase().indexOf('MAC') >= 0) {
+      if(e.metaKey && e.shiftKey && e.keyCode === 90) {
+        e.preventDefault();
+        this.onRedo(e);
+      }
+      else if(e.metaKey && e.keyCode === 90) {
+        e.preventDefault();
+        this.onUndo(e);
+      }
+    }
+    else {
+      if(e.ctrlKey && e.keyCode === 90) {
+        e.preventDefault();
+        this.onUndo(e);
+      }
+      else if(e.ctrlKey && e.keyCode === 89) {
+        e.preventDefault();
+        this.onRedo(e);
+      }
+    }
+  }
+
   componentDidMount() {
-    this.fetchSources();
+    window.addEventListener("keydown", this.handleKeyPress);
-    Mousetrap.bind(['ctrl+z'], this.onUndo.bind(this));
-    Mousetrap.bind(['ctrl+y'], this.onRedo.bind(this));
   }
 
   componentWillUnmount() {
-    Mousetrap.unbind(['ctrl+z'], this.onUndo.bind(this));
+    window.removeEventListener("keydown", this.handleKeyPress);
-    Mousetrap.unbind(['ctrl+y'], this.onRedo.bind(this));
-  }
-
-  onReset() {
-    this.styleStore.purge()
-    loadDefaultStyle(mapStyle => this.onStyleOpen(mapStyle))
   }
 
   saveStyle(snapshotStyle) {
@@ -95,7 +274,9 @@ export default class App extends React.Component {
   updateFonts(urlTemplate) {
     const metadata = this.state.mapStyle.metadata || {}
     const accessToken = metadata['maputnik:openmaptiles_access_token'] || tokens.openmaptiles
-    downloadGlyphsMetadata(urlTemplate.replace('{key}', accessToken), fonts => {
+
+    let glyphUrl = (typeof urlTemplate === 'string')? urlTemplate.replace('{key}', accessToken): urlTemplate;
+    downloadGlyphsMetadata(glyphUrl, fonts => {
       this.setState({ spec: updateRootSpec(this.state.spec, 'glyphs', fonts)})
     })
   }
@@ -106,16 +287,39 @@ export default class App extends React.Component {
     })
   }
 
-  onStyleChanged(newStyle, save=true) {
+  onChangeMetadataProperty = (property, value) => {
-    if(newStyle.glyphs !== this.state.mapStyle.glyphs) {
+    // If we're changing renderer reset the map state.
-      this.updateFonts(newStyle.glyphs)
+    if (
-    }
+      property === 'maputnik:renderer' &&
-    if(newStyle.sprite !== this.state.mapStyle.sprite) {
+      value !== get(this.state.mapStyle, ['metadata', 'maputnik:renderer'], 'mbgljs')
-      this.updateIcons(newStyle.sprite)
+    ) {
+      this.setState({
+        mapState: 'map'
+      });
     }
 
-    const errors = styleSpec.validate(newStyle, styleSpec.latest)
+    const changedStyle = {
+      ...this.state.mapStyle,
+      metadata: {
+        ...this.state.mapStyle.metadata,
+        [property]: value
+      }
+    }
+    this.onStyleChanged(changedStyle)
+  }
+
+  onStyleChanged = (newStyle, save=true) => {
+
+    const errors = validate(newStyle, latest)
     if(errors.length === 0) {
+
+      if(newStyle.glyphs !== this.state.mapStyle.glyphs) {
+        this.updateFonts(newStyle.glyphs)
+      }
+      if(newStyle.sprite !== this.state.mapStyle.sprite) {
+        this.updateIcons(newStyle.sprite)
+      }
+
       this.revisionStore.addRevision(newStyle)
       if(save) this.saveStyle(newStyle)
       this.setState({
@@ -131,7 +335,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)
@@ -141,7 +345,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)
@@ -151,7 +355,25 @@ export default class App extends React.Component {
     })
   }
 
-  onLayersChange(changedLayers) {
+  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,
       layers: changedLayers
@@ -159,7 +381,41 @@ export default class App extends React.Component {
     this.onStyleChanged(changedStyle)
   }
 
-  onLayerIdChange(oldId, newId) {
+  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)
 
@@ -171,7 +427,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
@@ -179,12 +435,33 @@ export default class App extends React.Component {
     this.onLayersChange(changedLayers)
   }
 
-  changeInspectMode() {
+  setMapState = (newState) => {
     this.setState({
-      inspectModeEnabled: !this.state.inspectModeEnabled
+      mapState: newState
     })
   }
 
+  setDefaultValues = (styleObj) => {
+    const metadata = styleObj.metadata || {}
+    if(metadata['maputnik:renderer'] === undefined) {
+      const changedStyle = {
+        ...styleObj,
+        metadata: {
+          ...styleObj.metadata,
+          'maputnik:renderer': 'mbgljs'
+        }
+      }
+      return changedStyle
+    } else {
+      return styleObj
+    }
+  }
+
+  openStyle = (styleObj) => {
+    styleObj = this.setDefaultValues(styleObj)
+    this.onStyleChanged(styleObj)
+  }
+
   fetchSources() {
     const sourceList = {...this.state.sources};
 
@@ -198,13 +475,31 @@ export default class App extends React.Component {
         layers: []
       };
 
-      if(!this.state.sources.hasOwnProperty(key) && val.type === "vector") {
+      if(!this.state.sources.hasOwnProperty(key) && val.type === "vector" && val.hasOwnProperty("url")) {
-        const url = val.url;
+        let url = val.url;
-        fetch(url)
+        try {
+          url = normalizeSourceURL(url, MapboxGl.accessToken);
+        } catch(err) {
+          console.warn("Failed to normalizeSourceURL: ", err);
+        }
+
+        try {
+          url = setFetchAccessToken(url, this.state.mapStyle)
+        } catch(err) {
+          console.warn("Failed to setFetchAccessToken: ", err);
+        }
+
+        fetch(url, {
+          mode: 'cors',
+        })
           .then((response) => {
             return response.json();
           })
           .then((json) => {
+            if(!json.hasOwnProperty("vector_layers")) {
+              return;
+            }
+
             // Create new objects before setState
             const sources = Object.assign({}, this.state.sources);
 
@@ -231,50 +526,119 @@ export default class App extends React.Component {
     }
   }
 
+  _getRenderer () {
+    const metadata = this.state.mapStyle.metadata || {};
+    return metadata['maputnik:renderer'] || 'mbgljs';
+  }
+
   mapRenderer() {
+    const metadata = this.state.mapStyle.metadata || {};
+
     const mapProps = {
-      mapStyle: style.replaceAccessToken(this.state.mapStyle),
+      mapStyle: style.replaceAccessTokens(this.state.mapStyle, {allowFallback: true}),
       onDataChange: (e) => {
         this.layerWatcher.analyzeMap(e.map)
         this.fetchSources();
       },
     }
 
-    const metadata = this.state.mapStyle.metadata || {}
+    const renderer = this._getRenderer();
-    const renderer = metadata['maputnik:renderer'] || 'mbgljs'
 
-    // Check if OL3 code has been loaded?
+    let mapElement;
-    if(renderer === 'ol3') {
+
-      return <OpenLayers3Map {...mapProps} />
+    // Check if OL code has been loaded?
+    if(renderer === 'ol') {
+      mapElement = <OpenLayersMap
+        {...mapProps}
+        debugToolbox={this.state.openlayersDebugOptions.debugToolbox}
+        onLayerSelect={this.onLayerSelect}
+      />
     } else {
-      return  <MapboxGlMap {...mapProps}
+      mapElement = <MapboxGlMap {...mapProps}
-        inspectModeEnabled={this.state.inspectModeEnabled}
+        options={this.state.mapboxGlDebugOptions}
-        highlightedLayer={this.state.mapStyle.layers[this.state.selectedLayerIndex]} />
+        inspectModeEnabled={this.state.mapState === "inspect"}
+        highlightedLayer={this.state.mapStyle.layers[this.state.selectedLayerIndex]}
+        onLayerSelect={this.onLayerSelect} />
     }
+
+    let filterName;
+    if(this.state.mapState.match(/^filter-/)) {
+      filterName = this.state.mapState.replace(/^filter-/, "");
+    }
+    const elementStyle = {};
+    if (filterName) {
+      elementStyle.filter = `url('#${filterName}')`;
+    };
+
+    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 })
   }
 
+  setModal(modalName, value) {
+    if(modalName === 'survey' && value === false) {
+      localStorage.setItem('survey', '');
+    }
+
+    this.setState({
+      isOpen: {
+        ...this.state.isOpen,
+        [modalName]: value
+      }
+    })
+  }
+
+  toggleModal(modalName) {
+    this.setModal(modalName, !this.state.isOpen[modalName]);
+  }
+
+  onChangeOpenlayersDebug = (key, value) => {
+    this.setState({
+      openlayersDebugOptions: {
+        ...this.state.openlayersDebugOptions,
+        [key]: value,
+      }
+    });
+  }
+
+  onChangeMaboxGlDebug = (key, value) => {
+    this.setState({
+      mapboxGlDebugOptions: {
+        ...this.state.mapboxGlDebugOptions,
+        [key]: value,
+      }
+    });
+  }
+
   render() {
     const layers = this.state.mapStyle.layers || []
     const selectedLayer = layers.length > 0 ? layers[this.state.selectedLayerIndex] : null
     const metadata = this.state.mapStyle.metadata || {}
 
     const toolbar = <Toolbar
+      renderer={this._getRenderer()}
+      mapState={this.state.mapState}
       mapStyle={this.state.mapStyle}
-      inspectModeEnabled={this.state.inspectModeEnabled}
+      inspectModeEnabled={this.state.mapState === "inspect"}
       sources={this.state.sources}
-      onStyleChanged={this.onStyleChanged.bind(this)}
+      onStyleChanged={this.onStyleChanged}
-      onStyleOpen={this.onStyleChanged.bind(this)}
+      onStyleOpen={this.onStyleChanged}
-      onInspectModeToggle={this.changeInspectMode.bind(this)}
+      onSetMapState={this.setMapState}
+      onToggleModal={this.toggleModal.bind(this)}
     />
 
     const layerList = <LayerList
-      onLayersChange={this.onLayersChange.bind(this)}
+      onMoveLayer={this.onMoveLayer}
-      onLayerSelect={this.onLayerSelect.bind(this)}
+      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}
@@ -282,11 +646,18 @@ 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}
-      onLayerChanged={this.onLayerChanged.bind(this)}
+      onMoveLayer={this.onMoveLayer}
-      onLayerIdChange={this.onLayerIdChange.bind(this)}
+      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
@@ -294,12 +665,60 @@ export default class App extends React.Component {
       infos={this.state.infos}
     /> : null
 
+
+    const modals = <div>
+      <DebugModal
+        renderer={this._getRenderer()}
+        mapboxGlDebugOptions={this.state.mapboxGlDebugOptions}
+        openlayersDebugOptions={this.state.openlayersDebugOptions}
+        onChangeMaboxGlDebug={this.onChangeMaboxGlDebug}
+        onChangeOpenlayersDebug={this.onChangeOpenlayersDebug}
+        isOpen={this.state.isOpen.debug}
+        onOpenToggle={this.toggleModal.bind(this, 'debug')}
+      />
+      <ShortcutsModal
+        ref={(el) => this.shortcutEl = el}
+        isOpen={this.state.isOpen.shortcuts}
+        onOpenToggle={this.toggleModal.bind(this, 'shortcuts')}
+      />
+      <SettingsModal
+        mapStyle={this.state.mapStyle}
+        onStyleChanged={this.onStyleChanged}
+        onChangeMetadataProperty={this.onChangeMetadataProperty}
+        isOpen={this.state.isOpen.settings}
+        onOpenToggle={this.toggleModal.bind(this, 'settings')}
+        openlayersDebugOptions={this.state.openlayersDebugOptions}
+      />
+      <ExportModal
+        mapStyle={this.state.mapStyle}
+        onStyleChanged={this.onStyleChanged}
+        isOpen={this.state.isOpen.export}
+        onOpenToggle={this.toggleModal.bind(this, 'export')}
+      />
+      <OpenModal
+        isOpen={this.state.isOpen.open}
+        onStyleOpen={this.openStyle}
+        onOpenToggle={this.toggleModal.bind(this, 'open')}
+      />
+      <SourcesModal
+        mapStyle={this.state.mapStyle}
+        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
       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,19 +4,25 @@ 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,
-    children: PropTypes.node
+    children: PropTypes.node,
+    disabled: PropTypes.bool,
   }
 
   render() {
-    return <a
+    return <button
       onClick={this.props.onClick}
+      disabled={this.props.disabled}
+      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

@@ -1,29 +1,19 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import FileReaderInput from 'react-file-reader-input'
 import classnames from 'classnames'
+import {detect} from 'detect-browser';
+
+import {MdFileDownload, MdOpenInBrowser, MdSettings, MdLayers, MdHelpOutline, MdFindInPage, MdAssignmentTurnedIn} from 'react-icons/md'
 
-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 logoImage from 'maputnik-design/logos/logo-color.svg'
-import SettingsModal from './modals/SettingsModal'
+import pkgJson from '../../package.json'
-import ExportModal from './modals/ExportModal'
+
-import SourcesModal from './modals/SourcesModal'
+
-import OpenModal from './modals/OpenModal'
+// This is required because of <https://stackoverflow.com/a/49846426>, there isn't another way to detect support that I'm aware of.
+const browser = detect();
+const colorAccessibilityFiltersEnabled = ['chrome', 'firefox'].indexOf(browser.name) > -1;
 
-import style from '../libs/style'
 
 class IconText extends React.Component {
   static propTypes = {
@@ -40,6 +30,7 @@ class ToolbarLink extends React.Component {
     className: PropTypes.string,
     children: PropTypes.node,
     href: PropTypes.string,
+    onToggleModal: PropTypes.func,
   }
 
   render() {
@@ -54,19 +45,59 @@ 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 ToolbarSelect extends React.Component {
+  static propTypes = {
+    children: PropTypes.node,
+    wdKey: PropTypes.string
+  }
+
+  render() {
+    return <div
+      className='maputnik-toolbar-select'
+      data-wd-key={this.props.wdKey}
+    >
+      {this.props.children}
+    </div>
+  }
+}
+
+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>
   }
 }
 
@@ -79,93 +110,125 @@ export default class Toolbar extends React.Component {
     onStyleOpen: PropTypes.func.isRequired,
     // 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,
+    onSetMapState: PropTypes.func,
+    mapState: PropTypes.string,
+    renderer: PropTypes.string,
   }
 
-  constructor(props) {
+  state = {
-    super(props)
+    isOpen: {
-    this.state = {
+      settings: false,
-      isOpen: {
+      sources: false,
-        settings: false,
+      open: false,
-        sources: false,
+      add: false,
-        open: false,
+      export: false,
-        add: false,
-        export: false,
-      }
     }
   }
 
-  toggleModal(modalName) {
+  handleSelection(val) {
-    this.setState({
+    this.props.onSetMapState(val);
-      isOpen: {
-        ...this.state.isOpen,
-        [modalName]: !this.state.isOpen[modalName]
-      }
-    })
   }
 
   render() {
+    const views = [
+      {
+        id: "map",
+        title: "Map",
+      },
+      {
+        id: "inspect",
+        title: "Inspect",
+        disabled: this.props.renderer !== 'mbgljs',
+      },
+      {
+        id: "filter-deuteranopia",
+        title: "Map (deuteranopia)",
+        disabled: !colorAccessibilityFiltersEnabled,
+      },
+      {
+        id: "filter-protanopia",
+        title: "Map (protanopia)",
+        disabled: !colorAccessibilityFiltersEnabled,
+      },
+      {
+        id: "filter-tritanopia",
+        title: "Map (tritanopia)",
+        disabled: !colorAccessibilityFiltersEnabled,
+      },
+      {
+        id: "filter-achromatopsia",
+        title: "Map (achromatopsia)",
+        disabled: !colorAccessibilityFiltersEnabled,
+      },
+    ];
+
+    const currentView = views.find((view) => {
+      return view.id === this.props.mapState;
+    });
+
     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
+        <div
-          href={"https://github.com/maputnik/editor"}
+          className="maputnik-toolbar-logo-container"
-          className="maputnik-toolbar-logo"
         >
-          <img src={logoImage} alt="Maputnik" />
+          <a className="maputnik-toolbar-skip" href="#skip-menu">
-          <h1>Maputnik</h1>
+            Skip navigation
-        </ToolbarLink>
+          </a>
+          <a
+            href="https://github.com/maputnik/editor"
+            rel="noopener noreferrer"
+            target="_blank"
+            className="maputnik-toolbar-logo"
+          >
+            <img src={logoImage} alt="Maputnik" />
+            <h1>
+              <span className="maputnik-toolbar-name">{pkgJson.name}</span>
+              <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 />
+            <MdOpenInBrowser />
             <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 />
+            <MdLayers />
-            <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 />
+            <MdSettings />
             <IconText>Style Settings</IconText>
           </ToolbarAction>
-          <ToolbarAction onClick={this.props.onInspectModeToggle}>
+
-            <InspectionIcon />
+          <ToolbarSelect wdKey="nav:inspect">
-            <IconText>
+            <MdFindInPage />
-              { this.props.inspectModeEnabled && <span>Map Mode</span> }
+            <IconText>View </IconText>
-              { !this.props.inspectModeEnabled && <span>Inspect Mode</span> }
+            <select onChange={(e) => this.handleSelection(e.target.value)} value={currentView.id}>
-            </IconText>
+              {views.map((item) => {
-          </ToolbarAction>
+                return (
+                  <option key={item.id} value={item.id} disabled={item.disabled}>
+                    {item.title}
+                  </option>
+                );
+              })}
+            </select>
+          </ToolbarSelect>
+
           <ToolbarLink href={"https://github.com/maputnik/editor/wiki"}>
-            <HelpIcon />
+            <MdHelpOutline />
             <IconText>Help</IconText>
           </ToolbarLink>
+          <ToolbarLinkHighlighted href={"https://gregorywolanski.typeform.com/to/cPgaSY"}>
+            <MdAssignmentTurnedIn />
+            <IconText>Take the Maputnik Survey</IconText>
+          </ToolbarLinkHighlighted>
         </div>
       </div>
     </div>

src/components/fields/ColorField.jsx

@@ -19,17 +19,14 @@ class ColorField extends React.Component {
     default: PropTypes.string,
   }
 
-  constructor(props) {
+  state = {
-    super(props)
+    pickerOpened: false
-    this.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 })
   }
 
@@ -60,6 +57,10 @@ class ColorField extends React.Component {
     }
   }
 
+  onChange (v) {
+    this.props.onChange(v === "" ? undefined : v);
+  }
+
   render() {
     const offset = this.calcPickerOffset()
     var currentColor = this.color.object()
@@ -85,7 +86,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',
@@ -105,14 +106,15 @@ 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)}
+        onClick={this.togglePicker}
         style={this.props.style}
         name={this.props.name}
         placeholder={this.props.default}
         value={this.props.value ? this.props.value : ""}
-        onChange={(e) => this.props.onChange(e.target.value)}
+        onChange={(e) => this.onChange(e.target.value)}
       />
     </div>
   }

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>
   }
 }

src/components/fields/FunctionSpecField.jsx

@@ -32,7 +32,17 @@ export default class FunctionSpecProperty  extends React.Component {
     ]),
   }
 
-  addStop() {
+  getFieldFunctionType(fieldSpec) {
+    if (fieldSpec.expression.interpolated) {
+      return "exponential"
+    }
+    if (fieldSpec.type === "number") {
+      return "interval"
+    }
+    return "categorical"
+  }
+
+  addStop = () => {
     const stops = this.props.value.stops.slice(0)
     const lastStop = stops[stops.length - 1]
     if (typeof lastStop[0] === "object") {
@@ -53,7 +63,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 +79,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,13 +89,15 @@ export default class FunctionSpecProperty  extends React.Component {
     this.props.onChange(this.props.fieldName, zoomFunc)
   }
 
-  makeDataFunction() {
+  makeDataFunction = () => {
+    const functionType = this.getFieldFunctionType(this.props.fieldSpec);
+    const stopValue = functionType === 'categorical' ? '' : 0;
     const dataFunc = {
       property: "",
-      type: "categorical",
+      type: functionType,
       stops: [
-        [{zoom: 6, value: 0}, this.props.value],
+        [{zoom: 6, value: stopValue}, this.props.value || stopValue],
-        [{zoom: 10, value: 0}, this.props.value]
+        [{zoom: 10, value: stopValue}, this.props.value || stopValue]
       ]
     }
     this.props.onChange(this.props.fieldName, dataFunc)
@@ -102,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)}
+          onDeleteStop={this.deleteStop}
-          onAddStop={this.addStop.bind(this)}
+          onAddStop={this.addStop}
         />
       )
     }
@@ -114,8 +126,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)}
+          onDeleteStop={this.deleteStop}
-          onAddStop={this.addStop.bind(this)}
+          onAddStop={this.addStop}
         />
       )
     }
@@ -126,13 +138,12 @@ export default class FunctionSpecProperty  extends React.Component {
           fieldName={this.props.fieldName}
           fieldSpec={this.props.fieldSpec}
           value={this.props.value}
-          onZoomClick={this.makeZoomFunction.bind(this)}
+          onZoomClick={this.makeZoomFunction}
-          onDataClick={this.makeDataFunction.bind(this)} 
+          onDataClick={this.makeDataFunction} 
         />
       )
     }
-
+    return <div className={propClass} data-wd-key={"spec-field:"+this.props.fieldName}>
-    return <div className={propClass}>
       {specField}
     </div>
   }

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}

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'
@@ -58,70 +57,80 @@ 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) {
+    function childNodes() {
-          return <MultiButtonInput
+      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
+        case 'enum':
-            {...commonProps}
+          const options = Object.keys(this.props.fieldSpec.values).map(v => [v, capitalize(v)])
-            options={options}
+
-          />
+          if(options.length <= 3 && optionsLabelLength(options) <= 20) {
-        }
+            return <MultiButtonInput
-      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}
+              options={options}
-              length={this.props.fieldSpec.length}
             />
           } else {
-            return <DynamicArrayInput
+            return <SelectInput
               {...commonProps}
-              type={this.props.fieldSpec.value}
+              options={options}
             />
           }
-        }
+        case 'formatted':
-      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

@@ -30,7 +30,7 @@ export default class DataProperty extends React.Component {
   }
 
   getFieldFunctionType(fieldSpec) {
-    if (fieldSpec.function === "interpolated") {
+    if (fieldSpec.expression.interpolated) {
       return "exponential"
     }
     if (fieldSpec.type === "number") {
@@ -39,8 +39,8 @@ export default class DataProperty extends React.Component {
     return "categorical"
   }
 
-  getDataFunctionTypes(functionType) {
+  getDataFunctionTypes(fieldSpec) {
-    if (functionType === "interpolated") {
+    if (fieldSpec.expression.interpolated) {
       return ["categorical", "interval", "exponential"]
     }
     else {
@@ -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 zoomLevel = typeof stop[0] === 'object' ? stop[0].zoom : undefined;
-      const dataLevel = stop[0].value
+      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="">
+      let zoomInput = null;
-        <div className="maputnik-data-spec-property-stop-edit">
+      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>
@@ -144,7 +150,7 @@ export default class DataProperty extends React.Component {
             <SelectInput
               value={this.props.value.type}
               onChange={propVal => this.changeDataProperty("type", propVal)}
-              options={this.getDataFunctionTypes(this.props.fieldSpec.function)}
+              options={this.getDataFunctionTypes(this.props.fieldSpec)}
             />
           </div>
         </div>

src/components/fields/_DeleteStopButton.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 
 import DocLabel from './DocLabel'
 import Button from '../Button'
-import DeleteIcon from 'react-icons/lib/md/delete'
+import {MdDelete} from 'react-icons/md'
 
 
 export default class DeleteStopButton extends React.Component {
@@ -17,7 +17,7 @@ export default class DeleteStopButton extends React.Component {
       onClick={this.props.onClick}
     >
       <DocLabel
-        label={<DeleteIcon />}
+        label={<MdDelete />}
         doc={"Remove zoom level stop."}
       />
     </Button>

src/components/fields/_FunctionButtons.jsx

@@ -3,8 +3,7 @@ import PropTypes from 'prop-types'
 
 import DocLabel from './DocLabel'
 import Button from '../Button'
-import FunctionIcon from 'react-icons/lib/md/functions'
+import {MdFunctions, MdInsertChart} from 'react-icons/md'
-import MdInsertChart from 'react-icons/lib/md/insert-chart'
 
 
 export default class FunctionButtons extends React.Component {
@@ -16,19 +15,19 @@ 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}
       >
         <DocLabel
-          label={<FunctionIcon />}
+          label={<MdFunctions />}
           cursorTargetStyle={{ cursor: 'pointer' }}
           doc={"Turn property into a zoom function to enable a map feature to change with map's zoom level."}
         />
       </Button>
 
-      if (this.props.fieldSpec['property-function'] && ['piecewise-constant', 'interpolated'].indexOf(this.props.fieldSpec['function']) !== -1) {
+      if (this.props.fieldSpec['property-type'] === 'data-driven') {
         makeDataButton = <Button
           className="maputnik-make-data-function"
           onClick={this.props.onDataClick}

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 {
     ]),
   }
 
-
+  state = {
-  constructor() {
+    refs: {}
-    super()
-    this.state = {
-      refs: {}
-    }
   }
 
-  componentWillMount() {
+  componentDidMount() {
-    this.setState({
+    const newRefs = setStopRefs(this.props, this.state);
-      refs: this.setStopRefs(this.props)
-    })
-  }
 
-  /**
-   * 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;
-  }
-
-  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

src/components/filter/FilterEditor.jsx

@@ -2,16 +2,13 @@ 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 {latest} from '@mapbox/mapbox-gl-style-spec'
 import DocLabel from '../fields/DocLabel'
 import SelectInput from '../inputs/SelectInput'
 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)
@@ -89,10 +86,10 @@ 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."}
+          doc={latest.layer.filter.doc + " Combine multiple filters together by using a compound filter."}
         />
         <SelectInput
           value={combiningOp}
@@ -103,8 +100,9 @@ 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)}>
+          onClick={this.addFilterItem}>
           Add filter
         </Button>
       </div>

src/components/filter/FilterEditorBlock.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import Button from '../Button'
-import DeleteIcon from 'react-icons/lib/md/delete'
+import {MdDelete} from 'react-icons/md'
 
 class FilterEditorBlock extends React.Component {
   static propTypes = {
@@ -16,7 +16,7 @@ class FilterEditorBlock extends React.Component {
           className="maputnik-delete-filter"
           onClick={this.props.onDelete}
         >
-          <DeleteIcon />
+          <MdDelete />
         </Button>
       </div>
       <div className="maputnik-filter-editor-block-content">

src/components/icons/LayerIcon.jsx

@@ -18,12 +18,13 @@ class LayerIcon extends React.Component {
     switch(this.props.type) {
       case 'fill-extrusion': return <BackgroundIcon {...iconProps} />
       case 'raster': return <FillIcon {...iconProps} />
+      case 'hillshade': return <FillIcon {...iconProps} />
+      case 'heatmap': return <FillIcon {...iconProps} />
       case 'fill': return <FillIcon {...iconProps} />
       case 'background': return <BackgroundIcon {...iconProps} />
       case 'line': return <LineIcon {...iconProps} />
       case 'symbol': return <SymbolIcon {...iconProps} />
       case 'circle': return <CircleIcon {...iconProps} />
-      default: return null
     }
   }
 }

src/components/inputs/AutocompleteInput.jsx

@@ -6,11 +6,21 @@ import Autocomplete from 'react-autocomplete'
 
 const MAX_HEIGHT = 140;
 
-class AutocompleteMenu extends React.Component {
+class AutocompleteInput extends React.Component {
   static propTypes = {
-    keepMenuWithinWindowBounds: PropTypes.bool,
+    value: PropTypes.string,
-    style: PropTypes.object,
+    options: PropTypes.array,
-    children: PropTypes.node
+    onChange: PropTypes.func,
+    keepMenuWithinWindowBounds: PropTypes.bool
+  }
+
+  state = {
+    maxHeight: MAX_HEIGHT
+  }
+
+  static defaultProps = {
+    onChange: () => {},
+    options: [],
   }
 
   calcMaxHeight() {
@@ -25,6 +35,7 @@ class AutocompleteMenu extends React.Component {
       }
     }
   }
+
   componentDidMount() {
     this.calcMaxHeight();
   }
@@ -33,81 +44,54 @@ class AutocompleteMenu extends React.Component {
     this.calcMaxHeight();
   }
 
-  constructor(props) {
+  onChange (v) {
-    super(props);
+    this.props.onChange(v === "" ? undefined : v);
-    this.state = {
-      maxHeight: MAX_HEIGHT
-    };
-  }
-
-  static defaultProps = {
-    style: {}
   }
 
   render() {
-    const maxHeight = this.state.maxHeight - this.props.style.marginBottom || 0;
+    return <div
-    const style = {
+      ref={(el) => {
-      maxHeight: maxHeight+"px"
+        this.autocompleteMenuEl = el;
-    }
+      }}
-
+    >
-    return (
+      <Autocomplete
-      <div
+        menuStyle={{
-        ref={(el) => {
+          position: "fixed",
-          this.autocompleteMenuEl = el;
+          overflow: "auto",
+          maxHeight: this.state.maxHeight,
+          zIndex: '998'
         }}
-        className={"maputnik-autocomplete-menu"}
+        wrapperProps={{
-        style={style}
+          className: "maputnik-autocomplete",
-      >
+          style: null
-        {this.props.children}
+        }}
-      </div>
+        inputProps={{
-    )
+          className: "maputnik-string",
-  }
+          spellCheck: false
-}
+        }}
-
+        value={this.props.value}
-class AutocompleteInput extends React.Component {
+        items={this.props.options}
-  static propTypes = {
+        getItemValue={(item) => item[0]}
-    value: PropTypes.string,
+        onSelect={v => this.onChange(v)}
-    options: PropTypes.array,
+        onChange={(e, v) => this.onChange(v)}
-    onChange: PropTypes.func,
+        shouldItemRender={(item, value="") => {
-    keepMenuWithinWindowBounds: PropTypes.bool
+          if (typeof(value) === "string") {
-  }
+            return item[0].toLowerCase().indexOf(value.toLowerCase()) > -1
-
+          }
-  static defaultProps = {
+        }}
-    onChange: () => {},
+        renderItem={(item, isHighlighted) => (
-    options: [],
+          <div
-  }
+            key={item[0]}
-
+            className={classnames({
-  render() {
+              "maputnik-autocomplete-menu-item": true,
-    return <Autocomplete
+              "maputnik-autocomplete-menu-item-selected": isHighlighted,
-      wrapperProps={{
+            })}
-        className: "maputnik-autocomplete",
+          >
-        style: null
+           {item[1]}
-      }}
+          </div>
-      renderMenu={(items) => {
+        )}
-        return <AutocompleteMenu keepMenuWithinWindowBounds={this.props.keepMenuWithinWindowBounds} style={{marginBottom: 4}}>
+      />
-          {items}
+    </div>
-        </AutocompleteMenu>
-      }}
-      inputProps={{
-        className: "maputnik-string"
-      }}
-      value={this.props.value}
-      items={this.props.options}
-      getItemValue={(item) => item[0]}
-      onSelect={v => this.props.onChange(v)}
-      onChange={(e, v) => this.props.onChange(v)}
-      renderItem={(item, isHighlighted) => (
-        <div
-          key={item[0]}
-          className={classnames({
-            "maputnik-autocomplete-menu-item": true,
-            "maputnik-autocomplete-menu-item-selected": isHighlighted,
-          })}
-        >
-         {item[1]}
-        </div>
-      )}
-    />
   }
 }
 

src/components/inputs/DynamicArrayInput.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import StringInput from './StringInput'
 import NumberInput from './NumberInput'
 import Button from '../Button'
-import DeleteIcon from 'react-icons/lib/md/delete'
+import {MdDelete} from 'react-icons/md'
 import DocLabel from '../fields/DocLabel'
 
 
@@ -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>
@@ -96,7 +95,7 @@ class DeleteValueButton extends React.Component {
       onClick={this.props.onClick}
     >
       <DocLabel
-        label={<DeleteIcon />}
+        label={<MdDelete />}
         doc={"Remove array entry."}
       />
     </Button>

src/components/inputs/FontInput.jsx

@@ -16,13 +16,25 @@ class FontInput extends React.Component {
   }
 
   get values() {
-   return this.props.value || this.props.default.slice(1) || []
+    const out = this.props.value || this.props.default.slice(1) || [""];
+
+    // Always put a "" in the last field to you can keep adding entries
+    if (out[out.length-1] !== ""){
+      return out.concat("");
+    }
+    else {
+      return out;
+    }
   }
 
   changeFont(idx, newValue) {
     const changedValues = this.values.slice(0)
     changedValues[idx] = newValue
-    this.props.onChange(changedValues)
+    const filteredValues = changedValues
+      .filter(v => v !== undefined)
+      .filter(v => v !== "")
+
+    this.props.onChange(filteredValues);
   }
 
   render() {

src/components/inputs/IconInput.jsx

@@ -5,7 +5,7 @@ import AutocompleteInput from './AutocompleteInput'
 
 class IconInput extends React.Component {
   static propTypes = {
-    value: PropTypes.array,
+    value: PropTypes.string,
     icons: PropTypes.array,
     style: PropTypes.object,
     onChange: PropTypes.func.isRequired,

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,
@@ -19,11 +20,12 @@ class InputBlock extends React.Component {
 
   onChange(e) {
     const value = e.target.value
-    return this.props.onChange(value === "" ? null: value)
+    return this.props.onChange(value === "" ? undefined : value)
   }
 
   render() {
     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

@@ -13,23 +13,28 @@ class NumberInput extends React.Component {
   constructor(props) {
     super(props)
     this.state = {
-      value: props.value
+      editing: false,
+      value: props.value,
     }
   }
 
-  componentWillReceiveProps(nextProps) {
+  static getDerivedStateFromProps(props, state) {
-    this.setState({ value: nextProps.value })
+    if (!state.editing) {
+      return {
+        value: props.value
+      };
+    }
   }
 
   changeValue(newValue) {
+    this.setState({editing: true});
     const value = parseFloat(newValue)
 
     const hasChanged = this.state.value !== value
     if(this.isValid(value) && hasChanged) {
       this.props.onChange(value)
-    } else {
-      this.setState({ value: newValue })
     }
+    this.setState({ value: newValue })
   }
 
   isValid(v) {
@@ -49,7 +54,8 @@ class NumberInput extends React.Component {
     return true
   }
 
-  resetValue() {
+  resetValue = () => {
+    this.setState({editing: false});
     // Reset explicitly to default value if value has been cleared
     if(this.state.value === "") {
       return this.changeValue(this.props.default)
@@ -67,11 +73,12 @@ class NumberInput extends React.Component {
 
   render() {
     return <input
+      spellCheck="false"
       className="maputnik-number"
       placeholder={this.props.default}
       value={this.state.value}
       onChange={e => this.changeValue(e.target.value)}
-      onBlur={this.resetValue.bind(this)}
+      onBlur={this.resetValue}
     />
   }
 }

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,
@@ -13,12 +14,17 @@ class StringInput extends React.Component {
   constructor(props) {
     super(props)
     this.state = {
+      editing: false,
       value: props.value || ''
     }
   }
 
-  componentWillReceiveProps(nextProps) {
+  static getDerivedStateFromProps(props, state) {
-    this.setState({ value: nextProps.value || '' })
+    if (!state.editing) {
+      return {
+        value: props.value
+      };
+    }
   }
 
   render() {
@@ -40,13 +46,23 @@ 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({
+          editing: true,
+          value: e.target.value
+        })
+      },
       onBlur: () => {
-        if(this.state.value!==this.props.value) this.props.onChange(this.state.value)
+        if(this.state.value!==this.props.value) {
+          this.setState({editing: false});
+          this.props.onChange(this.state.value);
+        }
       }
     });
   }

src/components/layers/Collapse.jsx

@@ -0,0 +1,34 @@
+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
+  }
+
+  static defaultProps = {
+    isActive: true
+  }
+
+  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/Collapser.jsx

@@ -1,7 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import CollapseOpenIcon from 'react-icons/lib/md/arrow-drop-down'
+import {MdArrowDropDown, MdArrowDropUp} from 'react-icons/md'
-import CollapseCloseIcon from 'react-icons/lib/md/arrow-drop-up'
 
 export default class Collapser extends React.Component {
   static propTypes = {
@@ -15,7 +14,7 @@ export default class Collapser extends React.Component {
       height: 20,
       ...this.props.style,
     }
-    return this.props.isCollapsed ? <CollapseCloseIcon style={iconStyle}/> : <CollapseOpenIcon style={iconStyle} />
+    return this.props.isCollapsed ? <MdArrowDropUp style={iconStyle}/> : <MdArrowDropDown style={iconStyle} />
   }
 }
 

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,20 +29,11 @@ class JSONEditor extends React.Component {
     }
   }
 
-  componentWillReceiveProps(nextProps) {
+  componentDidUpdate(prevProps) {
-    this.setState({
+    if (prevProps.layer !== this.props.layer) {
-      code: JSON.stringify(nextProps.layer, null, 2)
+      this.setState({
-    })
+        code: JSON.stringify(this.props.layer, null, 2)
-  }
+      })
-
-  shouldComponentUpdate(nextProps, nextState) {
-    try {
-      const parsedLayer = JSON.parse(this.state.code)
-      // If the structure is still the same do not update
-      // because it affects editing experience by reformatting all the time
-      return nextState.code !== JSON.stringify(parsedLayer, null, 2)
-    } catch(err) {
-      return true
     }
   }
 

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,11 @@ import CommentBlock from './CommentBlock'
 import LayerSourceBlock from './LayerSourceBlock'
 import LayerSourceLayerBlock from './LayerSourceLayerBlock'
 
-import InputBlock from '../inputs/InputBlock'
+import {MdMoreVert} from 'react-icons/md'
-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 = {
@@ -38,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. */
@@ -50,6 +45,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,18 +76,18 @@ export default class LayerEditor extends React.Component {
     this.state = { editorGroups }
   }
 
-  componentWillReceiveProps(nextProps) {
+  static getDerivedStateFromProps(props, state) {
-    const additionalGroups = { ...this.state.editorGroups }
+    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 () {
@@ -117,10 +119,16 @@ export default class LayerEditor extends React.Component {
       comment = this.props.layer.metadata['maputnik:comment']
     }
 
+    let sourceLayerIds;
+    if(this.props.sources.hasOwnProperty(this.props.layer.source)) {
+      sourceLayerIds = this.props.sources[this.props.layer.source].layers;
+    }
+
     switch(type) {
       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
@@ -133,8 +141,9 @@ export default class LayerEditor extends React.Component {
           onChange={v => this.changeProperty(null, 'source', v)}
         />
         }
-        {this.props.layer.type !== 'raster' && this.props.layer.type !== 'background' && <LayerSourceLayerBlock
+        {['background', 'raster', 'hillshade', 'heatmap'].indexOf(this.state.type) < 0 &&
-          sourceLayerIds={this.props.sources[this.props.layer.source].layers}
+        <LayerSourceLayerBlock
+          sourceLayerIds={sourceLayerIds}
           value={this.props.layer['source-layer']}
           onChange={v => this.changeProperty(null, 'source-layer', v)}
         />
@@ -171,16 +180,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]}
@@ -190,8 +206,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'>
+                <MdMoreVert 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}>
+      <Collapse isActive={this.props.isActive}>
-        {this.props.children}
+        <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 {latest} from '@mapbox/mapbox-gl-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={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,16 +1,12 @@
 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'
 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} from 'react-sortable-hoc';
-import {SortableContainer, SortableHandle, arrayMove} from 'react-sortable-hoc';
 
 const layerListPropTypes = {
   layers: PropTypes.array.isRequired,
@@ -39,54 +35,20 @@ function findClosestCommonPrefix(layers, idx) {
 }
 
 // List of collapsible layer editors
-@SortableContainer
 class LayerListContainer extends React.Component {
   static propTypes = {...layerListPropTypes}
   static defaultProps = {
     onLayerSelect: () => {},
   }
 
-  constructor(props) {
+  state = {
-    super(props)
+    collapsedGroups: {},
-    this.state = {
+    areAllGroupsExpanded: false,
-      collapsedGroups: {},
+    isOpen: {
-      areAllGroupsExpanded: false,
+      add: false,
-      isOpen: {
-        add: false,
-      }
     }
   }
 
-  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: {
@@ -96,7 +58,7 @@ class LayerListContainer extends React.Component {
     })
   }
 
-  toggleLayers() {
+  toggleLayers = () => {
     let idx=0
 
     let newGroups=[]
@@ -104,12 +66,12 @@ class LayerListContainer extends React.Component {
     this.groupedLayers().forEach(layers => {
       const groupPrefix = layerPrefix(layers[0].id)
       const lookupKey = [groupPrefix, idx].join('-')
-      
+
 
       if (layers.length > 1) {
         newGroups[lookupKey] = this.state.areAllGroupsExpanded
       }
-      
+
       layers.forEach((layer) => {
         idx += 1
       })
@@ -162,9 +124,10 @@ 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)}
+          isActive={!this.isCollapsed(groupPrefix, idx) || idx === this.props.selectedLayerIndex}
           onActiveToggle={this.toggleLayerGroup.bind(this, groupPrefix, idx)}
         />
         listItems.push(grp)
@@ -172,9 +135,10 @@ class LayerListContainer extends React.Component {
 
       layers.forEach((layer, idxInGroup) => {
         const groupIdx = findClosestCommonPrefix(this.props.layers, idx)
+
         const listItem = <LayerListItem
           className={classnames({
-            'maputnik-layer-list-item-collapsed': layers.length > 1 && this.isCollapsed(groupPrefix, groupIdx),
+            'maputnik-layer-list-item-collapsed': layers.length > 1 && this.isCollapsed(groupPrefix, groupIdx) && idx !== this.props.selectedLayerIndex,
             'maputnik-layer-list-item-group-last': idxInGroup == layers.length - 1 && layers.length > 1
           })}
           index={idx}
@@ -184,9 +148,9 @@ class LayerListContainer extends React.Component {
           visibility={(layer.layout || {}).visibility}
           isSelected={idx === this.props.selectedLayerIndex}
           onLayerSelect={this.props.onLayerSelect}
-          onLayerDestroy={this.onLayerDestroy.bind(this)}
+          onLayerDestroy={this.props.onLayerDestroy.bind(this)}
-          onLayerCopy={this.onLayerCopy.bind(this)}
+          onLayerCopy={this.props.onLayerCopy.bind(this)}
-          onLayerVisibilityToggle={this.onLayerVisibilityToggle.bind(this)}
+          onLayerVisibilityToggle={this.props.onLayerVisibilityToggle.bind(this)}
         />
         listItems.push(listItem)
         idx += 1
@@ -206,20 +170,22 @@ class LayerListContainer extends React.Component {
         <span className="maputnik-space" />
         <div className="maputnik-default-property">
           <div className="maputnik-multibutton">
-            <a 
+            <button
-              onClick={this.toggleLayers.bind(this)}
+              id="skip-menu"
+              onClick={this.toggleLayers}
               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>
@@ -230,21 +196,16 @@ class LayerListContainer extends React.Component {
   }
 }
 
+const LayerListContainerSortable = SortableContainer((props) => <LayerListContainer {...props} />)
+
 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
+    return <LayerListContainerSortable
       {...this.props}
-      onSortEnd={this.onSortEnd.bind(this)}
+      helperClass='sortableHelper'
+      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

@@ -1,61 +1,65 @@
 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'
+import {MdContentCopy, MdVisibility, MdVisibilityOff, MdDelete} from 'react-icons/md'
-import VisibilityIcon from 'react-icons/lib/md/visibility'
-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
-class LayerTypeDragHandle extends React.Component {
-  static propTypes = LayerIcon.propTypes
 
-  render() {
+const DraggableLabel = SortableHandle((props) => {
-    return <LayerIcon
+  return <div className="maputnik-layer-list-item-handle">
-      {...this.props}
+    <LayerIcon
-      style={{
+      className="layer-handle__icon"
-        cursor: 'move',
+      type={props.layerType}
-        width: 14,
-        height: 14,
-        paddingRight: 3,
-      }}
     />
-  }
+    <span className="maputnik-layer-list-item-id">{props.layerId}</span>
-}
+  </div>
+});
 
 class IconAction extends React.Component {
   static propTypes = {
     action: PropTypes.string.isRequired,
     onClick: PropTypes.func.isRequired,
+    wdKey: PropTypes.string,
+    classBlockName: PropTypes.string,
+    classBlockModifier: PropTypes.string,
   }
 
   renderIcon() {
     switch(this.props.action) {
-      case 'copy': return <CopyIcon />
+      case 'duplicate': return <MdContentCopy />
-      case 'show': return <VisibilityIcon />
+      case 'show': return <MdVisibility />
-      case 'hide': return <VisibilityOffIcon />
+      case 'hide': return <MdVisibilityOff />
-      case 'delete': return <DeleteIcon />
+      case 'delete': return <MdDelete />
-      default: return null
     }
   }
 
   render() {
-    return <a
+    const {classBlockName, classBlockModifier} = this.props;
-      className="maputnik-layer-list-icon-action"
+
+    let classAdditions = '';
+    if (classBlockName) {
+      classAdditions = `maputnik-layer-list-icon-action__${classBlockName}`;
+
+      if (classBlockModifier) {
+        classAdditions += ` maputnik-layer-list-icon-action__${classBlockName}--${classBlockModifier}`;
+      }
+    }
+
+    return <button
+      tabIndex="-1"
+      title={this.props.action}
+      className={`maputnik-layer-list-icon-action ${classAdditions}`}
+      data-wd-key={this.props.wdKey}
       onClick={this.props.onClick}
     >
       {this.renderIcon()}
-    </a>
+    </button>
   }
 }
 
-@SortableElement
 class LayerListItem extends React.Component {
   static propTypes = {
     layerId: PropTypes.string.isRequired,
@@ -89,31 +93,42 @@ class LayerListItem extends React.Component {
   }
 
   render() {
+    const visibilityAction = this.props.visibility === 'visible' ? 'show' : 'hide';
+
     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,
         [this.props.className]: true,
       })}>
-        <LayerTypeDragHandle type={this.props.layerType} />
+        <DraggableLabel {...this.props} />
-        <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'}
+          classBlockName="delete"
           onClick={e => this.props.onLayerDestroy(this.props.layerId)}
         />
         <IconAction
-          action={'copy'}
+          wdKey={"layer-list-item:"+this.props.layerId+":copy"}
+          action={'duplicate'}
+          classBlockName="duplicate"
           onClick={e => this.props.onLayerCopy(this.props.layerId)}
         />
         <IconAction
-          action={this.props.visibility === 'visible' ? 'hide' : 'show'}
+          wdKey={"layer-list-item:"+this.props.layerId+":toggle-visibility"}
+          action={visibilityAction}
+          classBlockName="visibility"
+          classBlockModifier={visibilityAction}
           onClick={e => this.props.onLayerVisibilityToggle(this.props.layerId)}
         />
     </li>
   }
 }
 
-export default LayerListItem;
+const LayerListItemSortable = SortableElement((props) => <LayerListItem {...props} />);
+
+export default LayerListItemSortable;

src/components/layers/LayerSourceBlock.jsx

@@ -1,15 +1,14 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec'
+import {latest} from '@mapbox/mapbox-gl-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 +19,9 @@ class LayerSourceBlock extends React.Component {
   }
 
   render() {
-    return <InputBlock label={"Source"} doc={styleSpec.latest.layer.source.doc}>
+    return <InputBlock label={"Source"} doc={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,8 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec'
+import {latest} from '@mapbox/mapbox-gl-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 +20,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={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 {latest} from '@mapbox/mapbox-gl-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={latest.layer.type.doc}
+      data-wd-key={this.props.wdKey}
+    >
       <SelectInput
         options={[
           ['background', 'Background'],
@@ -22,6 +25,8 @@ class LayerTypeBlock extends React.Component {
           ['raster', 'Raster'],
           ['circle', 'Circle'],
           ['fill-extrusion', 'Fill Extrusion'],
+          ['hillshade', 'Hillshade'],
+          ['heatmap', 'Heatmap'],
         ]}
         onChange={this.props.onChange}
         value={this.props.value}

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 {latest} from '@mapbox/mapbox-gl-style-spec'
 import InputBlock from '../inputs/InputBlock'
 import NumberInput from '../inputs/NumberInput'
 
@@ -12,13 +12,15 @@ class MaxZoomBlock extends React.Component {
   }
 
   render() {
-    return <InputBlock label={"Max Zoom"} doc={styleSpec.latest.layer.maxzoom.doc}>
+    return <InputBlock label={"Max Zoom"} doc={latest.layer.maxzoom.doc}
+      data-wd-key="max-zoom"
+    >
       <NumberInput
         value={this.props.value}
         onChange={this.props.onChange}
-        min={styleSpec.latest.layer.maxzoom.minimum}
+        min={latest.layer.maxzoom.minimum}
-        max={styleSpec.latest.layer.maxzoom.maximum}
+        max={latest.layer.maxzoom.maximum}
-        default={styleSpec.latest.layer.maxzoom.maximum}
+        default={latest.layer.maxzoom.maximum}
       />
     </InputBlock>
   }

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 {latest} from '@mapbox/mapbox-gl-style-spec'
 import InputBlock from '../inputs/InputBlock'
 import NumberInput from '../inputs/NumberInput'
 
@@ -12,13 +12,15 @@ class MinZoomBlock extends React.Component {
   }
 
   render() {
-    return <InputBlock label={"Min Zoom"} doc={styleSpec.latest.layer.minzoom.doc}>
+    return <InputBlock label={"Min Zoom"} doc={latest.layer.minzoom.doc}
+      data-wd-key="min-zoom"
+    >
       <NumberInput
         value={this.props.value}
         onChange={this.props.onChange}
-        min={styleSpec.latest.layer.minzoom.minimum}
+        min={latest.layer.minzoom.minimum}
-        max={styleSpec.latest.layer.minzoom.maximum}
+        max={latest.layer.minzoom.maximum}
-        default={styleSpec.latest.layer.minzoom.minimum}
+        default={latest.layer.minzoom.minimum}
       />
     </InputBlock>
   }

src/components/map/FeatureLayerPopup.jsx

@@ -1,22 +1,92 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import InputBlock from '../inputs/InputBlock'
-import StringInput from '../inputs/StringInput'
 import LayerIcon from '../icons/LayerIcon'
-
+import {latest, expression, function as styleFunction} from '@mapbox/mapbox-gl-style-spec'
 
 function groupFeaturesBySourceLayer(features) {
   const sources = {}
+
+  let returnedFeatures = {};
+
   features.forEach(feature => {
-    sources[feature.layer['source-layer']] = sources[feature.layer['source-layer']] || []
+    if(returnedFeatures.hasOwnProperty(feature.layer.id)) {
-    sources[feature.layer['source-layer']].push(feature)
+      returnedFeatures[feature.layer.id]++
+      
+      const featureObject = sources[feature.layer['source-layer']].find(f => f.layer.id === feature.layer.id)
+
+      featureObject.counter = returnedFeatures[feature.layer.id]
+    } else {
+      sources[feature.layer['source-layer']] = sources[feature.layer['source-layer']] || []
+      sources[feature.layer['source-layer']].push(feature)
+
+      returnedFeatures[feature.layer.id] = 1
+    }
   })
+
   return sources
 }
 
 class FeatureLayerPopup extends React.Component {
   static propTypes = {
-    features: PropTypes.array
+    onLayerSelect: PropTypes.func.isRequired,
+    features: PropTypes.array,
+    zoom: PropTypes.number,
+  }
+
+  _getFeatureColor(feature, zoom) {
+    // Guard because openlayers won't have this
+    if (!feature.layer.paint) {
+      return;
+    }
+
+    try {
+      const paintProps = feature.layer.paint;
+      let propName;
+
+      if(paintProps.hasOwnProperty("text-color") && paintProps["text-color"]) {
+        propName = "text-color";
+      }
+      else if (paintProps.hasOwnProperty("fill-color") && paintProps["fill-color"]) {
+        propName = "fill-color";
+      }
+      else if (paintProps.hasOwnProperty("line-color") && paintProps["line-color"]) {
+        propName = "line-color";
+      }
+      else if (paintProps.hasOwnProperty("fill-extrusion-color") && paintProps["fill-extrusion-color"]) {
+        propName = "fill-extrusion-color";
+      }
+
+      if(propName) {
+        const propertySpec = latest["paint_"+feature.layer.type][propName];
+
+        let color = feature.layer.paint[propName];
+
+        if(typeof(color) === "object") {
+          if(color.stops) {
+            color = styleFunction.convertFunction(color, propertySpec);
+          }
+
+          const exprResult = expression.createExpression(color, propertySpec);
+          const val = exprResult.value.evaluate({
+            zoom: zoom
+          }, feature);
+          return val.toString();
+        }
+        else {
+          return color;
+        }
+      }
+      else {
+        // Default color
+        return "black";
+      }
+    }
+    // This is quite complex, just incase there's an edgecase we're missing
+    // always return black if we get an unexpected error.
+    catch (err) {
+      console.error("Unable to get feature color, error:", err);
+      return "black";
+    }
   }
 
   render() {
@@ -24,17 +94,33 @@ class FeatureLayerPopup extends React.Component {
 
     const items = Object.keys(sources).map(vectorLayerId => {
       const layers = sources[vectorLayerId].map((feature, idx) => {
-        return <label
+        const featureColor = this._getFeatureColor(feature, this.props.zoom);
-          key={idx}
+
-          className="maputnik-popup-layer"
+        return <div
+            key={idx}
+            className="maputnik-popup-layer"
         >
-          <LayerIcon type={feature.layer.type} style={{
+          <div
-            width: 14,
+            className="maputnik-popup-layer__swatch" 
-            height: 14,
+            style={{background: featureColor}}
-            paddingRight: 3
+          ></div>
-          }}/>
+          <label
-          {feature.layer.id}
+            className="maputnik-popup-layer__label"
-        </label>
+            onClick={() => {
+              this.props.onLayerSelect(feature.layer.id)
+            }}
+          >
+            {feature.layer.type && 
+              <LayerIcon type={feature.layer.type} style={{
+                width: 14,
+                height: 14,
+                paddingRight: 3
+              }}/>
+            }
+            {feature.layer.id}
+            {feature.counter && <span> × {feature.counter}</span>}
+          </label>
+        </div>
       })
       return <div key={vectorLayerId}>
         <div className="maputnik-popup-layer-id">{vectorLayerId}</div>

src/components/map/FeaturePropertyPopup.jsx

@@ -22,8 +22,8 @@ function renderProperties(feature) {
 }
 
 function renderFeature(feature) {
-  return <div key={feature.id}>
+  return <div key={`${feature.sourceLayer}-${feature.id}`}>
-    <div className="maputnik-popup-layer-id">{feature.layer['source-layer']}</div>
+    <div className="maputnik-popup-layer-id">{feature.layer['source-layer']}{feature.inspectModeCounter && <span> × {feature.inspectModeCounter}</span>}</div>
     <InputBlock key={"property-type"} label={"$type"}>
       <StringInput value={feature.geometry.type} style={{backgroundColor: 'transparent'}} />
     </InputBlock>
@@ -31,13 +31,36 @@ function renderFeature(feature) {
   </div>
 }
 
+function removeDuplicatedFeatures(features) {
+  let uniqueFeatures = [];
+
+  features.forEach(feature => {
+    const featureIndex = uniqueFeatures.findIndex(feature2 => {
+      return feature.layer['source-layer'] === feature2.layer['source-layer'] 
+        && JSON.stringify(feature.properties) === JSON.stringify(feature2.properties)
+    })
+
+    if(featureIndex === -1) {
+      uniqueFeatures.push(feature)
+    } else {
+      if(uniqueFeatures[featureIndex].hasOwnProperty('inspectModeCounter')) {
+        uniqueFeatures[featureIndex].inspectModeCounter++
+      } else {
+        uniqueFeatures[featureIndex].inspectModeCounter = 2
+      }
+    }
+  })
+
+  return uniqueFeatures
+}
+
 class FeaturePropertyPopup extends React.Component {
   static propTypes = {
     features: PropTypes.array
   }
 
   render() {
-    const features = this.props.features
+    const features = removeDuplicatedFeatures(this.props.features)
     return <div className="maputnik-feature-property-popup">
       {features.map(renderFeature)}
     </div>

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,16 +14,13 @@ import 'mapbox-gl/dist/mapbox-gl.css'
 import '../../mapboxgl.css'
 import '../../libs/mapbox-rtl'
 
-function renderLayerPopup(features) {
-  var mountNode = document.createElement('div');
-  ReactDOM.render(<FeatureLayerPopup features={features} />, mountNode)
-  return mountNode.innerHTML;
-}
 
-function renderPropertyPopup(features) {
+const IS_SUPPORTED = MapboxGl.supported();
-  var mountNode = document.createElement('div');
+
-  ReactDOM.render(<FeaturePropertyPopup features={features} />, mountNode)
+function renderPopup(popup, mountNode) {
-  return mountNode.innerHTML;
+  ReactDOM.render(popup, mountNode);
+  var content = mountNode.innerHTML;
+  return content;
 }
 
 function buildInspectStyle(originalMapStyle, coloredLayers, highlightedLayer) {
@@ -44,7 +40,7 @@ function buildInspectStyle(originalMapStyle, coloredLayers, highlightedLayer) {
   const sources = {}
   Object.keys(originalMapStyle.sources).forEach(sourceId => {
     const source = originalMapStyle.sources[sourceId]
-    if(source.type !== 'raster') {
+    if(source.type !== 'raster' && source.type !== 'raster-dem') {
       sources[sourceId] = source
     }
   })
@@ -60,15 +56,19 @@ function buildInspectStyle(originalMapStyle, coloredLayers, highlightedLayer) {
 export default class MapboxGlMap extends React.Component {
   static propTypes = {
     onDataChange: PropTypes.func,
+    onLayerSelect: PropTypes.func.isRequired,
     mapStyle: PropTypes.object.isRequired,
     inspectModeEnabled: PropTypes.bool.isRequired,
     highlightedLayer: PropTypes.object,
+    options: PropTypes.object,
   }
 
   static defaultProps = {
     onMapLoaded: () => {},
     onDataChange: () => {},
+    onLayerSelect: () => {},
     mapboxAccessToken: tokens.mapbox,
+    options: {},
   }
 
   constructor(props) {
@@ -77,46 +77,78 @@ export default class MapboxGlMap extends React.Component {
     this.state = {
       map: null,
       inspect: null,
-      isPopupOpen: false,
-      popupX: 0,
-      popupY: 0,
     }
   }
 
-  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})
     }
   }
 
+  shouldComponentUpdate(nextProps, nextState) {
+    let should = false;
+    try {
+      should = JSON.stringify(this.props) !== JSON.stringify(nextProps) || JSON.stringify(this.state) !== JSON.stringify(nextState);
+    } catch(e) {
+      // no biggie, carry on
+    }
+    return should;
+  }
+
   componentDidUpdate(prevProps) {
+    if(!IS_SUPPORTED) return;
+
+    const map = this.state.map;
+
+    this.updateMapFromProps(this.props);
+
     if(this.props.inspectModeEnabled !== prevProps.inspectModeEnabled) {
       this.state.inspect.toggleInspector()
     }
     if(this.props.inspectModeEnabled) {
       this.state.inspect.render()
     }
+
+    if (map) {
+      map.showTileBoundaries = this.props.options.showTileBoundaries;
+      map.showCollisionBoxes = this.props.options.showCollisionBoxes;
+      map.showOverdrawInspector = this.props.options.showOverdrawInspector;
+    }
   }
 
   componentDidMount() {
-    const map = new MapboxGl.Map({
+    if(!IS_SUPPORTED) return;
+
+    const mapOpts = {
+      ...this.props.options,
       container: this.container,
       style: this.props.mapStyle,
       hash: true,
-    })
+    }
+
+    const map = new MapboxGl.Map(mapOpts);
+
+    map.showTileBoundaries = mapOpts.showTileBoundaries;
+    map.showCollisionBoxes = mapOpts.showCollisionBoxes;
+    map.showOverdrawInspector = mapOpts.showOverdrawInspector;
 
     const zoom = new ZoomControl;
     map.addControl(zoom, 'top-right');
 
-    const nav = new MapboxGl.NavigationControl();
+    const nav = new MapboxGl.NavigationControl({visualizePitch:true});
     map.addControl(nav, 'top-right');
 
+    const tmpNode = document.createElement('div');
+
     const inspect = new MapboxInspect({
       popup: new MapboxGl.Popup({
         closeOnClick: false
@@ -125,22 +157,30 @@ 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()
       },
       buildInspectStyle: (originalMapStyle, coloredLayers) => buildInspectStyle(originalMapStyle, coloredLayers, this.props.highlightedLayer),
       renderPopup: features => {
         if(this.props.inspectModeEnabled) {
-          return renderPropertyPopup(features)
+          return renderPopup(<FeaturePropertyPopup features={features} />, tmpNode);
         } else {
-          return renderLayerPopup(features)
+          return renderPopup(<FeatureLayerPopup features={features} onLayerSelect={this.props.onLayerSelect} zoom={this.state.zoom} />, tmpNode);
         }
       }
     })
     map.addControl(inspect)
 
     map.on("style.load", () => {
-      this.setState({ map, inspect });
+      this.setState({
+        map,
+        inspect,
+        zoom: map.getZoom()
+      });
+      if(this.props.inspectModeEnabled) {
+        inspect.toggleInspector();
+      }
     })
 
     map.on("data", e => {
@@ -149,12 +189,29 @@ export default class MapboxGlMap extends React.Component {
         map: this.state.map
       })
     })
+
+    map.on("zoom", e => {
+      this.setState({
+        zoom: map.getZoom()
+      });
+    })
   }
 
   render() {
-    return <div
+    if(IS_SUPPORTED) {
-      className="maputnik-map"
+      return <div
-      ref={x => this.container = x}
+        className="maputnik-map__map"
-    ></div>
+        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>
+    }
   }
 }

src/components/map/OpenLayers3Map.jsx

@@ -1,172 +0,0 @@
-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 'openlayers/dist/ol.css'
-
-function suitableVectorSource(mapStyle) {
-  const sources = Object.keys(mapStyle.sources)
-    .map(sourceId => {
-      return {
-        id: sourceId,
-        source: mapStyle.sources[sourceId]
-      }
-    })
-    .filter(({source}) => (source.type === 'vector' || source.type === 'geojson'))
-  return sources[0]
-}
-
-function toVectorLayer(source, tilegrid, cb) {
-  function newMVTLayer(tileUrl) {
-    const ol = require('openlayers')
-    return new ol.layer.VectorTile({
-      source: new ol.source.VectorTile({
-        format: new ol.format.MVT(),
-        tileGrid: tilegrid,
-        tilePixelRatio: 8,
-        url: tileUrl
-      })
-    })
-  }
-
-  function newGeoJSONLayer(sourceUrl) {
-    const ol = require('openlayers')
-    return new ol.layer.Vector({
-      source: new ol.source.Vector({
-        format: new ol.format.GeoJSON(),
-        url: sourceUrl
-      })
-    })
-  }
-  if (source.type === 'vector') {
-    if(!source.tiles) {
-      sourceFromTileJSON(source.url, tileSource => {
-        cb(newMVTLayer(tileSource.tiles[0]))
-      })
-    } else {
-      cb(newMVTLayer(source.tiles[0]))
-    }
-  } else if (source.type === 'geojson') {
-    cb(newGeoJSONLayer(source.data))
-  }
-}
-
-function sourceFromTileJSON(url, cb) {
-  loadJSON(url, null, tilejson => {
-    if(!tilejson) return
-    cb({
-      type: 'vector',
-      tiles: tilejson.tiles,
-      minzoom: tilejson.minzoom,
-      maxzoom: tilejson.maxzoom,
-    })
-  })
-}
-
-class OpenLayers3Map extends React.Component {
-  static propTypes = {
-    onDataChange: PropTypes.func,
-    mapStyle: PropTypes.object.isRequired,
-    accessToken: PropTypes.string,
-    style: PropTypes.object,
-  }
-
-  static defaultProps = {
-    onMapLoaded: () => {},
-    onDataChange: () => {},
-  }
-
-  constructor(props) {
-    super(props)
-    this.tilegrid = null
-    this.resolutions = null
-    this.layer = null
-    this.map = null
-  }
-
-  updateStyle(newMapStyle) {
-    const oldSource = suitableVectorSource(this.props.mapStyle)
-    const newSource = suitableVectorSource(newMapStyle)
-    const resolutions = this.resolutions
-
-      function setStyleFunc(map, layer) {
-        const olms = require('ol-mapbox-style')
-        const styleFunc = olms.getStyleFunction(newMapStyle, newSource.id, resolutions)
-        layer.setStyle(styleFunc)
-        //NOTE: We need to mark the source as changed in order
-        //to trigger a rerender
-        layer.getSource().changed()
-        map.render()
-    }
-
-    if(newSource) {
-      if(this.layer && !isEqual(oldSource, newSource)) {
-        this.map.removeLayer(this.layer)
-        this.layer = null
-      }
-
-      if(!this.layer) {
-        var self = this
-        toVectorLayer(newSource.source, this.tilegrid, vectorLayer => {
-          self.layer = vectorLayer
-          self.map.addLayer(self.layer)
-          setStyleFunc(self.map, self.layer)
-        })
-      } else {
-        setStyleFunc(this.map, this.layer)
-      }
-    }
-  }
-
-  componentWillReceiveProps(nextProps) {
-    require.ensure(["openlayers", "ol-mapbox-style"], () => {
-      if(!this.map || !this.resolutions) return
-      this.updateStyle(nextProps.mapStyle)
-    })
-  }
-
-  componentDidMount() {
-    //Load OpenLayers dynamically once we need it
-    //TODO: Make this more convenient
-    require.ensure(["openlayers", "ol-mapbox-style"], ()=> {
-      console.log('Loaded OpenLayers3 renderer')
-
-      const ol = require('openlayers')
-      const olms = require('ol-mapbox-style')
-
-      this.tilegrid = ol.tilegrid.createXYZ({tileSize: 512, maxZoom: 22})
-      this.resolutions = this.tilegrid.getResolutions()
-
-      const map = new ol.Map({
-        target: this.container,
-        layers: [],
-        view: new ol.View({
-          zoom: 2,
-          center: [52.5, -78.4]
-        })
-      })
-      map.addControl(new ol.control.Zoom())
-      this.map = map
-      this.updateStyle(this.props.mapStyle)
-    })
-  }
-
-  render() {
-    return <div
-      ref={x => this.container = x}
-      style={{
-        position: "fixed",
-        top: 40,
-        right: 0,
-        bottom: 0,
-        height: 'calc(100% - 40px)',
-        width: "75%",
-        backgroundColor: '#fff',
-        ...this.props.style,
-      }}>
-    </div>
-  }
-}
-
-export default OpenLayers3Map

src/components/map/OpenLayersMap.jsx

@@ -0,0 +1,167 @@
+import React from 'react'
+import {throttle} from 'lodash';
+import PropTypes from 'prop-types'
+import { loadJSON } from '../../libs/urlopen'
+
+import FeatureLayerPopup from './FeatureLayerPopup';
+
+import 'ol/ol.css'
+import {apply} from 'ol-mapbox-style';
+import {Map, View, Proj, Overlay} from 'ol';
+
+import {toLonLat} from 'ol/proj';
+import {toStringHDMS} from 'ol/coordinate';
+
+
+function renderCoords (coords) {
+  if (!coords || coords.length < 2) {
+    return null;
+  }
+  else {
+    return <span className="maputnik-coords">
+      {coords.map((coord) => String(coord).padStart(7, "\u00A0")).join(', ')}
+    </span>
+  }
+}
+
+export default class OpenLayersMap extends React.Component {
+  static propTypes = {
+    onDataChange: PropTypes.func,
+    mapStyle: PropTypes.object.isRequired,
+    accessToken: PropTypes.string,
+    style: PropTypes.object,
+    onLayerSelect: PropTypes.func.isRequired,
+    debugToolbox: PropTypes.bool.isRequired,
+  }
+
+  static defaultProps = {
+    onMapLoaded: () => {},
+    onDataChange: () => {},
+    onLayerSelect: () => {},
+  }
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      zoom: 0,
+      rotation: 0,
+      cursor: [],
+      center: [],
+    };
+    this.updateStyle = throttle(this._updateStyle.bind(this), 200);
+  }
+
+  _updateStyle(newMapStyle) {
+    if(!this.map) return;
+
+    // See <https://github.com/openlayers/ol-mapbox-style/issues/215#issuecomment-493198815>
+    this.map.getLayers().clear();
+    apply(this.map, newMapStyle);
+  }
+
+  componentDidUpdate(prevProps) {
+    if (this.props.mapStyle !== prevProps.mapStyle) {
+      this.updateStyle(this.props.mapStyle);
+    }
+  }
+
+  componentDidMount() {
+    this.overlay = new Overlay({
+      element: this.popupContainer,
+      autoPan: true,
+      autoPanAnimation: {
+        duration: 250
+      }
+    });
+
+    const map = new Map({
+      target: this.container,
+      overlays: [this.overlay],
+      view: new View({
+        zoom: 1,
+        center: [180, -90],
+      })
+    });
+
+    map.on('pointermove', (evt) => {
+      var coords = toLonLat(evt.coordinate);
+      this.setState({
+        cursor: [
+          coords[0].toFixed(2),
+          coords[1].toFixed(2)
+        ]
+      })
+    })
+
+    map.on('postrender', (evt) => {
+      const center = toLonLat(map.getView().getCenter());
+      this.setState({
+        center: [
+          center[0].toFixed(2),
+          center[1].toFixed(2),
+        ],
+        rotation: map.getView().getRotation().toFixed(2),
+        zoom: map.getView().getZoom().toFixed(2)
+      });
+    });
+
+
+
+    this.map = map;
+    this.updateStyle(this.props.mapStyle);
+  }
+
+  closeOverlay = (e) => {
+    e.target.blur();
+    this.overlay.setPosition(undefined);
+  }
+
+  render() {
+    return <div className="maputnik-ol-container">
+      <div
+        ref={x => this.popupContainer = x}
+        style={{background: "black"}}
+        className="maputnik-popup"
+      >
+        <button
+          className="mapboxgl-popup-close-button"
+          onClick={this.closeOverlay}
+          aria-label="Close popup"
+        >
+          ×
+        </button>
+        <FeatureLayerPopup
+          features={this.state.selectedFeatures || []}
+          onLayerSelect={this.props.onLayerSelect}
+        />
+      </div>
+      <div className="maputnik-ol-zoom">
+        Zoom level: {this.state.zoom}
+      </div>
+      {this.props.debugToolbox &&
+        <div className="maputnik-ol-debug">
+          <div>
+            <label>cursor: </label>
+            <span>{renderCoords(this.state.cursor)}</span>
+          </div>
+          <div>
+            <label>center: </label>
+            <span>{renderCoords(this.state.center)}</span>
+          </div>
+          <div>
+            <label>rotation: </label>
+            <span>{this.state.rotation}</span>
+          </div>
+        </div>
+      }
+      <div
+        className="maputnik-ol"
+        ref={x => this.container = x}
+        style={{
+          ...this.props.style,
+        }}>
+      </div>
+    </div>
+  }
+}
+

src/components/modals/AddModal.jsx

@@ -2,9 +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 SelectInput from '../inputs/SelectInput'
 import Modal from './Modal'
 
 import LayerTypeBlock from '../layers/LayerTypeBlock'
@@ -23,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,
@@ -56,13 +53,24 @@ class AddModal extends React.Component {
     }
   }
 
-  componentWillUpdate(nextProps, nextState) {
+  componentDidUpdate(prevProps, prevState) {
     // Check if source is valid for new type
-    const availableSources = this.getSources(nextState.type);
+    const oldType = prevState.type;
+    const newType = this.state.type;
+
+    const availableSourcesOld = this.getSources(oldType);
+    const availableSourcesNew = this.getSources(newType);
+
     if(
-      this.state.source !== ""
+      // Type has changed
-      && availableSources.indexOf(this.state.source) < 0
+      oldType !== newType
+      && prevState.source !== ""
+      // Was a valid source previously
+      && availableSourcesOld.indexOf(prevState.source) > -1
+      // And is not a valid source now
+      && availableSourcesNew.indexOf(this.state.source) < 0
     ) {
+      // Clear the source
       this.setState({
         source: ""
       });
@@ -83,15 +91,24 @@ class AddModal extends React.Component {
         "line",
         "symbol",
         "circle",
-        "fill-extrusion"
+        "fill-extrusion",
+        "heatmap"
       ],
       raster: [
         "raster"
+      ],
+      geojson: [
+        "fill",
+        "line",
+        "symbol",
+        "circle",
+        "fill-extrusion",
+        "heatmap"
       ]
     }
 
     for(let [key, val] of Object.entries(this.props.sources)) {
-      if(types[val.type].indexOf(type) > -1) {
+      if(types[val.type] && types[val.type].indexOf(type) > -1) {
         sources.push(key);
       }
     }
@@ -108,24 +125,30 @@ 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 })}
       />
       }
-      {this.state.type !== 'background' && this.state.type !== 'raster' &&
+      {['background', 'raster', 'hillshade', 'heatmap'].indexOf(this.state.type) < 0 &&
       <LayerSourceLayerBlock
         isFixed={true}
         sourceLayerIds={layers}
@@ -133,7 +156,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}
+        data-wd-key="add-layer"
+      >
         Add Layer
       </Button>
       </div>

src/components/modals/DebugModal.js

@@ -0,0 +1,53 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import Modal from './Modal'
+
+
+class DebugModal extends React.Component {
+  static propTypes = {
+    isOpen: PropTypes.bool.isRequired,
+    renderer: PropTypes.string.isRequired,
+    onChangeMaboxGlDebug: PropTypes.func.isRequired,
+    onChangeOpenlayersDebug: PropTypes.func.isRequired,
+    onOpenToggle: PropTypes.func.isRequired,
+    mapboxGlDebugOptions: PropTypes.object,
+    openlayersDebugOptions: PropTypes.object,
+  }
+
+  render() {
+    return <Modal
+      data-wd-key="debug-modal"
+      isOpen={this.props.isOpen}
+      onOpenToggle={this.props.onOpenToggle}
+      title={'Debug'}
+    >
+      <div className="maputnik-modal-section maputnik-modal-shortcuts">
+        {this.props.renderer === 'mbgljs' &&
+          <ul>
+            {Object.entries(this.props.mapboxGlDebugOptions).map(([key, val]) => {
+              return <li key={key}>
+                <label>
+                  <input type="checkbox" checked={val} onClick={(e) => this.props.onChangeMaboxGlDebug(key, e.target.checked)} /> {key}
+                </label>
+              </li>
+            })}
+          </ul>
+        }
+        {this.props.renderer === 'ol' &&
+          <ul>
+            {Object.entries(this.props.openlayersDebugOptions).map(([key, val]) => {
+              return <li key={key}>
+                <label>
+                  <input type="checkbox" checked={val} onClick={(e) => this.props.onChangeOpenlayersDebug(key, e.target.checked)} /> {key}
+                </label>
+              </li>
+            })}
+          </ul>
+        }
+      </div>
+    </Modal>
+  }
+}
+
+export default DebugModal;

src/components/modals/ExportModal.jsx

@@ -1,190 +1,18 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import Slugify from 'slugify'
 import { saveAs } from 'file-saver'
 
-import styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec'
+import {format} from '@mapbox/mapbox-gl-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'
-import MdFileDownload from 'react-icons/lib/md/file-download'
+import {MdFileDownload} from 'react-icons/md'
-import TiClipboard from 'react-icons/lib/ti/clipboard'
+import style from '../../libs/style'
-import style from '../../libs/style.js'
-import GitHub from 'github-api'
-import { CopyToClipboard } from 'react-copy-to-clipboard'
 
 
-class Gist extends React.Component {
-  static propTypes = {
-    mapStyle: PropTypes.object.isRequired,
-    onStyleChanged: PropTypes.func.isRequired,
-  }
-
-  constructor(props) {
-    super(props);
-    this.state = {
-      preview: false,
-      saving: false,
-      latestGist: null,
-    }
-  }
-
-  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 && (this.props.mapStyle.metadata || {})['maputnik:openmaptiles_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.43.0/mapbox-gl.css" />
-    <script src="https://api.mapbox.com/mapbox-gl-js/v0.43.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>
-        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: true,
-      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
-    })
-  }
-
-  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>
-      {' '}
-      <CheckboxInput
-        value={this.state.preview}
-        name='gist-style-preview'
-        onChange={this.onPreviewChange.bind(this)}
-      />
-      <span> Include preview</span>
-      {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>
-            <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 }
@@ -209,12 +37,36 @@ class ExportModal extends React.Component {
   }
 
   downloadStyle() {
-    const blob = new Blob([styleSpec.format(stripAccessTokens(this.props.mapStyle))], {type: "application/json;charset=utf-8"});
+    const tokenStyle = format(stripAccessTokens(style.replaceAccessTokens(this.props.mapStyle)));
-    saveAs(blob, this.props.mapStyle.id + ".json");
+
+    const blob = new Blob([tokenStyle], {type: "application/json;charset=utf-8"});
+    let exportName;
+    if(this.props.mapStyle.name) {
+      exportName = Slugify(this.props.mapStyle.name, {
+                     replacement: '_',
+                     lower: true
+                   })
+    } else {
+      exportName = this.props.mapStyle.id
+    }
+    saveAs(blob, exportName + ".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'}
@@ -225,16 +77,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">
-        <h4>Save style</h4>
-        <Gist mapStyle={this.props.mapStyle} onStyleChanged={this.props.onStyleChanged}/>
-      </div>
     </Modal>
   }
 }

src/components/modals/LoadingModal.jsx

@@ -0,0 +1,45 @@
+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,
+  }
+
+  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,72 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import CloseIcon from 'react-icons/lib/md/close'
+import {MdClose} from 'react-icons/md'
-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
+  }
+
+  // See <https://github.com/maputnik/editor/issues/416>
+  onClose = () => {
+    if (document.activeElement) {
+      document.activeElement.blur();
+    }
+
+    setImmediate(() => {
+      this.props.onOpenToggle(false);
+    });
+  }
+
+  getApplicationNode() {
+    return document.getElementById('app');
   }
 
   render() {
-    return <Overlay isOpen={this.props.isOpen}>
+    if(this.props.isOpen) {
-      <div className="maputnik-modal">
+      return <AriaModal
-        <header className="maputnik-modal-header">
+        titleText={this.props.title}
-          <h1 className="maputnik-modal-header-title">{this.props.title}</h1>
+        underlayClickExits={this.props.underlayClickExits}
-          <span className="maputnik-modal-header-space"></span>
+        underlayProps={this.props.underlayProps}
-          <a className="maputnik-modal-header-toggle"
+        getApplicationNode={this.getApplicationNode}
-            onClick={() => this.props.onOpenToggle(false)}
+        data-wd-key={this.props["data-wd-key"]}
-          >
+        verticallyCenter={true}
-            <CloseIcon />
+        onExit={this.onClose}
-          </a>
+      >
-        </header>
+        <div className="maputnik-modal"
-        <div className="maputnik-modal-scroller">
+          data-wd-key={this.props["data-wd-key"]}
-          <div className="maputnik-modal-content">{this.props.children}</div>
+        >
+          <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.onClose}
+              data-wd-key={this.props["data-wd-key"]+".close-modal"}
+            >
+              <MdClose />
+            </button>
+          </header>
+          <div className="maputnik-modal-scroller">
+            <div className="maputnik-modal-content">{this.props.children}</div>
+          </div>
         </div>
-      </div>
+      </AriaModal>
-    </Overlay>
+    }
+    else {
+      return false;
+    }
   }
 }
 

src/components/modals/OpenModal.jsx

@@ -1,12 +1,12 @@
 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'
-import request from 'request'
 
-import FileUploadIcon from 'react-icons/lib/md/file-upload'
+import {MdFileUpload} from 'react-icons/md'
-import AddIcon from 'react-icons/lib/md/add-circle-outline'
+import {MdAddCircleOutline} from 'react-icons/md'
 
 import style from '../../libs/style.js'
 import publicStyles from '../../config/styles.json'
@@ -23,18 +23,20 @@ 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">
           <h4>{this.props.title}</h4>
           <span className="maputnik-space" />
-          <AddIcon />
+          <MdAddCircleOutline />
         </header>
-        <img
+        <div
           className="maputnik-public-style-thumbnail"
-          src={this.props.thumbnailUrl}
+          style={{
-          alt={this.props.title}
+            backgroundImage: `url(${this.props.thumbnailUrl})`
-        />
+          }}
+        ></div>
       </Button>
     </div>
   }
@@ -49,7 +51,9 @@ class OpenModal extends React.Component {
 
   constructor(props) {
     super(props);
-    this.state = {};
+    this.state = {
+      styleUrl: ""
+    };
   }
 
   clearError() {
@@ -58,30 +62,72 @@ class OpenModal extends React.Component {
     })
   }
 
-  onStyleSelect(styleUrl) {
+  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({
+    let canceled;
-      url: styleUrl,
+
-      withCredentials: false,
+    const activeRequest = fetch(styleUrl, {
-    }, (error, response, body) => {
+      mode: 'cors',
-        if (!error && response.statusCode == 200) {
+      credentials: "same-origin"
-          const mapStyle = style.ensureStyleValidity(JSON.parse(body))
+    })
-          console.log('Loaded style ', mapStyle.id)
+    .then(function(response) {
-          this.props.onStyleOpen(mapStyle)
+      return response.json();
-          this.onOpenToggle()
+    })
-        } else {
+    .then((body) => {
-          console.warn('Could not open the style URL', styleUrl)
+      if(canceled) {
+        return;
+      }
+
+      this.setState({
+        activeRequest: null,
+        activeRequestUrl: null
+      });
+
+      const mapStyle = style.ensureStyleValidity(body)
+      console.log('Loaded style ', mapStyle.id)
+      this.props.onStyleOpen(mapStyle)
+      this.onOpenToggle()
+    })
+    .catch((err) => {
+      this.setState({
+        error: `Failed to load: '${styleUrl}'`,
+        activeRequest: null,
+        activeRequestUrl: null
+      });
+      console.error(err);
+      console.warn('Could not open the style URL', styleUrl)
+    })
+
+    this.setState({
+      activeRequest: {
+        abort: function() {
+          canceled = true;
         }
+      },
+      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();
 
@@ -107,10 +153,19 @@ class OpenModal extends React.Component {
   }
 
   onOpenToggle() {
+    this.setState({
+      styleUrl: ""
+    });
     this.clearError();
     this.props.onOpenToggle();
   }
 
+  onChangeUrl = () => {
+    this.setState({
+      styleUrl: this.styleUrlElement.value
+    });
+  }
+
   render() {
     const styleOptions = publicStyles.map(style => {
       return <PublicStyle
@@ -118,7 +173,7 @@ class OpenModal extends React.Component {
         url={style.url}
         title={style.title}
         thumbnailUrl={style.thumbnail}
-        onSelect={this.onStyleSelect.bind(this)}
+        onSelect={this.onStyleSelect}
       />
     })
 
@@ -132,41 +187,66 @@ class OpenModal extends React.Component {
       );
     }
 
-    return <Modal
+    return  (
-      isOpen={this.props.isOpen}
+      <div>
-      onOpenToggle={() => this.onOpenToggle()}
+        <Modal
-      title={'Open Style'}
+          data-wd-key="open-modal"
-    >
+          isOpen={this.props.isOpen}
-      {errorElement}
+          onOpenToggle={() => this.onOpenToggle()}
-      <section className="maputnik-modal-section">
+          title={'Open Style'}
-        <h2>Upload Style</h2>
+        >
-        <p>Upload a JSON style from your computer.</p>
+          {errorElement}
-        <FileReaderInput onChange={this.onUpload.bind(this)}>
+          <section className="maputnik-modal-section">
-          <Button className="maputnik-upload-button"><FileUploadIcon /> Upload</Button>
+            <h2>Upload Style</h2>
-        </FileReaderInput>
+            <p>Upload a JSON style from your computer.</p>
-      </section>
+            <FileReaderInput onChange={this.onUpload} tabIndex="-1">
+              <Button className="maputnik-upload-button"><MdFileUpload /> Upload</Button>
+            </FileReaderInput>
+          </section>
 
-      <section className="maputnik-modal-section">
+          <section className="maputnik-modal-section">
-        <h2>Load from URL</h2>
+            <h2>Load from URL</h2>
-        <p>
+            <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>.
+              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>
+            </p>
-        <input type="text" ref={(input) => this.styleUrlElement = input} className="maputnik-input" placeholder="Enter URL..."/>
+            <input
-        <div>
+              data-wd-key="open-modal.url.input"
-          <Button className="maputnik-big-button" onClick={this.onOpenUrl.bind(this)}>Open URL</Button>
+              type="text"
-        </div>
+              ref={(input) => this.styleUrlElement = input}
-      </section>
+              className="maputnik-input"
+              placeholder="Enter URL..."
+              value={this.state.styleUrl}
+              onChange={this.onChangeUrl}
+            />
+            <div>
+              <Button
+                data-wd-key="open-modal.url.button"
+                className="maputnik-big-button"
+                onClick={this.onOpenUrl}
+                disabled={this.state.styleUrl.length < 1}
+              >Open URL</Button>
+            </div>
+          </section>
 
-      <section className="maputnik-modal-section maputnik-modal-section--shrink">
+          <section className="maputnik-modal-section maputnik-modal-section--shrink">
-        <h2>Gallery Styles</h2>
+            <h2>Gallery Styles</h2>
-        <p>
+            <p>
-          Open one of the publicly available styles to start from.
+              Open one of the publicly available styles to start from.
-        </p>
+            </p>
-        <div className="maputnik-style-gallery-container">
+            <div className="maputnik-style-gallery-container">
-        {styleOptions}
+            {styleOptions}
-        </div>
+            </div>
-      </section>
+          </section>
-    </Modal>
+        </Modal>
+
+        <LoadingModal
+          isOpen={!!this.state.activeRequest}
+          title={'Loading style'}
+          onCancel={(e) => this.onCancelActiveRequest(e)}
+          message={"Loading: "+this.state.activeRequestUrl}
+        />
+      </div>
+    )
   }
 }
 

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 {latest} from '@mapbox/mapbox-gl-style-spec'
 import InputBlock from '../inputs/InputBlock'
 import StringInput from '../inputs/StringInput'
 import SelectInput from '../inputs/SelectInput'
@@ -11,14 +11,11 @@ class SettingsModal extends React.Component {
   static propTypes = {
     mapStyle: PropTypes.object.isRequired,
     onStyleChanged: PropTypes.func.isRequired,
+    onChangeMetadataProperty: PropTypes.func.isRequired,
     isOpen: PropTypes.bool.isRequired,
     onOpenToggle: PropTypes.func.isRequired,
   }
 
-  constructor(props) {
-    super(props);
-  }
-
   changeStyleProperty(property, value) {
     const changedStyle = {
       ...this.props.mapStyle,
@@ -27,47 +24,42 @@ class SettingsModal extends React.Component {
     this.props.onStyleChanged(changedStyle)
   }
 
-  changeMetadataProperty(property, value) {
-    const changedStyle = {
-      ...this.props.mapStyle,
-      metadata: {
-        ...this.props.mapStyle.metadata,
-        [property]: value
-      }
-    }
-    this.props.onStyleChanged(changedStyle)
-  }
-
   render() {
     const metadata = this.props.mapStyle.metadata || {}
+    const {onChangeMetadataProperty} = this.props;
     const inputProps = { }
     return <Modal
+      data-wd-key="modal-settings"
       isOpen={this.props.isOpen}
       onOpenToggle={this.props.onOpenToggle}
       title={'Style Settings'}
     >
       <div style={{minWidth: 350}}>
-      <InputBlock label={"Name"} doc={styleSpec.latest.$root.name.doc}>
+      <InputBlock label={"Name"} doc={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}>
+      <InputBlock label={"Sprite URL"} doc={latest.$root.sprite.doc}>
         <StringInput {...inputProps}
+          data-wd-key="modal-settings.sprite" 
           value={this.props.mapStyle.sprite}
           onChange={this.changeStyleProperty.bind(this, "sprite")}
         />
       </InputBlock>
 
-      <InputBlock label={"Glyphs URL"} doc={styleSpec.latest.$root.glyphs.doc}>
+      <InputBlock label={"Glyphs URL"} doc={latest.$root.glyphs.doc}>
         <StringInput {...inputProps}
+          data-wd-key="modal-settings.glyphs" 
           value={this.props.mapStyle.glyphs}
           onChange={this.changeStyleProperty.bind(this, "glyphs")}
         />
@@ -75,28 +67,40 @@ 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")}
+          onChange={onChangeMetadataProperty.bind(this, "maputnik:mapbox_access_token")}
         />
       </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']}
-          onChange={this.changeMetadataProperty.bind(this, "maputnik:openmaptiles_access_token")}
+          onChange={onChangeMetadataProperty.bind(this, "maputnik:openmaptiles_access_token")}
+        />
+      </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={onChangeMetadataProperty.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'],
+            ['ol', 'Open Layers (experimental)'],
           ]}
           value={metadata['maputnik:renderer'] || 'mbgljs'}
-          onChange={this.changeMetadataProperty.bind(this, 'maputnik:renderer')}
+          onChange={onChangeMetadataProperty.bind(this, 'maputnik:renderer')}
         />
       </InputBlock>
+
       </div>
     </Modal>
   }

src/components/modals/ShortcutsModal.jsx

@@ -0,0 +1,72 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import Modal from './Modal'
+
+
+class ShortcutsModal extends React.Component {
+  static propTypes = {
+    isOpen: PropTypes.bool.isRequired,
+    onOpenToggle: PropTypes.func.isRequired,
+  }
+
+  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"
+      },
+      {
+        key: "!",
+        text: "Debug modal"
+      },
+    ]
+
+
+    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 {latest} from '@mapbox/mapbox-gl-style-spec'
 import Modal from './Modal'
 import Button from '../Button'
 import InputBlock from '../inputs/InputBlock'
@@ -12,8 +12,7 @@ import style from '../../libs/style'
 import { deleteSource, addSource, changeSource } from '../../libs/source'
 import publicSources from '../../config/tilesets.json'
 
-import AddIcon from 'react-icons/lib/md/add-circle-outline'
+import {MdAddCircleOutline, MdDelete} from 'react-icons/md'
-import DeleteIcon from 'react-icons/lib/md/delete'
 
 class PublicSource extends React.Component {
   static propTypes = {
@@ -34,7 +33,7 @@ class PublicSource extends React.Component {
 					<p className="maputnik-public-source-id">#{this.props.id}</p>
 				</div>
 				<span className="maputnik-space" />
-				<AddIcon />
+				<MdAddCircleOutline />
 			</Button>
     </div>
   }
@@ -45,6 +44,10 @@ function editorMode(source) {
     if(source.tiles) return 'tilexyz_raster'
     return 'tilejson_raster'
   }
+  if(source.type === 'raster-dem') {
+    if(source.tiles) return 'tilexyz_raster-dem'
+    return 'tilejson_raster-dem'
+  }
   if(source.type === 'vector') {
     if(source.tiles) return 'tilexyz_vector'
     return 'tilejson_vector'
@@ -72,7 +75,7 @@ class ActiveSourceTypeEditor extends React.Component {
           onClick={()=> this.props.onDelete(this.props.sourceId)}
           style={{backgroundColor: 'transparent'}}
         >
-          <DeleteIcon />
+          <MdDelete />
         </Button>
       </div>
       <div className="maputnik-active-source-type-editor-content">
@@ -127,6 +130,16 @@ class AddSource extends React.Component {
         minzoom: source.minzoom || 0,
         maxzoom: source.maxzoom || 14
       }
+      case 'tilejson_raster-dem': return {
+        type: 'raster-dem',
+        url: source.url || 'http://localhost:3000/tilejson.json'
+      }
+      case 'tilexyz_raster-dem': return {
+        type: 'raster-dem',
+        tiles: source.tiles || ['http://localhost:3000/{x}/{y}/{z}.pbf'],
+        minzoom: source.minzoom || 0,
+        maxzoom: source.maxzoom || 14
+      }
       default: return {}
     }
   }
@@ -139,7 +152,7 @@ class AddSource extends React.Component {
           onChange={v => this.setState({ sourceId: v})}
         />
       </InputBlock>
-      <InputBlock label={"Source Type"} doc={styleSpec.latest.source_vector.type.doc}>
+      <InputBlock label={"Source Type"} doc={latest.source_vector.type.doc}>
         <SelectInput
           options={[
             ['geojson', 'GeoJSON'],
@@ -147,6 +160,8 @@ class AddSource extends React.Component {
             ['tilexyz_vector', 'Vector (XYZ URLs)'],
             ['tilejson_raster', 'Raster (TileJSON URL)'],
             ['tilexyz_raster', 'Raster (XYZ URL)'],
+            ['tilejson_raster-dem', 'Raster DEM (TileJSON URL)'],
+            ['tilexyz_raster-dem', 'Raster DEM (XYZ URLs)'],
           ]}
           onChange={mode => this.setState({mode: mode, source: this.defaultSource(mode)})}
           value={this.state.mode}
@@ -218,11 +233,14 @@ class SourcesModal extends React.Component {
       <div className="maputnik-modal-section">
         <h4>Choose Public Source</h4>
         <p>
-          Add one of the publicly availble sources to your style.
+          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">

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

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 {latest} from '@mapbox/mapbox-gl-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}>
+    return <div>
-      <StringInput
+      <InputBlock label={"TileJSON URL"} doc={latest.source_vector.url.doc}>
-        value={this.props.source.url}
+        <StringInput
-        onChange={url => this.props.onChange({
+          value={this.props.source.url}
-          ...this.props.source,
+          onChange={url => this.props.onChange({
-          url: url
+            ...this.props.source,
-        })}
+            url: url
-      />
+          })}
-    </InputBlock>
+        />
+      </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) {
@@ -43,7 +50,7 @@ class TileURLSourceEditor extends React.Component {
     const prefix = ['1st', '2nd', '3rd', '4th', '5th', '6th', '7th']
     const tiles = this.props.source.tiles || []
     return tiles.map((tileUrl, tileIndex) => {
-      return <InputBlock key={tileIndex} label={prefix[tileIndex] + " Tile URL"} doc={styleSpec.latest.source_vector.tiles.doc}>
+      return <InputBlock key={tileIndex} label={prefix[tileIndex] + " Tile URL"} doc={latest.source_vector.tiles.doc}>
         <StringInput
           value={tileUrl}
           onChange={this.changeTileUrl.bind(this, tileIndex)}
@@ -55,7 +62,7 @@ class TileURLSourceEditor extends React.Component {
   render() {
     return <div>
       {this.renderTileUrls()}
-      <InputBlock label={"Min Zoom"} doc={styleSpec.latest.source_vector.minzoom.doc}>
+      <InputBlock label={"Min Zoom"} doc={latest.source_vector.minzoom.doc}>
         <NumberInput
           value={this.props.source.minzoom || 0}
           onChange={minzoom => this.props.onChange({
@@ -64,7 +71,7 @@ class TileURLSourceEditor extends React.Component {
           })}
         />
       </InputBlock>
-      <InputBlock label={"Max Zoom"} doc={styleSpec.latest.source_vector.maxzoom.doc}>
+      <InputBlock label={"Max Zoom"} doc={latest.source_vector.maxzoom.doc}>
         <NumberInput
           value={this.props.source.maxzoom || 22}
           onChange={maxzoom => this.props.onChange({
@@ -73,6 +80,7 @@ class TileURLSourceEditor extends React.Component {
           })}
         />
       </InputBlock>
+      {this.props.children}
   </div>
 
   }
@@ -85,7 +93,7 @@ class GeoJSONSourceEditor extends React.Component {
   }
 
   render() {
-    return <InputBlock label={"GeoJSON Data"} doc={styleSpec.latest.source_geojson.data.doc}>
+    return <InputBlock label={"GeoJSON Data"} doc={latest.source_geojson.data.doc}>
       <StringInput
         value={this.props.source.data}
         onChange={data => this.props.onChange({
@@ -115,6 +123,19 @@ class SourceTypeEditor extends React.Component {
       case 'tilexyz_vector': return <TileURLSourceEditor {...commonProps} />
       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}>
+        <InputBlock label={"Encoding"} doc={latest.source_raster_dem.encoding.doc}>
+          <SelectInput
+            options={Object.keys(latest.source_raster_dem.encoding.values)}
+            onChange={encoding => this.props.onChange({
+              ...this.props.source,
+              encoding: encoding
+            })}
+            value={this.props.source.encoding || latest.source_raster_dem.encoding.default}
+          />
+        </InputBlock>
+      </TileURLSourceEditor>
       default: return null
     }
   }

src/config/empty-style.json

@@ -1,14 +1,9 @@
 {
   "version": 8,
   "name": "Empty Style",
-  "metadata": {
+  "metadata": {},
-    "mapbox:autocomposite": false,
+  "sources": {},
-    "mapbox:type": "template",
+  "sprite": "",
-    "maputnik:renderer": "mbgljs",
+  "glyphs": "https://orangemug.github.io/font-glyphs/glyphs/{fontstack}/{range}.pbf",
-    "openmaptiles:version": "3.x"
-  },
-  "sources": { },
-  "glyphs": "https://demo.tileserver.org/fonts/{fontstack}/{range}.pbf",
-  "sprites": "https://demo.tileserver.org/fonts/{fontstack}/{range}.pbf",
   "layers": []
 }

src/config/layout.json

@@ -71,7 +71,8 @@
             "fill-extrusion-translate-anchor",
             "fill-extrusion-pattern",
             "fill-extrusion-height",
-            "fill-extrusion-base"
+            "fill-extrusion-base",
+            "fill-extrusion-vertical-gradient"
           ]
         }
       ]
@@ -91,7 +92,8 @@
             "circle-stroke-width",
             "circle-pitch-scale",
             "circle-translate",
-            "circle-translate-anchor"
+            "circle-translate-anchor",
+            "circle-pitch-alignment"
           ]
         }
       ]
@@ -104,7 +106,8 @@
           "fields": [
             "symbol-placement",
             "symbol-spacing",
-            "symbol-avoid-edges"
+            "symbol-avoid-edges",
+            "symbol-z-order"
           ]
         },
         {
@@ -136,6 +139,7 @@
           "title": "Icon layout properties",
           "type": "properties",
           "fields": [
+            "icon-image",
             "icon-allow-overlap",
             "icon-ignore-placement",
             "icon-optional",
@@ -143,11 +147,12 @@
             "icon-size",
             "icon-text-fit",
             "icon-text-fit-padding",
-            "icon-image",
             "icon-rotate",
             "icon-padding",
             "icon-keep-upright",
-            "icon-offset" 
+            "icon-offset",
+            "icon-anchor",
+            "icon-pitch-alignment"
           ]
         },
         {
@@ -190,7 +195,38 @@
             "raster-brightness-max",
             "raster-saturation",
             "raster-contrast",
-            "raster-fade-duration"
+            "raster-fade-duration",
+            "raster-resampling"
+          ]
+        }
+      ]
+    },
+    "hillshade": {
+      "groups": [
+        {
+          "title": "Paint properties",
+          "type": "properties",
+          "fields": [
+            "hillshade-illumination-direction",
+            "hillshade-illumination-anchor",
+            "hillshade-exaggeration",
+            "hillshade-shadow-color",
+            "hillshade-highlight-color",
+            "hillshade-accent-color"
+          ]
+        }
+      ]
+    },
+    "heatmap": {
+      "groups": [
+        {
+          "title": "Paint properties",
+          "type": "properties",
+          "fields": [
+            "heatmap-radius",
+            "heatmap-weight",
+            "heatmap-intensity",
+            "heatmap-opacity"
           ]
         }
       ]

src/config/styles.json

@@ -2,55 +2,67 @@
   {
     "id": "klokantech-basic",
     "title": "Klokantech Basic",
-    "url": "https://rawgit.com/openmaptiles/klokantech-basic-gl-style/master/style.json",
+    "url": "https://cdn.jsdelivr.net/gh/openmaptiles/klokantech-basic-gl-style@v1.8/style.json",
     "thumbnail": "https://maputnik.github.io/thumbnails/klokantech-basic.png"
   },
   {
     "id": "dark-matter",
     "title": "Dark Matter",
-    "url": "https://rawgit.com/openmaptiles/dark-matter-gl-style/master/style.json",
+    "url": "https://cdn.jsdelivr.net/gh/openmaptiles/dark-matter-gl-style@v1.7/style.json",
     "thumbnail": "https://maputnik.github.io/thumbnails/dark-matter.png"
   },
   {
     "id": "positron",
     "title": "Positron",
-    "url": "https://rawgit.com/openmaptiles/positron-gl-style/master/style.json",
+    "url": "https://cdn.jsdelivr.net/gh/openmaptiles/positron-gl-style@v1.7/style.json",
     "thumbnail": "https://maputnik.github.io/thumbnails/positron.png"
   },
   {
     "id": "osm-bright",
     "title": "OSM Bright",
-    "url": "https://rawgit.com/openmaptiles/osm-bright-gl-style/master/style.json",
+    "url": "https://cdn.jsdelivr.net/gh/openmaptiles/osm-bright-gl-style@v1.8/style.json",
     "thumbnail": "https://maputnik.github.io/thumbnails/osm-bright.png"
   },
+  {
+    "id": "toner-gl-style",
+    "title": "Toner",
+    "url": "https://cdn.jsdelivr.net/gh/openmaptiles/toner-gl-style@c289223/style.json",
+    "thumbnail": "https://maputnik.github.io/thumbnails/toner.png"
+  },
   {
     "id": "osm-liberty",
     "title": "OSM Liberty",
-    "url": "https://rawgit.com/lukasmartinelli/osm-liberty/gh-pages/style.json",
+    "url": "https://maputnik.github.io/osm-liberty/style.json",
-    "thumbnail": "https://cdn.rawgit.com/lukasmartinelli/osm-liberty/gh-pages/thumbnail.png"
+    "thumbnail": "https://maputnik.github.io/osm-liberty/thumbnail.png"
+  },
+  {
+    "id": "os-zoomstack-outdoor",
+    "title": "Zoomstack Outdoor",
+    "url": "https://s3-eu-west-1.amazonaws.com/tiles.os.uk/styles/open-zoomstack-outdoor/style.json",
+    "thumbnail": "https://maputnik.github.io/thumbnails/os-zoomstack-outdoor.png"
+  },
+  {
+    "id": "os-zoomstack-road",
+    "title": "Zoomstack Road",
+    "url": "https://s3-eu-west-1.amazonaws.com/tiles.os.uk/styles/open-zoomstack-road/style.json",
+    "thumbnail": "https://maputnik.github.io/thumbnails/os-zoomstack-road.png"
+  },
+  {
+    "id": "os-zoomstack-light",
+    "title": "Zoomstack Light",
+    "url": "https://s3-eu-west-1.amazonaws.com/tiles.os.uk/styles/open-zoomstack-light/style.json",
+    "thumbnail": "https://maputnik.github.io/thumbnails/os-zoomstack-light.png"
+  },
+  {
+    "id": "os-zoomstack-night",
+    "title": "Zoomstack Night",
+    "url": "https://s3-eu-west-1.amazonaws.com/tiles.os.uk/styles/open-zoomstack-night/style.json",
+    "thumbnail": "https://maputnik.github.io/thumbnails/os-zoomstack-night.png"
   },
   {
     "id": "empty-style",
     "title": "Empty Style",
-    "url": "https://rawgit.com/maputnik/editor/master/src/config/empty-style.json",
+    "url": "https://cdn.jsdelivr.net/gh/maputnik/editor@9cf74ca405d2be0608b57db8109cf3a6af5b9f49/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"
   }
 ]

src/config/tilesets.json

@@ -1,12 +1,22 @@
 {
-  "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}",
+    "url": "https://api.maptiler.com/tiles/v3/tiles.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)"
+  },
+  "open_zoomstack": {
+    "type": "vector",
+    "url": "https://s3-eu-west-1.amazonaws.com/tiles.os.uk/data/vector/open-zoomstack/config.json",
+    "title": "OS Open Zoomstack"
   }
 }

src/config/tokens.json

@@ -1,4 +1,5 @@
 {
   "mapbox": "pk.eyJ1IjoibW9yZ2Vua2FmZmVlIiwiYSI6ImNpeHJmNXNmZTAwNHIycXBid2NqdTJibjMifQ.Dv1-GDpTWi0NP6xW9Fct1w",
-  "openmaptiles": "Og58UhhtiiTaLVlPtPgs"
+  "openmaptiles": "KDhMfHvorAFkFe64wlZb",
+  "thunderforest": "b71f7f0ba4064f5eb9e903859a9cf5c6"
 }

src/index.jsx

@@ -1,3 +1,4 @@
+import { IconContext } from "react-icons";
 import React from 'react';
 import ReactDOM from 'react-dom';
 
@@ -5,4 +6,9 @@ import './favicon.ico'
 import './styles/index.scss'
 import App from './components/App';
 
-ReactDOM.render(<App/>, document.querySelector("#app"));
+ReactDOM.render(
+  <IconContext.Provider value={{className: 'react-icons'}}>
+    <App/>
+  </IconContext.Provider>,
+  document.querySelector("#app")
+);

src/libs/accessibility.js

@@ -0,0 +1,12 @@
+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 = throttle(() => {
+  return window.matchMedia("(prefers-reduced-motion: reduce)").matches
+}, 3000);
+
+
+export default {
+  reducedMotionEnabled
+}

src/libs/apistore.js

@@ -1,33 +1,37 @@
-import request from 'request'
 import style from './style.js'
 import ReconnectingWebSocket from 'reconnecting-websocket'
 
-const host = 'localhost'
-const port = '8000'
-const localUrl = `http://${host}:${port}`
-const websocketUrl = `ws://${host}:${port}/ws`
-
-
 export class ApiStyleStore {
+
   constructor(opts) {
     this.onLocalStyleChange = opts.onLocalStyleChange || (() => {})
+    const port = opts.port || '8000'
+    const host = opts.host || 'localhost'
+    this.localUrl = `http://${host}:${port}`
+    this.websocketUrl = `ws://${host}:${port}/ws`
+    this.init = this.init.bind(this)
   }
 
   init(cb) {
-    request(localUrl + '/styles', (error, response, body) => {
+    fetch(this.localUrl + '/styles', {
-      if (!error && body && response.statusCode == 200) {
+      mode: 'cors',
-        const styleIds = JSON.parse(body)
+    })
-        this.latestStyleId = styleIds[0]
+    .then((response) =>  {
-        this.notifyLocalChanges()
+      return response.json();
-        cb(null)
+    })
-      } else {
+    .then((body) => {
-        cb(new Error('Can not connect to style API'))
+      const styleIds = body;
-      }
+      this.latestStyleId = styleIds[0]
+      this.notifyLocalChanges()
+      cb(null)
+    })
+    .catch(function(e) {
+      cb(new Error('Can not connect to style API'))
     })
   }
 
   notifyLocalChanges() {
-    const connection = new ReconnectingWebSocket(websocketUrl)
+    const connection = new ReconnectingWebSocket(this.websocketUrl)
     connection.onmessage = e => {
       if(!e.data) return
       console.log('Received style update from API')
@@ -44,8 +48,14 @@ export class ApiStyleStore {
 
   latestStyle(cb) {
     if(this.latestStyleId) {
-      request(localUrl + '/styles/' + this.latestStyleId, (error, response, body) => {
+      fetch(this.localUrl + '/styles/' + this.latestStyleId, {
-        cb(style.ensureStyleValidity(JSON.parse(body)))
+        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({
+    fetch(this.localUrl + '/styles/' + id, {
-      url: localUrl + '/styles/' + id,
+      method: "PUT",
-      json: true,
+      mode: 'cors',
-      body: mapStyle
+      headers: {
-    }, (error, response, body) => {
+        "Content-Type": "application/json; charset=utf-8",
+      },
+      body: JSON.stringify(mapStyle)
+    })
+    .catch(function(error) {
       if(error) console.error(error)
     })
     return mapStyle

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

src/libs/filterops.js

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

src/libs/layer.js

@@ -1,16 +1,16 @@
-import styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec'
+import {latest} from '@mapbox/mapbox-gl-style-spec'
 
 export function changeType(layer, newType) {
   const changedPaintProps = { ...layer.paint }
   Object.keys(changedPaintProps).forEach(propertyName => {
-    if(!(propertyName in styleSpec.latest['paint_' + newType])) {
+    if(!(propertyName in latest['paint_' + newType])) {
       delete changedPaintProps[propertyName]
     }
   })
 
   const changedLayoutProps = { ...layer.layout }
   Object.keys(changedLayoutProps).forEach(propertyName => {
-    if(!(propertyName in styleSpec.latest['layout_' + newType])) {
+    if(!(propertyName in latest['layout_' + newType])) {
       delete changedLayoutProps[propertyName]
     }
   })
@@ -31,7 +31,11 @@ export function changeProperty(layer, group, property, newValue) {
   if(newValue === undefined) {
     if(group) {
       const newLayer = {
-        ...layer
+        ...layer,
+        // Change object so the diff works in ./src/components/map/MapboxGlMap.jsx
+        [group]: {
+          ...layer[group]
+        }
       };
       delete newLayer[group][property];
 

src/libs/mapbox-rtl.js

@@ -1,11 +1,11 @@
-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"
 });
+const objectUrl = window.URL.createObjectURL(blob);
 
 MapboxGl.setRTLTextPlugin(objectUrl);

src/libs/metadata.js

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

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/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,24 +53,63 @@ function indexOfLayer(layers, layerId) {
   return null
 }
 
-function replaceAccessToken(mapStyle) {
+function getAccessToken(sourceName, mapStyle, opts) {
-  const omtSource = mapStyle.sources.openmaptiles
+  if(sourceName === "thunderforest_transport" || sourceName === "thunderforest_outdoors") {
-  if(!omtSource) return mapStyle
+    sourceName = "thunderforest"
+  }
 
   const metadata = mapStyle.metadata || {}
-  const accessToken = metadata['maputnik:openmaptiles_access_token'] || tokens.openmaptiles
+  let accessToken = metadata[`maputnik:${sourceName}_access_token`]
+
+  if(opts.allowFallback && !accessToken) {
+    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;
+  }
+
   const changedSources = {
     ...mapStyle.sources,
-    openmaptiles: {
+    [sourceName]: {
-      ...omtSource,
+      ...source,
-      url: omtSource.url.replace('{key}', accessToken)
+      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/) || mapStyle.glyphs.match(/\.maptiler\.com/))) {
+    const newAccessToken = getAccessToken("openmaptiles", mapStyle, opts);
+    if (newAccessToken) {
+      changedStyle = {
+        ...changedStyle,
+        glyphs: mapStyle.glyphs.replace('{key}', newAccessToken)
+      }
+    }
+  }
 
   return changedStyle
 }
@@ -81,5 +119,6 @@ export default {
   emptyStyle,
   indexOfLayer,
   generateId,
-  replaceAccessToken,
+  getAccessToken,
+  replaceAccessTokens,
 }

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'

src/libs/urlopen.js

@@ -1,5 +1,5 @@
-import request from 'request'
 import url from 'url'
+import querystring from 'querystring'
 import style from './style.js'
 
 export function initialStyleUrl() {
@@ -9,34 +9,57 @@ export function initialStyleUrl() {
 
 export function loadStyleUrl(styleUrl, cb) {
   console.log('Loading style', styleUrl)
-  request({
+  fetch(styleUrl, {
-    url: styleUrl,
+    mode: 'cors',
-    withCredentials: false,
+    credentials: "same-origin"
-  }, (error, response, body) => {
+  })
-      if (!error && response.statusCode == 200) {
+  .then(function(response) {
-        cb(style.ensureStyleValidity(JSON.parse(body)))
+    return response.json();
-      } else {
+  })
-        console.warn('Could not fetch default style', styleUrl)
+  .then(function(body) {
-        cb(style.emptyStyle)
+    cb(style.ensureStyleValidity(body))
-      }
+  })
+  .catch(function() {
+    console.warn('Could not fetch default style', styleUrl)
+    cb(style.emptyStyle)
   })
 }
 
+export function removeStyleQuerystring() {
+  const initialUrl = url.parse(window.location.href, true)
+  let qs = querystring.parse(window.location.search.slice(1))
+  delete qs["style"]
+  if(Object.getOwnPropertyNames(qs).length === 0) {
+    qs = ""
+  } else {
+    qs = "?" + querystring.stringify(qs)
+  }
+  let newUrlHash = initialUrl.hash
+  if(newUrlHash === null) {
+    newUrlHash = ""
+  } 
+  const newUrl = initialUrl.protocol + "//" + initialUrl.host + initialUrl.pathname + qs + newUrlHash
+  window.history.replaceState({}, document.title, newUrl)
+}
+
 export function loadJSON(url, defaultValue, cb) {
-  request({
+  fetch(url, {
-    url: url,
+    mode: 'cors',
-    withCredentials: false,
+    credentials: "same-origin"
-  }, (error, response, body) => {
+  })
-    if (!error && body && response.statusCode == 200) {
+  .then(function(response) {
-      try {
+    return response.json();
-        cb(JSON.parse(body))
+  })
-      } catch(err) {
+  .then(function(body) {
-        console.error(err)
+    try {
-        cb(defaultValue)
+      cb(body)
-      }
+    } catch(err) {
-    } else {
+      console.error(err)
-      console.error('Can not load JSON from ' + url)
       cb(defaultValue)
     }
   })
+  .catch(function() {
+    console.error('Can not load JSON from ' + url)
+    cb(defaultValue)
+  })
 }

src/mapboxgl.css

@@ -14,6 +14,22 @@
   border-top-color: rgb(28, 31, 36);
 }
 
+.mapboxgl-popup-anchor-top-left .mapboxgl-popup-tip {
+ border-bottom-color: rgb(28, 31, 36);
+}
+
+.mapboxgl-popup-anchor-top-right .mapboxgl-popup-tip {
+  border-bottom-color: rgb(28, 31, 36);
+}
+
+.mapboxgl-popup-anchor-bottom-left .mapboxgl-popup-tip {
+  border-top-color: rgb(28, 31, 36);
+}
+
+.mapboxgl-popup-anchor-bottom-right .mapboxgl-popup-tip {
+  border-top-color: rgb(28, 31, 36);
+}
+
 .mapboxgl-popup-content {
   background-color: rgb(28, 31, 36);
   border-radius: 0px;
@@ -26,7 +42,7 @@
 }
 
 .mapboxgl-ctrl-zoom {
-  color: rgb(138, 138, 138);
+  color: #a4a4a4;
   font-weight: bold;
   padding: 4px 8px;
   user-select: none;
@@ -46,15 +62,15 @@
 }
 
 .mapboxgl-ctrl-icon.mapboxgl-ctrl-zoom-in {
-    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D%270%200%2020%2020%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%0A%20%20%3Cpath%20style%3D%27fill%3A%238e8e8e%3B%27%20d%3D%27M%2010%206%20C%209.446%206%209%206.4459904%209%207%20L%209%209%20L%207%209%20C%206.446%209%206%209.446%206%2010%20C%206%2010.554%206.446%2011%207%2011%20L%209%2011%20L%209%2013%20C%209%2013.55401%209.446%2014%2010%2014%20C%2010.554%2014%2011%2013.55401%2011%2013%20L%2011%2011%20L%2013%2011%20C%2013.554%2011%2014%2010.554%2014%2010%20C%2014%209.446%2013.554%209%2013%209%20L%2011%209%20L%2011%207%20C%2011%206.4459904%2010.554%206%2010%206%20z%27%20%2F%3E%0A%3C%2Fsvg%3E%0A")
+    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D%270%200%2020%2020%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%0A%20%20%3Cpath%20style%3D%27fill%3A%23a4a4a4%3B%27%20d%3D%27M%2010%206%20C%209.446%206%209%206.4459904%209%207%20L%209%209%20L%207%209%20C%206.446%209%206%209.446%206%2010%20C%206%2010.554%206.446%2011%207%2011%20L%209%2011%20L%209%2013%20C%209%2013.55401%209.446%2014%2010%2014%20C%2010.554%2014%2011%2013.55401%2011%2013%20L%2011%2011%20L%2013%2011%20C%2013.554%2011%2014%2010.554%2014%2010%20C%2014%209.446%2013.554%209%2013%209%20L%2011%209%20L%2011%207%20C%2011%206.4459904%2010.554%206%2010%206%20z%27%20%2F%3E%0A%3C%2Fsvg%3E%0A")
 }
 
 .mapboxgl-ctrl-icon.mapboxgl-ctrl-zoom-out {
-    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D%270%200%2020%2020%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%0A%20%20%3Cpath%20style%3D%27fill%3A%238e8e8e%3B%27%20d%3D%27m%207%2C9%20c%20-0.554%2C0%20-1%2C0.446%20-1%2C1%200%2C0.554%200.446%2C1%201%2C1%20l%206%2C0%20c%200.554%2C0%201%2C-0.446%201%2C-1%200%2C-0.554%20-0.446%2C-1%20-1%2C-1%20z%27%20%2F%3E%0A%3C%2Fsvg%3E%0A")
+    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D%270%200%2020%2020%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%0A%20%20%3Cpath%20style%3D%27fill%3A%23a4a4a4%3B%27%20d%3D%27m%207%2C9%20c%20-0.554%2C0%20-1%2C0.446%20-1%2C1%200%2C0.554%200.446%2C1%201%2C1%20l%206%2C0%20c%200.554%2C0%201%2C-0.446%201%2C-1%200%2C-0.554%20-0.446%2C-1%20-1%2C-1%20z%27%20%2F%3E%0A%3C%2Fsvg%3E%0A")
 }
 
-.mapboxgl-ctrl-icon.mapboxgl-ctrl-compass > span.arrow {
+.mapboxgl-ctrl-icon.mapboxgl-ctrl-compass > .mapboxgl-ctrl-compass-arrow {
-    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%0A%09%3Cpolygon%20fill%3D%27%238e8e8e%27%20points%3D%276%2C9%2010%2C1%2014%2C9%27%2F%3E%0A%09%3Cpolygon%20fill%3D%27%23CCCCCC%27%20points%3D%276%2C11%2010%2C19%2014%2C11%20%27%2F%3E%0A%3C%2Fsvg%3E")
+    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%0A%09%3Cpolygon%20fill%3D%27%23a4a4a4%27%20points%3D%276%2C9%2010%2C1%2014%2C9%27%2F%3E%0A%09%3Cpolygon%20fill%3D%27%23f0f0f0%27%20points%3D%276%2C11%2010%2C19%2014%2C11%20%27%2F%3E%0A%3C%2Fsvg%3E")
 }
 
 .mapboxgl-ctrl-inspect {

src/styles/_base.scss

@@ -3,6 +3,7 @@
   src: url('../fonts/Roboto-Regular.ttf') format('truetype');
   font-weight: normal;
   font-style: normal;
+  font-display: swap;
 }
 
 @font-face {
@@ -10,6 +11,7 @@
   src: url('../fonts/Roboto-Medium.ttf') format('truetype');
   font-weight: bold;
   font-style: normal;
+  font-display: swap;
 }
 
 html {
@@ -18,6 +20,11 @@ html {
   box-sizing: border-box;
 }
 
+body {
+  // The UI is 100% height so prevent bounce scroll on OSX
+  overflow: hidden;
+}
+
 *,
 *::before,
 *::after {
@@ -76,3 +83,7 @@ label:hover {
 a {
   color: white;
 }
+
+.hide {
+  display: none !important;
+}

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
@@ -46,19 +66,28 @@
 
 // BUTTON
 .maputnik-button {
+  display: inline-block;
   cursor: pointer;
   background-color: $color-midgray;
   color: $color-lowgray;
   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);
     color: $color-white;
   }
+
+  &:disabled {
+    background-color: darken($color-midgray, 5);
+    color: $color-midgray;
+    cursor: not-allowed;
+  }
 }
 
 .maputnik-big-button {
@@ -68,6 +97,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;
 
@@ -133,3 +176,32 @@
     color: $color-red;
   }
 }
+
+.maputnik-dialog {
+  &__buttons {
+    text-align: right;
+  }
+}
+
+.map-state-menu {
+  display: inline-block;
+
+  &__menu {
+    position: absolute;
+    z-index: 999999;
+    background: $color-black;
+    display: flex;
+    flex-direction: column;
+    align-content: stretch;
+
+    li {
+      display: flex;
+      flex-direction: column;
+
+      button {
+        width: 100%;
+        text-align: left;
+      }
+    }
+  }
+}

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

@@ -24,6 +24,15 @@
     padding-bottom: $margin-5;
   }
 
+  &-item-handle {
+    flex: 1;
+    display: flex;
+
+    svg {
+      margin-right: 4px;
+    }
+  }
+
   &-item {
     font-weight: 400;
     color: $color-lowgray;
@@ -36,29 +45,56 @@
     z-index: 2000;
     cursor: pointer;
     position: relative;
-    padding: 5px 10px;
+    padding: 5px;
     line-height: 1.3;
     max-height: 50px;
     opacity: 1;
     -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 {
+  &-icon-action {
-    fill: $color-black;
+    display: none;
+
+    svg {
+      fill: $color-black;
+    }
+  }
+
+  .maputnik-layer-list-icon-action {
+    background: initial;
+    border: none;
+    padding: 0 2px;
+    height: 15px;
+
+    svg {
+      fill: darken($color-lowgray, 20);
+
+      &:hover {
+        fill: $color-white;
+      }
+    }
+  }
+
+  .maputnik-layer-list-icon-action__visibility--hide {
+    display: block;
   }
 
   .maputnik-layer-list-item:hover,
   .maputnik-layer-list-item-selected {
     background-color: lighten($color-black, 2);
 
-    .maputnik-layer-list-icon-action svg {
+    .maputnik-layer-list-icon-action {
-      fill: darken($color-lowgray, 0.5);
+      display: block;
 
-      &:hover {
+      svg {
-        fill: $color-white;
+        fill: darken($color-lowgray, 0.5);
       }
     }
   }
@@ -85,6 +121,8 @@
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
+    color: inherit;
+    text-decoration: none;
   }
 
   &-group-header {
@@ -122,6 +160,7 @@
   user-select: none;
   padding: $margin-2;
   line-height: 20px;
+  border-top: solid 1px #36383e;
 
   @include flex-row;
 
@@ -133,7 +172,7 @@
 // PROPERTY
 .maputnik-default-property {
   .maputnik-input-block-label {
-    color: darken($color-lowgray, 25%);
+    color: darken($color-lowgray, 20%);
   }
 
   .maputnik-string,
@@ -142,7 +181,7 @@
   .maputnik-select,
   .maputnik-checkbox-wrapper {
     background-color: darken($color-gray, 2%);
-    color: darken($color-lowgray, 25%);
+    color: darken($color-lowgray, 20%);
   }
 
   .maputnik-make-zoom-function svg {
@@ -151,7 +190,7 @@
 
   .maputnik-multibutton .maputnik-button {
     background-color: darken($color-midgray, 10%);
-    color: darken($color-lowgray, 25%);
+    color: darken($color-lowgray, 20%);
 
     &:hover {
       background-color: lighten($color-midgray, 12);
@@ -164,3 +203,53 @@
     color: $color-lowgray;
   }
 }
+
+.more-menu {
+  position: relative;
+
+  svg {
+    width: 22px;
+    height: 22px;
+  }
+
+  &__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;
+  }
+}
+
+// Clone of the element which is sorted
+.sortableHelper {
+  font-family: $font-family;
+  z-index: 9999;
+  border: none;
+}

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/_map.scss

@@ -1,7 +1,13 @@
 //OPENLAYERS
 .maputnik-layout {
   .ol-zoom {
-    top: 10px;
+    top: 40px;
+    right: 10px;
+    left: auto;
+  }
+
+  .ol-rotate {
+    top: 94px;
     right: 10px;
     left: auto;
   }
@@ -20,3 +26,57 @@
     }
   }
 }
+
+
+.maputnik-ol {
+  width: 100%;
+  height: 100%;
+}
+
+.maputnik-ol-popup {
+  background: $color-black;
+
+}
+
+.maputnik-coords {
+  font-family: monospace;
+  &:before {
+    content: '[';
+    color: #888;
+  }
+  &:after {
+    content: ']';
+    color: #888;
+  }
+}
+
+.maputnik-ol-debug {
+  font-family: monospace;
+  font-size: smaller;
+  position: absolute;
+  bottom: 10px;
+  left: 10px;
+  background: rgb(28, 31, 36);
+  padding: 6px 8px;
+  border-radius: 2px;
+  z-index: 9999;
+}
+
+.maputnik-ol-zoom {
+  position: absolute;
+  right: 10px;
+  top: 10px;
+  background: #1c1f24;
+  border-radius: 2px;
+  padding: 6px 8px;
+  color: $color-lowgray;
+  z-index: 9999;
+  font-size: 12px;
+  font-weight: bold;
+}
+
+.maputnik-ol-container {
+  display: flex;
+  flex: 1;
+  position: relative;
+}

src/styles/_modal.scss

@@ -6,6 +6,8 @@
   background-color: $color-black;
   box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.3);
   z-index: 3;
+  position: relative;
+  font-family: $font-family;
 }
 
 .maputnik-modal-section {
@@ -20,6 +22,10 @@
   flex-shrink: 0;
 }
 
+.maputnik-modal-sub-section {
+  margin-top: $margin-1;
+}
+
 .maputnik-modal-section--shrink {
   flex-shrink: 1;
 }
@@ -37,7 +43,10 @@
 }
 
 .maputnik-modal-header-toggle {
-  cursor: pointer;
+  border: none;
+  background: initial;
+  color: white;
+  padding: 0;
 }
 
 .maputnik-modal-scroller {
@@ -55,30 +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;
-
-  @include flex-row;
-}
-
 //OPEN MODAL
 .maputnik-upload-button {
   @extend .maputnik-big-button;
@@ -103,6 +88,7 @@
   background-color: $color-gray;
   padding: $margin-3;
   display: block;
+  width: 100%;
 
   &:hover {
     background-color: $color-midgray;
@@ -117,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 {
@@ -136,6 +125,10 @@
 }
 
 //SOURCE MODAL
+.maputnik-public-sources {
+  margin-bottom: 1.5%;
+}
+
 .maputnik-public-source {
   vertical-align: top;
   margin-top: 1.5%;
@@ -150,6 +143,7 @@
   font-size: $font-size-5;
   color: $color-lowgray;
   background-color: transparent;
+  width: 100%;
 
   @include flex-row;
 }
@@ -160,6 +154,7 @@
 
 .maputnik-public-source-id {
   font-weight: 400;
+  text-align: left;
 }
 
 .maputnik-active-source-type-editor {
@@ -233,3 +228,39 @@
   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: 400px;
+}
+
+.maputnik-modal-survey__logo {
+  display: block;
+  margin: 0 auto;
+  height: 128px;
+}
+
+.maputnik-modal-survey__description {
+  line-height: 1.5;
+}
+
+.maputnik-modal-survey__footnote {
+  color: $color-green;
+  margin-top: 16px;
+}

src/styles/_popup.scss

@@ -1,6 +1,18 @@
 .maputnik-popup-layer {
+  display: flex;
+  flex-direction: row;
+}
+
+.maputnik-popup-layer__swatch {
+  display: inline-block;
+  width: 5px;
+  align-content: stretch;
+}
+
+.maputnik-popup-layer__label {
   display: block;
   color: $color-lowgray;
+  cursor: pointer;
   user-select: none;
   line-height: 1.2;
   padding: $margin-2;
@@ -10,12 +22,14 @@
 
 .maputnik-popup-layer-id {
   padding-left: $margin-2;
-  padding-right: $margin-2;
+  padding-right: 1.6em;
   background-color: $color-midgray;
   color: $color-white;
 }
 
 .maputnik-feature-property-popup {
+  max-height: calc(50vh - 40px); /* toolbar height: 40px */
+  overflow-y: auto;
   .maputnik-input-block {
     margin: 0;
     margin-left: $margin-2;