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

Convert from Mapbox GL to MapLibre

.babelrc

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

.github/workflows/ci.yml

@@ -48,7 +48,7 @@ jobs:
       fail-fast: false
       matrix:
         os: [ubuntu-latest, windows-latest, macos-latest]
-        node-version: [12.x, 14.x, 16.x]
+        node-version: [16.x]
 
     steps:
     - uses: actions/checkout@v2
@@ -68,17 +68,13 @@ jobs:
   build-artifacts:
     name: "build/artifacts (${{ matrix.os }})"
     runs-on: ${{ matrix.os }}
-    env:
-      GOPATH: ${{ github.workspace }}
-      GO111MODULE: off
-
     if: ${{ github.event_name == 'push' || github.event_name == 'pull_request' }}
 
     strategy:
       fail-fast: false
       matrix:
         os: [ubuntu-latest]
-        node-version: [10.x]
+        node-version: [16.x]
 
     steps:
     - uses: actions/checkout@v2
@@ -113,16 +109,16 @@ jobs:
 
     # Build and upload desktop CLI artifacts
     - name: Set up Go
-      uses: actions/setup-go@v2
+      uses: actions/setup-go@v3
       with:
-        go-version: ^1.14.x
+        go-version: ^1.19.x
       id: go
 
     - name: Check out code into the Go module directory
       uses: actions/checkout@v2
       with:
         repository: maputnik/desktop
-        ref: v1.0.7
+        ref: master
         path: ./src/github.com/maputnik/desktop/
 
     - name: Make
@@ -166,11 +162,11 @@ jobs:
 
     services:
       selenium:
-        image: selenium/standalone-${{ matrix.browser }}
+        # geckodriver-0.31 seems to have problems as of 2022 May 1
+        image: selenium/standalone-${{ matrix.browser == 'firefox' && 'firefox:99.0-geckodriver-0.30-20220427' || matrix.browser }}
         ports:
         - 4444:4444
-        volumes: # share shm with host: https://stackoverflow.com/questions/53902507/unknown-error-session-deleted-because-of-page-crash-from-unknown-error-cannot
+        options: --shm-size=2gb
-        - /dev/shm:/dev/shm
 
     steps:
     - uses: actions/checkout@v2

README.md

