Merge pull request #812 from kevinschaul/switch-to-maplibre-ks

Convert from Mapbox GL to MapLibre

.babelrc

@@ -4,8 +4,10 @@
     "@babel/preset-react"
   ],
   "plugins": [
+    "static-fs",
     "react-hot-loader/babel",
-    "@babel/plugin-proposal-class-properties"
+    "@babel/plugin-proposal-class-properties",
+    "@babel/transform-runtime"
   ],
   "env": {
     "test": {

.circleci/config.yml

@@ -1,102 +0,0 @@
-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

.codesandbox/ci.json

@@ -0,0 +1,4 @@
+{
+  "packages": [],
+  "sandboxes": ["/"]
+}

.dockerignore

@@ -0,0 +1,45 @@
+.git
+.gitignore
+Dockerfile
+
+#
+#
+#     COPIED FROM .gitignore , please keep it in sync
+#
+#
+
+# Logs
+logs
+*.log
+*.swp
+*.swo
+
+# Runtime data
+pids
+*.pid
+*.seed
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directory
+# https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git
+node_modules
+
+# Ignore build files
+public
+/errorShots
+/old
+/build

.github/FUNDING.yml

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

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,27 @@
+---
+name: Bug report
+about: Create a report to help us improve Maputnik
+title: ''
+labels: ''
+assignees: ''
+
+---
+
+<!-- Thanks for your feedback! Please complete the following information: -->
+
+**Maputnik version**:<!-- e.g v1.7.0, master -->
+**Browser**:
+**OS**:<!-- (Windows, macOS, Linux) -->
+
+**Description of the bug**:
+
+**Steps to reproduce the behavior**:
+1.
+2.
+3.
+
+**Style file or style URL**:
+<!-- If applicable, attach a style file (zip) or provide a style URL. -->
+
+**Screenshots**:
+<!-- If applicable, add screenshots to help explain your problem. -->

.github/ISSUE_TEMPLATE/other-issue.md

@@ -0,0 +1,11 @@
+---
+name: Other issue
+about: Feature request or other issue which is no bug report
+title: ''
+labels: ''
+assignees: ''
+
+---
+
+<!-- Thanks for reaching out! If you are having general Maputnik mapping questions, please asking them at https://gis.stackexchange.com/ using the 'maputnik' tag https://gis.stackexchange.com/questions/tagged/maputnik and read https://gis.stackexchange.com/help/how-to-ask before you do so (please keep in mind that you're asking there in a general GIS forum, not a dedicated support channel) -->
+

.github/workflows/ci.yml

@@ -0,0 +1,193 @@
+name: ci
+
+on:
+  pull_request:
+    branches: [ master ]
+  push:
+    branches: [ master ]
+
+jobs:
+
+  # post a comment linking to codesandbox with the current branch
+  # meta-demo-comment:
+  #   name: meta/demo-comment
+  #   runs-on: ubuntu-latest
+
+  #   if: ${{ github.event_name == 'pull_request' }}
+
+  #   steps:
+  #   - uses: unsplash/comment-on-pr@v1.2.0
+  #     env:
+  #       GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+  #     with:
+  #       msg: "Demo: <https://codesandbox.io/embed/github/${{ github.repository }}/tree/${{ github.head_ref }}?view=preview>"
+
+  build-docker:
+    name: build/docker
+    runs-on: ${{ matrix.os }}
+
+    if: ${{ github.event_name == 'push' || github.event_name == 'pull_request' }}
+
+    strategy:
+      fail-fast: false
+      matrix:
+        os: [ubuntu-latest]
+
+    steps:
+    - uses: actions/checkout@v2
+    - run: docker build -t docker.pkg.github.com/maputnik/editor/editor:master .
+
+  # build the editor
+  build-node:
+    name: "build/node@${{ matrix.node-version }} (${{ matrix.os }})"
+    runs-on: ${{ matrix.os }}
+
+    if: ${{ github.event_name == 'push' || github.event_name == 'pull_request' }}
+
+    strategy:
+      fail-fast: false
+      matrix:
+        os: [ubuntu-latest, windows-latest, macos-latest]
+        node-version: [16.x]
+
+    steps:
+    - uses: actions/checkout@v2
+    - uses: actions/setup-node@v1
+      with:
+        node-version: ${{ matrix.node-version }}
+    - uses: actions/cache@v1
+      with:
+        path: ~/.npm
+        key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
+        restore-keys: |
+          ${{ runner.os }}-node-
+    - run: npm ci
+    - run: npm run build
+
+
+  build-artifacts:
+    name: "build/artifacts (${{ matrix.os }})"
+    runs-on: ${{ matrix.os }}
+    if: ${{ github.event_name == 'push' || github.event_name == 'pull_request' }}
+
+    strategy:
+      fail-fast: false
+      matrix:
+        os: [ubuntu-latest]
+        node-version: [16.x]
+
+    steps:
+    - uses: actions/checkout@v2
+    - uses: actions/setup-node@v1
+      with:
+        node-version: ${{ matrix.node-version }}
+    - uses: actions/cache@v1
+      with:
+        path: ~/.npm
+        key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
+        restore-keys: |
+          ${{ runner.os }}-node-
+    - run: npm ci
+    - run: npm run build
+    - run: npm run build-storybook
+    - name: artifacts/editor
+      uses: actions/upload-artifact@v1
+      with:
+        name: editor
+        path: build/build
+    - run: npm run profiling-build
+    - name: artifacts/editor-profiling
+      uses: actions/upload-artifact@v1
+      with:
+        name: editor-profiling
+        path: build/profiling
+    - name: artifacts/storybook
+      uses: actions/upload-artifact@v1
+      with:
+        name: storybook
+        path: build/storybook
+
+    # Build and upload desktop CLI artifacts
+    - name: Set up Go
+      uses: actions/setup-go@v3
+      with:
+        go-version: ^1.19.x
+      id: go
+
+    - name: Check out code into the Go module directory
+      uses: actions/checkout@v2
+      with:
+        repository: maputnik/desktop
+        ref: master
+        path: ./src/github.com/maputnik/desktop/
+
+    - name: Make
+      run: cd src/github.com/maputnik/desktop/ && make
+
+    - name: Artifacts/linux
+      uses: actions/upload-artifact@v1
+      with:
+        name: maputnik-linux
+        path: ./src/github.com/maputnik/desktop/bin/linux/
+
+    - name: Artifacts/darwin
+      uses: actions/upload-artifact@v1
+      with:
+        name: maputnik-darwin
+        path: ./src/github.com/maputnik/desktop/bin/darwin/
+
+    - name: Artifacts/windows
+      uses: actions/upload-artifact@v1
+      with:
+        name: maputnik-windows
+        path: ./src/github.com/maputnik/desktop/bin/windows/
+
+  # build and test the editor
+  test_selenium_standalone:
+    name: "test/standalone-${{ matrix.browser }} (${{ matrix.os }})"
+    runs-on: ${{ matrix.os }}
+
+    if: ${{ github.event_name == 'push' || github.event_name == 'pull_request' }}
+
+    strategy:
+      fail-fast: false
+      matrix:
+        os: [ubuntu-latest]
+        node-version: [16]
+        browser: [chrome, firefox]
+
+    container:
+      image: node:${{ matrix.node-version }}
+      options: --network-alias testhost
+
+    services:
+      selenium:
+        # geckodriver-0.31 seems to have problems as of 2022 May 1
+        image: selenium/standalone-${{ matrix.browser == 'firefox' && 'firefox:99.0-geckodriver-0.30-20220427' || matrix.browser }}
+        ports:
+        - 4444:4444
+        options: --shm-size=2gb
+
+    steps:
+    - uses: actions/checkout@v2
+    - uses: actions/cache@v1
+      with:
+        path: ~/.npm
+        key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
+        restore-keys: |
+          ${{ runner.os }}-node-
+    - run: npm ci
+    - run: BROWSER=${{ matrix.browser }} TEST_NETWORK=testhost DOCKER_HOST=selenium npm run test
+    - if: ${{ matrix.browser == 'chrome' }}
+      run: ./node_modules/.bin/istanbul report --include build/coverage/coverage.json --dir build/coverage html lcov
+    - if: ${{ matrix.browser == 'chrome' }}
+      name: artifacts/coverage
+      uses: actions/upload-artifact@v1
+      with:
+        name: coverage
+        path: build/coverage
+    - name: artifacts/screenshots
+      uses: actions/upload-artifact@v1
+      with:
+        name: screenshots-${{ matrix.browser }}
+        path: build/screenshots

.github/workflows/deploy.yml

@@ -0,0 +1,28 @@
+name: deploy
+
+on:
+  push:
+    branches: [ master ]
+    push:
+      tags:
+      - 'v*'
+
+jobs:
+  # publish docker to github registry
+  deploy-docker:
+    name: deploy/docker
+    runs-on: ${{ matrix.os }}
+
+    if: ${{ github.event_name == 'push' }}
+
+    strategy:
+      fail-fast: false
+      matrix:
+        os: [ubuntu-latest]
+
+    steps:
+    - uses: actions/checkout@v2
+    - run: echo "${{ secrets.GITHUB_TOKEN }}" | docker login docker.pkg.github.com -u orangemug --password-stdin
+    - run: docker build -t docker.pkg.github.com/maputnik/editor/editor:master .
+    - run: docker push docker.pkg.github.com/maputnik/editor/editor:master
+

.storybook/main.js

@@ -0,0 +1,24 @@
+const rules = require('../config/webpack.rules');
+
+module.exports = {
+  stories: ['../stories/**/*.stories.js'],
+  addons: [
+    '@storybook/addon-actions',
+    '@storybook/addon-links',
+    '@storybook/addon-a11y/register',
+    '@storybook/addon-storysource',
+  ],
+  webpackFinal: async config => {
+    // do mutation to the config
+    console.log("config.module", config.module);
+
+    return {
+      ...config,
+      module: {
+        rules: [
+          ...rules,
+        ]
+      }
+    };
+  },
+};

.storybook/manager.js

@@ -0,0 +1,7 @@
+import { addons } from '@storybook/addons';
+import { themes } from '@storybook/theming';
+import theme from './maputnik.theme';
+
+addons.setConfig({
+  theme: theme,
+});

.storybook/maputnik.theme.js

@@ -0,0 +1,8 @@
+import { create } from '@storybook/theming/create';
+
+export default create({
+  base: 'light',
+
+  brandTitle: 'Maputnik',
+  brandUrl: 'https://github.com/maputnik/editor',
+});

Dockerfile

@@ -1,21 +1,22 @@
-FROM node:10-slim
+FROM node:10 as builder
+WORKDIR /maputnik
 
-RUN apt-get update && apt-get install -y --no-install-recommends \
+# Only copy package.json to prevent npm install from running on every build
-    git \
+COPY package.json package-lock.json ./
-    python \
+RUN npm install
- && rm -rf /var/lib/apt/lists/*
 
-EXPOSE 8888
+# Build maputnik
-
+# TODO:  we should also do a   npm run test   here (needs more dependencies)
-ENV HOME /maputnik
+COPY . .
-RUN mkdir ${HOME}
-
-COPY . ${HOME}/
-
-WORKDIR ${HOME}
-
-RUN npm install -d
 RUN npm run build
 
-WORKDIR ${HOME}/build/build
+#---------------------------------------------------------------------------
-CMD python -m SimpleHTTPServer 8888
+
+# Create a clean python-based image with just the build results
+FROM python:3-slim
+WORKDIR /maputnik
+
+COPY --from=builder /maputnik/build/build .
+
+EXPOSE 8888
+CMD python -m http.server 8888

README.md

@@ -1,33 +1,30 @@
-# Maputnik
+<img width="200" alt="Maputnik logo" src="https://cdn.jsdelivr.net/gh/maputnik/design/logos/logo-color.png" />
 
-[![Build Status](https://circleci.com/gh/maputnik/editor/tree/master.svg?style=shield)][circleci]
+# Maputnik
-[![Windows Build Status](https://ci.appveyor.com/api/projects/status/anelbgv6jdb3qnh9/branch/master?svg=true)][appveyor]
+[![GitHub CI status](https://github.com/maputnik/editor/workflows/ci/badge.svg)][github-action-ci]
-[![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
+[github-action-ci]: https://github.com/maputnik/editor/actions?query=workflow%3Aci
-[appveyor]:    https://ci.appveyor.com/project/lukasmartinelli/editor
+[license]:          https://tldrlegal.com/license/mit-license
-[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.
 
+
+## Usage
+
 - :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
+- In a Docker, run this command and browse to http://localhost:8888, Ctrl+C to stop the server.
 
-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.
+```bash
-
+docker run -it --rm -p 8888:8888 maputnik/editor
+```
 
 ## Donations
+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.
 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!
@@ -49,14 +46,14 @@ Install the deps, start the dev server and open the web browser on `http://local
 # install dependencies
 npm install
 # start dev server
-npm start
+npm run start
 ```
 
 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 
+npm run 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/):
@@ -79,26 +76,18 @@ npm run lint-styles
 
 
 ## Tests
-For testing we use [webdriverio](http://webdriver.io) and [selenium-standalone](https://github.com/vvo/selenium-standalone)
+For testing we use [webdriverio](https://webdriver.io) and [selenium-standalone](https://github.com/webdriverio/selenium-standalone).
 
-[selenium-standalone](https://github.com/vvo/selenium-standalone) starts a server that will launch browsers on your local machine. We use chrome so you **must** have chrome installed on your machine.
+[selenium-standalone](https://github.com/webdriverio/selenium-standalone) starts a server that will launch browsers on your local machine. You need to have Java installed on your machine as well as *chrome* or *firefox*.
 
-Now open a terminal and run the following. This will install the drivers on your local machine
+Now open a terminal and run the following using *chrome*:
 
 ```
-./node_modules/.bin/selenium-standalone install
+npm run test
 ```
-
+or *firefox*:
-Now start the standalone server
-
 ```
-./node_modules/.bin/selenium-standalone start
+BROWSER=firefox npm run test
-```
-
-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.
@@ -106,7 +95,7 @@ After some time you should see a browser launch which will be automated by the t
 
 ## 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. 
+- [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
 

appveyor.yml

@@ -1,26 +0,0 @@
-image: Visual Studio 2015
-environment:
-  matrix:
-    - nodejs_version: "8"
-    - nodejs_version: "10"
-    - nodejs_version: "12"
-platform:
-  - x86
-  - x64
-install:
-  # 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 run lint-styles

config/wdio.conf.js

@@ -3,286 +3,45 @@ 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: 'local',
-    // ====================
+  path: '/wd/hub',
-    // Runner Configuration
+  specs: [
-    // ====================
+    './test/functional/index.js'
-    //
+  ],
-    // WebdriverIO allows it to run your tests in arbitrary locations (e.g. locally or
+  maxInstances: 10,
-    // on a remote machine).
+  capabilities: [
-    runner: 'local',
+    {
-    //
+      maxInstances: 5,
-    // ==================
+      browserName: (process.env.BROWSER || 'chrome'),
-    // 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()
     }
-    //
+  ],
-    // =====
+  // geckodriver-0.31 seems to have problems as of 2022 May 1
-    // Hooks
+  services: process.env.DOCKER_HOST ? [] : [ ['selenium-standalone', { drivers: { firefox: '0.30.0', chrome: 'latest' } } ] ],
-    // =====
+  logLevel: 'info',
-    // WebdriverIO provides several hooks you can use to interfere with the test process in order to enhance
+  bail: 0,
-    // it and to build services around it. You can either apply a single function or an array of
+  screenshotPath: SCREENSHOT_PATH,
-    // methods to it. If one of them returns with a promise, WebdriverIO will wait until that promise got
+  hostname: process.env.DOCKER_HOST || "0.0.0.0",
-    // resolved to continue.
+  framework: 'mocha',
-    /**
+  reporters: ['spec'],
-     * Gets executed once before all workers get launched.
+  mochaOpts: {
-     * @param {Object} config wdio configuration object
+    ui: 'bdd',
-     * @param {Array.<Object>} capabilities list of capabilities details
+    // Because we don't know how long the initial build will take...
-     */
+    timeout: 4*60*1000,
-    // onPrepare: function (config, capabilities) {
+  },
-    // },
+  onPrepare: async function (config, capabilities) {
-    /**
+    webpackConfig.devServer.host = testConfig.testNetwork;
-     * Gets executed just before initialising the webdriver session and test framework. It allows you
+    webpackConfig.devServer.port = testConfig.port;
-     * to manipulate configurations depending on the capability or spec.
+    const compiler = webpack(webpackConfig);
-     * @param {Object} config wdio configuration object
+    server = new WebpackDevServer(webpackConfig.devServer, compiler);
-     * @param {Array.<Object>} capabilities list of capabilities details
+    await server.start();
-     * @param {Array.<String>} specs List of spec file paths that are to be run
+  },
-     */
+  onComplete: async function (exitCode, config, capabilities) {
-    // beforeSession: function (config, capabilities, specs) {
+    await server.stop();
-    // },
+  }
-    /**
-     * Gets executed before test execution begins. At this point you can access to all global
-     * variables like `browser`. It is the perfect place to define custom commands.
-     * @param {Array.<Object>} capabilities list of capabilities details
-     * @param {Array.<String>} specs List of spec file paths that are to be run
-     */
-    // before: function (capabilities, specs) {
-    // },
-    /**
-     * Runs before a WebdriverIO command gets executed.
-     * @param {String} commandName hook command name
-     * @param {Array} args arguments that command would receive
-     */
-    // beforeCommand: function (commandName, args) {
-    // },
-    
-    /**
-     * Hook that gets executed before the suite starts
-     * @param {Object} suite suite details
-     */
-    // beforeSuite: function (suite) {
-    // },
-    /**
-     * Function to be executed before a test (in Mocha/Jasmine) or a step (in Cucumber) starts.
-     * @param {Object} test test details
-     */
-    // beforeTest: function (test) {
-    // },
-    /**
-     * Hook that gets executed _before_ a hook within the suite starts (e.g. runs before calling
-     * beforeEach in Mocha)
-     */
-    // beforeHook: function () {
-    // },
-    /**
-     * Hook that gets executed _after_ a hook within the suite starts (e.g. runs after calling
-     * afterEach in Mocha)
-     */
-    // afterHook: function () {
-    // },
-    /**
-     * Function to be executed after a test (in Mocha/Jasmine) or a step (in Cucumber) starts.
-     * @param {Object} test test details
-     */
-    // afterTest: function (test) {
-    // },
-    /**
-     * Hook that gets executed after the suite has ended
-     * @param {Object} suite suite details
-     */
-    // afterSuite: function (suite) {
-    // },
-    
-    /**
-     * Runs after a WebdriverIO command gets executed
-     * @param {String} commandName hook command name
-     * @param {Array} args arguments that command would receive
-     * @param {Number} result 0 - command success, 1 - command error
-     * @param {Object} error error object if any
-     */
-    // afterCommand: function (commandName, args, result, error) {
-    // },
-    /**
-     * Gets executed after all tests are done. You still have access to all global variables from
-     * the test.
-     * @param {Number} result 0 - test pass, 1 - test fail
-     * @param {Array.<Object>} capabilities list of capabilities details
-     * @param {Array.<String>} specs List of spec file paths that ran
-     */
-    // after: function (result, capabilities, specs) {
-    // },
-    /**
-     * Gets executed right after terminating the webdriver session.
-     * @param {Object} config wdio configuration object
-     * @param {Array.<Object>} capabilities list of capabilities details
-     * @param {Array.<String>} specs List of spec file paths that ran
-     */
-    // afterSession: function (config, capabilities, specs) {
-    // },
-    /**
-     * Gets executed after all workers got shut down and the process is about to exit. An error
-     * thrown in the onComplete hook will result in the test run failing.
-     * @param {Object} exitCode 0 - success, 1 - fail
-     * @param {Object} config wdio configuration object
-     * @param {Array.<Object>} capabilities list of capabilities details
-     * @param {<Object>} results object containing test results
-     */
-    // onComplete: function(exitCode, config, capabilities, results) {
-    // },
-    /**
-    * Gets executed when a refresh happens.
-    * @param {String} oldSessionId session ID of the old session
-    * @param {String} newSessionId session ID of the new session
-    */
-    //onReload: function(oldSessionId, newSessionId) {
-    //}
 }

config/webpack.config.js

@@ -1,8 +1,8 @@
 "use strict";
-var webpack = require('webpack');
 var path = require('path');
 var rules = require('./webpack.rules');
 var HtmlWebpackPlugin = require('html-webpack-plugin');
+var HtmlWebpackInlineSVGPlugin = require('html-webpack-inline-svg-plugin');
 var CopyWebpackPlugin = require('copy-webpack-plugin');
 
 const HOST = process.env.HOST || "127.0.0.1";
@@ -36,36 +36,39 @@ module.exports = {
     tls: 'empty'
   },
   devServer: {
-    contentBase: "./public",
-    // do not print bundle build stats
-    noInfo: true,
     // enable HMR
     hot: true,
-    // embed the webpack-dev-server runtime into the bundle
-    inline: true,
     // serve index.html in place of 404 responses to allow HTML5 history
     historyApiFallback: true,
     port: PORT,
     host: HOST,
-    watchOptions: {
+    watchFiles: {
-      // 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
+      options: {
-      // See <https://webpack.js.org/configuration/watch/#watchoptions-poll> for details
+        // 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
-      poll: (!!process.env.WEBPACK_DEV_SERVER_POLLING ? true : false),
+        // See <https://webpack.js.org/configuration/watch/#watchoptions-poll> for details
-      watch: false
+        usePolling: (!!process.env.WEBPACK_DEV_SERVER_POLLING ? true : false),
+        watch: false
+      }
     }
   },
+  optimization: {
+    noEmitOnErrors: true,
+  },
   plugins: [
-    new webpack.NoEmitOnErrorsPlugin(),
-    new webpack.HotModuleReplacementPlugin(),
     new HtmlWebpackPlugin({
       title: 'Maputnik',
       template: './src/template.html'
     }),
-    new CopyWebpackPlugin([
+    new HtmlWebpackInlineSVGPlugin({
-      {
+      runPreEmit: true,
-        from: './src/manifest.json',
+    }),
-        to: 'manifest.json'
+    new CopyWebpackPlugin({
-      }
+      patterns: [
-    ])
+        {
+          from: './src/manifest.json',
+          to: 'manifest.json'
+        }
+      ]
+    })
   ]
 };

config/webpack.production.config.js

@@ -2,6 +2,7 @@ var webpack = require('webpack');
 var path = require('path');
 var rules = require('./webpack.rules');
 var HtmlWebpackPlugin = require('html-webpack-plugin');
+var HtmlWebpackInlineSVGPlugin = require('html-webpack-inline-svg-plugin');
 var WebpackCleanupPlugin = require('webpack-cleanup-plugin');
 var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 var CopyWebpackPlugin = require('copy-webpack-plugin');
@@ -44,12 +45,17 @@ module.exports = {
       template: './src/template.html',
       title: 'Maputnik'
     }),
