1.7.0

Fix for desktop build

.babelrc

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

.circleci/config.yml

@@ -18,8 +18,8 @@ templates:
 
     - run: mkdir -p /tmp/artifacts/logs
     - run: npm run build
-    - run: npm run lint
+    - run: npm run lint-js
-    - run: npm run lint-styles
+    - run: npm run lint-css
     - store_artifacts:
         path: /tmp/artifacts
         destination: /artifacts
@@ -41,45 +41,30 @@ templates:
 
     - run: mkdir -p /tmp/artifacts/logs
     - run: npm run build
-    - run: npm run lint
+    - run: npm run profiling-build
-    - run: npm run lint-styles
+    - run: npm run lint-js
+    - run: npm run lint-css
     - 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-v6:
-    docker:
-      - image: node:6
-    working_directory: ~/repo-linux-node-v6
-    steps: *build-steps
-  build-linux-node-v8:
-    docker:
-      - image: node:8
-      - image: selenium/standalone-chrome:3.8.1
-    working_directory: ~/repo-linux-node-v8
-    steps: *wdio-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-v6:
+  build-linux-node-v13:
-    macos:
+    docker:
-      xcode: "9.0"
+      - image: node:13
-    dependencies:
+    working_directory: ~/repo-linux-node-v13
-      override:
-        - brew install node@6
-    working_directory: ~/repo-osx-node-v6
-    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:
@@ -89,15 +74,30 @@ jobs:
         - 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
+  build-osx-node-v13:
+    macos:
+      xcode: "9.0"
+    dependencies:
+      override:
+        - brew install node@13
+    working_directory: ~/repo-osx-node-v13
+    steps: *build-steps
 
 workflows:
   version: 2
   build:
     jobs:
-      - build-linux-node-v6
-      - build-linux-node-v8
       - build-linux-node-v10
-      - build-osx-node-v6
+      - build-linux-node-v12
-      - build-osx-node-v8
+      - build-linux-node-v13
       - build-osx-node-v10
-
+      - build-osx-node-v12
+      - build-osx-node-v13

.github/FUNDING.yml

@@ -0,0 +1 @@
+custom: "https://maputnik.github.io/donate"

.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,22 +0,0 @@
-language: node_js
-matrix:
-  include:
-    - os: osx
-      node_js: "6"
-    - os: osx
-      node_js: "8"
-    - os: osx
-      node_js: "9"
-install:
-  - npm install
-script:
-  - mkdir public
-  - node --stack_size=100000 $(which npm) run build
-  - npm run lint
-  - npm run lint-styles
-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,27 @@
 # 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.7.0-beta release at: https://maputnik.github.io/releases/v1.7.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
@@ -40,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/`.
 
@@ -54,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
@@ -79,7 +83,7 @@ For testing we use [webdriverio](http://webdriver.io) and [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 and terminal and run the following. This will install the drivers on your local machine
+Now open a terminal and run the following. This will install the drivers on your local machine
 
 ```
 ./node_modules/.bin/selenium-standalone install
@@ -115,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/>
@@ -133,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/>
@@ -162,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,17 +1,26 @@
+image: Visual Studio 2019
 environment:
   matrix:
-    - nodejs_version: "6"
+    - nodejs_version: "10"
-    - nodejs_version: "8"
+    - nodejs_version: "12"
-    - nodejs_version: "9"
+    - nodejs_version: "13"
 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 install --global windows-build-tools
   - npm install
 build_script:
   - npm run build
 test_script:
-  - npm run lint
+  - npm run lint-js
+  - npm run lint-css

config/wdio.conf.js