@@ -46,14 +46,14 @@ Install the deps, start the dev server and open the web browser on `http://local
 # install dependencies
 npm install
 # start dev server
-npm start
+npm run start
 ```
 
 If you want Maputnik to be accessible externally use the [`--host` option](https://webpack.js.org/configuration/dev-server/#devserverhost):
 
 ```bash
 # start externally accessible dev server
-npm start -- --host 0.0.0.0
+npm run start -- --host 0.0.0.0
 ```
 
 The build process will watch for changes to the filesystem, rebuild and autoreload the editor. However note this from the [webpack-dev-server docs](https://webpack.js.org/configuration/dev-server/):
@@ -76,26 +76,18 @@ npm run lint-styles
 
 
 ## Tests
-For testing we use [webdriverio](http://webdriver.io) and [selenium-standalone](https://github.com/vvo/selenium-standalone)
+For testing we use [webdriverio](https://webdriver.io) and [selenium-standalone](https://github.com/webdriverio/selenium-standalone).
 
-[selenium-standalone](https://github.com/vvo/selenium-standalone) starts a server that will launch browsers on your local machine. We use chrome so you **must** have chrome installed on your machine.
+[selenium-standalone](https://github.com/webdriverio/selenium-standalone) starts a server that will launch browsers on your local machine. You need to have Java installed on your machine as well as *chrome* or *firefox*.
 
-Now open a terminal and run the following. This will install the drivers on your local machine
+Now open a terminal and run the following using *chrome*:
 
 ```
-./node_modules/.bin/selenium-standalone install
+npm run test
 ```
-
+or *firefox*:
-Now start the standalone server
-
 ```
-./node_modules/.bin/selenium-standalone start
+BROWSER=firefox npm run test
-```
-
-Then open another terminal and run
-
-```
-npm test
 ```
 
 After some time you should see a browser launch which will be automated by the test runner.

config/wdio.conf.js

@@ -3,7 +3,6 @@ var WebpackDevServer = require("webpack-dev-server");
 var webpackConfig    = require("./webpack.config");
 var testConfig       = require("../test/config/specs");
 var artifacts        = require("../test/artifacts");
-var isDocker         = require("is-docker");
 
 
 var server;
@@ -22,6 +21,8 @@ exports.config = {
       browserName: (process.env.BROWSER || 'chrome'),
     }
   ],
+  // geckodriver-0.31 seems to have problems as of 2022 May 1
+  services: process.env.DOCKER_HOST ? [] : [ ['selenium-standalone', { drivers: { firefox: '0.30.0', chrome: 'latest' } } ] ],
   logLevel: 'info',
   bail: 0,
   screenshotPath: SCREENSHOT_PATH,
@@ -33,39 +34,14 @@ exports.config = {
     // Because we don't know how long the initial build will take...
     timeout: 4*60*1000,
   },
-  onPrepare: function (config, capabilities) {
+  onPrepare: async function (config, capabilities) {
-    return new Promise(function(resolve, reject) {
+    webpackConfig.devServer.host = testConfig.testNetwork;
-      var compiler = webpack(webpackConfig);
+    webpackConfig.devServer.port = testConfig.port;
-      const serverHost = "0.0.0.0";
+    const compiler = webpack(webpackConfig);
-
+    server = new WebpackDevServer(webpackConfig.devServer, compiler);
-      server = new WebpackDevServer(compiler, {
+    await server.start();
-        host: serverHost,
-        disableHostCheck: true,
-        stats: {
-          colors: true
-        }
-      });
-
-      server.listen(testConfig.port, serverHost, function(err) {
-        if(err) {
-          reject(err);
-        }
-        else {
-          resolve();
-        }
-      });
-    })
   },
-  onComplete: function(exitCode) {
+  onComplete: async function (exitCode, config, capabilities) {
-    return new Promise(function(resolve, reject) {
+    await server.stop();
-      server.close(function (err) {
-        if (err) {
-          reject(err)
-        }
-        else {
-          resolve();
-        }
-      })
-    });
   }
 }

config/webpack.config.js

@@ -1,5 +1,4 @@
 "use strict";
-var webpack = require('webpack');
 var path = require('path');
 var rules = require('./webpack.rules');
 var HtmlWebpackPlugin = require('html-webpack-plugin');
@@ -37,27 +36,25 @@ module.exports = {
     tls: 'empty'
   },
   devServer: {
-    contentBase: "./public",
-    // See <https://webpack.js.org/configuration/stats/> for details
-    stats: 'minimal',
     // enable HMR
     hot: true,
-    // embed the webpack-dev-server runtime into the bundle
-    inline: true,
     // serve index.html in place of 404 responses to allow HTML5 history
     historyApiFallback: true,
     port: PORT,
     host: HOST,
-    watchOptions: {
+    watchFiles: {
-      // Disabled polling by default as it causes lots of CPU usage and hence drains laptop batteries. To enable polling add WEBPACK_DEV_SERVER_POLLING to your environment
+      options: {
-      // See <https://webpack.js.org/configuration/watch/#watchoptions-poll> for details
+        // Disabled polling by default as it causes lots of CPU usage and hence drains laptop batteries. To enable polling add WEBPACK_DEV_SERVER_POLLING to your environment
-      poll: (!!process.env.WEBPACK_DEV_SERVER_POLLING ? true : false),
+        // See <https://webpack.js.org/configuration/watch/#watchoptions-poll> for details
-      watch: false
+        usePolling: (!!process.env.WEBPACK_DEV_SERVER_POLLING ? true : false),
-    },
+        watch: false
+      }
+    }
+  },
+  optimization: {
+    noEmitOnErrors: true,
   },
   plugins: [
-    new webpack.NoEmitOnErrorsPlugin(),
-    new webpack.HotModuleReplacementPlugin(),
     new HtmlWebpackPlugin({
       title: 'Maputnik',
       template: './src/template.html'
@@ -65,11 +62,13 @@ module.exports = {
     new HtmlWebpackInlineSVGPlugin({
       runPreEmit: true,
     }),
-    new CopyWebpackPlugin([
+    new CopyWebpackPlugin({
-      {
+      patterns: [
-        from: './src/manifest.json',
+        {
-        to: 'manifest.json'
+          from: './src/manifest.json',
-      }
+          to: 'manifest.json'
-    ])
+        }
+      ]
+    })
   ]
 };

config/webpack.production.config.js

@@ -48,12 +48,14 @@ module.exports = {
     new HtmlWebpackInlineSVGPlugin({
       runPreEmit: true,
     }),
-    new CopyWebpackPlugin([
+    new CopyWebpackPlugin({
-      {
+      patterns: [
-        from: './src/manifest.json',
+        {
-        to: 'manifest.json'
+          from: './src/manifest.json',
-    }
+          to: 'manifest.json'
-  ]),
+        }
+      ]
+    }),
     new BundleAnalyzerPlugin({
       analyzerMode: 'static',
       defaultSizes: 'gzip',

package.json

@@ -1,17 +1,17 @@
 {
   "name": "maputnik",
-  "version": "1.7.0",
+  "version": "2.0.0-pre.1",
-  "description": "A MapboxGL visual style editor",
+  "description": "A MapLibre GL visual style editor",
   "main": "''",
   "scripts": {
-    "stats": "webpack --config config/webpack.production.config.js --profile --json > stats.json",
+    "stats": "webpack --config config/webpack.production.config.js --progress=profile --json > stats.json",
-    "build": "webpack --config config/webpack.production.config.js --progress --profile --colors",
+    "build": "webpack --config config/webpack.production.config.js --progress=profile --color",
-    "profiling-build": "webpack --config config/webpack.profiling.config.js --progress --profile --colors",
+    "profiling-build": "webpack --config config/webpack.profiling.config.js --progress=profile --color",
     "test": "cross-env NODE_ENV=test wdio config/wdio.conf.js",
     "test-watch": "cross-env NODE_ENV=test wdio config/wdio.conf.js --watch",
-    "start": "webpack-dev-server --progress --profile --colors --config config/webpack.config.js",
+    "start": "webpack-dev-server --progress=profile --color --config config/webpack.config.js",
-    "start-prod": "webpack-dev-server --progress --profile --colors --config config/webpack.production.config.js",
+    "start-prod": "webpack-dev-server --progress=profile --color --config config/webpack.production.config.js",
-    "start-sandbox": "webpack-dev-server --disable-host-check --host 0.0.0.0 --progress --profile --colors --config config/webpack.production.config.js",
+    "start-sandbox": "webpack-dev-server --disable-host-check --host 0.0.0.0 --progress=profile --color --config config/webpack.production.config.js",
     "lint-js": "eslint --ext js --ext jsx src test",
     "lint-css": "stylelint \"src/styles/*.scss\"",
     "lint": "npm run lint-js && npm run lint-css",
@@ -26,49 +26,49 @@
   "license": "MIT",
   "homepage": "https://github.com/maputnik/editor#readme",
   "dependencies": {
-    "@babel/runtime": "^7.8.4",
+    "@babel/runtime": "^7.17.9",
     "@mapbox/mapbox-gl-rtl-text": "^0.2.3",
-    "@mapbox/mapbox-gl-style-spec": "^13.15.0",
+    "@maplibre/maplibre-gl-style-spec": "^17.0.1",
-    "@mdi/react": "^1.4.0",
+    "@mdi/react": "^1.5.0",
-    "array-move": "^2.2.1",
+    "array-move": "^4.0.0",
-    "caniuse-lite": "^1.0.30001325",
+    "buffer": "^6.0.3",
-    "classnames": "^2.2.6",
+    "classnames": "^2.3.1",
-    "codemirror": "^5.52.0",
+    "codemirror": "^5.65.2",
-    "color": "^3.1.2",
+    "color": "^4.2.3",
-    "detect-browser": "^5.0.0",
+    "detect-browser": "^5.3.0",
-    "file-saver": "^2.0.2",
+    "file-saver": "^2.0.5",
+    "json-stringify-pretty-compact": "^3.0.0",
     "json-to-ast": "^2.1.0",
     "jsonlint": "github:josdejong/jsonlint#85a19d7",
-    "lodash": "^4.17.15",
+    "lodash": "^4.17.21",
     "lodash.capitalize": "^4.2.1",
     "lodash.clamp": "^4.0.3",
     "lodash.clonedeep": "^4.5.0",
     "lodash.get": "^4.4.2",
     "lodash.isequal": "^4.5.0",
     "lodash.throttle": "^4.1.1",
-    "mapbox-gl": "^1.11.0",
     "mapbox-gl-inspect": "^1.3.1",
+    "maplibre-gl": "^2.4.0",
     "maputnik-design": "github:maputnik/design#172b06c",
-    "ol": "^6.3.1",
+    "ol": "^6.14.1",
-    "ol-mapbox-style": "^6.0.1",
+    "ol-mapbox-style": "^7.1.1",
-    "prop-types": "^15.7.2",
+    "prop-types": "^15.8.1",
-    "react": "^16.12.0",
+    "react": "^16.0.0",
-    "react-accessible-accordion": "^3.0.1",
+    "react-accessible-accordion": "^4.0.0",
-    "react-aria-menubutton": "^6.3.0",
+    "react-aria-menubutton": "^7.0.3",
-    "react-aria-modal": "^4.0.0",
+    "react-aria-modal": "^4.0.1",
     "react-autobind": "^1.0.6",
     "react-autocomplete": "^1.8.1",
-    "react-collapse": "^5.0.1",
+    "react-collapse": "^5.1.1",
-    "react-color": "^2.18.0",
+    "react-color": "^2.19.3",
-    "react-dom": "^16.12.0",
+    "react-dom": "^16.0.0",
     "react-file-reader-input": "^2.0.0",
     "react-icon-base": "^2.1.2",
-    "react-icons": "^3.9.0",
+    "react-icons": "^4.3.1",
-    "react-motion": "^0.5.2",
+    "react-sortable-hoc": "^2.0.0",
-    "react-sortable-hoc": "^1.11.0",
     "reconnecting-websocket": "^4.4.0",
-    "sass": "^1.49.9",
+    "sass": "^1.50.0",
-    "slugify": "^1.4.5",
+    "slugify": "^1.6.5",
     "string-hash": "^1.1.3",
     "url": "^0.11.0"
   },
@@ -101,7 +101,7 @@
       "node": true,
       "es6": true
     },
-    "parser": "babel-eslint",
+    "parser": "@babel/eslint-parser",
     "parserOptions": {
       "ecmaVersion": 6,
       "sourceType": "module",
@@ -118,59 +118,58 @@
     }
   },
   "devDependencies": {
-    "@babel/core": "^7.8.4",
+    "@babel/core": "^7.17.9",
-    "@babel/plugin-proposal-class-properties": "^7.5.5",
+    "@babel/eslint-parser": "^7.19.1",
-    "@babel/plugin-transform-runtime": "^7.6.2",
+    "@babel/plugin-proposal-class-properties": "^7.16.7",
-    "@babel/preset-env": "^7.6.3",
+    "@babel/plugin-transform-runtime": "^7.17.0",
-    "@babel/preset-flow": "^7.0.0",
+    "@babel/preset-env": "^7.16.11",
-    "@babel/preset-react": "^7.6.3",
+    "@babel/preset-flow": "^7.16.7",
-    "@mdi/js": "^5.0.45",
+    "@babel/preset-react": "^7.16.7",
-    "@storybook/addon-a11y": "^5.3.19",
+    "@mdi/js": "^6.6.96",
-    "@storybook/addon-actions": "^5.3.19",
+    "@storybook/addon-a11y": "^6.4.20",
-    "@storybook/addon-links": "^5.3.19",
+    "@storybook/addon-actions": "^6.4.20",
-    "@storybook/addon-storysource": "^5.3.19",
+    "@storybook/addon-links": "^6.4.20",
-    "@storybook/addons": "^5.3.19",
+    "@storybook/addon-storysource": "^6.4.20",
-    "@storybook/react": "^5.3.19",
+    "@storybook/addons": "^6.4.20",
-    "@storybook/theming": "^5.3.19",
+    "@storybook/react": "^6.4.20",
-    "@wdio/cli": "^6.1.14",
+    "@storybook/theming": "^6.4.20",
-    "@wdio/local-runner": "^6.1.14",
+    "@wdio/cli": "^7.19.3",
-    "@wdio/mocha-framework": "^6.1.14",
+    "@wdio/local-runner": "^7.19.3",
-    "@wdio/selenium-standalone-service": "^6.1.14",
+    "@wdio/mocha-framework": "^7.19.3",
-    "@wdio/spec-reporter": "^6.1.14",
+    "@wdio/selenium-standalone-service": "^7.19.1",
-    "babel-eslint": "^10.0.3",
+    "@wdio/spec-reporter": "^7.19.1",
-    "babel-loader": "^8.1.0",
+    "babel-loader": "^8.2.4",
-    "babel-plugin-istanbul": "^6.0.0",
+    "babel-plugin-istanbul": "^6.1.1",
     "babel-plugin-static-fs": "^3.0.0",
-    "copy-webpack-plugin": "^5.1.1",
+    "copy-webpack-plugin": "^6.4.1",
     "cors": "^2.8.5",
-    "cross-env": "^7.0.2",
+    "cross-env": "^7.0.3",
-    "css-loader": "^3.4.2",
+    "css-loader": "^5.2.7",
-    "eslint": "^6.8.0",
+    "eslint": "^8.12.0",
-    "eslint-plugin-react": "^7.18.3",
+    "eslint-plugin-react": "^7.29.4",
-    "express": "^4.17.1",
+    "express": "^4.17.3",
-    "file-loader": "^6.0.0",
+    "html-webpack-inline-svg-plugin": "^2.3.0",
-    "html-webpack-inline-svg-plugin": "^1.3.0",
+    "html-webpack-plugin": "^4.5.2",
-    "html-webpack-plugin": "^3.2.0",
-    "is-docker": "^2.0.0",
     "istanbul": "^0.4.5",
-    "istanbul-lib-coverage": "^3.0.0",
+    "istanbul-lib-coverage": "^3.2.0",
     "mkdirp": "^1.0.4",
-    "mocha": "^7.1.2",
+    "mocha": "^9.2.2",
-    "react-hot-loader": "^4.12.19",
+    "postcss": "^8.4.12",
-    "sass-loader": "^8.0.2",
+    "react-hot-loader": "^4.13.0",
-    "selenium-standalone": "^6.17.0",
+    "sass-loader": "^10.2.1",
-    "style-loader": "^1.1.3",
+    "style-loader": "^2.0.0",
-    "stylelint": "^13.3.0",
+    "stylelint": "^14.6.1",
-    "stylelint-config-recommended-scss": "^4.2.0",
+    "stylelint-config-recommended-scss": "^6.0.0",
-    "stylelint-scss": "^3.14.2",
+    "stylelint-scss": "^4.2.0",
     "svg-inline-loader": "^0.8.2",
     "transform-loader": "^0.2.4",
-    "uuid": "^7.0.3",
+    "typescript": "^4.6.3",
-    "webdriverio": "^6.1.11",
+    "uuid": "^8.3.2",
-    "webpack": "^4.41.6",
+    "webdriverio": "^7.19.3",
-    "webpack-bundle-analyzer": "^3.6.0",
+    "webpack": "^4.46.0",
+    "webpack-bundle-analyzer": "^4.5.0",
     "webpack-cleanup-plugin": "^0.5.1",
-    "webpack-cli": "^3.3.11",
+    "webpack-cli": "^4.9.2",
-    "webpack-dev-server": "^3.10.3"
+    "webpack-dev-server": "^4.8.1"
   }
 }

src/components/App.jsx

@@ -2,9 +2,10 @@ import autoBind from 'react-autobind';
 import React from 'react'
 import cloneDeep from 'lodash.clonedeep'
 import clamp from 'lodash.clamp'
+import buffer from 'buffer'
 import get from 'lodash.get'
 import {unset} from 'lodash'
-import arrayMove from 'array-move'
+import {arrayMoveMutable} from 'array-move'
 import url from 'url'
 import hash from "string-hash";
 
@@ -25,7 +26,7 @@ import ModalSurvey from './ModalSurvey'
 import ModalDebug from './ModalDebug'
 
 import { downloadGlyphsMetadata, downloadSpriteMetadata } from '../libs/metadata'
-import {latest, validate} from '@mapbox/mapbox-gl-style-spec'
+import {latest, validate} from '@maplibre/maplibre-gl-style-spec'
 import style from '../libs/style'
 import { initialStyleUrl, loadStyleUrl, removeStyleQuerystring } from '../libs/urlopen'
 import { undoMessages, redoMessages } from '../libs/diffmessage'
@@ -36,23 +37,10 @@ import LayerWatcher from '../libs/layerwatcher'
 import tokens from '../config/tokens.json'
 import isEqual from 'lodash.isequal'
 import Debug from '../libs/debug'
-import queryUtil from '../libs/query-util'
 import {formatLayerId} from '../util/format';
 
-import MapboxGl from 'mapbox-gl'
+// Buffer must be defined globally for @maplibre/maplibre-gl-style-spec validate() function to succeed.
-
+window.Buffer = buffer.Buffer;
-
-// Similar functionality as <https://github.com/mapbox/mapbox-gl-js/blob/7e30aadf5177486c2cfa14fe1790c60e217b5e56/src/util/mapbox.js>
-function normalizeSourceURL (url, apiToken="") {
-  const matches = url.match(/^mapbox:\/\/(.*)/);
-  if (matches) {
-    // mapbox://mapbox.mapbox-streets-v7
-    return `https://api.mapbox.com/v4/${matches[1]}.json?secure&access_token=${apiToken}`
-  }
-  else {
-    return url;
-  }
-}
 
 function setFetchAccessToken(url, mapStyle) {
   const matchesTilehosting = url.match(/\.tilehosting\.com/);
@@ -486,7 +474,7 @@ export default class App extends React.Component {
     }
 
     layers = layers.slice(0);
-    layers = arrayMove(layers, oldIndex, newIndex);
+    arrayMoveMutable(layers, oldIndex, newIndex);
     this.onLayersChange(layers);
   }
 
@@ -588,11 +576,6 @@ export default class App extends React.Component {
         };
 
         let url = val.url;
-        try {
-          url = normalizeSourceURL(url, MapboxGl.accessToken);
-        } catch(err) {
-          console.warn("Failed to normalizeSourceURL: ", err);
-        }
 
         try {
           url = setFetchAccessToken(url, this.state.mapStyle)
@@ -697,7 +680,7 @@ export default class App extends React.Component {
     const elementStyle = {};
     if (filterName) {
       elementStyle.filter = `url('#${filterName}')`;
-    };
+    }
 
     return <div style={elementStyle} className="maputnik-map__container">
       {mapElement}
@@ -764,17 +747,17 @@ export default class App extends React.Component {
           parseInt(parts[1], 10),
         ];
 
-        let invalid = false;
+        let valid = true;
         if (hashVal !== "-") {
           const currentHashVal = hash(JSON.stringify(mapStyle));
           if (currentHashVal !== parseInt(hashVal, 10)) {
-            invalid = true;
+            valid = false;
           }
         }
-        if (!invalid) {
+        if (valid) {
           this.setState({
             selectedLayerIndex,
-            selectedLayerOriginalId: this.state.mapStyle.layers[selectedLayerIndex].id,
+            selectedLayerOriginalId: mapStyle.layers[selectedLayerIndex].id,
           });
         }
       }

src/components/Collapse.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import Collapse as ReactCollapse from 'react-collapse'
+import { Collapse as ReactCollapse } from 'react-collapse'
 import accessibility from '../../libs/accessibility'
 
 

src/components/FieldFunction.jsx

@@ -5,7 +5,7 @@ import SpecProperty from './_SpecProperty'
 import DataProperty from './_DataProperty'
 import ZoomProperty from './_ZoomProperty'
 import ExpressionProperty from './_ExpressionProperty'
-import {function as styleFunction} from '@mapbox/mapbox-gl-style-spec';
+import {function as styleFunction} from '@maplibre/maplibre-gl-style-spec';
 import {findDefaultFromSpec} from '../util/spec-helper';
 
 

src/components/FieldId.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import {latest} from '@mapbox/mapbox-gl-style-spec'
+import {latest} from '@maplibre/maplibre-gl-style-spec'
 import Block from './Block'
 import InputString from './InputString'
 

src/components/FieldMaxZoom.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import {latest} from '@mapbox/mapbox-gl-style-spec'
+import {latest} from '@maplibre/maplibre-gl-style-spec'
 import Block from './Block'
 import InputNumber from './InputNumber'
 

src/components/FieldMinZoom.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import {latest} from '@mapbox/mapbox-gl-style-spec'
+import {latest} from '@maplibre/maplibre-gl-style-spec'
 import Block from './Block'
 import InputNumber from './InputNumber'
 

src/components/FieldSource.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import {latest} from '@mapbox/mapbox-gl-style-spec'
+import {latest} from '@maplibre/maplibre-gl-style-spec'
 import Block from './Block'
 import InputAutocomplete from './InputAutocomplete'
 

src/components/FieldSourceLayer.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import {latest} from '@mapbox/mapbox-gl-style-spec'
+import {latest} from '@maplibre/maplibre-gl-style-spec'
 import Block from './Block'
 import InputAutocomplete from './InputAutocomplete'
 

src/components/FieldType.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import {latest} from '@mapbox/mapbox-gl-style-spec'
+import {latest} from '@maplibre/maplibre-gl-style-spec'
 import Block from './Block'
 import InputSelect from './InputSelect'
 import InputString from './InputString'

src/components/FilterEditor.jsx

@@ -4,7 +4,7 @@ import { combiningFilterOps } from '../libs/filterops.js'
 import {mdiTableRowPlusAfter} from '@mdi/js';
 import {isEqual} from 'lodash';
 
-import {latest, validate, migrate, convertFilter} from '@mapbox/mapbox-gl-style-spec'
+import {latest, migrate, convertFilter} from '@maplibre/maplibre-gl-style-spec'
 import InputSelect from './InputSelect'
 import Block from './Block'
 import SingleFilterEditor from './SingleFilterEditor'

src/components/LayerList.jsx

@@ -326,6 +326,7 @@ export default class LayerList extends React.Component {
       helperClass='sortableHelper'
       onSortEnd={this.props.onMoveLayer.bind(this)}
       useDragHandle={true}
+      shouldCancelStart={() => false}
     />
   }
 }

src/components/MapMapboxGl.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import ReactDOM from 'react-dom'
-import MapboxGl from 'mapbox-gl'
+import MapLibreGl from 'maplibre-gl'
 import MapboxInspect from 'mapbox-gl-inspect'
 import MapMapboxGlLayerPopup from './MapMapboxGlLayerPopup'
 import MapMapboxGlFeaturePropertyPopup from './MapMapboxGlFeaturePropertyPopup'
@@ -10,12 +10,12 @@ import colors from 'mapbox-gl-inspect/lib/colors'
 import Color from 'color'
 import ZoomControl from '../libs/zoomcontrol'
 import { colorHighlightedLayer } from '../libs/highlight'
-import 'mapbox-gl/dist/mapbox-gl.css'
+import 'maplibre-gl/dist/maplibre-gl.css'
 import '../mapboxgl.css'
 import '../libs/mapbox-rtl'
 
 
-const IS_SUPPORTED = MapboxGl.supported();
+const IS_SUPPORTED = MapLibreGl.supported();
 
 function renderPopup(popup, mountNode) {
   ReactDOM.render(popup, mountNode);
@@ -75,7 +75,6 @@ export default class MapMapboxGl extends React.Component {
 
   constructor(props) {
     super(props)
-    MapboxGl.accessToken = tokens.mapbox
     this.state = {
       map: null,
       inspect: null,
@@ -86,8 +85,6 @@ export default class MapMapboxGl extends React.Component {
     if(!IS_SUPPORTED) return;
 
     if(!this.state.map) return
-    const metadata = props.mapStyle.metadata || {}
-    MapboxGl.accessToken = metadata['maputnik:mapbox_access_token'] || tokens.mapbox
 
     //Mapbox GL now does diffing natively so we don't need to calculate
     //the necessary operations ourselves!
@@ -107,7 +104,7 @@ export default class MapMapboxGl extends React.Component {
     return should;
   }
 
-  componentDidUpdate(prevProps) {
+  componentDidUpdate(prevProps, prevState, snapshot) {
     if(!IS_SUPPORTED) return;
 
     const map = this.state.map;
@@ -149,7 +146,7 @@ export default class MapMapboxGl extends React.Component {
       maxZoom: 24
     }
 
-    const map = new MapboxGl.Map(mapOpts);
+    const map = new MapLibreGl.Map(mapOpts);
 
     const mapViewChange = () => {
       const center = map.getCenter();
@@ -165,13 +162,13 @@ export default class MapMapboxGl extends React.Component {
     const zoomControl = new ZoomControl;
     map.addControl(zoomControl, 'top-right');
 
-    const nav = new MapboxGl.NavigationControl({visualizePitch:true});
+    const nav = new MapLibreGl.NavigationControl({visualizePitch:true});
     map.addControl(nav, 'top-right');
 
     const tmpNode = document.createElement('div');
 
     const inspect = new MapboxInspect({
-      popup: new MapboxGl.Popup({
+      popup: new MapLibreGl.Popup({
         closeOnClick: false
       }),
       showMapPopup: true,

src/components/MapMapboxGlLayerPopup.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import IconLayer from './IconLayer'
-import {latest, expression, function as styleFunction} from '@mapbox/mapbox-gl-style-spec'
+import {latest} from '@maplibre/maplibre-gl-style-spec'
 
 function groupFeaturesBySourceLayer(features) {
   const sources = {}

src/components/ModalAdd.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import {latest} from '@mapbox/mapbox-gl-style-spec'
+import {latest} from '@maplibre/maplibre-gl-style-spec'
 import InputButton from './InputButton'
 import Modal from './Modal'
 

src/components/ModalExport.jsx

@@ -4,7 +4,7 @@ import Slugify from 'slugify'
 import { saveAs } from 'file-saver'
 import pkgLockJson from '../../package-lock.json'
 
-import {format} from '@mapbox/mapbox-gl-style-spec'
+import {format} from '@maplibre/maplibre-gl-style-spec'
 import FieldString from './FieldString'
 import FieldCheckbox from './FieldCheckbox'
 import InputButton from './InputButton'

src/components/ModalSettings.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import {latest} from '@mapbox/mapbox-gl-style-spec'
+import {latest} from '@maplibre/maplibre-gl-style-spec'
 import Block from './Block'
 import FieldArray from './FieldArray'
 import FieldNumber from './FieldNumber'

src/components/ModalSources.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import {latest} from '@mapbox/mapbox-gl-style-spec'
+import {latest} from '@maplibre/maplibre-gl-style-spec'
 import Modal from './Modal'
 import InputButton from './InputButton'
 import Block from './Block'

src/components/ModalSourcesTypeEditor.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import {latest} from '@mapbox/mapbox-gl-style-spec'
+import {latest} from '@maplibre/maplibre-gl-style-spec'
 import Block from './Block'
 import FieldUrl from './FieldUrl'
 import FieldNumber from './FieldNumber'

src/components/_DataProperty.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import {mdiFunctionVariant, mdiTableRowPlusAfter} from '@mdi/js';
-import {latest} from '@mapbox/mapbox-gl-style-spec'
+import {latest} from '@maplibre/maplibre-gl-style-spec'
 
 import InputButton from './InputButton'
 import InputSpec from './InputSpec'
@@ -276,26 +276,6 @@ export default class DataProperty extends React.Component {
             {deleteStopBtn}
           </td>
         </tr>
-
-        return <Block
-          error={error}
-          key={key}
-          action={deleteStopBtn}
-          label=""
-        >
-          {zoomInput}
-          <div className="maputnik-data-spec-property-stop-data">
-            {dataInput}
-          </div>
-          <div className="maputnik-data-spec-property-stop-value">
-            <InputSpec
-              fieldName={this.props.fieldName}
-              fieldSpec={this.props.fieldSpec}
-              value={value}
-              onChange={(_, newValue) => this.changeStop(idx, {zoom: zoomLevel, value: dataLevel}, newValue)}
-            />
-          </div>
-        </Block>
       })
     }
 

src/components/_FieldId.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import {latest} from '@mapbox/mapbox-gl-style-spec'
+import {latest} from '@maplibre/maplibre-gl-style-spec'
 import Block from './Block'
 import FieldString from './FieldString'
 

src/components/_FieldMaxZoom.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import {latest} from '@mapbox/mapbox-gl-style-spec'
+import {latest} from '@maplibre/maplibre-gl-style-spec'
 import Block from './Block'
 import FieldNumber from './FieldNumber'
 

src/components/_FieldMinZoom.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import {latest} from '@mapbox/mapbox-gl-style-spec'
+import {latest} from '@maplibre/maplibre-gl-style-spec'
 import Block from './Block'
 import FieldNumber from './FieldNumber'
 

src/components/_FieldSource.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import {latest} from '@mapbox/mapbox-gl-style-spec'
+import {latest} from '@maplibre/maplibre-gl-style-spec'
 import Block from './Block'
 import FieldAutocomplete from './FieldAutocomplete'
 

src/components/_FieldSourceLayer.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import {latest} from '@mapbox/mapbox-gl-style-spec'
+import {latest} from '@maplibre/maplibre-gl-style-spec'
 import Block from './Block'
 import FieldAutocomplete from './FieldAutocomplete'
 

src/components/_FieldType.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import {latest} from '@mapbox/mapbox-gl-style-spec'
+import {latest} from '@maplibre/maplibre-gl-style-spec'
 import Block from './Block'
 import FieldSelect from './FieldSelect'
 import FieldString from './FieldString'

src/components/_ZoomProperty.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import {mdiFunctionVariant, mdiTableRowPlusAfter} from '@mdi/js';
-import {latest} from '@mapbox/mapbox-gl-style-spec'
+import {latest} from '@maplibre/maplibre-gl-style-spec'
 
 import InputButton from './InputButton'
 import InputSpec from './InputSpec'

src/libs/apistore.js

@@ -1,5 +1,5 @@
 import style from './style.js'
-import {format} from '@mapbox/mapbox-gl-style-spec'
+import {format} from '@maplibre/maplibre-gl-style-spec'
 import ReconnectingWebSocket from 'reconnecting-websocket'
 
 export class ApiStyleStore {

src/libs/diffmessage.js

@@ -1,4 +1,4 @@
-import {diff} from '@mapbox/mapbox-gl-style-spec'
+import {diff} from '@maplibre/maplibre-gl-style-spec'
 
 export function diffMessages(beforeStyle, afterStyle) {
   const changes = diff(beforeStyle, afterStyle)

src/libs/filterops.js

@@ -1,4 +1,4 @@
-import {latest} from '@mapbox/mapbox-gl-style-spec'
+import {latest} from '@maplibre/maplibre-gl-style-spec'
 export const combiningFilterOps = ['all', 'any', 'none']
 export const setFilterOps = ['in', '!in']
 export const otherFilterOps = Object

src/libs/layer.js

@@ -1,4 +1,4 @@
-import {latest} from '@mapbox/mapbox-gl-style-spec'
+import {latest} from '@maplibre/maplibre-gl-style-spec'
 
 export function changeType(layer, newType) {
   const changedPaintProps = { ...layer.paint }

src/libs/mapbox-rtl.js

@@ -1,4 +1,4 @@
-import MapboxGl from 'mapbox-gl'
+import MapLibreGl from "maplibre-gl"
 import {readFileSync} from 'fs'
 
 const data = readFileSync(__dirname+"/../../node_modules/@mapbox/mapbox-gl-rtl-text/mapbox-gl-rtl-text.js", "utf8");
@@ -8,4 +8,4 @@ const blob = new window.Blob([data], {
 });
 const objectUrl = window.URL.createObjectURL(blob);
 
-MapboxGl.setRTLTextPlugin(objectUrl);
+MapLibreGl.setRTLTextPlugin(objectUrl, () => {});

src/libs/query-util.js

@@ -1,11 +1,6 @@
 function asBool(queryObj, key) {
   if(queryObj.hasOwnProperty(key)) {
-    if(queryObj[key].match(/^false|0$/)) {
+    return !queryObj[key].match(/^false|0$/);
-      return false;
-    }
-    else {
-      return true;
-    }
   }
   else {
     return false;

src/libs/sort-numerically.js

@@ -1,6 +1,6 @@
 export default function(a, b) {
-  a = parseFloat(a, 10);
+  a = parseFloat(a);
-  b = parseFloat(b, 10);
+  b = parseFloat(b);
 
   if(a < b) {
     return -1

src/libs/source.js

@@ -1,11 +1,10 @@
 export function deleteSource(mapStyle, sourceId) {
   const remainingSources = { ...mapStyle.sources}
   delete remainingSources[sourceId]
-  const changedStyle = {
+  return {
     ...mapStyle,
     sources: remainingSources
   }
-  return changedStyle
 }
 
 
@@ -18,10 +17,9 @@ export function changeSource(mapStyle, sourceId, source) {
     ...mapStyle.sources,
     [sourceId]: source
   }
-  const changedStyle = {
+  return {
     ...mapStyle,
     sources: changedSources
   }
-  return changedStyle
 }
 

src/libs/style.js

@@ -1,4 +1,4 @@
-import deref from '@mapbox/mapbox-gl-style-spec/deref'
+import {derefLayers} from '@maplibre/maplibre-gl-style-spec'
 import tokens from '../config/tokens.json'
 
 // Empty style is always used if no style could be restored or fetched
@@ -25,19 +25,17 @@ function ensureHasNoInteractive(style) {
     return changedLayer
   })
 
-  const nonInteractiveStyle = {
+  return {
     ...style,
     layers: changedLayers
   }
-  return nonInteractiveStyle
 }
 
 function ensureHasNoRefs(style) {
-  const derefedStyle = {
+  return {
     ...style,
-    layers: deref(style.layers)
+    layers: derefLayers(style.layers)
   }
-  return derefedStyle
 }
 
 function ensureStyleValidity(style) {

src/libs/stylestore.js

@@ -30,7 +30,7 @@ function loadStoredStyles() {
 
 function isStyleKey(key) {
   const parts = key.split(":")
-  return parts.length == 3 && parts[0] === storagePrefix && parts[1] === stylePrefix
+  return parts.length === 3 && parts[0] === storagePrefix && parts[1] === stylePrefix
 }
 
 // Load style id from key

src/mapboxgl.css

@@ -1,3 +1,5 @@
+/* TODO */
+
 .mapboxgl-popup-anchor-top .mapboxgl-popup-tip {
  border-bottom-color: rgb(28, 31, 36);
 }

src/util/codemirror-mgl.js

@@ -1,7 +1,7 @@
 import jsonlint from 'jsonlint';
 import CodeMirror from 'codemirror';
 import jsonToAst from 'json-to-ast';
-import {expression, validate, latest} from '@mapbox/mapbox-gl-style-spec';
+import {expression, validate} from '@maplibre/maplibre-gl-style-spec';
 
 
 CodeMirror.defineMode("mgl", function(config, parserConfig) {
@@ -115,12 +115,7 @@ CodeMirror.registerHelper("lint", "mgl", function(text, opts, doc) {
         value: errors
           .filter(err => {
             // Remove missing 'layer source' errors, because we don't include them
-            if (err.message.match(/^layers\[0\]: source ".*" not found$/)) {
+            return !err.message.match(/^layers\[0\]: source ".*" not found$/);
-              return false;
-            }
-            else {
-              return true;
-            }
           })
           .map(err => {
             // Remove the 'layers[0].' as we're validating the layer only here

stories/FieldFunction.stories.js

@@ -3,7 +3,7 @@ import FieldFunction from '../src/components/FieldFunction';
 import {action} from '@storybook/addon-actions';
 import {Wrapper} from './ui';
 import {withA11y} from '@storybook/addon-a11y';
-import {latest} from '@mapbox/mapbox-gl-style-spec'
+import {latest} from '@maplibre/maplibre-gl-style-spec'
 
 
 export default {

stories/LayerEditor.stories.js

@@ -2,7 +2,7 @@ import React from 'react';
 import LayerEditor from '../src/components/LayerEditor';
 import {action} from '@storybook/addon-actions';
 import {withA11y} from '@storybook/addon-a11y';
-import {latest} from '@mapbox/mapbox-gl-style-spec'
+import {latest} from '@maplibre/maplibre-gl-style-spec'
 
 
 export default {

test/config/specs.js

@@ -1,7 +1,6 @@
 var config = {};
-var testNetwork = process.env.TEST_NETWORK || "localhost";
+config.testNetwork = process.env.TEST_NETWORK || "localhost";
-
 config.port = 9001;
-config.baseUrl = "http://"+testNetwork+":"+config.port;
+config.baseUrl = "http://"+config.testNetwork+":"+config.port;
 
 module.exports = config;

test/functional/helper.js

@@ -1,5 +1,5 @@
 var wd = require("../wd-helper");
-var uuid = require('uuid/v1');
+var {v1: uuid} = require('uuid');
 var geoServer = require("../geojson-server");
 
 var testNetwork = process.env.TEST_NETWORK || "localhost";

test/functional/layers/index.js

@@ -1,7 +1,7 @@
 var assert = require("assert");
 var config = require("../../config/specs");
 var helper = require("../helper");
-var uuid   = require('uuid/v1');
+var {v1: uuid} = require('uuid');
 var wd     = require("../../wd-helper");