1.6.0

Make popups scrollable

.babelrc

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

.circleci/config.yml

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

.gitignore

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

.topissuesrc

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

.travis.yml

@@ -1,21 +0,0 @@
-language: node_js
-addons:
-  firefox: latest
-os:
-  - linux
-  - osx
-node_js:
-  - "4.6"
-  - "5.11"
-  - "6.1"
-before_install:
-  - export CHROME_BIN=chromium-browser
-  - export DISPLAY=:99.0
-  - if [[ "$TRAVIS_OS_NAME" == "linux" ]]; then sh -e /etc/init.d/xvfb start; fi
-install:
-  - npm install
-script:
-  - mkdir public
-  - npm run build
-  - npm run lint
-  - npm run test

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,27 +1,47 @@
-# Maputnik [![Build Status](https://travis-ci.org/maputnik/editor.svg?branch=master)](https://travis-ci.org/maputnik/editor) [![Windows Build Status](https://ci.appveyor.com/api/projects/status/anelbgv6jdb3qnh9/branch/master?svg=true)](https://ci.appveyor.com/project/lukasmartinelli/editor) [![License](https://img.shields.io/badge/license-MIT-blue.svg)](https://tldrlegal.com/license/mit-license)
+# Maputnik
 
-<img width="200" align="right" alt="Maputnik" src="src/img/maputnik.png" />
+[![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]
+
+[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?type=dev
+[license]:     https://tldrlegal.com/license/mit-license
+
+<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. Creating your own custom map is easy with **Maputnik**.
+targeted at developers and map designers.
 
-Check it out at **http://maputnik.com/editor/**
+- :link: Design your maps online at **<https://maputnik.github.io/editor/>** (all in local storage)
+- :link: Try out the v1.6.0-beta release at: https://maputnik.github.io/releases/v1.6.0-beta/
+- :link: Use the [Maputnik CLI](https://github.com/maputnik/editor/wiki/Maputnik-CLI) for local style development
 
-*Maputnik is an early prototype and is under development.
-[Thanks to the supporters of the Kickstarter campaign who made this project possible](https://www.kickstarter.com/projects/174808720/maputnik-visual-map-editor-for-mapbox-gl)*.
+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.
 
-## Latest Status Update Video
 
-![Latest Status Update for  Maputnik v0.2.2](https://j.gifs.com/g5XMgl.gif)
+## Donations
+If you or your organisation has seen value from Maputnik, please consider donating at <https://maputnik.github.io/donate>
+
+
+## Documentation
+
+The documentation can be found in the [Wiki](https://github.com/maputnik/editor/wiki). You are welcome to collaborate!
+
+- :link: **Study the [Maputnik Wiki](https://github.com/maputnik/editor/wiki)**
+- :video_camera: Design a map from Scratch https://youtu.be/XoDh0gEnBQo
+
+[![Design Map from Scratch](https://j.gifs.com/g5XMgl.gif)](https://youtu.be/XoDh0gEnBQo)
 
 ## Develop
 
-Maputnik is written in ES6 and is using [React](https://github.com/facebook/react), [Immutable.js](https://facebook.github.io/immutable-js/) and [Mapbox GL JS](https://www.mapbox.com/mapbox-gl-js/api/).
+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
-
-- Linux, OSX and Windows
-- Node >4
+We ensure building and developing Maputnik works with the [current active LTS Node.js version and above](https://github.com/nodejs/Release#release-schedule).
 
 Install the deps, start the dev server and open the web browser on `http://localhost:8888/`.
 
@@ -32,7 +52,18 @@ npm install
 npm start
 ```
 
-Build a production package for distribution.
+If you want Maputnik to be accessible externally use the [`--host` option](https://webpack.js.org/configuration/dev-server/#devserverhost):
+
+```bash
+# start externally accessible dev server
+npm start -- --host 0.0.0.0 
+```
+
+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
@@ -41,108 +72,100 @@ npm run build
 Lint the JavaScript code.
 
 ```
-# install lint dependencies
-npm install --save-dev eslint eslint-plugin-react
 # run linter
 npm run lint
+npm run lint-styles
 ```
 
-## Docker
 
-Start a container using the official Docker image.
-```
-docker run --name maputnik -p 8888:8888 -d maputnik/editor
-```
+## Tests
+For testing we use [webdriverio](http://webdriver.io) and [selenium-standalone](https://github.com/vvo/selenium-standalone)
 
-Stop the container
+[selenium-standalone](https://github.com/vvo/selenium-standalone) starts a server that will launch browsers on your local machine. We use chrome so you **must** have chrome installed on your machine.
+
+Now open a terminal and run the following. This will install the drivers on your local machine
 
 ```
-docker stop maputnik
+./node_modules/.bin/selenium-standalone install
 ```
 
+Now start the standalone server
+
+```
+./node_modules/.bin/selenium-standalone start
+```
+
+Then open another terminal and run
+
+```
+npm test
+```
+
+After some time you should see a browser launch which will be automated by the test runner.
+
+
+## Related Projects
+
+- [maputnik-dev-server](https://github.com/nycplanning/labs-maputnik-dev-server) - An express.js server that allows for quickly loading the style from any mapboxGL map into mapuntnik. 
+
 ## Sponsors
 
-This project would not be possible without commercial and individual sponsors.
+Thanks to the supporters of the **[Kickstarter campaign](https://www.kickstarter.com/projects/174808720/maputnik-visual-map-editor-for-mapbox-gl)**. This project would not be possible without these commercial and individual sponsors.
 
 ### Gold
 
-[![Wemap](media/sponsors/wemap.jpg)](https://getwemap.com/)
+- [Wemap](https://getwemap.com/)
+- [Orbicon Informatik](https://www.orbiconinformatik.dk/)
+- [Terranodo](http://terranodo.io/)
 
-[![Terranodo](media/sponsors/terranodo.png)](http://terranodo.io/)
+<a href="https://getwemap.com/">
+  <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="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="https://cdn.jsdelivr.net/gh/maputnik/editor@1.5.0/media/sponsors/orbicon_informatik.png" />
+</a>
+
+<br/>
 
 ### Silver
 
+- [Klokan Technologies](https://www.klokantech.com/)
+- [Geofabrik](http://www.geofabrik.de/)
+- [Dreipol](https://www.dreipol.ch/)
+
 <a href="https://www.klokantech.com/">
-  <img alt="Klokan Technologies" style="display:inline" 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="https://cdn.jsdelivr.net/gh/maputnik/editor@1.5.0/media/sponsors/geofabrik.png" />
 </a>
 <a href="https://www.dreipol.ch/">
-  <img alt="Dreipol" style="display:inline" 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/>
 
 ### Individuals
 
 **Influential Stakeholder**
 
-- Alan McConchie
-- Odi
-- Mats Norén
-- Uli [geOps](http://geops.ch/)
-- Helge Fahrnberger
- Kirusanth Poopalasingam
+Alan McConchie, Odi, Mats Norén, Uli [geOps](http://geops.ch/), Helge Fahrnberger ([Toursprung](http://www.toursprung.com/)), Kirusanth Poopalasingam
 
 **Stakeholder**
 
-- Brian Flood
-- Vasile Coțovanu
-- Andreas Kalkbrenner
-- Christian Mäder
-- Gregor Wassmann
-- Lee Armstrong
-- Rafel
-- Jon Burgess
-- Lukas Lehmann
-- Joachim Ungar
-- Alois Ackermann
-- Zsolt Ero
-- Jordan Meek
+Brian Flood, Vasile Coțovanu, Andreas Kalkbrenner, Christian Mäder, Gregor Wassmann, Lee Armstrong, Rafel, Jon Burgess, Lukas Lehmann, Joachim Ungar, Alois Ackermann, Zsolt Ero, Jordan Meek
 
 **Supporter**
 
-- Sina Martinelli
-- Nicholas Doiron
-- Neil Cawse
-- Urs42
-- Benedikt Groß
-- Manuel Roth
-- Janko Mihelić
-- Moritz Stefaner
-- Sebastian Ahoi
-- Juerg Uhlmann
-- Tom Wider
-- Nadia Panchaud
-- Oliver Snowden
-- Stephan Heuel
-- Tobin Bradley
-- Adrian Herzog
-- Antti Lehto
-- Pascal Mages
-- Marc Gehling
-- Imre Samu
-- Lauri K.
-- Visahavel Parthasarathy
-- Christophe Waterlot-Buisine
-- Max Galka
-- ubahnverleih
-- Wouter van Dam
-- Jakob Lobensteiner
-- Samuel Kurath
-- Brian Bancroft
+Sina Martinelli, Nicholas Doiron, Neil Cawse, Urs42, Benedikt Groß, Manuel Roth, Janko Mihelić, Moritz Stefaner, Sebastian Ahoi, Juerg Uhlmann, Tom Wider, Nadia Panchaud, Oliver Snowden, Stephan Heuel, Tobin Bradley, Adrian Herzog, Antti Lehto, Pascal Mages, Marc Gehling, Imre Samu, Lauri K., Visahavel Parthasarathy, Christophe Waterlot-Buisine, Max Galka, ubahnverleih, Wouter van Dam, Jakob Lobensteiner, Samuel Kurath, Brian Bancroft
 
 ## License
 
 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,14 +1,26 @@
+image: Visual Studio 2015
 environment:
   matrix:
-    - nodejs_version: "4.6"
-    - nodejs_version: "5.11"
-    - nodejs_version: "6.1"
+    - nodejs_version: "8"
+    - nodejs_version: "10"
+    - nodejs_version: "12"
+platform:
+  - x86
+  - x64
 install:
-  - ps: Install-Product node $env:nodejs_version
+  # https://github.com/appveyor/ci/issues/2921#issuecomment-501016533
+  - ps: |
+      try {
+      Install-Product node $env:nodejs_version $env:platform
+      } catch {
+      echo "Unable to install node $env:nodejs_version, trying update..."
+      Update-NodeJsInstallation (Get-NodeJsLatestBuild $env:nodejs_version) $env:platform
+      }
   - md public
+  - npm --vs2015 install --global windows-build-tools
   - npm install
 build_script:
   - npm run build
 test_script:
   - npm run lint
-  - npm test
+  - npm run lint-styles

config/wdio.conf.js

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

config/webpack.config.js

@@ -1,14 +1,16 @@
 "use strict";
 var webpack = require('webpack');
 var path = require('path');
-var loaders = require('./webpack.loaders');
+var rules = require('./webpack.rules');
 var HtmlWebpackPlugin = require('html-webpack-plugin');
+var CopyWebpackPlugin = require('copy-webpack-plugin');
 
 const HOST = process.env.HOST || "127.0.0.1";
 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`,
@@ -16,14 +18,17 @@ module.exports = {
   ],
   devtool: process.env.WEBPACK_DEVTOOL || 'cheap-module-source-map',
   output: {
-    path: path.join(__dirname, 'public'),
+    path: path.join(__dirname, '..', 'public'),
     filename: 'bundle.js'
   },
   resolve: {
-    extensions: ['', '.js', '.jsx']
+    extensions: ['.js', '.jsx']
   },
   module: {
-    loaders
+    noParse: [
+      /mapbox-gl\/dist\/mapbox-gl.js/
+    ],
+    rules: rules
   },
   node: {
     fs: "empty",
@@ -41,14 +46,26 @@ module.exports = {
     // serve index.html in place of 404 responses to allow HTML5 history
     historyApiFallback: true,
     port: PORT,
-    host: HOST
+    host: HOST,
+    watchOptions: {
+      // Disabled polling by default as it causes lots of CPU usage and hence drains laptop batteries. To enable polling add WEBPACK_DEV_SERVER_POLLING to your environment
+      // See <https://webpack.js.org/configuration/watch/#watchoptions-poll> for details
+      poll: (!!process.env.WEBPACK_DEV_SERVER_POLLING ? true : false),
+      watch: false
+    }
   },
   plugins: [
-    new webpack.NoErrorsPlugin(),
+    new webpack.NoEmitOnErrorsPlugin(),
     new webpack.HotModuleReplacementPlugin(),
     new HtmlWebpackPlugin({
       title: 'Maputnik',
       template: './src/template.html'
     }),
+    new CopyWebpackPlugin([
+      {
+        from: './src/manifest.json',
+        to: 'manifest.json'
+      }
+    ])
   ]
 };

config/webpack.production.config.js

@@ -0,0 +1,62 @@
+var webpack = require('webpack');
+var path = require('path');
+var rules = require('./webpack.rules');
+var HtmlWebpackPlugin = require('html-webpack-plugin');
+var WebpackCleanupPlugin = require('webpack-cleanup-plugin');
+var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
+var CopyWebpackPlugin = require('copy-webpack-plugin');
+var artifacts = require("../test/artifacts");
+
+var OUTPATH = artifacts.pathSync("/build");
+
+module.exports = {
+  entry: {
+    app: './src/index.jsx',
+  },
+  output: {
+    path: OUTPATH,
+    filename: '[name].[contenthash].js',
+    chunkFilename: '[contenthash].js'
+  },
+  resolve: {
+    extensions: ['.js', '.jsx']
+  },
+  module: {
+    noParse: [
+      /mapbox-gl\/dist\/mapbox-gl.js/
+    ],
+    rules: rules
+  },
+  node: {
+    fs: "empty",
+    net: 'empty',
+    tls: 'empty'
+  },
+  plugins: [
+    new webpack.NoEmitOnErrorsPlugin(),
+    new WebpackCleanupPlugin(),
+    new webpack.DefinePlugin({
+      'process.env': {
+        NODE_ENV: '"production"'
+      }
+    }),
+    new HtmlWebpackPlugin({
+      template: './src/template.html',
+      title: 'Maputnik'
+    }),
+    new CopyWebpackPlugin([
+      {
+        from: './src/manifest.json',
+        to: 'manifest.json'
+    }
+  ]),
+    new BundleAnalyzerPlugin({
+      analyzerMode: 'static',
+      defaultSizes: 'gzip',
+      openAnalyzer: false,
+      generateStatsFile: true,
+      reportFilename: 'bundle-stats.html',
+      statsFilename: 'bundle-stats.json',
+    })
+  ]
+};

config/webpack.rules.js

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

karma.conf.js

@@ -1,34 +0,0 @@
-var webpackConfig = require('./webpack.config.js');
-
-// Karma configuration
-module.exports = function(config) {
-  var browsers = ['Chrome'];
-  if (process.env.TRAVIS) {
-    browsers = ['Firefox'];
-  }
-
-  config.set({
-		browsers: browsers,
-		frameworks: ['mocha'],
-    // ... normal karma configuration
-    files: [
-      // all files ending in "_test"
-      {pattern: 'test/*_test.js', watched: false},
-      {pattern: 'test/**/*_test.js', watched: false}
-      // each file acts as entry point for the webpack configuration
-    ],
-
-    preprocessors: {
-      // add webpack as preprocessor
-      'test/*_test.js': ['webpack'],
-      'test/**/*_test.js': ['webpack']
-    },
-
-    webpack: webpackConfig,
-    webpackMiddleware: {
-      // webpack-dev-middleware configuration
-      // i. e.
-      stats: 'errors-only'
-    }
-  });
-};

package.json

@@ -1,15 +1,16 @@
 {
   "name": "maputnik",
-  "version": "0.0.1",
+  "version": "1.6.0",
   "description": "A MapboxGL visual style editor",
   "main": "''",
   "scripts": {
-    "stats": "webpack --config webpack.production.config.js --profile --json > stats.json",
-    "build": "webpack --config webpack.production.config.js --progress --profile --colors",
-    "test": "karma start --single-run",
-    "test-watch": "karma start",
-    "start": "webpack-dev-server --progress --profile --colors --watch-poll",
-    "lint": "eslint --ext js --ext jsx {src,test}"
+    "stats": "webpack --config config/webpack.production.config.js --profile --json > stats.json",
+    "build": "webpack --config config/webpack.production.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-styles": "stylelint \"src/styles/*.scss\""
   },
   "repository": {
     "type": "git",
@@ -19,52 +20,67 @@
   "license": "MIT",
   "homepage": "https://github.com/maputnik/editor#readme",
   "dependencies": {
-    "codemirror": "^5.18.2",
-    "color": "^1.0.3",
-    "file-saver": "^1.3.2",
+    "@babel/runtime": "^7.1.2",
+    "@mapbox/mapbox-gl-rtl-text": "^0.2.2",
+    "@mapbox/mapbox-gl-style-spec": "^13.7.2",
+    "classnames": "^2.2.6",
+    "codemirror": "^5.40.2",
+    "color": "^3.0.0",
+    "detect-browser": "^4.5.0",
+    "file-saver": "^1.3.8",
+    "jsonlint": "github:josdejong/jsonlint#85a19d7",
     "lodash.capitalize": "^4.2.1",
+    "lodash.clamp": "^4.0.3",
     "lodash.clonedeep": "^4.5.0",
-    "lodash.isequal": "^4.4.0",
+    "lodash.get": "^4.4.2",
+    "lodash.isequal": "^4.5.0",
     "lodash.throttle": "^4.1.1",
-    "lodash.topairs": "^4.3.0",
-    "mapbox-gl": "^0.29.0",
-    "mapbox-gl-style-spec": "^8.11.0",
-    "mousetrap": "^1.6.0",
-    "ol-mapbox-style": "0.0.11",
-    "openlayers": "^3.19.1",
-    "randomcolor": "^0.4.4",
-    "react": "^15.4.0",
-    "react-addons-pure-render-mixin": "^15.4.0",
-    "react-autocomplete": "^1.4.0",
-    "react-codemirror": "^0.3.0",
-    "react-collapse": "^2.3.3",
-    "react-color": "^2.10.0",
-    "react-dom": "^15.4.0",
-    "react-file-reader-input": "^1.1.0",
-    "react-height": "^2.1.1",
-    "react-icon-base": "^2.0.4",
-    "react-icons": "^2.2.1",
-    "react-motion": "^0.4.7",
-    "react-sortable-hoc": "^0.4.5",
-    "request": "^2.79.0"
-  },
-  "babel": {
-    "presets": [
-      "es2015",
-      "react"
-    ],
-    "plugins": [
-      "transform-object-rest-spread"
-    ]
+    "mapbox-gl": "^1.2.0",
+    "mapbox-gl-inspect": "^1.3.1",
+    "maputnik-design": "github:maputnik/design",
+    "ol": "^6.0.0-beta.8",
+    "ol-mapbox-style": "^5.0.0-beta.2",
+    "prop-types": "^15.6.2",
+    "react": "^16.5.2",
+    "react-aria-menubutton": "^6.0.1",
+    "react-aria-modal": "^3.0.0",
+    "react-autobind": "^1.0.6",
+    "react-autocomplete": "^1.8.1",
+    "react-codemirror2": "^5.1.0",
+    "react-collapse": "^4.0.3",
+    "react-color": "^2.14.1",
+    "react-dom": "^16.5.2",
+    "react-file-reader-input": "^2.0.0",
+    "react-icon-base": "^2.1.2",
+    "react-icons": "^3.1.0",
+    "react-motion": "^0.5.2",
+    "react-sortable-hoc": "^0.8.3",
+    "reconnecting-websocket": "^3.2.2",
+    "slugify": "^1.3.1",
+    "url": "^0.11.0"
   },
   "jshintConfig": {
     "esversion": 6
   },
+  "stylelint": {
+    "extends": "stylelint-config-recommended-scss",
+    "rules": {
+      "no-descending-specificity": null,
+      "media-feature-name-no-unknown": [
+        true,
+        {
+          "ignoreMediaFeatureNames": [
+            "prefers-reduced-motion"
+          ]
+        }
+      ]
+    }
+  },
   "eslintConfig": {
     "plugins": [
       "react"
     ],
-    "extend": [
+    "extends": [
       "plugin:react/recommended"
     ],
     "env": {
@@ -84,40 +100,51 @@
     }
   },
   "devDependencies": {
-    "babel-core": "6.14.0",
-    "babel-eslint": "^6.1.2",
-    "babel-loader": "6.2.4",
-    "babel-plugin-transform-class-properties": "^6.11.5",
-    "babel-plugin-transform-decorators-legacy": "^1.3.4",
-    "babel-plugin-transform-flow-strip-types": "^6.21.0",
-    "babel-plugin-transform-object-rest-spread": "^6.8.0",
-    "babel-plugin-transform-runtime": "^6.15.0",
-    "babel-preset-es2015": "6.14.0",
-    "babel-preset-react": "6.11.1",
-    "babel-runtime": "^6.11.6",
-    "css-loader": "0.25.0",
-    "eslint": "^3.5.0",
-    "eslint-plugin-react": "^6.2.0",
-    "extract-text-webpack-plugin": "^1.0.1",
-    "file-loader": "0.9.0",
-    "html-webpack-plugin": "^2.22.0",
-    "json-loader": "^0.5.4",
-    "karma": "^1.3.0",
-    "karma-chrome-launcher": "^2.0.0",
-    "karma-firefox-launcher": "^1.0.0",
-    "karma-mocha": "^1.3.0",
-    "karma-webpack": "^1.8.0",
-    "mocha": "^3.1.2",
-    "mocha-loader": "^1.0.0",
-    "node-sass": "^3.9.2",
-    "react-hot-loader": "^3.0.0-beta.6",
-    "sass-loader": "^4.0.1",
-    "style-loader": "0.13.1",
-    "transform-loader": "^0.2.3",
-    "url-loader": "0.5.7",
-    "webpack": "1.13.2",
-    "webpack-cleanup-plugin": "^0.3.0",
-    "webpack-dev-server": "1.15.1",
-    "webworkify-webpack": "^1.1.3"
+    "@babel/core": "^7.1.2",
+    "@babel/plugin-proposal-class-properties": "^7.1.0",
+    "@babel/plugin-transform-runtime": "^7.1.0",
+    "@babel/preset-env": "^7.1.0",
+    "@babel/preset-flow": "^7.0.0",
+    "@babel/preset-react": "^7.0.0",
+    "@wdio/cli": "^5.10.4",
+    "@wdio/local-runner": "^5.10.4",
+    "@wdio/mocha-framework": "^5.10.1",
+    "@wdio/selenium-standalone-service": "^5.9.3",
+    "@wdio/spec-reporter": "^5.9.3",
+    "@wdio/sync": "^5.10.1",
+    "babel-eslint": "^10.0.1",
+    "babel-loader": "8.0.4",
+    "babel-plugin-istanbul": "^5.0.1",
+    "copy-webpack-plugin": "^4.5.2",
+    "cors": "^2.8.4",
+    "cross-env": "^5.2.0",
+    "css-loader": "^1.0.0",
+    "eslint": "^5.6.1",
+    "eslint-plugin-react": "^7.11.1",
+    "express": "^4.17.1",
+    "file-loader": "^2.0.0",
+    "html-webpack-plugin": "^3.2.0",
+    "is-docker": "^2.0.0",
+    "istanbul": "^0.4.5",
+    "istanbul-lib-coverage": "^2.0.1",
+    "mkdirp": "^0.5.1",
+    "mocha": "^6.1.4",
+    "node-sass": "^4.12.0",
+    "raw-loader": "^0.5.1",
+    "react-hot-loader": "^4.3.11",
+    "sass-loader": "^7.1.0",
+    "selenium-standalone": "^6.16.0",
+    "style-loader": "^0.23.0",
+    "stylelint": "^10.0.0",
+    "stylelint-config-recommended-scss": "^3.2.0",
+    "stylelint-scss": "^3.5.4",
+    "transform-loader": "^0.2.4",
+    "uuid": "^3.3.2",
+    "webdriverio": "^5.10.4",
+    "webpack": "^4.20.2",
+    "webpack-bundle-analyzer": "^3.0.2",
+    "webpack-cleanup-plugin": "^0.5.1",
+    "webpack-cli": "^3.1.2",
+    "webpack-dev-server": "^3.1.9"
   }
 }

src/codemirror-maputnik.css

@@ -4,10 +4,18 @@
 }
 
 .cm-s-maputnik.CodeMirror, .cm-s-maputnik .CodeMirror-gutters {
-  background: transparent;
   color: #8e8e8e;
   border: none;
 }
+
+.cm-s-maputnik.CodeMirror {
+  background: transparent;
+}
+
+.cm-s-maputnik .CodeMirror-gutters {
+  background: #212328;
+}
+
 .cm-s-maputnik .CodeMirror-cursor {
     border-left: solid thin #8e8e8e !important;
 }

src/components/App.jsx

@@ -1,40 +1,208 @@
+import autoBind from 'react-autobind';
 import React from 'react'
-import { saveAs } from 'file-saver'
-import Mousetrap from 'mousetrap'
+import cloneDeep from 'lodash.clonedeep'
+import clamp from 'lodash.clamp'
+import get from 'lodash.get'
+import {arrayMove} from 'react-sortable-hoc'
+import url from 'url'
 
-import InspectionMap from './map/InspectionMap'
 import MapboxGlMap from './map/MapboxGlMap'
-import OpenLayers3Map from './map/OpenLayers3Map'
+import OpenLayersMap from './map/OpenLayersMap'
 import LayerList from './layers/LayerList'
 import LayerEditor from './layers/LayerEditor'
 import Toolbar from './Toolbar'
 import AppLayout from './AppLayout'
 import MessagePanel from './MessagePanel'
 
-import GlSpec from 'mapbox-gl-style-spec/reference/latest.js'
-import validateStyleMin from 'mapbox-gl-style-spec/lib/validate_style.min'
-import style from '../libs/style.js'
+import SettingsModal from './modals/SettingsModal'
+import ExportModal from './modals/ExportModal'
+import SourcesModal from './modals/SourcesModal'
+import OpenModal from './modals/OpenModal'
+import ShortcutsModal from './modals/ShortcutsModal'
+import SurveyModal from './modals/SurveyModal'
+import DebugModal from './modals/DebugModal'
+
+import { downloadGlyphsMetadata, downloadSpriteMetadata } from '../libs/metadata'
+import {latest, validate} from '@mapbox/mapbox-gl-style-spec'
+import style from '../libs/style'
+import { initialStyleUrl, loadStyleUrl, removeStyleQuerystring } from '../libs/urlopen'
 import { undoMessages, redoMessages } from '../libs/diffmessage'
-import { loadDefaultStyle, StyleStore } from '../libs/stylestore'
+import { StyleStore } from '../libs/stylestore'
 import { ApiStyleStore } from '../libs/apistore'
 import { RevisionStore } from '../libs/revisions'
 import LayerWatcher from '../libs/layerwatcher'
+import tokens from '../config/tokens.json'
+import isEqual from 'lodash.isequal'
+import Debug from '../libs/debug'
+import queryUtil from '../libs/query-util'
 
+import MapboxGl from 'mapbox-gl'
+
+
+// Similar functionality as <https://github.com/mapbox/mapbox-gl-js/blob/7e30aadf5177486c2cfa14fe1790c60e217b5e56/src/util/mapbox.js>
+function normalizeSourceURL (url, apiToken="") {
+  const matches = url.match(/^mapbox:\/\/(.*)/);
+  if (matches) {
+    // mapbox://mapbox.mapbox-streets-v7
+    return `https://api.mapbox.com/v4/${matches[1]}.json?secure&access_token=${apiToken}`
+  }
+  else {
+    return url;
+  }
+}
+
+function setFetchAccessToken(url, mapStyle) {
+  const matchesTilehosting = url.match(/\.tilehosting\.com/);
+  const matchesMaptiler = url.match(/\.maptiler\.com/);
+  const matchesThunderforest = url.match(/\.thunderforest\.com/);
+  if (matchesTilehosting || matchesMaptiler) {
+    const accessToken = style.getAccessToken("openmaptiles", mapStyle, {allowFallback: true})
+    if (accessToken) {
+      return url.replace('{key}', accessToken)
+    }
+  }
+  else if (matchesThunderforest) {
+    const accessToken = style.getAccessToken("thunderforest", mapStyle, {allowFallback: true})
+    if (accessToken) {
+      return url.replace('{key}', accessToken)
+    }
+  }
+  else {
+    return url;
+  }
+}
+
+function updateRootSpec(spec, fieldName, newValues) {
+  return {
+    ...spec,
+    $root: {
+      ...spec.$root,
+      [fieldName]: {
+        ...spec.$root[fieldName],
+        values: newValues
+      }
+    }
+  }
+}
 
 export default class App extends React.Component {
   constructor(props) {
     super(props)
-    this.styleStore = new ApiStyleStore()
-    this.revisionStore = new RevisionStore()
+    autoBind(this);
 
-    this.styleStore.supported(isSupported => {
-      if(!isSupported) {
-        console.log('Falling back to local storage for storing styles')
-        this.styleStore = new StyleStore()
-      }
-      this.styleStore.latestStyle(mapStyle => this.onStyleChanged(mapStyle))
+    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),
+      port: port,
+      host: params.get("localhost")
     })
 
+
+    const shortcuts = [
+      {
+        key: "?",
+        handler: () => {
+          this.toggleModal("shortcuts");
+        }
+      },
+      {
+        key: "o",
+        handler: () => {
+          this.toggleModal("open");
+        }
+      },
+      {
+        key: "e",
+        handler: () => {
+          this.toggleModal("export");
+        }
+      },
+      {
+        key: "d",
+        handler: () => {
+          this.toggleModal("sources");
+        }
+      },
+      {
+        key: "s",
+        handler: () => {
+          this.toggleModal("settings");
+        }
+      },
+      {
+        key: "i",
+        handler: () => {
+          this.setMapState(
+            this.state.mapState === "map" ? "inspect" : "map"
+          );
+        }
+      },
+      {
+        key: "m",
+        handler: () => {
+          document.querySelector(".mapboxgl-canvas").focus();
+        }
+      },
+      {
+        key: "!",
+        handler: () => {
+          this.toggleModal("debug");
+        }
+      },
+    ]
+
+    document.body.addEventListener("keyup", (e) => {
+      if(e.key === "Escape") {
+        e.target.blur();
+        document.body.focus();
+      }
+      else if(this.state.isOpen.shortcuts || document.activeElement === document.body) {
+        const shortcut = shortcuts.find((shortcut) => {
+          return (shortcut.key === e.key)
+        })
+
+        if(shortcut) {
+          this.setModal("shortcuts", false);
+          shortcut.handler(e);
+        }
+      }
+    })
+
+    const styleUrl = initialStyleUrl()
+    if(styleUrl && window.confirm("Load style from URL: " + styleUrl + " and discard current changes?")) {
+      this.styleStore = new StyleStore()
+      loadStyleUrl(styleUrl, mapStyle => this.onStyleChanged(mapStyle))
+      removeStyleQuerystring()
+    } else {
+      if(styleUrl) {
+        removeStyleQuerystring()
+      }
+      this.styleStore.init(err => {
+        if(err) {
+          console.log('Falling back to local storage for storing styles')
+          this.styleStore = new StyleStore()
+        }
+        this.styleStore.latestStyle(mapStyle => this.onStyleChanged(mapStyle))
+
+        if(Debug.enabled()) {
+          Debug.set("maputnik", "styleStore", this.styleStore);
+          Debug.set("maputnik", "revisionStore", this.revisionStore);
+        }
+      })
+    }
+
+    if(Debug.enabled()) {
+      Debug.set("maputnik", "revisionStore", this.revisionStore);
+      Debug.set("maputnik", "styleStore", this.styleStore);
+    }
+
+    const queryObj = url.parse(window.location.href, true).query;
+
     this.state = {
       errors: [],
       infos: [],
@@ -42,45 +210,118 @@ export default class App extends React.Component {
       selectedLayerIndex: 0,
       sources: {},
       vectorLayers: {},
+      mapState: "map",
+      spec: latest,
+      isOpen: {
+        settings: false,
+        sources: false,
+        open: false,
+        shortcuts: false,
+        export: false,
+        survey: localStorage.hasOwnProperty('survey') ? false : true,
+        debug: false,
+      },
+      mapboxGlDebugOptions: {
+        showTileBoundaries: false,
+        showCollisionBoxes: false,
+        showOverdrawInspector: false,
+      },
+      openlayersDebugOptions: {
+        debugToolbox: false,
+      },
     }
 
     this.layerWatcher = new LayerWatcher({
-      onSourcesChange: v => this.setState({ sources: v }),
       onVectorLayersChange: v => this.setState({ vectorLayers: v })
     })
   }
 
+  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(['ctrl+z'], this.onUndo.bind(this));
-    Mousetrap.bind(['ctrl+y'], this.onRedo.bind(this));
+    window.addEventListener("keydown", this.handleKeyPress);
   }
 
   componentWillUnmount() {
-    Mousetrap.unbind(['ctrl+z'], this.onUndo.bind(this));
-    Mousetrap.unbind(['ctrl+y'], this.onRedo.bind(this));
-  }
-
-  onReset() {
-    this.styleStore.purge()
-    loadDefaultStyle(mapStyle => this.onStyleOpen(mapStyle))
-  }
-
-  onStyleDownload() {
-    const mapStyle = this.state.mapStyle
-    const blob = new Blob([JSON.stringify(mapStyle, null, 4)], {type: "application/json;charset=utf-8"});
-    saveAs(blob, mapStyle.id + ".json");
+    window.removeEventListener("keydown", this.handleKeyPress);
   }
 
   saveStyle(snapshotStyle) {
-    snapshotStyle.modified = new Date().toJSON()
     this.styleStore.save(snapshotStyle)
   }
 
-  onStyleChanged(newStyle) {
-    const errors = validateStyleMin(newStyle, GlSpec)
+  updateFonts(urlTemplate) {
+    const metadata = this.state.mapStyle.metadata || {}
+    const accessToken = metadata['maputnik:openmaptiles_access_token'] || tokens.openmaptiles
+
+    let glyphUrl = (typeof urlTemplate === 'string')? urlTemplate.replace('{key}', accessToken): urlTemplate;
+    downloadGlyphsMetadata(glyphUrl, fonts => {
+      this.setState({ spec: updateRootSpec(this.state.spec, 'glyphs', fonts)})
+    })
+  }
+
+  updateIcons(baseUrl) {
+    downloadSpriteMetadata(baseUrl, icons => {
+      this.setState({ spec: updateRootSpec(this.state.spec, 'sprite', icons)})
+    })
+  }
+
+  onChangeMetadataProperty = (property, value) => {
+    // If we're changing renderer reset the map state.
+    if (
+      property === 'maputnik:renderer' &&
+      value !== get(this.state.mapStyle, ['metadata', 'maputnik:renderer'], 'mbgljs')
+    ) {
+      this.setState({
+        mapState: 'map'
+      });
+    }
+
+    const changedStyle = {
+      ...this.state.mapStyle,
+      metadata: {
+        ...this.state.mapStyle.metadata,
+        [property]: value
+      }
+    }
+    this.onStyleChanged(changedStyle)
+  }
+
+  onStyleChanged = (newStyle, save=true) => {
+
+    const errors = validate(newStyle, latest)
     if(errors.length === 0) {
+
+      if(newStyle.glyphs !== this.state.mapStyle.glyphs) {
+        this.updateFonts(newStyle.glyphs)
+      }
+      if(newStyle.sprite !== this.state.mapStyle.sprite) {
+        this.updateIcons(newStyle.sprite)
+      }
+
       this.revisionStore.addRevision(newStyle)
-      this.saveStyle(newStyle)
+      if(save) this.saveStyle(newStyle)
       this.setState({
         mapStyle: newStyle,
         errors: [],
@@ -90,9 +331,11 @@ export default class App extends React.Component {
         errors: errors.map(err => err.message)
       })
     }
+
+    this.fetchSources();
   }
 
-  onUndo() {
+  onUndo = () => {
     const activeStyle = this.revisionStore.undo()
     const messages = undoMessages(this.state.mapStyle, activeStyle)
     this.saveStyle(activeStyle)
@@ -102,7 +345,7 @@ export default class App extends React.Component {
     })
   }
 
-  onRedo() {
+  onRedo = () => {
     const activeStyle = this.revisionStore.redo()
     const messages = redoMessages(this.state.mapStyle, activeStyle)
     this.saveStyle(activeStyle)
@@ -112,7 +355,25 @@ export default class App extends React.Component {
     })
   }
 
-  onLayersChange(changedLayers) {
+  onMoveLayer = (move) => {
+    let { oldIndex, newIndex } = move;
+    let layers = this.state.mapStyle.layers;
+    oldIndex = clamp(oldIndex, 0, layers.length-1);
+    newIndex = clamp(newIndex, 0, layers.length-1);
+    if(oldIndex === newIndex) return;
+
+    if (oldIndex === this.state.selectedLayerIndex) {
+      this.setState({
+        selectedLayerIndex: newIndex
+      });
+    }
+
+    layers = layers.slice(0);
+    layers = arrayMove(layers, oldIndex, newIndex);
+    this.onLayersChange(layers);
+  }
+
+  onLayersChange = (changedLayers) => {
     const changedStyle = {
       ...this.state.mapStyle,
       layers: changedLayers
@@ -120,7 +381,41 @@ export default class App extends React.Component {
     this.onStyleChanged(changedStyle)
   }
 
-  onLayerIdChange(oldId, newId) {
+  onLayerDestroy = (layerId) => {
+    let layers = this.state.mapStyle.layers;
+    const remainingLayers = layers.slice(0);
+    const idx = style.indexOfLayer(remainingLayers, layerId)
+    remainingLayers.splice(idx, 1);
+    this.onLayersChange(remainingLayers);
+  }
+
+  onLayerCopy = (layerId) => {
+    let layers = this.state.mapStyle.layers;
+    const changedLayers = layers.slice(0)
+    const idx = style.indexOfLayer(changedLayers, layerId)
+
+    const clonedLayer = cloneDeep(changedLayers[idx])
+    clonedLayer.id = clonedLayer.id + "-copy"
+    changedLayers.splice(idx, 0, clonedLayer)
+    this.onLayersChange(changedLayers)
+  }
+
+  onLayerVisibilityToggle = (layerId) => {
+    let layers = this.state.mapStyle.layers;
+    const changedLayers = layers.slice(0)
+    const idx = style.indexOfLayer(changedLayers, layerId)
+
+    const layer = { ...changedLayers[idx] }
+    const changedLayout = 'layout' in layer ? {...layer.layout} : {}
+    changedLayout.visibility = changedLayout.visibility === 'none' ? 'visible' : 'none'
+
+    layer.layout = changedLayout
+    changedLayers[idx] = layer
+    this.onLayersChange(changedLayers)
+  }
+
+
+  onLayerIdChange = (oldId, newId) => {
     const changedLayers = this.state.mapStyle.layers.slice(0)
     const idx = style.indexOfLayer(changedLayers, oldId)
 
@@ -132,7 +427,7 @@ export default class App extends React.Component {
     this.onLayersChange(changedLayers)
   }
 
-  onLayerChanged(layer) {
+  onLayerChanged = (layer) => {
     const changedLayers = this.state.mapStyle.layers.slice(0)
     const idx = style.indexOfLayer(changedLayers, layer.id)
     changedLayers[idx] = layer
@@ -140,66 +435,229 @@ export default class App extends React.Component {
     this.onLayersChange(changedLayers)
   }
 
-  mapRenderer() {
-    const metadata = this.state.mapStyle.metadata || {}
-    const mapProps = {
-      mapStyle: this.state.mapStyle,
-      accessToken: metadata['maputnik:access_token'],
-      onDataChange: (e) => {
-        this.layerWatcher.analyzeMap(e.map)
-      },
-			//TODO: This would actually belong to the layout component
-      style:{
-				top: 40,
-				//left: 500,
-			}
-    }
+  setMapState = (newState) => {
+    this.setState({
+      mapState: newState
+    })
+  }
 
-    const renderer = metadata['maputnik:renderer'] || 'mbgljs'
-
-    // Check if OL3 code has been loaded?
-    if(renderer === 'ol3') {
-      return <OpenLayers3Map {...mapProps} />
-    } else if(renderer === 'inspection') {
-      return  <InspectionMap {...mapProps}
-        sources={this.state.sources}
-        highlightedLayer={this.state.mapStyle.layers[this.state.selectedLayerIndex]} />
+  setDefaultValues = (styleObj) => {
+    const metadata = styleObj.metadata || {}
+    if(metadata['maputnik:renderer'] === undefined) {
+      const changedStyle = {
+        ...styleObj,
+        metadata: {
+          ...styleObj.metadata,
+          'maputnik:renderer': 'mbgljs'
+        }
+      }
+      return changedStyle
     } else {
-      return  <MapboxGlMap {...mapProps} />
+      return styleObj
     }
   }
 
-  onLayerSelect(layerId) {
+  openStyle = (styleObj) => {
+    styleObj = this.setDefaultValues(styleObj)
+    this.onStyleChanged(styleObj)
+  }
+
+  fetchSources() {
+    const sourceList = {...this.state.sources};
+
+    for(let [key, val] of Object.entries(this.state.mapStyle.sources)) {
+      if(sourceList.hasOwnProperty(key)) {
+        continue;
+      }
+
+      sourceList[key] = {
+        type: val.type,
+        layers: []
+      };
+
+      if(!this.state.sources.hasOwnProperty(key) && val.type === "vector" && val.hasOwnProperty("url")) {
+        let url = val.url;
+        try {
+          url = normalizeSourceURL(url, MapboxGl.accessToken);
+        } catch(err) {
+          console.warn("Failed to normalizeSourceURL: ", err);
+        }
+
+        try {
+          url = setFetchAccessToken(url, this.state.mapStyle)
+        } catch(err) {
+          console.warn("Failed to setFetchAccessToken: ", err);
+        }
+
+        fetch(url, {
+          mode: 'cors',
+        })
+          .then((response) => {
+            return response.json();
+          })
+          .then((json) => {
+            if(!json.hasOwnProperty("vector_layers")) {
+              return;
+            }
+
+            // Create new objects before setState
+            const sources = Object.assign({}, this.state.sources);
+
+            for(let layer of json.vector_layers) {
+              sources[key].layers.push(layer.id)
+            }
+
+            console.debug("Updating source: "+key);
+            this.setState({
+              sources: sources
+            });
+          })
+          .catch((err) => {
+            console.error("Failed to process sources for '%s'", url, err);
+          })
+      }
+    }
+
+    if(!isEqual(this.state.sources, sourceList)) {
+      console.debug("Setting sources");
+      this.setState({
+        sources: sourceList
+      })
+    }
+  }
+
+  _getRenderer () {
+    const metadata = this.state.mapStyle.metadata || {};
+    return metadata['maputnik:renderer'] || 'mbgljs';
+  }
+
+  mapRenderer() {
+    const metadata = this.state.mapStyle.metadata || {};
+
+    const mapProps = {
+      mapStyle: style.replaceAccessTokens(this.state.mapStyle, {allowFallback: true}),
+      onDataChange: (e) => {
+        this.layerWatcher.analyzeMap(e.map)
+        this.fetchSources();
+      },
+    }
+
+    const renderer = this._getRenderer();
+
+    let mapElement;
+
+    // Check if OL code has been loaded?
+    if(renderer === 'ol') {
+      mapElement = <OpenLayersMap
+        {...mapProps}
+        debugToolbox={this.state.openlayersDebugOptions.debugToolbox}
+        onLayerSelect={this.onLayerSelect}
+      />
+    } else {
+      mapElement = <MapboxGlMap {...mapProps}
+        options={this.state.mapboxGlDebugOptions}
+        inspectModeEnabled={this.state.mapState === "inspect"}
+        highlightedLayer={this.state.mapStyle.layers[this.state.selectedLayerIndex]}
+        onLayerSelect={this.onLayerSelect} />
+    }
+
+    let filterName;
+    if(this.state.mapState.match(/^filter-/)) {
+      filterName = this.state.mapState.replace(/^filter-/, "");
+    }
+    const elementStyle = {};
+    if (filterName) {
+      elementStyle.filter = `url('#${filterName}')`;
+    };
+
+    return <div style={elementStyle} className="maputnik-map__container">
+      {mapElement}
+    </div>
+  }
+
+  onLayerSelect = (layerId) => {
     const idx = style.indexOfLayer(this.state.mapStyle.layers, layerId)
     this.setState({ selectedLayerIndex: idx })
   }
 
+  setModal(modalName, value) {
+    if(modalName === 'survey' && value === false) {
+      localStorage.setItem('survey', '');
+    }
+
+    this.setState({
+      isOpen: {
+        ...this.state.isOpen,
+        [modalName]: value
+      }
+    })
+  }
+
+  toggleModal(modalName) {
+    this.setModal(modalName, !this.state.isOpen[modalName]);
+  }
+
+  onChangeOpenlayersDebug = (key, value) => {
+    this.setState({
+      openlayersDebugOptions: {
+        ...this.state.openlayersDebugOptions,
+        [key]: value,
+      }
+    });
+  }
+
+  onChangeMaboxGlDebug = (key, value) => {
+    this.setState({
+      mapboxGlDebugOptions: {
+        ...this.state.mapboxGlDebugOptions,
+        [key]: value,
+      }
+    });
+  }
+
   render() {
     const layers = this.state.mapStyle.layers || []
     const selectedLayer = layers.length > 0 ? layers[this.state.selectedLayerIndex] : null
     const metadata = this.state.mapStyle.metadata || {}
 
     const toolbar = <Toolbar
+      renderer={this._getRenderer()}
+      mapState={this.state.mapState}
       mapStyle={this.state.mapStyle}
+      inspectModeEnabled={this.state.mapState === "inspect"}
       sources={this.state.sources}
-      onStyleChanged={this.onStyleChanged.bind(this)}
-      onStyleOpen={this.onStyleChanged.bind(this)}
-      onStyleDownload={this.onStyleDownload.bind(this)}
+      onStyleChanged={this.onStyleChanged}
+      onStyleOpen={this.onStyleChanged}
+      onSetMapState={this.setMapState}
+      onToggleModal={this.toggleModal.bind(this)}
     />
 
     const layerList = <LayerList
-      onLayersChange={this.onLayersChange.bind(this)}
-      onLayerSelect={this.onLayerSelect.bind(this)}
+      onMoveLayer={this.onMoveLayer}
+      onLayerDestroy={this.onLayerDestroy}
+      onLayerCopy={this.onLayerCopy}
+      onLayerVisibilityToggle={this.onLayerVisibilityToggle}
+      onLayersChange={this.onLayersChange}
+      onLayerSelect={this.onLayerSelect}
       selectedLayerIndex={this.state.selectedLayerIndex}
       layers={layers}
+      sources={this.state.sources}
     />
 
     const layerEditor = selectedLayer ? <LayerEditor
       layer={selectedLayer}
+      layerIndex={this.state.selectedLayerIndex}
+      isFirstLayer={this.state.selectedLayerIndex < 1}
+      isLastLayer={this.state.selectedLayerIndex === this.state.mapStyle.layers.length-1}
       sources={this.state.sources}
       vectorLayers={this.state.vectorLayers}
-      onLayerChanged={this.onLayerChanged.bind(this)}
-      onLayerIdChange={this.onLayerIdChange.bind(this)}
+      spec={this.state.spec}
+      onMoveLayer={this.onMoveLayer}
+      onLayerChanged={this.onLayerChanged}
+      onLayerDestroy={this.onLayerDestroy}
+      onLayerCopy={this.onLayerCopy}
+      onLayerVisibilityToggle={this.onLayerVisibilityToggle}
+      onLayerIdChange={this.onLayerIdChange}
     /> : null
 
     const bottomPanel = (this.state.errors.length + this.state.infos.length) > 0 ? <MessagePanel
@@ -207,13 +665,60 @@ export default class App extends React.Component {
       infos={this.state.infos}
     /> : null
 
+
+    const modals = <div>
+      <DebugModal
+        renderer={this._getRenderer()}
+        mapboxGlDebugOptions={this.state.mapboxGlDebugOptions}
+        openlayersDebugOptions={this.state.openlayersDebugOptions}
+        onChangeMaboxGlDebug={this.onChangeMaboxGlDebug}
+        onChangeOpenlayersDebug={this.onChangeOpenlayersDebug}
+        isOpen={this.state.isOpen.debug}
+        onOpenToggle={this.toggleModal.bind(this, 'debug')}
+      />
+      <ShortcutsModal
+        ref={(el) => this.shortcutEl = el}
+        isOpen={this.state.isOpen.shortcuts}
+        onOpenToggle={this.toggleModal.bind(this, 'shortcuts')}
+      />
+      <SettingsModal
+        mapStyle={this.state.mapStyle}
+        onStyleChanged={this.onStyleChanged}
+        onChangeMetadataProperty={this.onChangeMetadataProperty}
+        isOpen={this.state.isOpen.settings}
+        onOpenToggle={this.toggleModal.bind(this, 'settings')}
+        openlayersDebugOptions={this.state.openlayersDebugOptions}
+      />
+      <ExportModal
+        mapStyle={this.state.mapStyle}
+        onStyleChanged={this.onStyleChanged}
+        isOpen={this.state.isOpen.export}
+        onOpenToggle={this.toggleModal.bind(this, 'export')}
+      />
+      <OpenModal
+        isOpen={this.state.isOpen.open}
+        onStyleOpen={this.openStyle}
+        onOpenToggle={this.toggleModal.bind(this, 'open')}
+      />
+      <SourcesModal
+        mapStyle={this.state.mapStyle}
+        onStyleChanged={this.onStyleChanged}
+        isOpen={this.state.isOpen.sources}
+        onOpenToggle={this.toggleModal.bind(this, 'sources')}
+      />
+      <SurveyModal
+        isOpen={this.state.isOpen.survey}
+        onOpenToggle={this.toggleModal.bind(this, 'survey')}
+      />
+    </div>
+
     return <AppLayout
       toolbar={toolbar}
       layerList={layerList}
       layerEditor={layerEditor}
       map={this.mapRenderer()}
       bottom={bottomPanel}
+      modals={modals}
     />
   }
 }
-

src/components/AppLayout.jsx

@@ -1,78 +1,46 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 import ScrollContainer from './ScrollContainer'
 
-import theme from '../config/theme'
-import colors from '../config/colors'
-import { fontSizes } from '../config/scales'
-
 class AppLayout extends React.Component {
   static propTypes = {
-    toolbar: React.PropTypes.element.isRequired,
-    layerList: React.PropTypes.element.isRequired,
-    layerEditor: React.PropTypes.element,
-    map: React.PropTypes.element.isRequired,
-    bottom: React.PropTypes.element,
+    toolbar: PropTypes.element.isRequired,
+    layerList: PropTypes.element.isRequired,
+    layerEditor: PropTypes.element,
+    map: PropTypes.element.isRequired,
+    bottom: PropTypes.element,
+    modals: PropTypes.node,
   }
 
   static childContextTypes = {
-    reactIconBase: React.PropTypes.object
+    reactIconBase: PropTypes.object
   }
 
   getChildContext() {
     return {
-      reactIconBase: { size: fontSizes[3] }
+      reactIconBase: { size: 14 }
     }
   }
 
   render() {
-    return <div style={{
-      fontFamily: theme.fontFamily,
-      color: theme.color,
-      fontWeight: 300
-    }}>
+    return <div className="maputnik-layout">
       {this.props.toolbar}
-      <div style={{
-        position: 'fixed',
-        bottom: 0,
-        height: "100%",
-        top: 40,
-        left: 0,
-        zIndex: 1,
-        width: 200,
-        overflow: "hidden",
-        backgroundColor: colors.black
-      }}>
+      <div className="maputnik-layout-list">
         <ScrollContainer>
           {this.props.layerList}
         </ScrollContainer>
       </div>
-      <div style={{
-        position: 'fixed',
-        bottom: 0,
-        height: "100%",
-        top: 40,
-        left: 200,
-        zIndex: 1,
-        width: 350,
-        backgroundColor: colors.black
-      }}>
+      <div className="maputnik-layout-drawer">
         <ScrollContainer>
           {this.props.layerEditor}
         </ScrollContainer>
       </div>
       {this.props.map}
-      {this.props.bottom && <div style={{
-          position: 'fixed',
-          height: 50,
-          bottom: 0,
-          left: 550,
-          zIndex: 1,
-          width: '100%',
-          backgroundColor: colors.black
-        }}>
+      {this.props.bottom && <div className="maputnik-layout-bottom">
           {this.props.bottom}
         </div>
       }
+      {this.props.modals}
     </div>
   }
 }

src/components/Button.jsx

@@ -1,28 +1,28 @@
 import React from 'react'
-import colors from '../config/colors'
-import { margins, fontSizes } from '../config/scales'
+import PropTypes from 'prop-types'
+import classnames from 'classnames'
 
 class Button extends React.Component {
   static propTypes = {
-    onClick: React.PropTypes.func,
-    style: React.PropTypes.object,
+    "data-wd-key": PropTypes.string,
+    "aria-label": PropTypes.string,
+    onClick: PropTypes.func,
+    style: PropTypes.object,
+    className: PropTypes.string,
+    children: PropTypes.node,
+    disabled: PropTypes.bool,
   }
 
   render() {
-    return <a
+    return <button
       onClick={this.props.onClick}
-      style={{
-        cursor: 'pointer',
-        backgroundColor: colors.midgray,
-        color: colors.lowgray,
-        fontSize: fontSizes[5],
-        padding: margins[1],
-        userSelect: 'none',
-        borderRadius: 2,
-        ...this.props.style,
-      }}>
+      disabled={this.props.disabled}
+      aria-label={this.props["aria-label"]}
+      className={classnames("maputnik-button", this.props.className)}
+      data-wd-key={this.props["data-wd-key"]}
+      style={this.props.style}>
       {this.props.children}
-    </a>
+    </button>
   }
 }
 

src/components/Heading.jsx

@@ -1,32 +0,0 @@
-import React from 'react'
-import { fontSizes, margins } from '../config/scales'
-
-class Heading extends React.Component {
-  static propTypes = {
-    level: React.PropTypes.number.isRequired,
-    style: React.PropTypes.object,
-  }
-
-  render() {
-    const headingProps = {
-      style: {
-        fontWeight: 400,
-        fontSize: fontSizes[this.props.level - 1],
-        marginBottom: margins[1],
-        ...this.props.style
-      }
-    }
-
-    switch(this.props.level) {
-      case 1: return <h1 {...headingProps}>{this.props.children}</h1>
-      case 2: return <h2 {...headingProps}>{this.props.children}</h2>
-      case 3: return <h3 {...headingProps}>{this.props.children}</h3>
-      case 4: return <h4 {...headingProps}>{this.props.children}</h4>
-      case 5: return <h5 {...headingProps}>{this.props.children}</h5>
-      default: return <h6 {...headingProps}>{this.props.children}</h6>
-    }
-  }
-}
-
-
-export default Heading

src/components/MessagePanel.jsx

@@ -1,39 +1,22 @@
 import React from 'react'
-import Paragraph from './Paragraph'
-import colors from '../config/colors'
-import { fontSizes, margins } from '../config/scales'
+import PropTypes from 'prop-types'
 
 class MessagePanel extends React.Component {
   static propTypes = {
-    errors: React.PropTypes.array,
-    infos: React.PropTypes.array,
+    errors: PropTypes.array,
+    infos: PropTypes.array,
   }
 
   render() {
-    const paragraphStyle = {
-      margin: 0,
-      lineHeight: 1.2,
-    }
-
     const errors = this.props.errors.map((m, i) => {
-      return <Paragraph key={i}
-        style={{
-          ...paragraphStyle,
-          color: colors.red,
-        }}>{m}</Paragraph>
+      return <p key={"error-"+i} className="maputnik-message-panel-error">{m}</p>
     })
 
     const infos = this.props.infos.map((m, i) => {
-      return <Paragraph key={i}
-        style={{
-          ...paragraphStyle,
-          color: colors.lowgray,
-        }}>{m}</Paragraph>
+      return <p key={"info-"+i}>{m}</p>
     })
 
-    return <div style={{
-      padding: margins[1],
-    }}>
+    return <div className="maputnik-message-panel">
       {errors}
       {infos}
     </div>

src/components/Paragraph.jsx

@@ -1,13 +0,0 @@
-import React from 'react'
-import colors from '../config/colors'
-import { margins, fontSizes } from '../config/scales'
-
-const Paragraph = (props) => <p style={{
-  color: colors.lowgray,
-  fontSize: fontSizes[5],
-  ...props.style
-}}>
-  {props.children}
-</p>
-
-export default Paragraph

src/components/ScrollContainer.jsx

@@ -1,17 +1,16 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 
-const ScrollContainer = (props) => {
-  return <div style={{
-    overflowX: "visible",
-    overflowY: "scroll",
-    bottom:0,
-    left:0,
-    right:0,
-    top:1,
-    position: "absolute",
-  }}>
-    {props.children}
-  </div>
+class ScrollContainer extends React.Component {
+  static propTypes = {
+    children: PropTypes.node
+  }
+
+  render() {
+    return <div className="maputnik-scroll-container">
+      {this.props.children}
+    </div>
+  }
 }
 
 export default ScrollContainer

src/components/Toolbar.jsx

@@ -1,206 +1,236 @@
 import React from 'react'
-import FileReaderInput from 'react-file-reader-input'
+import PropTypes from 'prop-types'
+import classnames from 'classnames'
+import {detect} from 'detect-browser';
 
-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 AddIcon from 'react-icons/lib/md/add-circle-outline'
+import {MdFileDownload, MdOpenInBrowser, MdSettings, MdLayers, MdHelpOutline, MdFindInPage, MdAssignmentTurnedIn} from 'react-icons/md'
 
-import logoImage from '../img/maputnik.png'
-import AddModal from './modals/AddModal'
-import SettingsModal from './modals/SettingsModal'
-import SourcesModal from './modals/SourcesModal'
-import OpenModal from './modals/OpenModal'
 
-import style from '../libs/style'
-import colors from '../config/colors'
-import { margins, fontSizes } from '../config/scales'
+import logoImage from 'maputnik-design/logos/logo-color.svg'
+import pkgJson from '../../package.json'
 
-const IconText = props => <span style={{ paddingLeft: margins[0] }}>
-  {props.children}
-</span>
 
-const actionStyle = {
-  display: "inline-block",
-  padding: 10,
-  fontSize: fontSizes[4],
-  cursor: "pointer",
-  color: colors.white,
-  textDecoration: 'none',
-}
+// 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;
 
-const ToolbarLink = props => <a
-  href={props.href}
-  target={"blank"}
-  style={{
-    ...actionStyle,
-    ...props.style,
-  }}>
-  {props.children}
-</a>
 
-class ToolbarAction extends React.Component {
+class IconText extends React.Component {
   static propTypes = {
-    onClick: React.PropTypes.func.isRequired,
+    children: PropTypes.node,
   }
 
-  constructor(props) {
-    super(props)
-    this.state = { hover: false }
+  render() {
+    return <span className="maputnik-icon-text">{this.props.children}</span>
+  }
+}
+
+class ToolbarLink extends React.Component {
+  static propTypes = {
+    className: PropTypes.string,
+    children: PropTypes.node,
+    href: PropTypes.string,
+    onToggleModal: PropTypes.func,
   }
 
   render() {
     return <a
-      onClick={this.props.onClick}
-      onMouseOver={e => this.setState({hover: true})}
-      onMouseOut={e => this.setState({hover: false})}
-      style={{
-        ...actionStyle,
-        ...this.props.style,
-        backgroundColor: this.state.hover ? colors.gray : null,
-      }}>
+      className={classnames('maputnik-toolbar-link', this.props.className)}
+      href={this.props.href}
+      rel="noopener noreferrer"
+      target="_blank"
+    >
       {this.props.children}
     </a>
   }
 }
 
-export default class Toolbar extends React.Component {
+class ToolbarLinkHighlighted extends React.Component {
   static propTypes = {
-    mapStyle: React.PropTypes.object.isRequired,
-    onStyleChanged: React.PropTypes.func.isRequired,
-    // A new style has been uploaded
-    onStyleOpen: React.PropTypes.func.isRequired,
-    // Current style is requested for download
-    onStyleDownload: React.PropTypes.func.isRequired,
-    // A dict of source id's and the available source layers
-    sources: React.PropTypes.object.isRequired,
-  }
-
-  constructor(props) {
-    super(props)
-    this.state = {
-      isOpen: {
-        settings: false,
-        sources: false,
-        open: false,
-        add: false,
-      }
-    }
-  }
-
-  downloadButton() {
-    return <ToolbarAction onClick={this.props.onStyleDownload}>
-      <MdFileDownload />
-      <IconText>Download</IconText>
-    </ToolbarAction>
-  }
-
-  toggleInspectionMode() {
-    const metadata = this.props.mapStyle.metadata || {}
-    const currentRenderer = metadata['maputnik:renderer'] || 'mbgljs'
-
-    const changedRenderer = currentRenderer === 'inspection' ? 'mbgljs' : 'inspection'
-
-    const changedStyle = {
-      ...this.props.mapStyle,
-      metadata: {
-        'maputnik:renderer': changedRenderer
-      }
-    }
-
-    this.props.onStyleChanged(changedStyle)
-  }
-
-  toggleModal(modalName) {
-    this.setState({
-      isOpen: {
-        ...this.state.isOpen,
-        [modalName]: !this.state.isOpen[modalName]
-      }
-    })
+    className: PropTypes.string,
+    children: PropTypes.node,
+    href: PropTypes.string,
+    onToggleModal: PropTypes.func
   }
 
   render() {
-    return <div style={{
-      position: "fixed",
-      height: 40,
-      width: '100%',
-      zIndex: 100,
-      left: 0,
-      top: 0,
-      backgroundColor: colors.black
-    }}>
-      <SettingsModal
-        mapStyle={this.props.mapStyle}
-        onStyleChanged={this.props.onStyleChanged}
-        isOpen={this.state.isOpen.settings}
-        onOpenToggle={this.toggleModal.bind(this, 'settings')}
-      />
-      <OpenModal
-        isOpen={this.state.isOpen.open}
-        onStyleOpen={this.props.onStyleOpen}
-        onOpenToggle={this.toggleModal.bind(this, 'open')}
-      />
-      <SourcesModal
-          mapStyle={this.props.mapStyle}
-          onStyleChanged={this.props.onStyleChanged}
-          isOpen={this.state.isOpen.sources}
-          onOpenToggle={this.toggleModal.bind(this, 'sources')}
-      />
-      <AddModal
-          mapStyle={this.props.mapStyle}
-          sources={this.props.sources}
-          isOpen={this.state.isOpen.add}
-          onOpenToggle={this.toggleModal.bind(this, 'add')}
-          onStyleChange={this.props.onStyleChanged}
-      />
-      <ToolbarLink
-        href={"https://github.com/maputnik/editor"}
-        style={{
-          width: 180,
-          textAlign: 'left',
-          backgroundColor: colors.black,
-          padding: 5,
-        }}
-      >
-        <img src={logoImage} alt="Maputnik" style={{width: 30, height: 30, paddingRight: 5, verticalAlign: 'middle'}}/>
-        <span style={{fontSize: 20, verticalAlign: 'middle' }}>Maputnik</span>
-      </ToolbarLink>
-      <ToolbarAction onClick={this.toggleModal.bind(this, 'open')}>
-        <OpenIcon />
-        <IconText>Open</IconText>
-      </ToolbarAction>
-      {this.downloadButton()}
-      <ToolbarAction onClick={this.toggleModal.bind(this, 'add')}>
-        <AddIcon />
-        <IconText>Add Layer</IconText>
-      </ToolbarAction>
-      <ToolbarAction onClick={this.toggleModal.bind(this, 'sources')}>
-        <SourcesIcon />
-        <IconText>Sources</IconText>
-      </ToolbarAction>
-      <ToolbarAction onClick={this.toggleModal.bind(this, 'settings')}>
-        <SettingsIcon />
-        <IconText>Style Settings</IconText>
-      </ToolbarAction>
-      <ToolbarAction onClick={this.toggleInspectionMode.bind(this)}>
-        <InspectionIcon />
-        <IconText>Inspect</IconText>
-      </ToolbarAction>
-      <ToolbarLink href={"https://github.com/maputnik/editor/wiki"}>
-        <HelpIcon />
-        <IconText>Help</IconText>
-      </ToolbarLink>
+    return <a
+      className={classnames('maputnik-toolbar-link', "maputnik-toolbar-link--highlighted", this.props.className)}
+      href={this.props.href}
+      rel="noopener noreferrer"
+      target="_blank"
+    >
+      <span className="maputnik-toolbar-link-wrapper">
+        {this.props.children}
+      </span>
+    </a>
+  }
+}
+
+class ToolbarSelect extends React.Component {
+  static propTypes = {
+    children: PropTypes.node,
+    wdKey: PropTypes.string
+  }
+
+  render() {
+    return <div
+      className='maputnik-toolbar-select'
+      data-wd-key={this.props.wdKey}
+    >
+      {this.props.children}
+    </div>
+  }
+}
+
+class ToolbarAction extends React.Component {
+  static propTypes = {
+    children: PropTypes.node,
+    onClick: PropTypes.func,
+    wdKey: PropTypes.string
+  }
+
+  render() {
+    return <button
+      className='maputnik-toolbar-action'
+      data-wd-key={this.props.wdKey}
+      onClick={this.props.onClick}
+    >
+      {this.props.children}
+    </button>
+  }
+}
+
+export default class Toolbar extends React.Component {
+  static propTypes = {
+    mapStyle: PropTypes.object.isRequired,
+    inspectModeEnabled: PropTypes.bool.isRequired,
+    onStyleChanged: PropTypes.func.isRequired,
+    // A new style has been uploaded
+    onStyleOpen: PropTypes.func.isRequired,
+    // A dict of source id's and the available source layers
+    sources: PropTypes.object.isRequired,
+    children: PropTypes.node,
+    onToggleModal: PropTypes.func,
+    onSetMapState: PropTypes.func,
+    mapState: PropTypes.string,
+    renderer: PropTypes.string,
+  }
+
+  state = {
+    isOpen: {
+      settings: false,
+      sources: false,
+      open: 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
+          className="maputnik-toolbar-logo-container"
+        >
+          <a className="maputnik-toolbar-skip" href="#skip-menu">
+            Skip navigation
+          </a>
+          <a
+            href="https://github.com/maputnik/editor"
+            rel="noopener noreferrer"
+            target="_blank"
+            className="maputnik-toolbar-logo"
+          >
+            <img src={logoImage} alt="Maputnik" />
+            <h1>
+              <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')}>
+            <MdOpenInBrowser />
+            <IconText>Open</IconText>
+          </ToolbarAction>
+          <ToolbarAction wdKey="nav:export" onClick={this.props.onToggleModal.bind(this, 'export')}>
+            <MdFileDownload />
+            <IconText>Export</IconText>
+          </ToolbarAction>
+          <ToolbarAction wdKey="nav:sources" onClick={this.props.onToggleModal.bind(this, 'sources')}>
+            <MdLayers />
+            <IconText>Data Sources</IconText>
+          </ToolbarAction>
+          <ToolbarAction wdKey="nav:settings" onClick={this.props.onToggleModal.bind(this, 'settings')}>
+            <MdSettings />
+            <IconText>Style Settings</IconText>
+          </ToolbarAction>
+
+          <ToolbarSelect wdKey="nav:inspect">
+            <MdFindInPage />
+            <IconText>View </IconText>
+            <select onChange={(e) => this.handleSelection(e.target.value)} value={currentView.id}>
+              {views.map((item) => {
+                return (
+                  <option key={item.id} value={item.id} disabled={item.disabled}>
+                    {item.title}
+                  </option>
+                );
+              })}
+            </select>
+          </ToolbarSelect>
+
+          <ToolbarLink href={"https://github.com/maputnik/editor/wiki"}>
+            <MdHelpOutline />
+            <IconText>Help</IconText>
+          </ToolbarLink>
+          <ToolbarLinkHighlighted href={"https://gregorywolanski.typeform.com/to/cPgaSY"}>
+            <MdAssignmentTurnedIn />
+            <IconText>Take the Maputnik Survey</IconText>
+          </ToolbarLinkHighlighted>
+        </div>
+      </div>
     </div>
   }
 }

src/components/fields/ColorField.jsx

@@ -1,8 +1,7 @@
 import React from 'react'
 import Color from 'color'
 import ChromePicker from 'react-color/lib/components/chrome/Chrome'
-
-import input from '../../config/input.js'
+import PropTypes from 'prop-types'
 
 function formatColor(color) {
   const rgb = color.rgb
@@ -12,26 +11,23 @@ function formatColor(color) {
 /*** Number fields with support for min, max and units and documentation*/
 class ColorField extends React.Component {
   static propTypes = {
-    onChange: React.PropTypes.func.isRequired,
-    name: React.PropTypes.string.isRequired,
-    value: React.PropTypes.string,
-    doc: React.PropTypes.string,
-    style: React.PropTypes.object,
-    default: React.PropTypes.string,
+    onChange: PropTypes.func.isRequired,
+    name: PropTypes.string.isRequired,
+    value: PropTypes.string,
+    doc: PropTypes.string,
+    style: PropTypes.object,
+    default: PropTypes.string,
   }
 
-  constructor(props) {
-    super(props)
-    this.state = {
-      pickerOpened: false,
-    }
+  state = {
+    pickerOpened: false
   }
 
   //TODO: I much rather would do this with absolute positioning
   //but I am too stupid to get it to work together with fixed position
   //and scrollbars so I have to fallback to JavaScript
-  calcPickerOffset() {
-    const elem = this.refs.colorInput
+  calcPickerOffset = () => {
+    const elem = this.colorInput
     if(elem) {
       const pos = elem.getBoundingClientRect()
       return {
@@ -39,7 +35,6 @@ class ColorField extends React.Component {
         left: pos.left + 196,
       }
     } else {
-      console.warn('Color field has no element to adjust position')
       return {
         top: 160,
         left: 555,
@@ -47,29 +42,51 @@ class ColorField extends React.Component {
     }
   }
 
-  togglePicker() {
+  togglePicker = () => {
     this.setState({ pickerOpened: !this.state.pickerOpened })
   }
 
   get color() {
-    return Color(this.props.value || '#fff')
+    // Catch invalid color.
+    try {
+      return Color(this.props.value).rgb()
+    }
+    catch(err) {
+      console.warn("Error parsing color: ", err);
+      return Color("rgb(255,255,255)");
+    }
+  }
+
+  onChange (v) {
+    this.props.onChange(v === "" ? undefined : v);
   }
 
   render() {
     const offset = this.calcPickerOffset()
+    var currentColor = this.color.object()
+    currentColor = {
+      r: currentColor.r,
+      g: currentColor.g,
+      b: currentColor.b,
+      // Rename alpha -> a for ChromePicker
+      a: currentColor.alpha
+    }
+
     const picker = <div
+      className="maputnik-color-picker-offset"
       style={{
-        position: 'fixed',
-        zIndex: 1,
+	      position: 'fixed',
+	      zIndex: 1,
         left: offset.left,
         top: offset.top,
       }}>
       <ChromePicker
-        color={this.color.object()}
+        color={currentColor}
         onChange={c => this.props.onChange(formatColor(c))}
       />
       <div
-        onClick={this.togglePicker.bind(this)}
+        className="maputnik-color-picker-offset"
+        onClick={this.togglePicker}
         style={{
           zIndex: -1,
           position: 'fixed',
@@ -81,22 +98,23 @@ class ColorField extends React.Component {
       />
     </div>
 
-    return <div style={{
-      position: 'relative',
-      display: 'inline',
-    }}>
+    var swatchStyle = {
+      backgroundColor: this.props.value
+    };
+
+    return <div className="maputnik-color-wrapper">
       {this.state.pickerOpened && picker}
+      <div className="maputnik-color-swatch" style={swatchStyle}></div>
       <input
-        ref="colorInput"
-        onClick={this.togglePicker.bind(this)}
-        style={{
-          ...input.input,
-          ...this.props.style
-        }}
+        spellCheck="false"
+        className="maputnik-color"
+        ref={(input) => this.colorInput = input}
+        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,49 +1,22 @@
 import React from 'react'
-import input from '../../config/input.js'
-import colors from '../../config/colors.js'
-import { margins, fontSizes } from '../../config/scales.js'
+import PropTypes from 'prop-types'
 
 export default class DocLabel extends React.Component {
   static propTypes = {
-    label: React.PropTypes.string.isRequired,
-    doc: React.PropTypes.string.isRequired,
-    style: React.PropTypes.object,
-  }
-
-  constructor(props) {
-    super(props)
-    this.state = { showDoc: false }
+    label: PropTypes.oneOfType([
+      PropTypes.object,
+      PropTypes.string
+    ]).isRequired,
+    doc: PropTypes.string.isRequired,
   }
 
   render() {
-    return <label
-      style={{
-        ...input.label,
-        ...this.props.style,
-        position: 'relative',
-      }}
-    >
-      <span
-        onMouseOver={e => this.setState({showDoc: true})}
-        onMouseOut={e => this.setState({showDoc: false})}
-        style={{
-          cursor: 'help',
-        }}
-      >
-        {this.props.label}
-      </span>
-      <div style={{
-        backgroundColor: colors.gray,
-        padding: margins[1],
-        fontSize: 10,
-        position: 'absolute',
-        top: 20,
-        left: 0,
-        width: 120,
-        display: this.state.showDoc ? null : 'none',
-        zIndex: 3,
-      }}>
-        {this.props.doc}
+    return <label className="maputnik-doc-wrapper">
+      <div className="maputnik-doc-target">
+        <span>{this.props.label}</span>
+        <div className="maputnik-doc-popup">
+          {this.props.doc}
+        </div>
       </div>
     </label>
   }

src/components/fields/FunctionSpecField.jsx

@@ -0,0 +1,151 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import SpecProperty from './_SpecProperty'
+import DataProperty from './_DataProperty'
+import ZoomProperty from './_ZoomProperty'
+
+
+function isZoomField(value) {
+  return typeof value === 'object' && value.stops && typeof value.property === 'undefined'
+}
+
+function isDataField(value) {
+  return typeof value === 'object' && value.stops && typeof value.property !== 'undefined'
+}
+
+/** Supports displaying spec field for zoom function objects
+ * https://www.mapbox.com/mapbox-gl-style-spec/#types-function-zoom-property
+ */
+export default class FunctionSpecProperty  extends React.Component {
+  static propTypes = {
+      onChange: PropTypes.func.isRequired,
+      fieldName: PropTypes.string.isRequired,
+      fieldSpec: PropTypes.object.isRequired,
+
+      value: PropTypes.oneOfType([
+      PropTypes.object,
+      PropTypes.string,
+      PropTypes.number,
+      PropTypes.bool,
+      PropTypes.array
+    ]),
+  }
+
+  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") {
+      stops.push([
+        {zoom: lastStop[0].zoom + 1, value: lastStop[0].value},
+        lastStop[1]
+      ])
+    }
+    else {
+      stops.push([lastStop[0] + 1, lastStop[1]])
+    }
+
+    const changedValue = {
+      ...this.props.value,
+      stops: stops,
+    }
+
+    this.props.onChange(this.props.fieldName, changedValue)
+  }
+
+  deleteStop = (stopIdx) => {
+    const stops = this.props.value.stops.slice(0)
+    stops.splice(stopIdx, 1)
+
+    let changedValue = {
+      ...this.props.value,
+      stops: stops,
+    }
+
+    if(stops.length === 1) {
+      changedValue = stops[0][1]
+    }
+
+    this.props.onChange(this.props.fieldName, changedValue)
+  }
+
+  makeZoomFunction = () => {
+    const zoomFunc = {
+      stops: [
+        [6, this.props.value],
+        [10, this.props.value]
+      ]
+    }
+    this.props.onChange(this.props.fieldName, zoomFunc)
+  }
+
+  makeDataFunction = () => {
+    const functionType = this.getFieldFunctionType(this.props.fieldSpec);
+    const stopValue = functionType === 'categorical' ? '' : 0;
+    const dataFunc = {
+      property: "",
+      type: functionType,
+      stops: [
+        [{zoom: 6, value: stopValue}, this.props.value || stopValue],
+        [{zoom: 10, value: stopValue}, this.props.value || stopValue]
+      ]
+    }
+    this.props.onChange(this.props.fieldName, dataFunc)
+  }
+
+  render() {
+    const propClass = this.props.fieldSpec.default === this.props.value ? "maputnik-default-property" : "maputnik-modified-property"
+    let specField;
+
+    if (isZoomField(this.props.value)) {
+      specField = (
+        <ZoomProperty
+          onChange={this.props.onChange.bind(this)}
+          fieldName={this.props.fieldName}
+          fieldSpec={this.props.fieldSpec}
+          value={this.props.value}
+          onDeleteStop={this.deleteStop}
+          onAddStop={this.addStop}
+        />
+      )
+    }
+    else if (isDataField(this.props.value)) {
+      specField = (
+        <DataProperty
+          onChange={this.props.onChange.bind(this)}
+          fieldName={this.props.fieldName}
+          fieldSpec={this.props.fieldSpec}
+          value={this.props.value}
+          onDeleteStop={this.deleteStop}
+          onAddStop={this.addStop}
+        />
+      )
+    }
+    else {
+      specField = (
+        <SpecProperty
+          onChange={this.props.onChange.bind(this)}
+          fieldName={this.props.fieldName}
+          fieldSpec={this.props.fieldSpec}
+          value={this.props.value}
+          onZoomClick={this.makeZoomFunction}
+          onDataClick={this.makeDataFunction} 
+        />
+      )
+    }
+    return <div className={propClass} data-wd-key={"spec-field:"+this.props.fieldName}>
+      {specField}
+    </div>
+  }
+}
+

src/components/fields/PropertyGroup.jsx

@@ -1,20 +1,32 @@
 import React from 'react'
-import GlSpec from 'mapbox-gl-style-spec/reference/latest.js'
+import PropTypes from 'prop-types'
 
-import ZoomSpecField from './ZoomSpecField'
-import colors from '../../config/colors'
-import { margins } from '../../config/scales'
+import FunctionSpecField from './FunctionSpecField'
+const iconProperties = ['background-pattern', 'fill-pattern', 'line-pattern', 'fill-extrusion-pattern', 'icon-image']
 
 /** Extract field spec by {@fieldName} from the {@layerType} in the
  * style specification from either the paint or layout group */
-function getFieldSpec(layerType, fieldName) {
-  const groupName = getGroupName(layerType, fieldName)
-  const group = GlSpec[groupName + '_' + layerType]
-  return group[fieldName]
+function getFieldSpec(spec, layerType, fieldName) {
+  const groupName = getGroupName(spec, layerType, fieldName)
+  const group = spec[groupName + '_' + layerType]
+  const fieldSpec = group[fieldName]
+  if(iconProperties.indexOf(fieldName) >= 0) {
+    return {
+      ...fieldSpec,
+      values: spec.$root.sprite.values
+    }
+  }
+  if(fieldName === 'text-font') {
+    return {
+      ...fieldSpec,
+      values: spec.$root.glyphs.values
+    }
+  }
+  return fieldSpec
 }
 
-function getGroupName(layerType, fieldName) {
-  const paint  = GlSpec['paint_' + layerType] || {}
+function getGroupName(spec, layerType, fieldName) {
+  const paint  = spec['paint_' + layerType] || {}
   if (fieldName in paint) {
     return 'paint'
   } else {
@@ -24,34 +36,35 @@ function getGroupName(layerType, fieldName) {
 
 export default class PropertyGroup extends React.Component {
   static propTypes = {
-    layer: React.PropTypes.object.isRequired,
-    groupFields: React.PropTypes.array.isRequired,
-    onChange: React.PropTypes.func.isRequired,
+    layer: PropTypes.object.isRequired,
+    groupFields: PropTypes.array.isRequired,
+    onChange: PropTypes.func.isRequired,
+    spec: PropTypes.object.isRequired,
   }
 
-  onPropertyChange(property, newValue) {
-    const group = getGroupName(this.props.layer.type, property)
+  onPropertyChange = (property, newValue) => {
+    const group = getGroupName(this.props.spec, this.props.layer.type, property)
     this.props.onChange(group , property, newValue)
   }
 
   render() {
     const fields = this.props.groupFields.map(fieldName => {
-      const fieldSpec = getFieldSpec(this.props.layer.type, 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]
 
-      return <ZoomSpecField
-        onChange={this.onPropertyChange.bind(this)}
+      return <FunctionSpecField
+        onChange={this.onPropertyChange}
         key={fieldName}
         fieldName={fieldName}
-        value={fieldValue}
+        value={fieldValue === undefined ? fieldSpec.default : fieldValue}
         fieldSpec={fieldSpec}
       />
     })
 
-    return <div>
+    return <div className="maputnik-property-group">
       {fields}
     </div>
   }

src/components/fields/SpecField.jsx

@@ -1,7 +1,6 @@
 import React from 'react'
-import color from 'color'
+import PropTypes from 'prop-types'
 
-import GlSpec from 'mapbox-gl-style-spec/reference/latest.min.js'
 import ColorField from './ColorField'
 import NumberInput from '../inputs/NumberInput'
 import CheckboxInput from '../inputs/CheckboxInput'
@@ -9,11 +8,12 @@ import StringInput from '../inputs/StringInput'
 import SelectInput from '../inputs/SelectInput'
 import MultiButtonInput from '../inputs/MultiButtonInput'
 import ArrayInput from '../inputs/ArrayInput'
+import DynamicArrayInput from '../inputs/DynamicArrayInput'
 import FontInput from '../inputs/FontInput'
+import IconInput from '../inputs/IconInput'
 import capitalize from 'lodash.capitalize'
 
-
-import input from '../../config/input.js'
+const iconProperties = ['background-pattern', 'fill-pattern', 'line-pattern', 'fill-extrusion-pattern', 'icon-image']
 
 function labelFromFieldName(fieldName) {
   let label = fieldName.split('-').slice(1).join(' ')
@@ -36,76 +36,101 @@ function optionsLabelLength(options) {
  * to display @{value}. */
 export default class SpecField extends React.Component {
   static propTypes = {
-    onChange: React.PropTypes.func.isRequired,
-    fieldName: React.PropTypes.string.isRequired,
-    fieldSpec: React.PropTypes.object.isRequired,
-    value: React.PropTypes.oneOfType([
-      React.PropTypes.string,
-      React.PropTypes.number,
-      React.PropTypes.array,
+    onChange: PropTypes.func.isRequired,
+    fieldName: PropTypes.string.isRequired,
+    fieldSpec: PropTypes.object.isRequired,
+    value: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.number,
+      PropTypes.array,
+      PropTypes.bool
     ]),
     /** Override the style of the field */
-    style: React.PropTypes.object,
+    style: PropTypes.object,
   }
 
   render() {
     const commonProps = {
       style: this.props.style,
-      default: this.props.fieldSpec.default,
       value: this.props.value,
+      default: this.props.fieldSpec.default,
       name: this.props.fieldName,
       onChange: newValue => this.props.onChange(this.props.fieldName, newValue)
     }
-    switch(this.props.fieldSpec.type) {
-      case 'number': return (
-        <NumberInput
-          {...commonProps}
-          min={this.props.fieldSpec.minimum}
-          max={this.props.fieldSpec.maximum}
-        />
-      )
-      case 'enum':
-        const options = Object.keys(this.props.fieldSpec.values).map(v => [v, capitalize(v)])
 
-        if(options.length <= 3 && optionsLabelLength(options) <= 20) {
-          return <MultiButtonInput
+    function childNodes() {
+      switch(this.props.fieldSpec.type) {
+        case 'number': return (
+          <NumberInput
             {...commonProps}
-            options={options}
+            min={this.props.fieldSpec.minimum}
+            max={this.props.fieldSpec.maximum}
           />
-        } else {
-          return <SelectInput
-            {...commonProps}
-            options={options}
-          />
-        }
-      case 'string': return (
-        <StringInput
-          {...commonProps}
-        />
-      )
-      case 'color': return (
-        <ColorField
-          {...commonProps}
-        />
-      )
-      case 'boolean': return (
-        <CheckboxInput
-          {...commonProps}
-        />
-      )
-      case 'array':
-        if(this.props.fieldName === 'text-font') {
-          return <FontInput
+        )
+        case 'enum':
+          const options = Object.keys(this.props.fieldSpec.values).map(v => [v, capitalize(v)])
+
+          if(options.length <= 3 && optionsLabelLength(options) <= 20) {
+            return <MultiButtonInput
+              {...commonProps}
+              options={options}
+            />
+          } else {
+            return <SelectInput
+              {...commonProps}
+              options={options}
+            />
+          }
+        case 'formatted':
+        case 'string':
+          if(iconProperties.indexOf(this.props.fieldName) >= 0) {
+            return <IconInput
+              {...commonProps}
+              icons={this.props.fieldSpec.values}
+            />
+          } else {
+            return <StringInput
+              {...commonProps}
+            />
+          }
+        case 'color': return (
+          <ColorField
             {...commonProps}
           />
-        } else {
-          return <ArrayInput
+        )
+        case 'boolean': return (
+          <CheckboxInput
             {...commonProps}
-            type={this.props.fieldSpec.value}
-            length={this.props.fieldSpec.length}
           />
-        }
-      default: return null
+        )
+        case 'array':
+          if(this.props.fieldName === 'text-font') {
+            return <FontInput
+              {...commonProps}
+              fonts={this.props.fieldSpec.values}
+            />
+          } else {
+            if (this.props.fieldSpec.length) {
+              return <ArrayInput
+                {...commonProps}
+                type={this.props.fieldSpec.value}
+                length={this.props.fieldSpec.length}
+              />
+            } else {
+              return <DynamicArrayInput
+                {...commonProps}
+                type={this.props.fieldSpec.value}
+              />
+            }
+          }
+        default: return null
+      }
     }
+
+    return (
+      <div data-wd-key={"spec-field:"+this.props.fieldName}>
+      {childNodes.call(this)}
+      </div>
+    );
   }
 }

src/components/fields/ZoomSpecField.jsx

@@ -1,157 +0,0 @@
-import React from 'react'
-import Color from 'color'
-
-import Button from '../Button'
-import SpecField from './SpecField'
-import NumberInput from '../inputs/NumberInput'
-import DocLabel from './DocLabel'
-
-import AddIcon from 'react-icons/lib/md/add-circle-outline'
-import DeleteIcon from 'react-icons/lib/md/delete'
-
-import capitalize from 'lodash.capitalize'
-import input from '../../config/input.js'
-import colors from '../../config/colors.js'
-import { margins, fontSizes } from '../../config/scales.js'
-
-function isZoomField(value) {
-  return typeof value === 'object' && value.stops
-}
-
-/** Supports displaying spec field for zoom function objects
- * https://www.mapbox.com/mapbox-gl-style-spec/#types-function-zoom-property
- */
-export default class ZoomSpecField extends React.Component {
-  static propTypes = {
-      onChange: React.PropTypes.func.isRequired,
-      fieldName: React.PropTypes.string.isRequired,
-      fieldSpec: React.PropTypes.object.isRequired,
-
-      value: React.PropTypes.oneOfType([
-      React.PropTypes.object,
-      React.PropTypes.string,
-      React.PropTypes.number,
-      React.PropTypes.bool,
-    ]),
-  }
-
-  addStop() {
-    const stops = this.props.value.stops.slice(0)
-    const lastStop = stops[stops.length - 1]
-    stops.push([lastStop[0] + 1, lastStop[1]])
-
-    const changedValue = {
-      ...this.props.value,
-      stops: stops,
-    }
-
-    this.props.onChange(this.props.fieldName, changedValue)
-  }
-
-  deleteStop(stopIdx) {
-    const stops = this.props.value.stops.slice(0)
-    stops.splice(stopIdx, 1)
-
-    let changedValue = {
-      ...this.props.value,
-      stops: stops,
-    }
-
-    if(stops.length === 1) {
-      changedValue = stops[0][1]
-    }
-
-    this.props.onChange(this.props.fieldName, changedValue)
-  }
-
-  changeStop(changeIdx, zoomLevel, value) {
-    const stops = this.props.value.stops.slice(0)
-    stops[changeIdx] = [zoomLevel, value]
-    const changedValue = {
-      ...this.props.value,
-      stops: stops,
-    }
-    this.props.onChange(this.props.fieldName, changedValue)
-  }
-
-  render() {
-    let label = <DocLabel
-      label={labelFromFieldName(this.props.fieldName)}
-      doc={this.props.fieldSpec.doc}
-      style={{
-        width: '50%',
-      }}
-    />
-
-    if(isZoomField(this.props.value)) {
-      const zoomFields = this.props.value.stops.map((stop, idx) => {
-        label = <DocLabel
-          doc={this.props.fieldSpec.doc}
-          style={{ width: '42.5%'}}
-          label={idx > 0 ? "" : labelFromFieldName(this.props.fieldName)}
-        />
-
-        if(idx === 1) {
-          label = <label style={{...input.label, width: '42.5%'}}>
-            <Button
-              style={{fontSize: fontSizes[5]}}
-              onClick={this.addStop.bind(this)}
-            >
-              Add stop
-            </Button>
-          </label>
-        }
-
-        const zoomLevel = stop[0]
-        const value = stop[1]
-
-        return <div key={zoomLevel} style={{
-            ...input.property,
-            marginLeft: 0,
-            marginRight: 0
-          }}>
-          {label}
-          <Button
-            style={{backgroundColor: null}}
-            onClick={this.deleteStop.bind(this, idx)}
-          >
-            <DeleteIcon />
-          </Button>
-          <NumberInput
-            style={{
-              width: '7%',
-            }}
-            value={zoomLevel}
-            onChange={changedStop => this.changeStop(idx, changedStop, value)}
-            min={0}
-            max={22}
-          />
-          <SpecField
-            fieldName={this.props.fieldName}
-            fieldSpec={this.props.fieldSpec}
-            value={value}
-            onChange={(_, newValue) => this.changeStop(idx, zoomLevel, newValue)}
-            style={{
-              width: '42%',
-              marginLeft: margins[0],
-            }}
-          />
-        </div>
-      })
-
-      return <div style={input.property}>
-        {zoomFields}
-      </div>
-    } else {
-      return <div style={input.property}>
-        {label}
-        <SpecField {...this.props} style={{ width: '50%' } }/>
-      </div>
-    }
-  }
-}
-
-function labelFromFieldName(fieldName) {
-  let label = fieldName.split('-').slice(1).join(' ')
-  return capitalize(label)
-}

src/components/fields/_DataProperty.jsx

@@ -0,0 +1,182 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import Button from '../Button'
+import SpecField from './SpecField'
+import NumberInput from '../inputs/NumberInput'
+import StringInput from '../inputs/StringInput'
+import SelectInput from '../inputs/SelectInput'
+import DocLabel from './DocLabel'
+import InputBlock from '../inputs/InputBlock'
+
+import labelFromFieldName from './_labelFromFieldName'
+import DeleteStopButton from './_DeleteStopButton'
+
+
+export default class DataProperty extends React.Component {
+  static propTypes = {
+    onChange: PropTypes.func,
+    onDeleteStop: PropTypes.func,
+    onAddStop: PropTypes.func,
+    fieldName: PropTypes.string,
+    fieldSpec: PropTypes.object,
+    value: PropTypes.oneOfType([
+      PropTypes.object,
+      PropTypes.string,
+      PropTypes.number,
+      PropTypes.bool,
+      PropTypes.array
+    ]),
+  }
+
+  getFieldFunctionType(fieldSpec) {
+    if (fieldSpec.expression.interpolated) {
+      return "exponential"
+    }
+    if (fieldSpec.type === "number") {
+      return "interval"
+    }
+    return "categorical"
+  }
+
+  getDataFunctionTypes(fieldSpec) {
+    if (fieldSpec.expression.interpolated) {
+      return ["categorical", "interval", "exponential"]
+    }
+    else {
+      return ["categorical", "interval"]
+    }
+  }
+
+
+  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 changedValue = {
+      ...this.props.value,
+      stops: stops,
+    }
+    this.props.onChange(this.props.fieldName, changedValue)
+  }
+
+  changeDataProperty(propName, propVal) {
+    if (propVal) {
+      this.props.value[propName] = propVal
+    }
+    else {
+      delete this.props.value[propName]
+    }
+    this.props.onChange(this.props.fieldName, this.props.value)
+  }
+
+  render() {
+    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) => {
+      const zoomLevel = typeof stop[0] === 'object' ? stop[0].zoom : undefined;
+      const dataLevel = typeof stop[0] === 'object' ? stop[0].value : stop[0];
+      const value = stop[1]
+      const deleteStopBtn = <DeleteStopButton onClick={this.props.onDeleteStop.bind(this, idx)} />
+
+      const dataProps = {
+        label: "Data value",
+        value: dataLevel,
+        onChange: newData => this.changeStop(idx, { zoom: zoomLevel, value: newData }, value)
+      }
+
+      let dataInput;
+      if(this.props.value.type === "categorical") {
+        dataInput = <StringInput {...dataProps} />
+      }
+      else {
+        dataInput = <NumberInput {...dataProps} />
+      }
+
+      let zoomInput = null;
+      if(zoomLevel !== undefined) {
+        zoomInput = <div className="maputnik-data-spec-property-stop-edit">
+          <NumberInput
+            value={zoomLevel}
+            onChange={newZoom => this.changeStop(idx, {zoom: newZoom, value: dataLevel}, value)}
+            min={0}
+            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
+            label="Type"
+            doc={"Select a type of data scale (default is 'categorical')."}
+          />
+          <div className="maputnik-data-spec-property-input">
+            <SelectInput
+              value={this.props.value.type}
+              onChange={propVal => this.changeDataProperty("type", propVal)}
+              options={this.getDataFunctionTypes(this.props.fieldSpec)}
+            />
+          </div>
+        </div>
+        <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}
+              onChange={(_, propVal) => this.changeDataProperty("default", propVal)}
+            />
+          </div>
+        </div>
+      </InputBlock>
+    </div>
+      {dataFields}
+      <Button
+        className="maputnik-add-stop"
+        onClick={this.props.onAddStop.bind(this)}
+      >
+        Add stop
+      </Button>
+    </div>
+  }
+}

src/components/fields/_DeleteStopButton.jsx

@@ -0,0 +1,25 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import DocLabel from './DocLabel'
+import Button from '../Button'
+import {MdDelete} from 'react-icons/md'
+
+
+export default class DeleteStopButton extends React.Component {
+  static propTypes = {
+    onClick: PropTypes.func,
+  }
+
+  render() {
+    return <Button
+      className="maputnik-delete-stop"
+      onClick={this.props.onClick}
+    >
+      <DocLabel
+        label={<MdDelete />}
+        doc={"Remove zoom level stop."}
+      />
+    </Button>
+  }
+}

src/components/fields/_FunctionButtons.jsx

@@ -0,0 +1,48 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import DocLabel from './DocLabel'
+import Button from '../Button'
+import {MdFunctions, MdInsertChart} from 'react-icons/md'
+
+
+export default class FunctionButtons extends React.Component {
+  static propTypes = {
+    fieldSpec: PropTypes.object,
+    onZoomClick: PropTypes.func,
+    onDataClick: PropTypes.func,
+  }
+
+  render() {
+    let makeZoomButton, makeDataButton
+    if (this.props.fieldSpec.expression.parameters.includes('zoom')) {
+      makeZoomButton = <Button
+        className="maputnik-make-zoom-function"
+        onClick={this.props.onZoomClick}
+      >
+        <DocLabel
+          label={<MdFunctions />}
+          cursorTargetStyle={{ cursor: 'pointer' }}
+          doc={"Turn property into a zoom function to enable a map feature to change with map's zoom level."}
+        />
+      </Button>
+
+      if (this.props.fieldSpec['property-type'] === 'data-driven') {
+        makeDataButton = <Button
+          className="maputnik-make-data-function"
+          onClick={this.props.onDataClick}
+        >
+          <DocLabel
+            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>
+    }
+    else {
+      return null
+    }
+  }
+}

src/components/fields/_SpecProperty.jsx

@@ -0,0 +1,34 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import SpecField from './SpecField'
+import FunctionButtons from './_FunctionButtons'
+import InputBlock from '../inputs/InputBlock'
+
+import labelFromFieldName from './_labelFromFieldName'
+
+
+export default class SpecProperty extends React.Component {
+  static propTypes = {
+    onZoomClick: PropTypes.func.isRequired,
+    onDataClick: PropTypes.func.isRequired,
+    fieldName: PropTypes.string,
+    fieldSpec: PropTypes.object
+  }
+
+  render() {
+    const functionBtn = <FunctionButtons
+      fieldSpec={this.props.fieldSpec}
+      onZoomClick={this.props.onZoomClick}
+      onDataClick={this.props.onDataClick} 
+    />
+
+    return <InputBlock
+      doc={this.props.fieldSpec.doc}
+      label={labelFromFieldName(this.props.fieldName)}
+      action={functionBtn}
+    >
+      <SpecField {...this.props} />
+    </InputBlock>
+  }
+}

src/components/fields/_ZoomProperty.jsx

@@ -0,0 +1,163 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import Button from '../Button'
+import SpecField from './SpecField'
+import NumberInput from '../inputs/NumberInput'
+import InputBlock from '../inputs/InputBlock'
+
+import DeleteStopButton from './_DeleteStopButton'
+import labelFromFieldName from './_labelFromFieldName'
+
+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,
+    fieldName: PropTypes.string,
+    fieldSpec: PropTypes.object,
+    value: PropTypes.oneOfType([
+      PropTypes.object,
+      PropTypes.string,
+      PropTypes.number,
+      PropTypes.bool,
+      PropTypes.array
+    ]),
+  }
+
+  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;
+  }
+
+  // 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], b.data[0]));
+
+    // 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);
+  }
+
+  changeZoomStop(changeIdx, stopData, value) {
+    const stops = this.props.value.stops.slice(0);
+    stops[changeIdx] = [stopData, value];
+
+    const orderedStops = this.orderStopsByZoom(stops);
+
+    const changedValue = {
+      ...this.props.value,
+      stops: orderedStops
+    }
+    this.props.onChange(this.props.fieldName, changedValue)
+  }
+
+  render() {
+    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)} />
+
+      return <InputBlock
+        key={key}
+        doc={this.props.fieldSpec.doc}
+        label={labelFromFieldName(this.props.fieldName)}
+        action={deleteStopBtn}
+      >
+        <div>
+          <div className="maputnik-zoom-spec-property-stop-edit">
+            <NumberInput
+              value={zoomLevel}
+              onChange={changedStop => this.changeZoomStop(idx, changedStop, value)}
+              min={0}
+              max={22}
+            />
+          </div>
+          <div className="maputnik-zoom-spec-property-stop-value">
+            <SpecField
+              fieldName={this.props.fieldName}
+              fieldSpec={this.props.fieldSpec}
+              value={value}
+              onChange={(_, newValue) => this.changeZoomStop(idx, zoomLevel, newValue)}
+            />
+          </div>
+        </div>
+      </InputBlock>
+    });
+
+    return <div className="maputnik-zoom-spec-property">
+      {zoomFields}
+      <Button
+        className="maputnik-add-stop"
+        onClick={this.props.onAddStop.bind(this)}
+      >
+        Add stop
+      </Button>
+    </div>
+  }
+}

src/components/fields/_labelFromFieldName.js

@@ -0,0 +1,6 @@
+import capitalize from 'lodash.capitalize'
+
+export default function labelFromFieldName(fieldName) {
+  let label = fieldName.split('-').slice(1).join(' ')
+  return capitalize(label)
+}

src/components/filter/FilterEditor.jsx

@@ -1,19 +1,13 @@
 import React from 'react'
-import GlSpec from 'mapbox-gl-style-spec/reference/latest.min.js'
-
-import input from '../../config/input.js'
-import colors from '../../config/colors.js'
-import { margins } from '../../config/scales.js'
+import PropTypes from 'prop-types'
+import { combiningFilterOps } from '../../libs/filterops.js'
 
+import {latest} from '@mapbox/mapbox-gl-style-spec'
+import DocLabel from '../fields/DocLabel'
 import SelectInput from '../inputs/SelectInput'
-import StringInput from '../inputs/StringInput'
-import AutocompleteInput from '../inputs/AutocompleteInput'
-
-const combiningFilterOps = ['all', 'any', 'none']
-const setFilterOps = ['in', '!in']
-const otherFilterOps = Object
-  .keys(GlSpec.filter_operator.values)
-  .filter(op => combiningFilterOps.indexOf(op) < 0)
+import SingleFilterEditor from './SingleFilterEditor'
+import FilterEditorBlock from './FilterEditorBlock'
+import Button from '../Button'
 
 function hasCombiningFilter(filter) {
   return combiningFilterOps.indexOf(filter[0]) >= 0
@@ -27,131 +21,24 @@ function hasNestedCombiningFilter(filter) {
   return false
 }
 
-class CombiningOperatorSelect extends React.Component {
-  static propTypes = {
-    value: React.PropTypes.string.isRequired,
-    onChange: React.PropTypes.func.isRequired,
-  }
-
-  render() {
-    const options = combiningFilterOps.map(op => {
-      return <option key={op} value={op}>{op}</option>
-    })
-
-    return <div
-      style={{
-          marginTop: margins[1],
-          marginBottom: margins[1],
-        }}
-      >
-      <select
-        style={{
-          ...input.select,
-          width: '20.5%',
-        }}
-        value={this.props.value}
-        onChange={e => this.props.onChange(e.target.value)}
-      >
-        {options}
-      </select>
-      <label style={{
-        ...input.label,
-        width: '60%',
-        marginLeft: margins[0],
-      }}>
-        of the filters matches
-      </label>
-    </div>
-  }
-}
-
-class OperatorSelect extends React.Component {
-  static propTypes = {
-    value: React.PropTypes.string.isRequired,
-    onChange: React.PropTypes.func.isRequired,
-  }
-
-  render() {
-    return <SelectInput
-      style={{
-        width: '15%',
-        margin: margins[0]
-      }}
-      value={this.props.value}
-      onChange={this.props.onChange}
-      options={otherFilterOps.map(op => [op, op])}
-    />
-  }
-}
-
-class SingleFilterEditor extends React.Component {
-  static propTypes = {
-    filter: React.PropTypes.array.isRequired,
-    onChange: React.PropTypes.func.isRequired,
-    properties: React.PropTypes.object,
-  }
-
-  static defaultProps = {
-    properties: {},
-  }
-
-  onFilterPartChanged(filterOp, propertyName, filterArgs) {
-    const newFilter = [filterOp, propertyName, ...filterArgs]
-    this.props.onChange(newFilter)
-  }
-
-  render() {
-    const f = this.props.filter
-    const filterOp = f[0]
-    const propertyName = f[1]
-    const filterArgs = f.slice(2)
-
-    return <div style={{
-      marginTop: margins[1],
-      marginBottom: margins[1],
-    }}>
-      <AutocompleteInput
-        wrapperStyle={{
-          width: '31%',
-          marginRight: margins[0]
-        }}
-        value={propertyName}
-        options={Object.keys(this.props.properties).map(propName => [propName, propName])}
-        onChange={newPropertyName => this.onFilterPartChanged(filterOp, newPropertyName, filterArgs)}
-      />
-      <OperatorSelect
-        value={filterOp}
-        onChange={newFilterOp => this.onFilterPartChanged(newFilterOp, propertyName, filterArgs)}
-      />
-      <StringInput
-        style={{
-          width: '50%',
-          marginLeft: margins[0]
-        }}
-        value={filterArgs.join(',')}
-        onChange={ v=> this.onFilterPartChanged(filterOp, propertyName, v.split(','))}
-      />
-    </div>
-  }
-
-}
-
 export default class CombiningFilterEditor extends React.Component {
   static propTypes = {
     /** Properties of the vector layer and the available fields */
-    properties: React.PropTypes.object.isRequired,
-    filter: React.PropTypes.array.isRequired,
-    onChange: React.PropTypes.func.isRequired,
+    properties: PropTypes.object,
+    filter: PropTypes.array,
+    onChange: PropTypes.func.isRequired,
   }
 
   // Convert filter to combining filter
   combiningFilter() {
-    let combiningOp = this.props.filter[0]
-    let filters = this.props.filter.slice(1)
+    let filter = this.props.filter || ['all']
+
+    let combiningOp = filter[0]
+    let filters = filter.slice(1)
 
     if(combiningFilterOps.indexOf(combiningOp) < 0) {
       combiningOp = 'all'
-      filters = [this.props.filter.slice(0)]
+      filters = [filter.slice(0)]
     }
 
     return [combiningOp, ...filters]
@@ -163,31 +50,62 @@ export default class CombiningFilterEditor extends React.Component {
     this.props.onChange(newFilter)
   }
 
+  deleteFilterItem(filterIdx) {
+    const newFilter = this.combiningFilter().slice(0)
+    console.log('Delete', filterIdx, newFilter)
+    newFilter.splice(filterIdx + 1, 1)
+    this.props.onChange(newFilter)
+  }
+
+  addFilterItem = () => {
+    const newFilterItem = this.combiningFilter().slice(0)
+    newFilterItem.push(['==', 'name', ''])
+    this.props.onChange(newFilterItem)
+  }
+
   render() {
     const filter = this.combiningFilter()
     let combiningOp = filter[0]
     let filters = filter.slice(1)
 
-    const filterEditors = filters.map((f, idx) => {
-      return <SingleFilterEditor
-        key={idx}
-        properties={this.props.properties}
-        filter={f}
-        onChange={this.onFilterPartChanged.bind(this, idx + 1)}
-      />
+    const editorBlocks = filters.map((f, idx) => {
+      return <FilterEditorBlock key={idx} onDelete={this.deleteFilterItem.bind(this, idx)}>
+        <SingleFilterEditor
+          properties={this.props.properties}
+          filter={f}
+          onChange={this.onFilterPartChanged.bind(this, idx + 1)}
+        />
+      </FilterEditorBlock>
     })
 
     //TODO: Implement support for nested filter
     if(hasNestedCombiningFilter(filter)) {
-      return null
+      return <div className="maputnik-filter-editor-unsupported">
+        Nested filters are not supported.
+      </div>
     }
 
-    return <div>
-      <CombiningOperatorSelect
-        value={combiningOp}
-        onChange={this.onFilterPartChanged.bind(this, 0)}
-      />
-      {filterEditors}
+    return <div className="maputnik-filter-editor">
+      <div className="maputnik-filter-editor-compound-select" data-wd-key="layer-filter">
+        <DocLabel
+          label={"Compound Filter"}
+          doc={latest.layer.filter.doc + " Combine multiple filters together by using a compound filter."}
+        />
+        <SelectInput
+          value={combiningOp}
+          onChange={this.onFilterPartChanged.bind(this, 0)}
+          options={[["all", "every filter matches"], ["none", "no filter matches"], ["any", "any filter matches"]]}
+        />
+      </div>
+      {editorBlocks}
+      <div className="maputnik-filter-editor-add-wrapper">
+        <Button
+          data-wd-key="layer-filter-button"
+          className="maputnik-add-filter"
+          onClick={this.addFilterItem}>
+          Add filter
+        </Button>
+      </div>
     </div>
   }
 }

src/components/filter/FilterEditorBlock.jsx

@@ -0,0 +1,29 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import Button from '../Button'
+import {MdDelete} from 'react-icons/md'
+
+class FilterEditorBlock extends React.Component {
+  static propTypes = {
+    onDelete: PropTypes.func.isRequired,
+    children: PropTypes.element.isRequired,
+  }
+
+  render() {
+    return <div className="maputnik-filter-editor-block">
+      <div className="maputnik-filter-editor-block-action">
+        <Button
+          className="maputnik-delete-filter"
+          onClick={this.props.onDelete}
+        >
+          <MdDelete />
+        </Button>
+      </div>
+      <div className="maputnik-filter-editor-block-content">
+        {this.props.children}
+      </div>
+    </div>
+  }
+}
+
+export default FilterEditorBlock

src/components/filter/SingleFilterEditor.jsx

@@ -0,0 +1,93 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import { otherFilterOps } from '../../libs/filterops.js'
+import StringInput from '../inputs/StringInput'
+import AutocompleteInput from '../inputs/AutocompleteInput'
+import SelectInput from '../inputs/SelectInput'
+
+function tryParseInt(v) {
+  if (v === '') return v
+  if (isNaN(v)) return v
+  return parseFloat(v)
+}
+
+function tryParseBool(v) {
+  const isString = (typeof(v) === "string");
+  if(!isString) {
+    return v;
+  }
+
+  if(v.match(/^\s*true\s*$/)) {
+    return true;
+  }
+  else if(v.match(/^\s*false\s*$/)) {
+    return false;
+  }
+  else {
+    return v;
+  }
+}
+
+function parseFilter(v) {
+  v = tryParseInt(v);
+  v = tryParseBool(v);
+  return v;
+}
+
+class SingleFilterEditor extends React.Component {
+  static propTypes = {
+    filter: PropTypes.array.isRequired,
+    onChange: PropTypes.func.isRequired,
+    properties: PropTypes.object,
+  }
+
+  static defaultProps = {
+    properties: {},
+  }
+
+  onFilterPartChanged(filterOp, propertyName, filterArgs) {
+    let newFilter = [filterOp, propertyName, ...filterArgs.map(parseFilter)]
+    if(filterOp === 'has' || filterOp === '!has') {
+      newFilter = [filterOp, propertyName]
+    } else if(filterArgs.length === 0) {
+      newFilter = [filterOp, propertyName, '']
+    }
+    this.props.onChange(newFilter)
+  }
+
+  render() {
+    const f = this.props.filter
+    const filterOp = f[0]
+    const propertyName = f[1]
+    const filterArgs = f.slice(2)
+
+    return <div className="maputnik-filter-editor-single">
+      <div className="maputnik-filter-editor-property">
+        <AutocompleteInput
+          value={propertyName}
+          options={Object.keys(this.props.properties).map(propName => [propName, propName])}
+          onChange={newPropertyName => this.onFilterPartChanged(filterOp, newPropertyName, filterArgs)}
+        />
+      </div>
+      <div className="maputnik-filter-editor-operator">
+        <SelectInput
+          value={filterOp}
+          onChange={newFilterOp => this.onFilterPartChanged(newFilterOp, propertyName, filterArgs)}
+          options={otherFilterOps}
+        />
+      </div>
+      {filterArgs.length > 0 &&
+      <div className="maputnik-filter-editor-args">
+        <StringInput
+          value={filterArgs.join(',')}
+          onChange={ v=> this.onFilterPartChanged(filterOp, propertyName, v.split(','))}
+        />
+      </div>
+      }
+    </div>
+  }
+
+}
+
+export default SingleFilterEditor

src/components/icons/LayerIcon.jsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 
 import LineIcon from './LineIcon.jsx'
 import FillIcon from './FillIcon.jsx'
@@ -8,20 +9,22 @@ import CircleIcon from './CircleIcon.jsx'
 
 class LayerIcon extends React.Component {
   static propTypes = {
-    type: React.PropTypes.string.isRequired,
-    style: React.PropTypes.object,
+    type: PropTypes.string.isRequired,
+    style: PropTypes.object,
   }
 
   render() {
     const iconProps = { style: this.props.style }
     switch(this.props.type) {
       case 'fill-extrusion': return <BackgroundIcon {...iconProps} />
+      case 'raster': return <FillIcon {...iconProps} />
+      case 'hillshade': return <FillIcon {...iconProps} />
+      case 'heatmap': return <FillIcon {...iconProps} />
       case 'fill': return <FillIcon {...iconProps} />
       case 'background': return <BackgroundIcon {...iconProps} />
       case 'line': return <LineIcon {...iconProps} />
       case 'symbol': return <SymbolIcon {...iconProps} />
       case 'circle': return <CircleIcon {...iconProps} />
-      default: return null
     }
   }
 }

src/components/icons/LineIcon.jsx

@@ -6,7 +6,7 @@ export default class FillIcon extends React.Component {
   render() {
     return (
       <IconBase viewBox="0 0 20 20" {...this.props}>
-        <path id="path8" d="M 12.34,1.29 C 12.5114,1.1076 12.7497,1.0029 13,1 13.5523,1 14,1.4477 14,2 14.0047,2.2478 13.907,2.4866 13.73,2.66 9.785626,6.5516986 6.6148407,9.7551593 2.65,13.72 2.4793,13.8963 2.2453,13.9971 2,14 1.4477,14 1,13.5523 1,13 0.9953,12.7522 1.093,12.5134 1.27,12.34 4.9761967,8.7018093 9.0356422,4.5930579 12.34,1.29 Z" transform="translate(2,2)" />
+        <path d="M 12.34,1.29 C 12.5114,1.1076 12.7497,1.0029 13,1 13.5523,1 14,1.4477 14,2 14.0047,2.2478 13.907,2.4866 13.73,2.66 9.785626,6.5516986 6.6148407,9.7551593 2.65,13.72 2.4793,13.8963 2.2453,13.9971 2,14 1.4477,14 1,13.5523 1,13 0.9953,12.7522 1.093,12.5134 1.27,12.34 4.9761967,8.7018093 9.0356422,4.5930579 12.34,1.29 Z" transform="translate(2,2)" />
       </IconBase>
     )
   }

src/components/icons/SymbolIcon.jsx

@@ -6,8 +6,8 @@ export default class SymbolIcon extends React.Component {
   render() {
     return (
       <IconBase viewBox="0 0 20 20" {...this.props}>
-        <g id="svg_1" transform="matrix(1.2718518,0,0,1.2601269,16.559526,-7.4065264)">
-          <path id="svg_2" d="m -9.7959773,11.060163 c -0.3734787,-0.724437 -0.3580577,-1.2147051 -0.00547,-1.8767873 l 8.6034029,-0.019416 c 0.39670292,0.6865644 0.38365934,1.4750693 -0.011097,1.8864953 l -3.1359613,-0.0033 -0.013695,7.1305 c -0.4055357,0.397083 -1.3146432,0.397083 -1.7769191,-0.02274 l 0.030226,-7.104422 z" />
+        <g transform="matrix(1.2718518,0,0,1.2601269,16.559526,-7.4065264)">
+          <path d="m -9.7959773,11.060163 c -0.3734787,-0.724437 -0.3580577,-1.2147051 -0.00547,-1.8767873 l 8.6034029,-0.019416 c 0.39670292,0.6865644 0.38365934,1.4750693 -0.011097,1.8864953 l -3.1359613,-0.0033 -0.013695,7.1305 c -0.4055357,0.397083 -1.3146432,0.397083 -1.7769191,-0.02274 l 0.030226,-7.104422 z" />
         </g>
       </IconBase>
     )

src/components/inputs/ArrayInput.jsx

@@ -1,18 +1,15 @@
 import React from 'react'
-import input from '../../config/input.js'
+import PropTypes from 'prop-types'
 import StringInput from './StringInput'
 import NumberInput from './NumberInput'
 
-import { margins } from '../../config/scales.js'
-
 class ArrayInput extends React.Component {
   static propTypes = {
-    value: React.PropTypes.array,
-    type: React.PropTypes.string,
-    length: React.PropTypes.number,
-    default: React.PropTypes.array,
-    style: React.PropTypes.object,
-    onChange: React.PropTypes.func,
+    value: PropTypes.array,
+    type: PropTypes.string,
+    length: PropTypes.number,
+    default: PropTypes.array,
+    onChange: PropTypes.func,
   }
 
   changeValue(idx, newValue) {
@@ -27,29 +24,23 @@ class ArrayInput extends React.Component {
   }
 
   render() {
-    const commonStyle = {
-      width: '49%',
-      marginRight: '1%',
-    }
     const inputs = this.values.map((v, i) => {
       if(this.props.type === 'number') {
         return <NumberInput
           key={i}
           value={v}
-          style={commonStyle}
           onChange={this.changeValue.bind(this, i)}
         />
       } else {
         return <StringInput
           key={i}
           value={v}
-          style={commonStyle}
           onChange={this.changeValue.bind(this, i)}
         />
       }
     })
 
-    return <div style={{display: 'inline-block', width: '50%'}}>
+    return <div className="maputnik-array">
       {inputs}
     </div>
   }

src/components/inputs/AutocompleteInput.jsx

@@ -1,16 +1,21 @@
 import React from 'react'
+import PropTypes from 'prop-types'
+import classnames from 'classnames'
 import Autocomplete from 'react-autocomplete'
-import input from '../../config/input'
-import colors from '../../config/colors'
-import { margins, fontSizes } from '../../config/scales'
+
+
+const MAX_HEIGHT = 140;
 
 class AutocompleteInput extends React.Component {
   static propTypes = {
-    value: React.PropTypes.string,
-    options: React.PropTypes.array,
-    wrapperStyle: React.PropTypes.object,
-    inputStyle: React.PropTypes.object,
-    onChange: React.PropTypes.func,
+    value: PropTypes.string,
+    options: PropTypes.array,
+    onChange: PropTypes.func,
+    keepMenuWithinWindowBounds: PropTypes.bool
+  }
+
+  state = {
+    maxHeight: MAX_HEIGHT
   }
 
   static defaultProps = {
@@ -18,50 +23,75 @@ class AutocompleteInput extends React.Component {
     options: [],
   }
 
+  calcMaxHeight() {
+    if(this.props.keepMenuWithinWindowBounds) {
+      const maxHeight = window.innerHeight - this.autocompleteMenuEl.getBoundingClientRect().top;
+      const limitedMaxHeight = Math.min(maxHeight, MAX_HEIGHT);
+
+      if(limitedMaxHeight != this.state.maxHeight) {
+        this.setState({
+          maxHeight: limitedMaxHeight
+        })
+      }
+    }
+  }
+
+  componentDidMount() {
+    this.calcMaxHeight();
+  }
+
+  componentDidUpdate() {
+    this.calcMaxHeight();
+  }
+
+  onChange (v) {
+    this.props.onChange(v === "" ? undefined : v);
+  }
+
   render() {
-    return <Autocomplete
-      menuStyle={{
-        border: 'none',
-        padding: '2px 0',
-        position: 'fixed',
-        overflow: 'auto',
-        maxHeight: '50%',
-        background: colors.gray,
-        zIndex: 3,
+    return <div
+      ref={(el) => {
+        this.autocompleteMenuEl = el;
       }}
-      wrapperStyle={{
-        display: 'inline-block',
-        ...this.props.wrapperStyle
-      }}
-      inputProps={{
-        style: {
-          ...input.input,
-          width: '100%',
-          ...this.props.inputStyle,
-        }
-      }}
-      value={this.props.value}
-      items={this.props.options}
-      getItemValue={(item) => item[0]}
-      onSelect={v => this.props.onChange(v)}
-      onChange={(e, v) => this.props.onChange(v)}
-      renderItem={(item, isHighlighted) => (
-        <div
-          key={item[0]}
-          style={{
-            userSelect: 'none',
-            color: colors.lowgray,
-            cursor: 'default',
-            background: isHighlighted ? colors.midgray : colors.gray,
-            padding: margins[0],
-            fontSize: fontSizes[5],
-            zIndex: 3,
-          }}
-        >
-         {item[1]}
-        </div>
-      )}
-    />
+    >
+      <Autocomplete
+        menuStyle={{
+          position: "fixed",
+          overflow: "auto",
+          maxHeight: this.state.maxHeight,
+          zIndex: '998'
+        }}
+        wrapperProps={{
+          className: "maputnik-autocomplete",
+          style: null
+        }}
+        inputProps={{
+          className: "maputnik-string",
+          spellCheck: false
+        }}
+        value={this.props.value}
+        items={this.props.options}
+        getItemValue={(item) => item[0]}
+        onSelect={v => this.onChange(v)}
+        onChange={(e, v) => this.onChange(v)}
+        shouldItemRender={(item, value="") => {
+          if (typeof(value) === "string") {
+            return item[0].toLowerCase().indexOf(value.toLowerCase()) > -1
+          }
+        }}
+        renderItem={(item, isHighlighted) => (
+          <div
+            key={item[0]}
+            className={classnames({
+              "maputnik-autocomplete-menu-item": true,
+              "maputnik-autocomplete-menu-item-selected": isHighlighted,
+            })}
+          >
+           {item[1]}
+          </div>
+        )}
+      />
+    </div>
   }
 }
 

src/components/inputs/CheckboxInput.jsx

@@ -1,70 +1,30 @@
 import React from 'react'
-import input from '../../config/input.js'
-import colors from '../../config/colors'
-import { margins } from '../../config/scales'
+import PropTypes from 'prop-types'
 
 class CheckboxInput extends React.Component {
   static propTypes = {
-    value: React.PropTypes.string,
-    style: React.PropTypes.object,
-    onChange: React.PropTypes.func,
+    value: PropTypes.bool.isRequired,
+    style: PropTypes.object,
+    onChange: PropTypes.func,
   }
 
   render() {
-    const styles = {
-			root: {
-        ...input.base,
-        padding: 0,
-				position: 'relative',
-        textAlign: 'center ',
-				cursor: 'pointer'
-			},
-			input: {
-				position: 'absolute',
-				zIndex: -1,
-				opacity: 0
-			},
-			box: {
-				display: 'inline-block',
-        textAlign: 'center ',
-        height: 15,
-        width: 15,
-				marginRight: margins[1],
-				marginBottom: null,
-				backgroundColor: colors.gray,
-				borderRadius: 2,
-				borderStyle: 'solid',
-				borderWidth: 2,
-				borderColor: colors.gray,
-				transition: 'background-color .1s ease-out'
-			},
-			icon: {
-				display: this.props.value ? null : 'none',
-				width: '75%',
-				height: '75%',
-				marginTop: 1,
-				fill: colors.lowgray
-			}
-    }
-
-		return <label style={styles.root}>
+    return <label className="maputnik-checkbox-wrapper">
       <input
-				type="checkbox"
-				style={{
-          ...styles.input,
-					...this.props.style,
-				}}
-				onChange={e => {this.props.onChange(!this.props.value)}}
-				checked={this.props.value}
-			/>
-      <div style={styles.box}>
-        <svg
-          viewBox='0 0 32 32'
-          style={styles.icon}>
+        className="maputnik-checkbox"
+        type="checkbox"
+        style={this.props.style}
+        onChange={e => this.props.onChange(!this.props.value)}
+        checked={this.props.value}
+      />
+      <div className="maputnik-checkbox-box">
+        <svg style={{
+            display: this.props.value ? 'inline' : 'none'
+          }} className="maputnik-checkbox-icon" viewBox='0 0 32 32'>
           <path d='M1 14 L5 10 L13 18 L27 4 L31 8 L13 26 z' />
         </svg>
-		  </div>
-		</label>
+      </div>
+    </label>
   }
 }
 

src/components/inputs/DynamicArrayInput.jsx

@@ -0,0 +1,105 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import StringInput from './StringInput'
+import NumberInput from './NumberInput'
+import Button from '../Button'
+import {MdDelete} from 'react-icons/md'
+import DocLabel from '../fields/DocLabel'
+
+
+class DynamicArrayInput extends React.Component {
+  static propTypes = {
+    value: PropTypes.array,
+    type: PropTypes.string,
+    default: PropTypes.array,
+    onChange: PropTypes.func,
+    style: PropTypes.object,
+  }
+
+  changeValue(idx, newValue) {
+    console.log(idx, newValue)
+    const values = this.values.slice(0)
+    values[idx] = newValue
+    this.props.onChange(values)
+  }
+
+  get values() {
+    return this.props.value || this.props.default || []
+  }
+
+  addValue = () => {
+    const values = this.values.slice(0)
+    if (this.props.type === 'number') {
+      values.push(0)
+    } else {
+      values.push("")
+    }
+
+    this.props.onChange(values)
+  }
+
+  deleteValue(valueIdx) {
+    const values = this.values.slice(0)
+    values.splice(valueIdx, 1)
+
+    this.props.onChange(values)
+  }
+
+  render() {
+    const inputs = this.values.map((v, i) => {
+      const deleteValueBtn= <DeleteValueButton onClick={this.deleteValue.bind(this, i)} />
+      const input = this.props.type === 'number' 
+        ? <NumberInput
+          value={v}
+          onChange={this.changeValue.bind(this, i)}
+        />
+        : <StringInput
+          value={v}
+          onChange={this.changeValue.bind(this, i)}
+        />
+
+      return <div
+        style={this.props.style}
+        key={i}
+        className="maputnik-array-block"
+        >
+        <div className="maputnik-array-block-action">
+          {deleteValueBtn}
+        </div>
+        <div className="maputnik-array-block-content">
+          {input}
+        </div>
+      </div>
+    })
+
+    return <div className="maputnik-array">
+      {inputs}
+      <Button
+        className="maputnik-array-add-value"
+        onClick={this.addValue}
+      >
+        Add value
+      </Button>
+    </div>
+  }
+}
+
+class DeleteValueButton extends React.Component {
+  static propTypes = {
+    onClick: PropTypes.func,
+  }
+
+  render() {
+    return <Button
+      className="maputnik-delete-stop"
+      onClick={this.props.onClick}
+    >
+      <DocLabel
+        label={<MdDelete />}
+        doc={"Remove array entry."}
+      />
+    </Button>
+  }
+}
+
+export default DynamicArrayInput

src/components/inputs/FontInput.jsx

@@ -1,25 +1,40 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 import AutocompleteInput from './AutocompleteInput'
-import input from '../../config/input.js'
-
-//TODO: Query available font stack dynamically
-import fontStacks from '../../config/fontstacks.json'
 
 class FontInput extends React.Component {
   static propTypes = {
-    value: React.PropTypes.array.isRequired,
-    style: React.PropTypes.object,
-    onChange: React.PropTypes.func.isRequired,
+    value: PropTypes.array.isRequired,
+    default: PropTypes.array,
+    fonts: PropTypes.array,
+    style: PropTypes.object,
+    onChange: PropTypes.func.isRequired,
+  }
+
+  static defaultProps = {
+    fonts: []
   }
 
   get values() {
-   return this.props.value || this.props.default.slice(1) || []
+    const out = this.props.value || this.props.default.slice(1) || [""];
+
+    // Always put a "" in the last field to you can keep adding entries
+    if (out[out.length-1] !== ""){
+      return out.concat("");
+    }
+    else {
+      return out;
+    }
   }
 
   changeFont(idx, newValue) {
     const changedValues = this.values.slice(0)
     changedValues[idx] = newValue
-    this.props.onChange(changedValues)
+    const filteredValues = changedValues
+      .filter(v => v !== undefined)
+      .filter(v => v !== "")
+
+    this.props.onChange(filteredValues);
   }
 
   render() {
@@ -27,12 +42,12 @@ class FontInput extends React.Component {
       return <AutocompleteInput
         key={i}
         value={value}
-        options={fontStacks.map(f => [f, f])}
+        options={this.props.fonts.map(f => [f, f])}
         onChange={this.changeFont.bind(this, i)}
       />
     })
 
-    return <div style={{display: 'inline-block'}}>
+    return <div className="maputnik-font">
       {inputs}
     </div>
   }

src/components/inputs/IconInput.jsx

@@ -0,0 +1,28 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import AutocompleteInput from './AutocompleteInput'
+
+
+class IconInput extends React.Component {
+  static propTypes = {
+    value: PropTypes.string,
+    icons: PropTypes.array,
+    style: PropTypes.object,
+    onChange: PropTypes.func.isRequired,
+  }
+
+  static defaultProps = {
+    icons: []
+  }
+
+  render() {
+    return <AutocompleteInput
+      value={this.props.value}
+      options={this.props.icons.map(f => [f, f])}
+      onChange={this.props.onChange}
+      wrapperStyle={this.props.style}
+    />
+  }
+}
+
+export default IconInput

src/components/inputs/InputBlock.jsx

@@ -1,44 +1,57 @@
 import React from 'react'
-import input from '../../config/input'
-import { margins } from '../../config/scales'
+import PropTypes from 'prop-types'
+import classnames from 'classnames'
+import DocLabel from '../fields/DocLabel'
 
 /** Wrap a component with a label */
 class InputBlock extends React.Component {
   static propTypes = {
-    label: React.PropTypes.string.isRequired,
-    children: React.PropTypes.element.isRequired,
-    style: React.PropTypes.object,
+    "data-wd-key": PropTypes.string,
+    label: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.element,
+    ]).isRequired,
+    doc: PropTypes.string,
+    action: PropTypes.element,
+    children: PropTypes.node.isRequired,
+    style: PropTypes.object,
+    onChange: PropTypes.func,
   }
 
   onChange(e) {
     const value = e.target.value
-    return this.props.onChange(value === "" ? null: value)
-  }
-
-  renderChildren() {
-    return React.Children.map(this.props.children, child => {
-      return React.cloneElement(child, {
-        style: {
-          ...child.props.style,
-          width: '50%',
-        }
-      })
-    })
+    return this.props.onChange(value === "" ? undefined : value)
   }
 
   render() {
-    return <div style={{
-      ...input.property,
-      ...this.props.style,
-    }}>
-      <label
-        style={{
-          ...input.label,
-          width: '50%',
-      }}>
+    return <div style={this.props.style}
+      data-wd-key={this.props["data-wd-key"]}
+      className={classnames({
+        "maputnik-input-block": true,
+        "maputnik-action-block": this.props.action
+      })}
+      >
+      {this.props.doc &&
+      <div className="maputnik-input-block-label">
+        <DocLabel
+          label={this.props.label}
+          doc={this.props.doc}
+        />
+      </div>
+      }
+      {!this.props.doc &&
+      <label className="maputnik-input-block-label">
         {this.props.label}
       </label>
-      {this.renderChildren()}
+      }
+      {this.props.action &&
+      <div className="maputnik-input-block-action">
+        {this.props.action}
+      </div>
+      }
+      <div className="maputnik-input-block-content">
+        {this.props.children}
+      </div>
     </div>
   }
 }

src/components/inputs/MultiButtonInput.jsx

@@ -1,35 +1,33 @@
-
 import React from 'react'
+import PropTypes from 'prop-types'
+import classnames from 'classnames'
 import Button from '../Button'
 
-import colors from '../../config/colors'
-import { margins } from '../../config/scales'
-import input from '../../config/input.js'
-
 class MultiButtonInput extends React.Component {
   static propTypes = {
-    value: React.PropTypes.string.isRequired,
-    options: React.PropTypes.array.isRequired,
-    style: React.PropTypes.object,
-    onChange: React.PropTypes.func.isRequired,
+    value: PropTypes.string.isRequired,
+    options: PropTypes.array.isRequired,
+    onChange: PropTypes.func.isRequired,
   }
 
   render() {
-    const selectedValue = this.props.value || this.props.options[0][0]
-    const buttons = this.props.options.map(([val, label])=> {
+    let options = this.props.options
+    if(options.length > 0 && !Array.isArray(options[0])) {
+      options = options.map(v => [v, v])
+    }
+
+    const selectedValue = this.props.value || options[0][0]
+    const buttons = options.map(([val, label])=> {
       return <Button
         key={val}
-        style={{
-          marginRight: margins[0],
-          backgroundColor: val === selectedValue ? colors.midgray : colors.gray,
-        }}
         onClick={e => this.props.onChange(val)}
+        className={classnames({"maputnik-button-selected": val === selectedValue})}
       >
         {label}
       </Button>
     })
 
-    return <div style={{display: 'inline-block'}}>
+    return <div className="maputnik-multibutton">
       {buttons}
     </div>
   }

src/components/inputs/NumberInput.jsx

@@ -1,36 +1,40 @@
 import React from 'react'
-import input from '../../config/input.js'
+import PropTypes from 'prop-types'
 
 class NumberInput extends React.Component {
   static propTypes = {
-    value: React.PropTypes.number,
-    style: React.PropTypes.object,
-    default: React.PropTypes.number,
-    min: React.PropTypes.number,
-    max: React.PropTypes.number,
-    onChange: React.PropTypes.func,
+    value: PropTypes.number,
+    default: PropTypes.number,
+    min: PropTypes.number,
+    max: PropTypes.number,
+    onChange: PropTypes.func,
   }
 
   constructor(props) {
     super(props)
     this.state = {
-      value: props.value
+      editing: false,
+      value: props.value,
     }
   }
 
-  componentWillReceiveProps(nextProps) {
-    this.setState({ value: nextProps.value })
+  static getDerivedStateFromProps(props, state) {
+    if (!state.editing) {
+      return {
+        value: props.value
+      };
+    }
   }
 
   changeValue(newValue) {
+    this.setState({editing: true});
     const value = parseFloat(newValue)
 
     const hasChanged = this.state.value !== value
     if(this.isValid(value) && hasChanged) {
       this.props.onChange(value)
-    } else {
-      this.setState({ value: newValue })
     }
+    this.setState({ value: newValue })
   }
 
   isValid(v) {
@@ -50,7 +54,8 @@ class NumberInput extends React.Component {
     return true
   }
 
-  resetValue() {
+  resetValue = () => {
+    this.setState({editing: false});
     // Reset explicitly to default value if value has been cleared
     if(this.state.value === "") {
       return this.changeValue(this.props.default)
@@ -68,14 +73,12 @@ class NumberInput extends React.Component {
 
   render() {
     return <input
-      style={{
-        ...input.input,
-        ...this.props.style
-      }}
+      spellCheck="false"
+      className="maputnik-number"
       placeholder={this.props.default}
       value={this.state.value}
       onChange={e => this.changeValue(e.target.value)}
-      onBlur={this.resetValue.bind(this)}
+      onBlur={this.resetValue}
     />
   }
 }

src/components/inputs/SelectInput.jsx

@@ -1,29 +1,30 @@
 import React from 'react'
-import input from '../../config/input.js'
+import PropTypes from 'prop-types'
 
 class SelectInput extends React.Component {
   static propTypes = {
-    value: React.PropTypes.string.isRequired,
-    options: React.PropTypes.array.isRequired,
-    style: React.PropTypes.object,
-    onChange: React.PropTypes.func.isRequired,
+    value: PropTypes.string.isRequired,
+    "data-wd-key": PropTypes.string,
+    options: PropTypes.array.isRequired,
+    style: PropTypes.object,
+    onChange: PropTypes.func.isRequired,
   }
 
 
   render() {
-    const options = this.props.options.map(([val, label])=> {
-      return <option key={val} value={val}>{label}</option>
-    })
+    let options = this.props.options
+    if(options.length > 0 && !Array.isArray(options[0])) {
+      options = options.map(v => [v, v])
+    }
 
     return <select
-      style={{
-        ...input.select,
-        ...this.props.style
-      }}
+      className="maputnik-select"
+      data-wd-key={this.props["data-wd-key"]}
+      style={this.props.style}
       value={this.props.value}
       onChange={e => this.props.onChange(e.target.value)}
     >
-      {options}
+      { options.map(([val, label]) => <option key={val} value={val}>{label}</option>) }
     </select>
   }
 }

src/components/inputs/StringInput.jsx

@@ -1,24 +1,70 @@
 import React from 'react'
-import input from '../../config/input.js'
+import PropTypes from 'prop-types'
 
 class StringInput extends React.Component {
   static propTypes = {
-    value: React.PropTypes.string,
-    style: React.PropTypes.object,
-    default: React.PropTypes.number,
-    onChange: React.PropTypes.func,
+    "data-wd-key": PropTypes.string,
+    value: PropTypes.string,
+    style: PropTypes.object,
+    default: PropTypes.string,
+    onChange: PropTypes.func,
+    multi: PropTypes.bool,
+  }
+
+  constructor(props) {
+    super(props)
+    this.state = {
+      editing: false,
+      value: props.value || ''
+    }
+  }
+
+  static getDerivedStateFromProps(props, state) {
+    if (!state.editing) {
+      return {
+        value: props.value
+      };
+    }
   }
 
   render() {
-    return <input
-      style={{
-        ...input.input,
-        ...this.props.style
-      }}
-      value={this.props.value}
-      placeholder={this.props.default}
-      onChange={e => this.props.onChange(e.target.value)}
-    />
+    let tag;
+    let classes;
+
+    if(!!this.props.multi) {
+      tag = "textarea"
+      classes = [
+        "maputnik-string",
+        "maputnik-string--multi"
+      ]
+    }
+    else {
+      tag = "input"
+      classes = [
+        "maputnik-string"
+      ]
+    }
+
+    return React.createElement(tag, {
+      "data-wd-key": this.props["data-wd-key"],
+      spellCheck: !(tag === "input"),
+      className: classes.join(" "),
+      style: this.props.style,
+      value: this.state.value,
+      placeholder: this.props.default,
+      onChange: e => {
+        this.setState({
+          editing: true,
+          value: e.target.value
+        })
+      },
+      onBlur: () => {
+        if(this.state.value!==this.props.value) {
+          this.setState({editing: false});
+          this.props.onChange(this.state.value);
+        }
+      }
+    });
   }
 }
 

src/components/layers/Collapse.jsx

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

src/components/layers/Collapser.jsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import {MdArrowDropDown, MdArrowDropUp} from 'react-icons/md'
+
+export default class Collapser extends React.Component {
+  static propTypes = {
+    isCollapsed: PropTypes.bool.isRequired,
+    style: PropTypes.object,
+  }
+
+  render() {
+    const iconStyle = {
+      width: 20,
+      height: 20,
+      ...this.props.style,
+    }
+    return this.props.isCollapsed ? <MdArrowDropUp style={iconStyle}/> : <MdArrowDropDown style={iconStyle} />
+  }
+}
+

src/components/layers/CommentBlock.jsx

@@ -0,0 +1,29 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import InputBlock from '../inputs/InputBlock'
+import StringInput from '../inputs/StringInput'
+
+class MetadataBlock extends React.Component {
+  static propTypes = {
+    value: PropTypes.string,
+    onChange: PropTypes.func.isRequired,
+  }
+
+  render() {
+    return <InputBlock
+      label={"Comments"}
+      doc={"Comments for the current layer. This is non-standard and not in the spec."}
+      data-wd-key="layer-comment"
+    >
+      <StringInput
+        multi={true}
+        value={this.props.value}
+        onChange={this.props.onChange}
+        default="Comment..."
+      />
+    </InputBlock>
+  }
+}
+
+export default MetadataBlock

src/components/layers/JSONEditor.jsx

@@ -1,22 +1,25 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 
-import CodeMirror from 'react-codemirror'
+import {Controlled as CodeMirror} from 'react-codemirror2'
 import InputBlock from '../inputs/InputBlock'
 import StringInput from '../inputs/StringInput'
-import SelectInput from '../inputs/SelectInput'
-
-import colors from '../../config/colors'
-import { margins } from '../../config/scales'
 
 import 'codemirror/mode/javascript/javascript'
+import 'codemirror/addon/lint/lint'
 import 'codemirror/lib/codemirror.css'
+import 'codemirror/addon/lint/lint.css'
 import '../../codemirror-maputnik.css'
+import jsonlint from 'jsonlint'
+
+// This is mainly because of this issue <https://github.com/zaach/jsonlint/issues/57> also the API has changed, see comment in file
+import '../../vendor/codemirror/addon/lint/json-lint'
 
 
 class JSONEditor extends React.Component {
   static propTypes = {
-    layer: React.PropTypes.object.isRequired,
-    onChange: React.PropTypes.func,
+    layer: PropTypes.object.isRequired,
+    onChange: PropTypes.func,
   }
 
   constructor(props) {
@@ -26,20 +29,11 @@ class JSONEditor extends React.Component {
     }
   }
 
-  componentWillReceiveProps(nextProps) {
-    this.setState({
-      code: JSON.stringify(nextProps.layer, null, 2)
-    })
-  }
-
-  shouldComponentUpdate(nextProps, nextState) {
-    try {
-      const parsedLayer = JSON.parse(this.state.code)
-      // If the structure is still the same do not update
-      // because it affects editing experience by reformatting all the time
-      return nextState.code !== JSON.stringify(parsedLayer, null, 2)
-    } catch(err) {
-      return true
+  componentDidUpdate(prevProps) {
+    if (prevProps.layer !== this.props.layer) {
+      this.setState({
+        code: JSON.stringify(this.props.layer, null, 2)
+      })
     }
   }
 
@@ -69,13 +63,15 @@ class JSONEditor extends React.Component {
       tabSize: 2,
       theme: 'maputnik',
       viewportMargin: Infinity,
-      lineNumbers: false,
+      lineNumbers: true,
+      lint: true,
+      gutters: ["CodeMirror-lint-markers"],
       scrollbarStyle: "null",
     }
 
     return <CodeMirror
       value={this.state.code}
-      onChange={this.onCodeUpdate.bind(this)}
+      onBeforeChange={(editor, data, value) => this.onCodeUpdate(value)}
       onFocusChange={focused => focused ? true : this.resetValue()}
       options={codeMirrorOptions}
     />

src/components/layers/LayerEditor.jsx

@@ -1,38 +1,57 @@
 import React from 'react'
+import PropTypes from 'prop-types'
+import { Wrapper, Button, Menu, MenuItem } from 'react-aria-menubutton'
 
-import GlSpec from 'mapbox-gl-style-spec/reference/latest.min.js'
 import JSONEditor from './JSONEditor'
 import FilterEditor from '../filter/FilterEditor'
 import PropertyGroup from '../fields/PropertyGroup'
 import LayerEditorGroup from './LayerEditorGroup'
 import LayerTypeBlock from './LayerTypeBlock'
 import LayerIdBlock from './LayerIdBlock'
+import MinZoomBlock from './MinZoomBlock'
+import MaxZoomBlock from './MaxZoomBlock'
+import CommentBlock from './CommentBlock'
 import LayerSourceBlock from './LayerSourceBlock'
 import LayerSourceLayerBlock from './LayerSourceLayerBlock'
 
-import InputBlock from '../inputs/InputBlock'
-import MultiButtonInput from '../inputs/MultiButtonInput'
+import {MdMoreVert} from 'react-icons/md'
 
-import input from '../../config/input.js'
 import { changeType, changeProperty } from '../../libs/layer'
 import layout from '../../config/layout.json'
-import { margins, fontSizes } from '../../config/scales'
-import colors from '../../config/colors'
 
-class UnsupportedLayer extends React.Component {
-  render() {
-    return <div></div>
+
+function layoutGroups(layerType) {
+  const layerGroup = {
+    title: 'Layer',
+    type: 'layer'
   }
+  const filterGroup = {
+    title: 'Filter',
+    type: 'filter'
+  }
+  const editorGroup = {
+    title: 'JSON Editor',
+    type: 'jsoneditor'
+  }
+  return [layerGroup, filterGroup].concat(layout[layerType].groups).concat([editorGroup])
 }
 
 /** Layer editor supporting multiple types of layers. */
 export default class LayerEditor extends React.Component {
   static propTypes = {
-    layer: React.PropTypes.object.isRequired,
-    sources: React.PropTypes.object,
-    vectorLayers: React.PropTypes.object,
-    onLayerChanged: React.PropTypes.func,
-    onLayerIdChange: React.PropTypes.func,
+    layer: PropTypes.object.isRequired,
+    sources: PropTypes.object,
+    vectorLayers: PropTypes.object,
+    spec: PropTypes.object.isRequired,
+    onLayerChanged: PropTypes.func,
+    onLayerIdChange: PropTypes.func,
+    onMoveLayer: PropTypes.func,
+    onLayerDestroy: PropTypes.func,
+    onLayerCopy: PropTypes.func,
+    onLayerVisibilityToggle: PropTypes.func,
+    isFirstLayer: PropTypes.bool,
+    isLastLayer: PropTypes.bool,
+    layerIndex: PropTypes.number,
   }
 
   static defaultProps = {
@@ -42,7 +61,7 @@ export default class LayerEditor extends React.Component {
   }
 
   static childContextTypes = {
-    reactIconBase: React.PropTypes.object
+    reactIconBase: PropTypes.object
   }
 
   constructor(props) {
@@ -50,32 +69,32 @@ export default class LayerEditor extends React.Component {
 
     //TODO: Clean this up and refactor into function
     const editorGroups = {}
-    layout[this.props.layer.type].groups.forEach(group => {
+    layoutGroups(this.props.layer.type).forEach(group => {
       editorGroups[group.title] = true
     })
 
     this.state = { editorGroups }
   }
 
-  componentWillReceiveProps(nextProps) {
-    const additionalGroups = { ...this.state.editorGroups }
+  static getDerivedStateFromProps(props, state) {
+    const additionalGroups = { ...state.editorGroups }
 
-    layout[nextProps.layer.type].groups.forEach(group => {
+    layout[props.layer.type].groups.forEach(group => {
       if(!(group.title in additionalGroups)) {
         additionalGroups[group.title] = true
       }
     })
 
-    this.setState({
+    return {
       editorGroups: additionalGroups
-    })
+    };
   }
 
   getChildContext () {
     return {
       reactIconBase: {
-        size: fontSizes[4],
-        color: colors.lowgray,
+        size: 14,
+        color: '#8e8e8e',
       }
     }
   }
@@ -95,57 +114,89 @@ export default class LayerEditor extends React.Component {
   }
 
   renderGroupType(type, fields) {
+    let comment = ""
+    if(this.props.layer.metadata) {
+      comment = this.props.layer.metadata['maputnik:comment']
+    }
+
+    let sourceLayerIds;
+    if(this.props.sources.hasOwnProperty(this.props.layer.source)) {
+      sourceLayerIds = this.props.sources[this.props.layer.source].layers;
+    }
+
     switch(type) {
-      case 'settings': return <div>
-          <LayerIdBlock
-            value={this.props.layer.id}
-            onChange={newId => this.props.onLayerIdChange(this.props.layer.id, newId)}
-          />
-          <LayerTypeBlock
-            value={this.props.layer.type}
-            onChange={newType => this.props.onLayerChanged(changeType(this.props.layer, newType))}
-          />
-        </div>
-      case 'source': return <div>
-        <LayerSourceBlock
+      case 'layer': return <div>
+        <LayerIdBlock
+          value={this.props.layer.id}
+          wdKey="layer-editor.layer-id"
+          onChange={newId => this.props.onLayerIdChange(this.props.layer.id, newId)}
+        />
+        <LayerTypeBlock
+          value={this.props.layer.type}
+          onChange={newType => this.props.onLayerChanged(changeType(this.props.layer, newType))}
+        />
+        {this.props.layer.type !== 'background' && <LayerSourceBlock
           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 &&
         <LayerSourceLayerBlock
-          sourceLayerIds={this.props.sources[this.props.layer.source]}
+          sourceLayerIds={sourceLayerIds}
           value={this.props.layer['source-layer']}
           onChange={v => this.changeProperty(null, 'source-layer', v)}
         />
-        {this.props.layer.filter &&
-        <div style={input.property}>
+        }
+        <MinZoomBlock
+          value={this.props.layer.minzoom}
+          onChange={v => this.changeProperty(null, 'minzoom', v)}
+        />
+        <MaxZoomBlock
+          value={this.props.layer.maxzoom}
+          onChange={v => this.changeProperty(null, 'maxzoom', v)}
+        />
+        <CommentBlock
+          value={comment}
+          onChange={v => this.changeProperty('metadata', 'maputnik:comment', v == ""  ? undefined : v)}
+        />
+      </div>
+      case 'filter': return <div>
+        <div className="maputnik-filter-editor-wrapper">
           <FilterEditor
             filter={this.props.layer.filter}
             properties={this.props.vectorLayers[this.props.layer['source-layer']]}
             onChange={f => this.changeProperty(null, 'filter', f)}
           />
         </div>
-        }
       </div>
       case 'properties': return <PropertyGroup
         layer={this.props.layer}
         groupFields={fields}
+        spec={this.props.spec}
         onChange={this.changeProperty.bind(this)}
       />
       case 'jsoneditor': return <JSONEditor
         layer={this.props.layer}
         onChange={this.props.onLayerChanged}
       />
-      default: return null
     }
   }
 
+  moveLayer(offset) {
+    this.props.onMoveLayer({
+      oldIndex: this.props.layerIndex,
+      newIndex: this.props.layerIndex+offset
+    })
+  }
+
   render() {
     const layerType = this.props.layer.type
-    const layoutGroups = layout[layerType].groups.filter(group => {
-      return !(this.props.layer.type === 'background' && group.type === 'source')
+    const groups = layoutGroups(layerType).filter(group => {
+      return !(layerType === 'background' && group.type === 'source')
     }).map(group => {
       return <LayerEditorGroup
+        data-wd-key={group.title}
         key={group.title}
         title={group.title}
         isActive={this.state.editorGroups[group.title]}
@@ -155,8 +206,74 @@ export default class LayerEditor extends React.Component {
       </LayerEditorGroup>
     })
 
-    return <div>
-      {layoutGroups}
+    const layout = this.props.layer.layout || {}
+
+    const items = {
+      delete: {
+        text: "Delete",
+        handler: () => this.props.onLayerDestroy(this.props.layer.id)
+      },
+      duplicate: {
+        text: "Duplicate",
+        handler: () => this.props.onLayerCopy(this.props.layer.id)
+      },
+      hide: {
+        text: (layout.visibility === "none") ? "Show" : "Hide",
+        handler: () => this.props.onLayerVisibilityToggle(this.props.layer.id)
+      },
+      moveLayerUp: {
+        text: "Move layer up",
+        // Not actually used...
+        disabled: this.props.isFirstLayer,
+        handler: () => this.moveLayer(-1)
+      },
+      moveLayerDown: {
+        text: "Move layer down",
+        // Not actually used...
+        disabled: this.props.isLastLayer,
+        handler: () => this.moveLayer(+1)
+      }
+    }
+
+    function handleSelection(id, event) {
+      event.stopPropagation;
+      items[id].handler();
+    }
+
+    return <div className="maputnik-layer-editor"
+      >
+      <header>
+        <div className="layer-header">
+          <h2 className="layer-header__title">
+            Layer: {this.props.layer.id}
+          </h2>
+          <div className="layer-header__info">
+            <Wrapper
+              className='more-menu'
+              onSelection={handleSelection}
+              closeOnSelection={false}
+            >
+              <Button className='more-menu__button'>
+                <MdMoreVert className="more-menu__button__svg" />
+              </Button>
+              <Menu>
+                <ul className="more-menu__menu">
+                  {Object.keys(items).map((id, idx) => {
+                    const item = items[id];
+                    return <li key={id}>
+                      <MenuItem value={id} className='more-menu__menu__item'>
+                        {item.text}
+                      </MenuItem>
+                    </li>
+                  })}
+                </ul>
+              </Menu>
+            </Wrapper>
+          </div>
+        </div>
+
+      </header>
+      {groups}
     </div>
   }
 }

src/components/layers/LayerEditorGroup.jsx

@@ -1,62 +1,32 @@
 import React from 'react'
-import Color from 'color'
-import colors from '../../config/colors'
-import { margins, fontSizes } from '../../config/scales'
+import PropTypes from 'prop-types'
+import Collapser from './Collapser'
+import Collapse from './Collapse'
 
-import Collapse from 'react-collapse'
-import CollapseOpenIcon from 'react-icons/lib/md/arrow-drop-down'
-import CollapseCloseIcon from 'react-icons/lib/md/arrow-drop-up'
-
-class Collapser extends React.Component {
-  static propTypes = {
-    isCollapsed: React.PropTypes.bool.isRequired,
-  }
-
-  render() {
-    const iconStyle = {
-      width: 20,
-      height: 20,
-    }
-    return this.props.isCollapsed ? <CollapseCloseIcon style={iconStyle}/> : <CollapseOpenIcon style={iconStyle} />
-  }
-}
 
 export default class LayerEditorGroup extends React.Component {
   static propTypes = {
-    title: React.PropTypes.string.isRequired,
-    isActive: React.PropTypes.bool.isRequired,
-    children: React.PropTypes.element.isRequired,
-    onActiveToggle: React.PropTypes.func.isRequired
-  }
-
-  constructor(props) {
-    super(props)
-    this.state = { hover: false }
+    "data-wd-key": PropTypes.string,
+    title: PropTypes.string.isRequired,
+    isActive: PropTypes.bool.isRequired,
+    children: PropTypes.element.isRequired,
+    onActiveToggle: PropTypes.func.isRequired
   }
 
   render() {
     return <div>
-      <div style={{
-        fontSize: fontSizes[4],
-        backgroundColor: this.state.hover ? Color(colors.black).lighten(0.30).string() : Color(colors.black).lighten(0.15).string(),
-        color: colors.lowgray,
-        cursor: 'pointer',
-        userSelect: 'none',
-        padding: margins[1],
-        display: 'flex',
-        flexDirection: 'row',
-        lineHeight: '20px',
-      }}
-        onMouseOver={e => this.setState({hover: true})}
-        onMouseOut={e => this.setState({hover: false})}
+      <div className="maputnik-layer-editor-group"
+        data-wd-key={"layer-editor-group:"+this.props["data-wd-key"]}
         onClick={e => this.props.onActiveToggle(!this.props.isActive)}
       >
         <span>{this.props.title}</span>
         <span style={{flexGrow: 1}} />
         <Collapser isCollapsed={this.props.isActive} />
       </div>
-      <Collapse isOpened={this.props.isActive}>
-        {this.props.children}
+      <Collapse isActive={this.props.isActive}>
+        <div className="react-collapse-container">
+          {this.props.children}
+        </div>
       </Collapse>
     </div>
   }

src/components/layers/LayerIdBlock.jsx

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

src/components/layers/LayerList.jsx

@@ -1,98 +1,211 @@
 import React from 'react'
-import cloneDeep from 'lodash.clonedeep'
+import PropTypes from 'prop-types'
+import classnames from 'classnames'
 
+import LayerListGroup from './LayerListGroup'
 import LayerListItem from './LayerListItem'
+import AddModal from '../modals/AddModal'
 
-import style from '../../libs/style.js'
-import { margins } from '../../config/scales.js'
-
-import {SortableContainer, SortableHandle, arrayMove} from 'react-sortable-hoc';
+import {SortableContainer} from 'react-sortable-hoc';
 
 const layerListPropTypes = {
-  layers: React.PropTypes.array.isRequired,
-  selectedLayerIndex: React.PropTypes.number.isRequired,
-  onLayersChange: React.PropTypes.func.isRequired,
-  onLayerSelect: React.PropTypes.func,
+  layers: PropTypes.array.isRequired,
+  selectedLayerIndex: PropTypes.number.isRequired,
+  onLayersChange: PropTypes.func.isRequired,
+  onLayerSelect: PropTypes.func,
+  sources: PropTypes.object.isRequired,
+}
+
+function layerPrefix(name) {
+  return name.replace(' ', '-').replace('_', '-').split('-')[0]
+}
+
+function findClosestCommonPrefix(layers, idx) {
+  const currentLayerPrefix = layerPrefix(layers[idx].id)
+  let closestIdx = idx
+  for (let i = idx; i > 0; i--) {
+    const previousLayerPrefix = layerPrefix(layers[i-1].id)
+    if(previousLayerPrefix === currentLayerPrefix) {
+      closestIdx = i - 1
+    } else {
+      return closestIdx
+    }
+  }
+  return closestIdx
 }
 
 // List of collapsible layer editors
-@SortableContainer
 class LayerListContainer extends React.Component {
   static propTypes = {...layerListPropTypes}
   static defaultProps = {
     onLayerSelect: () => {},
   }
 
-  onLayerDestroy(layerId) {
-    const remainingLayers = this.props.layers.slice(0)
-    const idx = style.indexOfLayer(remainingLayers, layerId)
-    remainingLayers.splice(idx, 1);
-    this.props.onLayersChange(remainingLayers)
+  state = {
+    collapsedGroups: {},
+    areAllGroupsExpanded: false,
+    isOpen: {
+      add: false,
+    }
   }
 
-  onLayerCopy(layerId) {
-    const changedLayers = this.props.layers.slice(0)
-    const idx = style.indexOfLayer(changedLayers, layerId)
-
-    const clonedLayer = cloneDeep(changedLayers[idx])
-    clonedLayer.id = clonedLayer.id + "-copy"
-    changedLayers.splice(idx, 0, clonedLayer)
-    this.props.onLayersChange(changedLayers)
+  toggleModal(modalName) {
+    this.setState({
+      isOpen: {
+        ...this.state.isOpen,
+        [modalName]: !this.state.isOpen[modalName]
+      }
+    })
   }
 
-  onLayerVisibilityToggle(layerId) {
-    const changedLayers = this.props.layers.slice(0)
-    const idx = style.indexOfLayer(changedLayers, layerId)
+  toggleLayers = () => {
+    let idx=0
 
-    const layer = { ...changedLayers[idx] }
-    const changedLayout = 'layout' in layer ? {...layer.layout} : {}
-    changedLayout.visibility = changedLayout.visibility === 'none' ? 'visible' : 'none'
+    let newGroups=[]
 
-    layer.layout = changedLayout
-    changedLayers[idx] = layer
-    this.props.onLayersChange(changedLayers)
+    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
+      })
+    });
+
+    this.setState({
+      collapsedGroups: newGroups,
+      areAllGroupsExpanded: !this.state.areAllGroupsExpanded
+    })
+  }
+
+  groupedLayers() {
+    const groups = []
+    for (let i = 0; i < this.props.layers.length; i++) {
+      const previousLayer = this.props.layers[i-1]
+      const layer = this.props.layers[i]
+      if(previousLayer && layerPrefix(previousLayer.id) == layerPrefix(layer.id)) {
+        const lastGroup = groups[groups.length - 1]
+        lastGroup.push(layer)
+      } else {
+        groups.push([layer])
+      }
+    }
+    return groups
+  }
+
+  toggleLayerGroup(groupPrefix, idx) {
+    const lookupKey = [groupPrefix, idx].join('-')
+    const newGroups = { ...this.state.collapsedGroups }
+    if(lookupKey in this.state.collapsedGroups) {
+      newGroups[lookupKey] = !this.state.collapsedGroups[lookupKey]
+    } else {
+      newGroups[lookupKey] = false
+    }
+    this.setState({
+      collapsedGroups: newGroups
+    })
+  }
+
+  isCollapsed(groupPrefix, idx) {
+    const collapsed = this.state.collapsedGroups[[groupPrefix, idx].join('-')]
+    return collapsed === undefined ? true : collapsed
   }
 
   render() {
-    const layerPanels = this.props.layers.map((layer, index) => {
-      const layerId = layer.id
-      return <LayerListItem
-        index={index}
-        key={layerId}
-        layerId={layerId}
-        layerType={layer.type}
-        visibility={(layer.layout || {}).visibility}
-        isSelected={index === this.props.selectedLayerIndex}
-        onLayerSelect={this.props.onLayerSelect}
-        onLayerDestroy={this.onLayerDestroy.bind(this)}
-        onLayerCopy={this.onLayerCopy.bind(this)}
-        onLayerVisibilityToggle={this.onLayerVisibilityToggle.bind(this)}
-      />
+
+    const listItems = []
+    let idx = 0
+    this.groupedLayers().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('-')}
+          title={groupPrefix}
+          isActive={!this.isCollapsed(groupPrefix, idx) || idx === this.props.selectedLayerIndex}
+          onActiveToggle={this.toggleLayerGroup.bind(this, groupPrefix, idx)}
+        />
+        listItems.push(grp)
+      }
+
+      layers.forEach((layer, idxInGroup) => {
+        const groupIdx = findClosestCommonPrefix(this.props.layers, idx)
+
+        const listItem = <LayerListItem
+          className={classnames({
+            'maputnik-layer-list-item-collapsed': layers.length > 1 && this.isCollapsed(groupPrefix, groupIdx) && idx !== this.props.selectedLayerIndex,
+            'maputnik-layer-list-item-group-last': idxInGroup == layers.length - 1 && layers.length > 1
+          })}
+          index={idx}
+          key={layer.id}
+          layerId={layer.id}
+          layerType={layer.type}
+          visibility={(layer.layout || {}).visibility}
+          isSelected={idx === this.props.selectedLayerIndex}
+          onLayerSelect={this.props.onLayerSelect}
+          onLayerDestroy={this.props.onLayerDestroy.bind(this)}
+          onLayerCopy={this.props.onLayerCopy.bind(this)}
+          onLayerVisibilityToggle={this.props.onLayerVisibilityToggle.bind(this)}
+        />
+        listItems.push(listItem)
+        idx += 1
+      })
     })
-    return <ul style={{
-      padding: 0,
-      margin: 0
-    }}>
-      {layerPanels}
-    </ul>
+
+    return <div className="maputnik-layer-list">
+      <AddModal
+          layers={this.props.layers}
+          sources={this.props.sources}
+          isOpen={this.state.isOpen.add}
+          onOpenToggle={this.toggleModal.bind(this, 'add')}
+          onLayersChange={this.props.onLayersChange}
+      />
+      <header className="maputnik-layer-list-header">
+        <span className="maputnik-layer-list-header-title">Layers</span>
+        <span className="maputnik-space" />
+        <div className="maputnik-default-property">
+          <div className="maputnik-multibutton">
+            <button
+              id="skip-menu"
+              onClick={this.toggleLayers}
+              className="maputnik-button">
+              {this.state.areAllGroupsExpanded === true ? "Collapse" : "Expand"}
+            </button>
+          </div>
+        </div>
+        <div className="maputnik-default-property">
+          <div className="maputnik-multibutton">
+            <button
+              onClick={this.toggleModal.bind(this, 'add')}
+              data-wd-key="layer-list:add-layer"
+              className="maputnik-button maputnik-button-selected">
+             Add Layer
+            </button>
+          </div>
+        </div>
+      </header>
+      <ul className="maputnik-layer-list-container">
+        {listItems}
+      </ul>
+    </div>
   }
 }
 
+const LayerListContainerSortable = SortableContainer((props) => <LayerListContainer {...props} />)
+
 export default class LayerList extends React.Component {
   static propTypes = {...layerListPropTypes}
 
-  onSortEnd(move) {
-    const { oldIndex, newIndex } = move
-    if(oldIndex === newIndex) return
-    let layers = this.props.layers.slice(0)
-    layers = arrayMove(layers, oldIndex, newIndex)
-    this.props.onLayersChange(layers)
-  }
-
   render() {
-    return <LayerListContainer
+    return <LayerListContainerSortable
       {...this.props}
-      onSortEnd={this.onSortEnd.bind(this)}
+      helperClass='sortableHelper'
+      onSortEnd={this.props.onMoveLayer.bind(this)}
       useDragHandle={true}
     />
   }

src/components/layers/LayerListGroup.jsx

@@ -0,0 +1,28 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import Collapser from './Collapser'
+
+export default class LayerListGroup extends React.Component {
+  static propTypes = {
+    title: PropTypes.string.isRequired,
+    "data-wd-key": PropTypes.string,
+    isActive: PropTypes.bool.isRequired,
+    onActiveToggle: PropTypes.func.isRequired
+  }
+
+  render() {
+    return <li className="maputnik-layer-list-group">
+      <div className="maputnik-layer-list-group-header"
+        data-wd-key={"layer-list-group:"+this.props["data-wd-key"]}
+        onClick={e => this.props.onActiveToggle(!this.props.isActive)}
+      >
+        <span className="maputnik-layer-list-group-title">{this.props.title}</span>
+        <span className="maputnik-space" />
+        <Collapser
+          style={{ height: 14, width: 14 }}
+          isCollapsed={this.props.isActive}
+        />
+      </div>
+    </li>
+  }
+}

src/components/layers/LayerListItem.jsx

@@ -1,97 +1,77 @@
 import React from 'react'
-import Color from 'color'
+import PropTypes from 'prop-types'
+import classnames from 'classnames'
 
-import CopyIcon from 'react-icons/lib/md/content-copy'
-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 {MdContentCopy, MdVisibility, MdVisibilityOff, MdDelete} from 'react-icons/md'
 
 import LayerIcon from '../icons/LayerIcon'
-import LayerEditor from './LayerEditor'
 import {SortableElement, SortableHandle} from 'react-sortable-hoc'
 
-import colors from '../../config/colors.js'
-import { fontSizes, margins } from '../../config/scales.js'
 
-
-@SortableHandle
-class LayerTypeDragHandle extends React.Component {
-  static propTypes = LayerIcon.propTypes
-
-  render() {
-    return <LayerIcon
-      {...this.props}
-      style={{
-        cursor: 'move',
-        width: fontSizes[4],
-        height: fontSizes[4],
-        paddingRight: margins[0],
-      }}
+const DraggableLabel = SortableHandle((props) => {
+  return <div className="maputnik-layer-list-item-handle">
+    <LayerIcon
+      className="layer-handle__icon"
+      type={props.layerType}
     />
-  }
-}
+    <span className="maputnik-layer-list-item-id">{props.layerId}</span>
+  </div>
+});
 
 class IconAction extends React.Component {
   static propTypes = {
-    action: React.PropTypes.string.isRequired,
-    active: React.PropTypes.bool,
-    onClick: React.PropTypes.func.isRequired,
-  }
-
-  constructor(props) {
-    super(props)
-    this.state = { hover: false }
+    action: PropTypes.string.isRequired,
+    onClick: PropTypes.func.isRequired,
+    wdKey: PropTypes.string,
+    classBlockName: PropTypes.string,
+    classBlockModifier: PropTypes.string,
   }
 
   renderIcon() {
-    const iconStyle = {
-      fill: colors.black
-    }
-
-    if(this.props.active) {
-      iconStyle.fill = colors.midgray
-    }
-    if(this.state.hover) {
-      iconStyle.fill = colors.lowgray
-    }
-
     switch(this.props.action) {
-      case 'copy': return <CopyIcon style={iconStyle} />
-      case 'show': return <VisibilityIcon style={iconStyle} />
-      case 'hide': return <VisibilityOffIcon style={iconStyle} />
-      case 'delete': return <DeleteIcon style={iconStyle} />
-      default: return null
+      case 'duplicate': return <MdContentCopy />
+      case 'show': return <MdVisibility />
+      case 'hide': return <MdVisibilityOff />
+      case 'delete': return <MdDelete />
     }
   }
 
   render() {
-    return <a
-      style={{
-        display: "inline",
-        marginLeft: margins[0],
-        ...this.props.style
-      }}
+    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 ${classAdditions}`}
+      data-wd-key={this.props.wdKey}
       onClick={this.props.onClick}
-      onMouseOver={e => this.setState({hover: true})}
-      onMouseOut={e => this.setState({hover: false})}
     >
       {this.renderIcon()}
-    </a>
+    </button>
   }
 }
 
-@SortableElement
 class LayerListItem extends React.Component {
   static propTypes = {
-    layerId: React.PropTypes.string.isRequired,
-    layerType: React.PropTypes.string.isRequired,
-    isSelected: React.PropTypes.bool,
-    visibility: React.PropTypes.string,
+    layerId: PropTypes.string.isRequired,
+    layerType: PropTypes.string.isRequired,
+    isSelected: PropTypes.bool,
+    visibility: PropTypes.string,
+    className: PropTypes.string,
 
-    onLayerSelect: React.PropTypes.func.isRequired,
-    onLayerCopy: React.PropTypes.func,
-    onLayerDestroy: React.PropTypes.func,
-    onLayerVisibilityToggle: React.PropTypes.func,
+    onLayerSelect: PropTypes.func.isRequired,
+    onLayerCopy: PropTypes.func,
+    onLayerDestroy: PropTypes.func,
+    onLayerVisibilityToggle: PropTypes.func,
   }
 
   static defaultProps = {
@@ -103,89 +83,52 @@ class LayerListItem extends React.Component {
   }
 
   static childContextTypes = {
-    reactIconBase: React.PropTypes.object
-  }
-
-  constructor(props) {
-    super(props)
-    this.state = {
-      hover: false
-    }
+    reactIconBase: PropTypes.object
   }
 
   getChildContext() {
     return {
-      reactIconBase: { size: fontSizes[4] }
+      reactIconBase: { size: 14 }
     }
   }
 
   render() {
-    const itemStyle = {
-      fontWeight: 400,
-      color: colors.lowgray,
-      fontSize: fontSizes[5],
-      borderLeft: 0,
-      borderTop: 0,
-      borderBottom: 1,
-      borderRight: 0,
-      borderStyle: "solid",
-      userSelect: 'none',
-      listStyle: 'none',
-      zIndex: 2000,
-      cursor: 'pointer',
-      position: 'relative',
-      padding: margins[1],
-      borderColor: Color(colors.black).lighten(0.10).string(),
-      backgroundColor: colors.black,
-      lineHeight: 1.3,
-    }
-
-    if(this.state.hover) {
-      itemStyle.backgroundColor = Color(colors.black).lighten(0.10).string()
-    }
-
-    if(this.props.isSelected) {
-      itemStyle.backgroundColor = Color(colors.black).lighten(0.15).string()
-    }
-
-    const iconProps = {
-      active: this.state.hover || this.props.isSelected
-    }
+    const visibilityAction = this.props.visibility === 'visible' ? 'show' : 'hide';
 
     return <li
       key={this.props.layerId}
       onClick={e => this.props.onLayerSelect(this.props.layerId)}
-      onMouseOver={e => this.setState({hover: true})}
-      onMouseOut={e => this.setState({hover: false})}
-      style={itemStyle}>
-      <div style={{
-        display: 'flex',
-        flexDirection: 'row'
-      }}>
-        <LayerTypeDragHandle type={this.props.layerType} />
-        <span style={{
-          width: 115,
-          whiteSpace: 'nowrap',
-          overflow: 'hidden',
-          textOverflow: 'ellipsis'
-        }}>{this.props.layerId}</span>
+      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,
+      })}>
+        <DraggableLabel {...this.props} />
         <span style={{flexGrow: 1}} />
-        <IconAction {...iconProps}
+        <IconAction
+          wdKey={"layer-list-item:"+this.props.layerId+":delete"}
           action={'delete'}
+          classBlockName="delete"
           onClick={e => this.props.onLayerDestroy(this.props.layerId)}
         />
-        <IconAction {...iconProps}
-          action={'copy'}
+        <IconAction
+          wdKey={"layer-list-item:"+this.props.layerId+":copy"}
+          action={'duplicate'}
+          classBlockName="duplicate"
           onClick={e => this.props.onLayerCopy(this.props.layerId)}
         />
-        <IconAction {...iconProps}
-          active={this.state.hover || this.props.isSelected || this.props.visibility === 'none'}
-          action={this.props.visibility === 'visible' ? 'hide' : 'show'}
+        <IconAction
+          wdKey={"layer-list-item:"+this.props.layerId+":toggle-visibility"}
+          action={visibilityAction}
+          classBlockName="visibility"
+          classBlockModifier={visibilityAction}
           onClick={e => this.props.onLayerVisibilityToggle(this.props.layerId)}
         />
-      </div>
     </li>
   }
 }
 
-export default LayerListItem;
+const LayerListItemSortable = SortableElement((props) => <LayerListItem {...props} />);
+
+export default LayerListItemSortable;

src/components/layers/LayerSourceBlock.jsx

@@ -1,15 +1,16 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 
+import {latest} from '@mapbox/mapbox-gl-style-spec'
 import InputBlock from '../inputs/InputBlock'
-import StringInput from '../inputs/StringInput'
-import SelectInput from '../inputs/SelectInput'
 import AutocompleteInput from '../inputs/AutocompleteInput'
 
 class LayerSourceBlock extends React.Component {
   static propTypes = {
-    value: React.PropTypes.string,
-    onChange: React.PropTypes.func,
-    sourceIds: React.PropTypes.array,
+    value: PropTypes.string,
+    wdKey: PropTypes.string,
+    onChange: PropTypes.func,
+    sourceIds: PropTypes.array,
   }
 
   static defaultProps = {
@@ -18,12 +19,13 @@ class LayerSourceBlock extends React.Component {
   }
 
   render() {
-    return <InputBlock label={"Source"}>
+    return <InputBlock label={"Source"} doc={latest.layer.source.doc}
+      data-wd-key={this.props.wdKey}
+    >
       <AutocompleteInput
         value={this.props.value}
         onChange={this.props.onChange}
         options={this.props.sourceIds.map(src => [src, src])}
-        wrapperStyle={{ width: '50%' }}
       />
     </InputBlock>
   }

src/components/layers/LayerSourceLayerBlock.jsx

@@ -1,29 +1,33 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 
+import {latest} from '@mapbox/mapbox-gl-style-spec'
 import InputBlock from '../inputs/InputBlock'
-import StringInput from '../inputs/StringInput'
-import SelectInput from '../inputs/SelectInput'
 import AutocompleteInput from '../inputs/AutocompleteInput'
 
 class LayerSourceLayer extends React.Component {
   static propTypes = {
-    value: React.PropTypes.string,
-    onChange: React.PropTypes.func,
-    sourceLayerIds: React.PropTypes.array,
+    value: PropTypes.string,
+    onChange: PropTypes.func,
+    sourceLayerIds: PropTypes.array,
+    isFixed: PropTypes.bool,
   }
 
   static defaultProps = {
     onChange: () => {},
     sourceLayerIds: [],
+    isFixed: false
   }
 
   render() {
-    return <InputBlock label={"Source Layer"}>
+    return <InputBlock label={"Source Layer"} doc={latest.layer['source-layer'].doc}
+      data-wd-key="layer-source-layer"
+    >
       <AutocompleteInput
+        keepMenuWithinWindowBounds={!!this.props.isFixed}
         value={this.props.value}
         onChange={this.props.onChange}
         options={this.props.sourceLayerIds.map(l => [l, l])}
-        wrapperStyle={{ width: '50%' }}
       />
     </InputBlock>
   }

src/components/layers/LayerTypeBlock.jsx

@@ -1,16 +1,21 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 
+import {latest} from '@mapbox/mapbox-gl-style-spec'
 import InputBlock from '../inputs/InputBlock'
 import SelectInput from '../inputs/SelectInput'
 
 class LayerTypeBlock extends React.Component {
   static propTypes = {
-    value: React.PropTypes.string.isRequired,
-    onChange: React.PropTypes.func.isRequired,
+    value: PropTypes.string.isRequired,
+    wdKey: PropTypes.string,
+    onChange: PropTypes.func.isRequired,
   }
 
   render() {
-    return <InputBlock label={"Layer Type"}>
+    return <InputBlock label={"Type"} doc={latest.layer.type.doc}
+      data-wd-key={this.props.wdKey}
+    >
       <SelectInput
         options={[
           ['background', 'Background'],
@@ -20,6 +25,8 @@ class LayerTypeBlock extends React.Component {
           ['raster', 'Raster'],
           ['circle', 'Circle'],
           ['fill-extrusion', 'Fill Extrusion'],
+          ['hillshade', 'Hillshade'],
+          ['heatmap', 'Heatmap'],
         ]}
         onChange={this.props.onChange}
         value={this.props.value}

src/components/layers/MaxZoomBlock.jsx

@@ -0,0 +1,29 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import {latest} from '@mapbox/mapbox-gl-style-spec'
+import InputBlock from '../inputs/InputBlock'
+import NumberInput from '../inputs/NumberInput'
+
+class MaxZoomBlock extends React.Component {
+  static propTypes = {
+    value: PropTypes.number,
+    onChange: PropTypes.func.isRequired,
+  }
+
+  render() {
+    return <InputBlock label={"Max Zoom"} doc={latest.layer.maxzoom.doc}
+      data-wd-key="max-zoom"
+    >
+      <NumberInput
+        value={this.props.value}
+        onChange={this.props.onChange}
+        min={latest.layer.maxzoom.minimum}
+        max={latest.layer.maxzoom.maximum}
+        default={latest.layer.maxzoom.maximum}
+      />
+    </InputBlock>
+  }
+}
+
+export default MaxZoomBlock

src/components/layers/MinZoomBlock.jsx

@@ -0,0 +1,29 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import {latest} from '@mapbox/mapbox-gl-style-spec'
+import InputBlock from '../inputs/InputBlock'
+import NumberInput from '../inputs/NumberInput'
+
+class MinZoomBlock extends React.Component {
+  static propTypes = {
+    value: PropTypes.number,
+    onChange: PropTypes.func.isRequired,
+  }
+
+  render() {
+    return <InputBlock label={"Min Zoom"} doc={latest.layer.minzoom.doc}
+      data-wd-key="min-zoom"
+    >
+      <NumberInput
+        value={this.props.value}
+        onChange={this.props.onChange}
+        min={latest.layer.minzoom.minimum}
+        max={latest.layer.minzoom.maximum}
+        default={latest.layer.minzoom.minimum}
+      />
+    </InputBlock>
+  }
+}
+
+export default MinZoomBlock

src/components/map/FeatureLayerPopup.jsx

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

src/components/map/FeatureLayerTable.jsx

@@ -1,66 +0,0 @@
-import React from 'react'
-import InputBlock from '../inputs/InputBlock'
-import StringInput from '../inputs/StringInput'
-import LayerIcon from '../icons/LayerIcon'
-import input from '../../config/input'
-
-import colors from '../../config/colors'
-import { margins, fontSizes } from '../../config/scales'
-
-const Panel = (props) => {
-  return <div style={{
-    backgroundColor: colors.gray,
-    padding: margins[0],
-    fontSize: fontSizes[5],
-    lineHeight: 1.2,
-  }}>{props.children}</div>
-}
-
-function renderFeature(feature) {
-  return <div>
-    <Panel>{feature.layer['source-layer']}</Panel>
-  </div>
-}
-
-function groupFeaturesBySourceLayer(features) {
-  const sources = {}
-  features.forEach(feature => {
-    sources[feature.layer['source-layer']] = sources[feature.layer['source-layer']] || []
-    sources[feature.layer['source-layer']].push(feature)
-  })
-  return sources
-}
-
-class FeatureLayerTable extends React.Component {
-  render() {
-    const sources = groupFeaturesBySourceLayer(this.props.features)
-
-    const items = Object.keys(sources).map(vectorLayerId => {
-      const layers = sources[vectorLayerId].map(feature => {
-        return <label style={{
-            ...input.label,
-            display: 'block',
-            width: 'auto',
-          }}>
-          <LayerIcon type={feature.layer.type} style={{
-            width: fontSizes[4],
-            height: fontSizes[4],
-            paddingRight: margins[0],
-          }}/>
-          {feature.layer.id}
-        </label>
-      })
-      return <div>
-        <Panel>{vectorLayerId}</Panel>
-        {layers}
-      </div>
-    })
-
-    return <div>
-      {items}
-    </div>
-  }
-}
-
-
-export default FeatureLayerTable

src/components/map/FeaturePropertyPopup.jsx

@@ -1,41 +1,67 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 import InputBlock from '../inputs/InputBlock'
 import StringInput from '../inputs/StringInput'
 
-import colors from '../../config/colors'
-import { margins, fontSizes } from '../../config/scales'
+function displayValue(value) {
+  if (typeof value === 'undefined' || value === null) return value;
+  if (value instanceof Date) return value.toLocaleString();
+  if (typeof value === 'object' ||
+          typeof value === 'number' ||
+          typeof value === 'string') return value.toString();
+  return value;
+}
 
 function renderProperties(feature) {
   return Object.keys(feature.properties).map(propertyName => {
     const property = feature.properties[propertyName]
-    return <InputBlock label={propertyName} style={{marginTop: 0, marginBottom: 0}}>
-      <StringInput value={property} style={{backgroundColor: 'transparent'}}/>
+    return <InputBlock key={propertyName} label={propertyName}>
+      <StringInput value={displayValue(property)} style={{backgroundColor: 'transparent'}}/>
     </InputBlock>
   })
 }
 
-const Panel = (props) => {
-  return <div style={{
-    backgroundColor: colors.gray,
-    padding: margins[0],
-    fontSize: fontSizes[5],
-    lineHeight: 1.2,
-  }}>{props.children}</div>
-}
-
 function renderFeature(feature) {
-  console.log(feature)
-  return <div>
-    <Panel>{feature.layer['source-layer']}</Panel>
+  return <div key={`${feature.sourceLayer}-${feature.id}`}>
+    <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>
     {renderProperties(feature)}
   </div>
 }
 
+function removeDuplicatedFeatures(features) {
+  let uniqueFeatures = [];
+
+  features.forEach(feature => {
+    const featureIndex = uniqueFeatures.findIndex(feature2 => {
+      return feature.layer['source-layer'] === feature2.layer['source-layer'] 
+        && JSON.stringify(feature.properties) === JSON.stringify(feature2.properties)
+    })
+
+    if(featureIndex === -1) {
+      uniqueFeatures.push(feature)
+    } else {
+      if(uniqueFeatures[featureIndex].hasOwnProperty('inspectModeCounter')) {
+        uniqueFeatures[featureIndex].inspectModeCounter++
+      } else {
+        uniqueFeatures[featureIndex].inspectModeCounter = 2
+      }
+    }
+  })
+
+  return uniqueFeatures
+}
+
 class FeaturePropertyPopup extends React.Component {
+  static propTypes = {
+    features: PropTypes.array
+  }
 
   render() {
-    const features = this.props.features
-    return <div>
+    const features = removeDuplicatedFeatures(this.props.features)
+    return <div className="maputnik-feature-property-popup">
       {features.map(renderFeature)}
     </div>
   }

src/components/map/InspectionMap.jsx

@@ -1,126 +0,0 @@
-import React from 'react'
-import ReactDOM from 'react-dom'
-import MapboxGl from 'mapbox-gl/dist/mapbox-gl.js'
-import validateColor from 'mapbox-gl-style-spec/lib/validate/validate_color'
-import colors from '../../config/colors'
-import style from '../../libs/style'
-import FeaturePropertyPopup from './FeaturePropertyPopup'
-import { colorHighlightedLayer, generateColoredLayers } from '../../libs/stylegen'
-import 'mapbox-gl/dist/mapbox-gl.css'
-import '../../mapboxgl.css'
-
-function convertInspectStyle(mapStyle, sources, highlightedLayer) {
-  const coloredLayers = generateColoredLayers(sources)
-
-  const layer = colorHighlightedLayer(highlightedLayer)
-  if(layer) {
-    coloredLayers.push(layer)
-  }
-
-  const newStyle = {
-    ...mapStyle,
-    layers: [
-      {
-        "id": "background",
-        "type": "background",
-        "paint": {
-          "background-color": colors.black,
-        }
-      },
-      ...coloredLayers,
-    ]
-  }
-  return newStyle
-}
-
-function renderPopup(features) {
-  var mountNode = document.createElement('div');
-  ReactDOM.render(<FeaturePropertyPopup features={features} />, mountNode)
-  return mountNode.innerHTML;
-}
-
-export default class InspectionMap extends React.Component {
-  static propTypes = {
-    onDataChange: React.PropTypes.func,
-    sources: React.PropTypes.object,
-    originalStyle: React.PropTypes.object,
-    highlightedLayer: React.PropTypes.object,
-    style: React.PropTypes.object,
-  }
-
-  static defaultProps = {
-    onMapLoaded: () => {},
-    onTileLoaded: () => {},
-  }
-
-  constructor(props) {
-    super(props)
-    this.state = { map: null }
-  }
-
-  componentWillReceiveProps(nextProps) {
-    if(!this.state.map) return
-
-    this.state.map.setStyle(convertInspectStyle(nextProps.mapStyle, this.props.sources, nextProps.highlightedLayer), { diff: true})
-  }
-
-  componentDidMount() {
-    MapboxGl.accessToken = this.props.accessToken
-
-    const map = new MapboxGl.Map({
-      container: this.container,
-      style: convertInspectStyle(this.props.mapStyle, this.props.sources, this.props.highlightedLayer),
-      hash: true,
-    })
-
-    const nav = new MapboxGl.NavigationControl();
-    map.addControl(nav, 'top-right');
-
-    map.on("style.load", () => {
-      this.setState({ map });
-    })
-
-    map.on("data", e => {
-      if(e.dataType !== 'tile') return
-      this.props.onDataChange({
-        map: this.state.map
-      })
-    })
-
-    map.on('click', this.displayPopup.bind(this))
-    map.on('mousemove', function(e) {
-      var features = map.queryRenderedFeatures(e.point, { layers: this.layers })
-      map.getCanvas().style.cursor = (features.length) ? 'pointer' : ''
-    })
-  }
-
-  displayPopup(e) {
-    const features = this.state.map.queryRenderedFeatures(e.point, {
-      layers: this.layers
-    });
-
-    if (!features.length) {
-      return
-    }
-
-    // Populate the popup and set its coordinates
-    // based on the feature found.
-    const popup = new MapboxGl.Popup()
-      .setLngLat(e.lngLat)
-      .setHTML(renderPopup(features))
-      .addTo(this.state.map)
-  }
-
-  render() {
-    return <div
-    ref={x => this.container = x}
-    style={{
-      position: "fixed",
-      top: 0,
-      bottom: 0,
-      height: "100%",
-      width: "100%",
-      ...this.props.style,
-    }}></div>
-  }
-}

src/components/map/MapboxGlMap.jsx

@@ -1,63 +1,186 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 import ReactDOM from 'react-dom'
-import MapboxGl from 'mapbox-gl/dist/mapbox-gl.js'
-import FeatureLayerTable from './FeatureLayerTable'
-import validateColor from 'mapbox-gl-style-spec/lib/validate/validate_color'
-import style from '../../libs/style.js'
+import MapboxGl from 'mapbox-gl'
+import MapboxInspect from 'mapbox-gl-inspect'
+import FeatureLayerPopup from './FeatureLayerPopup'
+import FeaturePropertyPopup from './FeaturePropertyPopup'
+import tokens from '../../config/tokens.json'
+import colors from 'mapbox-gl-inspect/lib/colors'
+import Color from 'color'
+import ZoomControl from '../../libs/zoomcontrol'
+import { colorHighlightedLayer } from '../../libs/highlight'
 import 'mapbox-gl/dist/mapbox-gl.css'
 import '../../mapboxgl.css'
+import '../../libs/mapbox-rtl'
 
-function renderPopup(features) {
-  var mountNode = document.createElement('div');
-  ReactDOM.render(<FeatureLayerTable features={features} />, mountNode)
-  return mountNode.innerHTML;
+
+const IS_SUPPORTED = MapboxGl.supported();
+
+function renderPopup(popup, mountNode) {
+  ReactDOM.render(popup, mountNode);
+  var content = mountNode.innerHTML;
+  return content;
+}
+
+function buildInspectStyle(originalMapStyle, coloredLayers, highlightedLayer) {
+  const backgroundLayer = {
+    "id": "background",
+    "type": "background",
+    "paint": {
+      "background-color": '#1c1f24',
+    }
+  }
+
+  const layer = colorHighlightedLayer(highlightedLayer)
+  if(layer) {
+    coloredLayers.push(layer)
+  }
+
+  const sources = {}
+  Object.keys(originalMapStyle.sources).forEach(sourceId => {
+    const source = originalMapStyle.sources[sourceId]
+    if(source.type !== 'raster' && source.type !== 'raster-dem') {
+      sources[sourceId] = source
+    }
+  })
+
+  const inspectStyle = {
+    ...originalMapStyle,
+    sources: sources,
+    layers: [backgroundLayer].concat(coloredLayers)
+  }
+  return inspectStyle
 }
 
 export default class MapboxGlMap extends React.Component {
   static propTypes = {
-    onDataChange: React.PropTypes.func,
-    mapStyle: React.PropTypes.object.isRequired,
-    accessToken: React.PropTypes.string,
-    style: React.PropTypes.object,
+    onDataChange: PropTypes.func,
+    onLayerSelect: PropTypes.func.isRequired,
+    mapStyle: PropTypes.object.isRequired,
+    inspectModeEnabled: PropTypes.bool.isRequired,
+    highlightedLayer: PropTypes.object,
+    options: PropTypes.object,
   }
 
   static defaultProps = {
     onMapLoaded: () => {},
     onDataChange: () => {},
+    onLayerSelect: () => {},
+    mapboxAccessToken: tokens.mapbox,
+    options: {},
   }
 
   constructor(props) {
     super(props)
+    MapboxGl.accessToken = tokens.mapbox
     this.state = {
       map: null,
-      isPopupOpen: false,
-      popupX: 0,
-      popupY: 0,
+      inspect: null,
     }
   }
 
-  componentWillReceiveProps(nextProps) {
-    if(!this.state.map) return
+  updateMapFromProps(props) {
+    if(!IS_SUPPORTED) return;
 
-    //Mapbox GL now does diffing natively so we don't need to calculate
-    //the necessary operations ourselves!
-    this.state.map.setStyle(nextProps.mapStyle, { diff: true})
+    if(!this.state.map) return
+    const metadata = props.mapStyle.metadata || {}
+    MapboxGl.accessToken = metadata['maputnik:mapbox_access_token'] || tokens.mapbox
+
+    if(!props.inspectModeEnabled) {
+      //Mapbox GL now does diffing natively so we don't need to calculate
+      //the necessary operations ourselves!
+      this.state.map.setStyle(props.mapStyle, { diff: true})
+    }
+  }
+
+  shouldComponentUpdate(nextProps, nextState) {
+    let should = false;
+    try {
+      should = JSON.stringify(this.props) !== JSON.stringify(nextProps) || JSON.stringify(this.state) !== JSON.stringify(nextState);
+    } catch(e) {
+      // no biggie, carry on
+    }
+    return should;
+  }
+
+  componentDidUpdate(prevProps) {
+    if(!IS_SUPPORTED) return;
+
+    const map = this.state.map;
+
+    this.updateMapFromProps(this.props);
+
+    if(this.props.inspectModeEnabled !== prevProps.inspectModeEnabled) {
+      this.state.inspect.toggleInspector()
+    }
+    if(this.props.inspectModeEnabled) {
+      this.state.inspect.render()
+    }
+
+    if (map) {
+      map.showTileBoundaries = this.props.options.showTileBoundaries;
+      map.showCollisionBoxes = this.props.options.showCollisionBoxes;
+      map.showOverdrawInspector = this.props.options.showOverdrawInspector;
+    }
   }
 
   componentDidMount() {
-    MapboxGl.accessToken = this.props.accessToken
+    if(!IS_SUPPORTED) return;
 
-    const map = new MapboxGl.Map({
+    const mapOpts = {
+      ...this.props.options,
       container: this.container,
       style: this.props.mapStyle,
       hash: true,
-    })
+    }
 
-		const nav = new MapboxGl.NavigationControl();
-		map.addControl(nav, 'top-right');
+    const map = new MapboxGl.Map(mapOpts);
+
+    map.showTileBoundaries = mapOpts.showTileBoundaries;
+    map.showCollisionBoxes = mapOpts.showCollisionBoxes;
+    map.showOverdrawInspector = mapOpts.showOverdrawInspector;
+
+    const zoom = new ZoomControl;
+    map.addControl(zoom, 'top-right');
+
+    const nav = new MapboxGl.NavigationControl({visualizePitch:true});
+    map.addControl(nav, 'top-right');
+
+    const tmpNode = document.createElement('div');
+
+    const inspect = new MapboxInspect({
+      popup: new MapboxGl.Popup({
+        closeOnClick: false
+      }),
+      showMapPopup: true,
+      showMapPopupOnHover: false,
+      showInspectMapPopupOnHover: true,
+      showInspectButton: false,
+      blockHoverPopupOnClick: true,
+      assignLayerColor: (layerId, alpha) => {
+        return Color(colors.brightColor(layerId, alpha)).desaturate(0.5).string()
+      },
+      buildInspectStyle: (originalMapStyle, coloredLayers) => buildInspectStyle(originalMapStyle, coloredLayers, this.props.highlightedLayer),
+      renderPopup: features => {
+        if(this.props.inspectModeEnabled) {
+          return renderPopup(<FeaturePropertyPopup features={features} />, tmpNode);
+        } else {
+          return renderPopup(<FeatureLayerPopup features={features} onLayerSelect={this.props.onLayerSelect} zoom={this.state.zoom} />, tmpNode);
+        }
+      }
+    })
+    map.addControl(inspect)
 
     map.on("style.load", () => {
-      this.setState({ map });
+      this.setState({
+        map,
+        inspect,
+        zoom: map.getZoom()
+      });
+      if(this.props.inspectModeEnabled) {
+        inspect.toggleInspector();
+      }
     })
 
     map.on("data", e => {
@@ -67,36 +190,28 @@ export default class MapboxGlMap extends React.Component {
       })
     })
 
-    map.on('click', this.displayPopup.bind(this));
-    map.on('mousemove', function(e) {
-      var features = map.queryRenderedFeatures(e.point, { layers: this.layers })
-      map.getCanvas().style.cursor = (features.length) ? 'pointer' : ''
+    map.on("zoom", e => {
+      this.setState({
+        zoom: map.getZoom()
+      });
     })
   }
 
-  displayPopup(e) {
-		const features = this.state.map.queryRenderedFeatures(e.point, {
-			layers: this.layers
-		});
-
-    if(features.length < 1) return
-		const popup = new MapboxGl.Popup()
-			.setLngLat(e.lngLat)
-			.setHTML(renderPopup(features))
-			.addTo(this.state.map)
-  }
-
   render() {
-    return <div
-      ref={x => this.container = x}
-      style={{
-        position: "fixed",
-        top: 0,
-        bottom: 0,
-        height: "100%",
-        width: "100%",
-        ...this.props.style,
-      }}>
-    </div>
+    if(IS_SUPPORTED) {
+      return <div
+        className="maputnik-map__map"
+        ref={x => this.container = x}
+      ></div>
+    }
+    else {
+      return <div
+        className="maputnik-map maputnik-map--error"
+      >
+        <div className="maputnik-map__error-message">
+          Error: Cannot load MapboxGL, WebGL is either unsupported or disabled
+        </div>
+      </div>
+    }
   }
 }

src/components/map/OpenLayers3Map.jsx

@@ -1,86 +0,0 @@
-import React from 'react'
-import style from '../../libs/style.js'
-
-class OpenLayers3Map extends React.Component {
-  static propTypes = {
-    onDataChange: React.PropTypes.func,
-    mapStyle: React.PropTypes.object.isRequired,
-    accessToken: React.PropTypes.string,
-  }
-
-  static defaultProps = {
-    onMapLoaded: () => {},
-    onDataChange: () => {},
-  }
-
-  componentWillReceiveProps(nextProps) {
-    require.ensure(["openlayers", "ol-mapbox-style"], ()=> {
-      const ol = require('openlayers')
-      const olms = require('ol-mapbox-style')
-      const jsonStyle = nextProps.mapStyle
-      const styleFunc = olms.getStyleFunction(jsonStyle, 'openmaptiles', this.resolutions)
-      console.log('New style babee')
-
-      const layer = this.layer
-      layer.setStyle(styleFunc)
-      //NOTE: We need to mark the source as changed in order
-      //to trigger a rerender
-      layer.getSource().changed()
-
-      this.state.map.render()
-    })
-  }
-
-  componentDidMount() {
-    //Load OpenLayers dynamically once we need it
-    //TODO: Make this more convenient
-    require.ensure(["openlayers", "ol-mapbox-style"], ()=> {
-      console.log('Loaded OpenLayers3 renderer')
-
-      const ol = require('openlayers')
-      const olms = require('ol-mapbox-style')
-
-      const tilegrid = ol.tilegrid.createXYZ({tileSize: 512, maxZoom: 22})
-      this.resolutions = tilegrid.getResolutions()
-      this.layer = new ol.layer.VectorTile({
-        source: new ol.source.VectorTile({
-          attributions: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap contributors</a>',
-          format: new ol.format.MVT(),
-          tileGrid: tilegrid,
-          tilePixelRatio: 8,
-          url: 'https://free-0.tilehosting.com/data/v3/{z}/{x}/{y}.pbf?key=tXiQqN3lIgskyDErJCeY'
-        })
-      })
-
-      const jsonStyle = this.props.mapStyle
-      const styleFunc = olms.getStyleFunction(jsonStyle, 'openmaptiles', this.resolutions)
-      this.layer.setStyle(styleFunc)
-
-      const map = new ol.Map({
-        target: this.container,
-        layers: [this.layer],
-        view: new ol.View({
-          center: jsonStyle.center,
-          zoom: 2,
-          //zoom: jsonStyle.zoom,
-        })
-      })
-      map.addControl(new ol.control.Zoom());
-      this.setState({ map });
-    })
-  }
-
-  render() {
-    return <div
-    ref={x => this.container = x}
-    style={{
-      position: "fixed",
-      top: 0,
-      bottom: 0,
-      height: "100%",
-      width: "100%",
-    }}></div>
-  }
-}
-
-export default OpenLayers3Map

src/components/map/OpenLayersMap.jsx

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

src/components/modals/AddModal.jsx

@@ -1,11 +1,8 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 
 import Button from '../Button'
-import InputBlock from '../inputs/InputBlock'
-import StringInput from '../inputs/StringInput'
-import SelectInput from '../inputs/SelectInput'
 import Modal from './Modal'
-import colors from '../../config/colors'
 
 import LayerTypeBlock from '../layers/LayerTypeBlock'
 import LayerIdBlock from '../layers/LayerIdBlock'
@@ -14,17 +11,17 @@ import LayerSourceLayerBlock from '../layers/LayerSourceLayerBlock'
 
 class AddModal extends React.Component {
   static propTypes = {
-    mapStyle: React.PropTypes.object.isRequired,
-    onStyleChange: React.PropTypes.func.isRequired,
-    isOpen: React.PropTypes.bool.isRequired,
-    onOpenToggle: React.PropTypes.func.isRequired,
+    layers: PropTypes.array.isRequired,
+    onLayersChange: PropTypes.func.isRequired,
+    isOpen: PropTypes.bool.isRequired,
+    onOpenToggle: PropTypes.func.isRequired,
 
     // A dict of source id's and the available source layers
-    sources: React.PropTypes.object.isRequired,
+    sources: PropTypes.object.isRequired,
   }
 
-  addLayer() {
-    const changedLayers = this.props.mapStyle.layers.slice(0)
+  addLayer = () => {
+    const changedLayers = this.props.layers.slice(0)
     const layer = {
       id: this.state.id,
       type: this.state.type,
@@ -32,17 +29,14 @@ class AddModal extends React.Component {
 
     if(this.state.type !== 'background') {
       layer.source = this.state.source
-      layer['source-layer'] = this.state['source-layer']
+      if(this.state.type !== 'raster' && this.state['source-layer']) {
+        layer['source-layer'] = this.state['source-layer']
+      }
     }
 
     changedLayers.push(layer)
 
-    const changedStyle = {
-      ...this.props.mapStyle,
-      layers: changedLayers,
-    }
-
-    this.props.onStyleChange(changedStyle)
+    this.props.onLayersChange(changedLayers)
     this.props.onOpenToggle(false)
   }
 
@@ -59,48 +53,117 @@ class AddModal extends React.Component {
     }
   }
 
-  componentWillReceiveProps(nextProps) {
-    const sourceIds = Object.keys(nextProps.sources)
-    if(!this.state.source && sourceIds.length > 0) {
+  componentDidUpdate(prevProps, prevState) {
+    // Check if source is valid for new type
+    const oldType = prevState.type;
+    const newType = this.state.type;
+
+    const availableSourcesOld = this.getSources(oldType);
+    const availableSourcesNew = this.getSources(newType);
+
+    if(
+      // Type has changed
+      oldType !== newType
+      && prevState.source !== ""
+      // Was a valid source previously
+      && availableSourcesOld.indexOf(prevState.source) > -1
+      // And is not a valid source now
+      && availableSourcesNew.indexOf(this.state.source) < 0
+    ) {
+      // Clear the source
       this.setState({
-        source: sourceIds[0],
-        'source-layer': this.state['source-layer'] || nextProps.sources[sourceIds[0]][0]
-      })
+        source: ""
+      });
     }
   }
 
+  getLayersForSource(source) {
+    const sourceObj = this.props.sources[source] || {};
+    return sourceObj.layers || [];
+  }
+
+  getSources(type) {
+    const sources = [];
+
+    const types = {
+      vector: [
+        "fill",
+        "line",
+        "symbol",
+        "circle",
+        "fill-extrusion",
+        "heatmap"
+      ],
+      raster: [
+        "raster"
+      ],
+      geojson: [
+        "fill",
+        "line",
+        "symbol",
+        "circle",
+        "fill-extrusion",
+        "heatmap"
+      ]
+    }
+
+    for(let [key, val] of Object.entries(this.props.sources)) {
+      if(types[val.type] && types[val.type].indexOf(type) > -1) {
+        sources.push(key);
+      }
+    }
+
+    return sources;
+  }
+
 
   render() {
+    const sources = this.getSources(this.state.type);
+    const layers = this.getLayersForSource(this.state.source);
+
     return <Modal
       isOpen={this.props.isOpen}
       onOpenToggle={this.props.onOpenToggle}
       title={'Add Layer'}
+      data-wd-key="modal:add-layer"
     >
+      <div className="maputnik-add-layer">
       <LayerIdBlock
         value={this.state.id}
-        onChange={v => this.setState({ id: v })}
+        wdKey="add-layer.layer-id"
+        onChange={v => {
+          this.setState({ id: v })
+        }}
       />
       <LayerTypeBlock
         value={this.state.type}
+        wdKey="add-layer.layer-type"
         onChange={v => this.setState({ type: v })}
       />
       {this.state.type !== 'background' &&
       <LayerSourceBlock
-        sourceIds={Object.keys(this.props.sources)}
+        sourceIds={sources}
+        wdKey="add-layer.layer-source-block"
         value={this.state.source}
         onChange={v => this.setState({ source: v })}
       />
       }
-      {this.state.type !== 'background' &&
+      {['background', 'raster', 'hillshade', 'heatmap'].indexOf(this.state.type) < 0 &&
       <LayerSourceLayerBlock
-        sourceLayerIds={this.props.sources[this.state.source] || []}
+        isFixed={true}
+        sourceLayerIds={layers}
         value={this.state['source-layer']}
         onChange={v => this.setState({ 'source-layer': v })}
       />
       }
-      <Button onClick={this.addLayer.bind(this)}>
+      <Button
+        className="maputnik-add-layer-button"
+        onClick={this.addLayer}
+        data-wd-key="add-layer"
+      >
         Add Layer
       </Button>
+      </div>
     </Modal>
   }
 }

src/components/modals/DebugModal.js

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

src/components/modals/ExportModal.jsx

@@ -0,0 +1,112 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import Slugify from 'slugify'
+import { saveAs } from 'file-saver'
+
+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/md'
+import style from '../../libs/style'
+
+
+
+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 = {
+    mapStyle: PropTypes.object.isRequired,
+    onStyleChanged: PropTypes.func.isRequired,
+    isOpen: PropTypes.bool.isRequired,
+    onOpenToggle: PropTypes.func.isRequired,
+  }
+
+  constructor(props) {
+    super(props);
+  }
+
+  downloadStyle() {
+    const tokenStyle = format(stripAccessTokens(style.replaceAccessTokens(this.props.mapStyle)));
+
+    const blob = new Blob([tokenStyle], {type: "application/json;charset=utf-8"});
+    let exportName;
+    if(this.props.mapStyle.name) {
+      exportName = Slugify(this.props.mapStyle.name, {
+                     replacement: '_',
+                     lower: true
+                   })
+    } else {
+      exportName = this.props.mapStyle.id
+    }
+    saveAs(blob, exportName + ".json");
+  }
+
+  changeMetadataProperty(property, value) {
+    const changedStyle = {
+      ...this.props.mapStyle,
+      metadata: {
+        ...this.props.mapStyle.metadata,
+        [property]: value
+      }
+    }
+    this.props.onStyleChanged(changedStyle)
+  }
+
+
+  render() {
+    return <Modal
+      data-wd-key="export-modal"
+      isOpen={this.props.isOpen}
+      onOpenToggle={this.props.onOpenToggle}
+      title={'Export Style'}
+    >
+
+      <div className="maputnik-modal-section">
+        <h4>Download Style</h4>
+        <p>
+          Download a JSON style to your computer.
+        </p>
+
+        <p>
+          <InputBlock label={"MapTiler Access Token: "}>
+            <StringInput
+              value={(this.props.mapStyle.metadata || {})['maputnik:openmaptiles_access_token']}
+              onChange={this.changeMetadataProperty.bind(this, "maputnik:openmaptiles_access_token")}
+            />
+          </InputBlock>
+          <InputBlock label={"Mapbox Access Token: "}>
+            <StringInput
+              value={(this.props.mapStyle.metadata || {})['maputnik:mapbox_access_token']}
+              onChange={this.changeMetadataProperty.bind(this, "maputnik:mapbox_access_token")}
+            />
+          </InputBlock>
+          <InputBlock label={"Thunderforest Access Token: "}>
+            <StringInput
+              value={(this.props.mapStyle.metadata || {})['maputnik:thunderforest_access_token']}
+              onChange={this.changeMetadataProperty.bind(this, "maputnik:thunderforest_access_token")}
+            />
+          </InputBlock>
+        </p>
+
+        <Button onClick={this.downloadStyle.bind(this)}>
+          <MdFileDownload />
+          Download
+        </Button>
+      </div>
+
+    </Modal>
+  }
+}
+
+export default ExportModal

src/components/modals/LoadingModal.jsx

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

src/components/modals/Modal.jsx

@@ -1,48 +1,72 @@
 import React from 'react'
+import PropTypes from 'prop-types'
+import {MdClose} from 'react-icons/md'
+import AriaModal from 'react-aria-modal'
 
-import CloseIcon from 'react-icons/lib/md/close'
-
-import Overlay from './Overlay'
-import colors from '../../config/colors'
-import { margins, fontSizes } from '../../config/scales'
 
 class Modal extends React.Component {
   static propTypes = {
-    isOpen: React.PropTypes.bool.isRequired,
-    title: React.PropTypes.string.isRequired,
-    onOpenToggle: React.PropTypes.func.isRequired,
+    "data-wd-key": PropTypes.string,
+    isOpen: PropTypes.bool.isRequired,
+    title: PropTypes.string.isRequired,
+    onOpenToggle: PropTypes.func.isRequired,
+    children: PropTypes.node,
+    underlayClickExits: PropTypes.bool,
+    underlayProps: PropTypes.object,
+  }
+
+  static defaultProps = {
+    underlayClickExits: true
+  }
+
+  // See <https://github.com/maputnik/editor/issues/416>
+  onClose = () => {
+    if (document.activeElement) {
+      document.activeElement.blur();
+    }
+
+    setImmediate(() => {
+      this.props.onOpenToggle(false);
+    });
+  }
+
+  getApplicationNode() {
+    return document.getElementById('app');
   }
 
   render() {
-    return <Overlay isOpen={this.props.isOpen}>
-      <div style={{
-        minWidth: 350,
-        maxWidth: 600,
-        backgroundColor: colors.black,
-        boxShadow: '0px 0px 5px 0px rgba(0,0,0,0.3)',
-      }}>
-        <div style={{
-          backgroundColor: colors.gray,
-          display: 'flex',
-          flexDirection: 'row',
-          padding: margins[2],
-          fontSize: fontSizes[4],
-        }}>
-          {this.props.title}
-          <span style={{flexGrow: 1}} />
-          <a
-            onClick={() => this.props.onOpenToggle(false)}
-            style={{ cursor: 'pointer' }} >
-            <CloseIcon />
-          </a>
+    if(this.props.isOpen) {
+      return <AriaModal
+        titleText={this.props.title}
+        underlayClickExits={this.props.underlayClickExits}
+        underlayProps={this.props.underlayProps}
+        getApplicationNode={this.getApplicationNode}
+        data-wd-key={this.props["data-wd-key"]}
+        verticallyCenter={true}
+        onExit={this.onClose}
+      >
+        <div className="maputnik-modal"
+          data-wd-key={this.props["data-wd-key"]}
+        >
+          <header className="maputnik-modal-header">
+            <h1 className="maputnik-modal-header-title">{this.props.title}</h1>
+            <span className="maputnik-modal-header-space"></span>
+            <button className="maputnik-modal-header-toggle"
+              onClick={this.onClose}
+              data-wd-key={this.props["data-wd-key"]+".close-modal"}
+            >
+              <MdClose />
+            </button>
+          </header>
+          <div className="maputnik-modal-scroller">
+            <div className="maputnik-modal-content">{this.props.children}</div>
+          </div>
         </div>
-        <div style={{
-          padding: margins[2],
-        }}>
-          {this.props.children}
-        </div>
-      </div>
-    </Overlay>
+      </AriaModal>
+    }
+    else {
+      return false;
+    }
   }
 }
 

src/components/modals/OpenModal.jsx

@@ -1,63 +1,42 @@
 import React from 'react'
+import PropTypes from 'prop-types'
+import LoadingModal from './LoadingModal'
 import Modal from './Modal'
-import Heading from '../Heading'
 import Button from '../Button'
-import Paragraph from '../Paragraph'
 import FileReaderInput from 'react-file-reader-input'
-import request from 'request'
 
-import FileUploadIcon from 'react-icons/lib/md/file-upload'
-import AddIcon from 'react-icons/lib/md/add-circle-outline'
+import {MdFileUpload} from 'react-icons/md'
+import {MdAddCircleOutline} from 'react-icons/md'
 
 import style from '../../libs/style.js'
-import colors from '../../config/colors'
-import { margins, fontSizes } from '../../config/scales'
 import publicStyles from '../../config/styles.json'
 
 class PublicStyle extends React.Component {
   static propTypes = {
-    url: React.PropTypes.string.isRequired,
-    thumbnailUrl: React.PropTypes.string.isRequired,
-    title: React.PropTypes.string.isRequired,
-    onSelect: React.PropTypes.func.isRequired,
+    url: PropTypes.string.isRequired,
+    thumbnailUrl: PropTypes.string.isRequired,
+    title: PropTypes.string.isRequired,
+    onSelect: PropTypes.func.isRequired,
   }
 
   render() {
-    return <div style={{
-        verticalAlign: 'top',
-        marginTop: margins[2],
-        marginRight: margins[2],
-        backgroundColor: colors.gray,
-        display: 'inline-block',
-        width: 180,
-        fontSize: fontSizes[4],
-        color: colors.lowgray,
-    }}>
+    return <div className="maputnik-public-style">
       <Button
+        className="maputnik-public-style-button"
+        aria-label={this.props.title}
         onClick={() => this.props.onSelect(this.props.url)}
-        style={{
-          backgroundColor: 'transparent',
-          padding: margins[2],
-          display: 'block',
-        }}
       >
-        <div style={{
-          display: 'flex',
-          flexDirection: 'row',
-        }}>
-          <span style={{fontWeight: 700}}>{this.props.title}</span>
-          <span style={{flexGrow: 1}} />
-          <AddIcon />
-        </div>
-        <img
+        <header className="maputnik-public-style-header">
+          <h4>{this.props.title}</h4>
+          <span className="maputnik-space" />
+          <MdAddCircleOutline />
+        </header>
+        <div
+          className="maputnik-public-style-thumbnail"
           style={{
-            display: 'block',
-            marginTop: margins[1],
-            maxWidth: '100%',
+            backgroundImage: `url(${this.props.thumbnailUrl})`
           }}
-          src={this.props.thumbnailUrl}
-          alt={this.props.title}
-        />
+        ></div>
       </Button>
     </div>
   }
@@ -65,38 +44,128 @@ class PublicStyle extends React.Component {
 
 class OpenModal extends React.Component {
   static propTypes = {
-    isOpen: React.PropTypes.bool.isRequired,
-    onOpenToggle: React.PropTypes.func.isRequired,
-    onStyleOpen: React.PropTypes.func.isRequired,
+    isOpen: PropTypes.bool.isRequired,
+    onOpenToggle: PropTypes.func.isRequired,
+    onStyleOpen: PropTypes.func.isRequired,
   }
 
-  onStyleSelect(styleUrl) {
-    request({
-      url: styleUrl,
-      withCredentials: false,
-    }, (error, response, body) => {
-        if (!error && response.statusCode == 200) {
-          const mapStyle = style.ensureStyleValidity(JSON.parse(body))
-          console.log('Loaded style ', mapStyle.id)
-          this.props.onStyleOpen(mapStyle)
-        } else {
-          console.warn('Could not open the style URL', styleUrl)
-        }
+  constructor(props) {
+    super(props);
+    this.state = {
+      styleUrl: ""
+    };
+  }
+
+  clearError() {
+    this.setState({
+      error: null
     })
   }
 
-  onUpload(_, files) {
+  onCancelActiveRequest(e) {
+    // Else the click propagates to the underlying modal
+    if(e) e.stopPropagation();
+
+    if(this.state.activeRequest) {
+      this.state.activeRequest.abort();
+      this.setState({
+        activeRequest: null,
+        activeRequestUrl: null
+      });
+    }
+  }
+
+  onStyleSelect = (styleUrl) => {
+    this.clearError();
+
+    let canceled;
+
+    const activeRequest = fetch(styleUrl, {
+      mode: 'cors',
+      credentials: "same-origin"
+    })
+    .then(function(response) {
+      return response.json();
+    })
+    .then((body) => {
+      if(canceled) {
+        return;
+      }
+
+      this.setState({
+        activeRequest: null,
+        activeRequestUrl: null
+      });
+
+      const mapStyle = style.ensureStyleValidity(body)
+      console.log('Loaded style ', mapStyle.id)
+      this.props.onStyleOpen(mapStyle)
+      this.onOpenToggle()
+    })
+    .catch((err) => {
+      this.setState({
+        error: `Failed to load: '${styleUrl}'`,
+        activeRequest: null,
+        activeRequestUrl: null
+      });
+      console.error(err);
+      console.warn('Could not open the style URL', styleUrl)
+    })
+
+    this.setState({
+      activeRequest: {
+        abort: function() {
+          canceled = true;
+        }
+      },
+      activeRequestUrl: styleUrl
+    })
+  }
+
+  onOpenUrl = () => {
+    const url = this.styleUrlElement.value;
+    this.onStyleSelect(url);
+  }
+
+  onUpload = (_, files) => {
     const [e, file] = files[0];
     const reader = new FileReader();
+
+    this.clearError();
+
     reader.readAsText(file, "UTF-8");
     reader.onload = e => {
-      let mapStyle = JSON.parse(e.target.result)
+      let mapStyle;
+      try {
+        mapStyle = JSON.parse(e.target.result)
+      }
+      catch(err) {
+        this.setState({
+          error: err.toString()
+        });
+        return;
+      }
       mapStyle = style.ensureStyleValidity(mapStyle)
       this.props.onStyleOpen(mapStyle);
+      this.onOpenToggle();
     }
     reader.onerror = e => console.log(e.target);
   }
 
+  onOpenToggle() {
+    this.setState({
+      styleUrl: ""
+    });
+    this.clearError();
+    this.props.onOpenToggle();
+  }
+
+  onChangeUrl = () => {
+    this.setState({
+      styleUrl: this.styleUrlElement.value
+    });
+  }
+
   render() {
     const styleOptions = publicStyles.map(style => {
       return <PublicStyle
@@ -104,32 +173,80 @@ class OpenModal extends React.Component {
         url={style.url}
         title={style.title}
         thumbnailUrl={style.thumbnail}
-        onSelect={this.onStyleSelect.bind(this)}
+        onSelect={this.onStyleSelect}
       />
     })
 
-    return <Modal
-      isOpen={this.props.isOpen}
-      onOpenToggle={this.props.onOpenToggle}
-      title={'Open Style'}
-    >
-      <Heading level={4}>Upload Style</Heading>
-      <Paragraph>
-        Upload a JSON style from your computer.
-      </Paragraph>
-      <FileReaderInput onChange={this.onUpload.bind(this)}>
-        <Button>
-          <FileUploadIcon />
-          Upload
-        </Button>
-      </FileReaderInput>
+    let errorElement;
+    if(this.state.error) {
+      errorElement = (
+        <div className="maputnik-modal-error">
+          {this.state.error}
+          <a href="#" onClick={() => this.clearError()} className="maputnik-modal-error-close">×</a>
+        </div>
+      );
+    }
 
-      <Heading level={4}>Gallery Styles</Heading>
-      <Paragraph>
-        Open one of the publicly available styles to start from.
-      </Paragraph>
-      {styleOptions}
-    </Modal>
+    return  (
+      <div>
+        <Modal
+          data-wd-key="open-modal"
+          isOpen={this.props.isOpen}
+          onOpenToggle={() => this.onOpenToggle()}
+          title={'Open Style'}
+        >
+          {errorElement}
+          <section className="maputnik-modal-section">
+            <h2>Upload Style</h2>
+            <p>Upload a JSON style from your computer.</p>
+            <FileReaderInput onChange={this.onUpload} tabIndex="-1">
+              <Button className="maputnik-upload-button"><MdFileUpload /> Upload</Button>
+            </FileReaderInput>
+          </section>
+
+          <section className="maputnik-modal-section">
+            <h2>Load from URL</h2>
+            <p>
+              Load from a URL. Note that the URL must have <a href="https://enable-cors.org" target="_blank" rel="noopener noreferrer">CORS enabled</a>.
+            </p>
+            <input
+              data-wd-key="open-modal.url.input"
+              type="text"
+              ref={(input) => this.styleUrlElement = input}
+              className="maputnik-input"
+              placeholder="Enter URL..."
+              value={this.state.styleUrl}
+              onChange={this.onChangeUrl}
+            />
+            <div>
+              <Button
+                data-wd-key="open-modal.url.button"
+                className="maputnik-big-button"
+                onClick={this.onOpenUrl}
+                disabled={this.state.styleUrl.length < 1}
+              >Open URL</Button>
+            </div>
+          </section>
+
+          <section className="maputnik-modal-section maputnik-modal-section--shrink">
+            <h2>Gallery Styles</h2>
+            <p>
+              Open one of the publicly available styles to start from.
+            </p>
+            <div className="maputnik-style-gallery-container">
+            {styleOptions}
+            </div>
+          </section>
+        </Modal>
+
+        <LoadingModal
+          isOpen={!!this.state.activeRequest}
+          title={'Loading style'}
+          onCancel={(e) => this.onCancelActiveRequest(e)}
+          message={"Loading: "+this.state.activeRequestUrl}
+        />
+      </div>
+    )
   }
 }
 

src/components/modals/Overlay.jsx

@@ -1,53 +0,0 @@
-import React from 'react'
-
-class ViewportOverlay extends React.Component {
-  static propTypes = {
-    style: React.PropTypes.object
-  }
-
-  render() {
-    const overlayStyle = {
-      position: 'fixed',
-      top: 0,
-      right: 0,
-      bottom: 0,
-      left: 0,
-      zIndex: 2,
-      opacity: 0.875,
-      backgroundColor: 'rgb(28, 31, 36)',
-      ...this.props.style
-    }
-
-    return <div style={overlayStyle} />
-  }
-}
-
-class Overlay extends React.Component {
-  static propTypes = {
-    isOpen: React.PropTypes.bool.isRequired,
-    children: React.PropTypes.element.isRequired
-  }
-
-  render() {
-    return <div style={{
-      top: 0,
-      right: 0,
-      bottom: 0,
-      left: 0,
-      position: 'fixed',
-      display: this.props.isOpen ? 'flex' : 'none',
-      flexDirection: 'column',
-      alignItems: 'center',
-      justifyContent: 'center'
-    }}>
-      <ViewportOverlay />
-      <div style={{
-        zIndex: 3,
-      }}>
-      {this.props.children}
-      </div>
-    </div>
-  }
-}
-
-export default Overlay

src/components/modals/SettingsModal.jsx

@@ -1,21 +1,19 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 
+import {latest} from '@mapbox/mapbox-gl-style-spec'
 import InputBlock from '../inputs/InputBlock'
 import StringInput from '../inputs/StringInput'
 import SelectInput from '../inputs/SelectInput'
 import Modal from './Modal'
-import colors from '../../config/colors'
 
 class SettingsModal extends React.Component {
   static propTypes = {
-    mapStyle: React.PropTypes.object.isRequired,
-    onStyleChanged: React.PropTypes.func.isRequired,
-    isOpen: React.PropTypes.bool.isRequired,
-    onOpenToggle: React.PropTypes.func.isRequired,
-  }
-
-  constructor(props) {
-    super(props);
+    mapStyle: PropTypes.object.isRequired,
+    onStyleChanged: PropTypes.func.isRequired,
+    onChangeMetadataProperty: PropTypes.func.isRequired,
+    isOpen: PropTypes.bool.isRequired,
+    onOpenToggle: PropTypes.func.isRequired,
   }
 
   changeStyleProperty(property, value) {
@@ -26,69 +24,84 @@ class SettingsModal extends React.Component {
     this.props.onStyleChanged(changedStyle)
   }
 
-  changeMetadataProperty(property, value) {
-    const changedStyle = {
-      ...this.props.mapStyle,
-      metadata: {
-        ...this.props.mapStyle.metadata,
-        [property]: value
-      }
-    }
-    this.props.onStyleChanged(changedStyle)
-  }
-
   render() {
     const metadata = this.props.mapStyle.metadata || {}
+    const {onChangeMetadataProperty} = this.props;
     const inputProps = { }
     return <Modal
+      data-wd-key="modal-settings"
       isOpen={this.props.isOpen}
       onOpenToggle={this.props.onOpenToggle}
-      title={'StyleSettings'}
+      title={'Style Settings'}
     >
-      <InputBlock label={"Name"}>
+      <div style={{minWidth: 350}}>
+      <InputBlock label={"Name"} doc={latest.$root.name.doc}>
         <StringInput {...inputProps}
+          data-wd-key="modal-settings.name" 
           value={this.props.mapStyle.name}
           onChange={this.changeStyleProperty.bind(this, "name")}
         />
       </InputBlock>
-      <InputBlock label={"Owner"}>
+      <InputBlock label={"Owner"} doc={"Owner ID of the style. Used by Mapbox or future style APIs."}>
         <StringInput {...inputProps}
+          data-wd-key="modal-settings.owner" 
           value={this.props.mapStyle.owner}
           onChange={this.changeStyleProperty.bind(this, "owner")}
         />
       </InputBlock>
-      <InputBlock label={"Sprite URL"}>
+      <InputBlock label={"Sprite URL"} doc={latest.$root.sprite.doc}>
         <StringInput {...inputProps}
+          data-wd-key="modal-settings.sprite" 
           value={this.props.mapStyle.sprite}
           onChange={this.changeStyleProperty.bind(this, "sprite")}
         />
       </InputBlock>
 
-      <InputBlock label={"Glyphs URL"}>
+      <InputBlock label={"Glyphs URL"} doc={latest.$root.glyphs.doc}>
         <StringInput {...inputProps}
+          data-wd-key="modal-settings.glyphs" 
           value={this.props.mapStyle.glyphs}
           onChange={this.changeStyleProperty.bind(this, "glyphs")}
         />
       </InputBlock>
 
-      <InputBlock label={"Access Token"}>
+      <InputBlock label={"Mapbox Access Token"} doc={"Public access token for Mapbox services."}>
         <StringInput {...inputProps}
-          value={metadata['maputnik:access_token']}
-          onChange={this.changeMetadataProperty.bind(this, "maputnik:access_token")}
+          data-wd-key="modal-settings.maputnik:mapbox_access_token" 
+          value={metadata['maputnik:mapbox_access_token']}
+          onChange={onChangeMetadataProperty.bind(this, "maputnik:mapbox_access_token")}
         />
       </InputBlock>
 
-      <InputBlock label={"Style Renderer"}>
-        <SelectInput {...inputProps}
-          options={[
-            ['mbgljs', 'MapboxGL JS'],
-            ['ol3', 'Open Layers 3'],
-            ['inspection', 'Inspection Mode'],
-          ]}
-          value={metadata['maputnik:renderer'] || 'mbgljs'}
-          onChange={this.changeMetadataProperty.bind(this, 'maputnik:renderer')}
+      <InputBlock label={"MapTiler Access Token"} doc={"Public access token for MapTiler Cloud."}>
+        <StringInput {...inputProps}
+          data-wd-key="modal-settings.maputnik:openmaptiles_access_token" 
+          value={metadata['maputnik:openmaptiles_access_token']}
+          onChange={onChangeMetadataProperty.bind(this, "maputnik:openmaptiles_access_token")}
         />
       </InputBlock>
+
+      <InputBlock label={"Thunderforest Access Token"} doc={"Public access token for Thunderforest services."}>
+        <StringInput {...inputProps}
+          data-wd-key="modal-settings.maputnik:thunderforest_access_token" 
+          value={metadata['maputnik:thunderforest_access_token']}
+          onChange={onChangeMetadataProperty.bind(this, "maputnik:thunderforest_access_token")}
+        />
+      </InputBlock>
+
+      <InputBlock label={"Style Renderer"} doc={"Choose the default Maputnik renderer for this style."}>
+        <SelectInput {...inputProps}
+          data-wd-key="modal-settings.maputnik:renderer" 
+          options={[
+            ['mbgljs', 'MapboxGL JS'],
+            ['ol', 'Open Layers (experimental)'],
+          ]}
+          value={metadata['maputnik:renderer'] || 'mbgljs'}
+          onChange={onChangeMetadataProperty.bind(this, 'maputnik:renderer')}
+        />
+      </InputBlock>
+
+      </div>
     </Modal>
   }
 }

src/components/modals/ShortcutsModal.jsx

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

src/components/modals/SourcesModal.jsx

@@ -1,106 +1,86 @@
 import React from 'react'
+import PropTypes from 'prop-types'
+import {latest} from '@mapbox/mapbox-gl-style-spec'
 import Modal from './Modal'
-import Heading from '../Heading'
 import Button from '../Button'
-import Paragraph from '../Paragraph'
 import InputBlock from '../inputs/InputBlock'
 import StringInput from '../inputs/StringInput'
 import SelectInput from '../inputs/SelectInput'
 import SourceTypeEditor from '../sources/SourceTypeEditor'
 
 import style from '../../libs/style'
+import { deleteSource, addSource, changeSource } from '../../libs/source'
 import publicSources from '../../config/tilesets.json'
-import colors from '../../config/colors'
-import { margins, fontSizes } from '../../config/scales'
 
-import AddIcon from 'react-icons/lib/md/add-circle-outline'
-import DeleteIcon from 'react-icons/lib/md/delete'
+import {MdAddCircleOutline, MdDelete} from 'react-icons/md'
 
 class PublicSource extends React.Component {
   static propTypes = {
-    id: React.PropTypes.string.isRequired,
-    type: React.PropTypes.string.isRequired,
-    title: React.PropTypes.string.isRequired,
-    onSelect: React.PropTypes.func.isRequired,
+    id: PropTypes.string.isRequired,
+    type: PropTypes.string.isRequired,
+    title: PropTypes.string.isRequired,
+    onSelect: PropTypes.func.isRequired,
   }
 
   render() {
-    return <div style={{
-        verticalAlign: 'top',
-        marginTop: margins[2],
-        marginRight: margins[2],
-        backgroundColor: colors.gray,
-        display: 'inline-block',
-        width: 240,
-        fontSize: fontSizes[4],
-        color: colors.lowgray,
-    }}>
-      <Button
-        onClick={() => this.props.onSelect(this.props.id)}
-        style={{
-          backgroundColor: 'transparent',
-          padding: margins[2],
-          display: 'flex',
-          flexDirection: 'row',
-        }}
-      >
-        <div>
-          <span style={{fontWeight: 700}}>{this.props.title}</span>
-          <br/>
-          <span style={{fontSize: fontSizes[5]}}>#{this.props.id}</span>
-        </div>
-        <span style={{flexGrow: 1}} />
-        <AddIcon />
-      </Button>
+    return <div className="maputnik-public-source">
+			<Button
+        className="maputnik-public-source-select"
+				onClick={() => this.props.onSelect(this.props.id)}
+			>
+				<div className="maputnik-public-source-info">
+					<p className="maputnik-public-source-name">{this.props.title}</p>
+					<p className="maputnik-public-source-id">#{this.props.id}</p>
+				</div>
+				<span className="maputnik-space" />
+				<MdAddCircleOutline />
+			</Button>
     </div>
   }
 }
 
 function editorMode(source) {
-  if(source.type === 'geojson') return ' geojson'
-  if(source.type === 'vector' && source.tiles) {
-    return 'tilexyz'
+  if(source.type === 'raster') {
+    if(source.tiles) return 'tilexyz_raster'
+    return 'tilejson_raster'
   }
-  return 'tilejson'
+  if(source.type === 'raster-dem') {
+    if(source.tiles) return 'tilexyz_raster-dem'
+    return 'tilejson_raster-dem'
+  }
+  if(source.type === 'vector') {
+    if(source.tiles) return 'tilexyz_vector'
+    return 'tilejson_vector'
+  }
+  if(source.type === 'geojson') return 'geojson'
+  return null
 }
 
 class ActiveSourceTypeEditor extends React.Component {
   static propTypes = {
-    sourceId: React.PropTypes.string.isRequired,
-    source: React.PropTypes.object.isRequired,
-    onSourceDelete: React.PropTypes.func.isRequired,
-    onSourceChange: React.PropTypes.func.isRequired,
+    sourceId: PropTypes.string.isRequired,
+    source: PropTypes.object.isRequired,
+    onDelete: PropTypes.func.isRequired,
+    onChange: PropTypes.func.isRequired,
   }
 
   render() {
     const inputProps = { }
-    return <div style={{
-    }}>
-      <div style={{
-        backgroundColor: colors.gray,
-        color: colors.lowgray,
-        padding: margins[1],
-        display: 'flex',
-        fontSize: fontSizes[4],
-        flexDirection: 'row',
-      }}>
-        <span style={{fontWeight: 700, fontSize: fontSizes[4], lineHeight: 2}}>#{this.props.sourceId}</span>
-        <span style={{flexGrow: 1}} />
+    return <div className="maputnik-active-source-type-editor">
+      <div className="maputnik-active-source-type-editor-header">
+        <span className="maputnik-active-source-type-editor-header-id">#{this.props.sourceId}</span>
+        <span className="maputnik-space" />
         <Button
-          onClick={()=> this.props.onSourceDelete(this.props.sourceId)}
+          className="maputnik-active-source-type-editor-header-delete"
+          onClick={()=> this.props.onDelete(this.props.sourceId)}
           style={{backgroundColor: 'transparent'}}
         >
-          <DeleteIcon />
+          <MdDelete />
         </Button>
       </div>
-      <div style={{
-        borderColor: colors.gray,
-        borderWidth: 2,
-        borderStyle: 'solid',
-        padding: margins[1],
-      }}>
+      <div className="maputnik-active-source-type-editor-content">
         <SourceTypeEditor
-          onChange={this.props.onSourceChange}
+          onChange={this.props.onChange}
           mode={editorMode(this.props.source)}
           source={this.props.source}
         />
@@ -111,15 +91,15 @@ class ActiveSourceTypeEditor extends React.Component {
 
 class AddSource extends React.Component {
   static propTypes = {
-    onSourceAdd: React.PropTypes.func.isRequired,
+    onAdd: PropTypes.func.isRequired,
   }
 
   constructor(props) {
     super(props)
     this.state = {
-      mode: 'tilejson',
+      mode: 'tilejson_vector',
       sourceId: style.generateId(),
-      source: this.defaultSource('tilejson'),
+      source: this.defaultSource('tilejson_vector'),
     }
   }
 
@@ -130,51 +110,71 @@ class AddSource extends React.Component {
         type: 'geojson',
         data: source.data || 'http://localhost:3000/geojson.json'
       }
-      case 'tilejson': return {
+      case 'tilejson_vector': return {
         type: 'vector',
         url: source.url || 'http://localhost:3000/tilejson.json'
       }
-      case 'tilexyz': return {
+      case 'tilexyz_vector': return {
         type: 'vector',
         tiles: source.tiles || ['http://localhost:3000/{x}/{y}/{z}.pbf'],
-        minZoom: source.minZoom || 0,
-        maxZoom: source.maxZoom || 14
+        minZoom: source.minzoom || 0,
+        maxZoom: source.maxzoom || 14
+      }
+      case 'tilejson_raster': return {
+        type: 'raster',
+        url: source.url || 'http://localhost:3000/tilejson.json'
+      }
+      case 'tilexyz_raster': return {
+        type: 'raster',
+        tiles: source.tiles || ['http://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'
+      }
+      case 'tilexyz_raster-dem': return {
+        type: 'raster-dem',
+        tiles: source.tiles || ['http://localhost:3000/{x}/{y}/{z}.pbf'],
+        minzoom: source.minzoom || 0,
+        maxzoom: source.maxzoom || 14
       }
       default: return {}
     }
   }
 
-  onSourceChange(source) {
-    this.setState({
-      source: source
-    })
-  }
-
   render() {
-    return <div>
-      <InputBlock label={"Source ID"}>
+    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."}>
         <StringInput
           value={this.state.sourceId}
           onChange={v => this.setState({ sourceId: v})}
         />
       </InputBlock>
-      <InputBlock label={"Source Type"}>
+      <InputBlock label={"Source Type"} doc={latest.source_vector.type.doc}>
         <SelectInput
           options={[
             ['geojson', 'GeoJSON'],
-            ['tilejson', 'Vector (TileJSON URL)'],
-            ['tilexyz', 'Vector (XYZ URLs)'],
+            ['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)'],
           ]}
           onChange={mode => this.setState({mode: mode, source: this.defaultSource(mode)})}
           value={this.state.mode}
         />
       </InputBlock>
       <SourceTypeEditor
-        onChange={this.onSourceChange.bind(this)}
+        onChange={src => this.setState({ source: src })}
         mode={this.state.mode}
         source={this.state.source}
       />
-      <Button onClick={() => this.props.onSourceAdd(this.state.sourceId, this.state.source)}>
+      <Button
+        className="maputnik-add-source-button"
+				onClick={() => this.props.onAdd(this.state.sourceId, this.state.source)}>
         Add Source
       </Button>
     </div>
@@ -183,35 +183,10 @@ class AddSource extends React.Component {
 
 class SourcesModal extends React.Component {
   static propTypes = {
-    mapStyle: React.PropTypes.object.isRequired,
-    isOpen: React.PropTypes.bool.isRequired,
-    onOpenToggle: React.PropTypes.func.isRequired,
-    onStyleChanged: React.PropTypes.func.isRequired,
-  }
-
-  onSourceAdd(sourceId, source) {
-    const changedSources = {
-      ...this.props.mapStyle.sources,
-      [sourceId]: source
-    }
-
-    const changedStyle = {
-      ...this.props.mapStyle,
-      sources: changedSources
-    }
-
-    this.props.onStyleChanged(changedStyle)
-  }
-
-  deleteSource(sourceId) {
-    const remainingSources = { ...this.props.mapStyle.sources}
-    delete remainingSources[sourceId]
-
-    const changedStyle = {
-      ...this.props.mapStyle,
-      sources: remainingSources
-    }
-    this.props.onStyleChanged(changedStyle)
+    mapStyle: PropTypes.object.isRequired,
+    isOpen: PropTypes.bool.isRequired,
+    onOpenToggle: PropTypes.func.isRequired,
+    onStyleChanged: PropTypes.func.isRequired,
   }
 
   stripTitle(source) {
@@ -221,24 +196,26 @@ class SourcesModal extends React.Component {
   }
 
   render() {
-    const activeSources = Object.keys(this.props.mapStyle.sources).map(sourceId => {
-      const source = this.props.mapStyle.sources[sourceId]
+    const mapStyle = this.props.mapStyle
+    const activeSources = Object.keys(mapStyle.sources).map(sourceId => {
+      const source = mapStyle.sources[sourceId]
       return <ActiveSourceTypeEditor
         key={sourceId}
         sourceId={sourceId}
         source={source}
-        onSourceDelete={this.deleteSource.bind(this)}
+        onChange={src => this.props.onStyleChanged(changeSource(mapStyle, sourceId, src))}
+        onDelete={() => this.props.onStyleChanged(deleteSource(mapStyle, sourceId))}
       />
     })
 
-    const tilesetOptions = Object.keys(publicSources).filter(sourceId => !(sourceId in this.props.mapStyle.sources)).map(sourceId => {
+    const tilesetOptions = Object.keys(publicSources).filter(sourceId => !(sourceId in mapStyle.sources)).map(sourceId => {
       const source = publicSources[sourceId]
       return <PublicSource
         key={sourceId}
         id={sourceId}
         type={source.type}
         title={source.title}
-        onSelect={() => this.onSourceAdd(sourceId, this.stripTitle(source))}
+        onSelect={() => this.props.onStyleChanged(addSource(mapStyle, sourceId, this.stripTitle(source)))}
       />
     })
 
@@ -248,21 +225,30 @@ class SourcesModal extends React.Component {
       onOpenToggle={this.props.onOpenToggle}
       title={'Sources'}
     >
-      <Heading level={4}>Active Sources</Heading>
-      {activeSources}
-
-      <Heading level={4}>Add New Source</Heading>
-      <div style={{maxWidth: 300}}>
-        <p style={{color: colors.lowgray, fontSize: fontSizes[5]}}>Add a new source to your style. You can only choose the source type and id at creation time!</p>
-        <AddSource onSourceAdd={this.onSourceAdd.bind(this)} />
+      <div className="maputnik-modal-section">
+        <h4>Active Sources</h4>
+        {activeSources}
       </div>
 
-      <Heading level={4}>Choose Public Source</Heading>
-      <Paragraph>
-        Add one of the publicly availble sources to your style.
-      </Paragraph>
-      <div style={{maxwidth: 500}}>
-      {tilesetOptions}
+      <div className="maputnik-modal-section">
+        <h4>Choose Public Source</h4>
+        <p>
+          Add one of the publicly available sources to your style.
+        </p>
+        <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">
+				<h4>Add New Source</h4>
+				<p>Add a new source to your style. You can only choose the source type and id at creation time!</p>
+				<AddSource
+					onAdd={(sourceId, source) => this.props.onStyleChanged(addSource(mapStyle, sourceId, source))}
+				/>
       </div>
     </Modal>
   }

src/components/modals/SurveyModal.jsx

@@ -0,0 +1,39 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import Button from '../Button'
+import Modal from './Modal'
+
+import logoImage from 'maputnik-design/logos/logo-color.svg'
+
+class SurveyModal extends React.Component {
+  static propTypes = {
+    isOpen: PropTypes.bool.isRequired,
+    onOpenToggle: PropTypes.func.isRequired,
+  }
+
+  onClick = () => {
+    window.open('https://gregorywolanski.typeform.com/to/cPgaSY', '_blank');
+
+    this.props.onOpenToggle();
+  }
+
+  render() {
+    return <Modal
+      data-wd-key="modal-survey"
+      isOpen={this.props.isOpen}
+      onOpenToggle={this.props.onOpenToggle}
+      title="Maputnik Survey"
+    >
+      <div className="maputnik-modal-survey">
+        <img className="maputnik-modal-survey__logo" src={logoImage} alt="" width="128" />
+        <h1>You + Maputnik = Maputnik better for you</h1>
+        <p className="maputnik-modal-survey__description">We don’t track you, so we don’t know how you use Maputnik. Help us make Maputnik better for you by completing a 7–minute survey carried out by our contributing designer.</p>
+        <Button onClick={this.onClick} className="maputnik-big-button maputnik-white-button maputnik-wide-button">Take the Maputnik Survey</Button>
+        <p className="maputnik-modal-survey__footnote">It takes 7 minutes, tops! Every question is optional.</p>
+      </div>
+    </Modal>
+  }
+}
+
+export default SurveyModal

src/components/sources/SourceTypeEditor.jsx

@@ -1,40 +1,59 @@
 import React from 'react'
+import PropTypes from 'prop-types'
+import {latest} from '@mapbox/mapbox-gl-style-spec'
 import InputBlock from '../inputs/InputBlock'
 import StringInput from '../inputs/StringInput'
 import NumberInput from '../inputs/NumberInput'
+import SelectInput from '../inputs/SelectInput'
+
 
 class TileJSONSourceEditor extends React.Component {
   static propTypes = {
-    source: React.PropTypes.object.isRequired,
-    onChange: React.PropTypes.func,
+    source: PropTypes.object.isRequired,
+    onChange: PropTypes.func.isRequired,
+    children: PropTypes.node,
   }
 
   render() {
-    return <InputBlock label={"TileJSON URL"}>
-      <StringInput
-        value={this.props.source.url}
-        onChange={url => this.props.onChange({
-          ...this.props.source,
-          url: url
-        })}
-      />
-    </InputBlock>
+    return <div>
+      <InputBlock label={"TileJSON URL"} doc={latest.source_vector.url.doc}>
+        <StringInput
+          value={this.props.source.url}
+          onChange={url => this.props.onChange({
+            ...this.props.source,
+            url: url
+          })}
+        />
+      </InputBlock>
+      {this.props.children}
+    </div>
   }
 }
 
 class TileURLSourceEditor extends React.Component {
   static propTypes = {
-    source: React.PropTypes.object.isRequired,
-    onChange: React.PropTypes.func,
+    source: PropTypes.object.isRequired,
+    onChange: PropTypes.func.isRequired,
+    children: PropTypes.node,
+  }
+
+  changeTileUrl(idx, value) {
+    const tiles = this.props.source.tiles.slice(0)
+    tiles[idx] = value
+    this.props.onChange({
+      ...this.props.source,
+      tiles: tiles
+    })
   }
 
   renderTileUrls() {
     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"}>
+      return <InputBlock key={tileIndex} label={prefix[tileIndex] + " Tile URL"} doc={latest.source_vector.tiles.doc}>
         <StringInput
           value={tileUrl}
+          onChange={this.changeTileUrl.bind(this, tileIndex)}
         />
       </InputBlock>
     })
@@ -43,24 +62,25 @@ class TileURLSourceEditor extends React.Component {
   render() {
     return <div>
       {this.renderTileUrls()}
-      <InputBlock label={"Min Zoom"}>
+      <InputBlock label={"Min Zoom"} doc={latest.source_vector.minzoom.doc}>
         <NumberInput
-          value={this.props.source.minZoom}
-          onChange={minZoom => this.props.onChange({
+          value={this.props.source.minzoom || 0}
+          onChange={minzoom => this.props.onChange({
             ...this.props.source,
-            minZoom: minZoom
+            minzoom: minzoom
           })}
         />
       </InputBlock>
-      <InputBlock label={"Max Zoom"}>
+      <InputBlock label={"Max Zoom"} doc={latest.source_vector.maxzoom.doc}>
         <NumberInput
-          value={this.props.source.maxZoom}
-          onChange={maxZoom => this.props.onChange({
+          value={this.props.source.maxzoom || 22}
+          onChange={maxzoom => this.props.onChange({
             ...this.props.source,
-            maxZoom: maxZoom
+            maxzoom: maxzoom
           })}
         />
       </InputBlock>
+      {this.props.children}
   </div>
 
   }
@@ -68,12 +88,12 @@ class TileURLSourceEditor extends React.Component {
 
 class GeoJSONSourceEditor extends React.Component {
   static propTypes = {
-    source: React.PropTypes.object.isRequired,
-    onChange: React.PropTypes.func,
+    source: PropTypes.object.isRequired,
+    onChange: PropTypes.func.isRequired,
   }
 
   render() {
-    return <InputBlock label={"GeoJSON Data"}>
+    return <InputBlock label={"GeoJSON Data"} doc={latest.source_geojson.data.doc}>
       <StringInput
         value={this.props.source.data}
         onChange={data => this.props.onChange({
@@ -87,9 +107,9 @@ class GeoJSONSourceEditor extends React.Component {
 
 class SourceTypeEditor extends React.Component {
   static propTypes = {
-    mode: React.PropTypes.string.isRequired,
-    source: React.PropTypes.object.isRequired,
-    onChange: React.PropTypes.func.isRequired,
+    mode: PropTypes.string.isRequired,
+    source: PropTypes.object.isRequired,
+    onChange: PropTypes.func.isRequired,
   }
 
   render() {
@@ -99,8 +119,23 @@ class SourceTypeEditor extends React.Component {
     }
     switch(this.props.mode) {
       case 'geojson': return <GeoJSONSourceEditor {...commonProps} />
-      case 'tilejson': return <TileJSONSourceEditor {...commonProps} />
-      case 'tilexyz': return <TileURLSourceEditor {...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={latest.source_raster_dem.encoding.doc}>
+          <SelectInput
+            options={Object.keys(latest.source_raster_dem.encoding.values)}
+            onChange={encoding => this.props.onChange({
+              ...this.props.source,
+              encoding: encoding
+            })}
+            value={this.props.source.encoding || latest.source_raster_dem.encoding.default}
+          />
+        </InputBlock>
+      </TileURLSourceEditor>
       default: return null
     }
   }

src/config/colors.js

@@ -1,29 +0,0 @@
-const baseColors = {
-  black: '#1c1f24',
-  gray: '#26282e',
-  midgray: '#36383e',
-  lowgray: '#8e8e8e',
-
-  white: '#fff',
-  blue: '#00d9f7',
-  green: '#B4C7AD',
-  orange: '#fb3',
-  red: '#cf4a4a',
-}
-
-const themeColors = {
-  primary: baseColors.gray,
-  secondary: baseColors.midgray,
-  default: baseColors.gray,
-  info: baseColors.blue,
-  success: baseColors.green,
-  warning: baseColors.orange,
-  error: baseColors.red
-}
-
-const colors = {
-  ...baseColors,
-  ...themeColors
-}
-
-export default colors

src/config/empty-style.json

@@ -0,0 +1,9 @@
+{
+  "version": 8,
+  "name": "Empty Style",
+  "metadata": {},
+  "sources": {},
+  "sprite": "",
+  "glyphs": "https://orangemug.github.io/font-glyphs/glyphs/{fontstack}/{range}.pbf",
+  "layers": []
+}

src/config/fontstacks.json

@@ -1,35 +0,0 @@
-[
-    "Metropolis Black Italic",
-    "Metropolis Black",
-    "Metropolis Bold Italic",
-    "Metropolis Bold",
-    "Metropolis Extra Bold Italic",
-    "Metropolis Extra Bold",
-    "Metropolis Extra Light Italic",
-    "Metropolis Extra Light",
-    "Metropolis Light Italic",
-    "Metropolis Light",
-    "Metropolis Medium Italic",
-    "Metropolis Medium",
-    "Metropolis Regular Italic",
-    "Metropolis Regular",
-    "Metropolis Semi Bold Italic",
-    "Metropolis Semi Bold",
-    "Metropolis Thin Italic",
-    "Metropolis Thin",
-    "Open Sans Bold Italic",
-    "Open Sans Bold",
-    "Open Sans Extra Bold Italic",
-    "Open Sans Extra Bold",
-    "Open Sans Italic",
-    "Open Sans Light Italic",
-    "Open Sans Light",
-    "Open Sans Regular",
-    "Open Sans Semibold Italic",
-    "Open Sans Semibold",
-    "Klokantech Noto Sans Bold",
-    "Klokantech Noto Sans CJK Bold",
-    "Klokantech Noto Sans CJK Regular",
-    "Klokantech Noto Sans Italic",
-    "Klokantech Noto Sans Regular"
-]

src/config/input.js

@@ -1,51 +0,0 @@
-import colors from './colors'
-import { margins, fontSizes } from './scales'
-
-const base = {
-  display: 'inline-block',
-  boxSizing: 'border-box',
-  fontSize: fontSizes[5],
-  lineHeight: 2,
-  paddingLeft: 5,
-  paddingRight: 5,
-}
-
-const label = {
-  ...base,
-  padding: null,
-  color: colors.lowgray,
-  userSelect: 'none',
-}
-
-const property = {
-  display: 'block',
-  margin: margins[2],
-}
-
-const input = {
-  ...base,
-  border: 'none',
-  backgroundColor: colors.gray,
-  color: colors.lowgray,
-}
-
-const checkbox = {
-  ...base,
-  border: '1px solid rgb(36, 36, 36)',
-  backgroundColor: colors.gray,
-  color: colors.lowgray,
-}
-
-const select = {
-  ...input,
-  height: '2.15em',
-}
-
-export default {
-  base,
-  label,
-  select,
-  input,
-  property,
-  checkbox,
-}

src/config/layout.json

@@ -2,15 +2,7 @@
     "line": {
       "groups": [
         {
-          "title": "Settings",
-          "type": "settings"
-        },
-        {
-          "title": "Source",
-          "type": "source"
-        },
-        {
-          "title": "Paint",
+          "title": "Paint properties",
           "type": "properties",
           "fields": [
             "line-opacity",
@@ -18,66 +10,42 @@
             "line-width",
             "line-offset",
             "line-blur",
-            "line-pattern"
-          ]
-        },
-        {
-          "title": "Secondary",
-          "type": "properties",
-          "fields": [
+            "line-dasharray",
+            "line-pattern",
             "line-translate",
             "line-translate-anchor",
-            "line-cap",
-            "line-join",
-            "line-miter-limit",
-            "line-round-limit",
-            "line-dasharray",
             "line-gap-width"
           ]
         },
         {
-          "title": "JSON",
-          "type": "jsoneditor"
+          "title": "Layout properties",
+          "type": "properties",
+          "fields": [
+            "line-cap",
+            "line-join",
+            "line-miter-limit",
+            "line-round-limit"
+          ]
         }
       ]
     },
     "background": {
       "groups": [
         {
-          "title": "Settings",
-          "type": "settings"
-        },
-        {
-          "title": "Source",
-          "type": "source"
-        },
-        {
-          "title": "Basic",
+          "title": "Paint properties",
           "type": "properties",
           "fields": [
             "background-color",
             "background-pattern",
             "background-opacity"
           ]
-        },
-        {
-          "title": "JSON",
-          "type": "jsoneditor"
         }
       ]
     },
     "fill": {
       "groups": [
         {
-          "title": "Settings",
-          "type": "settings"
-        },
-        {
-          "title": "Source",
-          "type": "source"
-        },
-        {
-          "title": "Basic",
+          "title": "Paint properties",
           "type": "properties",
           "fields": [
             "fill-opacity",
@@ -88,25 +56,13 @@
             "fill-translate",
             "fill-translate-anchor"
           ]
-        },
-        {
-          "title": "JSON",
-          "type": "jsoneditor"
         }
       ]
     },
     "fill-extrusion": {
       "groups": [
         {
-          "title": "Settings",
-          "type": "settings"
-        },
-        {
-          "title": "Source",
-          "type": "source"
-        },
-        {
-          "title": "Basic",
+          "title": "Paint properties",
           "type": "properties",
           "fields": [
             "fill-extrusion-opacity",
@@ -115,101 +71,56 @@
             "fill-extrusion-translate-anchor",
             "fill-extrusion-pattern",
             "fill-extrusion-height",
-            "fill-extrusion-base"
+            "fill-extrusion-base",
+            "fill-extrusion-vertical-gradient"
           ]
-        },
-        {
-          "title": "JSON",
-          "type": "jsoneditor"
         }
       ]
     },
     "circle": {
       "groups": [
         {
-          "title": "Settings",
-          "type": "settings"
-        },
-        {
-          "title": "Source",
-          "type": "source"
-        },
-        {
-          "title": "Basic",
+          "title": "Paint properties",
           "type": "properties",
           "fields": [
             "circle-color",
             "circle-opacity",
             "circle-stroke-color",
             "circle-stroke-opacity",
-            "circle-blur"
-          ]
-        },
-        {
-          "title": "Scale",
-          "type": "properties",
-          "fields": [
+            "circle-blur",
             "circle-radius",
             "circle-stroke-width",
-            "circle-pitch-scale"
-          ]
-        },
-        {
-          "title": "Position",
-          "type": "properties",
-          "fields": [
+            "circle-pitch-scale",
             "circle-translate",
-            "circle-translate-anchor"
+            "circle-translate-anchor",
+            "circle-pitch-alignment"
           ]
-        },
-        {
-          "title": "JSON",
-          "type": "jsoneditor"
         }
       ]
     },
     "symbol": {
       "groups": [
         {
-          "title": "Settings",
-          "type": "settings"
-        },
-        {
-          "title": "Source",
-          "type": "source"
-        },
-        {
-          "title": "Basic",
-          "type": "properties",
-          "fields": [
-            "text-field",
-            "text-font",
-            "text-color",
-            "text-size",
-            "text-line-height",
-            "text-halo-color",
-            "text-halo-width",
-            "text-halo-blur"
-          ]
-        },
-        {
-          "title": "Placement",
+          "title": "General layout properties",
           "type": "properties",
           "fields": [
             "symbol-placement",
             "symbol-spacing",
-            "text-padding",
             "symbol-avoid-edges",
-            "text-allow-overlap",
-            "text-ignore-placement",
-            "text-translate",
-            "text-translate-anchor"
+            "symbol-z-order"
           ]
         },
         {
-          "title": "Text",
+          "title": "Text layout properties",
           "type": "properties",
           "fields": [
+            "text-field",
+            "text-font",
+            "text-size",
+            "text-line-height",
+            "text-padding",
+            "text-allow-overlap",
+            "text-ignore-placement",
             "text-pitch-alignment",
             "text-rotation-alignment",
             "text-max-width",
@@ -225,9 +136,10 @@
           ]
         },
         {
-          "title": "Icon",
+          "title": "Icon layout properties",
           "type": "properties",
           "fields": [
+            "icon-image",
             "icon-allow-overlap",
             "icon-ignore-placement",
             "icon-optional",
@@ -235,16 +147,87 @@
             "icon-size",
             "icon-text-fit",
             "icon-text-fit-padding",
-            "icon-image",
             "icon-rotate",
             "icon-padding",
             "icon-keep-upright",
-            "icon-offset"
+            "icon-offset",
+            "icon-anchor",
+            "icon-pitch-alignment"
           ]
         },
         {
-          "title": "JSON",
-          "type": "jsoneditor"
+          "title": "Text paint properties",
+          "type": "properties",
+          "fields": [
+            "text-color",
+            "text-opacity",
+            "text-halo-color",
+            "text-halo-width",
+            "text-halo-blur",
+            "text-translate",
+            "text-translate-anchor"
+          ]
+        },
+        {
+          "title": "Icon paint properties",
+          "type": "properties",
+          "fields": [
+            "icon-color",
+            "icon-opacity",
+            "icon-halo-color",
+            "icon-halo-width",
+            "icon-halo-blur",
+            "icon-translate",
+            "icon-translate-anchor"
+          ]
+        }
+      ]
+    },
+    "raster": {
+      "groups": [
+        {
+          "title": "Paint properties",
+          "type": "properties",
+          "fields": [
+            "raster-opacity",
+            "raster-hue-rotate",
+            "raster-brightness-min",
+            "raster-brightness-max",
+            "raster-saturation",
+            "raster-contrast",
+            "raster-fade-duration",
+            "raster-resampling"
+          ]
+        }
+      ]
+    },
+    "hillshade": {
+      "groups": [
+        {
+          "title": "Paint properties",
+          "type": "properties",
+          "fields": [
+            "hillshade-illumination-direction",
+            "hillshade-illumination-anchor",
+            "hillshade-exaggeration",
+            "hillshade-shadow-color",
+            "hillshade-highlight-color",
+            "hillshade-accent-color"
+          ]
+        }
+      ]
+    },
+    "heatmap": {
+      "groups": [
+        {
+          "title": "Paint properties",
+          "type": "properties",
+          "fields": [
+            "heatmap-radius",
+            "heatmap-weight",
+            "heatmap-intensity",
+            "heatmap-opacity"
+          ]
         }
       ]
     }

src/config/scales.js

@@ -1,2 +0,0 @@
-export const margins = [3, 5, 10, 30, 40]
-export const fontSizes = [24, 20, 18, 16, 14, 12]

src/config/styles.json

@@ -2,31 +2,67 @@
   {
     "id": "klokantech-basic",
     "title": "Klokantech Basic",
-    "url": "https://rawgit.com/openmaptiles/klokantech-basic-gl-style/gh-pages/style-cdn.json",
-    "thumbnail": "https://camo.githubusercontent.com/5cf548fdb9fc606f4a452d14fd2a7a959155fd40/68747470733a2f2f6170692e6d6170626f782e636f6d2f7374796c65732f76312f6d6f7267656e6b61666665652f63697578757465726630316135326971716f366b6f6c776b312f7374617469632f382e3534303538372c34372e3337303535352c31342e30382c302e30302c302e30302f363030783430303f6163636573735f746f6b656e3d706b2e65794a31496a6f69625739795a3256756132466d5a6d566c4969776959534936496a497a636d4e304e6c6b6966512e304c52544e6743632d656e76743964354d7a52373577"
+    "url": "https://cdn.jsdelivr.net/gh/openmaptiles/klokantech-basic-gl-style@v1.8/style.json",
+    "thumbnail": "https://maputnik.github.io/thumbnails/klokantech-basic.png"
   },
   {
     "id": "dark-matter",
     "title": "Dark Matter",
-    "url": "https://rawgit.com/openmaptiles/dark-matter-gl-style/gh-pages/style-cdn.json",
-    "thumbnail": "https://camo.githubusercontent.com/b73c515d633d2be7368e8e29e3c23e14117fd21b/68747470733a2f2f6170692e6d6170626f782e636f6d2f7374796c65732f76312f6d6f7267656e6b61666665652f6369757878356e37683031396c326870626e396c6970726d6e2f7374617469632f382e3631393138342c34372e3333363230332c392e30372c302e30302c302e30302f363030783430303f6163636573735f746f6b656e3d706b2e65794a31496a6f69625739795a3256756132466d5a6d566c4969776959534936496a497a636d4e304e6c6b6966512e304c52544e6743632d656e76743964354d7a52373577"
+    "url": "https://cdn.jsdelivr.net/gh/openmaptiles/dark-matter-gl-style@v1.7/style.json",
+    "thumbnail": "https://maputnik.github.io/thumbnails/dark-matter.png"
   },
   {
     "id": "positron",
     "title": "Positron",
-    "url": "https://rawgit.com/openmaptiles/positron-gl-style/gh-pages/style-cdn.json",
-    "thumbnail": "https://camo.githubusercontent.com/0dd866e3fa7b21ada87da69082eac6801e16ec99/68747470733a2f2f6170692e6d6170626f782e636f6d2f7374796c65732f76312f6d6f7267656e6b61666665652f63697578756e37736530313976326a6c387162326a743374662f7374617469632f382e3631393138342c34372e3333363230332c392e30372c302e30302c302e30302f363030783430303f6163636573735f746f6b656e3d706b2e65794a31496a6f69625739795a3256756132466d5a6d566c4969776959534936496a497a636d4e304e6c6b6966512e304c52544e6743632d656e76743964354d7a52373577"
+    "url": "https://cdn.jsdelivr.net/gh/openmaptiles/positron-gl-style@v1.7/style.json",
+    "thumbnail": "https://maputnik.github.io/thumbnails/positron.png"
   },
   {
     "id": "osm-bright",
     "title": "OSM Bright",
-    "url": "https://rawgit.com/openmaptiles/osm-bright-gl-style/gh-pages/style-cdn.json",
-    "thumbnail": "https://camo.githubusercontent.com/a15e23ab59202c56502e57cde963cb7772ed3bb1/68747470733a2f2f6170692e6d6170626f782e636f6d2f7374796c65732f76312f6f70656e6d617074696c65732f63697736637a7a326e30303234326b6d673668773230626f782f7374617469632f382e3534303538372c34372e3337303535352c31342e30382c302e30302c302e30302f363030783430303f6163636573735f746f6b656e3d706b2e65794a31496a6f696233426c626d3168634852706247567a4969776959534936496d4e70646e593365544a785a7a41774d474d796233427064574a6d616a63784e7a636966512e685031427863786c644968616b4d6350534a4c513151"
+    "url": "https://cdn.jsdelivr.net/gh/openmaptiles/osm-bright-gl-style@v1.8/style.json",
+    "thumbnail": "https://maputnik.github.io/thumbnails/osm-bright.png"
   },
   {
-    "id": "fiord-color",
-    "title": "Fiord Color",
-    "url": "https://rawgit.com/openmaptiles/fiord-color-gl-style/gh-pages/style-cdn.json",
-    "thumbnail": "https://camo.githubusercontent.com/605f2edc30e413b37d16a6ca1d500f265725d76d/68747470733a2f2f6170692e6d6170626f782e636f6d2f7374796c65732f76312f6f70656e6d617074696c65732f6369776775693378353030317732706e7668633063327767302f7374617469632f31302e3938373235382c34362e3435333135302c332e30322c302e30302c302e30302f363030783430303f6163636573735f746f6b656e3d706b2e65794a31496a6f696233426c626d3168634852706247567a4969776959534936496d4e70646e593365544a785a7a41774d474d796233427064574a6d616a63784e7a636966512e685031427863786c644968616b4d6350534a4c513151"
+    "id": "toner-gl-style",
+    "title": "Toner",
+    "url": "https://cdn.jsdelivr.net/gh/openmaptiles/toner-gl-style@c289223/style.json",
+    "thumbnail": "https://maputnik.github.io/thumbnails/toner.png"
+  },
+  {
+    "id": "osm-liberty",
+    "title": "OSM Liberty",
+    "url": "https://maputnik.github.io/osm-liberty/style.json",
+    "thumbnail": "https://maputnik.github.io/osm-liberty/thumbnail.png"
+  },
+  {
+    "id": "os-zoomstack-outdoor",
+    "title": "Zoomstack Outdoor",
+    "url": "https://s3-eu-west-1.amazonaws.com/tiles.os.uk/styles/open-zoomstack-outdoor/style.json",
+    "thumbnail": "https://maputnik.github.io/thumbnails/os-zoomstack-outdoor.png"
+  },
+  {
+    "id": "os-zoomstack-road",
+    "title": "Zoomstack Road",
+    "url": "https://s3-eu-west-1.amazonaws.com/tiles.os.uk/styles/open-zoomstack-road/style.json",
+    "thumbnail": "https://maputnik.github.io/thumbnails/os-zoomstack-road.png"
+  },
+  {
+    "id": "os-zoomstack-light",
+    "title": "Zoomstack Light",
+    "url": "https://s3-eu-west-1.amazonaws.com/tiles.os.uk/styles/open-zoomstack-light/style.json",
+    "thumbnail": "https://maputnik.github.io/thumbnails/os-zoomstack-light.png"
+  },
+  {
+    "id": "os-zoomstack-night",
+    "title": "Zoomstack Night",
+    "url": "https://s3-eu-west-1.amazonaws.com/tiles.os.uk/styles/open-zoomstack-night/style.json",
+    "thumbnail": "https://maputnik.github.io/thumbnails/os-zoomstack-night.png"
+  },
+  {
+    "id": "empty-style",
+    "title": "Empty Style",
+    "url": "https://cdn.jsdelivr.net/gh/maputnik/editor@9cf74ca405d2be0608b57db8109cf3a6af5b9f49/src/config/empty-style.json",
+    "thumbnail": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAECAQAAAAHDYbIAAAAEUlEQVR42mP8/58BDhiJ4wAA974H/U5Xe1oAAAAASUVORK5CYII="
   }
 ]

src/config/theme.js

@@ -1,9 +0,0 @@
-import colors from './colors'
-import { margins, fontSizes } from './scales'
-
-const dark = {
-  color: colors.white,
-  fontFamily: 'Roboto, sans-serif',
-}
-
-export default dark

src/config/tilesets.json

@@ -1,26 +1,22 @@
 {
-  "mapbox-streets": {
-    "type": "vector",
-    "url": "mapbox://mapbox.mapbox-streets-v7",
-    "title": "Mapbox Streets"
-  },
-  "tilezen": {
-    "type": "vector",
-    "tiles": [
-      "http://tile.mapzen.com/mapzen/vector/v1/{layers}/{z}/{x}/{y}.pbf?api_key=mapzen-RVcyVL7"
-    ],
-    "minZoom": 0,
-    "maxZoom": 15,
-    "title": "Mapzen Vector Tile Service"
-  },
   "openmaptiles": {
     "type": "vector",
-    "url": "https://free.tilehosting.com/data/v3.json?key=25ItXg7aI5wurYDtttD",
-    "title": "OpenMapTiles CDN"
+    "url": "https://api.maptiler.com/tiles/v3/tiles.json?key={key}",
+    "title": "OpenMapTiles"
   },
-  "naturalearth-airports": {
-    "type": "geojson",
-    "data": "https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_10m_airports.geojson",
-    "title": "NaturalEarth Airports GeoJSON"
+  "thunderforest_transport": {
+    "type": "vector",
+    "url": "https://tile.thunderforest.com/thunderforest.transport-v1.json?apikey={key}",
+    "title": "Thunderforest Transport (heavy)"
+  },
+  "thunderforest_outdoors": {
+    "type": "vector",
+    "url": "https://tile.thunderforest.com/thunderforest.outdoors-v1.json?apikey={key}",
+    "title": "Thunderforest Outdoors (heavy)"
+  },
+  "open_zoomstack": {
+    "type": "vector",
+    "url": "https://s3-eu-west-1.amazonaws.com/tiles.os.uk/data/vector/open-zoomstack/config.json",
+    "title": "OS Open Zoomstack"
   }
 }