Merge remote-tracking branch 'upstream/master' into feature/add-range-slider

.babelrc

@@ -4,6 +4,7 @@
     "@babel/preset-react"
   ],
   "plugins": [
+    "static-fs",
     "react-hot-loader/babel",
     "@babel/plugin-proposal-class-properties"
   ],

.circleci/config.yml

@@ -41,6 +41,7 @@ templates:
 
     - run: mkdir -p /tmp/artifacts/logs
     - run: npm run build
+    - run: npm run profiling-build
     - run: npm run lint
     - run: npm run lint-styles
     - run: DOCKER_HOST=localhost npm test
@@ -52,18 +53,23 @@ jobs:
   build-linux-node-v8:
     docker:
       - image: node:8
-      - image: selenium/standalone-chrome:3.8.1
     working_directory: ~/repo-linux-node-v8
-    steps: *wdio-steps
+    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: *build-steps
+    steps: *wdio-steps
-  build-linux-node-v11:
+  build-linux-node-v12:
     docker:
-      - image: node:11
+      - image: node:12
-    working_directory: ~/repo-linux-node-v11
+    working_directory: ~/repo-linux-node-v12
+    steps: *build-steps
+  build-linux-node-v13:
+    docker:
+      - image: node:13
+    working_directory: ~/repo-linux-node-v13
     steps: *build-steps
   build-osx-node-v8:
     macos:
@@ -81,13 +87,21 @@ jobs:
         - brew install node@10
     working_directory: ~/repo-osx-node-v10
     steps: *build-steps
-  build-osx-node-v11:
+  build-osx-node-v12:
     macos:
       xcode: "9.0"
     dependencies:
       override:
-        - brew install node@11
+        - brew install node@12
-    working_directory: ~/repo-osx-node-v11
+    working_directory: ~/repo-osx-node-v12
+    steps: *build-steps
+  build-osx-node-v13:
+    macos:
+      xcode: "9.0"
+    dependencies:
+      override:
+        - brew install node@13
+    working_directory: ~/repo-osx-node-v13
     steps: *build-steps
 
 workflows:
@@ -96,7 +110,9 @@ workflows:
     jobs:
       - build-linux-node-v8
       - build-linux-node-v10
-      - build-linux-node-v11
+      - build-linux-node-v12
+      - build-linux-node-v13
       - build-osx-node-v8
       - build-osx-node-v10
-      - build-osx-node-v11
+      - build-osx-node-v12
+      - build-osx-node-v13

.github/FUNDING.yml

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

appveyor.yml

@@ -3,12 +3,20 @@ environment:
   matrix:
     - nodejs_version: "8"
     - nodejs_version: "10"
-    - nodejs_version: "11"
+    - nodejs_version: "12"
+    - nodejs_version: "13"
 platform:
   - x86
   - x64
 install:
-  - ps: Install-Product node $env:nodejs_version
+  # https://github.com/appveyor/ci/issues/2921#issuecomment-501016533
+  - ps: |
+      try {
+      Install-Product node $env:nodejs_version $env:platform
+      } catch {
+      echo "Unable to install node $env:nodejs_version, trying update..."
+      Update-NodeJsInstallation (Get-NodeJsLatestBuild $env:nodejs_version) $env:platform
+      }
   - md public
   - npm --vs2015 install --global windows-build-tools
   - npm install

config/wdio.conf.js

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

config/webpack.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',
+    }
+  }
+};

package.json

@@ -1,11 +1,12 @@
 {
   "name": "maputnik",
-  "version": "1.5.0",
+  "version": "1.6.1",
   "description": "A MapboxGL visual style editor",
   "main": "''",
   "scripts": {
     "stats": "webpack --config config/webpack.production.config.js --profile --json > stats.json",
     "build": "webpack --config config/webpack.production.config.js --progress --profile --colors",
+    "profiling-build": "webpack --config config/webpack.profiling.config.js --progress --profile --colors",
     "test": "cross-env NODE_ENV=test wdio config/wdio.conf.js",
     "test-watch": "cross-env NODE_ENV=test wdio config/wdio.conf.js --watch",
     "start": "webpack-dev-server --progress --profile --colors --config config/webpack.config.js",
@@ -20,42 +21,43 @@
   "license": "MIT",
   "homepage": "https://github.com/maputnik/editor#readme",
   "dependencies": {
-    "@babel/runtime": "^7.1.2",
+    "@babel/runtime": "^7.6.3",
-    "@mapbox/mapbox-gl-rtl-text": "^0.2.1",
+    "@mapbox/mapbox-gl-rtl-text": "^0.2.3",
-    "@mapbox/mapbox-gl-style-spec": "^13.6.0",
+    "@mapbox/mapbox-gl-style-spec": "^13.9.1",
     "classnames": "^2.2.6",
-    "codemirror": "^5.40.2",
+    "codemirror": "^5.49.0",
-    "color": "^3.0.0",
+    "color": "^3.1.2",
-    "detect-browser": "^4.5.0",
+    "detect-browser": "^4.7.0",
-    "file-saver": "^1.3.8",
+    "file-saver": "^2.0.2",
     "jsonlint": "github:josdejong/jsonlint#85a19d7",
+    "lodash": "^4.17.15",
     "lodash.capitalize": "^4.2.1",
     "lodash.clamp": "^4.0.3",
     "lodash.clonedeep": "^4.5.0",
+    "lodash.get": "^4.4.2",
     "lodash.isequal": "^4.5.0",
     "lodash.throttle": "^4.1.1",
-    "mapbox-gl": "^0.53.1",
+    "mapbox-gl": "^1.5.0",
     "mapbox-gl-inspect": "^1.3.1",
     "maputnik-design": "github:maputnik/design",
-    "ol": "^5.3.2",
+    "ol": "^6.0.1",
-    "ol-mapbox-style": "^4.3.0",
+    "ol-mapbox-style": "^5.0.2",
-    "prop-types": "^15.6.2",
+    "prop-types": "^15.7.2",
-    "react": "^16.5.2",
+    "react": "^16.10.2",
-    "react-aria-menubutton": "^6.0.1",
+    "react-aria-menubutton": "^6.2.0",
-    "react-aria-modal": "^3.0.0",
+    "react-aria-modal": "^4.0.0",
     "react-autobind": "^1.0.6",
     "react-autocomplete": "^1.8.1",
-    "react-codemirror2": "^5.1.0",
     "react-collapse": "^4.0.3",
-    "react-color": "^2.14.1",
+    "react-color": "^2.17.3",
-    "react-dom": "^16.5.2",
+    "react-dom": "^16.10.2",
     "react-file-reader-input": "^2.0.0",
     "react-icon-base": "^2.1.2",
-    "react-icons": "^3.1.0",
+    "react-icons": "^3.7.0",
     "react-motion": "^0.5.2",
-    "react-sortable-hoc": "^0.8.3",
+    "react-sortable-hoc": "^1.10.1",
-    "reconnecting-websocket": "^3.2.2",
+    "reconnecting-websocket": "^4.2.0",
-    "slugify": "^1.3.1",
+    "slugify": "^1.3.5",
     "url": "^0.11.0"
   },
   "jshintConfig": {
@@ -99,48 +101,51 @@
     }
   },
   "devDependencies": {
-    "@babel/core": "^7.1.2",
+    "@babel/core": "^7.6.3",
-    "@babel/plugin-proposal-class-properties": "^7.1.0",
+    "@babel/plugin-proposal-class-properties": "^7.5.5",
-    "@babel/plugin-transform-runtime": "^7.1.0",
+    "@babel/plugin-transform-runtime": "^7.6.2",
-    "@babel/preset-env": "^7.1.0",
+    "@babel/preset-env": "^7.6.3",
     "@babel/preset-flow": "^7.0.0",
-    "@babel/preset-react": "^7.0.0",
+    "@babel/preset-react": "^7.6.3",
-    "babel-eslint": "^10.0.1",
+    "@wdio/cli": "^5.14.5",
-    "babel-loader": "8.0.4",
+    "@wdio/local-runner": "^5.14.5",
-    "babel-plugin-istanbul": "^5.0.1",
+    "@wdio/mocha-framework": "^5.14.4",
-    "copy-webpack-plugin": "^4.5.2",
+    "@wdio/selenium-standalone-service": "^5.13.2",
-    "cors": "^2.8.4",
+    "@wdio/spec-reporter": "^5.14.5",
-    "cross-env": "^5.2.0",
+    "@wdio/sync": "^5.14.4",
-    "css-loader": "^1.0.0",
+    "babel-eslint": "^10.0.3",
-    "eslint": "^5.6.1",
+    "babel-loader": "8.0.6",
-    "eslint-plugin-react": "^7.11.1",
+    "babel-plugin-istanbul": "^5.2.0",
-    "express": "^4.16.3",
+    "babel-plugin-static-fs": "^3.0.0",
-    "file-loader": "^2.0.0",
+    "copy-webpack-plugin": "^5.0.4",
+    "cors": "^2.8.5",
+    "cross-env": "^6.0.3",
+    "css-loader": "^3.2.0",
+    "eslint": "^6.5.1",
+    "eslint-plugin-react": "^7.16.0",
+    "express": "^4.17.1",
+    "file-loader": "^4.2.0",
     "html-webpack-plugin": "^3.2.0",
-    "is-docker": "^1.1.0",
+    "is-docker": "^2.0.0",
     "istanbul": "^0.4.5",
-    "istanbul-lib-coverage": "^2.0.1",
+    "istanbul-lib-coverage": "^2.0.5",
     "mkdirp": "^0.5.1",
-    "mocha": "^5.2.0",
+    "mocha": "^6.2.1",
-    "node-sass": "^4.10.0",
+    "node-sass": "^4.12.0",
-    "raw-loader": "^0.5.1",
+    "react-hot-loader": "^4.12.15",
-    "react-hot-loader": "^4.3.11",
+    "sass-loader": "^8.0.0",
-    "sass-loader": "^7.1.0",
+    "selenium-standalone": "^6.16.0",
-    "selenium-standalone": "^6.15.3",
+    "style-loader": "^1.0.0",
-    "style-loader": "^0.23.0",
+    "stylelint": "^11.0.0",
-    "stylelint": "^10.0.0",
+    "stylelint-config-recommended-scss": "^4.0.0",
-    "stylelint-config-recommended-scss": "^3.2.0",
+    "stylelint-scss": "^3.11.1",
-    "stylelint-scss": "^3.5.4",
     "transform-loader": "^0.2.4",
-    "uuid": "^3.3.2",
+    "uuid": "^3.3.3",
-    "wdio-mocha-framework": "^0.6.4",
+    "webdriverio": "^5.14.5",
-    "wdio-selenium-standalone-service": "0.0.10",
+    "webpack": "^4.41.0",
-    "wdio-spec-reporter": "^0.1.5",
+    "webpack-bundle-analyzer": "^3.5.2",
-    "webdriverio": "^4.13.2",
-    "webpack": "^4.20.2",
-    "webpack-bundle-analyzer": "^3.0.2",
     "webpack-cleanup-plugin": "^0.5.1",
-    "webpack-cli": "^3.1.2",
+    "webpack-cli": "^3.3.9",
-    "webpack-dev-server": "^3.1.9"
+    "webpack-dev-server": "^3.8.2"
   }
 }