-    new CopyWebpackPlugin([
+    new HtmlWebpackInlineSVGPlugin({
-      {
+      runPreEmit: true,
-        from: './src/manifest.json',
+    }),
-        to: 'manifest.json'
+    new CopyWebpackPlugin({
-    }
+      patterns: [
-  ]),
+        {
+          from: './src/manifest.json',
+          to: 'manifest.json'
+        }
+      ]
+    }),
     new BundleAnalyzerPlugin({
       analyzerMode: 'static',
       defaultSizes: 'gzip',

config/webpack.profiling.config.js

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

config/webpack.rules.js

@@ -17,9 +17,15 @@ module.exports = [
     use: 'file-loader?name=[name].[ext]'
   },
   {
-    test: /\.(svg|gif|jpg|png)$/,
+    test: /\.(gif|jpg|png)$/,
     use: 'file-loader?name=img/[name].[ext]'
   },
+  {
+    test: /\.svg$/,
+    use: [
+      'svg-inline-loader'
+    ]
+  },
   {
     test: /[\/\\](node_modules|global|src)[\/\\].*\.scss$/,
     use: [

package.json

@@ -1,16 +1,22 @@
 {
   "name": "maputnik",
-  "version": "1.6.0",
+  "version": "2.0.0-pre.1",
-  "description": "A MapboxGL visual style editor",
+  "description": "A MapLibre GL visual style editor",
   "main": "''",
   "scripts": {
-    "stats": "webpack --config config/webpack.production.config.js --profile --json > stats.json",
+    "stats": "webpack --config config/webpack.production.config.js --progress=profile --json > stats.json",
-    "build": "webpack --config config/webpack.production.config.js --progress --profile --colors",
+    "build": "webpack --config config/webpack.production.config.js --progress=profile --color",
+    "profiling-build": "webpack --config config/webpack.profiling.config.js --progress=profile --color",
     "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",
+    "start": "webpack-dev-server --progress=profile --color --config config/webpack.config.js",
-    "lint": "eslint --ext js --ext jsx src test",
+    "start-prod": "webpack-dev-server --progress=profile --color --config config/webpack.production.config.js",
-    "lint-styles": "stylelint \"src/styles/*.scss\""
+    "start-sandbox": "webpack-dev-server --disable-host-check --host 0.0.0.0 --progress=profile --color --config config/webpack.production.config.js",
+    "lint-js": "eslint --ext js --ext jsx src test",
+    "lint-css": "stylelint \"src/styles/*.scss\"",
+    "lint": "npm run lint-js && npm run lint-css",
+    "storybook": "start-storybook -h 0.0.0.0 -p 6006",
+    "build-storybook": "build-storybook -o build/storybook"
   },
   "repository": {
     "type": "git",
@@ -20,43 +26,50 @@
   "license": "MIT",
   "homepage": "https://github.com/maputnik/editor#readme",
   "dependencies": {
-    "@babel/runtime": "^7.1.2",
+    "@babel/runtime": "^7.17.9",
-    "@mapbox/mapbox-gl-rtl-text": "^0.2.2",
+    "@mapbox/mapbox-gl-rtl-text": "^0.2.3",
-    "@mapbox/mapbox-gl-style-spec": "^13.7.2",
+    "@maplibre/maplibre-gl-style-spec": "^17.0.1",
-    "classnames": "^2.2.6",
+    "@mdi/react": "^1.5.0",
-    "codemirror": "^5.40.2",
+    "array-move": "^4.0.0",
-    "color": "^3.0.0",
+    "buffer": "^6.0.3",
-    "detect-browser": "^4.5.0",
+    "classnames": "^2.3.1",
-    "file-saver": "^1.3.8",
+    "codemirror": "^5.65.2",
+    "color": "^4.2.3",
+    "detect-browser": "^5.3.0",
+    "file-saver": "^2.0.5",
+    "json-stringify-pretty-compact": "^3.0.0",
+    "json-to-ast": "^2.1.0",
     "jsonlint": "github:josdejong/jsonlint#85a19d7",
+    "lodash": "^4.17.21",
     "lodash.capitalize": "^4.2.1",
     "lodash.clamp": "^4.0.3",
     "lodash.clonedeep": "^4.5.0",
     "lodash.get": "^4.4.2",
     "lodash.isequal": "^4.5.0",
     "lodash.throttle": "^4.1.1",
-    "mapbox-gl": "^1.2.0",
     "mapbox-gl-inspect": "^1.3.1",
-    "maputnik-design": "github:maputnik/design",
+    "maplibre-gl": "^2.4.0",
-    "ol": "^6.0.0-beta.8",
+    "maputnik-design": "github:maputnik/design#172b06c",
-    "ol-mapbox-style": "^5.0.0-beta.2",
+    "ol": "^6.14.1",
-    "prop-types": "^15.6.2",
+    "ol-mapbox-style": "^7.1.1",
-    "react": "^16.5.2",
+    "prop-types": "^15.8.1",
-    "react-aria-menubutton": "^6.0.1",
+    "react": "^16.0.0",
-    "react-aria-modal": "^3.0.0",
+    "react-accessible-accordion": "^4.0.0",
+    "react-aria-menubutton": "^7.0.3",
+    "react-aria-modal": "^4.0.1",
     "react-autobind": "^1.0.6",
     "react-autocomplete": "^1.8.1",
-    "react-codemirror2": "^5.1.0",
+    "react-collapse": "^5.1.1",
-    "react-collapse": "^4.0.3",
+    "react-color": "^2.19.3",
-    "react-color": "^2.14.1",
+    "react-dom": "^16.0.0",
-    "react-dom": "^16.5.2",
     "react-file-reader-input": "^2.0.0",
     "react-icon-base": "^2.1.2",
-    "react-icons": "^3.1.0",
+    "react-icons": "^4.3.1",
-    "react-motion": "^0.5.2",
+    "react-sortable-hoc": "^2.0.0",
-    "react-sortable-hoc": "^0.8.3",
+    "reconnecting-websocket": "^4.4.0",
-    "reconnecting-websocket": "^3.2.2",
+    "sass": "^1.50.0",
-    "slugify": "^1.3.1",
+    "slugify": "^1.6.5",
+    "string-hash": "^1.1.3",
     "url": "^0.11.0"
   },
   "jshintConfig": {
@@ -88,7 +101,7 @@
       "node": true,
       "es6": true
     },
-    "parser": "babel-eslint",
+    "parser": "@babel/eslint-parser",
     "parserOptions": {
       "ecmaVersion": 6,
       "sourceType": "module",
@@ -97,54 +110,66 @@
         "experimentalObjectRestSpread": true,
         "jsx": true
       }
+    },
+    "settings": {
+      "react": {
+        "version": "detect"
+      }
     }
   },
   "devDependencies": {
-    "@babel/core": "^7.1.2",
+    "@babel/core": "^7.17.9",
-    "@babel/plugin-proposal-class-properties": "^7.1.0",
+    "@babel/eslint-parser": "^7.19.1",
-    "@babel/plugin-transform-runtime": "^7.1.0",
+    "@babel/plugin-proposal-class-properties": "^7.16.7",
-    "@babel/preset-env": "^7.1.0",
+    "@babel/plugin-transform-runtime": "^7.17.0",
-    "@babel/preset-flow": "^7.0.0",
+    "@babel/preset-env": "^7.16.11",
-    "@babel/preset-react": "^7.0.0",
+    "@babel/preset-flow": "^7.16.7",
-    "@wdio/cli": "^5.10.4",
+    "@babel/preset-react": "^7.16.7",
-    "@wdio/local-runner": "^5.10.4",
+    "@mdi/js": "^6.6.96",
-    "@wdio/mocha-framework": "^5.10.1",
+    "@storybook/addon-a11y": "^6.4.20",
-    "@wdio/selenium-standalone-service": "^5.9.3",
+    "@storybook/addon-actions": "^6.4.20",
-    "@wdio/spec-reporter": "^5.9.3",
+    "@storybook/addon-links": "^6.4.20",
-    "@wdio/sync": "^5.10.1",
+    "@storybook/addon-storysource": "^6.4.20",
-    "babel-eslint": "^10.0.1",
+    "@storybook/addons": "^6.4.20",
-    "babel-loader": "8.0.4",
+    "@storybook/react": "^6.4.20",
-    "babel-plugin-istanbul": "^5.0.1",
+    "@storybook/theming": "^6.4.20",
-    "copy-webpack-plugin": "^4.5.2",
+    "@wdio/cli": "^7.19.3",
-    "cors": "^2.8.4",
+    "@wdio/local-runner": "^7.19.3",
-    "cross-env": "^5.2.0",
+    "@wdio/mocha-framework": "^7.19.3",
-    "css-loader": "^1.0.0",
+    "@wdio/selenium-standalone-service": "^7.19.1",
-    "eslint": "^5.6.1",
+    "@wdio/spec-reporter": "^7.19.1",
-    "eslint-plugin-react": "^7.11.1",
+    "babel-loader": "^8.2.4",
-    "express": "^4.17.1",
+    "babel-plugin-istanbul": "^6.1.1",
-    "file-loader": "^2.0.0",
+    "babel-plugin-static-fs": "^3.0.0",
-    "html-webpack-plugin": "^3.2.0",
+    "copy-webpack-plugin": "^6.4.1",
-    "is-docker": "^2.0.0",
+    "cors": "^2.8.5",
+    "cross-env": "^7.0.3",
+    "css-loader": "^5.2.7",
+    "eslint": "^8.12.0",
+    "eslint-plugin-react": "^7.29.4",
+    "express": "^4.17.3",
+    "html-webpack-inline-svg-plugin": "^2.3.0",
+    "html-webpack-plugin": "^4.5.2",
     "istanbul": "^0.4.5",
-    "istanbul-lib-coverage": "^2.0.1",
+    "istanbul-lib-coverage": "^3.2.0",
-    "mkdirp": "^0.5.1",
+    "mkdirp": "^1.0.4",
-    "mocha": "^6.1.4",
+    "mocha": "^9.2.2",
-    "node-sass": "^4.12.0",
+    "postcss": "^8.4.12",
-    "raw-loader": "^0.5.1",
+    "react-hot-loader": "^4.13.0",
-    "react-hot-loader": "^4.3.11",
+    "sass-loader": "^10.2.1",
-    "sass-loader": "^7.1.0",
+    "style-loader": "^2.0.0",
-    "selenium-standalone": "^6.16.0",
+    "stylelint": "^14.6.1",
-    "style-loader": "^0.23.0",
+    "stylelint-config-recommended-scss": "^6.0.0",
-    "stylelint": "^10.0.0",
+    "stylelint-scss": "^4.2.0",
-    "stylelint-config-recommended-scss": "^3.2.0",
+    "svg-inline-loader": "^0.8.2",
-    "stylelint-scss": "^3.5.4",
     "transform-loader": "^0.2.4",
-    "uuid": "^3.3.2",
+    "typescript": "^4.6.3",
-    "webdriverio": "^5.10.4",
+    "uuid": "^8.3.2",
-    "webpack": "^4.20.2",
+    "webdriverio": "^7.19.3",
-    "webpack-bundle-analyzer": "^3.0.2",
+    "webpack": "^4.46.0",
+    "webpack-bundle-analyzer": "^4.5.0",
     "webpack-cleanup-plugin": "^0.5.1",
-    "webpack-cli": "^3.1.2",
+    "webpack-cli": "^4.9.2",
-    "webpack-dev-server": "^3.1.9"
+    "webpack-dev-server": "^4.8.1"
   }
 }

sandbox.config.json

@@ -0,0 +1,5 @@
+{
+  "container": {
+    "startScript": "start-sandbox"
+  }
+}

src/components/App.jsx

@@ -2,28 +2,31 @@ import autoBind from 'react-autobind';
 import React from 'react'
 import cloneDeep from 'lodash.clonedeep'
 import clamp from 'lodash.clamp'
+import buffer from 'buffer'
 import get from 'lodash.get'
-import {arrayMove} from 'react-sortable-hoc'
+import {unset} from 'lodash'
+import {arrayMoveMutable} from 'array-move'
 import url from 'url'
+import hash from "string-hash";
 
-import MapboxGlMap from './map/MapboxGlMap'
+import MapMapboxGl from './MapMapboxGl'
-import OpenLayersMap from './map/OpenLayersMap'
+import MapOpenLayers from './MapOpenLayers'
-import LayerList from './layers/LayerList'
+import LayerList from './LayerList'
-import LayerEditor from './layers/LayerEditor'
+import LayerEditor from './LayerEditor'
-import Toolbar from './Toolbar'
+import AppToolbar from './AppToolbar'
 import AppLayout from './AppLayout'
-import MessagePanel from './MessagePanel'
+import MessagePanel from './AppMessagePanel'
 
-import SettingsModal from './modals/SettingsModal'
+import ModalSettings from './ModalSettings'
-import ExportModal from './modals/ExportModal'
+import ModalExport from './ModalExport'
-import SourcesModal from './modals/SourcesModal'
+import ModalSources from './ModalSources'
-import OpenModal from './modals/OpenModal'
+import ModalOpen from './ModalOpen'
-import ShortcutsModal from './modals/ShortcutsModal'
+import ModalShortcuts from './ModalShortcuts'
-import SurveyModal from './modals/SurveyModal'
+import ModalSurvey from './ModalSurvey'
-import DebugModal from './modals/DebugModal'
+import ModalDebug from './ModalDebug'
 
 import { downloadGlyphsMetadata, downloadSpriteMetadata } from '../libs/metadata'
-import {latest, validate} from '@mapbox/mapbox-gl-style-spec'
+import {latest, validate} from '@maplibre/maplibre-gl-style-spec'
 import style from '../libs/style'
 import { initialStyleUrl, loadStyleUrl, removeStyleQuerystring } from '../libs/urlopen'
 import { undoMessages, redoMessages } from '../libs/diffmessage'
@@ -34,22 +37,10 @@ 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 {formatLayerId} from '../util/format';
 
-import MapboxGl from 'mapbox-gl'
+// Buffer must be defined globally for @maplibre/maplibre-gl-style-spec validate() function to succeed.
-
+window.Buffer = buffer.Buffer;
-
-// 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/);
@@ -97,7 +88,7 @@ export default class App extends React.Component {
       port = window.location.port
     }
     this.styleStore = new ApiStyleStore({
-      onLocalStyleChange: mapStyle => this.onStyleChanged(mapStyle, false),
+      onLocalStyleChange: mapStyle => this.onStyleChanged(mapStyle, {save: false}),
       port: port,
       host: params.get("localhost")
     })
@@ -187,7 +178,7 @@ export default class App extends React.Component {
           console.log('Falling back to local storage for storing styles')
           this.styleStore = new StyleStore()
         }
-        this.styleStore.latestStyle(mapStyle => this.onStyleChanged(mapStyle))
+        this.styleStore.latestStyle(mapStyle => this.onStyleChanged(mapStyle, {initialLoad: true}))
 
         if(Debug.enabled()) {
           Debug.set("maputnik", "styleStore", this.styleStore);
@@ -212,13 +203,21 @@ export default class App extends React.Component {
       vectorLayers: {},
       mapState: "map",
       spec: latest,
+      mapView: {
+        zoom: 0,
+        center: {
+          lng: 0,
+          lat: 0,
+        },
+      },
       isOpen: {
         settings: false,
         sources: false,
         open: false,
         shortcuts: false,
         export: false,
-        survey: localStorage.hasOwnProperty('survey') ? false : true,
+        // TODO: Disabled for now, this should be opened on the Nth visit to the editor
+        survey: false,
         debug: false,
       },
       mapboxGlDebugOptions: {
@@ -308,39 +307,146 @@ export default class App extends React.Component {
     this.onStyleChanged(changedStyle)
   }
 
-  onStyleChanged = (newStyle, save=true) => {
+  onStyleChanged = (newStyle, opts={}) => {
+    opts = {
+      save: true,
+      addRevision: true,
+      initialLoad: false,
+      ...opts,
+    };
 
-    const errors = validate(newStyle, latest)
+    if (opts.initialLoad) {
-    if(errors.length === 0) {
+      this.getInitialStateFromUrl(newStyle);
-
-      if(newStyle.glyphs !== this.state.mapStyle.glyphs) {
-        this.updateFonts(newStyle.glyphs)
-      }
-      if(newStyle.sprite !== this.state.mapStyle.sprite) {
-        this.updateIcons(newStyle.sprite)
-      }
-
-      this.revisionStore.addRevision(newStyle)
-      if(save) this.saveStyle(newStyle)
-      this.setState({
-        mapStyle: newStyle,
-        errors: [],
-      })
-    } else {
-      this.setState({
-        errors: errors.map(err => err.message)
-      })
     }
 
-    this.fetchSources();
+    const errors = validate(newStyle, latest) || [];
+
+    // The validate function doesn't give us errors for duplicate error with
+    // empty string for layer.id, manually deal with that here.
+    const layerErrors = [];
+    if (newStyle && newStyle.layers) {
+      const foundLayers = new Map();
+      newStyle.layers.forEach((layer, index) => {
+        if (layer.id === "" && foundLayers.has(layer.id)) {
+          const message = `Duplicate layer: ${formatLayerId(layer.id)}`;
+          const error = new Error(
+            `layers[${index}]: duplicate layer id [empty_string], previously used`
+          );
+          layerErrors.push(error);
+        }
+        foundLayers.set(layer.id, true);
+      });
+    }
+
+    const mappedErrors = layerErrors.concat(errors).map(error => {
+      // Special case: Duplicate layer id
+      const dupMatch = error.message.match(/layers\[(\d+)\]: (duplicate layer id "?(.*)"?, previously used)/);
+      if (dupMatch) {
+        const [matchStr, index, message] = dupMatch;
+        return {
+          message: error.message,
+          parsed: {
+            type: "layer",
+            data: {
+              index: parseInt(index, 10),
+              key: "id",
+              message,
+            }
+          }
+        }
+      }
+
+      // Special case: Invalid source
+      const invalidSourceMatch = error.message.match(/layers\[(\d+)\]: (source "(?:.*)" not found)/);
+      if (invalidSourceMatch) {
+        const [matchStr, index, message] = invalidSourceMatch;
+        return {
+          message: error.message,
+          parsed: {
+            type: "layer",
+            data: {
+              index: parseInt(index, 10),
+              key: "source",
+              message,
+            }
+          }
+        }
+      }
+
+      const layerMatch = error.message.match(/layers\[(\d+)\]\.(?:(\S+)\.)?(\S+): (.*)/);
+      if (layerMatch) {
+        const [matchStr, index, group, property, message] = layerMatch;
+        const key = (group && property) ? [group, property].join(".") : property;
+        return {
+          message: error.message,
+          parsed: {
+            type: "layer",
+            data: {
+              index: parseInt(index, 10),
+              key,
+              message
+            }
+          }
+        }
+      }
+      else {
+        return {
+          message: error.message,
+        };
+      }
+    });
+
+    let dirtyMapStyle = undefined;
+    if (errors.length > 0) {
+      dirtyMapStyle = cloneDeep(newStyle);
+
+      errors.forEach(error => {
+        const {message} = error;
+        if (message) {
+          try {
+            const objPath = message.split(":")[0];
+            // Errors can be deply nested for example 'layers[0].filter[1][1][0]' we only care upto the property 'layers[0].filter'
+            const unsetPath = objPath.match(/^\S+?\[\d+\]\.[^\[]+/)[0];
+            unset(dirtyMapStyle, unsetPath);
+          }
+          catch (err) {
+            console.warn(err);
+          }
+        }
+      });
+    }
+
+    if(newStyle.glyphs !== this.state.mapStyle.glyphs) {
+      this.updateFonts(newStyle.glyphs)
+    }
+    if(newStyle.sprite !== this.state.mapStyle.sprite) {
+      this.updateIcons(newStyle.sprite)
+    }
+
+    if (opts.addRevision) {
+      this.revisionStore.addRevision(newStyle);
+    }
+    if (opts.save) {
+      this.saveStyle(newStyle);
+    }
+
+    this.setState({
+      mapStyle: newStyle,
+      dirtyMapStyle: dirtyMapStyle,
+      errors: mappedErrors,
+    }, () => {
+      this.fetchSources();
+      this.setStateInUrl();
+    })
+
   }
 
   onUndo = () => {
     const activeStyle = this.revisionStore.undo()
+
     const messages = undoMessages(this.state.mapStyle, activeStyle)
-    this.saveStyle(activeStyle)
+    this.onStyleChanged(activeStyle, {addRevision: false});
     this.setState({
-      mapStyle: activeStyle,
       infos: messages,
     })
   }
@@ -348,9 +454,8 @@ export default class App extends React.Component {
   onRedo = () => {
     const activeStyle = this.revisionStore.redo()
     const messages = redoMessages(this.state.mapStyle, activeStyle)
-    this.saveStyle(activeStyle)
+    this.onStyleChanged(activeStyle, {addRevision: false});
     this.setState({
-      mapStyle: activeStyle,
       infos: messages,
     })
   }
@@ -369,7 +474,7 @@ export default class App extends React.Component {
     }
 
     layers = layers.slice(0);
-    layers = arrayMove(layers, oldIndex, newIndex);
+    arrayMoveMutable(layers, oldIndex, newIndex);
     this.onLayersChange(layers);
   }
 
@@ -381,56 +486,50 @@ export default class App extends React.Component {
     this.onStyleChanged(changedStyle)
   }
 
-  onLayerDestroy = (layerId) => {
+  onLayerDestroy = (index) => {
     let layers = this.state.mapStyle.layers;
     const remainingLayers = layers.slice(0);
-    const idx = style.indexOfLayer(remainingLayers, layerId)
+    remainingLayers.splice(index, 1);
-    remainingLayers.splice(idx, 1);
     this.onLayersChange(remainingLayers);
   }
 
-  onLayerCopy = (layerId) => {
+  onLayerCopy = (index) => {
     let layers = this.state.mapStyle.layers;
     const changedLayers = layers.slice(0)
-    const idx = style.indexOfLayer(changedLayers, layerId)
 
-    const clonedLayer = cloneDeep(changedLayers[idx])
+    const clonedLayer = cloneDeep(changedLayers[index])
     clonedLayer.id = clonedLayer.id + "-copy"
-    changedLayers.splice(idx, 0, clonedLayer)
+    changedLayers.splice(index, 0, clonedLayer)
     this.onLayersChange(changedLayers)
   }
 
-  onLayerVisibilityToggle = (layerId) => {
+  onLayerVisibilityToggle = (index) => {
     let layers = this.state.mapStyle.layers;
     const changedLayers = layers.slice(0)
-    const idx = style.indexOfLayer(changedLayers, layerId)
 
-    const layer = { ...changedLayers[idx] }
+    const layer = { ...changedLayers[index] }
     const changedLayout = 'layout' in layer ? {...layer.layout} : {}
     changedLayout.visibility = changedLayout.visibility === 'none' ? 'visible' : 'none'
 
     layer.layout = changedLayout
-    changedLayers[idx] = layer
+    changedLayers[index] = layer
     this.onLayersChange(changedLayers)
   }
 
 
-  onLayerIdChange = (oldId, newId) => {
+  onLayerIdChange = (index, oldId, newId) => {
     const changedLayers = this.state.mapStyle.layers.slice(0)
-    const idx = style.indexOfLayer(changedLayers, oldId)
+    changedLayers[index] = {
-
+      ...changedLayers[index],
-    changedLayers[idx] = {
-      ...changedLayers[idx],
       id: newId
     }
 
     this.onLayersChange(changedLayers)
   }
 
-  onLayerChanged = (layer) => {
+  onLayerChanged = (index, layer) => {
     const changedLayers = this.state.mapStyle.layers.slice(0)
-    const idx = style.indexOfLayer(changedLayers, layer.id)
+    changedLayers[index] = layer
-    changedLayers[idx] = layer
 
     this.onLayersChange(changedLayers)
   }
@@ -438,7 +537,7 @@ export default class App extends React.Component {
   setMapState = (newState) => {
     this.setState({
       mapState: newState
-    })
+    }, this.setStateInUrl);
   }
 
   setDefaultValues = (styleObj) => {
@@ -463,25 +562,20 @@ export default class App extends React.Component {
   }
 
   fetchSources() {
-    const sourceList = {...this.state.sources};
+    const sourceList = {};
 
     for(let [key, val] of Object.entries(this.state.mapStyle.sources)) {
-      if(sourceList.hasOwnProperty(key)) {
+      if(
-        continue;
+        !this.state.sources.hasOwnProperty(key) &&
-      }
+        val.type === "vector" &&
+        val.hasOwnProperty("url")
+      ) {
+        sourceList[key] = {
+          type: val.type,
+          layers: []
+        };
 
-      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)
@@ -492,29 +586,33 @@ export default class App extends React.Component {
         fetch(url, {
           mode: 'cors',
         })
-          .then((response) => {
+        .then(response => response.json())
-            return response.json();
+        .then(json => {
-          })
-          .then((json) => {
-            if(!json.hasOwnProperty("vector_layers")) {
-              return;
-            }
 
-            // Create new objects before setState
+          if(!json.hasOwnProperty("vector_layers")) {
-            const sources = Object.assign({}, this.state.sources);
+            return;
+          }
 
-            for(let layer of json.vector_layers) {
+          // Create new objects before setState
-              sources[key].layers.push(layer.id)
+          const sources = Object.assign({}, {
-            }
+            [key]: this.state.sources[key],
+          });
 
-            console.debug("Updating source: "+key);
+          for(let layer of json.vector_layers) {
-            this.setState({
+            sources[key].layers.push(layer.id)
-              sources: sources
+          }
-            });
+
-          })
+          console.debug("Updating source: "+key);
-          .catch((err) => {
+          this.setState({
-            console.error("Failed to process sources for '%s'", url, err);
+            sources: sources
-          })
+          });
+        })
+        .catch(err => {
+          console.error("Failed to process sources for '%s'", url, err);
+        });
+      }
+      else {
+        sourceList[key] = this.state.sources[key] || this.state.mapStyle.sources[key];
       }
     }
 
@@ -531,11 +629,23 @@ export default class App extends React.Component {
     return metadata['maputnik:renderer'] || 'mbgljs';
   }
 
+  onMapChange = (mapView) => {
+    this.setState({
+      mapView,
+    });
+  }
+
   mapRenderer() {
+    const {mapStyle, dirtyMapStyle} = this.state;
     const metadata = this.state.mapStyle.metadata || {};
 
     const mapProps = {
-      mapStyle: style.replaceAccessTokens(this.state.mapStyle, {allowFallback: true}),
+      mapStyle: (dirtyMapStyle || mapStyle),
+      replaceAccessTokens: (mapStyle) => {
+        return style.replaceAccessTokens(mapStyle, {
+          allowFallback: true
+        });
+      },
       onDataChange: (e) => {
         this.layerWatcher.analyzeMap(e.map)
         this.fetchSources();
@@ -548,13 +658,15 @@ export default class App extends React.Component {
 
     // Check if OL code has been loaded?
     if(renderer === 'ol') {
-      mapElement = <OpenLayersMap
+      mapElement = <MapOpenLayers
         {...mapProps}
+        onChange={this.onMapChange}
         debugToolbox={this.state.openlayersDebugOptions.debugToolbox}
         onLayerSelect={this.onLayerSelect}
       />
     } else {
-      mapElement = <MapboxGlMap {...mapProps}
+      mapElement = <MapMapboxGl {...mapProps}
+        onChange={this.onMapChange}
         options={this.state.mapboxGlDebugOptions}
         inspectModeEnabled={this.state.mapState === "inspect"}
         highlightedLayer={this.state.mapStyle.layers[this.state.selectedLayerIndex]}
@@ -568,16 +680,98 @@ export default class App extends React.Component {
     const elementStyle = {};
     if (filterName) {
       elementStyle.filter = `url('#${filterName}')`;
-    };
+    }
 
     return <div style={elementStyle} className="maputnik-map__container">
       {mapElement}
     </div>
   }
 
-  onLayerSelect = (layerId) => {
+  setStateInUrl = () => {
-    const idx = style.indexOfLayer(this.state.mapStyle.layers, layerId)
+    const {mapState, mapStyle, isOpen} = this.state;
-    this.setState({ selectedLayerIndex: idx })
+    const {selectedLayerIndex} = this.state;
+    const url = new URL(location.href);
+    const hashVal = hash(JSON.stringify(mapStyle));
+    url.searchParams.set("layer", `${hashVal}~${selectedLayerIndex}`);
+
+    const openModals = Object.entries(isOpen)
+    .map(([key, val]) => (val === true ? key : null))
+    .filter(val => val !== null);
+
+    if (openModals.length > 0) {
+      url.searchParams.set("modal", openModals.join(","));
+    }
+    else {
+      url.searchParams.delete("modal");
+    }
+
+    if (mapState === "map") {
+      url.searchParams.delete("view");
+    }
+    else if (mapState === "inspect") {
+      url.searchParams.set("view", "inspect");
+    }
+
+    history.replaceState({selectedLayerIndex}, "Maputnik", url.href);
+  }
+
+  getInitialStateFromUrl = (mapStyle) => {
+    const url = new URL(location.href);
+    const modalParam = url.searchParams.get("modal");
+    if (modalParam && modalParam !== "") {
+      const modals = modalParam.split(",");
+      const modalObj = {};
+      modals.forEach(modalName => {
+        modalObj[modalName] = true;
+      });
+
+      this.setState({
+        isOpen: {
+          ...this.state.isOpen,
+          ...modalObj,
+        }
+      });
+    }
+
+    const view = url.searchParams.get("view");
+    if (view && view !== "") {
+      this.setMapState(view);
+    }
+
+    const path = url.searchParams.get("layer");
+    if (path) {
+      try {
+        const parts = path.split("~");
+        const [hashVal, selectedLayerIndex] = [
+          parts[0],
+          parseInt(parts[1], 10),
+        ];
+
+        let valid = true;
+        if (hashVal !== "-") {
+          const currentHashVal = hash(JSON.stringify(mapStyle));
+          if (currentHashVal !== parseInt(hashVal, 10)) {
+            valid = false;
+          }
+        }
+        if (valid) {
+          this.setState({
+            selectedLayerIndex,
+            selectedLayerOriginalId: mapStyle.layers[selectedLayerIndex].id,
+          });
+        }
+      }
+      catch (err) {
+        console.warn(err);
+      }
+    }
+  }
+
+  onLayerSelect = (index) => {
+    this.setState({
+      selectedLayerIndex: index,
+      selectedLayerOriginalId: this.state.mapStyle.layers[index].id,
+    }, this.setStateInUrl);
   }
 
   setModal(modalName, value) {
@@ -590,7 +784,7 @@ export default class App extends React.Component {
         ...this.state.isOpen,
         [modalName]: value
       }
-    })
+    }, this.setStateInUrl)
   }
 
   toggleModal(modalName) {
@@ -620,7 +814,7 @@ export default class App extends React.Component {
     const selectedLayer = layers.length > 0 ? layers[this.state.selectedLayerIndex] : null
     const metadata = this.state.mapStyle.metadata || {}
 
-    const toolbar = <Toolbar
+    const toolbar = <AppToolbar
       renderer={this._getRenderer()}
       mapState={this.state.mapState}
       mapStyle={this.state.mapStyle}
@@ -642,9 +836,11 @@ export default class App extends React.Component {
       selectedLayerIndex={this.state.selectedLayerIndex}
       layers={layers}
       sources={this.state.sources}
+      errors={this.state.errors}
     />
 
     const layerEditor = selectedLayer ? <LayerEditor
+      key={this.state.selectedLayerOriginalId}
       layer={selectedLayer}
       layerIndex={this.state.selectedLayerIndex}
       isFirstLayer={this.state.selectedLayerIndex < 1}
@@ -658,16 +854,21 @@ export default class App extends React.Component {
       onLayerCopy={this.onLayerCopy}
       onLayerVisibilityToggle={this.onLayerVisibilityToggle}
       onLayerIdChange={this.onLayerIdChange}
+      errors={this.state.errors}
     /> : null
 
     const bottomPanel = (this.state.errors.length + this.state.infos.length) > 0 ? <MessagePanel
+      currentLayer={selectedLayer}
+      selectedLayerIndex={this.state.selectedLayerIndex}
+      onLayerSelect={this.onLayerSelect}
+      mapStyle={this.state.mapStyle}
       errors={this.state.errors}
       infos={this.state.infos}
     /> : null
 
 
     const modals = <div>
-      <DebugModal
+      <ModalDebug
         renderer={this._getRenderer()}
         mapboxGlDebugOptions={this.state.mapboxGlDebugOptions}
         openlayersDebugOptions={this.state.openlayersDebugOptions}
@@ -675,13 +876,14 @@ export default class App extends React.Component {
         onChangeOpenlayersDebug={this.onChangeOpenlayersDebug}
         isOpen={this.state.isOpen.debug}
         onOpenToggle={this.toggleModal.bind(this, 'debug')}
+        mapView={this.state.mapView}
       />
-      <ShortcutsModal
+      <ModalShortcuts
         ref={(el) => this.shortcutEl = el}
         isOpen={this.state.isOpen.shortcuts}
         onOpenToggle={this.toggleModal.bind(this, 'shortcuts')}
       />
-      <SettingsModal
+      <ModalSettings
         mapStyle={this.state.mapStyle}
         onStyleChanged={this.onStyleChanged}
         onChangeMetadataProperty={this.onChangeMetadataProperty}
@@ -689,24 +891,24 @@ export default class App extends React.Component {
         onOpenToggle={this.toggleModal.bind(this, 'settings')}
         openlayersDebugOptions={this.state.openlayersDebugOptions}
       />
-      <ExportModal
+      <ModalExport
         mapStyle={this.state.mapStyle}
         onStyleChanged={this.onStyleChanged}
         isOpen={this.state.isOpen.export}
         onOpenToggle={this.toggleModal.bind(this, 'export')}
       />
-      <OpenModal
+      <ModalOpen
         isOpen={this.state.isOpen.open}
         onStyleOpen={this.openStyle}
         onOpenToggle={this.toggleModal.bind(this, 'open')}
       />
-      <SourcesModal
+      <ModalSources
         mapStyle={this.state.mapStyle}
         onStyleChanged={this.onStyleChanged}
         isOpen={this.state.isOpen.sources}
         onOpenToggle={this.toggleModal.bind(this, 'sources')}
       />
-      <SurveyModal
+      <ModalSurvey
         isOpen={this.state.isOpen.survey}
         onOpenToggle={this.toggleModal.bind(this, 'survey')}
       />

src/components/AppLayout.jsx

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

src/components/AppMessagePanel.jsx

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

src/components/AppToolbar.jsx

@@ -101,7 +101,7 @@ class ToolbarAction extends React.Component {
   }
 }
 
-export default class Toolbar extends React.Component {
+export default class AppToolbar extends React.Component {
   static propTypes = {
     mapStyle: PropTypes.object.isRequired,
     inspectModeEnabled: PropTypes.bool.isRequired,
@@ -131,35 +131,51 @@ export default class Toolbar extends React.Component {
     this.props.onSetMapState(val);
   }
 
+  onSkip = (target) => {
+    if (target === "map") {
+      document.querySelector(".mapboxgl-canvas").focus();
+    }
+    else {
+      const el = document.querySelector("#skip-target-"+target);
+      el.focus();
+    }
+  }
+
   render() {
     const views = [
       {
         id: "map",
+        group: "general",
         title: "Map",
       },
       {
         id: "inspect",
+        group: "general",
         title: "Inspect",
         disabled: this.props.renderer !== 'mbgljs',
       },
       {
         id: "filter-deuteranopia",
-        title: "Map (deuteranopia)",
+        group: "color-accessibility",
+        title: "Deuteranopia filter",
         disabled: !colorAccessibilityFiltersEnabled,
       },
       {
         id: "filter-protanopia",
-        title: "Map (protanopia)",
+        group: "color-accessibility",
+        title: "Protanopia filter",
         disabled: !colorAccessibilityFiltersEnabled,
       },
       {
         id: "filter-tritanopia",
-        title: "Map (tritanopia)",
+        group: "color-accessibility",
+        title: "Tritanopia filter",
         disabled: !colorAccessibilityFiltersEnabled,
       },
       {
         id: "filter-achromatopsia",
-        title: "Map (achromatopsia)",
+        group: "color-accessibility",
+        title: "Achromatopsia filter",
         disabled: !colorAccessibilityFiltersEnabled,
       },
     ];
@@ -168,28 +184,47 @@ export default class Toolbar extends React.Component {
       return view.id === this.props.mapState;
     });
 
-    return <div className='maputnik-toolbar'>
+    return <nav className='maputnik-toolbar'>
       <div className="maputnik-toolbar__inner">
         <div
           className="maputnik-toolbar-logo-container"
         >
-          <a className="maputnik-toolbar-skip" href="#skip-menu">
+          {/* Keyboard accessible quick links */}
-            Skip navigation
+          <button
-          </a>
+            data-wd-key="root:skip:layer-list"
-          <a
+            className="maputnik-toolbar-skip"
-            href="https://github.com/maputnik/editor"
+            onClick={e => this.onSkip("layer-list")}
-            rel="noopener noreferrer"
-            target="_blank"
-            className="maputnik-toolbar-logo"
           >
-            <img src={logoImage} alt="Maputnik" />
+            Layers list
+          </button>
+          <button
+            data-wd-key="root:skip:layer-editor"
+            className="maputnik-toolbar-skip"
+            onClick={e => this.onSkip("layer-editor")}
+          >
+            Layer editor
+          </button>
+          <button
+            data-wd-key="root:skip:map-view"
+            className="maputnik-toolbar-skip"
+            onClick={e => this.onSkip("map")}
+          >
+            Map view
+          </button>
+          <a
+            className="maputnik-toolbar-logo"
+            target="blank"
+            rel="noreferrer noopener"
+            href="https://github.com/maputnik/editor"
+          >
+            <span dangerouslySetInnerHTML={{__html: logoImage}} />
             <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">
+        <div className="maputnik-toolbar__actions" role="navigation" aria-label="Toolbar">
           <ToolbarAction wdKey="nav:open" onClick={this.props.onToggleModal.bind(this, 'open')}>
             <MdOpenInBrowser />
             <IconText>Open</IconText>
@@ -209,16 +244,30 @@ export default class Toolbar extends React.Component {
 
           <ToolbarSelect wdKey="nav:inspect">
             <MdFindInPage />
-            <IconText>View </IconText>
+            <label>View
-            <select onChange={(e) => this.handleSelection(e.target.value)} value={currentView.id}>
+              <select
-              {views.map((item) => {
+                className="maputnik-select"
-                return (
+                onChange={(e) => this.handleSelection(e.target.value)}
-                  <option key={item.id} value={item.id} disabled={item.disabled}>
+                value={currentView.id}
-                    {item.title}
+              >
-                  </option>
+                {views.filter(v => v.group === "general").map((item) => {
-                );
+                  return (
-              })}
+                    <option key={item.id} value={item.id} disabled={item.disabled}>
-            </select>
+                      {item.title}
+                    </option>
+                  );
+                })}
+                <optgroup label="Color accessibility">
+                  {views.filter(v => v.group === "color-accessibility").map((item) => {
+                    return (
+                      <option key={item.id} value={item.id} disabled={item.disabled}>
+                        {item.title}
+                      </option>
+                    );
+                  })}
+                </optgroup>
+              </select>
+            </label>
           </ToolbarSelect>
 
           <ToolbarLink href={"https://github.com/maputnik/editor/wiki"}>
@@ -231,6 +280,6 @@ export default class Toolbar extends React.Component {
           </ToolbarLinkHighlighted>
         </div>
       </div>
-    </div>
+    </nav>
   }
 }

src/components/Block.jsx

@@ -0,0 +1,103 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import classnames from 'classnames'
+import FieldDocLabel from './FieldDocLabel'
+import Doc from './Doc'
+
+
+/** Wrap a component with a label */
+export default class Block extends React.Component {
+  static propTypes = {
+    "data-wd-key": PropTypes.string,
+    label: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.element,
+    ]),
+    action: PropTypes.element,
+    children: PropTypes.node.isRequired,
+    style: PropTypes.object,
+    onChange: PropTypes.func,
+    fieldSpec: PropTypes.object,
+    wideMode: PropTypes.bool,
+    error: PropTypes.array,
+  }
+
+  constructor (props) {
+    super(props);
+    this.state = {
+      showDoc: false,
+    }
+  }
+
+  onChange(e) {
+    const value = e.target.value
+    return this.props.onChange(value === "" ? undefined : value)
+  }
+
+  onToggleDoc = (val) => {
+    this.setState({
+      showDoc: val
+    });
+  }
+
+  /**
+   * Some fields for example <InputColor/> bind click events inside the element
+   * to close the picker. This in turn propagates to the <label/> element
+   * causing the picker to reopen. This causes a scenario where the picker can
+   * never be closed once open.
+   */
+  onLabelClick = (event) => {
+    const el = event.nativeEvent.target;
+    const nativeEvent = event.nativeEvent;
+    const contains = this._blockEl.contains(el);
+
+    if (event.nativeEvent.target.nodeName !== "INPUT" && !contains) {
+      event.stopPropagation();
+    }
+		event.preventDefault();
+  }
+
+  render() {
+    const errors = [].concat(this.props.error || []);
+
+    return <label style={this.props.style}
+      data-wd-key={this.props["data-wd-key"]}
+      className={classnames({
+        "maputnik-input-block": true,
+        "maputnik-input-block--wide": this.props.wideMode,
+        "maputnik-action-block": this.props.action
+      })}
+      onClick={this.onLabelClick}
+    >
+      {this.props.fieldSpec &&
+        <div className="maputnik-input-block-label">
+          <FieldDocLabel
+            label={this.props.label}
+            onToggleDoc={this.onToggleDoc}
+            fieldSpec={this.props.fieldSpec}
+          />
+        </div>
+      }
+      {!this.props.fieldSpec &&
+        <div className="maputnik-input-block-label">
+          {this.props.label}
+        </div>
+      }
+      <div className="maputnik-input-block-action">
+        {this.props.action}
+      </div>
+      <div className="maputnik-input-block-content" ref={el => this._blockEl = el}>
+        {this.props.children}
+      </div>
+      {this.props.fieldSpec &&
+        <div
+          className="maputnik-doc-inline"
+          style={{display: this.state.showDoc ? '' : 'none'}}
+        >
+          <Doc fieldSpec={this.props.fieldSpec} />
+        </div>
+      }
+    </label>
+  }
+}
+

src/components/Collapse.jsx

@@ -1,10 +1,10 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import Collapse from 'react-collapse'
+import { Collapse as ReactCollapse } from 'react-collapse'
 import accessibility from '../../libs/accessibility'
 
 
-export default class CollapseAlt extends React.Component {
+export default class Collapse extends React.Component {
   static propTypes = {
     isActive: PropTypes.bool.isRequired,
     children: PropTypes.element.isRequired
@@ -24,9 +24,9 @@ export default class CollapseAlt extends React.Component {
     }
     else {
       return (
-        <Collapse isOpened={this.props.isActive}>
+        <ReactCollapse isOpened={this.props.isActive}>
           {this.props.children}
-        </Collapse>
+        </ReactCollapse>
       )
     }
   }

src/components/Doc.jsx

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

src/components/FieldArray.jsx

@@ -0,0 +1,21 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import Block from './Block'
+import InputArray from './InputArray'
+import Fieldset from './Fieldset'
+
+export default class FieldArray extends React.Component {
+  static propTypes = {
+    ...InputArray.propTypes,
+    name: PropTypes.string,
+  }
+
+  render() {
+    const {props} = this;
+
+    return <Fieldset label={props.label}>
+      <InputArray {...props} />
+    </Fieldset>
+  }
+}
+

src/components/FieldAutocomplete.jsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import Block from './Block'
+import InputAutocomplete from './InputAutocomplete'
+
+
+export default class FieldAutocomplete extends React.Component {
+  static propTypes = {
+    ...InputAutocomplete.propTypes,
+  }
+
+  render() {
+    const {props} = this;
+
+    return <Block label={props.label}>
+      <InputAutocomplete {...props} />
+    </Block>
+  }
+}
+

src/components/FieldCheckbox.jsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import Block from './Block'
+import InputCheckbox from './InputCheckbox'
+
+
+export default class FieldCheckbox extends React.Component {
+  static propTypes = {
+    ...InputCheckbox.propTypes,
+  }
+
+  render() {
+    const {props} = this;
+
+    return <Block label={this.props.label}>
+      <InputCheckbox {...props} />
+    </Block>
+  }
+}
+

src/components/FieldColor.jsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import Block from './Block'
+import InputColor from './InputColor'
+
+
+export default class FieldColor extends React.Component {
+  static propTypes = {
+    ...InputColor.propTypes,
+  }
+
+  render() {
+    const {props} = this;
+
+    return <Block label={props.label}>
+      <InputColor {...props} />
+    </Block>
+  }
+}
+

src/components/FieldComment.jsx

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

src/components/FieldDocLabel.jsx

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

src/components/FieldDynamicArray.jsx

@@ -0,0 +1,21 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import Block from './Block'
+import InputDynamicArray from './InputDynamicArray'
+import Fieldset from './Fieldset'
+
+export default class FieldDynamicArray extends React.Component {
+  static propTypes = {
+    ...InputDynamicArray.propTypes,
+    name: PropTypes.string,
+  }
+
+  render() {
+    const {props} = this;
+
+    return <Fieldset label={props.label}>
+      <InputDynamicArray {...props} />
+    </Fieldset>
+  }
+}
+

src/components/FieldEnum.jsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import InputEnum from './InputEnum'
+import Block from './Block';
+import Fieldset from './Fieldset';
+
+
+export default class FieldEnum extends React.Component {
+  static propTypes = {
+    ...InputEnum.propTypes,
+  }
+
+  render() {
+    const {props} = this;
+
+    return <Fieldset label={props.label}>
+      <InputEnum {...props} />
+    </Fieldset>
+  }
+}

src/components/FieldFunction.jsx

@@ -0,0 +1,410 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import SpecProperty from './_SpecProperty'
+import DataProperty from './_DataProperty'
+import ZoomProperty from './_ZoomProperty'
+import ExpressionProperty from './_ExpressionProperty'
+import {function as styleFunction} from '@maplibre/maplibre-gl-style-spec';
+import {findDefaultFromSpec} from '../util/spec-helper';
+
+
+function isLiteralExpression (value) {
+  return (Array.isArray(value) && value.length === 2 && value[0] === "literal");
+}
+
+function isGetExpression (value) {
+  return (
+    Array.isArray(value) &&
+    value.length === 2 &&
+    value[0] === "get"
+  );
+}
+
+function isZoomField(value) {
+  return (
+    typeof(value) === 'object' &&
+    value.stops &&
+    typeof(value.property) === 'undefined' &&
+    Array.isArray(value.stops) &&
+    value.stops.length > 1 &&
+    value.stops.every(stop => {
+      return (
+        Array.isArray(stop) &&
+        stop.length === 2
+      );
+    })
+  );
+}
+
+function isIdentityProperty (value) {
+  return (
+    typeof(value) === 'object' &&
+    value.type === "identity" &&
+    value.hasOwnProperty("property")
+  );
+}
+
+function isDataStopProperty (value) {
+  return (
+    typeof(value) === 'object' &&
+    value.stops &&
+    typeof(value.property) !== 'undefined' &&
+    value.stops.length > 1 &&
+    Array.isArray(value.stops) &&
+    value.stops.every(stop => {
+      return (
+        Array.isArray(stop) &&
+        stop.length === 2 &&
+        typeof(stop[0]) === 'object'
+      );
+    })
+  );
+}
+
+function isDataField(value) {
+  return (
+    isIdentityProperty(value) ||
+    isDataStopProperty(value)
+  );
+}
+
+function isPrimative (value) {
+  const valid = ["string", "boolean", "number"];
+  return valid.includes(typeof(value));
+}
+
+function isArrayOfPrimatives (values) {
+  if (Array.isArray(values)) {
+    return values.every(isPrimative);
+  }
+  return false;
+}
+
+function getDataType (value, fieldSpec={}) {
+  if (value === undefined) {
+    return "value";
+  }
+  else if (isPrimative(value)) {
+    return "value";
+  }
+  else if (fieldSpec.type === "array" && isArrayOfPrimatives(value)) {
+    return "value";
+  }
+  else if (isZoomField(value)) {
+    return "zoom_function";
+  }
+  else if (isDataField(value)) {
+    return "data_function";
+  }
+  else {
+    return "expression";
+  }
+}
+
+
+/** Supports displaying spec field for zoom function objects
+ * https://www.mapbox.com/mapbox-gl-style-spec/#types-function-zoom-property
+ */
+export default class FieldFunction  extends React.Component {
+  static propTypes = {
+      onChange: PropTypes.func.isRequired,
+      fieldName: PropTypes.string.isRequired,
+      fieldType: PropTypes.string.isRequired,
+      fieldSpec: PropTypes.object.isRequired,
+      errors: PropTypes.object,
+
+      value: PropTypes.oneOfType([
+      PropTypes.object,
+      PropTypes.string,
+      PropTypes.number,
+      PropTypes.bool,
+      PropTypes.array
+    ]),
+  }
+
+  constructor (props) {
+    super();
+    this.state = {
+      dataType: getDataType(props.value, props.fieldSpec),
+      isEditing: false,
+    }
+  }
+
+  static getDerivedStateFromProps(props, state) {
+    // Because otherwise when editing values we end up accidentally changing field type.
+    if (state.isEditing) {
+      return {};
+    }
+    else {
+      return {
+        isEditing: false,
+        dataType: getDataType(props.value, props.fieldSpec)
+      };
+    }
+  }
+
+  getFieldFunctionType(fieldSpec) {
+    if (fieldSpec.expression.interpolated) {
+      return "exponential"
+    }
+    if (fieldSpec.type === "number") {
+      return "interval"
+    }
+    return "categorical"
+  }
+
+  addStop = () => {
+    const stops = this.props.value.stops.slice(0)
+    const lastStop = stops[stops.length - 1]
+    if (typeof lastStop[0] === "object") {
+      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)
+  }
+
+  deleteExpression = () => {
+    const {fieldSpec, fieldName} = this.props;
+    this.props.onChange(fieldName, fieldSpec.default);
+    this.setState({
+      dataType: "value",
+    });
+  }
+
+  deleteStop = (stopIdx) => {
+    const stops = this.props.value.stops.slice(0)
+    stops.splice(stopIdx, 1)
+
+    let changedValue = {
+      ...this.props.value,
+      stops: stops,
+    }
+
+    if(stops.length === 1) {
+      changedValue = stops[0][1]
+    }
+
+    this.props.onChange(this.props.fieldName, changedValue)
+  }
+
+  makeZoomFunction = () => {
+    const {value} = this.props;
+
+    let zoomFunc;
+    if (typeof(value) === "object") {
+      if (value.stops) {
+        zoomFunc = {
+          base: value.base,
+          stops: value.stops.map(stop => {
+            return [stop[0].zoom, stop[1] || findDefaultFromSpec(this.props.fieldSpec)];
+          })
+        }
+      }
+      else {
+        zoomFunc = {
+          base: value.base,
+          stops: [
+            [6, findDefaultFromSpec(this.props.fieldSpec)],
+            [10, findDefaultFromSpec(this.props.fieldSpec)]
+          ]
+        }
+      }
+    }
+    else {
+      zoomFunc = {
+        stops: [
+          [6, value || findDefaultFromSpec(this.props.fieldSpec)],
+          [10, value || findDefaultFromSpec(this.props.fieldSpec)]
+        ]
+      }
+    }
+
+    this.props.onChange(this.props.fieldName, zoomFunc)
+  }
+
+  undoExpression = () => {
+    const {value, fieldName} = this.props;
+
+    if (isGetExpression(value)) {
+      this.props.onChange(fieldName, {
+        "type": "identity",
+        "property": value[1]
+      });
+      this.setState({
+        dataType: "value",
+      });
+    }
+    else if (isLiteralExpression(value)) {
+      this.props.onChange(fieldName, value[1]);
+      this.setState({
+        dataType: "value",
+      });
+    }
+  }
+
+  canUndo = () => {
+    const {value, fieldSpec} = this.props;
+    return (
+      isGetExpression(value) ||
+      isLiteralExpression(value) ||
+      isPrimative(value) ||
+      (Array.isArray(value) && fieldSpec.type === "array")
+    );
+  }
+
+  makeExpression = () => {
+    const {value, fieldSpec} = this.props;
+    let expression;
+
+    if (typeof(value) === "object" && 'stops' in value) {
+      expression = styleFunction.convertFunction(value, fieldSpec);
+    }
+    else if (isIdentityProperty(value)) {
+      expression = ["get", value.property];
+    }
+    else {
+      expression = ["literal", value || this.props.fieldSpec.default];
+    }
+    this.props.onChange(this.props.fieldName, expression);
+  }
+
+  makeDataFunction = () => {
+    const functionType = this.getFieldFunctionType(this.props.fieldSpec);
+    const stopValue = functionType === 'categorical' ? '' : 0;
+    const {value} = this.props;
+    let dataFunc;
+
+    if (typeof(value) === "object") {
+      if (value.stops) {
+        dataFunc = {
+          property: "",
+          type: functionType,
+          base: value.base,
+          stops: value.stops.map(stop => {
+            return [{zoom: stop[0], value: stopValue}, stop[1] || findDefaultFromSpec(this.props.fieldSpec)];
+          })
+        }
+      }
+      else {
+        dataFunc = {
+          property: "",
+          type: functionType,
+          base: value.base,
+          stops: [
+            [{zoom: 6, value: stopValue}, findDefaultFromSpec(this.props.fieldSpec)],
+            [{zoom: 10, value: stopValue}, findDefaultFromSpec(this.props.fieldSpec)]
+          ]
+        }
+      }
+    }
+    else {
+      dataFunc = {
+        property: "",
+        type: functionType,
+        base: value.base,
+        stops: [
+          [{zoom: 6, value: stopValue}, this.props.value || findDefaultFromSpec(this.props.fieldSpec)],
+          [{zoom: 10, value: stopValue}, this.props.value || findDefaultFromSpec(this.props.fieldSpec)]
+        ]
+      }
+    }
+
+    this.props.onChange(this.props.fieldName, dataFunc)
+  }
+
+  onMarkEditing = () => {
+    this.setState({isEditing: true});
+  }
+
+  onUnmarkEditing = () => {
+    this.setState({isEditing: false});
+  }
+
+  render() {
+    const {dataType} = this.state;
+    const propClass = this.props.fieldSpec.default === this.props.value ? "maputnik-default-property" : "maputnik-modified-property"
+    let specField;
+
+    if (dataType === "expression") {
+      specField = (
+        <ExpressionProperty
+          errors={this.props.errors}
+          onChange={this.props.onChange.bind(this, this.props.fieldName)}
+          canUndo={this.canUndo}
+          onUndo={this.undoExpression}
+          onDelete={this.deleteExpression}
+          fieldType={this.props.fieldType}
+          fieldName={this.props.fieldName}
+          fieldSpec={this.props.fieldSpec}
+          value={this.props.value}
+          onFocus={this.onMarkEditing}
+          onBlur={this.onUnmarkEditing}
+        />
+      );
+    }
+    else if (dataType === "zoom_function") {
+      specField = (
+        <ZoomProperty
+          errors={this.props.errors}
+          onChange={this.props.onChange.bind(this)}
+          fieldType={this.props.fieldType}
+          fieldName={this.props.fieldName}
+          fieldSpec={this.props.fieldSpec}
+          value={this.props.value}
+          onDeleteStop={this.deleteStop}
+          onAddStop={this.addStop}
+          onChangeToDataFunction={this.makeDataFunction}
+          onExpressionClick={this.makeExpression}
+        />
+      )
+    }
+    else if (dataType === "data_function") {
+      // TODO: Rename to FieldFunction **this file** shouldn't be called that
+      specField = (
+        <DataProperty
+          errors={this.props.errors}
+          onChange={this.props.onChange.bind(this)}
+          fieldType={this.props.fieldType}
+          fieldName={this.props.fieldName}
+          fieldSpec={this.props.fieldSpec}
+          value={this.props.value}
+          onDeleteStop={this.deleteStop}
+          onAddStop={this.addStop}
+          onChangeToZoomFunction={this.makeZoomFunction}
+          onExpressionClick={this.makeExpression}
+        />
+      )
+    }
+    else {
+      specField = (
+        <SpecProperty
+          errors={this.props.errors}
+          onChange={this.props.onChange.bind(this)}
+          fieldType={this.props.fieldType}
+          fieldName={this.props.fieldName}
+          fieldSpec={this.props.fieldSpec}
+          value={this.props.value}
+          onZoomClick={this.makeZoomFunction}
+          onDataClick={this.makeDataFunction}
+          onExpressionClick={this.makeExpression}
+        />
+      )
+    }
+    return <div className={propClass} data-wd-key={"spec-field:"+this.props.fieldName}>
+      {specField}
+    </div>
+  }
+}
+

src/components/FieldId.jsx

@@ -0,0 +1,27 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import {latest} from '@maplibre/maplibre-gl-style-spec'
+import Block from './Block'
+import InputString from './InputString'
+
+export default class FieldId extends React.Component {
+  static propTypes = {
+    value: PropTypes.string.isRequired,
+    wdKey: PropTypes.string.isRequired,
+    onChange: PropTypes.func.isRequired,
+    error: PropTypes.object,
+  }
+
+  render() {
+    return <Block label={"ID"} fieldSpec={latest.layer.id}
+      data-wd-key={this.props.wdKey}
+      error={this.props.error}
+    >
+      <InputString
+        value={this.props.value}
+        onInput={this.props.onChange}
+      />
+    </Block>
+  }
+}

src/components/FieldJson.jsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import InputJson from './InputJson'
+
+
+export default class FieldJson extends React.Component {
+  static propTypes = {
+    ...InputJson.propTypes,
+  }
+
+  render() {
+    const {props} = this;
+    return <InputJson {...props} />
+  }
+}
+

src/components/FieldMaxZoom.jsx

@@ -0,0 +1,30 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import {latest} from '@maplibre/maplibre-gl-style-spec'
+import Block from './Block'
+import InputNumber from './InputNumber'
+
+export default class FieldMaxZoom extends React.Component {
+  static propTypes = {
+    value: PropTypes.number,
+    onChange: PropTypes.func.isRequired,
+    error: PropTypes.object,
+  }
+
+  render() {
+    return <Block label={"Max Zoom"} fieldSpec={latest.layer.maxzoom}
+      error={this.props.error}
+      data-wd-key="max-zoom"
+    >
+      <InputNumber
+        allowRange={true}
+        value={this.props.value}
+        onChange={this.props.onChange}
+        min={latest.layer.maxzoom.minimum}
+        max={latest.layer.maxzoom.maximum}
+        default={latest.layer.maxzoom.maximum}
+      />
+    </Block>
+  }
+}

src/components/FieldMinZoom.jsx

@@ -0,0 +1,30 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import {latest} from '@maplibre/maplibre-gl-style-spec'
+import Block from './Block'
+import InputNumber from './InputNumber'
+
+export default class FieldMinZoom extends React.Component {
+  static propTypes = {
+    value: PropTypes.number,
+    onChange: PropTypes.func.isRequired,
+    error: PropTypes.object,
+  }
+
+  render() {
+    return <Block label={"Min Zoom"} fieldSpec={latest.layer.minzoom}
+      error={this.props.error}
+      data-wd-key="min-zoom"
+    >
+      <InputNumber
+        allowRange={true}
+        value={this.props.value}
+        onChange={this.props.onChange}
+        min={latest.layer.minzoom.minimum}
+        max={latest.layer.minzoom.maximum}
+        default={latest.layer.minzoom.minimum}
+      />
+    </Block>
+  }
+}

src/components/FieldMultiInput.jsx

@@ -0,0 +1,21 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import Block from './Block'
+import InputMultiInput from './InputMultiInput'
+import Fieldset from './Fieldset'
+
+
+export default class FieldMultiInput extends React.Component {
+  static propTypes = {
+    ...InputMultiInput.propTypes,
+  }
+
+  render() {
+    const {props} = this;
+
+    return <Fieldset label={props.label}>
+      <InputMultiInput {...props} />
+    </Fieldset>
+  }
+}
+

src/components/FieldNumber.jsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import InputNumber from './InputNumber'
+import Block from './Block'
+
+
+export default class FieldNumber extends React.Component {
+  static propTypes = {
+    ...InputNumber.propTypes,
+  }
+
+  render() {
+    const {props} = this;
+    return <Block label={props.label}>
+      <InputNumber {...props} />
+    </Block>
+  }
+}
+

src/components/FieldSelect.jsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import Block from './Block'
+import InputSelect from './InputSelect'
+
+
+export default class FieldSelect extends React.Component {
+  static propTypes = {
+    ...InputSelect.propTypes,
+  }
+
+  render() {
+    const {props} = this;
+
+    return <Block label={props.label}>
+      <InputSelect {...props}/>
+    </Block>
+  }
+}
+

src/components/FieldSource.jsx

@@ -0,0 +1,36 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import {latest} from '@maplibre/maplibre-gl-style-spec'
+import Block from './Block'
+import InputAutocomplete from './InputAutocomplete'
+
+export default class FieldSource extends React.Component {
+  static propTypes = {
+    value: PropTypes.string,
+    wdKey: PropTypes.string,
+    onChange: PropTypes.func,
+    sourceIds: PropTypes.array,
+    error: PropTypes.object,
+  }
+
+  static defaultProps = {
+    onChange: () => {},
+    sourceIds: [],
+  }
+
+  render() {
+    return <Block
+      label={"Source"}
+      fieldSpec={latest.layer.source}
+      error={this.props.error}
+      data-wd-key={this.props.wdKey}
+    >
+      <InputAutocomplete
+        value={this.props.value}
+        onChange={this.props.onChange}
+        options={this.props.sourceIds.map(src => [src, src])}
+      />
+    </Block>
+  }
+}

src/components/FieldSourceLayer.jsx

@@ -0,0 +1,34 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import {latest} from '@maplibre/maplibre-gl-style-spec'
+import Block from './Block'
+import InputAutocomplete from './InputAutocomplete'
+
+export default class FieldSourceLayer extends React.Component {
+  static propTypes = {
+    value: PropTypes.string,
+    onChange: PropTypes.func,
+    sourceLayerIds: PropTypes.array,
+    isFixed: PropTypes.bool,
+  }
+
+  static defaultProps = {
+    onChange: () => {},
+    sourceLayerIds: [],
+    isFixed: false
+  }
+
+  render() {
+    return <Block label={"Source Layer"} fieldSpec={latest.layer['source-layer']}
+      data-wd-key="layer-source-layer"
+    >
+      <InputAutocomplete
+        keepMenuWithinWindowBounds={!!this.props.isFixed}
+        value={this.props.value}
+        onChange={this.props.onChange}
+        options={this.props.sourceLayerIds.map(l => [l, l])}
+      />
+    </Block>
+  }
+}

src/components/FieldString.jsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import Block from './Block'
+import InputString from './InputString'
+
+export default class FieldString extends React.Component {
+  static propTypes = {
+    ...InputString.propTypes,
+    name: PropTypes.string,
+  }
+
+  render() {
+    const {props} = this;
+
+    return <Block label={props.label}>
+      <InputString {...props} />
+    </Block>
+  }
+}
+

src/components/FieldType.jsx

@@ -0,0 +1,52 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import {latest} from '@maplibre/maplibre-gl-style-spec'
+import Block from './Block'
+import InputSelect from './InputSelect'
+import InputString from './InputString'
+
+export default class FieldType extends React.Component {
+  static propTypes = {
+    value: PropTypes.string.isRequired,
+    wdKey: PropTypes.string,
+    onChange: PropTypes.func.isRequired,
+    error: PropTypes.object,
+    disabled: PropTypes.bool,
+  }
+
+  static defaultProps = {
+    disabled: false,
+  }
+
+  render() {
+    return <Block label={"Type"} fieldSpec={latest.layer.type}
+      data-wd-key={this.props.wdKey}
+      error={this.props.error}
+    >
+      {this.props.disabled &&
+        <InputString
+          value={this.props.value}
+          disabled={true}
+        />
+      }
+      {!this.props.disabled &&
+        <InputSelect
+          options={[
+            ['background', 'Background'],
+            ['fill', 'Fill'],
+            ['line', 'Line'],
+            ['symbol', 'Symbol'],
+            ['raster', 'Raster'],
+            ['circle', 'Circle'],
+            ['fill-extrusion', 'Fill Extrusion'],
+            ['hillshade', 'Hillshade'],
+            ['heatmap', 'Heatmap'],
+          ]}
+          onChange={this.props.onChange}
+          value={this.props.value}
+        />
+      }
+    </Block>
+  }
+}

src/components/FieldUrl.jsx

@@ -0,0 +1,22 @@
+import React, {Fragment} from 'react'
+import PropTypes from 'prop-types'
+import InputUrl from './InputUrl'
+import Block from './Block'
+
+
+export default class FieldUrl extends React.Component {
+  static propTypes = {
+    ...InputUrl.propTypes,
+  }
+
+  render () {
+    const {props} = this;
+
+    return (
+      <Block label={this.props.label}>
+        <InputUrl {...props} />
+      </Block>
+    );
+  }
+}
+

src/components/Fieldset.jsx

@@ -0,0 +1,58 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import FieldDocLabel from './FieldDocLabel'
+import Doc from './Doc'
+
+
+let IDX = 0;
+
+export default class Fieldset extends React.Component {
+  constructor (props) {
+    super(props);
+    this._labelId = `fieldset_label_${(IDX++)}`;
+    this.state = {
+      showDoc: false,
+    }
+  }
+
+  onToggleDoc = (val) => {
+    this.setState({
+      showDoc: val
+    });
+  }
+
+  render () {
+    const {props} = this;
+
+    return <div className="maputnik-input-block" role="group" aria-labelledby={this._labelId}>
+      {this.props.fieldSpec &&
+        <div className="maputnik-input-block-label">
+          <FieldDocLabel
+            label={this.props.label}
+            onToggleDoc={this.onToggleDoc}
+            fieldSpec={this.props.fieldSpec}
+          />
+        </div>
+      }
+      {!this.props.fieldSpec &&
+        <div className="maputnik-input-block-label">
+          {props.label}
+        </div>
+      }
+      <div className="maputnik-input-block-action">
+        {this.props.action}
+      </div>
+      <div className="maputnik-input-block-content">
+        {props.children}
+      </div>
+      {this.props.fieldSpec &&
+        <div
+          className="maputnik-doc-inline"
+          style={{display: this.state.showDoc ? '' : 'none'}}
+        >
+          <Doc fieldSpec={this.props.fieldSpec} />
+        </div>
+      }
+    </div>
+  }
+}

src/components/FilterEditor.jsx

@@ -0,0 +1,310 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { combiningFilterOps } from '../libs/filterops.js'
+import {mdiTableRowPlusAfter} from '@mdi/js';
+import {isEqual} from 'lodash';
+
+import {latest, migrate, convertFilter} from '@maplibre/maplibre-gl-style-spec'
+import InputSelect from './InputSelect'
+import Block from './Block'
+import SingleFilterEditor from './SingleFilterEditor'
+import FilterEditorBlock from './FilterEditorBlock'
+import InputButton from './InputButton'
+import Doc from './Doc'
+import ExpressionProperty from './_ExpressionProperty';
+import {mdiFunctionVariant} from '@mdi/js';
+
+
+function combiningFilter (props) {
+  let filter = props.filter || ['all'];
+
+  if (!Array.isArray(filter)) {
+    return filter;
+  }
+
+  let combiningOp = filter[0];
+  let filters = filter.slice(1);
+
+  if(combiningFilterOps.indexOf(combiningOp) < 0) {
+    combiningOp = 'all';
+    filters = [filter.slice(0)];
+  }
+
+  return [combiningOp, ...filters];
+}
+
+function migrateFilter (filter) {
+  return migrate(createStyleFromFilter(filter)).layers[0].filter;
+}
+
+function createStyleFromFilter (filter) {
+  return {
+    "id": "tmp",
+    "version": 8,
+    "name": "Empty Style",
+    "metadata": {"maputnik:renderer": "mbgljs"},
+    "sources": {
+      "tmp": {
+        "type": "geojson",
+        "data": {}
+      }
+    },
+    "sprite": "",
+    "glyphs": "https://orangemug.github.io/font-glyphs/glyphs/{fontstack}/{range}.pbf",
+    "layers": [
+      {
+        id: "tmp",
+        type: "fill",
+        source: "tmp",
+        filter: filter,
+      },
+    ],
+  };
+}
+
+const FILTER_OPS = [
+  "all",
+  "any",
+  "none"
+];
+
+// If we convert a filter that is an expression to an expression it'll remain the same in value
+function checkIfSimpleFilter (filter) {
+  if (filter.length === 1 && FILTER_OPS.includes(filter[0])) {
+    return true;
+  }
+  const expression = convertFilter(filter);
+  return !isEqual(expression, filter);
+}
+
+function hasCombiningFilter(filter) {
+  return combiningFilterOps.indexOf(filter[0]) >= 0
+}
+
+function hasNestedCombiningFilter(filter) {
+  if(hasCombiningFilter(filter)) {
+    const combinedFilters = filter.slice(1)
+    return filter.slice(1).map(f => hasCombiningFilter(f)).filter(f => f == true).length > 0
+  }
+  return false
+}
+
+export default class FilterEditor extends React.Component {
+  static propTypes = {
+    /** Properties of the vector layer and the available fields */
+    properties: PropTypes.object,
+    filter: PropTypes.array,
+    errors: PropTypes.object,
+    onChange: PropTypes.func.isRequired,
+  }
+
+  static defaultProps = {
+    filter: ["all"],
+  }
+
+  constructor (props) {
+    super();
+    this.state = {
+      showDoc: false,
+      displaySimpleFilter: checkIfSimpleFilter(combiningFilter(props)),
+    };
+  }
+
+  // Convert filter to combining filter
+  onFilterPartChanged(filterIdx, newPart) {
+    const newFilter = combiningFilter(this.props).slice(0)
+    newFilter[filterIdx] = newPart
+    this.props.onChange(newFilter)
+  }
+
+  deleteFilterItem(filterIdx) {
+    const newFilter = combiningFilter(this.props).slice(0)
+    newFilter.splice(filterIdx + 1, 1)
+    this.props.onChange(newFilter)
+  }
+
+  addFilterItem = () => {
+    const newFilterItem = combiningFilter(this.props).slice(0)
+    newFilterItem.push(['==', 'name', ''])
+    this.props.onChange(newFilterItem)
+  }
+
+  onToggleDoc = (val) => {
+    this.setState({
+      showDoc: val
+    });
+  }
+
+  makeFilter = () => {
+    this.setState({
+      displaySimpleFilter: true,
+    })
+  }
+
+  makeExpression = () => {
+    let filter = combiningFilter(this.props);
+    this.props.onChange(migrateFilter(filter));
+    this.setState({
+      displaySimpleFilter: false,
+    })
+  }
+
+  static getDerivedStateFromProps (props, currentState) {
+    const {filter} = props;
+    const displaySimpleFilter = checkIfSimpleFilter(combiningFilter(props));
+
+    // Upgrade but never downgrade
+    if (!displaySimpleFilter && currentState.displaySimpleFilter === true) {
+      return {
+        displaySimpleFilter: false,
+        valueIsSimpleFilter: false,
+      };
+    }
+    else if (displaySimpleFilter && currentState.displaySimpleFilter === false) {
+      return {
+        valueIsSimpleFilter: true,
+      }
+    }
+    else {
+      return {
+        valueIsSimpleFilter: false,
+      };
+    }
+  }
+
+  render() {
+    const {errors} = this.props;
+    const {displaySimpleFilter} = this.state;
+    const fieldSpec={
+      doc: latest.layer.filter.doc + " Combine multiple filters together by using a compound filter."
+    };
+    const defaultFilter = ["all"];
+
+    const isNestedCombiningFilter = displaySimpleFilter && hasNestedCombiningFilter(combiningFilter(this.props));
+
+    if (isNestedCombiningFilter) {
+      return <div className="maputnik-filter-editor-unsupported">
+        <p>
+          Nested filters are not supported.
+        </p>
+        <InputButton
+          onClick={this.makeExpression}
+          title="Convert to expression"
+        >
+          <svg style={{marginRight: "0.2em", width:"14px", height:"14px", verticalAlign: "middle"}} viewBox="0 0 24 24">
+            <path fill="currentColor" d={mdiFunctionVariant} />
+          </svg>
+          Upgrade to expression
+        </InputButton>
+      </div>
+    }
+    else if (displaySimpleFilter) {
+      const filter = combiningFilter(this.props);
+      let combiningOp = filter[0];
+      let filters = filter.slice(1)
+
+      const actions = (
+        <div>
+          <InputButton
+            onClick={this.makeExpression}
+            title="Convert to expression"
+            className="maputnik-make-zoom-function"
+          >
+            <svg style={{width:"14px", height:"14px", verticalAlign: "middle"}} viewBox="0 0 24 24">
+              <path fill="currentColor" d={mdiFunctionVariant} />
+            </svg>
+          </InputButton>
+        </div>
+      );
+
+      const editorBlocks = filters.map((f, idx) => {
+        const error = errors[`filter[${idx+1}]`];
+
+        return (
+          <div key={`block-${idx}`}>
+            <FilterEditorBlock key={idx} onDelete={this.deleteFilterItem.bind(this, idx)}>
+              <SingleFilterEditor
+                properties={this.props.properties}
+                filter={f}
+                onChange={this.onFilterPartChanged.bind(this, idx + 1)}
+              />
+            </FilterEditorBlock>
+            {error &&
+              <div key="error" className="maputnik-inline-error">{error.message}</div>
+            }
+          </div>
+        );
+      })
+
+
+      return (
+        <>
+          <Block
+            key="top"
+            fieldSpec={fieldSpec}
+            label={"Filter"}
+            action={actions}
+          >
+            <InputSelect
+              value={combiningOp}
+              onChange={this.onFilterPartChanged.bind(this, 0)}
+              options={[["all", "every filter matches"], ["none", "no filter matches"], ["any", "any filter matches"]]}
+            />
+          </Block>
+          {editorBlocks}
+          <div
+            key="buttons"
+            className="maputnik-filter-editor-add-wrapper"
+          >
+            <InputButton
+              data-wd-key="layer-filter-button"
+              className="maputnik-add-filter"
+              onClick={this.addFilterItem}
+            >
+              <svg style={{width:"14px", height:"14px", verticalAlign: "text-bottom"}} viewBox="0 0 24 24">
+                <path fill="currentColor" d={mdiTableRowPlusAfter} />
+              </svg> Add filter
+            </InputButton>
+          </div>
+          <div
+            key="doc"
+            className="maputnik-doc-inline"
+            style={{display: this.state.showDoc ? '' : 'none'}}
+          >
+            <Doc fieldSpec={fieldSpec} />
+          </div>
+        </>
+      );
+    }
+    else {
+      let {filter} = this.props;
+
+      return (
+        <>
+          <ExpressionProperty
+            onDelete={() => {
+              this.setState({displaySimpleFilter: true});
+              this.props.onChange(defaultFilter);
+            }}
+            fieldName="filter"
+            fieldSpec={fieldSpec}
+            value={filter}
+            errors={errors}
+            onChange={this.props.onChange}
+          />
+          {this.state.valueIsSimpleFilter &&
+            <div className="maputnik-expr-infobox">
+              You&apos;ve entered a old style filter,{' '}
+              <button
+                onClick={this.makeFilter}
+                className="maputnik-expr-infobox__button"
+              >
+                switch to filter editor
+              </button>
+            </div>
+          }
+        </>
+      );
+    }
+  }
+}

src/components/FilterEditorBlock.jsx

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

src/components/IconBackground.jsx

@@ -2,7 +2,7 @@ import React from 'react'
 import IconBase from 'react-icon-base'
 
 
-export default class BackgroundIcon extends React.Component {
+export default class IconBackground extends React.Component {
   render() {
     return (
       <IconBase viewBox="0 0 20 20" {...this.props}>

src/components/IconCircle.jsx

@@ -2,7 +2,7 @@ import React from 'react'
 import IconBase from 'react-icon-base'
 
 
-export default class FillIcon extends React.Component {
+export default class IconCircle extends React.Component {
   render() {
     return (
       <IconBase viewBox="0 0 20 20" {...this.props}>

src/components/IconFill.jsx

@@ -2,7 +2,7 @@ import React from 'react'
 import IconBase from 'react-icon-base'
 
 
-export default class FillIcon extends React.Component {
+export default class IconFill extends React.Component {
   render() {
     return (
       <IconBase viewBox="0 0 20 20" {...this.props}>

src/components/IconLayer.jsx

@@ -0,0 +1,33 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import IconLine from './IconLine.jsx'
+import IconFill from './IconFill.jsx'
+import IconSymbol from './IconSymbol.jsx'
+import IconBackground from './IconBackground.jsx'
+import IconCircle from './IconCircle.jsx'
+import IconMissing from './IconMissing.jsx'
+
+export default class IconLayer extends React.Component {
+  static propTypes = {
+    type: PropTypes.string.isRequired,
+    style: PropTypes.object,
+  }
+
+  render() {
+    const iconProps = { style: this.props.style }
+    switch(this.props.type) {
+      case 'fill-extrusion': return <IconBackground {...iconProps} />
+      case 'raster': return <IconFill {...iconProps} />
+      case 'hillshade': return <IconFill {...iconProps} />
+      case 'heatmap': return <IconFill {...iconProps} />
+      case 'fill': return <IconFill {...iconProps} />
+      case 'background': return <IconBackground {...iconProps} />
+      case 'line': return <IconLine {...iconProps} />
+      case 'symbol': return <IconSymbol {...iconProps} />
+      case 'circle': return <IconCircle {...iconProps} />
+      default: return <IconMissing {...iconProps} />
+    }
+  }
+}
+

src/components/IconLine.jsx

@@ -2,7 +2,7 @@ import React from 'react'
 import IconBase from 'react-icon-base'
 
 
-export default class FillIcon extends React.Component {
+export default class IconLine extends React.Component {
   render() {
     return (
       <IconBase viewBox="0 0 20 20" {...this.props}>

src/components/IconMissing.jsx

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

src/components/IconSymbol.jsx

@@ -2,7 +2,7 @@ import React from 'react'
 import IconBase from 'react-icon-base'
 
 
-export default class SymbolIcon extends React.Component {
+export default class IconSymbol extends React.Component {
   render() {
     return (
       <IconBase viewBox="0 0 20 20" {...this.props}>

src/components/InputArray.jsx

@@ -0,0 +1,113 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import InputString from './InputString'
+import InputNumber from './InputNumber'
+
+export default class FieldArray extends React.Component {
+  static propTypes = {
+    value: PropTypes.array,
+    type: PropTypes.string,
+    length: PropTypes.number,
+    default: PropTypes.array,
+    onChange: PropTypes.func,
+    'aria-label': PropTypes.string,
+  }
+
+  static defaultProps = {
+    value: [],
+    default: [],
+  }
+
+  constructor (props) {
+    super(props);
+    this.state = {
+      value: this.props.value.slice(0),
+      // This is so we can compare changes in getDerivedStateFromProps
+      initialPropsValue: this.props.value.slice(0),
+    };
+  }
+
+  static getDerivedStateFromProps(props, state) {
+    const value = [];
+    const initialPropsValue = state.initialPropsValue.slice(0);
+
+    Array(props.length).fill(null).map((_, i) => {
+      if (props.value[i] === state.initialPropsValue[i]) {
+        value[i] = state.value[i];
+      }
+      else {
+        value[i] = state.value[i];
+        initialPropsValue[i] = state.value[i];
+      }
+    })
+
+    return {
+      value,
+      initialPropsValue,
+    };
+  }
+
+  isComplete (value) {
+    return Array(this.props.length).fill(null).every((_, i) => {
+      const val = value[i]
+      return !(val === undefined || val === "");
+    });
+  }
+
+  changeValue(idx, newValue) {
+    const value = this.state.value.slice(0);
+    value[idx] = newValue;
+
+    this.setState({
+      value,
+    }, () => {
+      if (this.isComplete(value)) {
+        this.props.onChange(value);
+      }
+      else {
+        // Unset until complete
+        this.props.onChange(undefined);
+      }
+    });
+  }
+
+  render() {
+    const {value} = this.state;
+
+    const containsValues = (
+      value.length > 0 &&
+      !value.every(val => {
+        return (val === "" || val === undefined)
+      })
+    );
+
+    const inputs = Array(this.props.length).fill(null).map((_, i) => {
+      if(this.props.type === 'number') {
+        return <InputNumber
+          key={i}
+          default={containsValues ? undefined : this.props.default[i]}
+          value={value[i]}
+          required={containsValues ? true : false}
+          onChange={this.changeValue.bind(this, i)}
+          aria-label={this.props['aria-label'] || this.props.label}
+        />
+      } else {
+        return <InputString
+          key={i}
+          default={containsValues ? undefined : this.props.default[i]}
+          value={value[i]}
+          required={containsValues ? true : false}
+          onChange={this.changeValue.bind(this, i)}
+          aria-label={this.props['aria-label'] || this.props.label}
+        />
+      }
+    })
+
+    return (
+      <div className="maputnik-array">
+        {inputs}
+      </div>
+    )
+  }
+}
+

src/components/InputAutocomplete.jsx

@@ -6,12 +6,13 @@ import Autocomplete from 'react-autocomplete'
 
 const MAX_HEIGHT = 140;
 
-class AutocompleteInput extends React.Component {
+export default class InputAutocomplete extends React.Component {
   static propTypes = {
     value: PropTypes.string,
     options: PropTypes.array,
     onChange: PropTypes.func,
-    keepMenuWithinWindowBounds: PropTypes.bool
+    keepMenuWithinWindowBounds: PropTypes.bool,
+    'aria-label': PropTypes.string,
   }
 
   state = {
@@ -66,6 +67,7 @@ class AutocompleteInput extends React.Component {
           style: null
         }}
         inputProps={{
+          'aria-label': this.props['aria-label'],
           className: "maputnik-string",
           spellCheck: false
         }}
@@ -95,4 +97,4 @@ class AutocompleteInput extends React.Component {
   }
 }
 
-export default AutocompleteInput
+

src/components/InputButton.jsx

@@ -2,7 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
 
-class Button extends React.Component {
+export default class InputButton extends React.Component {
   static propTypes = {
     "data-wd-key": PropTypes.string,
     "aria-label": PropTypes.string,
@@ -11,19 +11,25 @@ class Button extends React.Component {
     className: PropTypes.string,
     children: PropTypes.node,
     disabled: PropTypes.bool,
+    type: PropTypes.string,
+    id: PropTypes.string,
+    title: PropTypes.string,
   }
 
   render() {
     return <button
+      id={this.props.id}
+      title={this.props.title}
+      type={this.props.type}
       onClick={this.props.onClick}
       disabled={this.props.disabled}
       aria-label={this.props["aria-label"]}
       className={classnames("maputnik-button", this.props.className)}
       data-wd-key={this.props["data-wd-key"]}
-      style={this.props.style}>
+      style={this.props.style}
+    >
       {this.props.children}
     </button>
   }
 }
 
-export default Button

src/components/InputCheckbox.jsx

@@ -1,20 +1,29 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-class CheckboxInput extends React.Component {
+export default class InputCheckbox extends React.Component {
   static propTypes = {
-    value: PropTypes.bool.isRequired,
+    value: PropTypes.bool,
     style: PropTypes.object,
     onChange: PropTypes.func,
   }
 
+  static defaultProps = {
+    value: false,
+  }
+
+  onChange = () => {
+    this.props.onChange(!this.props.value);
+  }
+
   render() {
-    return <label className="maputnik-checkbox-wrapper">
+    return <div className="maputnik-checkbox-wrapper">
       <input
         className="maputnik-checkbox"
         type="checkbox"
         style={this.props.style}
-        onChange={e => this.props.onChange(!this.props.value)}
+        onChange={this.onChange}
+        onClick={this.onChange}
         checked={this.props.value}
       />
       <div className="maputnik-checkbox-box">
@@ -24,8 +33,7 @@ class CheckboxInput extends React.Component {
           <path d='M1 14 L5 10 L13 18 L27 4 L31 8 L13 26 z' />
         </svg>
       </div>
-    </label>
+    </div>
   }
 }
 
-export default CheckboxInput

src/components/InputColor.jsx

@@ -2,6 +2,7 @@ import React from 'react'
 import Color from 'color'
 import ChromePicker from 'react-color/lib/components/chrome/Chrome'
 import PropTypes from 'prop-types'
+import lodash from 'lodash';
 
 function formatColor(color) {
   const rgb = color.rgb
@@ -9,20 +10,30 @@ function formatColor(color) {
 }
 
 /*** Number fields with support for min, max and units and documentation*/
-class ColorField extends React.Component {
+export default class InputColor extends React.Component {
   static propTypes = {
     onChange: PropTypes.func.isRequired,
-    name: PropTypes.string.isRequired,
+    name: PropTypes.string,
     value: PropTypes.string,
     doc: PropTypes.string,
     style: PropTypes.object,
     default: PropTypes.string,
+    'aria-label': PropTypes.string,
   }
 
   state = {
     pickerOpened: false
   }
 
+  constructor () {
+    super();
+    this.onChangeNoCheck = lodash.throttle(this.onChangeNoCheck, 1000/30);
+  }
+
+  onChangeNoCheck (v) {
+    this.props.onChange(v);
+  }
+
   //TODO: I much rather would do this with absolute positioning
   //but I am too stupid to get it to work together with fixed position
   //and scrollbars so I have to fallback to JavaScript
@@ -82,7 +93,7 @@ class ColorField extends React.Component {
       }}>
       <ChromePicker
         color={currentColor}
-        onChange={c => this.props.onChange(formatColor(c))}
+        onChange={c => this.onChangeNoCheck(formatColor(c))}
       />
       <div
         className="maputnik-color-picker-offset"
@@ -106,7 +117,9 @@ class ColorField extends React.Component {
       {this.state.pickerOpened && picker}
       <div className="maputnik-color-swatch" style={swatchStyle}></div>
       <input
+        aria-label={this.props['aria-label']}
         spellCheck="false"
+        autoComplete="off"
         className="maputnik-color"
         ref={(input) => this.colorInput = input}
         onClick={this.togglePicker}
@@ -120,4 +133,3 @@ class ColorField extends React.Component {
   }
 }
 
-export default ColorField

src/components/InputDynamicArray.jsx

@@ -0,0 +1,141 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import InputString from './InputString'
+import InputNumber from './InputNumber'
+import InputButton from './InputButton'
+import {MdDelete} from 'react-icons/md'
+import FieldDocLabel from './FieldDocLabel'
+import InputEnum from './InputEnum'
+import capitalize from 'lodash.capitalize'
+import InputUrl from './InputUrl'
+
+
+export default class FieldDynamicArray extends React.Component {
+  static propTypes = {
+    value: PropTypes.array,
+    type: PropTypes.string,
+    default: PropTypes.array,
+    onChange: PropTypes.func,
+    style: PropTypes.object,
+    fieldSpec: PropTypes.object,
+    'aria-label': PropTypes.string,
+  }
+
+  changeValue(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 if (this.props.type === 'url') {
+      values.push("");
+    }
+    else if (this.props.type === 'enum') {
+      const {fieldSpec} = this.props;
+      const defaultValue = Object.keys(fieldSpec.values)[0];
+      values.push(defaultValue);
+    } else {
+      values.push("")
+    }
+
+    this.props.onChange(values)
+  }
+
+  deleteValue(valueIdx) {
+    const values = this.values.slice(0)
+    values.splice(valueIdx, 1)
+
+    this.props.onChange(values.length > 0 ? values : undefined);
+  }
+
+  render() {
+    const inputs = this.values.map((v, i) => {
+      const deleteValueBtn= <DeleteValueInputButton onClick={this.deleteValue.bind(this, i)} />
+      let input;
+      if(this.props.type === 'url') {
+        input = <InputUrl
+          value={v}
+          onChange={this.changeValue.bind(this, i)}
+          aria-label={this.props['aria-label'] || this.props.label}
+        />
+      }
+      else if (this.props.type === 'number') {
+        input = <InputNumber
+          value={v}
+          onChange={this.changeValue.bind(this, i)}
+          aria-label={this.props['aria-label'] || this.props.label}
+        />
+      }
+      else if (this.props.type === 'enum') {
+        const options = Object.keys(this.props.fieldSpec.values).map(v => [v, capitalize(v)]);
+        input = <InputEnum
+          options={options}
+          value={v}
+          onChange={this.changeValue.bind(this, i)}
+          aria-label={this.props['aria-label'] || this.props.label}
+        />
+      }
+      else {
+        input = <InputString
+          value={v}
+          onChange={this.changeValue.bind(this, i)}
+          aria-label={this.props['aria-label'] || this.props.label}
+        />
+      }
+
+      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}
+        <InputButton
+          className="maputnik-array-add-value"
+          onClick={this.addValue}
+        >
+          Add value
+        </InputButton>
+      </div>
+    );
+  }
+}
+
+class DeleteValueInputButton extends React.Component {
+  static propTypes = {
+    onClick: PropTypes.func,
+  }
+
+  render() {
+    return <InputButton
+      className="maputnik-delete-stop"
+      onClick={this.props.onClick}
+      title="Remove array item"
+    >
+      <FieldDocLabel
+        label={<MdDelete />}
+        doc={"Remove array item."}
+      />
+    </InputButton>
+  }
+}
+

src/components/InputEnum.jsx

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

src/components/InputFont.jsx

@@ -0,0 +1,61 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import InputAutocomplete from './InputAutocomplete'
+
+export default class FieldFont extends React.Component {
+  static propTypes = {
+    value: PropTypes.array,
+    default: PropTypes.array,
+    fonts: PropTypes.array,
+    style: PropTypes.object,
+    onChange: PropTypes.func.isRequired,
+    'aria-label': PropTypes.string,
+  }
+
+  static defaultProps = {
+    fonts: []
+  }
+
+  get values() {
+    const out = this.props.value || this.props.default || [];
+
+    // Always put a "" in the last field to you can keep adding entries
+    if (out[out.length-1] !== ""){
+      return out.concat("");
+    }
+    else {
+      return out;
+    }
+  }
+
+  changeFont(idx, newValue) {
+    const changedValues = this.values.slice(0)
+    changedValues[idx] = newValue
+    const filteredValues = changedValues
+      .filter(v => v !== undefined)
+      .filter(v => v !== "")
+
+    this.props.onChange(filteredValues);
+  }
+
+  render() {
+    const inputs = this.values.map((value, i) => {
+      return <li
+        key={i}
+      >
+        <InputAutocomplete
+          aria-label={this.props['aria-label'] || this.props.name}
+          value={value}
+          options={this.props.fonts.map(f => [f, f])}
+          onChange={this.changeFont.bind(this, i)}
+        />
+      </li>
+    })
+
+    return (
+      <ul className="maputnik-font">
+        {inputs}
+      </ul>
+    );
+  }
+}

src/components/InputJson.jsx

@@ -0,0 +1,174 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import classnames from 'classnames';
+
+import Block from './Block'
+import FieldString from './FieldString'
+import CodeMirror from 'codemirror';
+
+import 'codemirror/mode/javascript/javascript'
+import 'codemirror/addon/lint/lint'
+import 'codemirror/addon/edit/matchbrackets'
+import 'codemirror/lib/codemirror.css'
+import 'codemirror/addon/lint/lint.css'
+import jsonlint from 'jsonlint'
+import stringifyPretty from 'json-stringify-pretty-compact'
+import '../util/codemirror-mgl';
+
+
+export default class InputJson extends React.Component {
+  static propTypes = {
+    layer: PropTypes.any.isRequired,
+    maxHeight: PropTypes.number,
+    onChange: PropTypes.func,
+    lineNumbers: PropTypes.bool,
+    lineWrapping: PropTypes.bool,
+    getValue: PropTypes.func,
+    gutters: PropTypes.array,
+    className: PropTypes.string,
+    onFocus: PropTypes.func,
+    onBlur: PropTypes.func,
+    onJSONValid: PropTypes.func,
+    onJSONInvalid: PropTypes.func,
+    mode: PropTypes.object,
+    lint: PropTypes.oneOfType([
+      PropTypes.bool,
+      PropTypes.object,
+    ]),
+  }
+
+  static defaultProps = {
+    lineNumbers: true,
+    lineWrapping: false,
+    gutters: ["CodeMirror-lint-markers"],
+    getValue: (data) => {
+      return stringifyPretty(data, {indent: 2, maxLength: 40});
+    },
+    onFocus: () => {},
+    onBlur: () => {},
+    onJSONInvalid: () => {},
+    onJSONValid: () => {},
+  }
+
+  constructor(props) {
+    super(props);
+    this._keyEvent = "keyboard";
+    this.state = {
+      isEditing: false,
+      showMessage: false,
+      prevValue: this.props.getValue(this.props.layer),
+    };
+  }
+
+  componentDidMount () {
+    this._doc = CodeMirror(this._el, {
+      value: this.props.getValue(this.props.layer),
+      mode: this.props.mode || {
+        name: "mgl",
+      },
+      lineWrapping: this.props.lineWrapping,
+      tabSize: 2,
+      theme: 'maputnik',
+      viewportMargin: Infinity,
+      lineNumbers: this.props.lineNumbers,
+      lint: this.props.lint || {
+        context: "layer"
+      },
+      matchBrackets: true,
+      gutters: this.props.gutters,
+      scrollbarStyle: "null",
+    });
+
+    this._doc.on('change', this.onChange);
+    this._doc.on('focus', this.onFocus);
+    this._doc.on('blur', this.onBlur);
+  }
+
+  onPointerDown = (cm, e) => {
+    this._keyEvent = "pointer";
+  }
+
+  onFocus = (cm, e) => {
+    this.props.onFocus();
+    this.setState({
+      isEditing: true,
+      showMessage: (this._keyEvent === "keyboard"),
+    });
+  }
+
+  onBlur = () => {
+    this._keyEvent = "keyboard";
+    this.props.onBlur();
+    this.setState({
+      isEditing: false,
+      showMessage: false,
+    });
+  }
+
+  componentWillUnMount () {
+    this._doc.off('change', this.onChange);
+    this._doc.off('focus', this.onFocus);
+    this._doc.off('blur', this.onBlur);
+  }
+
+  componentDidUpdate(prevProps) {
+    if (!this.state.isEditing && prevProps.layer !== this.props.layer) {
+      this._cancelNextChange = true;
+      this._doc.setValue(
+        this.props.getValue(this.props.layer),
+      )
+    }
+  }
+
+  onChange = (e) => {
+    if (this._cancelNextChange) {
+      this._cancelNextChange = false;
+      this.setState({
+        prevValue: this._doc.getValue(),
+      })
+      return;
+    }
+    const newCode = this._doc.getValue();
+
+    if (this.state.prevValue !== newCode) {
+      let parsedLayer, err;
+      try {
+        parsedLayer = JSON.parse(newCode);
+      } catch(_err) {
+        err = _err;
+        console.warn(_err)
+      }
+
+      if (err) {
+        this.props.onJSONInvalid();
+      }
+      else {
+        this.props.onChange(parsedLayer)
+        this.props.onJSONValid();
+      }
+    }
+
+    this.setState({
+      prevValue: newCode,
+    });
+  }
+
+  render() {
+    const {showMessage} = this.state;
+    const style = {};
+    if (this.props.maxHeight) {
+      style.maxHeight = this.props.maxHeight;
+    }
+
+    return <div className="JSONEditor" onPointerDown={this.onPointerDown} aria-hidden="true">
+      <div className={classnames("JSONEditor__message", {"JSONEditor__message--on": showMessage})}>
+        Press <kbd>ESC</kbd> to lose focus
+      </div>
+      <div
+        className={classnames("codemirror-container", this.props.className)}
+        ref={(el) => this._el = el}
+        style={style}
+      />
+    </div>
+  }
+}

src/components/InputMultiInput.jsx

@@ -0,0 +1,42 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import classnames from 'classnames'
+import InputButton from './InputButton'
+
+export default class InputMultiInput extends React.Component {
+  static propTypes = {
+    name: PropTypes.string.isRequired,
+    value: PropTypes.string.isRequired,
+    options: PropTypes.array.isRequired,
+    onChange: PropTypes.func.isRequired,
+  }
+
+  render() {
+    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 radios = options.map(([val, label])=> {
+      return <label
+        key={val}
+        className={classnames("maputnik-radio-as-button", {"maputnik-button-selected": val === selectedValue})}
+      >
+        <input type="radio"
+          name={this.props.name}
+          onChange={e => this.props.onChange(val)}
+          value={val}
+          checked={val === selectedValue}
+        />
+        {label}
+      </label>
+    })
+
+    return <fieldset className="maputnik-multibutton" aria-label={this.props['aria-label']}>
+      {radios}
+    </fieldset>
+  }
+}
+
+

src/components/InputNumber.jsx

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

src/components/InputSelect.jsx

@@ -1,13 +1,15 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-class SelectInput extends React.Component {
+export default class InputSelect extends React.Component {
   static propTypes = {
     value: PropTypes.string.isRequired,
     "data-wd-key": PropTypes.string,
     options: PropTypes.array.isRequired,
     style: PropTypes.object,
     onChange: PropTypes.func.isRequired,
+    title: PropTypes.string,
+    'aria-label': PropTypes.string,
   }
 
 
@@ -21,12 +23,14 @@ class SelectInput extends React.Component {
       className="maputnik-select"
       data-wd-key={this.props["data-wd-key"]}
       style={this.props.style}
+      title={this.props.title}
       value={this.props.value}
       onChange={e => this.props.onChange(e.target.value)}
+      aria-label={this.props['aria-label']}
     >
       { options.map(([val, label]) => <option key={val} value={val}>{label}</option>) }
     </select>
   }
 }
 
-export default SelectInput
+

src/components/InputSpec.jsx

@@ -1,16 +1,17 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import ColorField from './ColorField'
+import InputColor from './InputColor'
-import NumberInput from '../inputs/NumberInput'
+import InputNumber from './InputNumber'
-import CheckboxInput from '../inputs/CheckboxInput'
+import InputCheckbox from './InputCheckbox'
-import StringInput from '../inputs/StringInput'
+import InputString from './InputString'
-import SelectInput from '../inputs/SelectInput'
+import InputSelect from './InputSelect'
-import MultiButtonInput from '../inputs/MultiButtonInput'
+import InputMultiInput from './InputMultiInput'
-import ArrayInput from '../inputs/ArrayInput'
+import InputArray from './InputArray'
-import DynamicArrayInput from '../inputs/DynamicArrayInput'
+import InputDynamicArray from './InputDynamicArray'
-import FontInput from '../inputs/FontInput'
+import InputFont from './InputFont'
-import IconInput from '../inputs/IconInput'
+import InputAutocomplete from './InputAutocomplete'
+import InputEnum from './InputEnum'
 import capitalize from 'lodash.capitalize'
 
 const iconProperties = ['background-pattern', 'fill-pattern', 'line-pattern', 'fill-extrusion-pattern', 'icon-image']
@@ -47,21 +48,27 @@ export default class SpecField extends React.Component {
     ]),
     /** Override the style of the field */
     style: PropTypes.object,
+    'aria-label': PropTypes.string,
   }
 
   render() {
     const commonProps = {
+      error: this.props.error,
+      fieldSpec: this.props.fieldSpec,
+      label: this.props.label,
+      action: this.props.action,
       style: this.props.style,
       value: this.props.value,
       default: this.props.fieldSpec.default,
       name: this.props.fieldName,
-      onChange: newValue => this.props.onChange(this.props.fieldName, newValue)
+      onChange: newValue => this.props.onChange(this.props.fieldName, newValue),
+      'aria-label': this.props['aria-label'],
     }
 
     function childNodes() {
       switch(this.props.fieldSpec.type) {
         case 'number': return (
-          <NumberInput
+          <InputNumber
             {...commonProps}
             min={this.props.fieldSpec.minimum}
             max={this.props.fieldSpec.maximum}
@@ -70,55 +77,51 @@ export default class SpecField extends React.Component {
         case 'enum':
           const options = Object.keys(this.props.fieldSpec.values).map(v => [v, capitalize(v)])
 
-          if(options.length <= 3 && optionsLabelLength(options) <= 20) {
+          return <InputEnum
-            return <MultiButtonInput
+            {...commonProps}
-              {...commonProps}
+            options={options}
-              options={options}
+          />
-            />
+        case 'resolvedImage':
-          } else {
-            return <SelectInput
-              {...commonProps}
-              options={options}
-            />
-          }
         case 'formatted':
         case 'string':
-          if(iconProperties.indexOf(this.props.fieldName) >= 0) {
+          if (iconProperties.indexOf(this.props.fieldName) >= 0) {
-            return <IconInput
+            const options = this.props.fieldSpec.values || [];
+            return <InputAutocomplete
               {...commonProps}
-              icons={this.props.fieldSpec.values}
+              options={options.map(f => [f, f])}
             />
           } else {
-            return <StringInput
+            return <InputString
               {...commonProps}
             />
           }
         case 'color': return (
-          <ColorField
+          <InputColor
             {...commonProps}
           />
         )
         case 'boolean': return (
-          <CheckboxInput
+          <InputCheckbox
             {...commonProps}
           />
         )
         case 'array':
           if(this.props.fieldName === 'text-font') {
-            return <FontInput
+            return <InputFont
               {...commonProps}
               fonts={this.props.fieldSpec.values}
             />
           } else {
             if (this.props.fieldSpec.length) {
-              return <ArrayInput
+              return <InputArray
                 {...commonProps}
                 type={this.props.fieldSpec.value}
                 length={this.props.fieldSpec.length}
               />
             } else {
-              return <DynamicArrayInput
+              return <InputDynamicArray
                 {...commonProps}
+                fieldSpec={this.props.fieldSpec}
                 type={this.props.fieldSpec.value}
               />
             }
@@ -129,7 +132,7 @@ export default class SpecField extends React.Component {
 
     return (
       <div data-wd-key={"spec-field:"+this.props.fieldName}>
-      {childNodes.call(this)}
+        {childNodes.call(this)}
       </div>
     );
   }

src/components/InputString.jsx

@@ -1,14 +1,23 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-class StringInput extends React.Component {
+export default class InputString extends React.Component {
   static propTypes = {
     "data-wd-key": PropTypes.string,
     value: PropTypes.string,
     style: PropTypes.object,
     default: PropTypes.string,
     onChange: PropTypes.func,
+    onInput: PropTypes.func,
     multi: PropTypes.bool,
+    required: PropTypes.bool,
+    disabled: PropTypes.bool,
+    spellCheck: PropTypes.bool,
+    'aria-label': PropTypes.string,
+  }
+
+  static defaultProps = {
+    onInput: () => {},
   }
 
   constructor(props) {
@@ -25,6 +34,7 @@ class StringInput extends React.Component {
         value: props.value
       };
     }
+    return {};
   }
 
   render() {
@@ -45,27 +55,41 @@ class StringInput extends React.Component {
       ]
     }
 
+    if(!!this.props.disabled) {
+      classes.push("maputnik-string--disabled");
+    }
+
     return React.createElement(tag, {
+      "aria-label": this.props["aria-label"],
       "data-wd-key": this.props["data-wd-key"],
-      spellCheck: !(tag === "input"),
+      spellCheck: this.props.hasOwnProperty("spellCheck") ? this.props.spellCheck : !(tag === "input"),
+      disabled: this.props.disabled,
       className: classes.join(" "),
       style: this.props.style,
-      value: this.state.value,
+      value: this.state.value === undefined ? "" : this.state.value,
       placeholder: this.props.default,
       onChange: e => {
         this.setState({
           editing: true,
           value: e.target.value
-        })
+        }, () => {
+          this.props.onInput(this.state.value);
+        });
       },
       onBlur: () => {
         if(this.state.value!==this.props.value) {
           this.setState({editing: false});
           this.props.onChange(this.state.value);
         }
-      }
+      },
+      onKeyDown: (e) => {
+        if (e.keyCode === 13) {
+          this.props.onChange(this.state.value);
+        }
+      },
+      required: this.props.required,
     });
   }
 }
 
-export default StringInput
+

src/components/InputUrl.jsx

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

src/components/LayerEditor.jsx

@@ -2,24 +2,30 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { Wrapper, Button, Menu, MenuItem } from 'react-aria-menubutton'
 
-import JSONEditor from './JSONEditor'
+import FieldJson from './FieldJson'
-import FilterEditor from '../filter/FilterEditor'
+import FilterEditor from './FilterEditor'
-import PropertyGroup from '../fields/PropertyGroup'
+import PropertyGroup from './PropertyGroup'
 import LayerEditorGroup from './LayerEditorGroup'
-import LayerTypeBlock from './LayerTypeBlock'
+import FieldType from './FieldType'
-import LayerIdBlock from './LayerIdBlock'
+import FieldId from './FieldId'
-import MinZoomBlock from './MinZoomBlock'
+import FieldMinZoom from './FieldMinZoom'
-import MaxZoomBlock from './MaxZoomBlock'
+import FieldMaxZoom from './FieldMaxZoom'
-import CommentBlock from './CommentBlock'
+import FieldComment from './FieldComment'
-import LayerSourceBlock from './LayerSourceBlock'
+import FieldSource from './FieldSource'
-import LayerSourceLayerBlock from './LayerSourceLayerBlock'
+import FieldSourceLayer from './FieldSourceLayer'
+import {Accordion} from 'react-accessible-accordion';
 
 import {MdMoreVert} from 'react-icons/md'
 
-import { changeType, changeProperty } from '../../libs/layer'
+import { changeType, changeProperty } from '../libs/layer'
-import layout from '../../config/layout.json'
+import layout from '../config/layout.json'
+import {formatLayerId} from '../util/format';
 
 
+function getLayoutForType (type) {
+  return layout[type] ? layout[type] : layout.invalid;
+}
+
 function layoutGroups(layerType) {
   const layerGroup = {
     title: 'Layer',
@@ -33,7 +39,9 @@ function layoutGroups(layerType) {
     title: 'JSON Editor',
     type: 'jsoneditor'
   }
-  return [layerGroup, filterGroup].concat(layout[layerType].groups).concat([editorGroup])
+  return [layerGroup, filterGroup]
+    .concat(getLayoutForType(layerType).groups)
+    .concat([editorGroup])
 }
 
 /** Layer editor supporting multiple types of layers. */
@@ -52,6 +60,7 @@ export default class LayerEditor extends React.Component {
     isFirstLayer: PropTypes.bool,
     isLastLayer: PropTypes.bool,
     layerIndex: PropTypes.number,
+    errors: PropTypes.array,
   }
 
   static defaultProps = {
@@ -79,7 +88,7 @@ export default class LayerEditor extends React.Component {
   static getDerivedStateFromProps(props, state) {
     const additionalGroups = { ...state.editorGroups }
 
-    layout[props.layer.type].groups.forEach(group => {
+    getLayoutForType(props.layer.type).groups.forEach(group => {
       if(!(group.title in additionalGroups)) {
         additionalGroups[group.title] = true
       }
@@ -100,7 +109,10 @@ export default class LayerEditor extends React.Component {
   }
 
   changeProperty(group, property, newValue) {
-    this.props.onLayerChanged(changeProperty(this.props.layer, group, property, newValue))
+    this.props.onLayerChanged(
+      this.props.layerIndex,
+      changeProperty(this.props.layer, group, property, newValue)
+    )
   }
 
   onGroupToggle(groupTitle, active) {
@@ -118,6 +130,20 @@ export default class LayerEditor extends React.Component {
     if(this.props.layer.metadata) {
       comment = this.props.layer.metadata['maputnik:comment']
     }
+    const {errors, layerIndex} = this.props;
+
+    const errorData = {};
+    errors.forEach(error => {
+      if (
+        error.parsed &&
+        error.parsed.type === "layer" &&
+        error.parsed.data.index == layerIndex
+      ) {
+        errorData[error.parsed.data.key] = {
+          message: error.parsed.data.message
+        };
+      }
+    })
 
     let sourceLayerIds;
     if(this.props.sources.hasOwnProperty(this.props.layer.source)) {
@@ -126,37 +152,48 @@ export default class LayerEditor extends React.Component {
 
     switch(type) {
       case 'layer': return <div>
-        <LayerIdBlock
+        <FieldId
           value={this.props.layer.id}
           wdKey="layer-editor.layer-id"
-          onChange={newId => this.props.onLayerIdChange(this.props.layer.id, newId)}
+          error={errorData.id}
+          onChange={newId => this.props.onLayerIdChange(this.props.layerIndex, this.props.layer.id, newId)}
         />
-        <LayerTypeBlock
+        <FieldType
+          disabled={true}
+          error={errorData.type}
           value={this.props.layer.type}
-          onChange={newType => this.props.onLayerChanged(changeType(this.props.layer, newType))}
+          onChange={newType => this.props.onLayerChanged(
+            this.props.layerIndex,
+            changeType(this.props.layer, newType)
+          )}
         />
-        {this.props.layer.type !== 'background' && <LayerSourceBlock
+        {this.props.layer.type !== 'background' && <FieldSource
+          error={errorData.source}
           sourceIds={Object.keys(this.props.sources)}
           value={this.props.layer.source}
           onChange={v => this.changeProperty(null, 'source', v)}
         />
         }
-        {['background', 'raster', 'hillshade', 'heatmap'].indexOf(this.state.type) < 0 &&
+        {['background', 'raster', 'hillshade', 'heatmap'].indexOf(this.props.layer.type) < 0 &&
-        <LayerSourceLayerBlock
+        <FieldSourceLayer
+          error={errorData['source-layer']}
           sourceLayerIds={sourceLayerIds}
           value={this.props.layer['source-layer']}
           onChange={v => this.changeProperty(null, 'source-layer', v)}
         />
         }
-        <MinZoomBlock
+        <FieldMinZoom
+          error={errorData.minzoom}
           value={this.props.layer.minzoom}
           onChange={v => this.changeProperty(null, 'minzoom', v)}
         />
-        <MaxZoomBlock
+        <FieldMaxZoom
+          error={errorData.maxzoom}
           value={this.props.layer.maxzoom}
           onChange={v => this.changeProperty(null, 'maxzoom', v)}
         />
-        <CommentBlock
+        <FieldComment
+          error={errorData.comment}
           value={comment}
           onChange={v => this.changeProperty('metadata', 'maputnik:comment', v == ""  ? undefined : v)}
         />
@@ -164,22 +201,31 @@ export default class LayerEditor extends React.Component {
       case 'filter': return <div>
         <div className="maputnik-filter-editor-wrapper">
           <FilterEditor
+            errors={errorData}
             filter={this.props.layer.filter}
             properties={this.props.vectorLayers[this.props.layer['source-layer']]}
             onChange={f => this.changeProperty(null, 'filter', f)}
           />
         </div>
       </div>
-      case 'properties': return <PropertyGroup
+      case 'properties':
-        layer={this.props.layer}
+        return <PropertyGroup
-        groupFields={fields}
+          errors={errorData}
-        spec={this.props.spec}
+          layer={this.props.layer}
-        onChange={this.changeProperty.bind(this)}
+          groupFields={fields}
-      />
+          spec={this.props.spec}
-      case 'jsoneditor': return <JSONEditor
+          onChange={this.changeProperty.bind(this)}
-        layer={this.props.layer}
+        />
-        onChange={this.props.onLayerChanged}
+      case 'jsoneditor':
-      />
+        return <FieldJson
+          layer={this.props.layer}
+          onChange={(layer) => {
+            this.props.onLayerChanged(
+              this.props.layerIndex,
+              layer
+            );
+          }}
+        />
     }
   }
 
@@ -191,12 +237,16 @@ export default class LayerEditor extends React.Component {
   }
 
   render() {
+    const groupIds = [];
     const layerType = this.props.layer.type
     const groups = layoutGroups(layerType).filter(group => {
       return !(layerType === 'background' && group.type === 'source')
     }).map(group => {
+      const groupId = group.title.replace(/ /g, "_");
+      groupIds.push(groupId);
       return <LayerEditorGroup
         data-wd-key={group.title}
+        id={groupId}
         key={group.title}
         title={group.title}
         isActive={this.state.editorGroups[group.title]}
@@ -211,15 +261,15 @@ export default class LayerEditor extends React.Component {
     const items = {
       delete: {
         text: "Delete",
-        handler: () => this.props.onLayerDestroy(this.props.layer.id)
+        handler: () => this.props.onLayerDestroy(this.props.layerIndex)
       },
       duplicate: {
         text: "Duplicate",
-        handler: () => this.props.onLayerCopy(this.props.layer.id)
+        handler: () => this.props.onLayerCopy(this.props.layerIndex)
       },
       hide: {
         text: (layout.visibility === "none") ? "Show" : "Hide",
-        handler: () => this.props.onLayerVisibilityToggle(this.props.layer.id)
+        handler: () => this.props.onLayerVisibilityToggle(this.props.layerIndex)
       },
       moveLayerUp: {
         text: "Move layer up",
@@ -240,12 +290,14 @@ export default class LayerEditor extends React.Component {
       items[id].handler();
     }
 
-    return <div className="maputnik-layer-editor"
+    return <section className="maputnik-layer-editor"
-      >
+      role="main"
+      aria-label="Layer editor"
+    >
       <header>
         <div className="layer-header">
           <h2 className="layer-header__title">
-            Layer: {this.props.layer.id}
+            Layer: {formatLayerId(this.props.layer.id)}
           </h2>
           <div className="layer-header__info">
             <Wrapper
@@ -253,7 +305,7 @@ export default class LayerEditor extends React.Component {
               onSelection={handleSelection}
               closeOnSelection={false}
             >
-              <Button className='more-menu__button'>
+              <Button id="skip-target-layer-editor" className='more-menu__button' title="Layer options">
                 <MdMoreVert className="more-menu__button__svg" />
               </Button>
               <Menu>
@@ -273,7 +325,13 @@ export default class LayerEditor extends React.Component {
         </div>
 
       </header>
-      {groups}
+      <Accordion
-    </div>
+        allowMultipleExpanded={true}
+        allowZeroExpanded={true}
+        preExpanded={groupIds}
+      >
+        {groups}
+      </Accordion>
+    </section>
   }
 }

src/components/LayerEditorGroup.jsx

@@ -0,0 +1,51 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import Icon from '@mdi/react'
+import {
+  mdiMenuDown,
+  mdiMenuUp
+} from '@mdi/js';
+import {
+    AccordionItem,
+    AccordionItemHeading,
+    AccordionItemButton,
+    AccordionItemPanel,
+} from 'react-accessible-accordion';
+
+
+export default class LayerEditorGroup extends React.Component {
+  static propTypes = {
+    "id": PropTypes.string,
+    "data-wd-key": PropTypes.string,
+    title: PropTypes.string.isRequired,
+    isActive: PropTypes.bool.isRequired,
+    children: PropTypes.element.isRequired,
+    onActiveToggle: PropTypes.func.isRequired
+  }
+
+  render() {
+    return <AccordionItem uuid={this.props.id}>
+      <AccordionItemHeading className="maputnik-layer-editor-group"
+        data-wd-key={"layer-editor-group:"+this.props["data-wd-key"]}
+        onClick={e => this.props.onActiveToggle(!this.props.isActive)}
+      >
+        <AccordionItemButton className="maputnik-layer-editor-group__button">
+          <span style={{flexGrow: 1}}>{this.props.title}</span>
+          <Icon
+            path={mdiMenuUp}
+            size={1}
+            className="maputnik-layer-editor-group__button__icon maputnik-layer-editor-group__button__icon--up"
+          />
+          <Icon
+            path={mdiMenuDown}
+            size={1}
+            className="maputnik-layer-editor-group__button__icon maputnik-layer-editor-group__button__icon--down"
+          />
+        </AccordionItemButton>
+      </AccordionItemHeading>
+      <AccordionItemPanel>
+        {this.props.children}
+      </AccordionItemPanel>
+    </AccordionItem>
+  }
+}

src/components/LayerList.jsx

@@ -1,10 +1,11 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
+import lodash from 'lodash';
 
 import LayerListGroup from './LayerListGroup'
 import LayerListItem from './LayerListItem'
-import AddModal from '../modals/AddModal'
+import ModalAdd from './ModalAdd'
 
 import {SortableContainer} from 'react-sortable-hoc';
 
@@ -34,6 +35,8 @@ function findClosestCommonPrefix(layers, idx) {
   return closestIdx
 }
 
+let UID = 0;
+
 // List of collapsible layer editors
 class LayerListContainer extends React.Component {
   static propTypes = {...layerListPropTypes}
@@ -41,16 +44,28 @@ class LayerListContainer extends React.Component {
     onLayerSelect: () => {},
   }
 
-  state = {
+  constructor(props) {
-    collapsedGroups: {},
+    super(props);
-    areAllGroupsExpanded: false,
+    this.selectedItemRef = React.createRef();
-    isOpen: {
+    this.scrollContainerRef = React.createRef();
-      add: false,
+    this.state = {
+      collapsedGroups: {},
+      areAllGroupsExpanded: false,
+      keys: {
+        add: UID++,
+      },
+      isOpen: {
+        add: false,
+      }
     }
   }
 
   toggleModal(modalName) {
     this.setState({
+      keys: {
+        ...this.state.keys,
+        [modalName]: UID++,
+      },
       isOpen: {
         ...this.state.isOpen,
         [modalName]: !this.state.isOpen[modalName]
@@ -85,9 +100,18 @@ class LayerListContainer extends React.Component {
 
   groupedLayers() {
     const groups = []
+    const layerIdCount = new Map();
+
     for (let i = 0; i < this.props.layers.length; i++) {
+      const origLayer = this.props.layers[i];
       const previousLayer = this.props.layers[i-1]
-      const layer = this.props.layers[i]
+      layerIdCount.set(origLayer.id,
+        layerIdCount.has(origLayer.id) ? layerIdCount.get(origLayer.id) + 1 : 0
+      );
+      const layer = {
+        ...origLayer,
+        key: `layers-list-${origLayer.id}-${layerIdCount.get(origLayer.id)}`,
+      }
       if(previousLayer && layerPrefix(previousLayer.id) == layerPrefix(layer.id)) {
         const lastGroup = groups[groups.length - 1]
         lastGroup.push(layer)
@@ -116,16 +140,83 @@ class LayerListContainer extends React.Component {
     return collapsed === undefined ? true : collapsed
   }
 
+  shouldComponentUpdate (nextProps, nextState) {
+    // Always update on state change
+    if (this.state !== nextState) {
+      return true;
+    }
+
+    // This component tree only requires id and visibility from the layers
+    // objects
+    function getRequiredProps (layer) {
+      const out = {
+        id: layer.id,
+      };
+
+      if (layer.layout) {
+        out.layout = {
+          visibility: layer.layout.visibility
+        };
+      }
+      return out;
+    }
+    const layersEqual = lodash.isEqual(
+      nextProps.layers.map(getRequiredProps),
+      this.props.layers.map(getRequiredProps),
+    );
+
+    function withoutLayers (props) {
+      const out = {
+        ...props
+      };
+      delete out['layers'];
+      return out;
+    }
+
+    // Compare the props without layers because we've already compared them
+    // efficiently above.
+    const propsEqual = lodash.isEqual(
+      withoutLayers(this.props),
+      withoutLayers(nextProps)
+    );
+
+    const propsChanged = !(layersEqual && propsEqual);
+    return propsChanged;
+  }
+
+  componentDidUpdate (prevProps) {
+    if (prevProps.selectedLayerIndex !== this.props.selectedLayerIndex) {
+      const selectedItemNode = this.selectedItemRef.current;
+      if (selectedItemNode && selectedItemNode.node) {
+        const target = selectedItemNode.node;
+        const options = {
+          root: this.scrollContainerRef.current,
+          threshold: 1.0
+        }
+        const observer = new IntersectionObserver(entries => {
+          observer.unobserve(target);
+          if (entries.length > 0 && entries[0].intersectionRatio < 1) {
+            target.scrollIntoView();
+          }
+        }, options);
+
+        observer.observe(target);
+      }
+    }
+  }
+
   render() {
 
     const listItems = []
     let idx = 0
-    this.groupedLayers().forEach(layers => {
+    const layersByGroup = this.groupedLayers();
+    layersByGroup.forEach(layers => {
       const groupPrefix = layerPrefix(layers[0].id)
       if(layers.length > 1) {
         const grp = <LayerListGroup
           data-wd-key={[groupPrefix, idx].join('-')}
-          key={[groupPrefix, idx].join('-')}
+          aria-controls={layers.map(l => l.key).join(" ")}
+          key={`group-${groupPrefix}-${idx}`}
           title={groupPrefix}
           isActive={!this.isCollapsed(groupPrefix, idx) || idx === this.props.selectedLayerIndex}
           onActiveToggle={this.toggleLayerGroup.bind(this, groupPrefix, idx)}
@@ -136,14 +227,30 @@ class LayerListContainer extends React.Component {
       layers.forEach((layer, idxInGroup) => {
         const groupIdx = findClosestCommonPrefix(this.props.layers, idx)
 
+        const layerError = this.props.errors.find(error => {
+          return (
+            error.parsed &&
+            error.parsed.type === "layer" &&
+            error.parsed.data.index == idx
+          );
+        });
+
+        const additionalProps = {};
+        if (idx === this.props.selectedLayerIndex) {
+          additionalProps.ref = this.selectedItemRef;
+        }
+
         const listItem = <LayerListItem
           className={classnames({
             'maputnik-layer-list-item-collapsed': layers.length > 1 && this.isCollapsed(groupPrefix, groupIdx) && idx !== this.props.selectedLayerIndex,
-            'maputnik-layer-list-item-group-last': idxInGroup == layers.length - 1 && layers.length > 1
+            'maputnik-layer-list-item-group-last': idxInGroup == layers.length - 1 && layers.length > 1,
+            'maputnik-layer-list-item--error': !!layerError
           })}
           index={idx}
-          key={layer.id}
+          key={layer.key}
+          id={layer.key}
           layerId={layer.id}
+          layerIndex={idx}
           layerType={layer.type}
           visibility={(layer.layout || {}).visibility}
           isSelected={idx === this.props.selectedLayerIndex}
@@ -151,14 +258,21 @@ class LayerListContainer extends React.Component {
           onLayerDestroy={this.props.onLayerDestroy.bind(this)}
           onLayerCopy={this.props.onLayerCopy.bind(this)}
           onLayerVisibilityToggle={this.props.onLayerVisibilityToggle.bind(this)}
+          {...additionalProps}
         />
         listItems.push(listItem)
         idx += 1
       })
     })
 
-    return <div className="maputnik-layer-list">
+    return <section
-      <AddModal
+      className="maputnik-layer-list"
+      role="complementary"
+      aria-label="Layers list"
+      ref={this.scrollContainerRef}
+    >
+      <ModalAdd
+          key={this.state.keys.add}
           layers={this.props.layers}
           sources={this.props.sources}
           isOpen={this.state.isOpen.add}
@@ -171,7 +285,7 @@ class LayerListContainer extends React.Component {
         <div className="maputnik-default-property">
           <div className="maputnik-multibutton">
             <button
-              id="skip-menu"
+              id="skip-target-layer-list"
               onClick={this.toggleLayers}
               className="maputnik-button">
               {this.state.areAllGroupsExpanded === true ? "Collapse" : "Expand"}
@@ -189,10 +303,15 @@ class LayerListContainer extends React.Component {
           </div>
         </div>
       </header>
-      <ul className="maputnik-layer-list-container">
+      <div
-        {listItems}
+        role="navigation"
-      </ul>
+        aria-label="Layers list"
-    </div>
+      >
+        <ul className="maputnik-layer-list-container">
+          {listItems}
+        </ul>
+      </div>
+    </section>
   }
 }
 
@@ -207,6 +326,7 @@ export default class LayerList extends React.Component {
       helperClass='sortableHelper'
       onSortEnd={this.props.onMoveLayer.bind(this)}
       useDragHandle={true}
+      shouldCancelStart={() => false}
     />
   }
 }

src/components/LayerListGroup.jsx

@@ -7,7 +7,8 @@ export default class LayerListGroup extends React.Component {
     title: PropTypes.string.isRequired,
     "data-wd-key": PropTypes.string,
     isActive: PropTypes.bool.isRequired,
-    onActiveToggle: PropTypes.func.isRequired
+    onActiveToggle: PropTypes.func.isRequired,
+    'aria-controls': PropTypes.string,
   }
 
   render() {
@@ -16,7 +17,13 @@ export default class LayerListGroup extends React.Component {
         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>
+        <button
+          className="maputnik-layer-list-group-title"
+          aria-controls={this.props['aria-controls']}
+          aria-expanded={this.props.isActive}
+        >
+          {this.props.title}
+        </button>
         <span className="maputnik-space" />
         <Collapser
           style={{ height: 14, width: 14 }}

src/components/LayerListItem.jsx

@@ -4,17 +4,19 @@ import classnames from 'classnames'
 
 import {MdContentCopy, MdVisibility, MdVisibilityOff, MdDelete} from 'react-icons/md'
 
-import LayerIcon from '../icons/LayerIcon'
+import IconLayer from './IconLayer'
 import {SortableElement, SortableHandle} from 'react-sortable-hoc'
 
 
 const DraggableLabel = SortableHandle((props) => {
   return <div className="maputnik-layer-list-item-handle">
-    <LayerIcon
+    <IconLayer
       className="layer-handle__icon"
       type={props.layerType}
     />
-    <span className="maputnik-layer-list-item-id">{props.layerId}</span>
+    <button className="maputnik-layer-list-item-id">
+      {props.layerId}
+    </button>
   </div>
 });
 
@@ -54,6 +56,7 @@ class IconAction extends React.Component {
       className={`maputnik-layer-list-icon-action ${classAdditions}`}
       data-wd-key={this.props.wdKey}
       onClick={this.props.onClick}
+      aria-hidden="true"
     >
       {this.renderIcon()}
     </button>
@@ -62,6 +65,7 @@ class IconAction extends React.Component {
 
 class LayerListItem extends React.Component {
   static propTypes = {
+    layerIndex: PropTypes.number.isRequired,
     layerId: PropTypes.string.isRequired,
     layerType: PropTypes.string.isRequired,
     isSelected: PropTypes.bool,
@@ -96,8 +100,9 @@ class LayerListItem extends React.Component {
     const visibilityAction = this.props.visibility === 'visible' ? 'show' : 'hide';
 
     return <li
+      id={this.props.id}
       key={this.props.layerId}
-      onClick={e => this.props.onLayerSelect(this.props.layerId)}
+      onClick={e => this.props.onLayerSelect(this.props.layerIndex)}
       data-wd-key={"layer-list-item:"+this.props.layerId}
       className={classnames({
         "maputnik-layer-list-item": true,
@@ -110,20 +115,20 @@ class LayerListItem extends React.Component {
           wdKey={"layer-list-item:"+this.props.layerId+":delete"}
           action={'delete'}
           classBlockName="delete"
-          onClick={e => this.props.onLayerDestroy(this.props.layerId)}
+          onClick={e => this.props.onLayerDestroy(this.props.layerIndex)}
         />
         <IconAction
           wdKey={"layer-list-item:"+this.props.layerId+":copy"}
           action={'duplicate'}
           classBlockName="duplicate"
-          onClick={e => this.props.onLayerCopy(this.props.layerId)}
+          onClick={e => this.props.onLayerCopy(this.props.layerIndex)}
         />
         <IconAction
           wdKey={"layer-list-item:"+this.props.layerId+":toggle-visibility"}
           action={visibilityAction}
           classBlockName="visibility"
           classBlockModifier={visibilityAction}
-          onClick={e => this.props.onLayerVisibilityToggle(this.props.layerId)}
+          onClick={e => this.props.onLayerVisibilityToggle(this.props.layerIndex)}
         />
     </li>
   }

src/components/MapMapboxGl.jsx

@@ -1,26 +1,25 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import ReactDOM from 'react-dom'
-import MapboxGl from 'mapbox-gl'
+import MapLibreGl from 'maplibre-gl'
 import MapboxInspect from 'mapbox-gl-inspect'
-import FeatureLayerPopup from './FeatureLayerPopup'
+import MapMapboxGlLayerPopup from './MapMapboxGlLayerPopup'
-import FeaturePropertyPopup from './FeaturePropertyPopup'
+import MapMapboxGlFeaturePropertyPopup from './MapMapboxGlFeaturePropertyPopup'
-import tokens from '../../config/tokens.json'
+import tokens from '../config/tokens.json'
 import colors from 'mapbox-gl-inspect/lib/colors'
 import Color from 'color'
-import ZoomControl from '../../libs/zoomcontrol'
+import ZoomControl from '../libs/zoomcontrol'
-import { colorHighlightedLayer } from '../../libs/highlight'
+import { colorHighlightedLayer } from '../libs/highlight'
-import 'mapbox-gl/dist/mapbox-gl.css'
+import 'maplibre-gl/dist/maplibre-gl.css'
-import '../../mapboxgl.css'
+import '../mapboxgl.css'
-import '../../libs/mapbox-rtl'
+import '../libs/mapbox-rtl'
 
 
-const IS_SUPPORTED = MapboxGl.supported();
+const IS_SUPPORTED = MapLibreGl.supported();
 
 function renderPopup(popup, mountNode) {
   ReactDOM.render(popup, mountNode);
-  var content = mountNode.innerHTML;
+  return mountNode;
-  return content;
 }
 
 function buildInspectStyle(originalMapStyle, coloredLayers, highlightedLayer) {
@@ -53,7 +52,7 @@ function buildInspectStyle(originalMapStyle, coloredLayers, highlightedLayer) {
   return inspectStyle
 }
 
-export default class MapboxGlMap extends React.Component {
+export default class MapMapboxGl extends React.Component {
   static propTypes = {
     onDataChange: PropTypes.func,
     onLayerSelect: PropTypes.func.isRequired,
@@ -61,19 +60,21 @@ export default class MapboxGlMap extends React.Component {
     inspectModeEnabled: PropTypes.bool.isRequired,
     highlightedLayer: PropTypes.object,
     options: PropTypes.object,
+    replaceAccessTokens: PropTypes.func.isRequired,
+    onChange: PropTypes.func.isRequired,
   }
 
   static defaultProps = {
     onMapLoaded: () => {},
     onDataChange: () => {},
     onLayerSelect: () => {},
+    onChange: () => {},
     mapboxAccessToken: tokens.mapbox,
     options: {},
   }
 
   constructor(props) {
     super(props)
-    MapboxGl.accessToken = tokens.mapbox
     this.state = {
       map: null,
       inspect: null,
@@ -84,14 +85,13 @@ export default class MapboxGlMap extends React.Component {
     if(!IS_SUPPORTED) return;
 
     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
-      //Mapbox GL now does diffing natively so we don't need to calculate
+    //the necessary operations ourselves!
-      //the necessary operations ourselves!
+    this.state.map.setStyle(
-      this.state.map.setStyle(props.mapStyle, { diff: true})
+      this.props.replaceAccessTokens(props.mapStyle),
-    }
+      {diff: true}
+    )
   }
 
   shouldComponentUpdate(nextProps, nextState) {
@@ -104,21 +104,31 @@ export default class MapboxGlMap extends React.Component {
     return should;
   }
 
-  componentDidUpdate(prevProps) {
+  componentDidUpdate(prevProps, prevState, snapshot) {
     if(!IS_SUPPORTED) return;
 
     const map = this.state.map;
 
     this.updateMapFromProps(this.props);
 
-    if(this.props.inspectModeEnabled !== prevProps.inspectModeEnabled) {
+    if(this.state.inspect && this.props.inspectModeEnabled !== this.state.inspect._showInspectMap) {
+      // HACK: Fix for <https://github.com/maputnik/editor/issues/576>, while we wait for a proper fix.
+      // eslint-disable-next-line
+      this.state.inspect._popupBlocked = false;
       this.state.inspect.toggleInspector()
     }
-    if(this.props.inspectModeEnabled) {
-      this.state.inspect.render()
-    }
-
     if (map) {
+      if (this.props.inspectModeEnabled) {
+        // HACK: We need to work out why we need to do this and what's causing
+        // this error. I'm assuming an issue with mapbox-gl update and
+        // mapbox-gl-inspect.
+        try {
+          this.state.inspect.render();
+        } catch(err) {
+          console.error("FIXME: Caught error", err);
+        }
+      }
+
       map.showTileBoundaries = this.props.options.showTileBoundaries;
       map.showCollisionBoxes = this.props.options.showCollisionBoxes;
       map.showOverdrawInspector = this.props.options.showOverdrawInspector;
@@ -133,24 +143,32 @@ export default class MapboxGlMap extends React.Component {
       container: this.container,
       style: this.props.mapStyle,
       hash: true,
+      maxZoom: 24
     }
 
-    const map = new MapboxGl.Map(mapOpts);
+    const map = new MapLibreGl.Map(mapOpts);
+
+    const mapViewChange = () => {
+      const center = map.getCenter();
+      const zoom = map.getZoom();
+      this.props.onChange({center, zoom});
+    }
+    mapViewChange();
 
     map.showTileBoundaries = mapOpts.showTileBoundaries;
     map.showCollisionBoxes = mapOpts.showCollisionBoxes;
     map.showOverdrawInspector = mapOpts.showOverdrawInspector;
 
-    const zoom = new ZoomControl;
+    const zoomControl = new ZoomControl;
-    map.addControl(zoom, 'top-right');
+    map.addControl(zoomControl, 'top-right');
 
-    const nav = new MapboxGl.NavigationControl({visualizePitch:true});
+    const nav = new MapLibreGl.NavigationControl({visualizePitch:true});
     map.addControl(nav, 'top-right');
 
     const tmpNode = document.createElement('div');
 
     const inspect = new MapboxInspect({
-      popup: new MapboxGl.Popup({
+      popup: new MapLibreGl.Popup({
         closeOnClick: false
       }),
       showMapPopup: true,
@@ -164,9 +182,9 @@ export default class MapboxGlMap extends React.Component {
       buildInspectStyle: (originalMapStyle, coloredLayers) => buildInspectStyle(originalMapStyle, coloredLayers, this.props.highlightedLayer),
       renderPopup: features => {
         if(this.props.inspectModeEnabled) {
-          return renderPopup(<FeaturePropertyPopup features={features} />, tmpNode);
+          return renderPopup(<MapMapboxGlFeaturePropertyPopup features={features} />, tmpNode);
         } else {
-          return renderPopup(<FeatureLayerPopup features={features} onLayerSelect={this.props.onLayerSelect} zoom={this.state.zoom} />, tmpNode);
+          return renderPopup(<MapMapboxGlLayerPopup features={features} onLayerSelect={this.onLayerSelectById} zoom={this.state.zoom} />, tmpNode);
         }
       }
     })
@@ -178,9 +196,6 @@ export default class MapboxGlMap extends React.Component {
         inspect,
         zoom: map.getZoom()
       });
-      if(this.props.inspectModeEnabled) {
-        inspect.toggleInspector();
-      }
     })
 
     map.on("data", e => {
@@ -190,17 +205,31 @@ export default class MapboxGlMap extends React.Component {
       })
     })
 
+    map.on("error", e => {
+      console.log("ERROR", e);
+    })
+
     map.on("zoom", e => {
       this.setState({
         zoom: map.getZoom()
       });
-    })
+    });
+
+    map.on("dragend", mapViewChange);
+    map.on("zoomend", mapViewChange);
+  }
+
+  onLayerSelectById = (id) => {
+    const index = this.props.mapStyle.layers.findIndex(layer => layer.id === id);
+    this.props.onLayerSelect(index);
   }
 
   render() {
     if(IS_SUPPORTED) {
       return <div
         className="maputnik-map__map"
+        role="region"
+        aria-label="Map view"
         ref={x => this.container = x}
       ></div>
     }
@@ -215,3 +244,4 @@ export default class MapboxGlMap extends React.Component {
     }
   }
 }
+

src/components/MapMapboxGlFeaturePropertyPopup.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import InputBlock from '../inputs/InputBlock'
+import Block from './Block'
-import StringInput from '../inputs/StringInput'
+import FieldString from './FieldString'
 
 function displayValue(value) {
   if (typeof value === 'undefined' || value === null) return value;
@@ -15,18 +15,25 @@ function displayValue(value) {
 function renderProperties(feature) {
   return Object.keys(feature.properties).map(propertyName => {
     const property = feature.properties[propertyName]
-    return <InputBlock key={propertyName} label={propertyName}>
+    return <Block key={propertyName} label={propertyName}>
-      <StringInput value={displayValue(property)} style={{backgroundColor: 'transparent'}}/>
+      <FieldString value={displayValue(property)} style={{backgroundColor: 'transparent'}}/>
-    </InputBlock>
+    </Block>
   })
 }
 
-function renderFeature(feature) {
+function renderFeatureId(feature) {
-  return <div key={`${feature.sourceLayer}-${feature.id}`}>
+  return <Block key={"feature-id"} label={"feature_id"}>
-    <div className="maputnik-popup-layer-id">{feature.layer['source-layer']}{feature.inspectModeCounter && <span> × {feature.inspectModeCounter}</span>}</div>
+    <FieldString value={displayValue(feature.id)} style={{backgroundColor: 'transparent'}} />
-    <InputBlock key={"property-type"} label={"$type"}>
+  </Block>
-      <StringInput value={feature.geometry.type} style={{backgroundColor: 'transparent'}} />
+  }
-    </InputBlock>
+
+function renderFeature(feature, idx) {
+  return <div key={`${feature.sourceLayer}-${idx}`}>
+    <div className="maputnik-popup-layer-id">{feature.layer['source']}: {feature.layer['source-layer']}{feature.inspectModeCounter && <span> × {feature.inspectModeCounter}</span>}</div>
+    <Block key={"property-type"} label={"$type"}>
+      <FieldString value={feature.geometry.type} style={{backgroundColor: 'transparent'}} />
+    </Block>
+    {renderFeatureId(feature)}
     {renderProperties(feature)}
   </div>
 }
@@ -36,7 +43,7 @@ function removeDuplicatedFeatures(features) {
 
   features.forEach(feature => {
     const featureIndex = uniqueFeatures.findIndex(feature2 => {
-      return feature.layer['source-layer'] === feature2.layer['source-layer'] 
+      return feature.layer['source-layer'] === feature2.layer['source-layer']
         && JSON.stringify(feature.properties) === JSON.stringify(feature2.properties)
     })
 

src/components/MapMapboxGlLayerPopup.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import LayerIcon from '../icons/LayerIcon'
+import IconLayer from './IconLayer'
-import {latest, expression, function as styleFunction} from '@mapbox/mapbox-gl-style-spec'
+import {latest} from '@maplibre/maplibre-gl-style-spec'
 
 function groupFeaturesBySourceLayer(features) {
   const sources = {}
@@ -11,7 +11,7 @@ function groupFeaturesBySourceLayer(features) {
   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]
@@ -58,23 +58,8 @@ class FeatureLayerPopup extends React.Component {
 
       if(propName) {
         const propertySpec = latest["paint_"+feature.layer.type][propName];
-
         let color = feature.layer.paint[propName];
-
+        return String(color);
-        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
@@ -84,7 +69,7 @@ class FeatureLayerPopup extends React.Component {
     // 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);
+      console.warn("Unable to get feature color, error:", err);
       return "black";
     }
   }
@@ -101,7 +86,7 @@ class FeatureLayerPopup extends React.Component {
             className="maputnik-popup-layer"
         >
           <div
-            className="maputnik-popup-layer__swatch" 
+            className="maputnik-popup-layer__swatch"
             style={{background: featureColor}}
           ></div>
           <label
@@ -110,8 +95,8 @@ class FeatureLayerPopup extends React.Component {
               this.props.onLayerSelect(feature.layer.id)
             }}
           >
-            {feature.layer.type && 
+            {feature.layer.type &&
-              <LayerIcon type={feature.layer.type} style={{
+              <IconLayer type={feature.layer.type} style={{
                 width: 14,
                 height: 14,
                 paddingRight: 3

src/components/MapOpenLayers.jsx

@@ -1,9 +1,9 @@
 import React from 'react'
 import {throttle} from 'lodash';
 import PropTypes from 'prop-types'
-import { loadJSON } from '../../libs/urlopen'
+import { loadJSON } from '../libs/urlopen'
 
-import FeatureLayerPopup from './FeatureLayerPopup';
+import MapMapboxGlLayerPopup from './MapMapboxGlLayerPopup';
 
 import 'ol/ol.css'
 import {apply} from 'ol-mapbox-style';
@@ -24,7 +24,7 @@ function renderCoords (coords) {
   }
 }
 
-export default class OpenLayersMap extends React.Component {
+export default class MapOpenLayers extends React.Component {
   static propTypes = {
     onDataChange: PropTypes.func,
     mapStyle: PropTypes.object.isRequired,
@@ -32,6 +32,8 @@ export default class OpenLayersMap extends React.Component {
     style: PropTypes.object,
     onLayerSelect: PropTypes.func.isRequired,
     debugToolbox: PropTypes.bool.isRequired,
+    replaceAccessTokens: PropTypes.func.isRequired,
+    onChange: PropTypes.func.isRequired,
   }
 
   static defaultProps = {
@@ -61,7 +63,9 @@ export default class OpenLayersMap extends React.Component {
 
   componentDidUpdate(prevProps) {
     if (this.props.mapStyle !== prevProps.mapStyle) {
-      this.updateStyle(this.props.mapStyle);
+      this.updateStyle(
+        this.props.replaceAccessTokens(this.props.mapStyle)
+      );
     }
   }
 
@@ -93,6 +97,22 @@ export default class OpenLayersMap extends React.Component {
       })
     })
 
+    const onMoveEnd = () => {
+      const zoom = map.getView().getZoom();
+      const center = toLonLat(map.getView().getCenter());
+
+      this.props.onChange({
+        zoom,
+        center: {
+          lng: center[0],
+          lat: center[1],
+        },
+      });
+    }
+
+    onMoveEnd();
+    map.on('moveend', onMoveEnd);
+
     map.on('postrender', (evt) => {
       const center = toLonLat(map.getView().getCenter());
       this.setState({
@@ -108,7 +128,9 @@ export default class OpenLayersMap extends React.Component {
 
 
     this.map = map;
-    this.updateStyle(this.props.mapStyle);
+    this.updateStyle(
+      this.props.replaceAccessTokens(this.props.mapStyle)
+    );
   }
 
   closeOverlay = (e) => {
@@ -130,13 +152,13 @@ export default class OpenLayersMap extends React.Component {
         >
           ×
         </button>
-        <FeatureLayerPopup
+        <MapMapboxGlLayerPopup
           features={this.state.selectedFeatures || []}
           onLayerSelect={this.props.onLayerSelect}
         />
       </div>
       <div className="maputnik-ol-zoom">
-        Zoom level: {this.state.zoom}
+        Zoom: {this.state.zoom}
       </div>
       {this.props.debugToolbox &&
         <div className="maputnik-ol-debug">
@@ -157,6 +179,8 @@ export default class OpenLayersMap extends React.Component {
       <div
         className="maputnik-ol"
         ref={x => this.container = x}
+        role="region"
+        aria-label="Map view"
         style={{
           ...this.props.style,
         }}>

src/components/MessagePanel.jsx

@@ -1,27 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-
-class MessagePanel extends React.Component {
-  static propTypes = {
-    errors: PropTypes.array,
-    infos: PropTypes.array,
-  }
-
-  render() {
-    const errors = this.props.errors.map((m, i) => {
-      return <p key={"error-"+i} className="maputnik-message-panel-error">{m}</p>
-    })
-
-    const infos = this.props.infos.map((m, i) => {
-      return <p key={"info-"+i}>{m}</p>
-    })
-
-    return <div className="maputnik-message-panel">
-      {errors}
-      {infos}
-    </div>
-  }
-}
-
-
-export default MessagePanel

src/components/Modal.jsx

@@ -2,9 +2,10 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import {MdClose} from 'react-icons/md'
 import AriaModal from 'react-aria-modal'
+import classnames from 'classnames';
 
 
-class Modal extends React.Component {
+export default class Modal extends React.Component {
   static propTypes = {
     "data-wd-key": PropTypes.string,
     isOpen: PropTypes.bool.isRequired,
@@ -13,6 +14,7 @@ class Modal extends React.Component {
     children: PropTypes.node,
     underlayClickExits: PropTypes.bool,
     underlayProps: PropTypes.object,
+    className: PropTypes.string,
   }
 
   static defaultProps = {
@@ -30,28 +32,24 @@ class Modal extends React.Component {
     });
   }
 
-  getApplicationNode() {
-    return document.getElementById('app');
-  }
-
   render() {
     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"
+        <div className={classnames("maputnik-modal", this.props.className)}
           data-wd-key={this.props["data-wd-key"]}
         >
           <header className="maputnik-modal-header">
             <h1 className="maputnik-modal-header-title">{this.props.title}</h1>
             <span className="maputnik-modal-header-space"></span>
             <button className="maputnik-modal-header-toggle"
+              title="Close modal"
               onClick={this.onClose}
               data-wd-key={this.props["data-wd-key"]+".close-modal"}
             >
@@ -70,4 +68,3 @@ class Modal extends React.Component {
   }
 }
 
-export default Modal

src/components/ModalAdd.jsx

@@ -1,15 +1,16 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import Button from '../Button'
+import {latest} from '@maplibre/maplibre-gl-style-spec'
+import InputButton from './InputButton'
 import Modal from './Modal'
 
-import LayerTypeBlock from '../layers/LayerTypeBlock'
+import FieldType from './FieldType'
-import LayerIdBlock from '../layers/LayerIdBlock'
+import FieldId from './FieldId'
-import LayerSourceBlock from '../layers/LayerSourceBlock'
+import FieldSource from './FieldSource'
-import LayerSourceLayerBlock from '../layers/LayerSourceLayerBlock'
+import FieldSourceLayer from './FieldSourceLayer'
 
-class AddModal extends React.Component {
+export default class ModalAdd extends React.Component {
   static propTypes = {
     layers: PropTypes.array.isRequired,
     onLayersChange: PropTypes.func.isRequired,
@@ -126,22 +127,25 @@ class AddModal extends React.Component {
       onOpenToggle={this.props.onOpenToggle}
       title={'Add Layer'}
       data-wd-key="modal:add-layer"
+      className="maputnik-add-modal"
     >
       <div className="maputnik-add-layer">
-      <LayerIdBlock
+      <FieldId
+        label="ID"
+        fieldSpec={latest.layer.id}
         value={this.state.id}
         wdKey="add-layer.layer-id"
         onChange={v => {
           this.setState({ id: v })
         }}
       />
-      <LayerTypeBlock
+      <FieldType
         value={this.state.type}
         wdKey="add-layer.layer-type"
         onChange={v => this.setState({ type: v })}
       />
       {this.state.type !== 'background' &&
-      <LayerSourceBlock
+      <FieldSource
         sourceIds={sources}
         wdKey="add-layer.layer-source-block"
         value={this.state.source}
@@ -149,23 +153,22 @@ class AddModal extends React.Component {
       />
       }
       {['background', 'raster', 'hillshade', 'heatmap'].indexOf(this.state.type) < 0 &&
-      <LayerSourceLayerBlock
+      <FieldSourceLayer
         isFixed={true}
         sourceLayerIds={layers}
         value={this.state['source-layer']}
         onChange={v => this.setState({ 'source-layer': v })}
       />
       }
-      <Button
+      <InputButton
         className="maputnik-add-layer-button"
         onClick={this.addLayer}
         data-wd-key="add-layer"
       >
         Add Layer
-      </Button>
+      </InputButton>
       </div>
     </Modal>
   }
 }
 
-export default AddModal

src/components/ModalDebug.jsx

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types'
 import Modal from './Modal'
 
 
-class DebugModal extends React.Component {
+export default class ModalDebug extends React.Component {
   static propTypes = {
     isOpen: PropTypes.bool.isRequired,
     renderer: PropTypes.string.isRequired,
@@ -13,16 +13,24 @@ class DebugModal extends React.Component {
     onOpenToggle: PropTypes.func.isRequired,
     mapboxGlDebugOptions: PropTypes.object,
     openlayersDebugOptions: PropTypes.object,
+    mapView: PropTypes.object,
   }
 
   render() {
+    const {mapView} = this.props;
+
+    const osmZoom = Math.round(mapView.zoom)+1;
+    const osmLon = Number.parseFloat(mapView.center.lng).toFixed(5);
+    const osmLat = Number.parseFloat(mapView.center.lat).toFixed(5);
+
     return <Modal
-      data-wd-key="debug-modal"
+      data-wd-key="modal:debug"
       isOpen={this.props.isOpen}
       onOpenToggle={this.props.onOpenToggle}
       title={'Debug'}
     >
-      <div className="maputnik-modal-section maputnik-modal-shortcuts">
+      <section className="maputnik-modal-section maputnik-modal-shortcuts">
+        <h1>Options</h1>
         {this.props.renderer === 'mbgljs' &&
           <ul>
             {Object.entries(this.props.mapboxGlDebugOptions).map(([key, val]) => {
@@ -45,9 +53,20 @@ class DebugModal extends React.Component {
             })}
           </ul>
         }
-      </div>
+      </section>
+      <section className="maputnik-modal-section">
+        <h1>Links</h1>
+        <p>
+          <a
+            target="_blank"
+            rel="noopener noreferrer"
+            href={`https://www.openstreetmap.org/#map=${osmZoom}/${osmLat}/${osmLon}`}
+          >
+            Open in OSM
+          </a> &mdash; Opens the current view on openstreetmap.org
+        </p>
+      </section>
     </Modal>
   }
 }
 
-export default DebugModal;

src/components/ModalExport.jsx

@@ -0,0 +1,162 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import Slugify from 'slugify'
+import { saveAs } from 'file-saver'
+import pkgLockJson from '../../package-lock.json'
+
+import {format} from '@maplibre/maplibre-gl-style-spec'
+import FieldString from './FieldString'
+import FieldCheckbox from './FieldCheckbox'
+import InputButton from './InputButton'
+import Modal from './Modal'
+import {MdFileDownload} from 'react-icons/md'
+import style from '../libs/style'
+import fieldSpecAdditional from '../libs/field-spec-additional'
+
+
+const MAPBOX_GL_VERSION = pkgLockJson.dependencies["mapbox-gl"].version;
+
+
+export default class ModalExport 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);
+  }
+
+  tokenizedStyle () {
+    return format(
+      style.stripAccessTokens(
+        style.replaceAccessTokens(this.props.mapStyle)
+      )
+    );
+  }
+
+  exportName () {
+    if(this.props.mapStyle.name) {
+      return Slugify(this.props.mapStyle.name, {
+        replacement: '_',
+        remove: /[*\-+~.()'"!:]/g,
+        lower: true
+      });
+    } else {
+      return this.props.mapStyle.id
+    }
+  }
+
+  downloadHtml() {
+    const tokenStyle = this.tokenizedStyle();
+    const htmlTitle = this.props.mapStyle.name || "Map";
+    const html = `<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8" />
+  <title>${htmlTitle}</title>
+  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
+  <script src="https://api.mapbox.com/mapbox-gl-js/v${MAPBOX_GL_VERSION}/mapbox-gl.js"></script>
+  <link href="https://api.mapbox.com/mapbox-gl-js/v${MAPBOX_GL_VERSION}/mapbox-gl.css" rel="stylesheet" />
+  <style>
+    body { margin: 0; padding: 0; }
+    #map { position: absolute; top: 0; bottom: 0; width: 100%; }
+  </style>
+</head>
+<body>
+  <div id="map"></div>
+  <script>
+      mapboxgl.accessToken = 'access_token';
+      const map = new mapboxgl.Map({
+         container: 'map',
+         style: ${tokenStyle},
+      });
+      map.addControl(new mapboxgl.NavigationControl());
+  </script>
+</body>
+</html>
+`;
+
+    const blob = new Blob([html], {type: "text/html;charset=utf-8"});
+    const exportName = this.exportName();
+    saveAs(blob, exportName + ".html");
+  }
+
+  downloadStyle() {
+    const tokenStyle = this.tokenizedStyle();
+    const blob = new Blob([tokenStyle], {type: "application/json;charset=utf-8"});
+    const exportName = this.exportName();
+    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="modal:export"
+      isOpen={this.props.isOpen}
+      onOpenToggle={this.props.onOpenToggle}
+      title={'Export Style'}
+      className="maputnik-export-modal"
+    >
+
+      <section className="maputnik-modal-section">
+        <h1>Download Style</h1>
+        <p>
+          Download a JSON style to your computer.
+        </p>
+
+        <div>
+          <FieldString
+            label={fieldSpecAdditional.maputnik.mapbox_access_token.label}
+            fieldSpec={fieldSpecAdditional.maputnik.mapbox_access_token}
+            value={(this.props.mapStyle.metadata || {})['maputnik:mapbox_access_token']}
+            onChange={this.changeMetadataProperty.bind(this, "maputnik:mapbox_access_token")}
+          />
+          <FieldString
+            label={fieldSpecAdditional.maputnik.maptiler_access_token.label}
+            fieldSpec={fieldSpecAdditional.maputnik.maptiler_access_token}
+            value={(this.props.mapStyle.metadata || {})['maputnik:openmaptiles_access_token']}
+            onChange={this.changeMetadataProperty.bind(this, "maputnik:openmaptiles_access_token")}
+          />
+          <FieldString
+            label={fieldSpecAdditional.maputnik.thunderforest_access_token.label}
+            fieldSpec={fieldSpecAdditional.maputnik.thunderforest_access_token}
+            value={(this.props.mapStyle.metadata || {})['maputnik:thunderforest_access_token']}
+            onChange={this.changeMetadataProperty.bind(this, "maputnik:thunderforest_access_token")}
+          />
+        </div>
+
+        <div className="maputnik-modal-export-buttons">
+          <InputButton
+            onClick={this.downloadStyle.bind(this)}
+          >
+            <MdFileDownload />
+            Download Style
+          </InputButton>
+
+          <InputButton
+            onClick={this.downloadHtml.bind(this)}
+          >
+            <MdFileDownload />
+            Download HTML
+          </InputButton>
+        </div>
+      </section>
+
+    </Modal>
+  }
+}
+

src/components/ModalLoading.jsx

@@ -1,11 +1,11 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import Button from '../Button'
+import InputButton from './InputButton'
 import Modal from './Modal'
 
 
-class LoadingModal extends React.Component {
+export default class ModalLoading extends React.Component {
   static propTypes = {
     isOpen: PropTypes.bool.isRequired,
     onCancel: PropTypes.func.isRequired,
@@ -20,7 +20,7 @@ class LoadingModal extends React.Component {
 
   render() {
     return <Modal
-      data-wd-key="loading-modal"
+      data-wd-key="modal:loading"
       isOpen={this.props.isOpen}
       underlayClickExits={false}
       underlayProps={{
@@ -34,12 +34,11 @@ class LoadingModal extends React.Component {
         {this.props.message}
       </p>
       <p className="maputnik-dialog__buttons">
-        <Button onClick={(e) => this.props.onCancel(e)}>
+        <InputButton onClick={(e) => this.props.onCancel(e)}>
           Cancel
-        </Button>
+        </InputButton>
       </p>
     </Modal>
   }
 }
 
-export default LoadingModal

src/components/ModalOpen.jsx

@@ -1,15 +1,16 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import LoadingModal from './LoadingModal'
+import ModalLoading from './ModalLoading'
 import Modal from './Modal'
-import Button from '../Button'
+import InputButton from './InputButton'
 import FileReaderInput from 'react-file-reader-input'
+import InputUrl from './InputUrl'
 
 import {MdFileUpload} from 'react-icons/md'
 import {MdAddCircleOutline} from 'react-icons/md'
 
-import style from '../../libs/style.js'
+import style from '../libs/style.js'
-import publicStyles from '../../config/styles.json'
+import publicStyles from '../config/styles.json'
 
 class PublicStyle extends React.Component {
   static propTypes = {
@@ -21,28 +22,28 @@ class PublicStyle extends React.Component {
 
   render() {
     return <div className="maputnik-public-style">
-      <Button
+      <InputButton
         className="maputnik-public-style-button"
         aria-label={this.props.title}
         onClick={() => this.props.onSelect(this.props.url)}
       >
-        <header className="maputnik-public-style-header">
+        <div className="maputnik-public-style-header">
-          <h4>{this.props.title}</h4>
+          <div>{this.props.title}</div>
           <span className="maputnik-space" />
           <MdAddCircleOutline />
-        </header>
+        </div>
         <div
           className="maputnik-public-style-thumbnail"
           style={{
             backgroundImage: `url(${this.props.thumbnailUrl})`
           }}
         ></div>
-      </Button>
+      </InputButton>
     </div>
   }
 }
 
-class OpenModal extends React.Component {
+export default class ModalOpen extends React.Component {
   static propTypes = {
     isOpen: PropTypes.bool.isRequired,
     onOpenToggle: PropTypes.func.isRequired,
@@ -122,9 +123,9 @@ class OpenModal extends React.Component {
     })
   }
 
-  onOpenUrl = () => {
+  onSubmitUrl = (e) => {
-    const url = this.styleUrlElement.value;
+    e.preventDefault();
-    this.onStyleSelect(url);
+    this.onStyleSelect(this.state.styleUrl);
   }
 
   onUpload = (_, files) => {
@@ -160,9 +161,9 @@ class OpenModal extends React.Component {
     this.props.onOpenToggle();
   }
 
-  onChangeUrl = () => {
+  onChangeUrl = (url) => {
     this.setState({
-      styleUrl: this.styleUrlElement.value
+      styleUrl: url,
     });
   }
 
@@ -190,46 +191,49 @@ class OpenModal extends React.Component {
     return  (
       <div>
         <Modal
-          data-wd-key="open-modal"
+          data-wd-key="modal:open"
           isOpen={this.props.isOpen}
           onOpenToggle={() => this.onOpenToggle()}
           title={'Open Style'}
         >
           {errorElement}
           <section className="maputnik-modal-section">
-            <h2>Upload Style</h2>
+            <h1>Upload Style</h1>
             <p>Upload a JSON style from your computer.</p>
-            <FileReaderInput onChange={this.onUpload} tabIndex="-1">
+            <FileReaderInput onChange={this.onUpload} tabIndex="-1" aria-label="Style file">
-              <Button className="maputnik-upload-button"><MdFileUpload /> Upload</Button>
+              <InputButton className="maputnik-upload-button"><MdFileUpload /> Upload</InputButton>
             </FileReaderInput>
           </section>
 
           <section className="maputnik-modal-section">
-            <h2>Load from URL</h2>
+            <form onSubmit={this.onSubmitUrl}>
-            <p>
+              <h1>Load from URL</h1>
-              Load from a URL. Note that the URL must have <a href="https://enable-cors.org" target="_blank" rel="noopener noreferrer">CORS enabled</a>.
+              <p>
-            </p>
+                Load from a URL. Note that the URL must have <a href="https://enable-cors.org" target="_blank" rel="noopener noreferrer">CORS enabled</a>.
-            <input
+              </p>
-              data-wd-key="open-modal.url.input"
+              <InputUrl
-              type="text"
+                aria-label="Style URL"
-              ref={(input) => this.styleUrlElement = input}
+                data-wd-key="modal:open.url.input"
-              className="maputnik-input"
+                type="text"
-              placeholder="Enter URL..."
+                className="maputnik-input"
-              value={this.state.styleUrl}
+                default="Enter URL..."
-              onChange={this.onChangeUrl}
+                value={this.state.styleUrl}
-            />
+                onInput={this.onChangeUrl}
-            <div>
+                onChange={this.onChangeUrl}
-              <Button
+              />
-                data-wd-key="open-modal.url.button"
+              <div>
-                className="maputnik-big-button"
+                <InputButton
-                onClick={this.onOpenUrl}
+                  data-wd-key="modal:open.url.button"
-                disabled={this.state.styleUrl.length < 1}
+                  type="submit"
-              >Open URL</Button>
+                  className="maputnik-big-button"
-            </div>
+                  disabled={this.state.styleUrl.length < 1}
+                >Load from URL</InputButton>
+              </div>
+            </form>
           </section>
 
           <section className="maputnik-modal-section maputnik-modal-section--shrink">
-            <h2>Gallery Styles</h2>
+            <h1>Gallery Styles</h1>
             <p>
               Open one of the publicly available styles to start from.
             </p>
@@ -239,7 +243,7 @@ class OpenModal extends React.Component {
           </section>
         </Modal>
 
-        <LoadingModal
+        <ModalLoading
           isOpen={!!this.state.activeRequest}
           title={'Loading style'}
           onCancel={(e) => this.onCancelActiveRequest(e)}
@@ -250,4 +254,3 @@ class OpenModal extends React.Component {
   }
 }
 
-export default OpenModal

src/components/ModalSettings.jsx

@@ -0,0 +1,254 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import {latest} from '@maplibre/maplibre-gl-style-spec'
+import Block from './Block'
+import FieldArray from './FieldArray'
+import FieldNumber from './FieldNumber'
+import FieldString from './FieldString'
+import FieldUrl from './FieldUrl'
+import FieldSelect from './FieldSelect'
+import FieldEnum from './FieldEnum'
+import FieldColor from './FieldColor'
+import Modal from './Modal'
+import fieldSpecAdditional from '../libs/field-spec-additional'
+
+export default class ModalSettings extends React.Component {
+  static propTypes = {
+    mapStyle: PropTypes.object.isRequired,
+    onStyleChanged: PropTypes.func.isRequired,
+    onChangeMetadataProperty: PropTypes.func.isRequired,
+    isOpen: PropTypes.bool.isRequired,
+    onOpenToggle: PropTypes.func.isRequired,
+  }
+
+  changeTransitionProperty(property, value) {
+    const transition = {
+      ...this.props.mapStyle.transition,
+    }
+
+    if (value === undefined) {
+      delete transition[property];
+    }
+    else {
+      transition[property] = value;
+    }
+
+    this.props.onStyleChanged({
+      ...this.props.mapStyle,
+      transition,
+    });
+  }
+
+  changeLightProperty(property, value) {
+    const light = {
+      ...this.props.mapStyle.light,
+    }
+
+    if (value === undefined) {
+      delete light[property];
+    }
+    else {
+      light[property] = value;
+    }
+
+    this.props.onStyleChanged({
+      ...this.props.mapStyle,
+      light,
+    });
+  }
+
+  changeStyleProperty(property, value) {
+    const changedStyle = {
+      ...this.props.mapStyle,
+    };
+
+    if (value === undefined) {
+      delete changedStyle[property];
+    }
+    else {
+      changedStyle[property] = value;
+    }
+    this.props.onStyleChanged(changedStyle);
+  }
+
+  render() {
+    const metadata = this.props.mapStyle.metadata || {}
+    const {onChangeMetadataProperty, mapStyle} = this.props;
+    const inputProps = { }
+
+    const light = this.props.mapStyle.light || {};
+    const transition = this.props.mapStyle.transition || {};
+
+    return <Modal
+      data-wd-key="modal:settings"
+      isOpen={this.props.isOpen}
+      onOpenToggle={this.props.onOpenToggle}
+      title={'Style Settings'}
+    >
+      <div className="modal:settings">
+        <FieldString {...inputProps}
+          label={"Name"}
+          fieldSpec={latest.$root.name}
+          data-wd-key="modal:settings.name"
+          value={this.props.mapStyle.name}
+          onChange={this.changeStyleProperty.bind(this, "name")}
+        />
+        <FieldString {...inputProps}
+          label={"Owner"}
+          fieldSpec={{doc: "Owner ID of the style. Used by Mapbox or future style APIs."}}
+          data-wd-key="modal:settings.owner"
+          value={this.props.mapStyle.owner}
+          onChange={this.changeStyleProperty.bind(this, "owner")}
+        />
+        <FieldUrl {...inputProps}
+          fieldSpec={latest.$root.sprite}
+          label="Sprite URL"
+          data-wd-key="modal:settings.sprite"
+          value={this.props.mapStyle.sprite}
+          onChange={this.changeStyleProperty.bind(this, "sprite")}
+        />
+
+        <FieldUrl {...inputProps}
+          label="Glyphs URL"
+          fieldSpec={latest.$root.glyphs}
+          data-wd-key="modal:settings.glyphs"
+          value={this.props.mapStyle.glyphs}
+          onChange={this.changeStyleProperty.bind(this, "glyphs")}
+        />
+
+        <FieldString {...inputProps}
+          label={fieldSpecAdditional.maputnik.mapbox_access_token.label}
+          fieldSpec={fieldSpecAdditional.maputnik.mapbox_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")}
+        />
+
+        <FieldString {...inputProps}
+          label={fieldSpecAdditional.maputnik.maptiler_access_token.label}
+          fieldSpec={fieldSpecAdditional.maputnik.maptiler_access_token}
+          data-wd-key="modal:settings.maputnik:openmaptiles_access_token"
+          value={metadata['maputnik:openmaptiles_access_token']}
+          onChange={onChangeMetadataProperty.bind(this, "maputnik:openmaptiles_access_token")}
+        />
+
+        <FieldString {...inputProps}
+          label={fieldSpecAdditional.maputnik.thunderforest_access_token.label}
+          fieldSpec={fieldSpecAdditional.maputnik.thunderforest_access_token}
+          data-wd-key="modal:settings.maputnik:thunderforest_access_token"
+          value={metadata['maputnik:thunderforest_access_token']}
+          onChange={onChangeMetadataProperty.bind(this, "maputnik:thunderforest_access_token")}
+        />
+
+        <FieldArray
+          label={"Center"}
+          fieldSpec={latest.$root.center}
+          length={2}
+          type="number"
+          value={mapStyle.center}
+          default={latest.$root.center.default || [0, 0]}
+          onChange={this.changeStyleProperty.bind(this, "center")}
+        />
+
+        <FieldNumber
+          {...inputProps}
+          label={"Zoom"}
+          fieldSpec={latest.$root.zoom}
+          value={mapStyle.zoom}
+          default={latest.$root.zoom.default || 0}
+          onChange={this.changeStyleProperty.bind(this, "zoom")}
+        />
+
+        <FieldNumber
+          {...inputProps}
+          label={"Bearing"}
+          fieldSpec={latest.$root.bearing}
+          value={mapStyle.bearing}
+          default={latest.$root.bearing.default}
+          onChange={this.changeStyleProperty.bind(this, "bearing")}
+        />
+
+        <FieldNumber
+          {...inputProps}
+          label={"Pitch"}
+          fieldSpec={latest.$root.pitch}
+          value={mapStyle.pitch}
+          default={latest.$root.pitch.default}
+          onChange={this.changeStyleProperty.bind(this, "pitch")}
+        />
+
+        <FieldEnum
+          {...inputProps}
+          label={"Light anchor"}
+          fieldSpec={latest.light.anchor}
+          name="light-anchor"
+          value={light.anchor}
+          options={Object.keys(latest.light.anchor.values)}
+          default={latest.light.anchor.default}
+          onChange={this.changeLightProperty.bind(this, "anchor")}
+        />
+
+        <FieldColor
+          {...inputProps}
+          label={"Light color"}
+          fieldSpec={latest.light.color}
+          value={light.color}
+          default={latest.light.color.default}
+          onChange={this.changeLightProperty.bind(this, "color")}
+        />
+
+        <FieldNumber
+          {...inputProps}
+          label={"Light intensity"}
+          fieldSpec={latest.light.intensity}
+          value={light.intensity}
+          default={latest.light.intensity.default}
+          onChange={this.changeLightProperty.bind(this, "intensity")}
+        />
+
+        <FieldArray
+          {...inputProps}
+          label={"Light position"}
+          fieldSpec={latest.light.position}
+          type="number"
+          length={latest.light.position.length}
+          value={light.position}
+          default={latest.light.position.default}
+          onChange={this.changeLightProperty.bind(this, "position")}
+        />
+
+        <FieldNumber
+          {...inputProps}
+          label={"Transition delay"}
+          fieldSpec={latest.transition.delay}
+          value={transition.delay}
+          default={latest.transition.delay.default}
+          onChange={this.changeTransitionProperty.bind(this, "delay")}
+        />
+
+        <FieldNumber
+          {...inputProps}
+          label={"Transition duration"}
+          fieldSpec={latest.transition.duration}
+          value={transition.duration}
+          default={latest.transition.duration.default}
+          onChange={this.changeTransitionProperty.bind(this, "duration")}
+        />
+
+        <FieldSelect {...inputProps}
+          label={fieldSpecAdditional.maputnik.style_renderer.label}
+          fieldSpec={fieldSpecAdditional.maputnik.style_renderer}
+          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')}
+        />
+      </div>
+    </Modal>
+  }
+}
+

src/components/ModalShortcuts.jsx

@@ -0,0 +1,132 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import Modal from './Modal'
+
+
+export default class ModalShortcuts extends React.Component {
+  static propTypes = {
+    isOpen: PropTypes.bool.isRequired,
+    onOpenToggle: PropTypes.func.isRequired,
+  }
+
+  render() {
+    const help = [
+      {
+        key: <kbd>?</kbd>,
+        text: "Shortcuts menu"
+      },
+      {
+        key: <kbd>o</kbd>,
+        text: "Open modal"
+      },
+      {
+        key: <kbd>e</kbd>,
+        text: "Export modal"
+      },
+      {
+        key: <kbd>d</kbd>,
+        text: "Data Sources modal"
+      },
+      {
+        key: <kbd>s</kbd>,
+        text: "Style Settings modal"
+      },
+      {
+        key: <kbd>i</kbd>,
+        text: "Toggle inspect"
+      },
+      {
+        key: <kbd>m</kbd>,
+        text: "Focus map"
+      },
+      {
+        key: <kbd>!</kbd>,
+        text: "Debug modal"
+      },
+    ]
+
+
+    const mapShortcuts = [
+      {
+        key: <kbd>+</kbd>,
+        text: "Increase the zoom level by 1.",
+      },
+      {
+        key: <><kbd>Shift</kbd> + <kbd>+</kbd></>,
+        text: "Increase the zoom level by 2.",
+      },
+      {
+        key: <kbd>-</kbd>,
+        text: "Decrease the zoom level by 1.",
+      },
+      {
+        key: <><kbd>Shift</kbd> + <kbd>-</kbd></>,
+        text: "Decrease the zoom level by 2.",
+      },
+      {
+        key: <kbd>Up</kbd>,
+        text: "Pan up by 100 pixels.",
+      },
+      {
+        key: <kbd>Down</kbd>,
+        text: "Pan down by 100 pixels.",
+      },
+      {
+        key: <kbd>Left</kbd>,
+        text: "Pan left by 100 pixels.",
+      },
+      {
+        key: <kbd>Right</kbd>,
+        text: "Pan right by 100 pixels.",
+      },
+      {
+        key: <><kbd>Shift</kbd> + <kbd>Right</kbd></>,
+        text: "Increase the rotation by 15 degrees.",
+      },
+      {
+        key: <><kbd>Shift</kbd> + <kbd>Left</kbd></>,
+        text: "Decrease the rotation by 15 degrees."
+      },
+      {
+        key: <><kbd>Shift</kbd> + <kbd>Up</kbd></>,
+        text: "Increase the pitch by 10 degrees."
+      },
+      {
+        key: <><kbd>Shift</kbd> + <kbd>Down</kbd></>,
+        text: "Decrease the pitch by 10 degrees."
+      },
+    ]
+
+
+    return <Modal
+      data-wd-key="modal:shortcuts"
+      isOpen={this.props.isOpen}
+      onOpenToggle={this.props.onOpenToggle}
+      title={'Shortcuts'}
+    >
+      <section className="maputnik-modal-section maputnik-modal-shortcuts">
+        <p>
+          Press <code>ESC</code> to lose focus of any active elements, then press one of:
+        </p>
+        <dl>
+          {help.map((item, idx) => {
+            return <div key={idx} className="maputnik-modal-shortcuts__shortcut">
+              <dt key={"dt"+idx}>{item.key}</dt>
+              <dd key={"dd"+idx}>{item.text}</dd>
+            </div>
+          })}
+        </dl>
+        <p>If the Map is in focused you can use the following shortcuts</p>
+        <ul>
+          {mapShortcuts.map((item, idx) => {
+            return <li key={idx}>
+              <span>{item.key}</span> {item.text}
+            </li>
+          })}
+        </ul>
+      </section>
+    </Modal>
+  }
+}
+

src/components/ModalSources.jsx

@@ -1,16 +1,16 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import {latest} from '@mapbox/mapbox-gl-style-spec'
+import {latest} from '@maplibre/maplibre-gl-style-spec'
 import Modal from './Modal'
-import Button from '../Button'
+import InputButton from './InputButton'
-import InputBlock from '../inputs/InputBlock'
+import Block from './Block'
-import StringInput from '../inputs/StringInput'
+import FieldString from './FieldString'
-import SelectInput from '../inputs/SelectInput'
+import FieldSelect from './FieldSelect'
-import SourceTypeEditor from '../sources/SourceTypeEditor'
+import ModalSourcesTypeEditor from './ModalSourcesTypeEditor'
 
-import style from '../../libs/style'
+import style from '../libs/style'
-import { deleteSource, addSource, changeSource } from '../../libs/source'
+import { deleteSource, addSource, changeSource } from '../libs/source'
-import publicSources from '../../config/tilesets.json'
+import publicSources from '../config/tilesets.json'
 
 import {MdAddCircleOutline, MdDelete} from 'react-icons/md'
 
@@ -24,7 +24,7 @@ class PublicSource extends React.Component {
 
   render() {
     return <div className="maputnik-public-source">
-			<Button
+			<InputButton
         className="maputnik-public-source-select"
 				onClick={() => this.props.onSelect(this.props.id)}
 			>
@@ -34,7 +34,7 @@ class PublicSource extends React.Component {
 				</div>
 				<span className="maputnik-space" />
 				<MdAddCircleOutline />
-			</Button>
+			</InputButton>
     </div>
   }
 }
@@ -52,11 +52,24 @@ function editorMode(source) {
     if(source.tiles) return 'tilexyz_vector'
     return 'tilejson_vector'
   }
-  if(source.type === 'geojson') return 'geojson'
+  if(source.type === 'geojson') {
+    if (typeof(source.data) === "string") {
+      return 'geojson_url';
+    }
+    else {
+      return 'geojson_json';
+    }
+  }
+  if(source.type === 'image') {
+    return 'image';
+  }
+  if(source.type === 'video') {
+    return 'video';
+  }
   return null
 }
 
-class ActiveSourceTypeEditor extends React.Component {
+class ActiveModalSourcesTypeEditor extends React.Component {
   static propTypes = {
     sourceId: PropTypes.string.isRequired,
     source: PropTypes.object.isRequired,
@@ -70,16 +83,17 @@ class ActiveSourceTypeEditor extends React.Component {
       <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
+        <InputButton
+          aria-label={`Remove '${this.props.sourceId}' source`}
           className="maputnik-active-source-type-editor-header-delete"
           onClick={()=> this.props.onDelete(this.props.sourceId)}
           style={{backgroundColor: 'transparent'}}
         >
           <MdDelete />
-        </Button>
+        </InputButton>
       </div>
       <div className="maputnik-active-source-type-editor-content">
-        <SourceTypeEditor
+        <ModalSourcesTypeEditor
           onChange={this.props.onChange}
           mode={editorMode(this.props.source)}
           source={this.props.source}
@@ -105,83 +119,135 @@ class AddSource extends React.Component {
 
   defaultSource(mode) {
     const source = (this.state || {}).source || {}
+    const {protocol} = window.location;
+
     switch(mode) {
-      case 'geojson': return {
+      case 'geojson_url': return {
         type: 'geojson',
-        data: source.data || 'http://localhost:3000/geojson.json'
+        data: `${protocol}//localhost:3000/geojson.json`
+      }
+      case 'geojson_json': return {
+        type: 'geojson',
+        data: {}
       }
       case 'tilejson_vector': return {
         type: 'vector',
-        url: source.url || 'http://localhost:3000/tilejson.json'
+        url: source.url || `${protocol}//localhost:3000/tilejson.json`
       }
       case 'tilexyz_vector': return {
         type: 'vector',
-        tiles: source.tiles || ['http://localhost:3000/{x}/{y}/{z}.pbf'],
+        tiles: source.tiles || [`${protocol}//localhost:3000/{x}/{y}/{z}.pbf`],
         minZoom: source.minzoom || 0,
         maxZoom: source.maxzoom || 14
       }
       case 'tilejson_raster': return {
         type: 'raster',
-        url: source.url || 'http://localhost:3000/tilejson.json'
+        url: source.url || `${protocol}//localhost:3000/tilejson.json`
       }
       case 'tilexyz_raster': return {
         type: 'raster',
-        tiles: source.tiles || ['http://localhost:3000/{x}/{y}/{z}.pbf'],
+        tiles: source.tiles || [`${protocol}//localhost:3000/{x}/{y}/{z}.pbf`],
         minzoom: source.minzoom || 0,
         maxzoom: source.maxzoom || 14
       }
       case 'tilejson_raster-dem': return {
         type: 'raster-dem',
-        url: source.url || 'http://localhost:3000/tilejson.json'
+        url: source.url || `${protocol}//localhost:3000/tilejson.json`
       }
       case 'tilexyz_raster-dem': return {
         type: 'raster-dem',
-        tiles: source.tiles || ['http://localhost:3000/{x}/{y}/{z}.pbf'],
+        tiles: source.tiles || [`${protocol}//localhost:3000/{x}/{y}/{z}.pbf`],
         minzoom: source.minzoom || 0,
         maxzoom: source.maxzoom || 14
       }
+      case 'image': return {
+        type: 'image',
+        url: `${protocol}//localhost:3000/image.png`,
+        coordinates: [
+          [0,0],
+          [0,0],
+          [0,0],
+          [0,0],
+        ],
+      }
+      case 'video': return {
+        type: 'video',
+        urls: [
+          `${protocol}//localhost:3000/movie.mp4`
+        ],
+        coordinates: [
+          [0,0],
+          [0,0],
+          [0,0],
+          [0,0],
+        ],
+      }
       default: return {}
     }
   }
 
+  onAdd = () => {
+    const {source, sourceId} = this.state;
+    this.props.onAdd(sourceId, source);
+  }
+
+  onChangeSource = (source) => {
+    this.setState({source});
+  }
+
   render() {
+    // Kind of a hack because the type changes, however maputnik has 1..n
+    // options per type, for example
+    //
+    //  - 'geojson' - 'GeoJSON (URL)' and 'GeoJSON (JSON)'
+    //  - 'raster' - 'Raster (TileJSON URL)' and 'Raster (XYZ URL)'
+    //
+    // So we just ignore the values entirely as they are self explanatory
+    const sourceTypeFieldSpec = {
+      doc: latest.source_vector.type.doc
+    };
+
     return <div className="maputnik-add-source">
-      <InputBlock label={"Source ID"} doc={"Unique ID that identifies the source and is used in the layer to reference the source."}>
+      <FieldString
-        <StringInput
+        label={"Source ID"}
-          value={this.state.sourceId}
+        fieldSpec={{doc: "Unique ID that identifies the source and is used in the layer to reference the source."}}
-          onChange={v => this.setState({ sourceId: v})}
+        value={this.state.sourceId}
-        />
+        onChange={v => this.setState({ sourceId: v})}
-      </InputBlock>
+      />
-      <InputBlock label={"Source Type"} doc={latest.source_vector.type.doc}>
+      <FieldSelect
-        <SelectInput
+        label={"Source Type"}
-          options={[
+        fieldSpec={sourceTypeFieldSpec}
-            ['geojson', 'GeoJSON'],
+        options={[
-            ['tilejson_vector', 'Vector (TileJSON URL)'],
+          ['geojson_json', 'GeoJSON (JSON)'],
-            ['tilexyz_vector', 'Vector (XYZ URLs)'],
+          ['geojson_url', 'GeoJSON (URL)'],
-            ['tilejson_raster', 'Raster (TileJSON URL)'],
+          ['tilejson_vector', 'Vector (TileJSON URL)'],
-            ['tilexyz_raster', 'Raster (XYZ URL)'],
+          ['tilexyz_vector', 'Vector (XYZ URLs)'],
-            ['tilejson_raster-dem', 'Raster DEM (TileJSON URL)'],
+          ['tilejson_raster', 'Raster (TileJSON URL)'],
-            ['tilexyz_raster-dem', 'Raster DEM (XYZ URLs)'],
+          ['tilexyz_raster', 'Raster (XYZ URL)'],
-          ]}
+          ['tilejson_raster-dem', 'Raster DEM (TileJSON URL)'],
-          onChange={mode => this.setState({mode: mode, source: this.defaultSource(mode)})}
+          ['tilexyz_raster-dem', 'Raster DEM (XYZ URLs)'],
-          value={this.state.mode}
+          ['image', 'Image'],
-        />
+          ['video', 'Video'],
-      </InputBlock>
+        ]}
-      <SourceTypeEditor
+        onChange={mode => this.setState({mode: mode, source: this.defaultSource(mode)})}
-        onChange={src => this.setState({ source: src })}
+        value={this.state.mode}
+      />
+      <ModalSourcesTypeEditor
+        onChange={this.onChangeSource}
         mode={this.state.mode}
         source={this.state.source}
       />
-      <Button
+      <InputButton
         className="maputnik-add-source-button"
-				onClick={() => this.props.onAdd(this.state.sourceId, this.state.source)}>
+				onClick={this.onAdd}
+      >
         Add Source
-      </Button>
+      </InputButton>
     </div>
   }
 }
 
-class SourcesModal extends React.Component {
+export default class ModalSources extends React.Component {
   static propTypes = {
     mapStyle: PropTypes.object.isRequired,
     isOpen: PropTypes.bool.isRequired,
@@ -199,7 +265,7 @@ class SourcesModal extends React.Component {
     const mapStyle = this.props.mapStyle
     const activeSources = Object.keys(mapStyle.sources).map(sourceId => {
       const source = mapStyle.sources[sourceId]
-      return <ActiveSourceTypeEditor
+      return <ActiveModalSourcesTypeEditor
         key={sourceId}
         sourceId={sourceId}
         source={source}
@@ -221,37 +287,34 @@ class SourcesModal extends React.Component {
 
     const inputProps = { }
     return <Modal
+      data-wd-key="modal:sources"
       isOpen={this.props.isOpen}
       onOpenToggle={this.props.onOpenToggle}
       title={'Sources'}
     >
-      <div className="maputnik-modal-section">
+      <section className="maputnik-modal-section">
-        <h4>Active Sources</h4>
+        <h1>Active Sources</h1>
         {activeSources}
-      </div>
+      </section>
 
-      <div className="maputnik-modal-section">
+      <section className="maputnik-modal-section">
-        <h4>Choose Public Source</h4>
+        <h1>Choose Public Source</h1>
         <p>
           Add one of the publicly available sources to your style.
         </p>
         <div className="maputnik-public-sources" style={{maxwidth: 500}}>
         {tilesetOptions}
         </div>
-        <p>
+      </section>
-          <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">
+      <section className="maputnik-modal-section">
-				<h4>Add New Source</h4>
+				<h1>Add New Source</h1>
 				<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>
+      </section>
     </Modal>
   }
 }
 
-export default SourcesModal

src/components/ModalSourcesTypeEditor.jsx

@@ -0,0 +1,266 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import {latest} from '@maplibre/maplibre-gl-style-spec'
+import Block from './Block'
+import FieldUrl from './FieldUrl'
+import FieldNumber from './FieldNumber'
+import FieldSelect from './FieldSelect'
+import FieldDynamicArray from './FieldDynamicArray'
+import FieldArray from './FieldArray'
+import FieldJson from './FieldJson'
+
+
+class TileJSONSourceEditor extends React.Component {
+  static propTypes = {
+    source: PropTypes.object.isRequired,
+    onChange: PropTypes.func.isRequired,
+    children: PropTypes.node,
+  }
+
+  render() {
+    return <div>
+      <FieldUrl
+        label={"TileJSON URL"}
+        fieldSpec={latest.source_vector.url}
+        value={this.props.source.url}
+        onChange={url => this.props.onChange({
+          ...this.props.source,
+          url: url
+        })}
+      />
+      {this.props.children}
+    </div>
+  }
+}
+
+class TileURLSourceEditor extends React.Component {
+  static propTypes = {
+    source: PropTypes.object.isRequired,
+    onChange: PropTypes.func.isRequired,
+    children: PropTypes.node,
+  }
+
+  changeTileUrls(tiles) {
+    this.props.onChange({
+      ...this.props.source,
+      tiles,
+    })
+  }
+
+  renderTileUrls() {
+    const tiles = this.props.source.tiles || [];
+    return <FieldDynamicArray
+      label={"Tile URL"}
+      fieldSpec={latest.source_vector.tiles}
+      type="url"
+      value={tiles}
+      onChange={this.changeTileUrls.bind(this)}
+    />
+  }
+
+  render() {
+    return <div>
+      {this.renderTileUrls()}
+      <FieldNumber
+        label={"Min Zoom"}
+        fieldSpec={latest.source_vector.minzoom}
+        value={this.props.source.minzoom || 0}
+        onChange={minzoom => this.props.onChange({
+          ...this.props.source,
+          minzoom: minzoom
+        })}
+      />
+      <FieldNumber
+        label={"Max Zoom"}
+        fieldSpec={latest.source_vector.maxzoom}
+        value={this.props.source.maxzoom || 22}
+        onChange={maxzoom => this.props.onChange({
+          ...this.props.source,
+          maxzoom: maxzoom
+        })}
+      />
+      {this.props.children}
+  </div>
+
+  }
+}
+
+class ImageSourceEditor extends React.Component {
+  static propTypes = {
+    source: PropTypes.object.isRequired,
+    onChange: PropTypes.func.isRequired,
+  }
+
+  render() {
+    const changeCoord = (idx, val) => {
+      const coordinates = this.props.source.coordinates.slice(0);
+      coordinates[idx] = val;
+
+      this.props.onChange({
+        ...this.props.source,
+        coordinates,
+      });
+    }
+
+    return <div>
+      <FieldUrl
+        label={"Image URL"}
+        fieldSpec={latest.source_image.url}
+        value={this.props.source.url}
+        onChange={url => this.props.onChange({
+          ...this.props.source,
+          url,
+        })}
+      />
+      {["top left", "top right", "bottom right", "bottom left"].map((label, idx) => {
+        return (
+          <FieldArray
+            label={`Coord ${label}`}
+            key={label}
+            length={2}
+            type="number"
+            value={this.props.source.coordinates[idx]}
+            default={[0, 0]}
+            onChange={(val) => changeCoord(idx, val)}
+          />
+        );
+      })}
+    </div>
+  }
+}
+
+class VideoSourceEditor extends React.Component {
+  static propTypes = {
+    source: PropTypes.object.isRequired,
+    onChange: PropTypes.func.isRequired,
+  }
+
+  render() {
+    const changeCoord = (idx, val) => {
+      const coordinates = this.props.source.coordinates.slice(0);
+      coordinates[idx] = val;
+
+      this.props.onChange({
+        ...this.props.source,
+        coordinates,
+      });
+    }
+
+    const changeUrls = (urls) => {
+      this.props.onChange({
+        ...this.props.source,
+        urls,
+      });
+    }
+
+    return <div>
+      <FieldDynamicArray
+        label={"Video URL"}
+        fieldSpec={latest.source_video.urls}
+        type="string"
+        value={this.props.source.urls}
+        default={""}
+        onChange={changeUrls}
+      />
+      {["top left", "top right", "bottom right", "bottom left"].map((label, idx) => {
+        return (
+          <FieldArray
+            label={`Coord ${label}`}
+            key={label}
+            length={2}
+            type="number"
+            value={this.props.source.coordinates[idx]}
+            default={[0, 0]}
+            onChange={val => changeCoord(idx, val)}
+          />
+        );
+      })}
+    </div>
+  }
+}
+
+class GeoJSONSourceUrlEditor extends React.Component {
+  static propTypes = {
+    source: PropTypes.object.isRequired,
+    onChange: PropTypes.func.isRequired,
+  }
+
+  render() {
+    return <FieldUrl
+      label={"GeoJSON URL"}
+      fieldSpec={latest.source_geojson.data}
+      value={this.props.source.data}
+      onChange={data => this.props.onChange({
+        ...this.props.source,
+        data: data
+      })}
+    />
+  }
+}
+
+class GeoJSONSourceFieldJsonEditor extends React.Component {
+  static propTypes = {
+    source: PropTypes.object.isRequired,
+    onChange: PropTypes.func.isRequired,
+  }
+
+  render() {
+    return <Block label={"GeoJSON"} fieldSpec={latest.source_geojson.data}>
+      <FieldJson
+        layer={this.props.source.data}
+        maxHeight={200}
+        mode={{
+          name: "javascript",
+          json: true
+        }}
+        lint={true}
+        onChange={data => {
+          this.props.onChange({
+            ...this.props.source,
+            data,
+          })
+        }}
+      />
+    </Block>
+  }
+}
+
+export default class ModalSourcesTypeEditor extends React.Component {
+  static propTypes = {
+    mode: PropTypes.string.isRequired,
+    source: PropTypes.object.isRequired,
+    onChange: PropTypes.func.isRequired,
+  }
+
+  render() {
+    const commonProps = {
+      source: this.props.source,
+      onChange: this.props.onChange,
+    }
+    switch(this.props.mode) {
+      case 'geojson_url': return <GeoJSONSourceUrlEditor {...commonProps} />
+      case 'geojson_json': return <GeoJSONSourceFieldJsonEditor {...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}>
+        <FieldSelect
+          label={"Encoding"}
+          fieldSpec={latest.source_raster_dem.encoding}
+          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}
+        />
+      </TileURLSourceEditor>
+      case 'image': return <ImageSourceEditor {...commonProps} />
+      case 'video': return <VideoSourceEditor {...commonProps} />
+      default: return null
+    }
+  }
+}
+

src/components/ModalSurvey.jsx

@@ -1,12 +1,12 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import Button from '../Button'
+import InputButton from './InputButton'
 import Modal from './Modal'
 
 import logoImage from 'maputnik-design/logos/logo-color.svg'
 
-class SurveyModal extends React.Component {
+export default class ModalSurvey extends React.Component {
   static propTypes = {
     isOpen: PropTypes.bool.isRequired,
     onOpenToggle: PropTypes.func.isRequired,
@@ -20,20 +20,19 @@ class SurveyModal extends React.Component {
 
   render() {
     return <Modal
-      data-wd-key="modal-survey"
+      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" />
+        <img src={logoImage} className="maputnik-modal-survey__logo" />
         <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>
+        <InputButton onClick={this.onClick} className="maputnik-big-button maputnik-white-button maputnik-wide-button">Take the Maputnik Survey</InputButton>
         <p className="maputnik-modal-survey__footnote">It takes 7 minutes, tops! Every question is optional.</p>
       </div>
     </Modal>
   }
 }
 
-export default SurveyModal

src/components/PropertyGroup.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import FunctionSpecField from './FunctionSpecField'
+import FieldFunction from './FieldFunction'
 const iconProperties = ['background-pattern', 'fill-pattern', 'line-pattern', 'fill-extrusion-pattern', 'icon-image']
 
 /** Extract field spec by {@fieldName} from the {@layerType} in the
@@ -40,6 +40,7 @@ export default class PropertyGroup extends React.Component {
     groupFields: PropTypes.array.isRequired,
     onChange: PropTypes.func.isRequired,
     spec: PropTypes.object.isRequired,
+    errors: PropTypes.object,
   }
 
   onPropertyChange = (property, newValue) => {
@@ -48,18 +49,22 @@ export default class PropertyGroup extends React.Component {
   }
 
   render() {
+    const {errors} = this.props;
     const fields = this.props.groupFields.map(fieldName => {
       const fieldSpec = getFieldSpec(this.props.spec, this.props.layer.type, fieldName)
 
       const paint = this.props.layer.paint || {}
       const layout = this.props.layer.layout || {}
       const fieldValue = fieldName in paint ? paint[fieldName] : layout[fieldName]
+      const fieldType = fieldName in paint ? 'paint' : 'layout';
 
-      return <FunctionSpecField
+      return <FieldFunction
+        errors={errors}
         onChange={this.onPropertyChange}
         key={fieldName}
         fieldName={fieldName}
-        value={fieldValue === undefined ? fieldSpec.default : fieldValue}
+        value={fieldValue}
+        fieldType={fieldType}
         fieldSpec={fieldSpec}
       />
     })

src/components/ScrollContainer.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-class ScrollContainer extends React.Component {
+export default class ScrollContainer extends React.Component {
   static propTypes = {
     children: PropTypes.node
   }
@@ -13,4 +13,3 @@ class ScrollContainer extends React.Component {
   }
 }
 
-export default ScrollContainer