@@ -10,53 +10,282 @@ var server;
 var SCREENSHOT_PATH = artifacts.pathSync("screenshots");
 
 exports.config = {
-  specs: [
+    //
-    './test/functional/index.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: 'chrome'
+    //
-  }],
+    // ==================
-  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: SCREENSHOT_PATH,
+    // NPM script (see https://docs.npmjs.com/cli/run-script) then the current working
-  // Note: This is here because @orangemug currently runs Maputnik inside a docker container.
+    // directory is where your package.json resides, so `wdio` will be called from there.
-  host: process.env.DOCKER_HOST || "0.0.0.0",
+    //
-  baseUrl: 'http://localhost',
+    specs: [
-  waitforTimeout: 10000,
+        './test/functional/index.js'
-  connectionRetryTimeout: 90000,
+    ],
-  connectionRetryCount: 3,
+    // Patterns to exclude.
-  framework: 'mocha',
+    exclude: [
-  reporters: ['spec'],
+        // 'path/to/excluded/files'
-  mochaOpts: {
+    ],
-    ui: 'bdd',
+    //
-    // Because we don't know how long the initial build will take...
+    // ============
-    timeout: 4*60*1000
+    // Capabilities
-  },
+    // ============
-  onPrepare: function (config, capabilities) {
+    // Define your capabilities here. WebdriverIO can run multiple capabilities at the same
-    return new Promise(function(resolve, reject) {
+    // time. Depending on the number of capabilities, WebdriverIO launches several test
-      var compiler = webpack(webpackConfig);
+    // sessions. Within your capabilities you can overwrite the spec and exclude options in
-      server = new WebpackDevServer(compiler, {
+    // order to group specific specs to a specific capability.
-        stats: {
+    //
-          colors: true
+    // 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
-      });
+    // set maxInstances to 1; wdio will spawn 3 processes. Therefore, if you have 10 spec
-      server.listen(testConfig.port, (isDocker() ? "0.0.0.0" : "localhost"), function(err) {
+    // files and you set maxInstances to 10, all spec files will get tested at the same time
-        if(err) {
+    // and 30 processes will get spawned. The property handles how many capabilities
-          reject(err);
+    // from the same test should run tests.
-        }
+    //
-        else {
+    maxInstances: 10,
-          resolve();
+    //
-        }
+    // 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
-  },
+    //
-  onComplete: function(exitCode) {
+    capabilities: [{
-    server.close()
+        // 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.
+    hostname: 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.
+    //
+    // 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);
+        const serverHost = isDocker() ? "0.0.0.0" : "localhost";
+
+        server = new WebpackDevServer(compiler, {
+          host: serverHost,
+          stats: {
+            colors: true
+          }
+        });
+
+        server.listen(testConfig.port, serverHost, 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,8 +1,9 @@
 "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 HtmlWebpackInlineSVGPlugin = require('html-webpack-inline-svg-plugin');
 var CopyWebpackPlugin = require('copy-webpack-plugin');
 
 const HOST = process.env.HOST || "127.0.0.1";
@@ -10,6 +11,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`,
@@ -27,7 +29,7 @@ module.exports = {
     noParse: [
       /mapbox-gl\/dist\/mapbox-gl.js/
     ],
-    loaders: loaders
+    rules: rules
   },
   node: {
     fs: "empty",
@@ -60,6 +62,9 @@ module.exports = {
       title: 'Maputnik',
       template: './src/template.html'
     }),
+    new HtmlWebpackInlineSVGPlugin({
+      runPreEmit: true,
+    }),
     new CopyWebpackPlugin([
       {
         from: './src/manifest.json',

config/webpack.loaders.js

@@ -1,55 +0,0 @@
-module.exports = [
-  {
-    test: /\.jsx?$/,
-    exclude: /(node_modules|bower_components|public)/,
-    loaders: ['react-hot-loader/webpack']
-  },
-  // HACK: This is a massive hack and reaches into the mapbox-gl private API.
-  // We have to include this for access to `normalizeSourceURL`. We should
-  // remove this ASAP, see <https://github.com/mapbox/mapbox-gl-js/issues/2416>
-  {
-    test: /.*node_modules[\/\\]mapbox-gl[\/\\]src[\/\\]util[\/\\].*\.js/,
-    loader: 'babel-loader',
-    query: {
-      presets: ['env', 'react', 'flow'],
-      plugins: ['transform-runtime', 'transform-decorators-legacy', 'transform-class-properties'],
-    }
-  },
-  {
-    test: /\.jsx?$/,
-    // Note: These modules aren't ES5 therefore we much compile them.
-    exclude: /(.*node_modules(?![\/\\](@mapbox[\/\\]mapbox-gl-style-spec|ol|mapbox-to-ol-style))|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,43 +1,23 @@
 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 HtmlWebpackInlineSVGPlugin = require('html-webpack-inline-svg-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 UglifyJsPlugin = require('uglifyjs-webpack-plugin');
 
 var OUTPATH = artifacts.pathSync("/build");
 
 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']
@@ -46,7 +26,7 @@ module.exports = {
     noParse: [
       /mapbox-gl\/dist\/mapbox-gl.js/
     ],
-    loaders
+    rules: rules
   },
   node: {
     fs: "empty",
@@ -55,27 +35,25 @@ 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 UglifyJsPlugin(),
-    new ExtractTextPlugin('[contenthash].css', {
-      allChunks: true
-    }),
     new HtmlWebpackPlugin({
       template: './src/template.html',
       title: 'Maputnik'
     }),
+    new HtmlWebpackInlineSVGPlugin({
+      runPreEmit: true,
+    }),
     new CopyWebpackPlugin([
       {
         from: './src/manifest.json',
         to: 'manifest.json'
-      }
+    }
-    ]),
+  ]),
     new BundleAnalyzerPlugin({
       analyzerMode: 'static',
       defaultSizes: 'gzip',

config/webpack.profiling.config.js

@@ -0,0 +1,20 @@
+const webpackProdConfig = require('./webpack.production.config');
+const artifacts = require("../test/artifacts");
+
+const OUTPATH = artifacts.pathSync("/profiling");
+
+module.exports = {
+  ...webpackProdConfig,
+  output: {
+    ...webpackProdConfig.output,
+    path: OUTPATH,
+  },
+  resolve: {
+    ...webpackProdConfig.resolve,
+    alias: {
+      ...webpackProdConfig.resolve.alias,
+      'react-dom$': 'react-dom/profiling',
+      'scheduler/tracing': 'scheduler/tracing-profiling',
+    }
+  }
+};

config/webpack.rules.js

@@ -0,0 +1,44 @@
+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: /\.(gif|jpg|png)$/,
+    use: 'file-loader?name=img/[name].[ext]'
+  },
+  {
+    test: /\.svg$/,
+    use: [
+      'svg-inline-loader'
+    ]
+  },
+  {
+    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,17 +1,18 @@
 {
   "name": "maputnik",
-  "version": "1.5.0",
+  "version": "1.7.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",
+    "profiling-build": "webpack --config config/webpack.profiling.config.js --progress --profile --colors",
     "test": "cross-env NODE_ENV=test wdio config/wdio.conf.js",
     "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-js": "eslint --ext js --ext jsx src test",
-    "lint-styles": "stylelint 'src/styles/*.scss'",
+    "lint-css": "stylelint \"src/styles/*.scss\"",
-    "nsp": "nsp check --reporter summary"
+    "lint": "npm run lint-js && npm run lint-css"
   },
   "repository": {
     "type": "git",
@@ -21,44 +22,47 @@
   "license": "MIT",
   "homepage": "https://github.com/maputnik/editor#readme",
   "dependencies": {
-    "@mapbox/mapbox-gl-rtl-text": "^0.2.0",
+    "@babel/runtime": "^7.8.4",
-    "@mapbox/mapbox-gl-style-spec": "^13.1.0",
+    "@mapbox/mapbox-gl-rtl-text": "^0.2.3",
-    "classnames": "^2.2.5",
+    "@mapbox/mapbox-gl-style-spec": "^13.12.0",
-    "codemirror": "^5.37.0",
+    "@mdi/react": "^1.4.0",
-    "color": "^3.0.0",
+    "array-move": "^2.2.1",
-    "file-saver": "^1.3.8",
+    "classnames": "^2.2.6",
-    "github-api": "^3.0.0",
+    "codemirror": "^5.52.0",
+    "color": "^3.1.2",
+    "detect-browser": "^5.0.0",
+    "file-saver": "^2.0.2",
+    "json-to-ast": "^2.1.0",
     "jsonlint": "github:josdejong/jsonlint#85a19d7",
+    "lodash": "^4.17.15",
     "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.47.0",
+    "mapbox-gl": "^1.9.1",
     "mapbox-gl-inspect": "^1.3.1",
-    "maputnik-design": "github:maputnik/design",
+    "maputnik-design": "github:maputnik/design#f7a2b4d",
-    "mousetrap": "^1.6.1",
+    "ol": "^6.3.1",
-    "ol-mapbox-style": "^2.10.1",
+    "ol-mapbox-style": "^6.0.1",
-    "ol": "^4.6.5",
+    "prop-types": "^15.7.2",
-    "prop-types": "^15.6.0",
+    "react": "^16.12.0",
-    "react": "^16.3.2",
+    "react-accessible-accordion": "^3.0.1",
-    "react-addons-pure-render-mixin": "^15.6.2",
+    "react-aria-menubutton": "^6.3.0",
-    "react-aria-menubutton": "^5.1.1",
+    "react-aria-modal": "^4.0.0",
-    "react-aria-modal": "^2.12.1",
+    "react-autobind": "^1.0.6",
-    "react-autocomplete": "^1.7.2",
+    "react-autocomplete": "^1.8.1",
-    "react-codemirror2": "^4.2.1",
+    "react-collapse": "^5.0.1",
-    "react-collapse": "^4.0.3",
+    "react-color": "^2.18.0",
-    "react-color": "^2.14.1",
+    "react-dom": "^16.12.0",
-    "react-copy-to-clipboard": "^5.0.1",
+    "react-file-reader-input": "^2.0.0",
-    "react-dom": "^16.3.2",
+    "react-icon-base": "^2.1.2",
-    "react-file-reader-input": "^1.1.4",
+    "react-icons": "^3.9.0",
-    "react-height": "^3.0.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": "^1.11.0",
-    "reconnecting-websocket": "^3.2.2",
+    "reconnecting-websocket": "^4.4.0",
-    "request": "^2.85.0",
+    "slugify": "^1.3.6",
     "url": "^0.11.0"
   },
   "jshintConfig": {
@@ -99,61 +103,62 @@
         "experimentalObjectRestSpread": true,
         "jsx": true
       }
+    },
+    "settings": {
+      "react": {
+        "version": "detect"
+      }
     }
   },
   "devDependencies": {
-    "babel-core": "^6.26.3",
+    "@babel/core": "^7.8.4",
-    "babel-eslint": "^8.2.3",
+    "@babel/plugin-proposal-class-properties": "^7.5.5",
-    "babel-loader": "7.1.4",
+    "@babel/plugin-transform-runtime": "^7.6.2",
-    "babel-plugin-istanbul": "^4.1.6",
+    "@babel/preset-env": "^7.6.3",
-    "babel-plugin-transform-class-properties": "^6.24.1",
+    "@babel/preset-flow": "^7.0.0",
-    "babel-plugin-transform-decorators-legacy": "^1.3.4",
+    "@babel/preset-react": "^7.6.3",
-    "babel-plugin-transform-flow-strip-types": "^6.22.0",
+    "@mdi/js": "^5.0.45",
-    "babel-plugin-transform-object-rest-spread": "^6.26.0",
+    "@wdio/cli": "^6.0.5",
-    "babel-plugin-transform-runtime": "^6.23.0",
+    "@wdio/local-runner": "^6.0.5",
-    "babel-preset-env": "^1.6.1",
+    "@wdio/mocha-framework": "^6.0.4",
-    "babel-preset-es2015": "^6.24.1",
+    "@wdio/selenium-standalone-service": "^6.0.4",
-    "babel-preset-flow": "^6.23.0",
+    "@wdio/spec-reporter": "^6.0.4",
-    "babel-preset-react": "^6.24.1",
+    "@wdio/sync": "^6.0.1",
-    "babel-register": "^6.26.0",
+    "babel-eslint": "^10.0.3",
-    "babel-runtime": "^6.26.0",
+    "babel-loader": "^8.1.0",
-    "base64-loader": "^1.0.0",
+    "babel-plugin-istanbul": "^6.0.0",
-    "copy-webpack-plugin": "^4.5.1",
+    "babel-plugin-static-fs": "^3.0.0",
-    "cors": "^2.8.4",
+    "copy-webpack-plugin": "^5.1.1",
-    "cross-env": "^5.1.4",
+    "cors": "^2.8.5",
-    "css-loader": "^0.28.11",
+    "cross-env": "^7.0.0",
-    "eslint": "^4.19.1",
+    "css-loader": "^3.4.2",
-    "eslint-plugin-react": "^7.4.0",
+    "eslint": "^6.8.0",
-    "express": "^4.16.3",
+    "eslint-plugin-react": "^7.18.3",
-    "extract-text-webpack-plugin": "^3.0.2",
+    "express": "^4.17.1",
-    "file-loader": "^1.1.5",
+    "file-loader": "^6.0.0",
+    "html-webpack-inline-svg-plugin": "^1.3.0",
     "html-webpack-plugin": "^3.2.0",
-    "is-docker": "^1.1.0",
+    "is-docker": "^2.0.0",
     "istanbul": "^0.4.5",
-    "istanbul-lib-coverage": "^1.2.0",
+    "istanbul-lib-coverage": "^3.0.0",
-    "json-loader": "^0.5.7",
+    "mkdirp": "^1.0.4",
-    "mkdirp": "^0.5.1",
+    "mocha": "^7.0.1",
-    "mocha": "^5.1.1",
+    "node-sass": "^4.13.1",
-    "node-sass": "^4.9.0",
+    "react-hot-loader": "^4.12.19",
-    "nsp": "^3.1.0",
+    "sass-loader": "^8.0.2",
-    "react-hot-loader": "^3.1.1",
+    "selenium-standalone": "^6.17.0",
-    "sass-loader": "^7.0.1",
+    "style-loader": "^1.1.3",
-    "selenium-standalone": "^6.14.0",
+    "stylelint": "^13.3.0",
-    "style-loader": "^0.20.3",
+    "stylelint-config-recommended-scss": "^4.2.0",
-    "stylelint": "^9.2.0",
+    "stylelint-scss": "^3.14.2",
-    "stylelint-config-recommended-scss": "^3.2.0",
+    "svg-inline-loader": "^0.8.2",
-    "stylelint-scss": "^3.0.0",
     "transform-loader": "^0.2.4",
-    "uglifyjs-webpack-plugin": "^1.2.4",
+    "uuid": "^7.0.3",
-    "uuid": "^3.1.0",
+    "webdriverio": "^6.0.5",
-    "wdio-mocha-framework": "^0.5.13",
+    "webpack": "^4.41.6",
-    "wdio-phantomjs-service": "^0.2.2",
+    "webpack-bundle-analyzer": "^3.6.0",
-    "wdio-selenium-standalone-service": "0.0.10",
-    "wdio-spec-reporter": "^0.1.2",
-    "webdriverio": "^4.12.0",
-    "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.3.11",
+    "webpack-dev-server": "^3.10.3"
   }
 }

src/components/App.jsx

@@ -1,12 +1,14 @@
+import autoBind from 'react-autobind';
 import React from 'react'
-import Mousetrap from 'mousetrap'
 import cloneDeep from 'lodash.clonedeep'
 import clamp from 'lodash.clamp'
-import {arrayMove} from 'react-sortable-hoc'
+import get from 'lodash.get'
+import {unset} from 'lodash'
+import arrayMove from 'array-move'
 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'
@@ -19,13 +21,14 @@ 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 * as styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec'
+import {latest, validate} from '@mapbox/mapbox-gl-style-spec'
 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'
@@ -33,11 +36,44 @@ import tokens from '../config/tokens.json'
 import isEqual from 'lodash.isequal'
 import Debug from '../libs/debug'
 import queryUtil from '../libs/query-util'
+import {formatLayerId} from './util/format';
 
 import MapboxGl from 'mapbox-gl'
-import { normalizeSourceURL } from 'mapbox-gl/src/util/mapbox'
 
 
+// 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 {
     ...spec,
@@ -54,89 +90,100 @@ 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, {save: false}),
+      port: port,
+      host: params.get("localhost")
     })
 
-    
-    const keyCodes = {
-      "esc": 27,
-      "?": 191,
-      "o": 79,
-      "e": 69,
-      "s": 83,
-      "d": 68,
-      "i": 73,
-      "m": 77,
-    }
 
     const shortcuts = [
       {
-        keyCode: keyCodes["?"],
+        key: "?",
         handler: () => {
           this.toggleModal("shortcuts");
         }
       },
       {
-        keyCode: keyCodes["o"],
+        key: "o",
         handler: () => {
           this.toggleModal("open");
         }
       },
       {
-        keyCode: keyCodes["e"],
+        key: "e",
         handler: () => {
           this.toggleModal("export");
         }
       },
       {
-        keyCode: keyCodes["d"],
+        key: "d",
         handler: () => {
           this.toggleModal("sources");
         }
       },
       {
-        keyCode: keyCodes["s"],
+        key: "s",
         handler: () => {
           this.toggleModal("settings");
         }
       },
       {
-        keyCode: keyCodes["i"],
+        key: "i",
         handler: () => {
-          this.changeInspectMode();
+          this.setMapState(
+            this.state.mapState === "map" ? "inspect" : "map"
+          );
         }
       },
       {
-        keyCode: keyCodes["m"],
+        key: "m",
         handler: () => {
           document.querySelector(".mapboxgl-canvas").focus();
         }
       },
+      {
+        key: "!",
+        handler: () => {
+          this.toggleModal("debug");
+        }
+      },
     ]
 
     document.body.addEventListener("keyup", (e) => {
-      if(e.keyCode === keyCodes["esc"]) {
+      if(e.key === "Escape") {
         e.target.blur();
         document.body.focus();
       }
-      else if(document.activeElement === document.body) {
+      else if(this.state.isOpen.shortcuts || document.activeElement === document.body) {
         const shortcut = shortcuts.find((shortcut) => {
-          return (shortcut.keyCode === e.keyCode)
+          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')
@@ -165,21 +212,33 @@ export default class App extends React.Component {
       selectedLayerIndex: 0,
       sources: {},
       vectorLayers: {},
-      inspectModeEnabled: false,
+      mapState: "map",
-      spec: styleSpec.latest,
+      spec: latest,
+      mapView: {
+        zoom: 0,
+        center: {
+          lng: 0,
+          lat: 0,
+        },
+      },
       isOpen: {
         settings: false,
         sources: false,
         open: false,
         shortcuts: false,
         export: false,
-        survey: localStorage.hasOwnProperty('survey') ? false : true
+        // TODO: Disabled for now, this should be opened on the Nth visit to the editor
+        survey: false,
+        debug: false,
       },
-      mapOptions: {
+      mapboxGlDebugOptions: {
-        showTileBoundaries: queryUtil.asBool(queryObj, "show-tile-boundaries"),
+        showTileBoundaries: false,
-        showCollisionBoxes: queryUtil.asBool(queryObj, "show-collision-boxes")
+        showCollisionBoxes: false,
+        showOverdrawInspector: false,
+      },
+      openlayersDebugOptions: {
+        debugToolbox: false,
       },
-      mapFilter: queryObj["color-blindness-emulation"],
     }
 
     this.layerWatcher = new LayerWatcher({
@@ -187,14 +246,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() {
-    Mousetrap.bind(['mod+z'], this.onUndo.bind(this));
+    window.addEventListener("keydown", this.handleKeyPress);
-    Mousetrap.bind(['mod+y', 'mod+shift+z'], this.onRedo.bind(this));
   }
 
   componentWillUnmount() {
-    Mousetrap.unbind(['mod+z'], this.onUndo.bind(this));
+    window.removeEventListener("keydown", this.handleKeyPress);
-    Mousetrap.unbind(['mod+y', 'mod+shift+z'], this.onRedo.bind(this));
   }
 
   saveStyle(snapshotStyle) {
@@ -217,54 +297,174 @@ export default class App extends React.Component {
     })
   }
 
-  onStyleChanged(newStyle, save=true) {
+  onChangeMetadataProperty = (property, value) => {
-
+    // If we're changing renderer reset the map state.
-    const errors = styleSpec.validate(newStyle, styleSpec.latest)
+    if (
-    if(errors.length === 0) {
+      property === 'maputnik:renderer' &&
-
+      value !== get(this.state.mapStyle, ['metadata', 'maputnik:renderer'], 'mbgljs')
-      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({
-        mapStyle: newStyle,
+        mapState: 'map'
-        errors: [],
+      });
-      })
-    } else {
-      this.setState({
-        errors: errors.map(err => err.message)
-      })
     }
 
+    const changedStyle = {
+      ...this.state.mapStyle,
+      metadata: {
+        ...this.state.mapStyle.metadata,
+        [property]: value
+      }
+    }
+    this.onStyleChanged(changedStyle)
+  }
+
+  onStyleChanged = (newStyle, opts={}) => {
+    opts = {
+      save: true,
+      addRevision: true,
+      ...opts,
+    };
+
+    const errors = validate(newStyle, latest) || [];
+
+    // The validate function doesn't give us errors for duplicate error with
+    // empty string for layer.id, manually deal with that here.
+    const layerErrors = [];
+    if (newStyle && newStyle.layers) {
+      const foundLayers = new Map();
+      newStyle.layers.forEach((layer, index) => {
+        if (layer.id === "" && foundLayers.has(layer.id)) {
+          const message = `Duplicate layer: ${formatLayerId(layer.id)}`;
+          const error = new Error(
+            `layers[${index}]: duplicate layer id [empty_string], previously used`
+          );
+          layerErrors.push(error);
+        }
+        foundLayers.set(layer.id, true);
+      });
+    }
+
+    const mappedErrors = layerErrors.concat(errors).map(error => {
+      // Special case: Duplicate layer id
+      const dupMatch = error.message.match(/layers\[(\d+)\]: (duplicate layer id "?(.*)"?, previously used)/);
+      if (dupMatch) {
+        const [matchStr, index, message] = dupMatch;
+        return {
+          message: error.message,
+          parsed: {
+            type: "layer",
+            data: {
+              index: parseInt(index, 10),
+              key: "id",
+              message,
+            }
+          }
+        }
+      }
+
+      // Special case: Invalid source
+      const invalidSourceMatch = error.message.match(/layers\[(\d+)\]: (source "(?:.*)" not found)/);
+      if (invalidSourceMatch) {
+        const [matchStr, index, message] = invalidSourceMatch;
+        return {
+          message: error.message,
+          parsed: {
+            type: "layer",
+            data: {
+              index: parseInt(index, 10),
+              key: "source",
+              message,
+            }
+          }
+        }
+      }
+
+      const layerMatch = error.message.match(/layers\[(\d+)\]\.(?:(\S+)\.)?(\S+): (.*)/);
+      if (layerMatch) {
+        const [matchStr, index, group, property, message] = layerMatch;
+        const key = (group && property) ? [group, property].join(".") : property;
+        return {
+          message: error.message,
+          parsed: {
+            type: "layer",
+            data: {
+              index: parseInt(index, 10),
+              key,
+              message
+            }
+          }
+        }
+      }
+      else {
+        return {
+          message: error.message,
+        };
+      }
+    });
+
+    let dirtyMapStyle = undefined;
+    if (errors.length > 0) {
+      dirtyMapStyle = cloneDeep(newStyle);
+
+      errors.forEach(error => {
+        const {message} = error;
+        if (message) {
+          try {
+            const objPath = message.split(":")[0];
+            // Errors can be deply nested for example 'layers[0].filter[1][1][0]' we only care upto the property 'layers[0].filter'
+            const unsetPath = objPath.match(/^\S+?\[\d+\]\.[^\[]+/)[0];
+            unset(dirtyMapStyle, unsetPath);
+          }
+          catch (err) {
+            console.warn(err);
+          }
+        }
+      });
+    }
+
+    if(newStyle.glyphs !== this.state.mapStyle.glyphs) {
+      this.updateFonts(newStyle.glyphs)
+    }
+    if(newStyle.sprite !== this.state.mapStyle.sprite) {
+      this.updateIcons(newStyle.sprite)
+    }
+
+    if (opts.addRevision) {
+      this.revisionStore.addRevision(newStyle);
+    }
+    if (opts.save) {
+      this.saveStyle(newStyle);
+    }
+       
+    this.setState({
+      mapStyle: newStyle,
+      dirtyMapStyle: dirtyMapStyle,
+      errors: mappedErrors,
+    })
+
     this.fetchSources();
   }
 
-  onUndo() {
+  onUndo = () => {
     const activeStyle = this.revisionStore.undo()
+
     const messages = undoMessages(this.state.mapStyle, activeStyle)
-    this.saveStyle(activeStyle)
+    this.onStyleChanged(activeStyle, {addRevision: false});
     this.setState({
-      mapStyle: activeStyle,
       infos: messages,
     })
   }
 
-  onRedo() {
+  onRedo = () => {
     const activeStyle = this.revisionStore.redo()
     const messages = redoMessages(this.state.mapStyle, activeStyle)
-    this.saveStyle(activeStyle)
+    this.onStyleChanged(activeStyle, {addRevision: false});
     this.setState({
-      mapStyle: activeStyle,
       infos: messages,
     })
   }
 
-  onMoveLayer(move) {
+  onMoveLayer = (move) => {
     let { oldIndex, newIndex } = move;
     let layers = this.state.mapStyle.layers;
     oldIndex = clamp(oldIndex, 0, layers.length-1);
@@ -282,7 +482,7 @@ export default class App extends React.Component {
     this.onLayersChange(layers);
   }
 
-  onLayersChange(changedLayers) {
+  onLayersChange = (changedLayers) => {
     const changedStyle = {
       ...this.state.mapStyle,
       layers: changedLayers
@@ -290,66 +490,81 @@ export default class App extends React.Component {
     this.onStyleChanged(changedStyle)
   }
 
-  onLayerDestroy(layerId) {
+  onLayerDestroy = (index) => {
     let layers = this.state.mapStyle.layers;
     const remainingLayers = layers.slice(0);
-    const idx = style.indexOfLayer(remainingLayers, layerId)
+    remainingLayers.splice(index, 1);
-    remainingLayers.splice(idx, 1);
     this.onLayersChange(remainingLayers);
   }
 
-  onLayerCopy(layerId) {
+  onLayerCopy = (index) => {
     let layers = this.state.mapStyle.layers;
     const changedLayers = layers.slice(0)
-    const idx = style.indexOfLayer(changedLayers, layerId)
 
-    const clonedLayer = cloneDeep(changedLayers[idx])
+    const clonedLayer = cloneDeep(changedLayers[index])
     clonedLayer.id = clonedLayer.id + "-copy"
-    changedLayers.splice(idx, 0, clonedLayer)
+    changedLayers.splice(index, 0, clonedLayer)
     this.onLayersChange(changedLayers)
   }
 
-  onLayerVisibilityToggle(layerId) {
+  onLayerVisibilityToggle = (index) => {
     let layers = this.state.mapStyle.layers;
     const changedLayers = layers.slice(0)
-    const idx = style.indexOfLayer(changedLayers, layerId)
 
-    const layer = { ...changedLayers[idx] }
+    const layer = { ...changedLayers[index] }
     const changedLayout = 'layout' in layer ? {...layer.layout} : {}
     changedLayout.visibility = changedLayout.visibility === 'none' ? 'visible' : 'none'
 
     layer.layout = changedLayout
-    changedLayers[idx] = layer
+    changedLayers[index] = layer
     this.onLayersChange(changedLayers)
   }
 
 
-  onLayerIdChange(oldId, newId) {
+  onLayerIdChange = (index, oldId, newId) => {
     const changedLayers = this.state.mapStyle.layers.slice(0)
-    const idx = style.indexOfLayer(changedLayers, oldId)
+    changedLayers[index] = {
-
+      ...changedLayers[index],
-    changedLayers[idx] = {
-      ...changedLayers[idx],
       id: newId
     }
 
     this.onLayersChange(changedLayers)
   }
 
-  onLayerChanged(layer) {
+  onLayerChanged = (index, layer) => {
     const changedLayers = this.state.mapStyle.layers.slice(0)
-    const idx = style.indexOfLayer(changedLayers, layer.id)
+    changedLayers[index] = layer
-    changedLayers[idx] = layer
 
     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};
 
@@ -371,7 +586,15 @@ export default class App extends React.Component {
           console.warn("Failed to normalizeSourceURL: ", err);
         }
 
-        fetch(url)
+        try {
+          url = setFetchAccessToken(url, this.state.mapStyle)
+        } catch(err) {
+          console.warn("Failed to setFetchAccessToken: ", err);
+        }
+
+        fetch(url, {
+          mode: 'cors',
+        })
           .then((response) => {
             return response.json();
           })
@@ -406,57 +629,106 @@ export default class App extends React.Component {
     }
   }
 
+  _getRenderer () {
+    const metadata = this.state.mapStyle.metadata || {};
+    return metadata['maputnik:renderer'] || 'mbgljs';
+  }
+
+  onMapChange = (mapView) => {
+    this.setState({
+      mapView,
+    });
+  }
+
   mapRenderer() {
+    const {mapStyle, dirtyMapStyle} = this.state;
+    const metadata = this.state.mapStyle.metadata || {};
+
     const mapProps = {
-      mapStyle: style.replaceAccessTokens(this.state.mapStyle, {allowFallback: true}),
+      mapStyle: (dirtyMapStyle || mapStyle),
-      options: this.state.mapOptions,
+      replaceAccessTokens: (mapStyle) => {
+        return style.replaceAccessTokens(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'
 
     let mapElement;
 
-    // Check if OL3 code has been loaded?
+    // Check if OL code has been loaded?
-    if(renderer === 'ol3') {
+    if(renderer === 'ol') {
-      mapElement = <OpenLayers3Map {...mapProps} />
+      mapElement = <OpenLayersMap
+        {...mapProps}
+        onChange={this.onMapChange}
+        debugToolbox={this.state.openlayersDebugOptions.debugToolbox}
+        onLayerSelect={this.onLayerSelect}
+      />
     } else {
       mapElement = <MapboxGlMap {...mapProps}
-        inspectModeEnabled={this.state.inspectModeEnabled}
+        onChange={this.onMapChange}
+        options={this.state.mapboxGlDebugOptions}
+        inspectModeEnabled={this.state.mapState === "inspect"}
         highlightedLayer={this.state.mapStyle.layers[this.state.selectedLayerIndex]}
-        onLayerSelect={this.onLayerSelect.bind(this)} />
+        onLayerSelect={this.onLayerSelect} />
     }
 
+    let filterName;
+    if(this.state.mapState.match(/^filter-/)) {
+      filterName = this.state.mapState.replace(/^filter-/, "");
+    }
     const elementStyle = {};
-    if(this.state.mapFilter) {
+    if (filterName) {
-      elementStyle.filter = `url('#${this.state.mapFilter}')`;
+      elementStyle.filter = `url('#${filterName}')`;
-    }
+    };
 
-    return <div style={elementStyle}>
+    return <div style={elementStyle} className="maputnik-map__container">
       {mapElement}
     </div>
   }
 
-  onLayerSelect(layerId) {
+  onLayerSelect = (index) => {
-    const idx = style.indexOfLayer(this.state.mapStyle.layers, layerId)
+    this.setState({ selectedLayerIndex: index })
-    this.setState({ selectedLayerIndex: idx })
   }
 
-  toggleModal(modalName) {
+  setModal(modalName, value) {
+    if(modalName === 'survey' && value === false) {
+      localStorage.setItem('survey', '');
+    }
+
     this.setState({
       isOpen: {
         ...this.state.isOpen,
-        [modalName]: !this.state.isOpen[modalName]
+        [modalName]: value
       }
     })
+  }
 
-    if(modalName === 'survey') {
+  toggleModal(modalName) {
-      localStorage.setItem('survey', '');
+    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() {
@@ -465,28 +737,32 @@ export default class App extends React.Component {
     const metadata = this.state.mapStyle.metadata || {}
 
     const toolbar = <Toolbar
+      renderer={this._getRenderer()}
+      mapState={this.state.mapState}
       mapStyle={this.state.mapStyle}
-      inspectModeEnabled={this.state.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
-      onMoveLayer={this.onMoveLayer.bind(this)}
+      onMoveLayer={this.onMoveLayer}
-      onLayerDestroy={this.onLayerDestroy.bind(this)}
+      onLayerDestroy={this.onLayerDestroy}
-      onLayerCopy={this.onLayerCopy.bind(this)}
+      onLayerCopy={this.onLayerCopy}
-      onLayerVisibilityToggle={this.onLayerVisibilityToggle.bind(this)}
+      onLayerVisibilityToggle={this.onLayerVisibilityToggle}
-      onLayersChange={this.onLayersChange.bind(this)}
+      onLayersChange={this.onLayersChange}
-      onLayerSelect={this.onLayerSelect.bind(this)}
+      onLayerSelect={this.onLayerSelect}
       selectedLayerIndex={this.state.selectedLayerIndex}
       layers={layers}
       sources={this.state.sources}
+      errors={this.state.errors}
     />
 
     const layerEditor = selectedLayer ? <LayerEditor
+      key={selectedLayer.id}
       layer={selectedLayer}
       layerIndex={this.state.selectedLayerIndex}
       isFirstLayer={this.state.selectedLayerIndex < 1}
@@ -494,45 +770,63 @@ export default class App extends React.Component {
       sources={this.state.sources}
       vectorLayers={this.state.vectorLayers}
       spec={this.state.spec}
-      onMoveLayer={this.onMoveLayer.bind(this)}
+      onMoveLayer={this.onMoveLayer}
-      onLayerChanged={this.onLayerChanged.bind(this)}
+      onLayerChanged={this.onLayerChanged}
-      onLayerDestroy={this.onLayerDestroy.bind(this)}
+      onLayerDestroy={this.onLayerDestroy}
-      onLayerCopy={this.onLayerCopy.bind(this)}
+      onLayerCopy={this.onLayerCopy}
-      onLayerVisibilityToggle={this.onLayerVisibilityToggle.bind(this)}
+      onLayerVisibilityToggle={this.onLayerVisibilityToggle}
-      onLayerIdChange={this.onLayerIdChange.bind(this)}
+      onLayerIdChange={this.onLayerIdChange}
+      errors={this.state.errors}
     /> : null
 
     const bottomPanel = (this.state.errors.length + this.state.infos.length) > 0 ? <MessagePanel
+      currentLayer={selectedLayer}
+      selectedLayerIndex={this.state.selectedLayerIndex}
+      onLayerSelect={this.onLayerSelect}
+      mapStyle={this.state.mapStyle}
       errors={this.state.errors}
       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')}
+        mapView={this.state.mapView}
+      />
       <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.bind(this)}
+        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.bind(this)}
+        onStyleChanged={this.onStyleChanged}
         isOpen={this.state.isOpen.export}
         onOpenToggle={this.toggleModal.bind(this, 'export')}
       />
       <OpenModal
         isOpen={this.state.isOpen.open}
-        onStyleOpen={this.onStyleChanged.bind(this)}
+        onStyleOpen={this.openStyle}
         onOpenToggle={this.toggleModal.bind(this, 'open')}
       />
       <SourcesModal
         mapStyle={this.state.mapStyle}
-        onStyleChanged={this.onStyleChanged.bind(this)}
+        onStyleChanged={this.onStyleChanged}
         isOpen={this.state.isOpen.sources}
         onOpenToggle={this.toggleModal.bind(this, 'sources')}
       />

src/components/AppLayout.jsx

@@ -26,9 +26,7 @@ class AppLayout extends React.Component {
     return <div className="maputnik-layout">
       {this.props.toolbar}
       <div className="maputnik-layout-list">
-        <ScrollContainer>
+        {this.props.layerList}
-          {this.props.layerList}
-        </ScrollContainer>
       </div>
       <div className="maputnik-layout-drawer">
         <ScrollContainer>

src/components/Button.jsx

@@ -9,16 +9,19 @@ class Button extends React.Component {
     onClick: PropTypes.func,
     style: PropTypes.object,
     className: PropTypes.string,
-    children: PropTypes.node
+    children: PropTypes.node,
+    disabled: PropTypes.bool,
   }
 
   render() {
     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}>
+      style={this.props.style}
+    >
       {this.props.children}
     </button>
   }

src/components/MessagePanel.jsx

@@ -1,15 +1,52 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import {formatLayerId} from './util/format';
 
 class MessagePanel extends React.Component {
   static propTypes = {
     errors: PropTypes.array,
     infos: PropTypes.array,
+    mapStyle: PropTypes.object,
+    onLayerSelect: PropTypes.func,
+    currentLayer: PropTypes.object,
+    selectedLayerIndex: PropTypes.number,
+  }
+
+  static defaultProps = {
+    onLayerSelect: () => {},
   }
 
   render() {
-    const errors = this.props.errors.map((m, i) => {
+    const {selectedLayerIndex} = this.props;
-      return <p key={"error-"+i} className="maputnik-message-panel-error">{m}</p>
+    const errors = this.props.errors.map((error, idx) => {
+      let content;
+      if (error.parsed && error.parsed.type === "layer") {
+        const {parsed} = error;
+        const {mapStyle, currentLayer} = this.props;
+        const layerId = mapStyle.layers[parsed.data.index].id;
+        content = (
+          <>
+            Layer <span>{formatLayerId(layerId)}</span>: {parsed.data.message}
+            {selectedLayerIndex !== parsed.data.index &&
+              <>
+                &nbsp;&mdash;&nbsp;
+                <button
+                  className="maputnik-message-panel__switch-button"
+                  onClick={() => this.props.onLayerSelect(parsed.data.index)}
+                >
+                  switch to layer
+                </button>
+              </>
+            }
+          </>
+        );
+      }
+      else {
+        content = error.message;
+      }
+      return <p key={"error-"+idx} className="maputnik-message-panel-error">
+        {content}
+      </p>
     })
 
     const infos = this.props.infos.map((m, i) => {

src/components/Toolbar.jsx

@@ -1,27 +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 SurveyIcon from 'react-icons/lib/md/assignment-turned-in'
 
 import logoImage from 'maputnik-design/logos/logo-color.svg'
 import pkgJson from '../../package.json'
 
-import style from '../libs/style'
+
+// 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;
+
 
 class IconText extends React.Component {
   static propTypes = {
@@ -75,6 +67,22 @@ class ToolbarLinkHighlighted extends React.Component {
   }
 }
 
+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,
@@ -102,25 +110,64 @@ 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,
     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,
-      }
     }
   }
 
+  handleSelection(val) {
+    this.props.onSetMapState(val);
+  }
+
   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'>
       <div className="maputnik-toolbar__inner">
         <div
@@ -135,15 +182,16 @@ export default class Toolbar extends React.Component {
             target="_blank"
             className="maputnik-toolbar-logo"
           >
-            <img src={logoImage} alt="Maputnik" />
+            <span dangerouslySetInnerHTML={{__html: logoImage}} />
-            <h1>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 wdKey="nav:open" onClick={this.props.onToggleModal.bind(this, 'open')}>
-            <OpenIcon />
+            <MdOpenInBrowser />
             <IconText>Open</IconText>
           </ToolbarAction>
           <ToolbarAction wdKey="nav:export" onClick={this.props.onToggleModal.bind(this, 'export')}>
@@ -151,26 +199,34 @@ export default class Toolbar extends React.Component {
             <IconText>Export</IconText>
           </ToolbarAction>
           <ToolbarAction wdKey="nav:sources" onClick={this.props.onToggleModal.bind(this, 'sources')}>
-            <SourcesIcon />
+            <MdLayers />
             <IconText>Data Sources</IconText>
           </ToolbarAction>
           <ToolbarAction wdKey="nav:settings" onClick={this.props.onToggleModal.bind(this, 'settings')}>
-            <SettingsIcon />
+            <MdSettings />
             <IconText>Style Settings</IconText>
           </ToolbarAction>
-          <ToolbarAction wdKey="nav:inspect" 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"}>
-            <SurveyIcon />
+            <MdAssignmentTurnedIn />
             <IconText>Take the Maputnik Survey</IconText>
           </ToolbarLinkHighlighted>
         </div>

src/components/fields/ColorField.jsx

@@ -2,6 +2,7 @@ import React from 'react'
 import Color from 'color'
 import ChromePicker from 'react-color/lib/components/chrome/Chrome'
 import PropTypes from 'prop-types'
+import lodash from 'lodash';
 
 function formatColor(color) {
   const rgb = color.rgb
@@ -12,24 +13,30 @@ function formatColor(color) {
 class ColorField extends React.Component {
   static propTypes = {
     onChange: PropTypes.func.isRequired,
-    name: PropTypes.string.isRequired,
+    name: PropTypes.string,
     value: PropTypes.string,
     doc: PropTypes.string,
     style: PropTypes.object,
     default: PropTypes.string,
   }
 
-  constructor(props) {
+  state = {
-    super(props)
+    pickerOpened: false
-    this.state = {
+  }
-      pickerOpened: false,
+
-    }
+  constructor () {
+    super();
+    this.onChangeNoCheck = lodash.throttle(this.onChangeNoCheck, 1000/30);
+  }
+
+  onChangeNoCheck (v) {
+    this.props.onChange(v);
   }
 
   //TODO: I much rather would do this with absolute positioning
   //but I am too stupid to get it to work together with fixed position
   //and scrollbars so I have to fallback to JavaScript
-  calcPickerOffset() {
+  calcPickerOffset = () => {
     const elem = this.colorInput
     if(elem) {
       const pos = elem.getBoundingClientRect()
@@ -45,7 +52,7 @@ class ColorField extends React.Component {
     }
   }
 
-  togglePicker() {
+  togglePicker = () => {
     this.setState({ pickerOpened: !this.state.pickerOpened })
   }
 
@@ -60,6 +67,10 @@ class ColorField extends React.Component {
     }
   }
 
+  onChange (v) {
+    this.props.onChange(v === "" ? undefined : v);
+  }
+
   render() {
     const offset = this.calcPickerOffset()
     var currentColor = this.color.object()
@@ -81,11 +92,11 @@ class ColorField extends React.Component {
       }}>
       <ChromePicker
         color={currentColor}
-        onChange={c => this.props.onChange(formatColor(c))}
+        onChange={c => this.onChangeNoCheck(formatColor(c))}
       />
       <div
         className="maputnik-color-picker-offset"
-        onClick={this.togglePicker.bind(this)}
+        onClick={this.togglePicker}
         style={{
           zIndex: -1,
           position: 'fixed',
@@ -108,12 +119,12 @@ class ColorField extends React.Component {
         spellCheck="false"
         className="maputnik-color"
         ref={(input) => this.colorInput = input}
-        onClick={this.togglePicker.bind(this)}
+        onClick={this.togglePicker}
         style={this.props.style}
         name={this.props.name}
         placeholder={this.props.default}
         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

@@ -1,23 +1,63 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
+import {MdInfoOutline, MdHighlightOff} from 'react-icons/md'
+
 export default class DocLabel extends React.Component {
   static propTypes = {
     label: PropTypes.oneOfType([
       PropTypes.object,
       PropTypes.string
     ]).isRequired,
-    doc: PropTypes.string.isRequired,
+    fieldSpec: PropTypes.object,
+    onToggleDoc: PropTypes.func,
+  }
+
+  constructor (props) {
+    super(props);
+    this.state = {
+      open: false,
+    }
+  }
+
+  onToggleDoc = (open) => {
+    this.setState({
+      open,
+    }, () => {
+      if (this.props.onToggleDoc) {
+        this.props.onToggleDoc(this.state.open);
+      }
+    });
   }
 
   render() {
-    return <label className="maputnik-doc-wrapper">
+    const {label, fieldSpec} = this.props;
-      <div className="maputnik-doc-target">
+    const {doc} = fieldSpec || {};
-        <span>{this.props.label}</span>
+
-        <div className="maputnik-doc-popup">
+    if (doc) {
-          {this.props.doc}
+      return <label className="maputnik-doc-wrapper">
+        <div className="maputnik-doc-target">
+          {label}
+          {'\xa0'}
+          <button
+            aria-label={this.state.open ? "close property documentation" : "open property documentation"}
+            className={`maputnik-doc-button maputnik-doc-button--${this.state.open ? 'open' : 'closed'}`}
+            onClick={() => this.onToggleDoc(!this.state.open)}
+          >
+            {this.state.open ? <MdHighlightOff /> : <MdInfoOutline />}
+          </button>
         </div>
-      </div >
+      </label>
-    </label>
+    }
+    else if (label) {
+      return <label className="maputnik-doc-wrapper">
+        <div className="maputnik-doc-target">
+          {label}
+        </div>
+      </label>
+    }
+    else {
+      <div />
+    }
   }
 }

src/components/fields/FunctionSpecField.jsx

@@ -4,16 +4,105 @@ import PropTypes from 'prop-types'
 import SpecProperty from './_SpecProperty'
 import DataProperty from './_DataProperty'
 import ZoomProperty from './_ZoomProperty'
+import ExpressionProperty from './_ExpressionProperty'
+import {function as styleFunction} from '@mapbox/mapbox-gl-style-spec';
+import {findDefaultFromSpec} from '../util/spec-helper';
 
 
+function isLiteralExpression (value) {
+  return (Array.isArray(value) && value.length === 2 && value[0] === "literal");
+}
+
+function isGetExpression (value) {
+  return (
+    Array.isArray(value) &&
+    value.length === 2 &&
+    value[0] === "get"
+  );
+}
+
 function isZoomField(value) {
-  return typeof value === 'object' && value.stops && typeof value.property === 'undefined'
+  return (
+    typeof(value) === 'object' &&
+    value.stops &&
+    typeof(value.property) === 'undefined' &&
+    Array.isArray(value.stops) &&
+    value.stops.length > 1 &&
+    value.stops.every(stop => {
+      return (
+        Array.isArray(stop) &&
+        stop.length === 2
+      );
+    })
+  );
+}
+
+function isIdentityProperty (value) {
+  return (
+    typeof(value) === 'object' &&
+    value.type === "identity" &&
+    value.hasOwnProperty("property")
+  );
+}
+
+function isDataStopProperty (value) {
+  return (
+    typeof(value) === 'object' &&
+    value.stops &&
+    typeof(value.property) !== 'undefined' &&
+    value.stops.length > 1 &&
+    Array.isArray(value.stops) &&
+    value.stops.every(stop => {
+      return (
+        Array.isArray(stop) &&
+        stop.length === 2 &&
+        typeof(stop[0]) === 'object'
+      );
+    })
+  );
 }
 
 function isDataField(value) {
-  return typeof value === 'object' && value.stops && typeof value.property !== 'undefined'
+  return (
+    isIdentityProperty(value) ||
+    isDataStopProperty(value)
+  );
 }
 
+function isPrimative (value) {
+  const valid = ["string", "boolean", "number"];
+  return valid.includes(typeof(value));
+}
+
+function isArrayOfPrimatives (values) {
+  if (Array.isArray(values)) {
+    return values.every(isPrimative);
+  }
+  return false;
+}
+
+function getDataType (value, fieldSpec={}) {
+  if (value === undefined) {
+    return "value";
+  }
+  else if (isPrimative(value)) {
+    return "value";
+  }
+  else if (fieldSpec.type === "array" && isArrayOfPrimatives(value)) {
+    return "value";
+  }
+  else if (isZoomField(value)) {
+    return "zoom_function";
+  }
+  else if (isDataField(value)) {
+    return "data_function";
+  }
+  else {
+    return "expression";
+  }
+}
+
+
 /** Supports displaying spec field for zoom function objects
  * https://www.mapbox.com/mapbox-gl-style-spec/#types-function-zoom-property
  */
@@ -21,7 +110,9 @@ export default class FunctionSpecProperty  extends React.Component {
   static propTypes = {
       onChange: PropTypes.func.isRequired,
       fieldName: PropTypes.string.isRequired,
+      fieldType: PropTypes.string.isRequired,
       fieldSpec: PropTypes.object.isRequired,
+      errors: PropTypes.object,
 
       value: PropTypes.oneOfType([
       PropTypes.object,
@@ -32,7 +123,38 @@ export default class FunctionSpecProperty  extends React.Component {
     ]),
   }
 
-  addStop() {
+  constructor (props) {
+    super();
+    this.state = {
+      dataType: getDataType(props.value, props.fieldSpec),
+      isEditing: false,
+    }
+  }
+
+  static getDerivedStateFromProps(props, state) {
+    // Because otherwise when editing values we end up accidentally changing field type.
+    if (state.isEditing) {
+      return {};
+    }
+    else {
+      return {
+        isEditing: false,
+        dataType: getDataType(props.value, props.fieldSpec)
+      };
+    }
+  }
+
+  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 +175,15 @@ export default class FunctionSpecProperty  extends React.Component {
     this.props.onChange(this.props.fieldName, changedValue)
   }
 
-  deleteStop(stopIdx) {
+  deleteExpression = () => {
+    const {fieldSpec, fieldName} = this.props;
+    this.props.onChange(fieldName, fieldSpec.default);
+    this.setState({
+      dataType: "value",
+    });
+  }
+
+  deleteStop = (stopIdx) => {
     const stops = this.props.value.stops.slice(0)
     stops.splice(stopIdx, 1)
 
@@ -69,65 +199,148 @@ export default class FunctionSpecProperty  extends React.Component {
     this.props.onChange(this.props.fieldName, changedValue)
   }
 
-  makeZoomFunction() {
+  makeZoomFunction = () => {
     const zoomFunc = {
       stops: [
-        [6, this.props.value],
+        [6, this.props.value || findDefaultFromSpec(this.props.fieldSpec)],
-        [10, this.props.value]
+        [10, this.props.value || findDefaultFromSpec(this.props.fieldSpec)]
       ]
     }
     this.props.onChange(this.props.fieldName, zoomFunc)
   }
 
-  makeDataFunction() {
+  undoExpression = () => {
+    const {value, fieldName} = this.props;
+
+    if (isGetExpression(value)) {
+      this.props.onChange(fieldName, {
+        "type": "identity",
+        "property": value[1]
+      });
+      this.setState({
+        dataType: "value",
+      });
+    }
+    else if (isLiteralExpression(value)) {
+      this.props.onChange(fieldName, value[1]);
+      this.setState({
+        dataType: "value",
+      });
+    }
+  }
+
+  canUndo = () => {
+    const {value, fieldSpec} = this.props;
+    return (
+      isGetExpression(value) ||
+      isLiteralExpression(value) ||
+      isPrimative(value) ||
+      (Array.isArray(value) && fieldSpec.type === "array")
+    );
+  }
+
+  makeExpression = () => {
+    const {value, fieldSpec} = this.props;
+    let expression;
+
+    if (typeof(value) === "object" && 'stops' in value) {
+      expression = styleFunction.convertFunction(value, fieldSpec);
+    }
+    else if (isIdentityProperty(value)) {
+      expression = ["get", value.property];
+    }
+    else {
+      expression = ["literal", value || this.props.fieldSpec.default];
+    }
+    this.props.onChange(this.props.fieldName, expression);
+  }
+
+  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 || findDefaultFromSpec(this.props.fieldSpec)],
-        [{zoom: 10, value: 0}, this.props.value]
+        [{zoom: 10, value: stopValue}, this.props.value || findDefaultFromSpec(this.props.fieldSpec)]
       ]
     }
     this.props.onChange(this.props.fieldName, dataFunc)
   }
 
+  onMarkEditing = () => {
+    this.setState({isEditing: true});
+  }
+
+  onUnmarkEditing = () => {
+    this.setState({isEditing: false});
+  }
+
   render() {
+    const {dataType} = this.state;
     const propClass = this.props.fieldSpec.default === this.props.value ? "maputnik-default-property" : "maputnik-modified-property"
     let specField;
 
-    if (isZoomField(this.props.value)) {
+    if (dataType === "expression") {
       specField = (
-        <ZoomProperty
+        <ExpressionProperty
-          onChange={this.props.onChange.bind(this)}
+          errors={this.props.errors}
+          onChange={this.props.onChange.bind(this, this.props.fieldName)}
+          canUndo={this.canUndo}
+          onUndo={this.undoExpression}
+          onDelete={this.deleteExpression}
+          fieldType={this.props.fieldType}
           fieldName={this.props.fieldName}
           fieldSpec={this.props.fieldSpec}
           value={this.props.value}
-          onDeleteStop={this.deleteStop.bind(this)}
+          onFocus={this.onMarkEditing}
-          onAddStop={this.addStop.bind(this)}
+          onBlur={this.onUnmarkEditing}
+        />
+      );
+    }
+    else if (dataType === "zoom_function") {
+      specField = (
+        <ZoomProperty
+          errors={this.props.errors}
+          onChange={this.props.onChange.bind(this)}
+          fieldType={this.props.fieldType}
+          fieldName={this.props.fieldName}
+          fieldSpec={this.props.fieldSpec}
+          value={this.props.value}
+          onDeleteStop={this.deleteStop}
+          onAddStop={this.addStop}
+          onExpressionClick={this.makeExpression} 
         />
       )
     }
-    else if (isDataField(this.props.value)) {
+    else if (dataType === "data_function") {
       specField = (
         <DataProperty
+          errors={this.props.errors}
           onChange={this.props.onChange.bind(this)}
+          fieldType={this.props.fieldType}
           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}
+          onExpressionClick={this.makeExpression} 
         />
       )
     }
     else {
       specField = (
         <SpecProperty
+          errors={this.props.errors}
           onChange={this.props.onChange.bind(this)}
+          fieldType={this.props.fieldType}
           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} 
+          onExpressionClick={this.makeExpression} 
         />
       )
     }

src/components/fields/PropertyGroup.jsx

@@ -40,26 +40,31 @@ export default class PropertyGroup extends React.Component {
     groupFields: PropTypes.array.isRequired,
     onChange: PropTypes.func.isRequired,
     spec: PropTypes.object.isRequired,
+    errors: PropTypes.object,
   }
 
-  onPropertyChange(property, newValue) {
+  onPropertyChange = (property, newValue) => {
     const group = getGroupName(this.props.spec, this.props.layer.type, property)
     this.props.onChange(group , property, newValue)
   }
 
   render() {
+    const {errors} = this.props;
     const fields = this.props.groupFields.map(fieldName => {
       const fieldSpec = getFieldSpec(this.props.spec, this.props.layer.type, fieldName)
 
       const paint = this.props.layer.paint || {}
       const layout = this.props.layer.layout || {}
       const fieldValue = fieldName in paint ? paint[fieldName] : layout[fieldName]
+      const fieldType = fieldName in paint ? 'paint' : 'layout';
 
       return <FunctionSpecField
-        onChange={this.onPropertyChange.bind(this)}
+        errors={errors}
+        onChange={this.onPropertyChange}
         key={fieldName}
         fieldName={fieldName}
-        value={fieldValue === undefined ? fieldSpec.default : fieldValue}
+        value={fieldValue}
+        fieldType={fieldType}
         fieldSpec={fieldSpec}
       />
     })

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'
@@ -12,6 +11,7 @@ import ArrayInput from '../inputs/ArrayInput'
 import DynamicArrayInput from '../inputs/DynamicArrayInput'
 import FontInput from '../inputs/FontInput'
 import IconInput from '../inputs/IconInput'
+import EnumInput from '../inputs/EnumInput'
 import capitalize from 'lodash.capitalize'
 
 const iconProperties = ['background-pattern', 'fill-pattern', 'line-pattern', 'fill-extrusion-pattern', 'icon-image']
@@ -71,17 +71,12 @@ export default class SpecField extends React.Component {
         case 'enum':
           const options = Object.keys(this.props.fieldSpec.values).map(v => [v, capitalize(v)])
 
-          if(options.length <= 3 && optionsLabelLength(options) <= 20) {
+          return <EnumInput
-            return <MultiButtonInput
+            {...commonProps}
-              {...commonProps}
+            options={options}
-              options={options}
+          />
-            />
+        case 'resolvedImage':
-          } else {
+        case 'formatted':
-            return <SelectInput
-              {...commonProps}
-              options={options}
-            />
-          }
         case 'string':
           if(iconProperties.indexOf(this.props.fieldName) >= 0) {
             return <IconInput
@@ -119,6 +114,7 @@ export default class SpecField extends React.Component {
             } else {
               return <DynamicArrayInput
                 {...commonProps}
+                fieldSpec={this.props.fieldSpec}
                 type={this.props.fieldSpec.value}
               />
             }

src/components/fields/_DataProperty.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import {mdiFunctionVariant, mdiTableRowPlusAfter} from '@mdi/js';
 
 import Button from '../Button'
 import SpecField from './SpecField'
@@ -8,17 +9,41 @@ import StringInput from '../inputs/StringInput'
 import SelectInput from '../inputs/SelectInput'
 import DocLabel from './DocLabel'
 import InputBlock from '../inputs/InputBlock'
+import docUid from '../../libs/document-uid'
+import sortNumerically from '../../libs/sort-numerically'
+import {findDefaultFromSpec} from '../util/spec-helper';
 
 import labelFromFieldName from './_labelFromFieldName'
 import DeleteStopButton from './_DeleteStopButton'
 
 
+
+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 DataProperty extends React.Component {
   static propTypes = {
     onChange: PropTypes.func,
     onDeleteStop: PropTypes.func,
     onAddStop: PropTypes.func,
+    onExpressionClick: PropTypes.func,
     fieldName: PropTypes.string,
+    fieldType: PropTypes.string,
     fieldSpec: PropTypes.object,
     value: PropTypes.oneOfType([
       PropTypes.object,
@@ -27,10 +52,35 @@ export default class DataProperty extends React.Component {
       PropTypes.bool,
       PropTypes.array
     ]),
+    errors: PropTypes.object,
+  }
+
+  state = {
+    refs: {}
+  }
+
+  componentDidMount() {
+    const newRefs = setStopRefs(this.props, this.state);
+
+    if(newRefs) {
+      this.setState({
+        refs: newRefs
+      })
+    }
+  }
+
+  static getDerivedStateFromProps(props, state) {
+    const newRefs = setStopRefs(props, state);
+    if(newRefs) {
+      return {
+        refs: newRefs
+      };
+    }
+    return null;
   }
 
   getFieldFunctionType(fieldSpec) {
-    if (fieldSpec.function === "interpolated") {
+    if (fieldSpec.expression.interpolated) {
       return "exponential"
     }
     if (fieldSpec.type === "number") {
@@ -39,25 +89,76 @@ export default class DataProperty extends React.Component {
     return "categorical"
   }
 
-  getDataFunctionTypes(functionType) {
+  getDataFunctionTypes(fieldSpec) {
-    if (functionType === "interpolated") {
+    if (fieldSpec.expression.interpolated) {
-      return ["categorical", "interval", "exponential"]
+      return ["categorical", "interval", "exponential", "identity"]
     }
     else {
-      return ["categorical", "interval"]
+      return ["categorical", "interval", "identity"]
     }
   }
 
+  // Order the stops altering the refs to reflect their new position.
+  orderStopsByZoom(stops) {
+    const mappedWithRef = stops
+      .map((stop, idx) => {
+        return {
+          ref: this.state.refs[idx],
+          data: stop
+        }
+      })
+      // Sort by zoom
+      .sort((a, b) => sortNumerically(a.data[0].zoom, b.data[0].zoom));
+
+    // Fetch the new position of the stops
+    const newRefs = {};
+    mappedWithRef
+      .forEach((stop, idx) =>{
+        newRefs[idx] = stop.ref;
+      })
+
+    this.setState({
+      refs: newRefs
+    });
+
+    return mappedWithRef.map((item) => item.data);
+  }
+
+  onChange = (fieldName, value) => {
+    if (value.type === "identity") {
+      value = {
+        type: value.type,
+        property: value.property,
+      };
+    }
+    else {
+      const stopValue = value.type === 'categorical' ? '' : 0;
+      value = {
+        property: "",
+        type: value.type,
+        // Default props if they don't already exist.
+        stops: [
+          [{zoom: 6, value: stopValue}, findDefaultFromSpec(this.props.fieldSpec)],
+          [{zoom: 10, value: stopValue}, findDefaultFromSpec(this.props.fieldSpec)]
+        ],
+        ...value,
+      }
+    }
+    this.props.onChange(fieldName, value);
+  }
 
   changeStop(changeIdx, stopData, value) {
     const stops = this.props.value.stops.slice(0)
     const changedStop = stopData.zoom === undefined ? stopData.value : stopData
     stops[changeIdx] = [changedStop, value]
+
+    const orderedStops = this.orderStopsByZoom(stops);
+
     const changedValue = {
       ...this.props.value,
-      stops: stops,
+      stops: orderedStops,
     }
-    this.props.onChange(this.props.fieldName, changedValue)
+    this.onChange(this.props.fieldName, changedValue)
   }
 
   changeDataProperty(propName, propVal) {
@@ -67,115 +168,151 @@ export default class DataProperty extends React.Component {
     else {
       delete this.props.value[propName]
     }
-    this.props.onChange(this.props.fieldName, this.props.value)
+    this.onChange(this.props.fieldName, this.props.value)
   }
 
   render() {
+    const {fieldName, fieldType, errors} = this.props;
+
     if (typeof this.props.value.type === "undefined") {
       this.props.value.type = this.getFieldFunctionType(this.props.fieldSpec)
     }
 
-    const dataFields = this.props.value.stops.map((stop, idx) => {
+    let dataFields;
-      const zoomLevel = typeof stop[0] === 'object' ? stop[0].zoom : undefined;
+    if (this.props.value.stops) {
-      const dataLevel = typeof stop[0] === 'object' ? stop[0].value : stop[0];
+      dataFields = this.props.value.stops.map((stop, idx) => {
-      const value = stop[1]
+        const zoomLevel = typeof stop[0] === 'object' ? stop[0].zoom : undefined;
-      const deleteStopBtn = <DeleteStopButton onClick={this.props.onDeleteStop.bind(this, idx)} />
+        const key  = this.state.refs[idx];
+        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)} />
 
-      const dataProps = {
+        const dataProps = {
-        label: "Data value",
+          label: "Data value",
-        value: dataLevel,
+          value: dataLevel,
-        onChange: newData => this.changeStop(idx, { zoom: zoomLevel, value: newData }, value)
+          onChange: newData => this.changeStop(idx, { zoom: zoomLevel, value: newData }, value)
-      }
+        }
 
-      let dataInput;
+        let dataInput;
-      if(this.props.value.type === "categorical") {
+        if(this.props.value.type === "categorical") {
-        dataInput = <StringInput {...dataProps} />
+          dataInput = <StringInput {...dataProps} />
-      }
+        }
-      else {
+        else {
-        dataInput = <NumberInput {...dataProps} />
+          dataInput = <NumberInput {...dataProps} />
-      }
+        }
 
-      let zoomInput = null;
+        let zoomInput = null;
-      if(zoomLevel !== undefined) {
+        if(zoomLevel !== undefined) {
-        zoomInput = <div className="maputnik-data-spec-property-stop-edit">
+          zoomInput = <div className="maputnik-data-spec-property-stop-edit">
-          <NumberInput
+            <NumberInput
-            value={zoomLevel}
+              value={zoomLevel}
-            onChange={newZoom => this.changeStop(idx, {zoom: newZoom, value: dataLevel}, value)}
+              onChange={newZoom => this.changeStop(idx, {zoom: newZoom, value: dataLevel}, value)}
-            min={0}
+              min={0}
-            max={22}
+              max={22}
-          />
-        </div>
-      }
-
-      return <InputBlock key={idx} action={deleteStopBtn} label="">
-        {zoomInput}
-        <div className="maputnik-data-spec-property-stop-data">
-          {dataInput}
-        </div>
-        <div className="maputnik-data-spec-property-stop-value">
-          <SpecField
-            fieldName={this.props.fieldName}
-            fieldSpec={this.props.fieldSpec}
-            value={value}
-            onChange={(_, newValue) => this.changeStop(idx, {zoom: zoomLevel, value: dataLevel}, newValue)}
-          />
-        </div>
-      </InputBlock>
-    })
-
-    return <div className="maputnik-data-spec-block">
-    <div className="maputnik-data-spec-property">
-      <InputBlock
-        doc={this.props.fieldSpec.doc}
-        label={labelFromFieldName(this.props.fieldName)}
-      >
-        <div className="maputnik-data-spec-property-group">
-          <DocLabel
-            label="Property"
-            doc={"Input a data property to base styles off of."}
-          />
-          <div className="maputnik-data-spec-property-input">
-            <StringInput
-              value={this.props.value.property}
-              onChange={propVal => this.changeDataProperty("property", propVal)}
             />
           </div>
-        </div>
+        }
-        <div className="maputnik-data-spec-property-group">
+
-          <DocLabel
+        const errorKeyStart = `${fieldType}.${fieldName}.stops[${idx}]`;
-            label="Type"
+        const foundErrors = Object.entries(errors).filter(([key, error]) => {
-            doc={"Select a type of data scale (default is 'categorical')."}
+          return key.startsWith(errorKeyStart);
-          />
+        });
-          <div className="maputnik-data-spec-property-input">
+
-            <SelectInput
+        const message = foundErrors.map(([key, error]) => {
-              value={this.props.value.type}
+          return error.message;
-              onChange={propVal => this.changeDataProperty("type", propVal)}
+        }).join("");
-              options={this.getDataFunctionTypes(this.props.fieldSpec.function)}
+        const error = message ? {message} : undefined;
-            />
+
+        return <InputBlock
+          error={error}
+          key={key}
+          action={deleteStopBtn}
+          label=""
+        >
+          {zoomInput}
+          <div className="maputnik-data-spec-property-stop-data">
+            {dataInput}
           </div>
-        </div>
+          <div className="maputnik-data-spec-property-stop-value">
-        <div className="maputnik-data-spec-property-group">
-          <DocLabel
-            label="Default"
-            doc={"Input a default value for data if not covered by the scales."}
-          />
-          <div className="maputnik-data-spec-property-input">
             <SpecField
               fieldName={this.props.fieldName}
               fieldSpec={this.props.fieldSpec}
-              value={this.props.value.default}
+              value={value}
-              onChange={(_, propVal) => this.changeDataProperty("default", propVal)}
+              onChange={(_, newValue) => this.changeStop(idx, {zoom: zoomLevel, value: dataLevel}, newValue)}
             />
           </div>
-        </div>
+        </InputBlock>
-      </InputBlock>
+      })
-    </div>
+    }
-      {dataFields}
+
+    return <div className="maputnik-data-spec-block">
+      <div className="maputnik-data-spec-property">
+        <InputBlock
+          fieldSpec={this.props.fieldSpec}
+          label={labelFromFieldName(this.props.fieldName)}
+        >
+          <div className="maputnik-data-spec-property-group">
+            <DocLabel
+              label="Type"
+            />
+            <div className="maputnik-data-spec-property-input">
+              <SelectInput
+                value={this.props.value.type}
+                onChange={propVal => this.changeDataProperty("type", propVal)}
+                title={"Select a type of data scale (default is 'categorical')."}
+                options={this.getDataFunctionTypes(this.props.fieldSpec)}
+              />
+            </div>
+          </div>
+          <div className="maputnik-data-spec-property-group">
+            <DocLabel
+              label="Property"
+            />
+            <div className="maputnik-data-spec-property-input">
+              <StringInput
+                value={this.props.value.property}
+                title={"Input a data property to base styles off of."}
+                onChange={propVal => this.changeDataProperty("property", propVal)}
+              />
+            </div>
+          </div>
+          {dataFields &&
+            <div className="maputnik-data-spec-property-group">
+              <DocLabel
+                label="Default"
+              />
+              <div className="maputnik-data-spec-property-input">
+                <SpecField
+                  fieldName={this.props.fieldName}
+                  fieldSpec={this.props.fieldSpec}
+                  value={this.props.value.default}
+                  onChange={(_, propVal) => this.changeDataProperty("default", propVal)}
+                />
+              </div>
+            </div>
+          }
+        </InputBlock>
+      </div>
+      {dataFields &&
+        <>
+          {dataFields}
+          <Button
+            className="maputnik-add-stop"
+            onClick={this.props.onAddStop.bind(this)}
+          >
+            <svg style={{width:"14px", height:"14px", verticalAlign: "text-bottom"}} viewBox="0 0 24 24">
+              <path fill="currentColor" d={mdiTableRowPlusAfter} />
+            </svg> Add stop
+          </Button>
+        </>
+      }
       <Button
         className="maputnik-add-stop"
-        onClick={this.props.onAddStop.bind(this)}
+        onClick={this.props.onExpressionClick.bind(this)}
       >
-        Add stop
+        <svg style={{width:"14px", height:"14px", verticalAlign: "text-bottom"}} viewBox="0 0 24 24">
+          <path fill="currentColor" d={mdiFunctionVariant} />
+        </svg> Convert to expression
       </Button>
     </div>
   }

src/components/fields/_DeleteStopButton.jsx

@@ -1,9 +1,8 @@
 import React from 'react'
 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 {
@@ -15,11 +14,9 @@ export default class DeleteStopButton extends React.Component {
     return <Button
       className="maputnik-delete-stop"
       onClick={this.props.onClick}
+      title={"Remove zoom level stop."}
     >
-      <DocLabel
+      <MdDelete />
-        label={<DeleteIcon />}
-        doc={"Remove zoom level stop."}
-      />
     </Button>
   }
 }

src/components/fields/_ExpressionProperty.jsx

@@ -0,0 +1,135 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import InputBlock from '../inputs/InputBlock'
+import Button from '../Button'
+import {MdDelete, MdUndo} from 'react-icons/md'
+import StringInput from '../inputs/StringInput'
+
+import labelFromFieldName from './_labelFromFieldName'
+import stringifyPretty from 'json-stringify-pretty-compact'
+import JSONEditor from '../layers/JSONEditor'
+
+
+export default class ExpressionProperty extends React.Component {
+  static propTypes = {
+    onDelete: PropTypes.func,
+    fieldName: PropTypes.string,
+    fieldType: PropTypes.string,
+    fieldSpec: PropTypes.object,
+    value: PropTypes.any,
+    errors: PropTypes.object,
+    onChange: PropTypes.func,
+    onUndo: PropTypes.func,
+    canUndo: PropTypes.func,
+    onFocus: PropTypes.func,
+    onBlur: PropTypes.func,
+  }
+
+  static defaultProps = {
+    errors: {},
+    onFocus: () => {},
+    onBlur: () => {},
+  }
+
+  constructor (props) {
+    super();
+    this.state = {
+      jsonError: false,
+    };
+  }
+
+  onJSONInvalid = (err) => {
+    this.setState({
+      jsonError: true,
+    })
+  }
+
+  onJSONValid = () => {
+    this.setState({
+      jsonError: false,
+    })
+  }
+
+  render() {
+    const {errors, fieldName, fieldType, value, canUndo} = this.props;
+    const {jsonError} = this.state;
+    const undoDisabled = canUndo ? !canUndo() : true;
+
+    const deleteStopBtn = (
+      <>
+        {this.props.onUndo &&
+          <Button
+            key="undo_action"
+            onClick={this.props.onUndo}
+            disabled={undoDisabled}
+            className="maputnik-delete-stop"
+          >
+            <MdUndo />
+          </Button>
+        }
+        <Button
+          key="delete_action"
+          onClick={this.props.onDelete}
+          className="maputnik-delete-stop"
+        >
+          <MdDelete />
+        </Button>
+      </>
+    );
+
+    const fieldKey = fieldType === undefined ? fieldName : `${fieldType}.${fieldName}`;
+
+    const fieldError = errors[fieldKey];
+    const errorKeyStart = `${fieldKey}[`;
+    const foundErrors = [];
+
+    function getValue (data) {
+      return stringifyPretty(data, {indent: 2, maxLength: 38})
+    }
+    
+    if (jsonError) {
+      foundErrors.push({message: "Invalid JSON"});
+    }
+    else {
+      Object.entries(errors)
+      .filter(([key, error]) => {
+        return key.startsWith(errorKeyStart);
+      })
+      .forEach(([key, error]) => {
+        return foundErrors.push(error);
+      })
+
+      if (fieldError) {
+        foundErrors.push(fieldError);
+      }
+    }
+
+    return <InputBlock
+      error={foundErrors}
+      fieldSpec={this.props.fieldSpec}
+      label={labelFromFieldName(this.props.fieldName)}
+      action={deleteStopBtn}
+      wideMode={true}
+    >
+      <JSONEditor
+        mode={{name: "mgl"}}
+        lint={{
+          context: "expression",
+          spec: this.props.fieldSpec,
+        }}
+        className="maputnik-expression-editor"
+        onFocus={this.props.onFocus}
+        onBlur={this.props.onBlur}
+        onJSONInvalid={this.onJSONInvalid}
+        onJSONValid={this.onJSONValid}
+        layer={value}
+        lineNumbers={false}
+        maxHeight={200}
+        lineWrapping={true}
+        getValue={getValue}
+        onChange={this.props.onChange}
+      />
+    </InputBlock>
+  }
+}

src/components/fields/_FunctionButtons.jsx

@@ -1,49 +1,77 @@
 import React from 'react'
 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'
+import {mdiFunctionVariant} from '@mdi/js';
 
 
+/**
+ * So here we can't just check is `Array.isArray(value)` because certain
+ * properties accept arrays as values, for example `text-font`. So we must try
+ * and create an expression.
+ */
+function isExpression(value, fieldSpec={}) {
+  if (!Array.isArray(value)) {
+    return false;
+  }
+  try {
+    expression.createExpression(value, fieldSpec);
+    return true;
+  }
+  catch (err) {
+    return false;
+  }
+}
+
 export default class FunctionButtons extends React.Component {
   static propTypes = {
     fieldSpec: PropTypes.object,
     onZoomClick: PropTypes.func,
     onDataClick: PropTypes.func,
+    onExpressionClick: PropTypes.func,
   }
 
   render() {
-    let makeZoomButton, makeDataButton
+    let makeZoomButton, makeDataButton, expressionButton;
+
     if (this.props.fieldSpec.expression.parameters.includes('zoom')) {
+      expressionButton = (
+        <Button
+          className="maputnik-make-zoom-function"
+          onClick={this.props.onExpressionClick}
+        >
+          <svg style={{width:"14px", height:"14px", verticalAlign: "middle"}} viewBox="0 0 24 24">
+            <path fill="currentColor" d={mdiFunctionVariant} />
+          </svg>
+        </Button>
+      );
+
       makeZoomButton = <Button
         className="maputnik-make-zoom-function"
         onClick={this.props.onZoomClick}
+        title={"Turn property into a zoom function to enable a map feature to change with map's zoom level."}
       >
-        <DocLabel
+        <MdFunctions />
-          label={<FunctionIcon />}
-          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}
+          title={"Turn property into a data function to enable a map feature to change according to data properties and the map's zoom level."}
         >
-          <DocLabel
+          <MdInsertChart />
-            label={<MdInsertChart />}
-            cursorTargetStyle={{ cursor: 'pointer' }}
-            doc={"Turn property into a data function to enable a map feature to change according to data properties and the map's zoom level."}
-          />
         </Button>
       }
-      return <div>{makeDataButton}{makeZoomButton}</div>
+      return <div>
+        {expressionButton}
+        {makeDataButton}
+        {makeZoomButton}
+      </div>
     }
     else {
-      return null
+      return <div>{expressionButton}</div>
     }
   }
 }

src/components/fields/_SpecProperty.jsx

@@ -13,18 +13,33 @@ export default class SpecProperty extends React.Component {
     onZoomClick: PropTypes.func.isRequired,
     onDataClick: PropTypes.func.isRequired,
     fieldName: PropTypes.string,
-    fieldSpec: PropTypes.object
+    fieldType: PropTypes.string,
+    fieldSpec: PropTypes.object,
+    value: PropTypes.any,
+    errors: PropTypes.object,
+    onExpressionClick: PropTypes.func,
+  }
+
+  static defaultProps = {
+    errors: {},
   }
 
   render() {
+    const {errors, fieldName, fieldType} = this.props;
+
     const functionBtn = <FunctionButtons
       fieldSpec={this.props.fieldSpec}
       onZoomClick={this.props.onZoomClick}
       onDataClick={this.props.onDataClick} 
+      value={this.props.value}
+      onExpressionClick={this.props.onExpressionClick} 
     />
 
+    const error = errors[fieldType+"."+fieldName];
+
     return <InputBlock
-      doc={this.props.fieldSpec.doc}
+      error={error}
+      fieldSpec={this.props.fieldSpec}
       label={labelFromFieldName(this.props.fieldName)}
       action={functionBtn}
     >

src/components/fields/_ZoomProperty.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import {mdiFunctionVariant, mdiTableRowPlusAfter} from '@mdi/js';
 
 import Button from '../Button'
 import SpecField from './SpecField'
@@ -13,13 +14,40 @@ 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,
     onDeleteStop: PropTypes.func,
     onAddStop: PropTypes.func,
+    onExpressionClick: PropTypes.func,
+    fieldType: PropTypes.string,
     fieldName: PropTypes.string,
     fieldSpec: PropTypes.object,
+    errors: PropTypes.object,
     value: PropTypes.oneOfType([
       PropTypes.object,
       PropTypes.string,
@@ -29,45 +57,17 @@ export default class ZoomProperty extends React.Component {
     ]),
   }
 
+  static defaultProps = {
+    errors: {},
+  }
 
-  constructor() {
+  state = {
-    super()
+    refs: {}
-    this.state = {
-      refs: {}
-    }
   }
 
   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;
-  }
-
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    const newRefs = this.setStopRefs(nextProps);
     if(newRefs) {
       this.setState({
         refs: newRefs
@@ -75,6 +75,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
@@ -115,15 +125,28 @@ export default class ZoomProperty extends React.Component {
   }
 
   render() {
+    const {fieldName, fieldType, errors} = this.props;
+
     const zoomFields = this.props.value.stops.map((stop, idx) => {
       const zoomLevel = stop[0]
       const key  = this.state.refs[idx];
       const value = stop[1]
       const deleteStopBtn= <DeleteStopButton onClick={this.props.onDeleteStop.bind(this, idx)} />
 
+      const errorKeyStart = `${fieldType}.${fieldName}.stops[${idx}]`;
+      const foundErrors = Object.entries(errors).filter(([key, error]) => {
+        return key.startsWith(errorKeyStart);
+      });
+
+      const message = foundErrors.map(([key, error]) => {
+        return error.message;
+      }).join("");
+      const error = message ? {message} : undefined;
+
       return <InputBlock
+        error={error}
         key={key}
-        doc={this.props.fieldSpec.doc}
+        fieldSpec={this.props.fieldSpec}
         label={labelFromFieldName(this.props.fieldName)}
         action={deleteStopBtn}
       >
@@ -154,7 +177,17 @@ export default class ZoomProperty extends React.Component {
         className="maputnik-add-stop"
         onClick={this.props.onAddStop.bind(this)}
       >
-        Add stop
+        <svg style={{width:"14px", height:"14px", verticalAlign: "text-bottom"}} viewBox="0 0 24 24">
+          <path fill="currentColor" d={mdiTableRowPlusAfter} />
+        </svg> Add stop
+      </Button>
+      <Button
+        className="maputnik-add-stop"
+        onClick={this.props.onExpressionClick.bind(this)}
+      >
+        <svg style={{width:"14px", height:"14px", verticalAlign: "text-bottom"}} viewBox="0 0 24 24">
+          <path fill="currentColor" d={mdiFunctionVariant} />
+        </svg> Convert to expression
       </Button>
     </div>
   }

src/components/fields/_labelFromFieldName.js

@@ -1,6 +1,13 @@
 import capitalize from 'lodash.capitalize'
 
 export default function labelFromFieldName(fieldName) {
-  let label = fieldName.split('-').slice(1).join(' ')
+  let label;
-  return capitalize(label)
+  const parts = fieldName.split('-');
+  if (parts.length > 1) {
+    label = fieldName.split('-').slice(1).join(' ');
+  }
+  else {
+    label = fieldName;
+  }
+  return capitalize(label);
 }

src/components/filter/FilterEditor.jsx

@@ -1,16 +1,86 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { combiningFilterOps } from '../../libs/filterops.js'
+import {mdiTableRowPlusAfter} from '@mdi/js';
 
-import * as styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec'
+import {latest, validate, migrate} from '@mapbox/mapbox-gl-style-spec'
 import DocLabel from '../fields/DocLabel'
 import SelectInput from '../inputs/SelectInput'
+import InputBlock from '../inputs/InputBlock'
 import SingleFilterEditor from './SingleFilterEditor'
 import FilterEditorBlock from './FilterEditorBlock'
 import Button from '../Button'
+import SpecDoc from '../inputs/SpecDoc'
+import ExpressionProperty from '../fields/_ExpressionProperty';
+import {mdiFunctionVariant} from '@mdi/js';
 
-import DeleteIcon from 'react-icons/lib/md/delete'
+
-import AddIcon from 'react-icons/lib/fa/plus'
+function combiningFilter (props) {
+  let filter = props.filter || ['all'];
+
+  if (!Array.isArray(filter)) {
+    return filter;
+  }
+
+  let combiningOp = filter[0];
+  let filters = filter.slice(1);
+
+  if(combiningFilterOps.indexOf(combiningOp) < 0) {
+    combiningOp = 'all';
+    filters = [filter.slice(0)];
+  }
+
+  return [combiningOp, ...filters];
+}
+
+function migrateFilter (filter) {
+  return migrate(createStyleFromFilter(filter)).layers[0].filter;
+}
+
+function createStyleFromFilter (filter) {
+  return {
+    "id": "tmp",
+    "version": 8,
+    "name": "Empty Style",
+    "metadata": {"maputnik:renderer": "mbgljs"},
+    "sources": {
+      "tmp": {
+        "type": "geojson",
+        "data": {}
+      }
+    },
+    "sprite": "",
+    "glyphs": "https://orangemug.github.io/font-glyphs/glyphs/{fontstack}/{range}.pbf",
+    "layers": [
+      {
+        id: "tmp",
+        type: "fill",
+        source: "tmp",
+        filter: filter,
+      },
+    ],
+  };
+}
+
+/**
+ * This is doing way more work than we need it to, however validating a whole
+ * style if the only thing that's exported from mapbox-gl-style-spec at the
+ * moment. Not really an issue though as it take ~0.1ms to calculate.
+ */
+function checkIfSimpleFilter (filter) {
+  if (!filter || !combiningFilterOps.includes(filter[0])) {
+    return false;
+  }
+
+  // Because "none" isn't supported by the next expression syntax we can test
+  // with ["none", ...] because it'll return false if it's a new style
+  // expression.
+  const moddedFilter = ["none", ...filter.slice(1)];
+  const tmpStyle = createStyleFromFilter(moddedFilter)
+
+  const errors = validate(tmpStyle);
+  return (errors.length < 1);
+}
 
 function hasCombiningFilter(filter) {
   return combiningFilterOps.indexOf(filter[0]) >= 0
@@ -29,86 +99,215 @@ export default class CombiningFilterEditor extends React.Component {
     /** Properties of the vector layer and the available fields */
     properties: PropTypes.object,
     filter: PropTypes.array,
+    errors: PropTypes.object,
     onChange: PropTypes.func.isRequired,
   }
 
-  // Convert filter to combining filter
+  static defaultProps = {
-  combiningFilter() {
+    filter: ["all"],
-    let filter = this.props.filter || ['all']
-
-    let combiningOp = filter[0]
-    let filters = filter.slice(1)
-
-    if(combiningFilterOps.indexOf(combiningOp) < 0) {
-      combiningOp = 'all'
-      filters = [filter.slice(0)]
-    }
-
-    return [combiningOp, ...filters]
   }
 
+  constructor (props) {
+    super();
+    this.state = {
+      showDoc: false,
+      displaySimpleFilter: checkIfSimpleFilter(combiningFilter(props)),
+    };
+  }
+
+  // Convert filter to combining filter
   onFilterPartChanged(filterIdx, newPart) {
-    const newFilter = this.combiningFilter().slice(0)
+    const newFilter = combiningFilter(this.props).slice(0)
     newFilter[filterIdx] = newPart
     this.props.onChange(newFilter)
   }
 
   deleteFilterItem(filterIdx) {
-    const newFilter = this.combiningFilter().slice(0)
+    const newFilter = combiningFilter(this.props).slice(0)
-    console.log('Delete', filterIdx, newFilter)
     newFilter.splice(filterIdx + 1, 1)
     this.props.onChange(newFilter)
   }
 
-  addFilterItem() {
+  addFilterItem = () => {
-    const newFilterItem = this.combiningFilter().slice(0)
+    const newFilterItem = combiningFilter(this.props).slice(0)
     newFilterItem.push(['==', 'name', ''])
     this.props.onChange(newFilterItem)
   }
 
-  render() {
+  onToggleDoc = (val) => {
-    const filter = this.combiningFilter()
+    this.setState({
-    let combiningOp = filter[0]
+      showDoc: val
-    let filters = filter.slice(1)
+    });
+  }
 
-    const editorBlocks = filters.map((f, idx) => {
+  makeFilter = () => {
-      return <FilterEditorBlock key={idx} onDelete={this.deleteFilterItem.bind(this, idx)}>
+    this.setState({
-        <SingleFilterEditor
+      displaySimpleFilter: true,
-          properties={this.props.properties}
-          filter={f}
-          onChange={this.onFilterPartChanged.bind(this, idx + 1)}
-        />
-      </FilterEditorBlock>
     })
+  }
 
-    //TODO: Implement support for nested filter
+  makeExpression = () => {
-    if(hasNestedCombiningFilter(filter)) {
+    let filter = combiningFilter(this.props);
-      return <div className="maputnik-filter-editor-unsupported">
+    this.props.onChange(migrateFilter(filter));
-        Nested filters are not supported.
+    this.setState({
-      </div>
+      displaySimpleFilter: false,
+    })
+  }
+
+  static getDerivedStateFromProps (props, currentState) {
+    const {filter} = props;
+    const displaySimpleFilter = checkIfSimpleFilter(combiningFilter(props));
+
+    // Upgrade but never downgrade
+    if (!displaySimpleFilter && currentState.displaySimpleFilter === true) {
+      return {
+        displaySimpleFilter: false,
+        valueIsSimpleFilter: false,
+      };
     }
+    else if (displaySimpleFilter && currentState.displaySimpleFilter === false) {
+      return {
+        valueIsSimpleFilter: true,
+      }
+    }
+    else {
+      return {
+        valueIsSimpleFilter: false,
+      };
+    }
+  }
 
-    return <div className="maputnik-filter-editor">
+  render() {
-      <div className="maputnik-filter-editor-compound-select" data-wd-key="layer-filter">
+    const {errors} = this.props;
-        <DocLabel
+    const {displaySimpleFilter} = this.state;
-          label={"Compound Filter"}
+    const fieldSpec={
-          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
+    const defaultFilter = ["all"];
-          value={combiningOp}
+
-          onChange={this.onFilterPartChanged.bind(this, 0)}
+    const isNestedCombiningFilter = displaySimpleFilter && hasNestedCombiningFilter(combiningFilter(this.props));
-          options={[["all", "every filter matches"], ["none", "no filter matches"], ["any", "any filter matches"]]}
+
-        />
+    if (isNestedCombiningFilter) {
-      </div>
+      return <div className="maputnik-filter-editor-unsupported">
-      {editorBlocks}
+        <p>
-      <div className="maputnik-filter-editor-add-wrapper">
+          Nested filters are not supported.
+        </p>
         <Button
-          data-wd-key="layer-filter-button"
+          onClick={this.makeExpression}
-          className="maputnik-add-filter"
+        >
-          onClick={this.addFilterItem.bind(this)}>
+          <svg style={{marginRight: "0.2em", width:"14px", height:"14px", verticalAlign: "middle"}} viewBox="0 0 24 24">
-          Add filter
+            <path fill="currentColor" d={mdiFunctionVariant} />
+          </svg>
+          Upgrade to expression
         </Button>
       </div>
-    </div>
+    }
+    else if (displaySimpleFilter) {
+      const filter = combiningFilter(this.props);
+      let combiningOp = filter[0];
+      let filters = filter.slice(1)
+
+      const actions = (
+        <div>
+          <Button
+            onClick={this.makeExpression}
+            className="maputnik-make-zoom-function"
+          >
+            <svg style={{width:"14px", height:"14px", verticalAlign: "middle"}} viewBox="0 0 24 24">
+              <path fill="currentColor" d={mdiFunctionVariant} />
+            </svg>
+          </Button>
+        </div>
+      );
+
+      const editorBlocks = filters.map((f, idx) => {
+        const error = errors[`filter[${idx+1}]`];
+
+        return (
+          <div key={`block-${idx}`}>
+            <FilterEditorBlock key={idx} onDelete={this.deleteFilterItem.bind(this, idx)}>
+              <SingleFilterEditor
+                properties={this.props.properties}
+                filter={f}
+                onChange={this.onFilterPartChanged.bind(this, idx + 1)}
+              />
+            </FilterEditorBlock>
+            {error &&
+              <div key="error" className="maputnik-inline-error">{error.message}</div>
+            }
+          </div>
+        );
+      })
+
+
+      return (
+        <>
+          <InputBlock
+            key="top"
+            fieldSpec={fieldSpec}
+            label={"Filter"}
+            action={actions}
+          >
+            <SelectInput
+              value={combiningOp}
+              onChange={this.onFilterPartChanged.bind(this, 0)}
+              options={[["all", "every filter matches"], ["none", "no filter matches"], ["any", "any filter matches"]]}
+            />
+          </InputBlock>
+          {editorBlocks}
+          <div
+            key="buttons"
+            className="maputnik-filter-editor-add-wrapper"
+          >
+            <Button
+              data-wd-key="layer-filter-button"
+              className="maputnik-add-filter"
+              onClick={this.addFilterItem}
+            >
+              <svg style={{width:"14px", height:"14px", verticalAlign: "text-bottom"}} viewBox="0 0 24 24">
+                <path fill="currentColor" d={mdiTableRowPlusAfter} />
+              </svg> Add filter
+            </Button>
+          </div>
+          <div
+            key="doc"
+            className="maputnik-doc-inline"
+            style={{display: this.state.showDoc ? '' : 'none'}}
+          >
+            <SpecDoc fieldSpec={fieldSpec} />
+          </div>
+        </>
+      );
+    }
+    else {
+      let {filter} = this.props;
+
+      return (
+        <>
+          <ExpressionProperty
+            onDelete={() => {
+              this.setState({displaySimpleFilter: true});
+              this.props.onChange(defaultFilter);
+            }}
+            fieldName="filter"
+            fieldSpec={fieldSpec}
+            value={filter}
+            errors={errors}
+            onChange={this.props.onChange}
+          />
+          {this.state.valueIsSimpleFilter &&
+            <div className="maputnik-expr-infobox">
+              You&apos;ve entered a old style filter,{' '}
+              <button
+                onClick={this.makeFilter}
+                className="maputnik-expr-infobox__button"
+              >
+                switch to filter editor
+              </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

@@ -6,6 +6,7 @@ import FillIcon from './FillIcon.jsx'
 import SymbolIcon from './SymbolIcon.jsx'
 import BackgroundIcon from './BackgroundIcon.jsx'
 import CircleIcon from './CircleIcon.jsx'
+import MissingIcon from './MissingIcon.jsx'
 
 class LayerIcon extends React.Component {
   static propTypes = {
@@ -25,6 +26,7 @@ class LayerIcon extends React.Component {
       case 'line': return <LineIcon {...iconProps} />
       case 'symbol': return <SymbolIcon {...iconProps} />
       case 'circle': return <CircleIcon {...iconProps} />
+      default: return <MissingIcon {...iconProps} />
     }
   }
 }

src/components/icons/MissingIcon.jsx

@@ -0,0 +1,11 @@
+import React from 'react'
+import {MdPriorityHigh} from 'react-icons/md'
+
+
+export default class MissingIcon extends React.Component {
+  render() {
+    return (
+      <MdPriorityHigh {...this.props} />
+    )
+  }
+}

src/components/inputs/ArrayInput.jsx

@@ -12,29 +12,89 @@ class ArrayInput extends React.Component {
     onChange: PropTypes.func,
   }
 
-  changeValue(idx, newValue) {
+  static defaultProps = {
-    console.log(idx, newValue)
+    value: [],
-    const values = this.values.slice(0)
+    default: [],
-    values[idx] = newValue
-    this.props.onChange(values)
   }
 
-  get values() {
+  constructor (props) {
-    return this.props.value || this.props.default || []
+    super(props);
+    this.state = {
+      value: this.props.value.slice(0),
+      // This is so we can compare changes in getDerivedStateFromProps
+      initialPropsValue: this.props.value.slice(0),
+    };
+  }
+
+  static getDerivedStateFromProps(props, state) {
+    const value = [];
+    const initialPropsValue = state.initialPropsValue.slice(0);
+
+    Array(props.length).fill(null).map((_, i) => {
+      if (props.value[i] === state.initialPropsValue[i]) {
+        value[i] = state.value[i];
+      }
+      else {
+        value[i] = state.value[i];
+        initialPropsValue[i] = state.value[i];
+      }
+    })
+
+    return {
+      value,
+      initialPropsValue,
+    };
+  }
+
+  isComplete (value) {
+    return Array(this.props.length).fill(null).every((_, i) => {
+      const val = value[i]
+      return !(val === undefined || val === "");
+    });
+  }
+
+  changeValue(idx, newValue) {
+    const value = this.state.value.slice(0);
+    value[idx] = newValue;
+
+    this.setState({
+      value,
+    }, () => {
+      if (this.isComplete(value)) {
+        this.props.onChange(value);
+      }
+      else {
+        // Unset until complete
+        this.props.onChange(undefined);
+      }
+    });
   }
 
   render() {
-    const inputs = this.values.map((v, i) => {
+    const {value} = this.state;
+
+    const containsValues = (
+      value.length > 0 &&
+      !value.every(val => {
+        return (val === "" || val === undefined)
+      })
+    );
+
+    const inputs = Array(this.props.length).fill(null).map((_, i) => {
       if(this.props.type === 'number') {
         return <NumberInput
           key={i}
-          value={v}
+          default={containsValues ? undefined : this.props.default[i]}
+          value={value[i]}
+          required={containsValues ? true : false}
           onChange={this.changeValue.bind(this, i)}
         />
       } else {
         return <StringInput
           key={i}
-          value={v}
+          default={containsValues ? undefined : this.props.default[i]}
+          value={value[i]}
+          required={containsValues ? true : false}
           onChange={this.changeValue.bind(this, i)}
         />
       }

src/components/inputs/AutocompleteInput.jsx

@@ -14,18 +14,15 @@ class AutocompleteInput extends React.Component {
     keepMenuWithinWindowBounds: PropTypes.bool
   }
 
+  state = {
+    maxHeight: MAX_HEIGHT
+  }
+
   static defaultProps = {
     onChange: () => {},
     options: [],
   }
 
-  constructor(props) {
-    super(props);
-    this.state = {
-      maxHeight: MAX_HEIGHT
-    };
-  }
-
   calcMaxHeight() {
     if(this.props.keepMenuWithinWindowBounds) {
       const maxHeight = window.innerHeight - this.autocompleteMenuEl.getBoundingClientRect().top;
@@ -38,6 +35,7 @@ class AutocompleteInput extends React.Component {
       }
     }
   }
+
   componentDidMount() {
     this.calcMaxHeight();
   }
@@ -46,6 +44,10 @@ class AutocompleteInput extends React.Component {
     this.calcMaxHeight();
   }
 
+  onChange (v) {
+    this.props.onChange(v === "" ? undefined : v);
+  }
+
   render() {
     return <div
       ref={(el) => {
@@ -56,7 +58,8 @@ class AutocompleteInput extends React.Component {
         menuStyle={{
           position: "fixed",
           overflow: "auto",
-          maxHeight: this.state.maxHeight
+          maxHeight: this.state.maxHeight,
+          zIndex: '998'
         }}
         wrapperProps={{
           className: "maputnik-autocomplete",
@@ -69,10 +72,12 @@ class AutocompleteInput extends React.Component {
         value={this.props.value}
         items={this.props.options}
         getItemValue={(item) => item[0]}
-        onSelect={v => this.props.onChange(v)}
+        onSelect={v => this.onChange(v)}
-        onChange={(e, v) => this.props.onChange(v)}
+        onChange={(e, v) => this.onChange(v)}
-        shouldItemRender={(item, value) => {
+        shouldItemRender={(item, value="") => {
-          return item[0].toLowerCase().indexOf(value.toLowerCase()) > -1
+          if (typeof(value) === "string") {
+            return item[0].toLowerCase().indexOf(value.toLowerCase()) > -1
+          }
         }}
         renderItem={(item, isHighlighted) => (
           <div

src/components/inputs/CheckboxInput.jsx

@@ -3,11 +3,15 @@ import PropTypes from 'prop-types'
 
 class CheckboxInput extends React.Component {
   static propTypes = {
-    value: PropTypes.bool.isRequired,
+    value: PropTypes.bool,
     style: PropTypes.object,
     onChange: PropTypes.func,
   }
 
+  static defaultProps = {
+    value: false,
+  }
+
   render() {
     return <label className="maputnik-checkbox-wrapper">
       <input

src/components/inputs/DynamicArrayInput.jsx

@@ -3,8 +3,10 @@ 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'
+import EnumInput from '../inputs/SelectInput'
+import capitalize from 'lodash.capitalize'
 
 
 class DynamicArrayInput extends React.Component {
@@ -14,6 +16,7 @@ class DynamicArrayInput extends React.Component {
     default: PropTypes.array,
     onChange: PropTypes.func,
     style: PropTypes.object,
+    fieldSpec: PropTypes.object,
   }
 
   changeValue(idx, newValue) {
@@ -27,14 +30,18 @@ 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 if (this.props.type === 'enum') {
+      const {fieldSpec} = this.props;
+      const defaultValue = Object.keys(fieldSpec.values)[0];
+      values.push(defaultValue);
     } else {
       values.push("")
     }
-    
 
     this.props.onChange(values)
   }
@@ -49,15 +56,28 @@ class DynamicArrayInput extends React.Component {
   render() {
     const inputs = this.values.map((v, i) => {
       const deleteValueBtn= <DeleteValueButton onClick={this.deleteValue.bind(this, i)} />
-      const input = this.props.type === 'number' 
+      let input;
-        ? <NumberInput
+      if (this.props.type === 'number') {
+        input = <NumberInput
           value={v}
           onChange={this.changeValue.bind(this, i)}
         />
-        : <StringInput
+      }
+      else if (this.props.type === 'enum') {
+        const options = Object.keys(this.props.fieldSpec.values).map(v => [v, capitalize(v)]);
+
+        input = <EnumInput
+          options={options}
           value={v}
           onChange={this.changeValue.bind(this, i)}
         />
+      }
+      else {
+        input = <StringInput
+          value={v}
+          onChange={this.changeValue.bind(this, i)}
+        />
+      }
 
       return <div
         style={this.props.style}
@@ -77,7 +97,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 +116,7 @@ class DeleteValueButton extends React.Component {
       onClick={this.props.onClick}
     >
       <DocLabel
-        label={<DeleteIcon />}
+        label={<MdDelete />}
         doc={"Remove array entry."}
       />
     </Button>

src/components/inputs/EnumInput.jsx

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

src/components/inputs/FontInput.jsx

@@ -4,7 +4,7 @@ import AutocompleteInput from './AutocompleteInput'
 
 class FontInput extends React.Component {
   static propTypes = {
-    value: PropTypes.array.isRequired,
+    value: PropTypes.array,
     default: PropTypes.array,
     fonts: PropTypes.array,
     style: PropTypes.object,
@@ -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 || [];
+
+    // 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

@@ -2,6 +2,8 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
 import DocLabel from '../fields/DocLabel'
+import SpecDoc from './SpecDoc'
+
 
 /** Wrap a component with a label */
 class InputBlock extends React.Component {
@@ -11,35 +13,54 @@ class InputBlock extends React.Component {
       PropTypes.string,
       PropTypes.element,
     ]).isRequired,
-    doc: PropTypes.string,
     action: PropTypes.element,
     children: PropTypes.node.isRequired,
     style: PropTypes.object,
     onChange: PropTypes.func,
+    fieldSpec: PropTypes.object,
+    wideMode: PropTypes.bool,
+    error: PropTypes.array,
+  }
+
+  constructor (props) {
+    super(props);
+    this.state = {
+      showDoc: false,
+    }
   }
 
   onChange(e) {
     const value = e.target.value
-    return this.props.onChange(value === "" ? null: value)
+    return this.props.onChange(value === "" ? undefined : value)
+  }
+
+  onToggleDoc = (val) => {
+    this.setState({
+      showDoc: val
+    });
   }
 
   render() {
+    const errors = [].concat(this.props.error || []);
+
     return <div style={this.props.style}
       data-wd-key={this.props["data-wd-key"]}
       className={classnames({
         "maputnik-input-block": true,
+        "maputnik-input-block--wide": this.props.wideMode,
         "maputnik-action-block": this.props.action
       })}
       >
-      {this.props.doc &&
+      {this.props.fieldSpec &&
       <div className="maputnik-input-block-label">
         <DocLabel
           label={this.props.label}
-          doc={this.props.doc}
+          onToggleDoc={this.onToggleDoc}
+          fieldSpec={this.props.fieldSpec}
         />
       </div>
       }
-      {!this.props.doc &&
+      {!this.props.fieldSpec &&
       <label className="maputnik-input-block-label">
         {this.props.label}
       </label>
@@ -52,6 +73,21 @@ class InputBlock extends React.Component {
       <div className="maputnik-input-block-content">
         {this.props.children}
       </div>
+      {errors.length > 0 &&
+        <div className="maputnik-inline-error">
+          {[].concat(this.props.error).map((error, idx) => {
+            return <div key={idx}>{error.message}</div>
+          })}
+        </div>
+      }
+      {this.props.fieldSpec &&
+      <div
+        className="maputnik-doc-inline"
+        style={{display: this.state.showDoc ? '' : 'none'}}
+      >
+        <SpecDoc fieldSpec={this.props.fieldSpec} />
+      </div>
+      }
     </div>
   }
 }

src/components/inputs/NumberInput.jsx

@@ -1,6 +1,8 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
+let IDX = 0;
+
 class NumberInput extends React.Component {
   static propTypes = {
     value: PropTypes.number,
@@ -8,31 +10,64 @@ class NumberInput extends React.Component {
     min: PropTypes.number,
     max: PropTypes.number,
     onChange: PropTypes.func,
+    allowRange: PropTypes.bool,
+    rangeStep: PropTypes.number,
+    wdKey: PropTypes.string,
+    required: PropTypes.bool,
+  }
+
+  static defaultProps = {
+    rangeStep: 1
   }
 
   constructor(props) {
     super(props)
     this.state = {
-      value: props.value
+      uuid: IDX++,
+      editing: false,
+      value: props.value,
+      dirtyValue: props.value,
     }
   }
 
-  UNSAFE_componentWillReceiveProps(nextProps) {
+  static getDerivedStateFromProps(props, state) {
-    this.setState({ value: nextProps.value })
+    if (!state.editing && props.value !== state.value) {
+      return {
+        value: props.value,
+        dirtyValue: props.value,
+      };
+    }
+    return null;
   }
 
   changeValue(newValue) {
-    const value = parseFloat(newValue)
+    const value = (newValue === "" || newValue === undefined) ?
+      undefined :
+      parseFloat(newValue);
 
-    const hasChanged = this.state.value !== value
+    const hasChanged = this.props.value !== value;
     if(this.isValid(value) && hasChanged) {
       this.props.onChange(value)
-    } else {
+      this.setState({
-      this.setState({ value: newValue })
+        value: newValue,
+      });
     }
+    else if (!this.isValid(value) && hasChanged) {
+      this.setState({
+        value: undefined,
+      });
+    }
+
+    this.setState({
+      dirtyValue: newValue === "" ? undefined : newValue,
+    })
   }
 
   isValid(v) {
+    if (v === undefined) {
+      return true;
+    }
+
     const value = parseFloat(v)
     if(isNaN(value)) {
       return false
@@ -49,31 +84,149 @@ 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)
+      return;
     }
 
     // If set value is invalid fall back to the last valid value from props or at last resort the default value
-    if(!this.isValid(this.state.value)) {
+    if (!this.isValid(this.state.value)) {
       if(this.isValid(this.props.value)) {
         this.changeValue(this.props.value)
+        this.setState({dirtyValue: this.props.value});
       } else {
-        this.changeValue(this.props.default)
+        this.changeValue(undefined);
+        this.setState({dirtyValue: undefined});
       }
     }
   }
 
+  onChangeRange = (e) => {
+    let value = parseFloat(e.target.value, 10);
+    const step = this.props.rangeStep;
+    let dirtyValue = value;
+
+    if(step) {
+      // Can't do this with the <input/> range step attribute else we won't be able to set a high precision value via the text input.
+      const snap = value % step;
+
+      // Round up/down to step
+      if (this._keyboardEvent) {
+        // If it's keyboard event we might get a low positive/negative value,
+        // for example we might go from 13 to 13.23, however because we know
+        // that came from a keyboard event we always want to increase by a
+        // single step value.
+        if (value < this.state.dirtyValue) {
+          value = this.state.value - step;
+        }
+        else {
+          value = this.state.value + step
+        }
+        dirtyValue = value;
+      }
+      else {
+        if (snap < step/2) {
+          value = value - snap;
+        }
+        else {
+          value = value + (step - snap);
+        };
+      }
+    }
+
+    this._keyboardEvent = false;
+
+    // Clamp between min/max
+    value = Math.max(this.props.min, Math.min(this.props.max, value));
+
+    this.setState({value, dirtyValue});
+    this.props.onChange(value);
+  }
+
   render() {
-    return <input
+    if(
-      spellCheck="false"
+      this.props.hasOwnProperty("min") && this.props.hasOwnProperty("max") &&
-      className="maputnik-number"
+      this.props.min !== undefined && this.props.max !== undefined &&
-      placeholder={this.props.default}
+      this.props.allowRange
-      value={this.state.value}
+    ) {
-      onChange={e => this.changeValue(e.target.value)}
+      const value = this.state.editing ? this.state.dirtyValue : this.state.value;
-      onBlur={this.resetValue.bind(this)}
+      const defaultValue = this.props.default === undefined ? "" : this.props.default;
-    />
+      let inputValue;
+      if (this.state.editingRange) {
+        inputValue = this.state.value;
+      }
+      else {
+        inputValue = value;
+      }
+
+      return <div className="maputnik-number-container">
+        <input
+          className="maputnik-number-range"
+          key="range"
+          type="range"
+          max={this.props.max}
+          min={this.props.min}
+          step="any"
+          spellCheck="false"
+          value={value === undefined ? defaultValue : value}
+          aria-hidden="true"
+          onChange={this.onChangeRange}
+          onKeyDown={() => {
+            this._keyboardEvent = true;
+          }}
+          onPointerDown={() => {
+            this.setState({editing: true, editingRange: true});
+          }}
+          onPointerUp={() => {
+            // Safari doesn't get onBlur event
+            this.setState({editing: false, editingRange: false});
+          }}
+          onBlur={() => {
+            this.setState({
+              editing: false,
+              editingRange: false,
+              dirtyValue: this.state.value,
+            });
+          }}
+        />
+        <input
+          key="text"
+          type="text"
+          spellCheck="false"
+          className="maputnik-number"
+          placeholder={this.props.default}
+          value={inputValue === undefined ? "" : inputValue}
+          onFocus={e => {
+            this.setState({editing: true});
+          }}
+          onChange={e => {
+            this.changeValue(e.target.value);
+          }}
+          onBlur={e => {
+            this.setState({editing: false});
+            this.resetValue()
+          }}
+        />
+      </div>
+    }
+    else {
+      const value = this.state.editing ? this.state.dirtyValue : this.state.value;
+
+      return <input
+        spellCheck="false"
+        className="maputnik-number"
+        placeholder={this.props.default}
+        value={value === undefined ? "" : value}
+        onChange={e => this.changeValue(e.target.value)}
+        onFocus={() => {
+          this.setState({editing: true});
+        }}
+        onBlur={this.resetValue}
+        required={this.props.required}
+      />
+    }
   }
 }
 

src/components/inputs/SelectInput.jsx

@@ -8,6 +8,7 @@ class SelectInput extends React.Component {
     options: PropTypes.array.isRequired,
     style: PropTypes.object,
     onChange: PropTypes.func.isRequired,
+    title: PropTypes.string,
   }
 
 
@@ -21,6 +22,7 @@ class SelectInput extends React.Component {
       className="maputnik-select"
       data-wd-key={this.props["data-wd-key"]}
       style={this.props.style}
+      title={this.props.title}
       value={this.props.value}
       onChange={e => this.props.onChange(e.target.value)}
     >

src/components/inputs/SpecDoc.js

@@ -0,0 +1,83 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+export default class SpecDoc extends React.Component {
+  static propTypes = {
+    fieldSpec: PropTypes.object.isRequired,
+  }
+
+  render () {
+    const {fieldSpec} = this.props;
+
+    const {doc, values} = fieldSpec;
+    const sdkSupport = fieldSpec['sdk-support'];
+
+    const headers = {
+      js: "JS",
+      android: "Android",
+      ios: "iOS",
+      macos: "macOS",
+    };
+
+    const renderValues = (
+      !!values &&
+      // HACK: Currently we merge additional values into the stylespec, so this is required
+      // See <https://github.com/maputnik/editor/blob/master/src/components/fields/PropertyGroup.jsx#L16>
+      !Array.isArray(values)
+    );
+
+    return (
+      <>
+        {doc && 
+          <div className="SpecDoc">
+            <div className="SpecDoc__doc">{doc}</div>
+            {renderValues &&
+              <ul className="SpecDoc__values">
+                {Object.entries(values).map(([key, value]) => {
+                  return (
+                    <li key={key}>
+                      <code>{JSON.stringify(key)}</code>
+                      <div>{value.doc}</div>
+                    </li>
+                  );
+                })}
+              </ul>
+            }
+          </div>
+        }
+        {sdkSupport &&
+          <div className="SpecDoc__sdk-support">
+            <table className="SpecDoc__sdk-support__table">
+              <thead>
+                <tr>
+                  <th></th>
+                  {Object.values(headers).map(header => {
+                    return <th key={header}>{header}</th>;
+                  })}
+                </tr>
+              </thead>
+              <tbody>
+                {Object.entries(sdkSupport).map(([key, supportObj]) => {
+                  return (
+                    <tr key={key}>
+                      <td>{key}</td>
+                      {Object.keys(headers).map(k => {
+                        const value = supportObj[k];
+                        if (supportObj.hasOwnProperty(k)) {
+                          return <td key={k}>{supportObj[k]}</td>;
+                        }
+                        else {
+                          return <td key={k}>no</td>;
+                        }
+                      })}
+                    </tr>
+                  );
+                })}
+              </tbody>
+            </table>
+          </div>
+        }
+      </>
+    );
+  }
+}

src/components/inputs/StringInput.jsx

@@ -8,18 +8,32 @@ class StringInput extends React.Component {
     style: PropTypes.object,
     default: PropTypes.string,
     onChange: PropTypes.func,
+    onInput: PropTypes.func,
     multi: PropTypes.bool,
+    required: PropTypes.bool,
+    disabled: PropTypes.bool,
+    spellCheck: PropTypes.bool,
+  }
+
+  static defaultProps = {
+    onInput: () => {},
   }
 
   constructor(props) {
     super(props)
     this.state = {
+      editing: false,
       value: props.value || ''
     }
   }
 
-  UNSAFE_componentWillReceiveProps(nextProps) {
+  static getDerivedStateFromProps(props, state) {
-    this.setState({ value: nextProps.value || '' })
+    if (!state.editing) {
+      return {
+        value: props.value
+      };
+    }
+    return {};
   }
 
   render() {
@@ -40,21 +54,38 @@ class StringInput extends React.Component {
       ]
     }
 
+    if(!!this.props.disabled) {
+      classes.push("maputnik-string--disabled");
+    }
+
     return React.createElement(tag, {
       "data-wd-key": this.props["data-wd-key"],
-      spellCheck: !(tag === "input"),
+      spellCheck: this.props.hasOwnProperty("spellCheck") ? this.props.spellCheck : !(tag === "input"),
+      disabled: this.props.disabled,
       className: classes.join(" "),
       style: this.props.style,
-      value: this.state.value,
+      value: this.state.value === undefined ? "" : this.state.value,
       placeholder: this.props.default,
       onChange: e => {
         this.setState({
+          editing: true,
           value: e.target.value
-        })
+        }, () => {
+          this.props.onInput(this.state.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);
+        }
+      },
+      onKeyDown: (e) => {
+        if (e.keyCode === 13) {
+          this.props.onChange(this.state.value);
+        }
+      },
+      required: this.props.required,
     });
   }
 }

src/components/inputs/UrlInput.jsx

@@ -0,0 +1,77 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import StringInput from './StringInput'
+import SmallError from '../util/SmallError'
+
+
+function validate (url) {
+  let error;
+  const getProtocol = (url) => {
+    try {
+      const urlObj = new URL(url);
+      return urlObj.protocol;
+    }
+    catch (err) {
+      return undefined;
+    }
+  };
+  const protocol = getProtocol(url);
+  if (
+    protocol &&
+    protocol === "http:" &&
+    window.location.protocol === "https:"
+  ) {
+    error = (
+      <SmallError>
+        CORS policy won&apos;t allow fetching resources served over http from https, use a <code>https://</code> domain
+      </SmallError>
+    );
+  }
+
+  return error;
+}
+
+class UrlInput extends React.Component {
+  static propTypes = {
+    "data-wd-key": PropTypes.string,
+    value: PropTypes.string,
+    style: PropTypes.object,
+    default: PropTypes.string,
+    onChange: PropTypes.func,
+    onInput: PropTypes.func,
+    multi: PropTypes.bool,
+    required: PropTypes.bool,
+  }
+
+  static defaultProps = {
+    onInput: () => {},
+  }
+
+  constructor (props) {
+    super(props);
+    this.state = {
+      error: validate(props.value)
+    };
+  }
+
+  onInput = (url) => {
+    this.setState({
+      error: validate(url)
+    });
+    this.props.onInput(url);
+  }
+
+  render () {
+    return (
+      <div>
+        <StringInput
+          {...this.props}
+          onInput={this.onInput}
+        />
+        {this.state.error}
+      </div>
+    );
+  }
+}
+
+export default UrlInput

src/components/layers/Collapse.jsx

@@ -10,6 +10,10 @@ export default class CollapseAlt extends React.Component {
     children: PropTypes.element.isRequired
   }
 
+  static defaultProps = {
+    isActive: true
+  }
+
   render() {
     if (accessibility.reducedMotionEnabled()) {
       return (

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,9 +11,13 @@ class MetadataBlock extends React.Component {
   }
 
   render() {
+    const fieldSpec = {
+      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."}
+      fieldSpec={fieldSpec}
       data-wd-key="layer-comment"
     >
       <StringInput

src/components/layers/JSONEditor.jsx

@@ -1,88 +1,159 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import classnames from 'classnames';
 
-import {Controlled as CodeMirror} from 'react-codemirror2'
 import InputBlock from '../inputs/InputBlock'
 import StringInput from '../inputs/StringInput'
+import CodeMirror from 'codemirror';
 
 import 'codemirror/mode/javascript/javascript'
 import 'codemirror/addon/lint/lint'
+import 'codemirror/addon/edit/matchbrackets'
 import 'codemirror/lib/codemirror.css'
 import 'codemirror/addon/lint/lint.css'
-import '../../codemirror-maputnik.css'
 import jsonlint from 'jsonlint'
-
+import stringifyPretty from 'json-stringify-pretty-compact'
-// This is mainly because of this issue <https://github.com/zaach/jsonlint/issues/57> also the API has changed, see comment in file
+import '../util/codemirror-mgl';
-import '../../vendor/codemirror/addon/lint/json-lint'
 
 
 class JSONEditor extends React.Component {
   static propTypes = {
-    layer: PropTypes.object.isRequired,
+    layer: PropTypes.any.isRequired,
+    maxHeight: PropTypes.number,
     onChange: PropTypes.func,
+    lineNumbers: PropTypes.bool,
+    lineWrapping: PropTypes.bool,
+    getValue: PropTypes.func,
+    gutters: PropTypes.array,
+    className: PropTypes.string,
+    onFocus: PropTypes.func,
+    onBlur: PropTypes.func,
+    onJSONValid: PropTypes.func,
+    onJSONInvalid: PropTypes.func,
+    mode: PropTypes.object,
+    lint: PropTypes.oneOfType([
+      PropTypes.bool,
+      PropTypes.object,
+    ]),
+  }
+
+  static defaultProps = {
+    lineNumbers: true,
+    lineWrapping: false,
+    gutters: ["CodeMirror-lint-markers"],
+    getValue: (data) => {
+      return stringifyPretty(data, {indent: 2, maxLength: 40});
+    },
+    onFocus: () => {},
+    onBlur: () => {},
+    onJSONInvalid: () => {},
+    onJSONValid: () => {},
   }
 
   constructor(props) {
     super(props)
     this.state = {
-      code: JSON.stringify(props.layer, null, 2)
+      isEditing: false,
-    }
+      prevValue: this.props.getValue(this.props.layer),
+    };
   }
 
-  UNSAFE_componentWillReceiveProps(nextProps) {
+  componentDidMount () {
-    this.setState({
+    this._doc = CodeMirror(this._el, {
-      code: JSON.stringify(nextProps.layer, null, 2)
+      value: this.props.getValue(this.props.layer),
-    })
+      mode: this.props.mode || {
-  }
+        name: "mgl",
-
+      },
-  shouldComponentUpdate(nextProps, nextState) {
+      lineWrapping: this.props.lineWrapping,
-    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
-    }
-  }
-
-  onCodeUpdate(newCode) {
-    try {
-      const parsedLayer = JSON.parse(newCode)
-      this.props.onChange(parsedLayer)
-    } catch(err) {
-      console.warn(err)
-    } finally {
-      this.setState({
-        code: newCode
-      })
-    }
-  }
-
-  resetValue() {
-    console.log('reset')
-    this.setState({
-      code: JSON.stringify(this.props.layer, null, 2)
-    })
-  }
-
-  render() {
-    const codeMirrorOptions = {
-      mode: {name: "javascript", json: true},
       tabSize: 2,
       theme: 'maputnik',
       viewportMargin: Infinity,
-      lineNumbers: true,
+      lineNumbers: this.props.lineNumbers,
-      lint: true,
+      lint: this.props.lint || {
-      gutters: ["CodeMirror-lint-markers"],
+        context: "layer"
+      },
+      matchBrackets: true,
+      gutters: this.props.gutters,
       scrollbarStyle: "null",
+    });
+
+    this._doc.on('change', this.onChange);
+    this._doc.on('focus', this.onFocus);
+    this._doc.on('blur', this.onBlur);
+  }
+
+  onFocus = () => {
+    this.props.onFocus();
+    this.setState({
+      isEditing: true
+    });
+  }
+
+  onBlur = () => {
+    this.props.onBlur();
+    this.setState({
+      isEditing: false
+    });
+  }
+
+  componentWillUnMount () {
+    this._doc.off('change', this.onChange);
+    this._doc.off('focus', this.onFocus);
+    this._doc.off('blur', this.onBlur);
+  }
+
+  componentDidUpdate(prevProps) {
+    if (!this.state.isEditing && prevProps.layer !== this.props.layer) {
+      this._cancelNextChange = true;
+      this._doc.setValue(
+        this.props.getValue(this.props.layer),
+      )
+    }
+  }
+
+  onChange = (e) => {
+    if (this._cancelNextChange) {
+      this._cancelNextChange = false;
+      this.setState({
+        prevValue: this._doc.getValue(),
+      })
+      return;
+    }
+    const newCode = this._doc.getValue();
+
+    if (this.state.prevValue !== newCode) {
+      let parsedLayer, err;
+      try {
+        parsedLayer = JSON.parse(newCode);
+      } catch(_err) {
+        err = _err;
+        console.warn(_err)
+      }
+
+      if (err) {
+        this.props.onJSONInvalid();
+      }
+      else {
+        this.props.onChange(parsedLayer)
+        this.props.onJSONValid();
+      }
     }
 
-    return <CodeMirror
+    this.setState({
-      value={this.state.code}
+      prevValue: newCode,
-      onBeforeChange={(editor, data, value) => this.onCodeUpdate(value)}
+    });
-      onFocusChange={focused => focused ? true : this.resetValue()}
+  }
-      options={codeMirrorOptions}
+
+  render() {
+    const style = {};
+    if (this.props.maxHeight) {
+      style.maxHeight = this.props.maxHeight;
+    }
+
+    return <div
+      className={classnames("codemirror-container", this.props.className)}
+      ref={(el) => this._el = el}
+      style={style}
     />
   }
 }

src/components/layers/LayerEditor.jsx

@@ -13,16 +13,19 @@ import MaxZoomBlock from './MaxZoomBlock'
 import CommentBlock from './CommentBlock'
 import LayerSourceBlock from './LayerSourceBlock'
 import LayerSourceLayerBlock from './LayerSourceLayerBlock'
+import {Accordion} from 'react-accessible-accordion';
 
-import MoreVertIcon from 'react-icons/lib/md/more-vert'
+import {MdMoreVert} from 'react-icons/md'
-
-import InputBlock from '../inputs/InputBlock'
-import MultiButtonInput from '../inputs/MultiButtonInput'
 
 import { changeType, changeProperty } from '../../libs/layer'
 import layout from '../../config/layout.json'
+import {formatLayerId} from '../util/format';
 
 
+function getLayoutForType (type) {
+  return layout[type] ? layout[type] : layout.invalid;
+}
+
 function layoutGroups(layerType) {
   const layerGroup = {
     title: 'Layer',
@@ -36,7 +39,9 @@ function layoutGroups(layerType) {
     title: 'JSON Editor',
     type: 'jsoneditor'
   }
-    return [layerGroup, filterGroup].concat(layout[layerType].groups).concat([editorGroup])
+  return [layerGroup, filterGroup]
+    .concat(getLayoutForType(layerType).groups)
+    .concat([editorGroup])
 }
 
 /** Layer editor supporting multiple types of layers. */
@@ -55,6 +60,7 @@ export default class LayerEditor extends React.Component {
     isFirstLayer: PropTypes.bool,
     isLastLayer: PropTypes.bool,
     layerIndex: PropTypes.number,
+    errors: PropTypes.array,
   }
 
   static defaultProps = {
@@ -79,18 +85,18 @@ export default class LayerEditor extends React.Component {
     this.state = { editorGroups }
   }
 
-  UNSAFE_componentWillReceiveProps(nextProps) {
+  static getDerivedStateFromProps(props, state) {
-    const additionalGroups = { ...this.state.editorGroups }
+    const additionalGroups = { ...state.editorGroups }
 
-    layout[nextProps.layer.type].groups.forEach(group => {
+    getLayoutForType(props.layer.type).groups.forEach(group => {
       if(!(group.title in additionalGroups)) {
         additionalGroups[group.title] = true
       }
     })
 
-    this.setState({
+    return {
       editorGroups: additionalGroups
-    })
+    };
   }
 
   getChildContext () {
@@ -103,7 +109,10 @@ export default class LayerEditor extends React.Component {
   }
 
   changeProperty(group, property, newValue) {
-    this.props.onLayerChanged(changeProperty(this.props.layer, group, property, newValue))
+    this.props.onLayerChanged(
+      this.props.layerIndex,
+      changeProperty(this.props.layer, group, property, newValue)
+    )
   }
 
   onGroupToggle(groupTitle, active) {
@@ -121,6 +130,20 @@ export default class LayerEditor extends React.Component {
     if(this.props.layer.metadata) {
       comment = this.props.layer.metadata['maputnik:comment']
     }
+    const {errors, layerIndex} = this.props;
+
+    const errorData = {};
+    errors.forEach(error => {
+      if (
+        error.parsed &&
+        error.parsed.type === "layer" &&
+        error.parsed.data.index == layerIndex
+      ) {
+        errorData[error.parsed.data.key] = {
+          message: error.parsed.data.message
+        };
+      }
+    })
 
     let sourceLayerIds;
     if(this.props.sources.hasOwnProperty(this.props.layer.source)) {
@@ -132,34 +155,45 @@ export default class LayerEditor extends React.Component {
         <LayerIdBlock
           value={this.props.layer.id}
           wdKey="layer-editor.layer-id"
-          onChange={newId => this.props.onLayerIdChange(this.props.layer.id, newId)}
+          error={errorData.id}
+          onChange={newId => this.props.onLayerIdChange(this.props.layerIndex, this.props.layer.id, newId)}
         />
         <LayerTypeBlock
+          disabled={true}
+          error={errorData.type}
           value={this.props.layer.type}
-          onChange={newType => this.props.onLayerChanged(changeType(this.props.layer, newType))}
+          onChange={newType => this.props.onLayerChanged(
+            this.props.layerIndex,
+            changeType(this.props.layer, newType)
+          )}
         />
         {this.props.layer.type !== 'background' && <LayerSourceBlock
+          error={errorData.source}
           sourceIds={Object.keys(this.props.sources)}
           value={this.props.layer.source}
           onChange={v => this.changeProperty(null, 'source', v)}
         />
         }
-        {['background', 'raster', 'hillshade', 'heatmap'].indexOf(this.state.type) < 0 &&
+        {['background', 'raster', 'hillshade', 'heatmap'].indexOf(this.props.layer.type) < 0 &&
         <LayerSourceLayerBlock
+          error={errorData['source-layer']}
           sourceLayerIds={sourceLayerIds}
           value={this.props.layer['source-layer']}
           onChange={v => this.changeProperty(null, 'source-layer', v)}
         />
         }
         <MinZoomBlock
+          error={errorData.minzoom}
           value={this.props.layer.minzoom}
           onChange={v => this.changeProperty(null, 'minzoom', v)}
         />
         <MaxZoomBlock
+          error={errorData.maxzoom}
           value={this.props.layer.maxzoom}
           onChange={v => this.changeProperty(null, 'maxzoom', v)}
         />
         <CommentBlock
+          error={errorData.comment}
           value={comment}
           onChange={v => this.changeProperty('metadata', 'maputnik:comment', v == ""  ? undefined : v)}
         />
@@ -167,6 +201,7 @@ export default class LayerEditor extends React.Component {
       case 'filter': return <div>
         <div className="maputnik-filter-editor-wrapper">
           <FilterEditor
+            errors={errorData}
             filter={this.props.layer.filter}
             properties={this.props.vectorLayers[this.props.layer['source-layer']]}
             onChange={f => this.changeProperty(null, 'filter', f)}
@@ -174,6 +209,7 @@ export default class LayerEditor extends React.Component {
         </div>
       </div>
       case 'properties': return <PropertyGroup
+        errors={errorData}
         layer={this.props.layer}
         groupFields={fields}
         spec={this.props.spec}
@@ -181,7 +217,12 @@ export default class LayerEditor extends React.Component {
       />
       case 'jsoneditor': return <JSONEditor
         layer={this.props.layer}
-        onChange={this.props.onLayerChanged}
+        onChange={(layer) => {
+          this.props.onLayerChanged(
+            this.props.layerIndex,
+            layer
+          );
+        }}
       />
     }
   }
@@ -194,12 +235,16 @@ export default class LayerEditor extends React.Component {
   }
 
   render() {
+    const groupIds = [];
     const layerType = this.props.layer.type
     const groups = layoutGroups(layerType).filter(group => {
       return !(layerType === 'background' && group.type === 'source')
     }).map(group => {
+      const groupId = group.title.replace(/ /g, "_");
+      groupIds.push(groupId);
       return <LayerEditorGroup
         data-wd-key={group.title}
+        id={groupId}
         key={group.title}
         title={group.title}
         isActive={this.state.editorGroups[group.title]}
@@ -214,15 +259,15 @@ export default class LayerEditor extends React.Component {
     const items = {
       delete: {
         text: "Delete",
-        handler: () => this.props.onLayerDestroy(this.props.layer.id)
+        handler: () => this.props.onLayerDestroy(this.props.layerIndex)
       },
       duplicate: {
         text: "Duplicate",
-        handler: () => this.props.onLayerCopy(this.props.layer.id)
+        handler: () => this.props.onLayerCopy(this.props.layerIndex)
       },
       hide: {
         text: (layout.visibility === "none") ? "Show" : "Hide",
-        handler: () => this.props.onLayerVisibilityToggle(this.props.layer.id)
+        handler: () => this.props.onLayerVisibilityToggle(this.props.layerIndex)
       },
       moveLayerUp: {
         text: "Move layer up",
@@ -248,7 +293,7 @@ export default class LayerEditor extends React.Component {
       <header>
         <div className="layer-header">
           <h2 className="layer-header__title">
-            Layer: {this.props.layer.id}
+            Layer: {formatLayerId(this.props.layer.id)}
           </h2>
           <div className="layer-header__info">
             <Wrapper
@@ -257,7 +302,7 @@ export default class LayerEditor extends React.Component {
               closeOnSelection={false}
             >
               <Button className='more-menu__button'>
-                <MoreVertIcon className="more-menu__button__svg" />
+                <MdMoreVert className="more-menu__button__svg" />
               </Button>
               <Menu>
                 <ul className="more-menu__menu">
@@ -276,7 +321,13 @@ export default class LayerEditor extends React.Component {
         </div>
 
       </header>
-      {groups}
+      <Accordion
+        allowMultipleExpanded={true}
+        allowZeroExpanded={true}
+        preExpanded={groupIds}
+      >
+        {groups}
+      </Accordion>
     </div>
   }
 }

src/components/layers/LayerEditorGroup.jsx

@@ -1,11 +1,21 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import Collapser from './Collapser'
+import Icon from '@mdi/react'
-import Collapse from './Collapse'
+import {
+  mdiMenuDown,
+  mdiMenuUp
+} from '@mdi/js';
+import {
+    AccordionItem,
+    AccordionItemHeading,
+    AccordionItemButton,
+    AccordionItemPanel,
+} from 'react-accessible-accordion';
 
 
 export default class LayerEditorGroup extends React.Component {
   static propTypes = {
+    "id": PropTypes.string,
     "data-wd-key": PropTypes.string,
     title: PropTypes.string.isRequired,
     isActive: PropTypes.bool.isRequired,
@@ -14,20 +24,28 @@ export default class LayerEditorGroup extends React.Component {
   }
 
   render() {
-    return <div>
+    return <AccordionItem uuid={this.props.id}>
-      <div className="maputnik-layer-editor-group"
+      <AccordionItemHeading 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>
+        <AccordionItemButton className="maputnik-layer-editor-group__button">
-        <span style={{flexGrow: 1}} />
+          <span style={{flexGrow: 1}}>{this.props.title}</span>
-        <Collapser isCollapsed={this.props.isActive} />
+          <Icon
-      </div>
+            path={mdiMenuUp}
-      <Collapse isActive={this.props.isActive}>
+            size={1}
-        <div className="react-collapse-container">
+            className="maputnik-layer-editor-group__button__icon maputnik-layer-editor-group__button__icon--up"
-          {this.props.children}
+          />
-        </div>
+          <Icon
-      </Collapse>
+            path={mdiMenuDown}
-    </div>
+            size={1}
+            className="maputnik-layer-editor-group__button__icon maputnik-layer-editor-group__button__icon--down"
+          />
+        </AccordionItemButton>
+      </AccordionItemHeading>
+      <AccordionItemPanel>
+        {this.props.children}
+      </AccordionItemPanel>
+    </AccordionItem>
   }
 }

src/components/layers/LayerIdBlock.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import * as 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'
 
@@ -10,11 +10,13 @@ class LayerIdBlock extends React.Component {
     value: PropTypes.string.isRequired,
     wdKey: PropTypes.string.isRequired,
     onChange: PropTypes.func.isRequired,
+    error: PropTypes.object,
   }
 
   render() {
-    return <InputBlock label={"ID"} doc={styleSpec.latest.layer.id.doc}
+    return <InputBlock label={"ID"} fieldSpec={latest.layer.id}
       data-wd-key={this.props.wdKey}
+      error={this.props.error}
     >
       <StringInput
         value={this.props.value}

src/components/layers/LayerList.jsx

@@ -1,15 +1,13 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
+import lodash from 'lodash';
 
-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} from 'react-sortable-hoc';
 
 const layerListPropTypes = {
   layers: PropTypes.array.isRequired,
@@ -38,7 +36,6 @@ function findClosestCommonPrefix(layers, idx) {
 }
 
 // List of collapsible layer editors
-@SortableContainer
 class LayerListContainer extends React.Component {
   static propTypes = {...layerListPropTypes}
   static defaultProps = {
@@ -46,7 +43,9 @@ class LayerListContainer extends React.Component {
   }
 
   constructor(props) {
-    super(props)
+    super(props);
+    this.selectedItemRef = React.createRef();
+    this.scrollContainerRef = React.createRef();
     this.state = {
       collapsedGroups: {},
       areAllGroupsExpanded: false,
@@ -65,7 +64,7 @@ class LayerListContainer extends React.Component {
     })
   }
 
-  toggleLayers() {
+  toggleLayers = () => {
     let idx=0
 
     let newGroups=[]
@@ -73,12 +72,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
       })
@@ -123,16 +122,84 @@ class LayerListContainer extends React.Component {
     return collapsed === undefined ? true : collapsed
   }
 
+  shouldComponentUpdate (nextProps, nextState) {
+    // Always update on state change
+    if (this.state !== nextState) {
+      return true;
+    }
+
+    // This component tree only requires id and visibility from the layers
+    // objects
+    function getRequiredProps (layer) {
+      const out = {
+        id: layer.id,
+      };
+
+      if (layer.layout) {
+        out.layout = {
+          visibility: layer.layout.visibility
+        };
+      }
+      return out;
+    }
+    const layersEqual = lodash.isEqual(
+      nextProps.layers.map(getRequiredProps),
+      this.props.layers.map(getRequiredProps),
+    );
+
+    function withoutLayers (props) {
+      const out = {
+        ...props
+      };
+      delete out['layers'];
+      return out;
+    }
+
+    // Compare the props without layers because we've already compared them
+    // efficiently above.
+    const propsEqual = lodash.isEqual(
+      withoutLayers(this.props),
+      withoutLayers(nextProps)
+    );
+
+    const propsChanged = !(layersEqual && propsEqual);
+    return propsChanged;
+  }
+
+  componentDidUpdate (prevProps) {
+    if (prevProps.selectedLayerIndex !== this.props.selectedLayerIndex) {
+      const selectedItemNode = this.selectedItemRef.current;
+      if (selectedItemNode && selectedItemNode.node) {
+        const target = selectedItemNode.node;
+        const options = {
+          root: this.scrollContainerRef.current,
+          threshold: 1.0
+        }
+        const observer = new IntersectionObserver(entries => {
+          observer.unobserve(target);
+          if (entries.length > 0 && entries[0].intersectionRatio < 1) {
+            target.scrollIntoView();
+          }
+        }, options);
+
+        observer.observe(target);
+      }
+    }
+  }
+
   render() {
 
     const listItems = []
     let idx = 0
-    this.groupedLayers().forEach(layers => {
+    const layerIdCount = new Map();
+
+    const layersByGroup = this.groupedLayers();
+    layersByGroup.forEach(layers => {
       const groupPrefix = layerPrefix(layers[0].id)
       if(layers.length > 1) {
         const grp = <LayerListGroup
           data-wd-key={[groupPrefix, idx].join('-')}
-          key={[groupPrefix, idx].join('-')}
+          key={`group-${groupPrefix}-${idx}`}
           title={groupPrefix}
           isActive={!this.isCollapsed(groupPrefix, idx) || idx === this.props.selectedLayerIndex}
           onActiveToggle={this.toggleLayerGroup.bind(this, groupPrefix, idx)}
@@ -143,14 +210,33 @@ class LayerListContainer extends React.Component {
       layers.forEach((layer, idxInGroup) => {
         const groupIdx = findClosestCommonPrefix(this.props.layers, idx)
 
+        const layerError = this.props.errors.find(error => {
+          return (
+            error.parsed &&
+            error.parsed.type === "layer" &&
+            error.parsed.data.index == idx
+          );
+        });
+
+        const additionalProps = {};
+        if (idx === this.props.selectedLayerIndex) {
+          additionalProps.ref = this.selectedItemRef;
+        }
+
+        layerIdCount.set(layer.id,
+          layerIdCount.has(layer.id) ? layerIdCount.get(layer.id) + 1 : 0
+        );
+        const key = `${layer.id}-${layerIdCount.get(layer.id)}`;
         const listItem = <LayerListItem
           className={classnames({
             '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
+            'maputnik-layer-list-item-group-last': idxInGroup == layers.length - 1 && layers.length > 1,
+            'maputnik-layer-list-item--error': !!layerError
           })}
           index={idx}
-          key={layer.id}
+          key={key}
           layerId={layer.id}
+          layerIndex={idx}
           layerType={layer.type}
           visibility={(layer.layout || {}).visibility}
           isSelected={idx === this.props.selectedLayerIndex}
@@ -158,13 +244,14 @@ class LayerListContainer extends React.Component {
           onLayerDestroy={this.props.onLayerDestroy.bind(this)}
           onLayerCopy={this.props.onLayerCopy.bind(this)}
           onLayerVisibilityToggle={this.props.onLayerVisibilityToggle.bind(this)}
+          {...additionalProps}
         />
         listItems.push(listItem)
         idx += 1
       })
     })
 
-    return <div className="maputnik-layer-list">
+    return <div className="maputnik-layer-list" ref={this.scrollContainerRef}>
       <AddModal
           layers={this.props.layers}
           sources={this.props.sources}
@@ -179,7 +266,7 @@ class LayerListContainer extends React.Component {
           <div className="maputnik-multibutton">
             <button
               id="skip-menu"
-              onClick={this.toggleLayers.bind(this)}
+              onClick={this.toggleLayers}
               className="maputnik-button">
               {this.state.areAllGroupsExpanded === true ? "Collapse" : "Expand"}
             </button>
@@ -203,12 +290,15 @@ class LayerListContainer extends React.Component {
   }
 }
 
+const LayerListContainerSortable = SortableContainer((props) => <LayerListContainer {...props} />)
+
 export default class LayerList extends React.Component {
   static propTypes = {...layerListPropTypes}
 
   render() {
-    return <LayerListContainer
+    return <LayerListContainerSortable
       {...this.props}
+      helperClass='sortableHelper'
       onSortEnd={this.props.onMoveLayer.bind(this)}
       useDragHandle={true}
     />

src/components/layers/LayerListItem.jsx

@@ -1,55 +1,57 @@
 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
+    wdKey: PropTypes.string,
+    classBlockName: PropTypes.string,
+    classBlockModifier: PropTypes.string,
   }
 
   renderIcon() {
     switch(this.props.action) {
-      case 'duplicate': 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 />
     }
   }
 
   render() {
+    const {classBlockName, classBlockModifier} = this.props;
+
+    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"
+      className={`maputnik-layer-list-icon-action ${classAdditions}`}
       data-wd-key={this.props.wdKey}
       onClick={this.props.onClick}
     >
@@ -58,9 +60,9 @@ class IconAction extends React.Component {
   }
 }
 
-@SortableElement
 class LayerListItem extends React.Component {
   static propTypes = {
+    layerIndex: PropTypes.number.isRequired,
     layerId: PropTypes.string.isRequired,
     layerType: PropTypes.string.isRequired,
     isSelected: PropTypes.bool,
@@ -92,35 +94,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)}
+      onClick={e => this.props.onLayerSelect(this.props.layerIndex)}
       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'}
-          onClick={e => this.props.onLayerDestroy(this.props.layerId)}
+          classBlockName="delete"
+          onClick={e => this.props.onLayerDestroy(this.props.layerIndex)}
         />
         <IconAction
           wdKey={"layer-list-item:"+this.props.layerId+":copy"}
           action={'duplicate'}
-          onClick={e => this.props.onLayerCopy(this.props.layerId)}
+          classBlockName="duplicate"
+          onClick={e => this.props.onLayerCopy(this.props.layerIndex)}
         />
         <IconAction
           wdKey={"layer-list-item:"+this.props.layerId+":toggle-visibility"}
-          action={this.props.visibility === 'visible' ? 'hide' : 'show'}
+          action={visibilityAction}
-          onClick={e => this.props.onLayerVisibilityToggle(this.props.layerId)}
+          classBlockName="visibility"
+          classBlockModifier={visibilityAction}
+          onClick={e => this.props.onLayerVisibilityToggle(this.props.layerIndex)}
         />
     </li>
   }
 }
 
-export default LayerListItem;
+const LayerListItemSortable = SortableElement((props) => <LayerListItem {...props} />);
+
+export default LayerListItemSortable;

src/components/layers/LayerSourceBlock.jsx

@@ -1,9 +1,8 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import * as 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 AutocompleteInput from '../inputs/AutocompleteInput'
 
 class LayerSourceBlock extends React.Component {
@@ -12,6 +11,7 @@ class LayerSourceBlock extends React.Component {
     wdKey: PropTypes.string,
     onChange: PropTypes.func,
     sourceIds: PropTypes.array,
+    error: PropTypes.object,
   }
 
   static defaultProps = {
@@ -20,7 +20,10 @@ class LayerSourceBlock extends React.Component {
   }
 
   render() {
-    return <InputBlock label={"Source"} doc={styleSpec.latest.layer.source.doc}
+    return <InputBlock
+      label={"Source"}
+      fieldSpec={latest.layer.source}
+      error={this.props.error}
       data-wd-key={this.props.wdKey}
     >
       <AutocompleteInput

src/components/layers/LayerSourceLayerBlock.jsx

@@ -1,9 +1,8 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import * as 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 AutocompleteInput from '../inputs/AutocompleteInput'
 
 class LayerSourceLayer extends React.Component {
@@ -21,7 +20,7 @@ class LayerSourceLayer extends React.Component {
   }
 
   render() {
-    return <InputBlock label={"Source Layer"} doc={styleSpec.latest.layer['source-layer'].doc}
+    return <InputBlock label={"Source Layer"} fieldSpec={latest.layer['source-layer']}
       data-wd-key="layer-source-layer"
     >
       <AutocompleteInput

src/components/layers/LayerTypeBlock.jsx

@@ -1,36 +1,52 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import * as 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'
+import StringInput from '../inputs/StringInput'
 
 class LayerTypeBlock extends React.Component {
   static propTypes = {
     value: PropTypes.string.isRequired,
     wdKey: PropTypes.string,
     onChange: PropTypes.func.isRequired,
+    error: PropTypes.object,
+    disabled: PropTypes.bool,
+  }
+
+  static defaultProps = {
+    disabled: false,
   }
 
   render() {
-    return <InputBlock label={"Type"} doc={styleSpec.latest.layer.type.doc}
+    return <InputBlock label={"Type"} fieldSpec={latest.layer.type}
       data-wd-key={this.props.wdKey}
+      error={this.props.error}
     >
-      <SelectInput
+      {this.props.disabled &&
-        options={[
+        <StringInput
-          ['background', 'Background'],
+          value={this.props.value}
-          ['fill', 'Fill'],
+          disabled={true}
-          ['line', 'Line'],
+        />
-          ['symbol', 'Symbol'],
+      }
-          ['raster', 'Raster'],
+      {!this.props.disabled &&
-          ['circle', 'Circle'],
+        <SelectInput
-          ['fill-extrusion', 'Fill Extrusion'],
+          options={[
-          ['hillshade', 'Hillshade'],
+            ['background', 'Background'],
-          ['heatmap', 'Heatmap'],
+            ['fill', 'Fill'],
-        ]}
+            ['line', 'Line'],
-        onChange={this.props.onChange}
+            ['symbol', 'Symbol'],
-        value={this.props.value}
+            ['raster', 'Raster'],
-      />
+            ['circle', 'Circle'],
+            ['fill-extrusion', 'Fill Extrusion'],
+            ['hillshade', 'Hillshade'],
+            ['heatmap', 'Heatmap'],
+          ]}
+          onChange={this.props.onChange}
+          value={this.props.value}
+        />
+      }
     </InputBlock>
   }
 }

src/components/layers/MaxZoomBlock.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import * as 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'
 
@@ -9,18 +9,21 @@ class MaxZoomBlock extends React.Component {
   static propTypes = {
     value: PropTypes.number,
     onChange: PropTypes.func.isRequired,
+    error: PropTypes.object,
   }
 
   render() {
-    return <InputBlock label={"Max Zoom"} doc={styleSpec.latest.layer.maxzoom.doc}
+    return <InputBlock label={"Max Zoom"} fieldSpec={latest.layer.maxzoom}
+      error={this.props.error}
       data-wd-key="max-zoom"
     >
       <NumberInput
+        allowRange={true}
         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 * as 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'
 
@@ -9,18 +9,21 @@ class MinZoomBlock extends React.Component {
   static propTypes = {
     value: PropTypes.number,
     onChange: PropTypes.func.isRequired,
+    error: PropTypes.object,
   }
 
   render() {
-    return <InputBlock label={"Min Zoom"} doc={styleSpec.latest.layer.minzoom.doc}
+    return <InputBlock label={"Min Zoom"} fieldSpec={latest.layer.minzoom}
+      error={this.props.error}
       data-wd-key="min-zoom"
     >
       <NumberInput
+        allowRange={true}
         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,8 +1,7 @@
 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 = {}
@@ -30,7 +29,49 @@ function groupFeaturesBySourceLayer(features) {
 class FeatureLayerPopup extends React.Component {
   static propTypes = {
     onLayerSelect: PropTypes.func.isRequired,
-    features: PropTypes.array
+    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];
+        return String(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.warn("Unable to get feature color, error:", err);
+      return "black";
+    }
   }
 
   render() {
@@ -38,21 +79,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
-          onClick={() => {
+            key={idx}
-            this.props.onLayerSelect(feature.layer.id)
+            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"
-          {feature.counter && <span> × {feature.counter}</span>}
+            onClick={() => {
-        </label>
+              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

@@ -21,12 +21,19 @@ function renderProperties(feature) {
   })
 }
 
-function renderFeature(feature) {
+function renderFeatureId(feature) {
-  return <div key={feature.id}>
+  return <InputBlock key={"feature-id"} label={"feature_id"}>
+    <StringInput value={displayValue(feature.id)} style={{backgroundColor: 'transparent'}} />
+  </InputBlock>
+  }
+
+function renderFeature(feature, idx) {
+  return <div key={`${feature.sourceLayer}-${idx}`}>
     <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>
+    {renderFeatureId(feature)}
     {renderProperties(feature)}
   </div>
 }
@@ -36,14 +43,14 @@ function removeDuplicatedFeatures(features) {
 
   features.forEach(feature => {
     const featureIndex = uniqueFeatures.findIndex(feature2 => {
-      return feature.layer['source-layer'] === feature2.layer['source-layer'] 
+      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('counter')) {
+      if(uniqueFeatures[featureIndex].hasOwnProperty('inspectModeCounter')) {
         uniqueFeatures[featureIndex].inspectModeCounter++
       } else {
         uniqueFeatures[featureIndex].inspectModeCounter = 2

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,10 +14,12 @@ import 'mapbox-gl/dist/mapbox-gl.css'
 import '../../mapboxgl.css'
 import '../../libs/mapbox-rtl'
 
-function renderPropertyPopup(features) {
+
-  var mountNode = document.createElement('div');
+const IS_SUPPORTED = MapboxGl.supported();
-  ReactDOM.render(<FeaturePropertyPopup features={features} />, mountNode)
+
-  return mountNode.innerHTML;
+function renderPopup(popup, mountNode) {
+  ReactDOM.render(popup, mountNode);
+  return mountNode;
 }
 
 function buildInspectStyle(originalMapStyle, coloredLayers, highlightedLayer) {
@@ -59,12 +60,15 @@ export default class MapboxGlMap extends React.Component {
     inspectModeEnabled: PropTypes.bool.isRequired,
     highlightedLayer: PropTypes.object,
     options: PropTypes.object,
+    replaceAccessTokens: PropTypes.func.isRequired,
+    onChange: PropTypes.func.isRequired,
   }
 
   static defaultProps = {
     onMapLoaded: () => {},
     onDataChange: () => {},
     onLayerSelect: () => {},
+    onChange: () => {},
     mapboxAccessToken: tokens.mapbox,
     options: {},
   }
@@ -75,57 +79,87 @@ export default class MapboxGlMap extends React.Component {
     this.state = {
       map: null,
       inspect: null,
-      isPopupOpen: false,
-      popupX: 0,
-      popupY: 0,
     }
   }
 
-  UNSAFE_componentWillReceiveProps(nextProps) {
+  updateMapFromProps(props) {
+    if(!IS_SUPPORTED) return;
+
     if(!this.state.map) return
-    const metadata = nextProps.mapStyle.metadata || {}
+    const metadata = props.mapStyle.metadata || {}
     MapboxGl.accessToken = metadata['maputnik:mapbox_access_token'] || tokens.mapbox
 
-    if(!nextProps.inspectModeEnabled) {
+    //Mapbox GL now does diffing natively so we don't need to calculate
-      //Mapbox GL now does diffing natively so we don't need to calculate
+    //the necessary operations ourselves!
-      //the necessary operations ourselves!
+    this.state.map.setStyle(
-      this.state.map.setStyle(nextProps.mapStyle, { diff: true})
+      this.props.replaceAccessTokens(props.mapStyle),
-    }
+      {diff: true}
+    )
   }
 
   componentDidUpdate(prevProps) {
+    if(!IS_SUPPORTED) return;
+
     const map = this.state.map;
 
-    if(this.props.inspectModeEnabled !== prevProps.inspectModeEnabled) {
+    this.updateMapFromProps(this.props);
+
+    if(this.state.inspect && this.props.inspectModeEnabled !== this.state.inspect._showInspectMap) {
+      // HACK: Fix for <https://github.com/maputnik/editor/issues/576>, while we wait for a proper fix.
+      // eslint-disable-next-line
+      this.state.inspect._popupBlocked = false;
       this.state.inspect.toggleInspector()
     }
-    if(this.props.inspectModeEnabled) {
+    if (map) {
-      this.state.inspect.render()
+      if (this.props.inspectModeEnabled) {
-    }
+        // HACK: We need to work out why we need to do this and what's causing
+        // this error. I'm assuming an issue with mapbox-gl update and
+        // mapbox-gl-inspect.
+        try {
+          this.state.inspect.render();
+        } catch(err) {
+          console.error("FIXME: Caught error", err);
+        }
+      }
 
-    map.showTileBoundaries = this.props.options.showTileBoundaries;
+      map.showTileBoundaries = this.props.options.showTileBoundaries;
-    map.showCollisionBoxes = this.props.options.showCollisionBoxes;
+      map.showCollisionBoxes = this.props.options.showCollisionBoxes;
+      map.showOverdrawInspector = this.props.options.showOverdrawInspector;
+    }
   }
 
   componentDidMount() {
+    if(!IS_SUPPORTED) return;
+
     const mapOpts = {
       ...this.props.options,
       container: this.container,
       style: this.props.mapStyle,
       hash: true,
+      maxZoom: 24
     }
 
     const map = new MapboxGl.Map(mapOpts);
 
+    const mapViewChange = () => {
+      const center = map.getCenter();
+      const zoom = map.getZoom();
+      this.props.onChange({center, zoom});
+    }
+    mapViewChange();
+
     map.showTileBoundaries = mapOpts.showTileBoundaries;
     map.showCollisionBoxes = mapOpts.showCollisionBoxes;
+    map.showOverdrawInspector = mapOpts.showOverdrawInspector;
 
-    const zoom = new ZoomControl;
+    const zoomControl = new ZoomControl;
-    map.addControl(zoom, 'top-right');
+    map.addControl(zoomControl, '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
@@ -141,18 +175,20 @@ export default class MapboxGlMap extends React.Component {
       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 {
-          var mountNode = document.createElement('div');
+          return renderPopup(<FeatureLayerPopup features={features} onLayerSelect={this.onLayerSelectById} zoom={this.state.zoom} />, tmpNode);
-          ReactDOM.render(<FeatureLayerPopup features={features} onLayerSelect={this.props.onLayerSelect} />, mountNode)
-          return mountNode
         }
       }
     })
     map.addControl(inspect)
 
     map.on("style.load", () => {
-      this.setState({ map, inspect });
+      this.setState({
+        map,
+        inspect,
+        zoom: map.getZoom()
+      });
     })
 
     map.on("data", e => {
@@ -161,12 +197,41 @@ export default class MapboxGlMap extends React.Component {
         map: this.state.map
       })
     })
+
+    map.on("error", e => {
+      console.log("ERROR", e);
+    })
+
+    map.on("zoom", e => {
+      this.setState({
+        zoom: map.getZoom()
+      });
+    });
+
+    map.on("dragend", mapViewChange);
+    map.on("zoomend", mapViewChange);
+  }
+
+  onLayerSelectById = (id) => {
+    const index = this.props.mapStyle.layers.findIndex(layer => layer.id === id);
+    this.props.onLayerSelect(index);
   }
 
   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,80 +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 'ol/ol.css'
-
-
-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.map = null
-  }
-
-  updateStyle(newMapStyle) {
-    const olms = require('ol-mapbox-style');
-    const styleFunc = olms.apply(this.map, newMapStyle)
-  }
-
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    require.ensure(["ol", "ol-mapbox-style"], () => {
-      if(!this.map) return
-      this.updateStyle(nextProps.mapStyle)
-    })
-  }
-
-  componentDidMount() {
-    //Load OpenLayers dynamically once we need it
-    //TODO: Make this more convenient
-    require.ensure(["ol", "ol/map", "ol/view", "ol/control/zoom", "ol-mapbox-style"], ()=> {
-      console.log('Loaded OpenLayers3 renderer')
-
-      const olMap = require('ol/map').default
-      const olView = require('ol/view').default
-      const olZoom = require('ol/control/zoom').default
-
-      const map = new olMap({
-        target: this.container,
-        layers: [],
-        view: new olView({
-          zoom: 2,
-          center: [52.5, -78.4]
-        })
-      })
-      map.addControl(new olZoom())
-      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,189 @@
+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,
+    replaceAccessTokens: PropTypes.func.isRequired,
+    onChange: PropTypes.func.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.replaceAccessTokens(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)
+        ]
+      })
+    })
+
+    const onMoveEnd = () => {
+      const zoom = map.getView().getZoom();
+      const center = toLonLat(map.getView().getCenter());
+
+      this.props.onChange({
+        zoom,
+        center: {
+          lng: center[0],
+          lat: center[1],
+        },
+      });
+    }
+
+    onMoveEnd();
+    map.on('moveend', onMoveEnd);
+
+    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.replaceAccessTokens(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: {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,8 +2,6 @@ import React from 'react'
 import PropTypes from 'prop-types'
 
 import Button from '../Button'
-import InputBlock from '../inputs/InputBlock'
-import StringInput from '../inputs/StringInput'
 import Modal from './Modal'
 
 import LayerTypeBlock from '../layers/LayerTypeBlock'
@@ -22,7 +20,7 @@ class AddModal extends React.Component {
     sources: PropTypes.object.isRequired,
   }
 
-  addLayer() {
+  addLayer = () => {
     const changedLayers = this.props.layers.slice(0)
     const layer = {
       id: this.state.id,
@@ -55,10 +53,10 @@ class AddModal extends React.Component {
     }
   }
 
-  UNSAFE_componentWillUpdate(nextProps, nextState) {
+  componentDidUpdate(prevProps, prevState) {
     // Check if source is valid for new type
-    const oldType = this.state.type;
+    const oldType = prevState.type;
-    const newType = nextState.type;
+    const newType = this.state.type;
 
     const availableSourcesOld = this.getSources(oldType);
     const availableSourcesNew = this.getSources(newType);
@@ -66,11 +64,11 @@ class AddModal extends React.Component {
     if(
       // Type has changed
       oldType !== newType
-      && this.state.source !== ""
+      && prevState.source !== ""
       // Was a valid source previously
-      && availableSourcesOld.indexOf(this.state.source) > -1
+      && availableSourcesOld.indexOf(prevState.source) > -1
       // And is not a valid source now
-      && availableSourcesNew.indexOf(nextState.source) < 0
+      && availableSourcesNew.indexOf(this.state.source) < 0
     ) {
       // Clear the source
       this.setState({
@@ -93,10 +91,19 @@ class AddModal extends React.Component {
         "line",
         "symbol",
         "circle",
-        "fill-extrusion"
+        "fill-extrusion",
+        "heatmap"
       ],
       raster: [
         "raster"
+      ],
+      geojson: [
+        "fill",
+        "line",
+        "symbol",
+        "circle",
+        "fill-extrusion",
+        "heatmap"
       ]
     }
 
@@ -119,6 +126,7 @@ class AddModal extends React.Component {
       onOpenToggle={this.props.onOpenToggle}
       title={'Add Layer'}
       data-wd-key="modal:add-layer"
+      className="maputnik-add-modal"
     >
       <div className="maputnik-add-layer">
       <LayerIdBlock
@@ -151,7 +159,7 @@ class AddModal extends React.Component {
       }
       <Button
         className="maputnik-add-layer-button"
-        onClick={this.addLayer.bind(this)}
+        onClick={this.addLayer}
         data-wd-key="add-layer"
       >
         Add Layer

src/components/modals/DebugModal.js

@@ -0,0 +1,73 @@
+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,
+    mapView: PropTypes.object,
+  }
+
+  render() {
+    const {mapView} = this.props;
+
+    const osmZoom = Math.round(mapView.zoom)+1;
+    const osmLon = Number.parseFloat(mapView.center.lng).toFixed(5);
+    const osmLat = Number.parseFloat(mapView.center.lat).toFixed(5);
+
+    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">
+        <h4>Options</h4>
+        {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>
+      <div className="maputnik-modal-section">
+        <h4>Links</h4>
+        <p>
+          <a
+            target="_blank"
+            rel="noopener noreferrer"
+            href={`https://www.openstreetmap.org/#map=${osmZoom}/${osmLat}/${osmLon}`}
+          >
+            Open in OSM
+          </a> &mdash; Opens the current view on openstreetmap.org
+        </p>
+      </div>
+    </Modal>
+  }
+}
+
+export default DebugModal;

src/components/modals/ExportModal.jsx

@@ -1,226 +1,19 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import Slugify from 'slugify'
 import { saveAs } from 'file-saver'
 
-import * as 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 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 GitHub from 'github-api'
+import fieldSpecAdditional from '../../libs/field-spec-additional'
-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,
-      public: false,
-      saving: false,
-      latestGist: null,
-    }
-  }
-
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    this.setState({
-      ...this.state,
-      preview: !!(nextProps.mapStyle.metadata || {})['maputnik:openmaptiles_access_token']
-    })
-  }
-
-  onSave() {
-    this.setState({
-      ...this.state,
-      saving: true
-    });
-
-    const preview = this.state.preview;
-    
-    const mapboxToken = (this.props.mapStyle.metadata || {})['maputnik:mapbox_access_token'];
-
-    const mapStyleStr = preview ?
-        styleSpec.format(stripAccessTokens(style.replaceAccessTokens(this.props.mapStyle))) :
-        styleSpec.format(stripAccessTokens(this.props.mapStyle));
-    const styleTitle = this.props.mapStyle.name || 'Style';
-    const htmlStr = `
-  <!DOCTYPE html>
-  <html>
-  <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>`+styleTitle+` Preview</title>
-    <link rel="stylesheet" type="text/css" href="https://api.mapbox.com/mapbox-gl-js/v0.44.0/mapbox-gl.css" />
-    <script src="https://api.mapbox.com/mapbox-gl-js/v0.44.0/mapbox-gl.js"></script>
-    <style>
-      body { margin:0; padding:0; }
-      #map { position:absolute; top:0; bottom:0; width:100%; }
-    </style>
-  </head>
-  <body>
-    <div id='map'></div>
-    <script>
-        mapboxgl.accessToken = '${mapboxToken}';
-        var map = new mapboxgl.Map({
-          container: 'map',
-          style: 'style.json',
-          attributionControl: true,
-          hash: true
-        });
-        map.addControl(new mapboxgl.NavigationControl());
-    </script>
-  </body>
-  </html>
-`
-    const files = {
-      "style.json": {
-        content: mapStyleStr
-      }
-    }
-    if(preview) {
-      files["index.html"] = {
-        content: htmlStr
-      }
-    }
-    const gh = new GitHub();
-    let gist = gh.getGist(); // not a gist yet
-    gist.create({
-      public: this.state.public,
-      description: styleTitle,
-      files: files
-    }).then(function({data}) {
-      return gist.read();
-    }).then(function({data}) {
-      this.setState({
-        ...this.state,
-        latestGist: data,
-        saving: false,
-      });
-    }.bind(this));
-  }
-
-  onPreviewChange(value) {
-    this.setState({
-      ...this.state,
-      preview: value
-    })
-  }
-
-  onPublicChange(value) {
-    this.setState({
-      ...this.state,
-      public: value
-    })
-  }
-
-  changeMetadataProperty(property, value) {
-    const changedStyle = {
-      ...this.props.mapStyle,
-      metadata: {
-        ...this.props.mapStyle.metadata,
-        [property]: value
-      }
-    }
-    this.props.onStyleChanged(changedStyle)
-  }
-
-  renderPreviewLink() {
-    const gist = this.state.latestGist;
-    const user = gist.user || 'anonymous';
-    const preview = !!gist.files['index.html'];
-    if(preview) {
-      return <span><a target="_blank" rel="noopener noreferrer" href={"https://bl.ocks.org/"+user+"/"+gist.id}>Preview</a>,{' '}</span>
-    }
-    return null;
-  }
-
-  renderLatestGist() {
-    const gist = this.state.latestGist;
-    const saving = this.state.saving;
-    if(saving) {
-      return <p>Saving...</p>
-    } else if(gist) {
-      const user = gist.user || 'anonymous';
-      const rawGistLink = "https://gist.githubusercontent.com/" + user + "/" + gist.id + "/raw/" + gist.history[0].version + "/style.json"
-      const maputnikStyleLink = "https://maputnik.github.io/editor/?style=" + rawGistLink
-      return <div className="maputnik-render-gist">
-        <p>
-          Latest saved gist:{' '}
-          {this.renderPreviewLink(this)}
-          <a target="_blank" rel="noopener noreferrer" href={"https://gist.github.com/" + user + "/" + gist.id}>Source</a>
-        </p>
-        <p>
-          <CopyToClipboard text={maputnikStyleLink}>
-            <span>Share this style: <Button><TiClipboard size={18} /></Button></span>
-          </CopyToClipboard>
-          <StringInput value={maputnikStyleLink} />
-        </p>
-      </div>
-    }
-  }
-
-  render() {
-    return <div className="maputnik-export-gist">
-      <Button onClick={this.onSave.bind(this)}>
-        <MdFileDownload />
-        Save to Gist (anonymous)
-      </Button>
-      <div className="maputnik-modal-sub-section">
-        <CheckboxInput
-          value={this.state.public}
-          name='gist-style-public'
-          onChange={this.onPublicChange.bind(this)}
-        />
-        <span> Public gist</span>
-      </div>
-      <div className="maputnik-modal-sub-section">
-        <CheckboxInput
-          value={this.state.preview}
-          name='gist-style-preview'
-          onChange={this.onPreviewChange.bind(this)}
-        />
-        <span> Include preview</span>
-      </div>
-      {this.state.preview ?
-          <div>
-            <InputBlock
-                label={"OpenMapTiles Access Token: "}>
-              <StringInput
-                  value={(this.props.mapStyle.metadata || {})['maputnik:openmaptiles_access_token']}
-                  onChange={this.changeMetadataProperty.bind(this, "maputnik:openmaptiles_access_token")}/>
-            </InputBlock>
-            <InputBlock
-                label={"Mapbox Access Token: "}>
-              <StringInput
-                  value={(this.props.mapStyle.metadata || {})['maputnik:mapbox_access_token']}
-                  onChange={this.changeMetadataProperty.bind(this, "maputnik:mapbox_access_token")}/>
-            </InputBlock>
-            <a target="_blank" rel="noopener noreferrer" href="https://openmaptiles.com/hosting/">Get your free access token</a>
-          </div>
-      : null}
-      {this.renderLatestGist()}
-    </div>
-  }
-}
-
-function stripAccessTokens(mapStyle) {
-  const changedMetadata = { ...mapStyle.metadata }
-  delete changedMetadata['maputnik:mapbox_access_token']
-  delete changedMetadata['maputnik:openmaptiles_access_token']
-  return {
-    ...mapStyle,
-    metadata: changedMetadata
-  }
-}
 
 class ExportModal extends React.Component {
   static propTypes = {
@@ -235,10 +28,23 @@ class ExportModal extends React.Component {
   }
 
   downloadStyle() {
-    const tokenStyle = styleSpec.format(stripAccessTokens(style.replaceAccessTokens(this.props.mapStyle)));
+    const tokenStyle = format(
+      style.stripAccessTokens(
+        style.replaceAccessTokens(this.props.mapStyle)
+      )
+    );
 
     const blob = new Blob([tokenStyle], {type: "application/json;charset=utf-8"});
-    saveAs(blob, this.props.mapStyle.id + ".json");
+    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) {
@@ -259,6 +65,7 @@ class ExportModal extends React.Component {
       isOpen={this.props.isOpen}
       onOpenToggle={this.props.onOpenToggle}
       title={'Export Style'}
+      className="maputnik-export-modal"
     >
 
       <div className="maputnik-modal-section">
@@ -267,26 +74,35 @@ class ExportModal extends React.Component {
           Download a JSON style to your computer.
         </p>
 
-        <p>
+        <div>
-          <InputBlock label={"OpenMapTiles Access Token: "}>
+          <InputBlock
+            label={fieldSpecAdditional.maputnik.mapbox_access_token.label}
+            fieldSpec={fieldSpecAdditional.maputnik.mapbox_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: "}>
+          <InputBlock
+            label={fieldSpecAdditional.maputnik.maptiler_access_token.label}
+            fieldSpec={fieldSpecAdditional.maputnik.maptiler_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: "}>
+          <InputBlock
+            label={fieldSpecAdditional.maputnik.thunderforest_access_token.label}
+            fieldSpec={fieldSpecAdditional.maputnik.thunderforest_access_token}
+          >
             <StringInput
               value={(this.props.mapStyle.metadata || {})['maputnik:thunderforest_access_token']}
               onChange={this.changeMetadataProperty.bind(this, "maputnik:thunderforest_access_token")}
             />
           </InputBlock>
-        </p>
+        </div>
 
         <Button onClick={this.downloadStyle.bind(this)}>
           <MdFileDownload />
@@ -294,10 +110,6 @@ class ExportModal extends React.Component {
         </Button>
       </div>
 
-      <div className="maputnik-modal-section hide">
-        <h4>Save style</h4>
-        <Gist mapStyle={this.props.mapStyle} onStyleChanged={this.props.onStyleChanged}/>
-      </div>
     </Modal>
   }
 }

src/components/modals/LoadingModal.jsx

@@ -13,10 +13,6 @@ class LoadingModal extends React.Component {
     message: PropTypes.node.isRequired,
   }
 
-  constructor(props) {
-    super(props);
-  }
-
   underlayOnClick(e) {
     // This stops click events falling through to underlying modals.
     e.stopPropagation();

src/components/modals/Modal.jsx

@@ -1,7 +1,8 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import CloseIcon from 'react-icons/lib/md/close'
+import {MdClose} from 'react-icons/md'
 import AriaModal from 'react-aria-modal'
+import classnames from 'classnames';
 
 
 class Modal extends React.Component {
@@ -13,12 +14,24 @@ class Modal extends React.Component {
     children: PropTypes.node,
     underlayClickExits: PropTypes.bool,
     underlayProps: PropTypes.object,
+    className: PropTypes.string,
   }
 
   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');
   }
@@ -32,19 +45,19 @@ class Modal extends React.Component {
         getApplicationNode={this.getApplicationNode}
         data-wd-key={this.props["data-wd-key"]}
         verticallyCenter={true}
-        onExit={() => this.props.onOpenToggle(false)}
+        onExit={this.onClose}
       >
-        <div className="maputnik-modal"
+        <div className={classnames("maputnik-modal", this.props.className)}
           data-wd-key={this.props["data-wd-key"]}
         >
           <header className="maputnik-modal-header">
             <h1 className="maputnik-modal-header-title">{this.props.title}</h1>
             <span className="maputnik-modal-header-space"></span>
             <button className="maputnik-modal-header-toggle"
-              onClick={() => this.props.onOpenToggle(false)}
+              onClick={this.onClose}
               data-wd-key={this.props["data-wd-key"]+".close-modal"}
             >
-              <CloseIcon />
+              <MdClose />
             </button>
           </header>
           <div className="maputnik-modal-scroller">

src/components/modals/OpenModal.jsx

@@ -4,10 +4,10 @@ import LoadingModal from './LoadingModal'
 import Modal from './Modal'
 import Button from '../Button'
 import FileReaderInput from 'react-file-reader-input'
-import request from 'request'
+import UrlInput from '../inputs/UrlInput'
 
-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'
@@ -30,7 +30,7 @@ class PublicStyle extends React.Component {
         <header className="maputnik-public-style-header">
           <h4>{this.props.title}</h4>
           <span className="maputnik-space" />
-          <AddIcon />
+          <MdAddCircleOutline />
         </header>
         <div
           className="maputnik-public-style-thumbnail"
@@ -52,7 +52,9 @@ class OpenModal extends React.Component {
 
   constructor(props) {
     super(props);
-    this.state = {};
+    this.state = {
+      styleUrl: ""
+    };
   }
 
   clearError() {
@@ -74,42 +76,58 @@ class OpenModal extends React.Component {
     }
   }
 
-  onStyleSelect(styleUrl) {
+  onStyleSelect = (styleUrl) => {
     this.clearError();
 
-    const reqOpts = {
+    let canceled;
-      url: styleUrl,
+
-      withCredentials: false,
+    const activeRequest = fetch(styleUrl, {
-    }
+      mode: 'cors',
+      credentials: "same-origin"
+    })
+    .then(function(response) {
+      return response.json();
+    })
+    .then((body) => {
+      if(canceled) {
+        return;
+      }
 
-    const activeRequest = request(reqOpts, (error, response, body) => {
       this.setState({
         activeRequest: null,
         activeRequestUrl: null
       });
 
-        if (!error && response.statusCode == 200) {
+      const mapStyle = style.ensureStyleValidity(body)
-          const mapStyle = style.ensureStyleValidity(JSON.parse(body))
+      console.log('Loaded style ', mapStyle.id)
-          console.log('Loaded style ', mapStyle.id)
+      this.props.onStyleOpen(mapStyle)
-          this.props.onStyleOpen(mapStyle)
+      this.onOpenToggle()
-          this.onOpenToggle()
+    })
-        } else {
+    .catch((err) => {
-          console.warn('Could not open the style URL', styleUrl)
+      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: activeRequest,
+      activeRequest: {
-      activeRequestUrl: reqOpts.url
+        abort: function() {
+          canceled = true;
+        }
+      },
+      activeRequestUrl: styleUrl
     })
   }
 
-  onOpenUrl() {
+  onOpenUrl = (url) => {
-    const url = this.styleUrlElement.value;
+    this.onStyleSelect(this.state.styleUrl);
-    this.onStyleSelect(url);
   }
 
-  onUpload(_, files) {
+  onUpload = (_, files) => {
     const [e, file] = files[0];
     const reader = new FileReader();
 
@@ -135,10 +153,19 @@ class OpenModal extends React.Component {
   }
 
   onOpenToggle() {
+    this.setState({
+      styleUrl: ""
+    });
     this.clearError();
     this.props.onOpenToggle();
   }
 
+  onChangeUrl = (url) => {
+    this.setState({
+      styleUrl: url,
+    });
+  }
+
   render() {
     const styleOptions = publicStyles.map(style => {
       return <PublicStyle
@@ -146,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}
       />
     })
 
@@ -160,49 +187,65 @@ class OpenModal extends React.Component {
       );
     }
 
-    return <Modal
+    return  (
-      data-wd-key="open-modal"
+      <div>
-      isOpen={this.props.isOpen}
+        <Modal
-      onOpenToggle={() => this.onOpenToggle()}
+          data-wd-key="open-modal"
-      title={'Open Style'}
+          isOpen={this.props.isOpen}
-    >
+          onOpenToggle={() => this.onOpenToggle()}
-      {errorElement}
+          title={'Open Style'}
-      <section className="maputnik-modal-section">
+        >
-        <h2>Upload Style</h2>
+          {errorElement}
-        <p>Upload a JSON style from your computer.</p>
+          <section className="maputnik-modal-section">
-        <FileReaderInput onChange={this.onUpload.bind(this)} tabIndex="-1">
+            <h2>Upload Style</h2>
-          <Button className="maputnik-upload-button"><FileUploadIcon /> Upload</Button>
+            <p>Upload a JSON style from your computer.</p>
-        </FileReaderInput>
+            <FileReaderInput onChange={this.onUpload} tabIndex="-1">
-      </section>
+              <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 data-wd-key="open-modal.url.input" type="text" ref={(input) => this.styleUrlElement = input} className="maputnik-input" placeholder="Enter URL..."/>
+            <UrlInput
-        <div>
+              data-wd-key="open-modal.url.input"
-          <Button data-wd-key="open-modal.url.button" className="maputnik-big-button" onClick={this.onOpenUrl.bind(this)}>Open URL</Button>
+              type="text"
-        </div>
+              className="maputnik-input"
-      </section>
+              default="Enter URL..."
+              value={this.state.styleUrl}
+              onInput={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>
 
-      <LoadingModal
+        <LoadingModal
-        isOpen={!!this.state.activeRequest}
+          isOpen={!!this.state.activeRequest}
-        title={'Loading style'}
+          title={'Loading style'}
-        onCancel={(e) => this.onCancelActiveRequest(e)}
+          onCancel={(e) => this.onCancelActiveRequest(e)}
-        message={"Loading: "+this.state.activeRequestUrl}
+          message={"Loading: "+this.state.activeRequestUrl}
-      />
+        />
-    </Modal>
+      </div>
+    )
   }
 }
 

src/components/modals/SettingsModal.jsx

@@ -1,118 +1,266 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import * as styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec'
+import {latest} from '@mapbox/mapbox-gl-style-spec'
 import InputBlock from '../inputs/InputBlock'
+import ArrayInput from '../inputs/ArrayInput'
+import NumberInput from '../inputs/NumberInput'
 import StringInput from '../inputs/StringInput'
+import UrlInput from '../inputs/UrlInput'
 import SelectInput from '../inputs/SelectInput'
+import EnumInput from '../inputs/EnumInput'
+import ColorField from '../fields/ColorField'
 import Modal from './Modal'
+import fieldSpecAdditional from '../../libs/field-spec-additional'
 
 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) {
+  changeTransitionProperty(property, value) {
-    super(props);
+    const transition = {
+      ...this.props.mapStyle.transition,
+    }
+
+    if (value === undefined) {
+      delete transition[property];
+    }
+    else {
+      transition[property] = value;
+    }
+
+    this.props.onStyleChanged({
+      ...this.props.mapStyle,
+      transition,
+    });
+  }
+
+  changeLightProperty(property, value) {
+    const light = {
+      ...this.props.mapStyle.light,
+    }
+
+    if (value === undefined) {
+      delete light[property];
+    }
+    else {
+      light[property] = value;
+    }
+
+    this.props.onStyleChanged({
+      ...this.props.mapStyle,
+      light,
+    });
   }
 
   changeStyleProperty(property, value) {
     const changedStyle = {
       ...this.props.mapStyle,
-      [property]: value
+    };
-    }
-    this.props.onStyleChanged(changedStyle)
-  }
 
-  changeMetadataProperty(property, value) {
+    if (value === undefined) {
-    const changedStyle = {
+      delete changedStyle[property];
-      ...this.props.mapStyle,
-      metadata: {
-        ...this.props.mapStyle.metadata,
-        [property]: value
-      }
     }
-    this.props.onStyleChanged(changedStyle)
+    else {
+      changedStyle[property] = value;
+    }
+    this.props.onStyleChanged(changedStyle);
   }
 
   render() {
     const metadata = this.props.mapStyle.metadata || {}
+    const {onChangeMetadataProperty, mapStyle} = this.props;
     const inputProps = { }
+
+    const light = this.props.mapStyle.light || {};
+    const transition = this.props.mapStyle.transition || {};
+
     return <Modal
       data-wd-key="modal-settings"
       isOpen={this.props.isOpen}
       onOpenToggle={this.props.onOpenToggle}
       title={'Style Settings'}
     >
-      <div style={{minWidth: 350}}>
+      <div className="modal-settings">
-      <InputBlock label={"Name"} doc={styleSpec.latest.$root.name.doc}>
+      <InputBlock label={"Name"} fieldSpec={latest.$root.name}>
         <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."}>
+      <InputBlock label={"Owner"} fieldSpec={{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"} fieldSpec={latest.$root.sprite}>
-        <StringInput {...inputProps}
+        <UrlInput {...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"} fieldSpec={latest.$root.glyphs}>
-        <StringInput {...inputProps}
+        <UrlInput {...inputProps}
           data-wd-key="modal-settings.glyphs" 
           value={this.props.mapStyle.glyphs}
           onChange={this.changeStyleProperty.bind(this, "glyphs")}
         />
       </InputBlock>
 
-      <InputBlock label={"Mapbox Access Token"} doc={"Public access token for Mapbox services."}>
+      <InputBlock
+        label={fieldSpecAdditional.maputnik.mapbox_access_token.label} 
+        fieldSpec={fieldSpecAdditional.maputnik.mapbox_access_token}
+      >
         <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={fieldSpecAdditional.maputnik.maptiler_access_token.label} 
+        fieldSpec={fieldSpecAdditional.maputnik.maptiler_access_token}
+      >
         <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."}>
+      <InputBlock
+        label={fieldSpecAdditional.maputnik.thunderforest_access_token.label} 
+        fieldSpec={fieldSpecAdditional.maputnik.thunderforest_access_token}
+      >
         <StringInput {...inputProps}
           data-wd-key="modal-settings.maputnik:thunderforest_access_token" 
           value={metadata['maputnik:thunderforest_access_token']}
-          onChange={this.changeMetadataProperty.bind(this, "maputnik:thunderforest_access_token")}
+          onChange={onChangeMetadataProperty.bind(this, "maputnik:thunderforest_access_token")}
         />
       </InputBlock>
 
-      <InputBlock label={"Style Renderer"} doc={"Choose the default Maputnik renderer for this style."}>
+      <InputBlock label={"Center"} fieldSpec={latest.$root.center}>
+        <ArrayInput
+          length={2}
+          type="number"
+          value={mapStyle.center}
+          default={latest.$root.center.default || [0, 0]}
+          onChange={this.changeStyleProperty.bind(this, "center")}
+        />
+      </InputBlock>
+
+      <InputBlock label={"Zoom"} fieldSpec={latest.$root.zoom}>
+        <NumberInput
+          {...inputProps}
+          value={mapStyle.zoom}
+          default={latest.$root.zoom.default || 0}
+          onChange={this.changeStyleProperty.bind(this, "zoom")}
+        />
+      </InputBlock>
+
+      <InputBlock label={"Bearing"} fieldSpec={latest.$root.bearing}>
+        <NumberInput
+          {...inputProps}
+          value={mapStyle.bearing}
+          default={latest.$root.bearing.default}
+          onChange={this.changeStyleProperty.bind(this, "bearing")}
+        />
+      </InputBlock>
+
+      <InputBlock label={"Pitch"} fieldSpec={latest.$root.pitch}>
+        <NumberInput
+          {...inputProps}
+          value={mapStyle.pitch}
+          default={latest.$root.pitch.default}
+          onChange={this.changeStyleProperty.bind(this, "pitch")}
+        />
+      </InputBlock>
+
+      <InputBlock label={"Light anchor"} fieldSpec={latest.light.anchor}>
+        <EnumInput
+          {...inputProps}
+          value={light.anchor}
+          options={Object.keys(latest.light.anchor.values)}
+          default={latest.light.anchor.default}
+          onChange={this.changeLightProperty.bind(this, "anchor")}
+        />
+      </InputBlock>
+
+      <InputBlock label={"Light color"} fieldSpec={latest.light.color}>
+        <ColorField
+          {...inputProps}
+          value={light.color}
+          default={latest.light.color.default}
+          onChange={this.changeLightProperty.bind(this, "color")}
+        />
+      </InputBlock>
+
+      <InputBlock label={"Light intensity"} fieldSpec={latest.light.intensity}>
+        <NumberInput
+          {...inputProps}
+          value={light.intensity}
+          default={latest.light.intensity.default}
+          onChange={this.changeLightProperty.bind(this, "intensity")}
+        />
+      </InputBlock>
+
+      <InputBlock label={"Light position"} fieldSpec={latest.light.position}>
+        <ArrayInput
+          {...inputProps}
+          type="number"
+          length={latest.light.position.length}
+          value={light.position}
+          default={latest.light.position.default}
+          onChange={this.changeLightProperty.bind(this, "position")}
+        />
+      </InputBlock>
+
+      <InputBlock label={"Transition delay"} fieldSpec={latest.transition.delay}>
+        <NumberInput
+          {...inputProps}
+          value={transition.delay}
+          default={latest.transition.delay.default}
+          onChange={this.changeTransitionProperty.bind(this, "delay")}
+        />
+      </InputBlock>
+
+      <InputBlock label={"Transition duration"} fieldSpec={latest.transition.duration}>
+        <NumberInput
+          {...inputProps}
+          value={transition.duration}
+          default={latest.transition.duration.default}
+          onChange={this.changeTransitionProperty.bind(this, "duration")}
+        />
+      </InputBlock>
+
+      <InputBlock
+        label={fieldSpecAdditional.maputnik.style_renderer.label}
+        fieldSpec={fieldSpecAdditional.maputnik.style_renderer}
+      >
         <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

@@ -1,7 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import Button from '../Button'
 import Modal from './Modal'
 
 
@@ -11,10 +10,6 @@ class ShortcutsModal extends React.Component {
     onOpenToggle: PropTypes.func.isRequired,
   }
 
-  constructor(props) {
-    super(props);
-  }
-
   render() {
     const help = [
       {
@@ -45,6 +40,10 @@ class ShortcutsModal extends React.Component {
         key: "m",
         text: "Focus map"
       },
+      {
+        key: "!",
+        text: "Debug modal"
+      },
     ]
 
 

src/components/modals/SourcesModal.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import * as 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>
   }
@@ -53,7 +52,20 @@ function editorMode(source) {
     if(source.tiles) return 'tilexyz_vector'
     return 'tilejson_vector'
   }
-  if(source.type === 'geojson') return 'geojson'
+  if(source.type === 'geojson') {
+    if (typeof(source.data) === "string") {
+      return 'geojson_url';
+    }
+    else {
+      return 'geojson_json';
+    }
+  }
+  if(source.type === 'image') {
+    return 'image';
+  }
+  if(source.type === 'video') {
+    return 'video';
+  }
   return null
 }
 
@@ -76,7 +88,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">
@@ -106,76 +118,128 @@ class AddSource extends React.Component {
 
   defaultSource(mode) {
     const source = (this.state || {}).source || {}
+    const {protocol} = window.location;
+
     switch(mode) {
-      case 'geojson': return {
+      case 'geojson_url': return {
         type: 'geojson',
-        data: source.data || 'http://localhost:3000/geojson.json'
+        data: `${protocol}//localhost:3000/geojson.json`
+      }
+      case 'geojson_json': return {
+        type: 'geojson',
+        data: {}
       }
       case 'tilejson_vector': return {
         type: 'vector',
-        url: source.url || 'http://localhost:3000/tilejson.json'
+        url: source.url || `${protocol}//localhost:3000/tilejson.json`
       }
       case 'tilexyz_vector': return {
         type: 'vector',
-        tiles: source.tiles || ['http://localhost:3000/{x}/{y}/{z}.pbf'],
+        tiles: source.tiles || [`${protocol}//localhost:3000/{x}/{y}/{z}.pbf`],
         minZoom: source.minzoom || 0,
         maxZoom: source.maxzoom || 14
       }
       case 'tilejson_raster': return {
         type: 'raster',
-        url: source.url || 'http://localhost:3000/tilejson.json'
+        url: source.url || `${protocol}//localhost:3000/tilejson.json`
       }
       case 'tilexyz_raster': return {
         type: 'raster',
-        tiles: source.tiles || ['http://localhost:3000/{x}/{y}/{z}.pbf'],
+        tiles: source.tiles || [`${protocol}//localhost:3000/{x}/{y}/{z}.pbf`],
         minzoom: source.minzoom || 0,
         maxzoom: source.maxzoom || 14
       }
       case 'tilejson_raster-dem': return {
         type: 'raster-dem',
-        url: source.url || 'http://localhost:3000/tilejson.json'
+        url: source.url || `${protocol}//localhost:3000/tilejson.json`
       }
       case 'tilexyz_raster-dem': return {
         type: 'raster-dem',
-        tiles: source.tiles || ['http://localhost:3000/{x}/{y}/{z}.pbf'],
+        tiles: source.tiles || [`${protocol}//localhost:3000/{x}/{y}/{z}.pbf`],
         minzoom: source.minzoom || 0,
         maxzoom: source.maxzoom || 14
       }
+      case 'image': return {
+        type: 'image',
+        url: `${protocol}//localhost:3000/image.png`,
+        coordinates: [
+          [0,0],
+          [0,0],
+          [0,0],
+          [0,0],
+        ],
+      }
+      case 'video': return {
+        type: 'video',
+        urls: [
+          `${protocol}//localhost:3000/movie.mp4`
+        ],
+        coordinates: [
+          [0,0],
+          [0,0],
+          [0,0],
+          [0,0],
+        ],
+      }
       default: return {}
     }
   }
 
+  onAdd = () => {
+    const {source, sourceId} = this.state;
+    this.props.onAdd(sourceId, source);
+  }
+
+  onChangeSource = (source) => {
+    this.setState({source});
+  }
+
   render() {
+    // Kind of a hack because the type changes, however maputnik has 1..n
+    // options per type, for example 
+    //
+    //  - 'geojson' - 'GeoJSON (URL)' and 'GeoJSON (JSON)'
+    //  - 'raster' - 'Raster (TileJSON URL)' and 'Raster (XYZ URL)'
+    //
+    // So we just ignore the values entirely as they are self explanatory
+    const sourceTypeFieldSpec = {
+      doc: latest.source_vector.type.doc
+    };
+
     return <div className="maputnik-add-source">
-      <InputBlock label={"Source ID"} doc={"Unique ID that identifies the source and is used in the layer to reference the source."}>
+      <InputBlock label={"Source ID"} fieldSpec={{doc: "Unique ID that identifies the source and is used in the layer to reference the source."}}>
         <StringInput
           value={this.state.sourceId}
           onChange={v => this.setState({ sourceId: v})}
         />
       </InputBlock>
-      <InputBlock label={"Source Type"} doc={styleSpec.latest.source_vector.type.doc}>
+      <InputBlock label={"Source Type"} fieldSpec={sourceTypeFieldSpec}>
         <SelectInput
           options={[
-            ['geojson', 'GeoJSON'],
+            ['geojson_json', 'GeoJSON (JSON)'],
+            ['geojson_url', 'GeoJSON (URL)'],
             ['tilejson_vector', 'Vector (TileJSON URL)'],
             ['tilexyz_vector', 'Vector (XYZ URLs)'],
             ['tilejson_raster', 'Raster (TileJSON URL)'],
             ['tilexyz_raster', 'Raster (XYZ URL)'],
             ['tilejson_raster-dem', 'Raster DEM (TileJSON URL)'],
             ['tilexyz_raster-dem', 'Raster DEM (XYZ URLs)'],
+            ['image', 'Image'],
+            ['video', 'Video'],
           ]}
           onChange={mode => this.setState({mode: mode, source: this.defaultSource(mode)})}
           value={this.state.mode}
         />
       </InputBlock>
       <SourceTypeEditor
-        onChange={src => this.setState({ source: src })}
+        onChange={this.onChangeSource}
         mode={this.state.mode}
         source={this.state.source}
       />
       <Button
         className="maputnik-add-source-button"
-				onClick={() => this.props.onAdd(this.state.sourceId, this.state.source)}>
+				onClick={this.onAdd}
+      >
         Add Source
       </Button>
     </div>
@@ -239,9 +303,6 @@ class SourcesModal extends React.Component {
         <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

@@ -12,8 +12,6 @@ class SurveyModal extends React.Component {
     onOpenToggle: PropTypes.func.isRequired,
   }
 
-  constructor(props) { super(props); }
-
   onClick = () => {
     window.open('https://gregorywolanski.typeform.com/to/cPgaSY', '_blank');
 
@@ -28,7 +26,7 @@ class SurveyModal extends React.Component {
       title="Maputnik Survey"
     >
       <div className="maputnik-modal-survey">
-        <img className="maputnik-modal-survey__logo" src={logoImage} alt="" width="128" />
+        <div className="maputnik-modal-survey__logo" dangerouslySetInnerHTML={{__html: logoImage}} />
         <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>

src/components/sources/SourceTypeEditor.jsx

@@ -1,10 +1,14 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import * as 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 UrlInput from '../inputs/UrlInput'
 import NumberInput from '../inputs/NumberInput'
 import SelectInput from '../inputs/SelectInput'
+import DynamicArrayInput from '../inputs/DynamicArrayInput'
+import ArrayInput from '../inputs/ArrayInput'
+import JSONEditor from '../layers/JSONEditor'
 
 
 class TileJSONSourceEditor extends React.Component {
@@ -16,8 +20,8 @@ class TileJSONSourceEditor extends React.Component {
 
   render() {
     return <div>
-      <InputBlock label={"TileJSON URL"} doc={styleSpec.latest.source_vector.url.doc}>
+      <InputBlock label={"TileJSON URL"} fieldSpec={latest.source_vector.url}>
-        <StringInput
+        <UrlInput
           value={this.props.source.url}
           onChange={url => this.props.onChange({
             ...this.props.source,
@@ -50,8 +54,8 @@ 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"} fieldSpec={latest.source_vector.tiles}>
-        <StringInput
+        <UrlInput
           value={tileUrl}
           onChange={this.changeTileUrl.bind(this, tileIndex)}
         />
@@ -62,7 +66,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"} fieldSpec={latest.source_vector.minzoom}>
         <NumberInput
           value={this.props.source.minzoom || 0}
           onChange={minzoom => this.props.onChange({
@@ -71,7 +75,7 @@ class TileURLSourceEditor extends React.Component {
           })}
         />
       </InputBlock>
-      <InputBlock label={"Max Zoom"} doc={styleSpec.latest.source_vector.maxzoom.doc}>
+      <InputBlock label={"Max Zoom"} fieldSpec={latest.source_vector.maxzoom}>
         <NumberInput
           value={this.props.source.maxzoom || 22}
           onChange={maxzoom => this.props.onChange({
@@ -86,15 +90,109 @@ class TileURLSourceEditor extends React.Component {
   }
 }
 
-class GeoJSONSourceEditor extends React.Component {
+class ImageSourceEditor extends React.Component {
   static propTypes = {
     source: PropTypes.object.isRequired,
     onChange: PropTypes.func.isRequired,
   }
 
   render() {
-    return <InputBlock label={"GeoJSON Data"} doc={styleSpec.latest.source_geojson.data.doc}>
+    const changeCoord = (idx, val) => {
-      <StringInput
+      const coordinates = this.props.source.coordinates.slice(0);
+      coordinates[idx] = val;
+
+      this.props.onChange({
+        ...this.props.source,
+        coordinates,
+      });
+    }
+
+    return <div>
+      <InputBlock label={"Image URL"} doc={latest.source_image.url.doc}>
+        <UrlInput
+          value={this.props.source.url}
+          onChange={url => this.props.onChange({
+            ...this.props.source,
+            url,
+          })}
+        />
+      </InputBlock>
+      {["top left", "top right", "bottom right", "bottom left"].map((label, idx) => {
+        return (
+          <InputBlock label={`Coord ${label}`} key={label}>
+            <ArrayInput
+              length={2}
+              type="number"
+              value={this.props.source.coordinates[idx]}
+              default={[0, 0]}
+              onChange={(val) => changeCoord(idx, val)}
+            />
+          </InputBlock>
+        );
+      })}
+    </div>
+  }
+}
+
+class VideoSourceEditor extends React.Component {
+  static propTypes = {
+    source: PropTypes.object.isRequired,
+    onChange: PropTypes.func.isRequired,
+  }
+
+  render() {
+    const changeCoord = (idx, val) => {
+      const coordinates = this.props.source.coordinates.slice(0);
+      coordinates[idx] = val;
+
+      this.props.onChange({
+        ...this.props.source,
+        coordinates,
+      });
+    }
+
+    const changeUrls = (urls) => {
+      this.props.onChange({
+        ...this.props.source,
+        urls,
+      });
+    }
+
+    return <div>
+      <InputBlock label={"Video URL"} doc={latest.source_video.urls.doc}>
+        <DynamicArrayInput
+          type="string"
+          value={this.props.source.urls}
+          default={""}
+          onChange={changeUrls}
+        />
+      </InputBlock>
+      {["top left", "top right", "bottom right", "bottom left"].map((label, idx) => {
+        return (
+          <InputBlock label={`Coord ${label}`} key={label}>
+            <ArrayInput
+              length={2}
+              type="number"
+              value={this.props.source.coordinates[idx]}
+              default={[0, 0]}
+              onChange={val => changeCoord(idx, val)}
+            />
+          </InputBlock>
+        );
+      })}
+    </div>
+  }
+}
+
+class GeoJSONSourceUrlEditor extends React.Component {
+  static propTypes = {
+    source: PropTypes.object.isRequired,
+    onChange: PropTypes.func.isRequired,
+  }
+
+  render() {
+    return <InputBlock label={"GeoJSON URL"} fieldSpec={latest.source_geojson.data}>
+      <UrlInput
         value={this.props.source.data}
         onChange={data => this.props.onChange({
           ...this.props.source,
@@ -105,6 +203,33 @@ class GeoJSONSourceEditor extends React.Component {
   }
 }
 
+class GeoJSONSourceJSONEditor extends React.Component {
+  static propTypes = {
+    source: PropTypes.object.isRequired,
+    onChange: PropTypes.func.isRequired,
+  }
+
+  render() {
+    return <InputBlock label={"GeoJSON"} fieldSpec={latest.source_geojson.data}>
+      <JSONEditor
+        layer={this.props.source.data}
+        maxHeight={200}
+        mode={{
+          name: "javascript",
+          json: true
+        }}
+        lint={true}
+        onChange={data => {
+          this.props.onChange({
+            ...this.props.source,
+            data,
+          })
+        }}
+      />
+    </InputBlock>
+  }
+}
+
 class SourceTypeEditor extends React.Component {
   static propTypes = {
     mode: PropTypes.string.isRequired,
@@ -118,24 +243,27 @@ class SourceTypeEditor extends React.Component {
       onChange: this.props.onChange,
     }
     switch(this.props.mode) {
-      case 'geojson': return <GeoJSONSourceEditor {...commonProps} />
+      case 'geojson_url': return <GeoJSONSourceUrlEditor {...commonProps} />
+      case 'geojson_json': return <GeoJSONSourceJSONEditor {...commonProps} />
       case 'tilejson_vector': return <TileJSONSourceEditor {...commonProps} />
       case 'tilexyz_vector': return <TileURLSourceEditor {...commonProps} />
       case 'tilejson_raster': return <TileJSONSourceEditor {...commonProps} />
       case 'tilexyz_raster': return <TileURLSourceEditor {...commonProps} />
       case 'tilejson_raster-dem': return <TileJSONSourceEditor {...commonProps} />
       case 'tilexyz_raster-dem': return <TileURLSourceEditor {...commonProps}>
-        <InputBlock label={"Encoding"} doc={styleSpec.latest.source_raster_dem.encoding.doc}>
+        <InputBlock label={"Encoding"} fieldSpec={latest.source_raster_dem.encoding}>
           <SelectInput
-            options={Object.keys(styleSpec.latest.source_raster_dem.encoding.values)}
+            options={Object.keys(latest.source_raster_dem.encoding.values)}
             onChange={encoding => this.props.onChange({
               ...this.props.source,
               encoding: encoding
             })}
-            value={this.props.source.encoding || styleSpec.latest.source_raster_dem.encoding.default}
+            value={this.props.source.encoding || latest.source_raster_dem.encoding.default}
           />
         </InputBlock>
       </TileURLSourceEditor>
+      case 'image': return <ImageSourceEditor {...commonProps} />
+      case 'video': return <VideoSourceEditor {...commonProps} />
       default: return null
     }
   }

src/components/util/SmallError.jsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import './SmallError.scss';
+
+
+class SmallError extends React.Component {
+  static propTypes = {
+    children: PropTypes.node,
+  }
+
+  render () {
+    return (
+      <div className="SmallError">
+        Error: {this.props.children}
+      </div>
+    );
+  }
+}
+
+export default SmallError

src/components/util/SmallError.scss

@@ -0,0 +1,7 @@
+@import '../../styles/vars';
+
+.SmallError {
+  color: #E57373;
+  font-size: $font-size-6;
+  margin-top: $margin-2
+}

src/components/util/codemirror-mgl.js

@@ -0,0 +1,178 @@
+import jsonlint from 'jsonlint';
+import CodeMirror from 'codemirror';
+import jsonToAst from 'json-to-ast';
+import {expression, validate, latest} from '@mapbox/mapbox-gl-style-spec';
+
+
+CodeMirror.defineMode("mgl", function(config, parserConfig) {
+  // Just using the javascript mode with json enabled. Our logic is in the linter below.
+  return CodeMirror.modes.javascript(
+    {...config, json: true},
+    parserConfig
+  );
+});
+
+CodeMirror.registerHelper("lint", "json", function(text) {
+  const found = [];
+
+  // NOTE: This was modified from the original to remove the global, also the
+  // old jsonlint API was 'jsonlint.parseError' its now
+  // 'jsonlint.parser.parseError'
+  jsonlint.parser.parseError = function(str, hash) {
+    const loc = hash.loc;
+    found.push({
+      from:    CodeMirror.Pos(loc.first_line - 1, loc.first_column),
+      to:      CodeMirror.Pos(loc.last_line  - 1, loc.last_column),
+      message: str
+    });
+  };
+
+  try {
+    jsonlint.parse(text);
+  }
+  catch(e) {
+    // Do nothing we catch the error above
+  }
+  return found;
+});
+
+CodeMirror.registerHelper("lint", "mgl", function(text, opts, doc) {
+  const found = [];
+  const {parser} = jsonlint;
+  const {context} = opts;
+
+  parser.parseError = function(str, hash) {
+    const loc = hash.loc;
+    found.push({
+      from: CodeMirror.Pos(loc.first_line - 1, loc.first_column),
+      to: CodeMirror.Pos(loc.last_line - 1, loc.last_column),
+      message: str
+    });
+  };
+  try {
+    parser.parse(text);
+  }
+  catch (e) {}
+
+  if (found.length > 0) {
+    // JSON invalid so don't go any further
+    return found;
+  }
+
+  const ast = jsonToAst(text);
+  const input = JSON.parse(text);
+
+  function getArrayPositionalFromAst (node, path) {
+    if (!node) {
+      return undefined;
+    }
+    else if (path.length < 1) {
+      return node;
+    }
+    else if (!node.children) {
+      return undefined;
+    }
+    else {
+      const key = path[0];
+      let newNode;
+      if (key.match(/^[0-9]+$/)) {
+        newNode = node.children[path[0]];
+      }
+      else {
+        newNode = node.children.find(childNode => {
+          return (
+            childNode.key &&
+            childNode.key.type === "Identifier" &&
+            childNode.key.value === key
+          );
+        });
+        if (newNode) {
+          newNode = newNode.value;
+        }
+      }
+      return getArrayPositionalFromAst(newNode, path.slice(1))
+    }
+  }
+
+  let out;
+  if (context === "layer") {
+    // Just an empty style so we can validate a layer.
+    const errors = validate({
+      "version": 8,
+      "name": "Empty Style",
+      "metadata": {},
+      "sources": {},
+      "sprite": "",
+      "glyphs": "https://example.com/glyphs/{fontstack}/{range}.pbf",
+      "layers": [
+        input
+      ]
+    });
+
+    if (errors) {
+      out = {
+        result: "error",
+        value: errors
+          .filter(err => {
+            // Remove missing 'layer source' errors, because we don't include them
+            if (err.message.match(/^layers\[0\]: source ".*" not found$/)) {
+              return false;
+            }
+            else {
+              return true;
+            }
+          })
+          .map(err => {
+            // Remove the 'layers[0].' as we're validating the layer only here
+            const errMessageParts = err.message.replace(/^layers\[0\]./, "").split(":");
+            return {
+              key: errMessageParts[0],
+              message: errMessageParts[1],
+            };
+          })
+      }
+    }
+  }
+  else if (context === "expression") {
+    out = expression.createExpression(input, opts.spec);
+  }
+  else {
+    throw new Error(`Invalid context ${context}`);
+  }
+
+  if (out.result === "error") {
+    const errors = out.value;
+    errors.forEach(error => {
+      const {key, message} = error;
+
+      if (!key) {
+        const lastLineHandle = doc.getLineHandle(doc.lastLine());
+        const err = {
+          from: CodeMirror.Pos(doc.firstLine(), 0),
+          to: CodeMirror.Pos(doc.lastLine(), lastLineHandle.text.length),
+          message: message,
+        }
+        found.push(err);
+      }
+      else if (key) {
+        const path = key.replace(/^\[|\]$/g, "").split(/\.|[\[\]]+/).filter(Boolean)
+        const parsedError = getArrayPositionalFromAst(ast, path);
+        if (!parsedError) {
+          console.warn("Something went wrong parsing error:", error);
+          return;
+        }
+
+        const {loc} = parsedError;
+        const {start, end} = loc;
+
+        found.push({
+          from: CodeMirror.Pos(start.line - 1, start.column),
+          to: CodeMirror.Pos(end.line - 1, end.column),
+          message: message,
+        });
+      }
+    })
+  }
+
+  return found;
+});

src/components/util/format.js

@@ -0,0 +1,3 @@
+export function formatLayerId (id) {
+  return id === "" ? "[empty_string]" : `'${id}'`;
+}

src/components/util/spec-helper.js

@@ -0,0 +1,18 @@
+/**
+ * If we don't have a default value just make one up
+ */
+export function findDefaultFromSpec (spec) {
+  if (spec.hasOwnProperty('default')) {
+    return spec.default;
+  }
+
+  const defaults = {
+    'color': '#000000',
+    'string': '',
+    'boolean': false,
+    'number': 0,
+    'array': [],
+  }
+
+  return defaults[spec.type] || '';
+}

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"
           ]
         }
       ]
@@ -105,7 +106,8 @@
           "fields": [
             "symbol-placement",
             "symbol-spacing",
-            "symbol-avoid-edges"
+            "symbol-avoid-edges",
+            "symbol-z-order"
           ]
         },
         {
@@ -126,17 +128,21 @@
             "text-justify",
             "text-anchor",
             "text-max-angle",
+            "text-writing-mode",
             "text-rotate",
             "text-keep-upright",
             "text-transform",
             "text-offset",
-            "text-optional"
+            "text-optional",
+            "text-variable-anchor",
+            "text-radial-offset"
           ]
         },
         {
           "title": "Icon layout properties",
           "type": "properties",
           "fields": [
+            "icon-image",
             "icon-allow-overlap",
             "icon-ignore-placement",
             "icon-optional",
@@ -144,7 +150,6 @@
             "icon-size",
             "icon-text-fit",
             "icon-text-fit-padding",
-            "icon-image",
             "icon-rotate",
             "icon-padding",
             "icon-keep-upright",
@@ -228,5 +233,8 @@
           ]
         }
       ]
+    },
+    "invalid": {
+      "groups": []
     }
 }

src/config/styles.json

@@ -1,56 +1,68 @@
 [
+  {
+    "id": "osm-liberty",
+    "title": "OSM Liberty",
+    "url": "https://maputnik.github.io/osm-liberty/style.json",
+    "thumbnail": "https://maputnik.github.io/thumbnails/osm-liberty.png"
+  },
   {
     "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.9/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.8/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.8/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.9/style.json",
     "thumbnail": "https://maputnik.github.io/thumbnails/osm-bright.png"
   },
   {
-    "id": "osm-liberty",
+    "id": "toner-gl-style",
-    "title": "OSM Liberty",
+    "title": "Toner",
-    "url": "https://rawgit.com/maputnik/osm-liberty/gh-pages/style.json",
+    "url": "https://cdn.jsdelivr.net/gh/openmaptiles/toner-gl-style@dcb6e64/style.json",
-    "thumbnail": "https://cdn.rawgit.com/maputnik/osm-liberty/gh-pages/thumbnail.png"
+    "thumbnail": "https://maputnik.github.io/thumbnails/toner.png"
+  },
+  {
+    "id": "os-zoomstack-outdoor",
+    "title": "Zoomstack Outdoor",
+    "url": "https://s3-eu-west-1.amazonaws.com/tiles.os.uk/v2/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/v2/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/v2/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/v2/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,22 +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"
+    "title": "OpenMapTiles v3"
   },
   "thunderforest_transport": {
     "type": "vector",
-    "url": "https://tile.thunderforest.com/thunderforest.transport-v1.json?apikey={key}",
+    "url": "https://tile.thunderforest.com/thunderforest.transport-v2.json?apikey={key}",
-    "title": "Thunderforest Transport (heavy)"
+    "title": "Thunderforest Transport v2"
   },
   "thunderforest_outdoors": {
     "type": "vector",
-    "url": "https://tile.thunderforest.com/thunderforest.outdoors-v1.json?apikey={key}",
+    "url": "https://tile.thunderforest.com/thunderforest.outdoors-v2.json?apikey={key}",
-    "title": "Thunderforest Outdoors (heavy)"
+    "title": "Thunderforest Outdoors v2"
+  },
+  "open_zoomstack": {
+    "type": "vector",
+    "url": "https://s3-eu-west-1.amazonaws.com/tiles.os.uk/v2/data/vector/open-zoomstack/config.json",
+    "title": "OS Open Zoomstack v2"
   }
 }

src/config/tokens.json

@@ -1,5 +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,12 @@ 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")
+);
+
+// Hide the loader.
+document.querySelector(".loading").style.display = "none";

src/libs/accessibility.js

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

src/libs/apistore.js

@@ -1,33 +1,38 @@
-import request from 'request'
 import style from './style.js'
+import {format} from '@mapbox/mapbox-gl-style-spec'
 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 +49,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.')
@@ -54,12 +65,22 @@ export class ApiStyleStore {
 
   // Save current style replacing previous version
   save(mapStyle) {
+    const styleJSON = format(
+      style.stripAccessTokens(
+        style.replaceAccessTokens(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: styleJSON
+    })
+    .catch(function(error) {
       if(error) console.error(error)
     })
     return mapStyle

src/libs/diffmessage.js

@@ -1,7 +1,7 @@
-import * as 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/field-spec-additional.js

@@ -0,0 +1,22 @@
+const spec = {
+  maputnik: {
+    mapbox_access_token: {
+      label: "Mapbox Access Token",
+      doc: "Public access token for Mapbox services."
+    },
+    maptiler_access_token: {
+      label: "MapTiler Access Token",
+      doc: "Public access token for MapTiler Cloud."
+    },
+    thunderforest_access_token: {
+      label: "Thunderforest Access Token",
+      doc: "Public access token for Thunderforest services."
+    },
+    style_renderer: {
+      label: "Style Renderer",
+      doc: "Choose the default Maputnik renderer for this style.",
+    },
+  }
+}
+
+export default spec;

src/libs/filterops.js

@@ -1,6 +1,6 @@
-import * as 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 * as 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'
+import {readFileSync} from 'fs'
 
-// Load mapbox-gl-rtl-text using object urls without needing http://localhost for AJAX.
+const data = readFileSync(__dirname+"/../../node_modules/@mapbox/mapbox-gl-rtl-text/mapbox-gl-rtl-text.js", "utf8");
-const data = require("base64-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/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'
 
@@ -102,20 +101,37 @@ function replaceAccessTokens(mapStyle, opts={}) {
     changedStyle = replaceSourceAccessToken(changedStyle, sourceName, opts);
   })
 
-  if (mapStyle.glyphs && mapStyle.glyphs.match(/\.tilehosting\.com/)) {
+  if (mapStyle.glyphs && (mapStyle.glyphs.match(/\.tilehosting\.com/) || mapStyle.glyphs.match(/\.maptiler\.com/))) {
-    changedStyle = {
+    const newAccessToken = getAccessToken("openmaptiles", mapStyle, opts);
-      ...changedStyle,
+    if (newAccessToken) {
-      glyphs: mapStyle.glyphs.replace('{key}', getAccessToken("openmaptiles", mapStyle, opts))
+      changedStyle = {
+        ...changedStyle,
+        glyphs: mapStyle.glyphs.replace('{key}', newAccessToken)
+      }
     }
   }
 
   return changedStyle
 }
 
+function stripAccessTokens(mapStyle) {
+  const changedMetadata = {
+    ...mapStyle.metadata
+  };
+  delete changedMetadata['maputnik:mapbox_access_token'];
+  delete changedMetadata['maputnik:openmaptiles_access_token'];
+  return {
+    ...mapStyle,
+    metadata: changedMetadata
+  };
+}
+
 export default {
   ensureStyleValidity,
   emptyStyle,
   indexOfLayer,
   generateId,
+  getAccessToken,
   replaceAccessTokens,
+  stripAccessTokens,
 }