src/components/App.jsx

@@ -2,6 +2,7 @@ import autoBind from 'react-autobind';
 import React from 'react'
 import cloneDeep from 'lodash.clonedeep'
 import clamp from 'lodash.clamp'
+import get from 'lodash.get'
 import {arrayMove} from 'react-sortable-hoc'
 import url from 'url'
 
@@ -90,8 +91,15 @@ export default class App extends React.Component {
     autoBind(this);
 
     this.revisionStore = new RevisionStore()
+    const params = new URLSearchParams(window.location.search.substring(1))
+    let port = params.get("localport")
+    if (port == null && (window.location.port != 80 && window.location.port != 443)) {
+      port = window.location.port
+    }
     this.styleStore = new ApiStyleStore({
-      onLocalStyleChange: mapStyle => this.onStyleChanged(mapStyle, false)
+      onLocalStyleChange: mapStyle => this.onStyleChanged(mapStyle, false),
+      port: port,
+      host: params.get("localhost")
     })
 
 
@@ -218,6 +226,9 @@ export default class App extends React.Component {
         showCollisionBoxes: false,
         showOverdrawInspector: false,
       },
+      openlayersDebugOptions: {
+        debugToolbox: false,
+      },
     }
 
     this.layerWatcher = new LayerWatcher({
@@ -276,6 +287,27 @@ export default class App extends React.Component {
     })
   }
 
+  onChangeMetadataProperty = (property, value) => {
+    // If we're changing renderer reset the map state.
+    if (
+      property === 'maputnik:renderer' &&
+      value !== get(this.state.mapStyle, ['metadata', 'maputnik:renderer'], 'mbgljs')
+    ) {
+      this.setState({
+        mapState: 'map'
+      });
+    }
+
+    const changedStyle = {
+      ...this.state.mapStyle,
+      metadata: {
+        ...this.state.mapStyle.metadata,
+        [property]: value
+      }
+    }
+    this.onStyleChanged(changedStyle)
+  }
+
   onStyleChanged = (newStyle, save=true) => {
 
     const errors = validate(newStyle, latest)
@@ -409,6 +441,27 @@ export default class App extends React.Component {
     })
   }
 
+  setDefaultValues = (styleObj) => {
+    const metadata = styleObj.metadata || {}
+    if(metadata['maputnik:renderer'] === undefined) {
+      const changedStyle = {
+        ...styleObj,
+        metadata: {
+          ...styleObj.metadata,
+          'maputnik:renderer': 'mbgljs'
+        }
+      }
+      return changedStyle
+    } else {
+      return styleObj
+    }
+  }
+
+  openStyle = (styleObj) => {
+    styleObj = this.setDefaultValues(styleObj)
+    this.onStyleChanged(styleObj)
+  }
+
   fetchSources() {
     const sourceList = {...this.state.sources};
 
@@ -479,9 +532,10 @@ export default class App extends React.Component {
   }
 
   mapRenderer() {
+    const metadata = this.state.mapStyle.metadata || {};
+
     const mapProps = {
       mapStyle: style.replaceAccessTokens(this.state.mapStyle, {allowFallback: true}),
-      options: this.state.mapboxGlDebugOptions,
       onDataChange: (e) => {
         this.layerWatcher.analyzeMap(e.map)
         this.fetchSources();
@@ -496,9 +550,12 @@ export default class App extends React.Component {
     if(renderer === 'ol') {
       mapElement = <OpenLayersMap
         {...mapProps}
+        debugToolbox={this.state.openlayersDebugOptions.debugToolbox}
+        onLayerSelect={this.onLayerSelect}
       />
     } else {
       mapElement = <MapboxGlMap {...mapProps}
+        options={this.state.mapboxGlDebugOptions}
         inspectModeEnabled={this.state.mapState === "inspect"}
         highlightedLayer={this.state.mapStyle.layers[this.state.selectedLayerIndex]}
         onLayerSelect={this.onLayerSelect} />
@@ -540,11 +597,20 @@ export default class App extends React.Component {
     this.setModal(modalName, !this.state.isOpen[modalName]);
   }
 
+  onChangeOpenlayersDebug = (key, value) => {
+    this.setState({
+      openlayersDebugOptions: {
+        ...this.state.openlayersDebugOptions,
+        [key]: value,
+      }
+    });
+  }
+
   onChangeMaboxGlDebug = (key, value) => {
     this.setState({
       mapboxGlDebugOptions: {
         ...this.state.mapboxGlDebugOptions,
-        [key]: value, 
+        [key]: value,
       }
     });
   }
@@ -555,6 +621,7 @@ export default class App extends React.Component {
     const metadata = this.state.mapStyle.metadata || {}
 
     const toolbar = <Toolbar
+      renderer={this._getRenderer()}
       mapState={this.state.mapState}
       mapStyle={this.state.mapStyle}
       inspectModeEnabled={this.state.mapState === "inspect"}
@@ -578,6 +645,7 @@ export default class App extends React.Component {
     />
 
     const layerEditor = selectedLayer ? <LayerEditor
+      key={selectedLayer.id}
       layer={selectedLayer}
       layerIndex={this.state.selectedLayerIndex}
       isFirstLayer={this.state.selectedLayerIndex < 1}
@@ -603,7 +671,9 @@ export default class App extends React.Component {
       <DebugModal
         renderer={this._getRenderer()}
         mapboxGlDebugOptions={this.state.mapboxGlDebugOptions}
+        openlayersDebugOptions={this.state.openlayersDebugOptions}
         onChangeMaboxGlDebug={this.onChangeMaboxGlDebug}
+        onChangeOpenlayersDebug={this.onChangeOpenlayersDebug}
         isOpen={this.state.isOpen.debug}
         onOpenToggle={this.toggleModal.bind(this, 'debug')}
       />
@@ -615,8 +685,10 @@ export default class App extends React.Component {
       <SettingsModal
         mapStyle={this.state.mapStyle}
         onStyleChanged={this.onStyleChanged}
+        onChangeMetadataProperty={this.onChangeMetadataProperty}
         isOpen={this.state.isOpen.settings}
         onOpenToggle={this.toggleModal.bind(this, 'settings')}
+        openlayersDebugOptions={this.state.openlayersDebugOptions}
       />
       <ExportModal
         mapStyle={this.state.mapStyle}
@@ -626,7 +698,7 @@ export default class App extends React.Component {
       />
       <OpenModal
         isOpen={this.state.isOpen.open}
-        onStyleOpen={this.onStyleChanged}
+        onStyleOpen={this.openStyle}
         onOpenToggle={this.toggleModal.bind(this, 'open')}
       />
       <SourcesModal

src/components/Toolbar.jsx

@@ -114,6 +114,7 @@ export default class Toolbar extends React.Component {
     onToggleModal: PropTypes.func,
     onSetMapState: PropTypes.func,
     mapState: PropTypes.string,
+    renderer: PropTypes.string,
   }
 
   state = {
@@ -139,6 +140,7 @@ export default class Toolbar extends React.Component {
       {
         id: "inspect",
         title: "Inspect",
+        disabled: this.props.renderer !== 'mbgljs',
       },
       {
         id: "filter-deuteranopia",

src/components/fields/ColorField.jsx

@@ -2,6 +2,7 @@ import React from 'react'
 import Color from 'color'
 import ChromePicker from 'react-color/lib/components/chrome/Chrome'
 import PropTypes from 'prop-types'
+import lodash from 'lodash';
 
 function formatColor(color) {
   const rgb = color.rgb
@@ -23,6 +24,15 @@ class ColorField extends React.Component {
     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
@@ -57,6 +67,10 @@ class ColorField extends React.Component {
     }
   }
 
+  onChange (v) {
+    this.props.onChange(v === "" ? undefined : v);
+  }
+
   render() {
     const offset = this.calcPickerOffset()
     var currentColor = this.color.object()
@@ -78,7 +92,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"
@@ -110,7 +124,7 @@ class ColorField extends React.Component {
         name={this.props.name}
         placeholder={this.props.default}
         value={this.props.value ? this.props.value : ""}
-        onChange={(e) => this.props.onChange(e.target.value)}
+        onChange={(e) => this.onChange(e.target.value)}
       />
     </div>
   }

src/components/fields/PropertyGroup.jsx

@@ -59,7 +59,7 @@ export default class PropertyGroup extends React.Component {
         onChange={this.onPropertyChange}
         key={fieldName}
         fieldName={fieldName}
-        value={fieldValue === undefined ? fieldSpec.default : fieldValue}
+        value={fieldValue}
         fieldSpec={fieldSpec}
       />
     })

src/components/fields/SpecField.jsx

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

src/components/inputs/ArrayInput.jsx

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

src/components/inputs/AutocompleteInput.jsx

@@ -44,6 +44,10 @@ class AutocompleteInput extends React.Component {
     this.calcMaxHeight();
   }
 
+  onChange (v) {
+    this.props.onChange(v === "" ? undefined : v);
+  }
+
   render() {
     return <div
       ref={(el) => {
@@ -68,8 +72,8 @@ class AutocompleteInput extends React.Component {
         value={this.props.value}
         items={this.props.options}
         getItemValue={(item) => item[0]}
-        onSelect={v => this.props.onChange(v)}
+        onSelect={v => this.onChange(v)}
-        onChange={(e, v) => this.props.onChange(v)}
+        onChange={(e, v) => this.onChange(v)}
         shouldItemRender={(item, value="") => {
           if (typeof(value) === "string") {
             return item[0].toLowerCase().indexOf(value.toLowerCase()) > -1

src/components/inputs/DynamicArrayInput.jsx

@@ -5,6 +5,8 @@ import NumberInput from './NumberInput'
 import Button from '../Button'
 import {MdDelete} from 'react-icons/md'
 import DocLabel from '../fields/DocLabel'
+import EnumInput from '../inputs/SelectInput'
+import capitalize from 'lodash.capitalize'
 
 
 class DynamicArrayInput extends React.Component {
@@ -14,6 +16,7 @@ class DynamicArrayInput extends React.Component {
     default: PropTypes.array,
     onChange: PropTypes.func,
     style: PropTypes.object,
+    fieldSpec: PropTypes.object,
   }
 
   changeValue(idx, newValue) {
@@ -31,6 +34,11 @@ class DynamicArrayInput extends React.Component {
     const values = this.values.slice(0)
     if (this.props.type === 'number') {
       values.push(0)
+    }
+    else if (this.props.type === 'enum') {
+      const {fieldSpec} = this.props;
+      const defaultValue = Object.keys(fieldSpec.values)[0];
+      values.push(defaultValue);
     } else {
       values.push("")
     }
@@ -48,15 +56,28 @@ class DynamicArrayInput extends React.Component {
   render() {
     const inputs = this.values.map((v, i) => {
       const deleteValueBtn= <DeleteValueButton onClick={this.deleteValue.bind(this, i)} />
-      const input = this.props.type === 'number' 
+      let input;
-        ? <NumberInput
+      if (this.props.type === 'number') {
+        input = <NumberInput
           value={v}
           onChange={this.changeValue.bind(this, i)}
         />
-        : <StringInput
+      }
+      else if (this.props.type === 'enum') {
+        const options = Object.keys(this.props.fieldSpec.values).map(v => [v, capitalize(v)]);
+
+        input = <EnumInput
+          options={options}
           value={v}
           onChange={this.changeValue.bind(this, i)}
         />
+      }
+      else {
+        input = <StringInput
+          value={v}
+          onChange={this.changeValue.bind(this, i)}
+        />
+      }
 
       return <div
         style={this.props.style}

src/components/inputs/EnumInput.jsx

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

src/components/inputs/FontInput.jsx

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

src/components/inputs/InputBlock.jsx

@@ -20,7 +20,7 @@ class InputBlock extends React.Component {
 
   onChange(e) {
     const value = e.target.value
-    return this.props.onChange(value === "" ? null: value)
+    return this.props.onChange(value === "" ? undefined : value)
   }
 
   render() {

src/components/inputs/NumberInput.jsx

@@ -11,6 +11,7 @@ class NumberInput extends React.Component {
     allowRange: PropTypes.bool,
     rangeStep: PropTypes.number,
     wdKey: PropTypes.string,
+    required: PropTypes.bool,
   }
 
   static defaultProps = {
@@ -33,14 +34,14 @@ class NumberInput extends React.Component {
         dirtyValue: props.value,
       };
     }
-    else {
+    return {};
-      return null;
-    }
   }
 
   changeValue(newValue) {
     this.setState({editing: true});
-    const value = parseFloat(newValue)
+    const value = (newValue === "" || newValue === undefined) ?
+      undefined :
+      parseFloat(newValue);
 
     const hasChanged = this.state.value !== value;
     if(this.isValid(value) && hasChanged) {
@@ -53,6 +54,10 @@ class NumberInput extends React.Component {
   }
 
   isValid(v) {
+    if (v === undefined) {
+      return true;
+    }
+
     const value = parseFloat(v)
     if(isNaN(value)) {
       return false
@@ -73,7 +78,7 @@ class NumberInput extends React.Component {
     this.setState({editing: false});
     // Reset explicitly to default value if value has been cleared
     if(this.state.value === "") {
-      return this.changeValue(this.props.default)
+      return;
     }
 
     // If set value is invalid fall back to the last valid value from props or at last resort the default value
@@ -81,7 +86,7 @@ class NumberInput extends React.Component {
       if(this.isValid(this.props.value)) {
         this.changeValue(this.props.value)
       } else {
-        this.changeValue(this.props.default)
+        this.changeValue(undefined);
       }
     }
   }
@@ -108,6 +113,7 @@ class NumberInput extends React.Component {
   }
 
   render() {
+<<<<<<< HEAD
     if(
       this.props.hasOwnProperty("min") && this.props.hasOwnProperty("max") &&
       this.props.min !== undefined && this.props.max !== undefined &&
@@ -152,18 +158,15 @@ class NumberInput extends React.Component {
       </div>
     }
     else {
-      return <div className="maputnik-number-container">
+      return <input
-        <input
+        spellCheck="false"
-          key="text"
+        className="maputnik-number"
-          type="text"
+        placeholder={this.props.default}
-          spellCheck="false"
+        value={this.state.value === undefined ? "" : this.state.value}
-          className="maputnik-number"
+        onChange={e => this.changeValue(e.target.value)}
-          placeholder={this.props.default}
+        onBlur={this.resetValue}
-          value={this.state.value}
+        required={this.props.required}
-          onChange={e => this.changeValue(e.target.value)}
+      />
-          onBlur={this.resetValue}
-        />
-      </div>
     }
   }
 }

src/components/inputs/StringInput.jsx

@@ -9,6 +9,7 @@ class StringInput extends React.Component {
     default: PropTypes.string,
     onChange: PropTypes.func,
     multi: PropTypes.bool,
+    required: PropTypes.bool,
   }
 
   constructor(props) {
@@ -50,7 +51,7 @@ class StringInput extends React.Component {
       spellCheck: !(tag === "input"),
       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({
@@ -63,7 +64,8 @@ class StringInput extends React.Component {
           this.setState({editing: false});
           this.props.onChange(this.state.value);
         }
-      }
+      },
+      required: this.props.required,
     });
   }
 }

src/components/layers/JSONEditor.jsx

@@ -1,9 +1,9 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import {Controlled as CodeMirror} from 'react-codemirror2'
 import InputBlock from '../inputs/InputBlock'
 import StringInput from '../inputs/StringInput'
+import CodeMirror from 'codemirror';
 
 import 'codemirror/mode/javascript/javascript'
 import 'codemirror/addon/lint/lint'
@@ -19,42 +19,89 @@ import '../../vendor/codemirror/addon/lint/json-lint'
 class JSONEditor extends React.Component {
   static propTypes = {
     layer: PropTypes.object.isRequired,
+    maxHeight: PropTypes.number,
     onChange: PropTypes.func,
   }
 
   constructor(props) {
     super(props)
     this.state = {
-      code: JSON.stringify(props.layer, null, 2)
+      isEditing: false,
-    }
+      prevValue: this.getValue(),
+    };
+  }
+
+  getValue () {
+    return JSON.stringify(this.props.layer, null, 2);
+  }
+
+  componentDidMount () {
+    this._doc = CodeMirror(this._el, {
+      value: this.getValue(),
+      mode: {
+        name: "javascript",
+        json: true
+      },
+      tabSize: 2,
+      theme: 'maputnik',
+      viewportMargin: Infinity,
+      lineNumbers: true,
+      lint: true,
+      gutters: ["CodeMirror-lint-markers"],
+      scrollbarStyle: "null",
+    });
+
+    this._doc.on('change', this.onChange);
+    this._doc.on('focus', this.onFocus);
+    this._doc.on('blur', this.onBlur);
+  }
+
+  onFocus = () => {
+    this.setState({
+      isEditing: true
+    });
+  }
+
+  onBlur = () => {
+    this.setState({
+      isEditing: false
+    });
+  }
+
+  componentWillUnMount () {
+    this._doc.off('change', this.onChange);
+    this._doc.off('focus', this.onFocus);
+    this._doc.off('blur', this.onBlur);
   }
 
   componentDidUpdate(prevProps) {
-    if (prevProps.layer !== this.props.layer) {
+    if (!this.state.isEditing && prevProps.layer !== this.props.layer) {
-      this.setState({
+      this._cancelNextChange = true;
-        code: JSON.stringify(this.props.layer, null, 2)
+      this._doc.setValue(
-      })
+        this.getValue(),
+      )
     }
   }
 
-  onCodeUpdate(newCode) {
+  onChange = (e) => {
-    try {
+    if (this._cancelNextChange) {
-      const parsedLayer = JSON.parse(newCode)
+      this._cancelNextChange = false;
-      this.props.onChange(parsedLayer)
+      return;
-    } catch(err) {
+    }
-      console.warn(err)
+    const newCode = this._doc.getValue();
-    } finally {
+
-      this.setState({
+    if (this.state.prevValue !== newCode) {
-        code: newCode
+      try {
-      })
+        const parsedLayer = JSON.parse(newCode)
+        this.props.onChange(parsedLayer)
+      } catch(err) {
+        console.warn(err)
+      }
     }
-  }
 
-  resetValue() {
-    console.log('reset')
     this.setState({
-      code: JSON.stringify(this.props.layer, null, 2)
+      prevValue: newCode,
-    })
+    });
   }
 
   render() {
@@ -69,11 +116,15 @@ class JSONEditor extends React.Component {
       scrollbarStyle: "null",
     }
 
-    return <CodeMirror
+    const style = {};
-      value={this.state.code}
+    if (this.props.maxHeight) {
-      onBeforeChange={(editor, data, value) => this.onCodeUpdate(value)}
+      style.maxHeight = this.props.maxHeight;
-      onFocusChange={focused => focused ? true : this.resetValue()}
+    }
-      options={codeMirrorOptions}
+
+    return <div
+      className="codemirror-container"
+      ref={(el) => this._el = el}
+      style={style}
     />
   }
 }

src/components/layers/LayerEditor.jsx

@@ -141,7 +141,7 @@ export default class LayerEditor extends React.Component {
           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
           sourceLayerIds={sourceLayerIds}
           value={this.props.layer['source-layer']}

src/components/layers/LayerList.jsx

@@ -1,6 +1,7 @@
 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'
@@ -116,6 +117,50 @@ 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;
+  }
+
   render() {
 
     const listItems = []

src/components/map/FeatureLayerPopup.jsx

@@ -34,6 +34,11 @@ class FeatureLayerPopup extends React.Component {
   }
 
   _getFeatureColor(feature, zoom) {
+    // Guard because openlayers won't have this
+    if (!feature.layer.paint) {
+      return;
+    }
+
     try {
       const paintProps = feature.layer.paint;
       let propName;
@@ -105,11 +110,13 @@ class FeatureLayerPopup extends React.Component {
               this.props.onLayerSelect(feature.layer.id)
             }}
           >
-            <LayerIcon type={feature.layer.type} style={{
+            {feature.layer.type && 
-              width: 14,
+              <LayerIcon type={feature.layer.type} style={{
-              height: 14,
+                width: 14,
-              paddingRight: 3
+                height: 14,
-            }}/>
+                paddingRight: 3
+              }}/>
+            }
             {feature.layer.id}
             {feature.counter && <span> × {feature.counter}</span>}
           </label>

src/components/map/MapboxGlMap.jsx

@@ -94,16 +94,6 @@ export default class MapboxGlMap extends React.Component {
     }
   }
 
-  shouldComponentUpdate(nextProps, nextState) {
-    let should = false;
-    try {
-      should = JSON.stringify(this.props) !== JSON.stringify(nextProps) || JSON.stringify(this.state) !== JSON.stringify(nextState);
-    } catch(e) {
-      // no biggie, carry on
-    }
-    return should;
-  }
-
   componentDidUpdate(prevProps) {
     if(!IS_SUPPORTED) return;
 
@@ -144,7 +134,7 @@ export default class MapboxGlMap extends React.Component {
     const zoom = new ZoomControl;
     map.addControl(zoom, 'top-right');
 
-    const nav = new MapboxGl.NavigationControl();
+    const nav = new MapboxGl.NavigationControl({visualizePitch:true});
     map.addControl(nav, 'top-right');
 
     const tmpNode = document.createElement('div');

src/components/map/OpenLayersMap.jsx

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

src/components/modals/AddModal.jsx

@@ -53,10 +53,10 @@ class AddModal extends React.Component {
     }
   }
 
-  UNSAFE_componentWillUpdate(nextProps, nextState) {
+  componentDidUpdate(prevProps, prevState) {
     // Check if source is valid for new type
-    const oldType = this.state.type;
+    const oldType = prevState.type;
-    const newType = nextState.type;
+    const newType = this.state.type;
 
     const availableSourcesOld = this.getSources(oldType);
     const availableSourcesNew = this.getSources(newType);
@@ -64,11 +64,11 @@ class AddModal extends React.Component {
     if(
       // Type has changed
       oldType !== newType
-      && this.state.source !== ""
+      && prevState.source !== ""
       // Was a valid source previously
-      && availableSourcesOld.indexOf(this.state.source) > -1
+      && availableSourcesOld.indexOf(prevState.source) > -1
       // And is not a valid source now
-      && availableSourcesNew.indexOf(nextState.source) < 0
+      && availableSourcesNew.indexOf(this.state.source) < 0
     ) {
       // Clear the source
       this.setState({
@@ -91,10 +91,19 @@ class AddModal extends React.Component {
         "line",
         "symbol",
         "circle",
-        "fill-extrusion"
+        "fill-extrusion",
+        "heatmap"
       ],
       raster: [
         "raster"
+      ],
+      geojson: [
+        "fill",
+        "line",
+        "symbol",
+        "circle",
+        "fill-extrusion",
+        "heatmap"
       ]
     }
 

src/components/modals/DebugModal.js

@@ -9,8 +9,10 @@ class DebugModal extends React.Component {
     isOpen: PropTypes.bool.isRequired,
     renderer: PropTypes.string.isRequired,
     onChangeMaboxGlDebug: PropTypes.func.isRequired,
+    onChangeOpenlayersDebug: PropTypes.func.isRequired,
     onOpenToggle: PropTypes.func.isRequired,
     mapboxGlDebugOptions: PropTypes.object,
+    openlayersDebugOptions: PropTypes.object,
   }
 
   render() {
@@ -33,9 +35,15 @@ class DebugModal extends React.Component {
           </ul>
         }
         {this.props.renderer === 'ol' &&
-          <div>
+          <ul>
-            No debug options available for the OpenLayers renderer
+            {Object.entries(this.props.openlayersDebugOptions).map(([key, val]) => {
-          </div>
+              return <li key={key}>
+                <label>
+                  <input type="checkbox" checked={val} onClick={(e) => this.props.onChangeOpenlayersDebug(key, e.target.checked)} /> {key}
+                </label>
+              </li>
+            })}
+          </ul>
         }
       </div>
     </Modal>

src/components/modals/SettingsModal.jsx

@@ -3,40 +3,81 @@ import PropTypes from 'prop-types'
 
 import {latest} from '@mapbox/mapbox-gl-style-spec'
 import InputBlock from '../inputs/InputBlock'
+import ArrayInput from '../inputs/ArrayInput'
+import NumberInput from '../inputs/NumberInput'
 import StringInput from '../inputs/StringInput'
 import SelectInput from '../inputs/SelectInput'
+import EnumInput from '../inputs/EnumInput'
+import ColorField from '../fields/ColorField'
 import Modal from './Modal'
 
 class SettingsModal extends React.Component {
   static propTypes = {
     mapStyle: PropTypes.object.isRequired,
     onStyleChanged: PropTypes.func.isRequired,
+    onChangeMetadataProperty: PropTypes.func.isRequired,
     isOpen: PropTypes.bool.isRequired,
     onOpenToggle: PropTypes.func.isRequired,
   }
 
+  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,
-      [property]: value
+    };
-    }
-    this.props.onStyleChanged(changedStyle)
-  }
 
-  changeMetadataProperty(property, value) {
+    if (value === undefined) {
-    const changedStyle = {
+      delete changedStyle[property];
-      ...this.props.mapStyle,
-      metadata: {
-        ...this.props.mapStyle.metadata,
-        [property]: value
-      }
     }
-    this.props.onStyleChanged(changedStyle)
+    else {
+      changedStyle[property] = value;
+    }
+    this.props.onStyleChanged(changedStyle);
   }
 
   render() {
     const metadata = this.props.mapStyle.metadata || {}
+    const {onChangeMetadataProperty, mapStyle} = this.props;
     const inputProps = { }
+
+    const light = this.props.mapStyle.light || {};
+    const transition = this.props.mapStyle.transition || {};
+
     return <Modal
       data-wd-key="modal-settings"
       isOpen={this.props.isOpen}
@@ -78,7 +119,7 @@ class SettingsModal extends React.Component {
         <StringInput {...inputProps}
           data-wd-key="modal-settings.maputnik:mapbox_access_token" 
           value={metadata['maputnik:mapbox_access_token']}
-          onChange={this.changeMetadataProperty.bind(this, "maputnik:mapbox_access_token")}
+          onChange={onChangeMetadataProperty.bind(this, "maputnik:mapbox_access_token")}
         />
       </InputBlock>
 
@@ -86,7 +127,7 @@ class SettingsModal extends React.Component {
         <StringInput {...inputProps}
           data-wd-key="modal-settings.maputnik:openmaptiles_access_token" 
           value={metadata['maputnik:openmaptiles_access_token']}
-          onChange={this.changeMetadataProperty.bind(this, "maputnik:openmaptiles_access_token")}
+          onChange={onChangeMetadataProperty.bind(this, "maputnik:openmaptiles_access_token")}
         />
       </InputBlock>
 
@@ -94,7 +135,101 @@ class SettingsModal extends React.Component {
         <StringInput {...inputProps}
           data-wd-key="modal-settings.maputnik:thunderforest_access_token" 
           value={metadata['maputnik:thunderforest_access_token']}
-          onChange={this.changeMetadataProperty.bind(this, "maputnik:thunderforest_access_token")}
+          onChange={onChangeMetadataProperty.bind(this, "maputnik:thunderforest_access_token")}
+        />
+      </InputBlock>
+
+      <InputBlock label={"Center"} doc={latest.$root.center.doc}>
+        <ArrayInput
+          length={2}
+          type="number"
+          value={mapStyle.center}
+          default={latest.$root.center.default || [0, 0]}
+          onChange={this.changeStyleProperty.bind(this, "center")}
+        />
+      </InputBlock>
+
+      <InputBlock label={"Zoom"} doc={latest.$root.zoom.doc}>
+        <NumberInput
+          {...inputProps}
+          value={mapStyle.zoom}
+          default={latest.$root.zoom.default || 0}
+          onChange={this.changeStyleProperty.bind(this, "zoom")}
+        />
+      </InputBlock>
+
+      <InputBlock label={"Bearing"} doc={latest.$root.bearing.doc}>
+        <NumberInput
+          {...inputProps}
+          value={mapStyle.bearing}
+          default={latest.$root.bearing.default}
+          onChange={this.changeStyleProperty.bind(this, "bearing")}
+        />
+      </InputBlock>
+
+      <InputBlock label={"Pitch"} doc={latest.$root.pitch.doc}>
+        <NumberInput
+          {...inputProps}
+          value={mapStyle.pitch}
+          default={latest.$root.pitch.default}
+          onChange={this.changeStyleProperty.bind(this, "pitch")}
+        />
+      </InputBlock>
+
+      <InputBlock label={"Light anchor"} doc={latest.light.anchor.doc}>
+        <EnumInput
+          {...inputProps}
+          value={light.anchor}
+          options={Object.keys(latest.light.anchor.values)}
+          default={latest.light.anchor.default}
+          onChange={this.changeLightProperty.bind(this, "anchor")}
+        />
+      </InputBlock>
+
+      <InputBlock label={"Light color"} doc={latest.light.color.doc}>
+        <ColorField
+          {...inputProps}
+          value={light.color}
+          default={latest.light.color.default}
+          onChange={this.changeLightProperty.bind(this, "color")}
+        />
+      </InputBlock>
+
+      <InputBlock label={"Light intensity"} doc={latest.light.intensity.doc}>
+        <NumberInput
+          {...inputProps}
+          value={light.intensity}
+          default={latest.light.intensity.default}
+          onChange={this.changeLightProperty.bind(this, "intensity")}
+        />
+      </InputBlock>
+
+      <InputBlock label={"Light position"} doc={latest.light.position.doc}>
+        <ArrayInput
+          {...inputProps}
+          type="number"
+          length={latest.light.position.length}
+          value={light.position}
+          default={latest.light.position.default}
+          onChange={this.changeLightProperty.bind(this, "position")}
+        />
+      </InputBlock>
+
+      <InputBlock label={"Transition delay"} doc={latest.transition.delay.doc}>
+        <NumberInput
+          {...inputProps}
+          value={transition.delay}
+          default={latest.transition.delay.default}
+          onChange={this.changeTransitionProperty.bind(this, "delay")}
+        />
+      </InputBlock>
+
+      <InputBlock label={"Transition duration"} doc={latest.transition.duration.doc}>
+        <NumberInput
+          {...inputProps}
+          value={transition.duration}
+          default={latest.transition.duration.default}
+          onChange={this.changeTransitionProperty.bind(this, "duration")}
         />
       </InputBlock>
 
@@ -106,9 +241,12 @@ class SettingsModal extends React.Component {
             ['ol', 'Open Layers (experimental)'],
           ]}
           value={metadata['maputnik:renderer'] || 'mbgljs'}
-          onChange={this.changeMetadataProperty.bind(this, 'maputnik:renderer')}
+          onChange={onChangeMetadataProperty.bind(this, 'maputnik:renderer')}
         />
       </InputBlock>
+
+
+
       </div>
     </Modal>
   }

src/components/modals/SourcesModal.jsx

@@ -52,7 +52,14 @@ 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';
+    }
+  }
   return null
 }
 
@@ -106,9 +113,13 @@ class AddSource extends React.Component {
   defaultSource(mode) {
     const source = (this.state || {}).source || {}
     switch(mode) {
-      case 'geojson': return {
+      case 'geojson_url': return {
         type: 'geojson',
-        data: source.data || 'http://localhost:3000/geojson.json'
+        data: 'http://localhost:3000/geojson.json'
+      }
+      case 'geojson_json': return {
+        type: 'geojson',
+        data: {}
       }
       case 'tilejson_vector': return {
         type: 'vector',
@@ -155,7 +166,8 @@ class AddSource extends React.Component {
       <InputBlock label={"Source Type"} doc={latest.source_vector.type.doc}>
         <SelectInput
           options={[
-            ['geojson', 'GeoJSON'],
+            ['geojson_json', 'GeoJSON (JSON)'],
+            ['geojson_url', 'GeoJSON (URL)'],
             ['tilejson_vector', 'Vector (TileJSON URL)'],
             ['tilexyz_vector', 'Vector (XYZ URLs)'],
             ['tilejson_raster', 'Raster (TileJSON URL)'],

src/components/sources/SourceTypeEditor.jsx

@@ -5,6 +5,7 @@ import InputBlock from '../inputs/InputBlock'
 import StringInput from '../inputs/StringInput'
 import NumberInput from '../inputs/NumberInput'
 import SelectInput from '../inputs/SelectInput'
+import JSONEditor from '../layers/JSONEditor'
 
 
 class TileJSONSourceEditor extends React.Component {
@@ -86,14 +87,14 @@ class TileURLSourceEditor extends React.Component {
   }
 }
 
-class GeoJSONSourceEditor extends React.Component {
+class GeoJSONSourceUrlEditor extends React.Component {
   static propTypes = {
     source: PropTypes.object.isRequired,
     onChange: PropTypes.func.isRequired,
   }
 
   render() {
-    return <InputBlock label={"GeoJSON Data"} doc={latest.source_geojson.data.doc}>
+    return <InputBlock label={"GeoJSON URL"} doc={latest.source_geojson.data.doc}>
       <StringInput
         value={this.props.source.data}
         onChange={data => this.props.onChange({
@@ -105,6 +106,28 @@ class GeoJSONSourceEditor extends React.Component {
   }
 }
 
+class GeoJSONSourceJSONEditor extends React.Component {
+  static propTypes = {
+    source: PropTypes.object.isRequired,
+    onChange: PropTypes.func.isRequired,
+  }
+
+  render() {
+    return <InputBlock label={"GeoJSON"} doc={latest.source_geojson.data.doc}>
+      <JSONEditor
+        layer={this.props.source.data}
+        maxHeight={200}
+        onChange={data => {
+          this.props.onChange({
+            ...this.props.source,
+            data,
+          })
+        }}
+      />
+    </InputBlock>
+  }
+}
+
 class SourceTypeEditor extends React.Component {
   static propTypes = {
     mode: PropTypes.string.isRequired,
@@ -118,7 +141,8 @@ class SourceTypeEditor extends React.Component {
       onChange: this.props.onChange,
     }
     switch(this.props.mode) {
-      case 'geojson': return <GeoJSONSourceEditor {...commonProps} />
+      case 'geojson_url': return <GeoJSONSourceUrlEditor {...commonProps} />
+      case 'geojson_json': return <GeoJSONSourceJSONEditor {...commonProps} />
       case 'tilejson_vector': return <TileJSONSourceEditor {...commonProps} />
       case 'tilexyz_vector': return <TileURLSourceEditor {...commonProps} />
       case 'tilejson_raster': return <TileJSONSourceEditor {...commonProps} />

src/config/layout.json

@@ -128,11 +128,14 @@
             "text-justify",
             "text-anchor",
             "text-max-angle",
+            "text-writing-mode",
             "text-rotate",
             "text-keep-upright",
             "text-transform",
             "text-offset",
-            "text-optional"
+            "text-optional",
+            "text-variable-anchor",
+            "text-radial-offset"
           ]
         },
         {

src/config/styles.json

@@ -2,61 +2,67 @@
   {
     "id": "klokantech-basic",
     "title": "Klokantech Basic",
-    "url": "https://cdn.jsdelivr.net/gh/openmaptiles/klokantech-basic-gl-style@v1.8/style.json",
+    "url": "https://cdn.jsdelivr.net/gh/openmaptiles/klokantech-basic-gl-style@e142f83/style.json",
     "thumbnail": "https://maputnik.github.io/thumbnails/klokantech-basic.png"
   },
   {
     "id": "dark-matter",
     "title": "Dark Matter",
-    "url": "https://cdn.jsdelivr.net/gh/openmaptiles/dark-matter-gl-style@v1.7/style.json",
+    "url": "https://cdn.jsdelivr.net/gh/openmaptiles/dark-matter-gl-style@1dcc1d3/style.json",
     "thumbnail": "https://maputnik.github.io/thumbnails/dark-matter.png"
   },
   {
     "id": "positron",
     "title": "Positron",
-    "url": "https://cdn.jsdelivr.net/gh/openmaptiles/positron-gl-style@v1.7/style.json",
+    "url": "https://cdn.jsdelivr.net/gh/openmaptiles/positron-gl-style@2877814/style.json",
     "thumbnail": "https://maputnik.github.io/thumbnails/positron.png"
   },
   {
     "id": "osm-bright",
     "title": "OSM Bright",
-    "url": "https://cdn.jsdelivr.net/gh/openmaptiles/osm-bright-gl-style@v1.8/style.json",
+    "url": "https://cdn.jsdelivr.net/gh/openmaptiles/osm-bright-gl-style@500e26e/style.json",
     "thumbnail": "https://maputnik.github.io/thumbnails/osm-bright.png"
   },
+  {
+    "id": "toner-gl-style",
+    "title": "Toner",
+    "url": "https://cdn.jsdelivr.net/gh/openmaptiles/toner-gl-style@bb49571/style.json",
+    "thumbnail": "https://maputnik.github.io/thumbnails/toner.png"
+  },
   {
     "id": "osm-liberty",
     "title": "OSM Liberty",
     "url": "https://maputnik.github.io/osm-liberty/style.json",
-    "thumbnail": "https://maputnik.github.io/osm-liberty/thumbnail.png"
+    "thumbnail": "https://maputnik.github.io/thumbnails/osm-liberty.png"
+  },
+  {
+    "id": "os-zoomstack-outdoor",
+    "title": "Zoomstack Outdoor",
+    "url": "https://s3-eu-west-1.amazonaws.com/tiles.os.uk/v2/styles/open-zoomstack-outdoor/style.json",
+    "thumbnail": "https://maputnik.github.io/thumbnails/os-zoomstack-outdoor.png"
+  },
+  {
+    "id": "os-zoomstack-road",
+    "title": "Zoomstack Road",
+    "url": "https://s3-eu-west-1.amazonaws.com/tiles.os.uk/v2/styles/open-zoomstack-road/style.json",
+    "thumbnail": "https://maputnik.github.io/thumbnails/os-zoomstack-road.png"
+  },
+  {
+    "id": "os-zoomstack-light",
+    "title": "Zoomstack Light",
+    "url": "https://s3-eu-west-1.amazonaws.com/tiles.os.uk/v2/styles/open-zoomstack-light/style.json",
+    "thumbnail": "https://maputnik.github.io/thumbnails/os-zoomstack-light.png"
+  },
+  {
+    "id": "os-zoomstack-night",
+    "title": "Zoomstack Night",
+    "url": "https://s3-eu-west-1.amazonaws.com/tiles.os.uk/v2/styles/open-zoomstack-night/style.json",
+    "thumbnail": "https://maputnik.github.io/thumbnails/os-zoomstack-night.png"
   },
   {
     "id": "empty-style",
     "title": "Empty Style",
     "url": "https://cdn.jsdelivr.net/gh/maputnik/editor@9cf74ca405d2be0608b57db8109cf3a6af5b9f49/src/config/empty-style.json",
     "thumbnail": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAECAQAAAAHDYbIAAAAEUlEQVR42mP8/58BDhiJ4wAA974H/U5Xe1oAAAAASUVORK5CYII="
-  },
-  {
-    "id": "os-zoomstack-outdoor",
-    "title": "Zoomstack Outdoor",
-    "url": "https://s3-eu-west-1.amazonaws.com/tiles.os.uk/styles/open-zoomstack-outdoor/style.json",
-    "thumbnail": "https://maputnik.github.io/thumbnails/os-zoomstack-outdoor.png"
-  },
-  {
-    "id": "os-zoomstack-road",
-    "title": "Zoomstack Road",
-    "url": "https://s3-eu-west-1.amazonaws.com/tiles.os.uk/styles/open-zoomstack-road/style.json",
-    "thumbnail": "https://maputnik.github.io/thumbnails/os-zoomstack-road.png"
-  },
-  {
-    "id": "os-zoomstack-light",
-    "title": "Zoomstack Light",
-    "url": "https://s3-eu-west-1.amazonaws.com/tiles.os.uk/styles/open-zoomstack-light/style.json",
-    "thumbnail": "https://maputnik.github.io/thumbnails/os-zoomstack-light.png"
-  },
-  {
-    "id": "os-zoomstack-night",
-    "title": "Zoomstack Night",
-    "url": "https://s3-eu-west-1.amazonaws.com/tiles.os.uk/styles/open-zoomstack-night/style.json",
-    "thumbnail": "https://maputnik.github.io/thumbnails/os-zoomstack-night.png"
   }
 ]

src/config/tilesets.json

@@ -16,7 +16,7 @@
   },
   "open_zoomstack": {
     "type": "vector",
-    "url": "https://s3-eu-west-1.amazonaws.com/tiles.os.uk/data/vector/open-zoomstack/config.json",
+    "url": "https://s3-eu-west-1.amazonaws.com/tiles.os.uk/v2/data/vector/open-zoomstack/config.json",
     "title": "OS Open Zoomstack"
   }
 }

src/config/tokens.json

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

src/libs/apistore.js

@@ -1,37 +1,37 @@
 import style from './style.js'
 import ReconnectingWebSocket from 'reconnecting-websocket'
 
-const host = 'localhost'
-const port = '8000'
-const localUrl = `http://${host}:${port}`
-const websocketUrl = `ws://${host}:${port}/ws`
-
-
 export class ApiStyleStore {
+
   constructor(opts) {
     this.onLocalStyleChange = opts.onLocalStyleChange || (() => {})
+    const port = opts.port || '8000'
+    const host = opts.host || 'localhost'
+    this.localUrl = `http://${host}:${port}`
+    this.websocketUrl = `ws://${host}:${port}/ws`
+    this.init = this.init.bind(this)
   }
 
   init(cb) {
-    fetch(localUrl + '/styles', {
+    fetch(this.localUrl + '/styles', {
       mode: 'cors',
     })
-    .then(function(response) {
+    .then((response) =>  {
       return response.json();
     })
-    .then(function(body) {
+    .then((body) => {
       const styleIds = body;
       this.latestStyleId = styleIds[0]
       this.notifyLocalChanges()
       cb(null)
     })
-    .catch(function() {
+    .catch(function(e) {
       cb(new Error('Can not connect to style API'))
     })
   }
 
   notifyLocalChanges() {
-    const connection = new ReconnectingWebSocket(websocketUrl)
+    const connection = new ReconnectingWebSocket(this.websocketUrl)
     connection.onmessage = e => {
       if(!e.data) return
       console.log('Received style update from API')
@@ -48,7 +48,7 @@ export class ApiStyleStore {
 
   latestStyle(cb) {
     if(this.latestStyleId) {
-      fetch(localUrl + '/styles/' + this.latestStyleId, {
+      fetch(this.localUrl + '/styles/' + this.latestStyleId, {
         mode: 'cors',
       })
       .then(function(response) {
@@ -65,7 +65,7 @@ export class ApiStyleStore {
   // Save current style replacing previous version
   save(mapStyle) {
     const id = mapStyle.id
-    fetch(localUrl + '/styles/' + id, {
+    fetch(this.localUrl + '/styles/' + id, {
       method: "PUT",
       mode: 'cors',
       headers: {

src/libs/layer.js

@@ -31,7 +31,11 @@ export function changeProperty(layer, group, property, newValue) {
   if(newValue === undefined) {
     if(group) {
       const newLayer = {
-        ...layer
+        ...layer,
+        // Change object so the diff works in ./src/components/map/MapboxGlMap.jsx
+        [group]: {
+          ...layer[group]
+        }
       };
       delete newLayer[group][property];
 

src/libs/mapbox-rtl.js

@@ -1,7 +1,7 @@
 import MapboxGl from 'mapbox-gl'
+import {readFileSync} from 'fs'
 
-// Load mapbox-gl-rtl-text using object urls without needing http://localhost for AJAX.
+const data = readFileSync(__dirname+"/../../node_modules/@mapbox/mapbox-gl-rtl-text/mapbox-gl-rtl-text.js", "utf8");
-const data = require("raw-loader?mimetype=text/javascript!@mapbox/mapbox-gl-rtl-text/mapbox-gl-rtl-text.js");
 
 const blob = new window.Blob([data], {
   type: "text/javascript"

src/mapboxgl.css

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

src/styles/_codemirror.scss

@@ -0,0 +1,9 @@
+.CodeMirror-lint-tooltip {
+  z-index: 2000 !important;
+}
+
+.codemirror-container {
+  max-width: 100%;
+  position: relative;
+  overflow: auto;
+}

src/styles/_input.scss

@@ -11,6 +11,11 @@
   border: none;
   background-color: $color-gray;
   color: lighten($color-lowgray, 12);
+
+  &:invalid {
+    border: solid 1px #B71C1C;
+    border-radius: 2px;
+  }
 }
 
 .maputnik-string {

src/styles/_map.scss

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

src/styles/_modal.scss

@@ -180,10 +180,26 @@
   border-width: 2px;
   border-style: solid;
   padding: $margin-2;
+
+  .maputnik-input-block-label {
+    width: 30%;
+  }
+
+  .maputnik-input-block-content {
+    width: 70%;
+  }
 }
 
 .maputnik-add-source {
   @extend .clearfix;
+
+  .maputnik-input-block-label {
+    width: 30%;
+  }
+
+  .maputnik-input-block-content {
+    width: 70%;
+  }
 }
 
 .maputnik-add-source-button {

src/styles/_popup.scss

@@ -22,12 +22,14 @@
 
 .maputnik-popup-layer-id {
   padding-left: $margin-2;
-  padding-right: $margin-2;
+  padding-right: 1.6em;
   background-color: $color-midgray;
   color: $color-white;
 }
 
 .maputnik-feature-property-popup {
+  max-height: calc(50vh - 40px); /* toolbar height: 40px */
+  overflow-y: auto;
   .maputnik-input-block {
     margin: 0;
     margin-left: $margin-2;

src/styles/_react-codemirror.scss

@@ -1,3 +0,0 @@
-.react-codemirror2 {
-  max-width: 100%;
-}

src/styles/_zoomproperty.scss

@@ -45,17 +45,12 @@
 }
 
 .maputnik-delete-stop {
+  display: inline-block;
+  padding-bottom: 0;
+  padding-top: 0;
+  vertical-align: middle;
+
   @extend .maputnik-icon-button;
-
-  vertical-align: top;
-
-  .maputnik-doc-wrapper {
-    width: auto;
-  }
-
-  .maputnik-doc-target {
-    cursor: pointer;
-  }
 }
 
 .maputnik-add-stop {

src/styles/index.scss

@@ -37,8 +37,8 @@ $toolbar-offset: 0;
 @import 'zoomproperty';
 @import 'popup';
 @import 'map';
+@import 'codemirror';
 @import 'react-collapse';
-@import 'react-codemirror';
 
 /**
  * Hacks for webdriverio isVisibleWithinViewport

test/functional/helper.js

@@ -18,7 +18,7 @@ module.exports = {
     var result = browser.executeAsync(function(done) {
       window.debug.get("maputnik", "styleStore").latestStyle(done);
     })
-    return result.value;
+    return result;
   },
   getRevisionStore: function(browser) {
     var result = browser.execute(function(done) {
@@ -34,15 +34,16 @@ module.exports = {
   modal: {
     addLayer: {
       open: function() {
-        var selector = wd.$('layer-list:add-layer');
+        const selector = $(wd.$('layer-list:add-layer'));
-        browser.click(selector);
+        selector.click();
 
         // Wait for events
         browser.flushReactUpdates();
 
-        browser.waitForExist(wd.$('modal:add-layer'));
+        const elem = $(wd.$('modal:add-layer'));
-        browser.isVisible(wd.$('modal:add-layer'));
+        elem.waitForExist();
-        browser.isVisibleWithinViewport(wd.$('modal:add-layer'));
+        elem.isDisplayed();
+        elem.isDisplayedInViewport();
 
         // Wait for events
         browser.flushReactUpdates();
@@ -58,7 +59,8 @@ module.exports = {
           id = type+":"+uuid();
         }
 
-        browser.selectByValue(wd.$("add-layer.layer-type", "select"), type);
+        const selectBox = $(wd.$("add-layer.layer-type", "select"));
+        selectBox.selectByAttribute('value', type);
         browser.flushReactUpdates();
 
         browser.setValueSafe(wd.$("add-layer.layer-id", "input"), id);
@@ -67,7 +69,8 @@ module.exports = {
         }
 
         browser.flushReactUpdates();
-        browser.click(wd.$("add-layer"));
+        const elem_addLayer = $(wd.$("add-layer"));
+        elem_addLayer.click();
 
         return id;
       }

test/functional/index.js

@@ -11,11 +11,12 @@ describe('maputnik', function() {
       "geojson:example",
       "raster:raster"
     ]));
-    browser.alertAccept();
+    browser.acceptAlert();
     browser.execute(function() {
       localStorage.setItem("survey", true);
     });
-    browser.waitForExist(".maputnik-toolbar-link");
+    const elem = $(".maputnik-toolbar-link");
+    elem.waitForExist();
     browser.flushReactUpdates();
   });
 

test/functional/layers/index.js

@@ -11,8 +11,9 @@ describe("layers", function() {
       "geojson:example",
       "raster:raster"
     ]));
-    browser.alertAccept();
+    browser.acceptAlert();
-    browser.waitForExist(".maputnik-toolbar-link");
+    const elem = $(".maputnik-toolbar-link");
+    elem.waitForExist();
     browser.flushReactUpdates();
 
     helper.modal.addLayer.open();
@@ -33,7 +34,8 @@ describe("layers", function() {
         },
       ]);
 
-      browser.click(wd.$("layer-list-item:"+id+":delete", ""));
+      const elem = $(wd.$("layer-list-item:"+id+":delete", ""));
+      elem.click();
 
       styleObj = helper.getStyleStore(browser);
       assert.deepEqual(styleObj.layers, [
@@ -54,7 +56,8 @@ describe("layers", function() {
         },
       ]);
 
-      browser.click(wd.$("layer-list-item:"+id+":copy", ""));
+      const elem = $(wd.$("layer-list-item:"+id+":copy", ""));
+      elem.click();
 
       styleObj = helper.getStyleStore(browser);
       assert.deepEqual(styleObj.layers, [
@@ -83,7 +86,8 @@ describe("layers", function() {
         },
       ]);
 
-      browser.click(wd.$("layer-list-item:"+id+":toggle-visibility", ""));
+      const elem = $(wd.$("layer-list-item:"+id+":toggle-visibility", ""));
+      elem.click();
 
       styleObj = helper.getStyleStore(browser);
       assert.deepEqual(styleObj.layers, [
@@ -96,7 +100,7 @@ describe("layers", function() {
         },
       ]);
 
-      browser.click(wd.$("layer-list-item:"+id+":toggle-visibility", ""));
+      elem.click();
 
       styleObj = helper.getStyleStore(browser);
       assert.deepEqual(styleObj.layers, [
@@ -147,11 +151,13 @@ describe("layers", function() {
         // Setup
         var id = uuid();
 
-        browser.selectByValue(wd.$("add-layer.layer-type", "select"), "background");
+        const selectBox = $(wd.$("add-layer.layer-type", "select"));
+        selectBox.selectByAttribute('value', "background");
         browser.flushReactUpdates();
         browser.setValueSafe(wd.$("add-layer.layer-id", "input"), "background:"+id);
 
-        browser.click(wd.$("add-layer"));
+        const elem = $(wd.$("add-layer"));
+        elem.click();
 
         var styleObj = helper.getStyleStore(browser);
         assert.deepEqual(styleObj.layers, [
@@ -169,11 +175,13 @@ describe("layers", function() {
         it("id", function() {
           var bgId = createBackground();
 
-          browser.click(wd.$("layer-list-item:background:"+bgId))
+          const elem = $(wd.$("layer-list-item:background:"+bgId));
+          elem.click();
 
           var id = uuid();
           browser.setValueSafe(wd.$("layer-editor.layer-id", "input"), "foobar:"+id)
-          browser.click(wd.$("min-zoom"))
+          const elem2 = $(wd.$("min-zoom"));
+          elem2.click();
 
           var styleObj = helper.getStyleStore(browser);
           assert.deepEqual(styleObj.layers, [
@@ -190,9 +198,11 @@ describe("layers", function() {
         it("min-zoom", function() {
           var bgId = createBackground();
 
-          browser.click(wd.$("layer-list-item:background:"+bgId))
+          const elem = $(wd.$("layer-list-item:background:"+bgId));
-          browser.setValueSafe(wd.$("min-zoom", 'input[type="text"]'), 1)
+          elem.click();
-          browser.click(wd.$("layer-editor.layer-id", "input"));
+          browser.setValueSafe(wd.$("min-zoom", "input"), 1)
+          const elem2 = $(wd.$("layer-editor.layer-id", "input"));
+          elem2.click();
 
           var styleObj = helper.getStyleStore(browser);
           assert.deepEqual(styleObj.layers, [
@@ -220,9 +230,11 @@ describe("layers", function() {
         it("max-zoom", function() {
           var bgId = createBackground();
 
-          browser.click(wd.$("layer-list-item:background:"+bgId))
+          const elem = $(wd.$("layer-list-item:background:"+bgId));
-          browser.setValueSafe(wd.$("max-zoom", 'input[type="text"]'), 1)
+          elem.click();
-          browser.click(wd.$("layer-editor.layer-id", "input"));
+          browser.setValueSafe(wd.$("max-zoom", "input"), 1)
+          const elem2 = $(wd.$("layer-editor.layer-id", "input"));
+          elem2.click();
 
           var styleObj = helper.getStyleStore(browser);
           assert.deepEqual(styleObj.layers, [
@@ -238,9 +250,11 @@ describe("layers", function() {
           var bgId = createBackground();
           var id = uuid();
 
-          browser.click(wd.$("layer-list-item:background:"+bgId));
+          const elem = $(wd.$("layer-list-item:background:"+bgId));
+          elem.click();
           browser.setValueSafe(wd.$("layer-comment", "textarea"), id);
-          browser.click(wd.$("layer-editor.layer-id", "input"));
+          const elem2 = $(wd.$("layer-editor.layer-id", "input"));
+          elem2.click();
 
           var styleObj = helper.getStyleStore(browser);
           assert.deepEqual(styleObj.layers, [
@@ -484,4 +498,3 @@ describe("layers", function() {
     })
   })
 });
-

test/functional/modals/index.js

@@ -7,14 +7,16 @@ var helper = require("../helper");
 
 function closeModal(wdKey) {
   browser.waitUntil(function() {
-    return browser.isVisibleWithinViewport(wd.$(wdKey));
+    const elem = $(wdKey);
+    return elem.isDisplayedInViewport();
   });
 
-  var closeBtnSelector = wd.$(wdKey+".close-modal");
+  const closeBtnSelector = $(wd.$(wdKey+".close-modal"));
-  browser.click(closeBtnSelector);
+  closeBtnSelector.click();
 
   browser.waitUntil(function() {
-    return !browser.isVisibleWithinViewport(wd.$(wdKey));
+    const elem = $(wdKey);
+    return !elem.isDisplayed();
   });
 }
 
@@ -26,10 +28,12 @@ describe("modals", function() {
     beforeEach(function() {
       browser.url(config.baseUrl+"?debug");
 
-      browser.waitForExist(".maputnik-toolbar-link");
+      const elem = $(".maputnik-toolbar-link");
+      elem.waitForExist();
       browser.flushReactUpdates();
 
-      browser.click(wd.$("nav:open"))
+      const elem2 = $(wd.$("nav:open"));
+      elem2.click();
       browser.flushReactUpdates();
     });
 
@@ -37,8 +41,10 @@ describe("modals", function() {
       closeModal("open-modal");
     });
 
-    it("upload", function() {
+    // "chooseFile" command currently not available for wdio v5 https://github.com/webdriverio/webdriverio/pull/3632
-      browser.waitForExist("*[type='file']")
+    it.skip("upload", function() {
+      const elem = $("*[type='file']");
+      elem.waitForExist();
       browser.chooseFile("*[type='file']", styleFilePath);
 
       var styleObj = helper.getStyleStore(browser);
@@ -50,8 +56,8 @@ describe("modals", function() {
 
       browser.setValueSafe(wd.$("open-modal.url.input"), styleFileUrl);
 
-      var selector = wd.$("open-modal.url.button");
+      const selector = $(wd.$("open-modal.url.button"));
-      browser.click(selector);
+      selector.click();
 
       // Allow the network request to happen
       // NOTE: Its localhost so this should be fast.
@@ -70,10 +76,12 @@ describe("modals", function() {
     beforeEach(function() {
       browser.url(config.baseUrl+"?debug");
 
-      browser.waitForExist(".maputnik-toolbar-link");
+      const elem = $(".maputnik-toolbar-link");
+      elem.waitForExist();
       browser.flushReactUpdates();
 
-      browser.click(wd.$("nav:export"))
+      const elem2 = $(wd.$("nav:export"));
+      elem2.click();
       browser.flushReactUpdates();
     });
 
@@ -99,9 +107,10 @@ describe("modals", function() {
       browser.url(config.baseUrl+"?debug&style="+helper.getStyleUrl([
         "geojson:example"
       ]));
-      browser.alertAccept();
+      browser.acceptAlert();
 
-      browser.selectByValue(wd.$("nav:inspect", "select"), "inspect");
+      const selectBox = $(wd.$("nav:inspect", "select"));
+      selectBox.selectByAttribute('value', "inspect");
     })
   })
 
@@ -109,16 +118,19 @@ describe("modals", function() {
     beforeEach(function() {
       browser.url(config.baseUrl+"?debug");
 
-      browser.waitForExist(".maputnik-toolbar-link");
+      const elem = $(".maputnik-toolbar-link");
+      elem.waitForExist();
       browser.flushReactUpdates();
 
-      browser.click(wd.$("nav:settings"))
+      const elem2 = $(wd.$("nav:settings"));
+      elem2.click();
       browser.flushReactUpdates();
     });
 
     it("name", function() {
       browser.setValueSafe(wd.$("modal-settings.name"), "foobar")
-      browser.click(wd.$("modal-settings.owner"))
+      const elem = $(wd.$("modal-settings.owner"));
+      elem.click();
       browser.flushReactUpdates();
 
       var styleObj = helper.getStyleStore(browser);
@@ -126,7 +138,8 @@ describe("modals", function() {
     })
     it("owner", function() {
       browser.setValueSafe(wd.$("modal-settings.owner"), "foobar")
-      browser.click(wd.$("modal-settings.name"))
+      const elem = $(wd.$("modal-settings.name"));
+      elem.click();
       browser.flushReactUpdates();
 
       var styleObj = helper.getStyleStore(browser);
@@ -134,7 +147,8 @@ describe("modals", function() {
     })
     it("sprite url", function() {
       browser.setValueSafe(wd.$("modal-settings.sprite"), "http://example.com")
-      browser.click(wd.$("modal-settings.name"))
+      const elem = $(wd.$("modal-settings.name"));
+      elem.click();
       browser.flushReactUpdates();
 
       var styleObj = helper.getStyleStore(browser);
@@ -143,7 +157,8 @@ describe("modals", function() {
     it("glyphs url", function() {
       var glyphsUrl = "http://example.com/{fontstack}/{range}.pbf"
       browser.setValueSafe(wd.$("modal-settings.glyphs"), glyphsUrl)
-      browser.click(wd.$("modal-settings.name"))
+      const elem = $(wd.$("modal-settings.name"));
+      elem.click();
       browser.flushReactUpdates();
 
       var styleObj = helper.getStyleStore(browser);
@@ -153,7 +168,8 @@ describe("modals", function() {
     it("mapbox access token", function() {
       var apiKey = "testing123";
       browser.setValueSafe(wd.$("modal-settings.maputnik:mapbox_access_token"), apiKey);
-      browser.click(wd.$("modal-settings.name"))
+      const elem = $(wd.$("modal-settings.name"));
+      elem.click();
       browser.flushReactUpdates();
 
       var styleObj = helper.getStyleStore(browser);
@@ -165,7 +181,8 @@ describe("modals", function() {
     it("maptiler access token", function() {
       var apiKey = "testing123";
       browser.setValueSafe(wd.$("modal-settings.maputnik:openmaptiles_access_token"), apiKey);
-      browser.click(wd.$("modal-settings.name"))
+      const elem = $(wd.$("modal-settings.name"));
+      elem.click();
       browser.flushReactUpdates();
 
       var styleObj = helper.getStyleStore(browser);
@@ -175,7 +192,8 @@ describe("modals", function() {
     it("thunderforest access token", function() {
       var apiKey = "testing123";
       browser.setValueSafe(wd.$("modal-settings.maputnik:thunderforest_access_token"), apiKey);
-      browser.click(wd.$("modal-settings.name"))
+      const elem = $(wd.$("modal-settings.name"));
+      elem.click();
       browser.flushReactUpdates();
 
       var styleObj = helper.getStyleStore(browser);
@@ -183,9 +201,10 @@ describe("modals", function() {
     })
 
     it("style renderer", function() {
-      var selector = wd.$("modal-settings.maputnik:renderer");
+      const selector = $(wd.$("modal-settings.maputnik:renderer"));
-      browser.selectByValue(selector, "ol");
+      selector.selectByAttribute('value', "ol");
-      browser.click(wd.$("modal-settings.name"))
+      const elem = $(wd.$("modal-settings.name"));
+      elem.click();
       browser.flushReactUpdates();
 
       var styleObj = helper.getStyleStore(browser);

test/functional/screenshots/index.js

@@ -8,18 +8,16 @@ var wd        = require("../../wd-helper");
 describe('screenshots', function() {
 
   beforeEach(function() {
-    browser.windowHandleSize({
+    browser.setWindowSize(1280, 800)
-      width: 1280,
-      height: 800
-    });
   })
 
   it("front_page", function() {
     browser.url(config.baseUrl+"?debug&style="+helper.getStyleUrl([
       "geojson:example"
     ]));
-    browser.alertAccept();
+    browser.acceptAlert();
-    browser.waitForExist(".maputnik-toolbar-link");
+    const elem = $(".maputnik-toolbar-link");
+    elem.waitForExist();  
     browser.flushReactUpdates();
 
     browser.takeScreenShot("/front_page.png")
@@ -29,11 +27,13 @@ describe('screenshots', function() {
     browser.url(config.baseUrl+"?debug&style="+helper.getStyleUrl([
       "geojson:example"
     ]));
-    browser.alertAccept();
+    browser.acceptAlert();
-    browser.waitForExist(".maputnik-toolbar-link");
+    const elem = $(".maputnik-toolbar-link");
+    elem.waitForExist();  
     browser.flushReactUpdates();
 
-    browser.click(wd.$("nav:open"))
+    const nav_open = $(wd.$("nav:open"));
+    nav_open.waitForExist(); 
     browser.flushReactUpdates();
 
     browser.takeScreenShot("/open.png")
@@ -43,11 +43,13 @@ describe('screenshots', function() {
     browser.url(config.baseUrl+"?debug&style="+helper.getStyleUrl([
       "geojson:example"
     ]));
-    browser.alertAccept();
+    browser.acceptAlert();
-    browser.waitForExist(".maputnik-toolbar-link");
+    const elem = $(".maputnik-toolbar-link")
+    elem.waitForExist()  
     browser.flushReactUpdates();
 
-    browser.click(wd.$("nav:export"))
+    const nav_export = $(wd.$("nav:export"));
+    nav_export.waitForExist(); 
     browser.flushReactUpdates();
 
     browser.takeScreenShot("/export.png")
@@ -57,11 +59,13 @@ describe('screenshots', function() {
     browser.url(config.baseUrl+"?debug&style="+helper.getStyleUrl([
       "geojson:example"
     ]));
-    browser.alertAccept();
+    browser.acceptAlert();
-    browser.waitForExist(".maputnik-toolbar-link");
+    const elem = $(".maputnik-toolbar-link")
+    elem.waitForExist()  
     browser.flushReactUpdates();
 
-    browser.click(wd.$("nav:sources"))
+    const nav_sources = $(wd.$("nav:sources"));
+    nav_sources.waitForExist(); 
     browser.flushReactUpdates();
 
     browser.takeScreenShot("/sources.png")
@@ -71,11 +75,13 @@ describe('screenshots', function() {
     browser.url(config.baseUrl+"?debug&style="+helper.getStyleUrl([
       "geojson:example"
     ]));
-    browser.alertAccept();
+    browser.acceptAlert();
-    browser.waitForExist(".maputnik-toolbar-link");
+    const elem = $(".maputnik-toolbar-link")
+    elem.waitForExist()  
     browser.flushReactUpdates();
 
-    browser.click(wd.$("nav:settings"))
+    const nav_settings = $(wd.$("nav:settings"));
+    nav_settings.waitForExist(); 
     browser.flushReactUpdates();
 
     browser.takeScreenShot("/settings.png")
@@ -85,11 +91,14 @@ describe('screenshots', function() {
     browser.url(config.baseUrl+"?debug&style="+helper.getStyleUrl([
       "geojson:example"
     ]));
-    browser.alertAccept();
+    browser.acceptAlert();
-    browser.waitForExist(".maputnik-toolbar-link");
+    const elem = $(".maputnik-toolbar-link")
+    elem.waitForExist()  
     browser.flushReactUpdates();
 
-    browser.selectByValue(wd.$("nav:inspect", "select"), "inspect");
+    const selectBox = $(wd.$("nav:inspect", "select"));
+    selectBox.selectByAttribute('value', 'inspect');
+
     browser.flushReactUpdates();
 
     browser.takeScreenShot("/inspect.png")

test/functional/util/webdriverio-ext.js

@@ -3,8 +3,8 @@ var fs        = require("fs");
 var path      = require("path");
 
 
-browser.timeoutsAsyncScript(20*1000);
+browser.setTimeout({ 'script': 20*1000 });
-browser.timeoutsImplicitWait(20*1000);
+browser.setTimeout({ 'implicit': 20*1000 });
 
 var SCREENSHOTS_PATH = artifacts.pathSync("/screenshots");
 
@@ -16,15 +16,18 @@ var SCREENSHOTS_PATH = artifacts.pathSync("/screenshots");
 try {
   browser.addCommand('setValueSafe', function(selector, text) {
     for(var i=0; i<10; i++) {
-      browser.waitForVisible(selector);
+      const elem = $(selector);
+      elem.waitForDisplayed(500);
 
-      var elements = browser.elements(selector);
+      var elements = browser.findElements("css selector", selector);
       if(elements.length > 1) {
         throw "Too many elements found";
       }
 
-      browser.setValue(selector, text);
+      const elem2 = $(selector);
-      var browserText = browser.getValue(selector);
+      elem2.setValue(text);
+
+      var browserText = elem2.getValue();
 
       if(browserText == text) {
         return;
@@ -39,7 +42,7 @@ try {
   })
 
   browser.addCommand('takeScreenShot', function(filepath) {
-    var data = browser.screenshot();
+    var data = browser.takeScreenshot();
     fs.writeFileSync(path.join(SCREENSHOTS_PATH, filepath), data.value, 'base64');
   });