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

Convert from Mapbox GL to MapLibre

.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,10 +68,6 @@ 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:
@@ -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

package.json

@@ -1,7 +1,7 @@
 {
   "name": "maputnik",
-  "version": "1.7.0",
-  "description": "A MapboxGL visual style editor",
+  "version": "2.0.0-pre.1",
+  "description": "A MapLibre GL visual style editor",
   "main": "''",
   "scripts": {
     "stats": "webpack --config config/webpack.production.config.js --progress=profile --json > stats.json",
@@ -28,9 +28,10 @@
   "dependencies": {
     "@babel/runtime": "^7.17.9",
     "@mapbox/mapbox-gl-rtl-text": "^0.2.3",
-    "@mapbox/mapbox-gl-style-spec": "^13.23.1",
+    "@maplibre/maplibre-gl-style-spec": "^17.0.1",
     "@mdi/react": "^1.5.0",
     "array-move": "^4.0.0",
+    "buffer": "^6.0.3",
     "classnames": "^2.3.1",
     "codemirror": "^5.65.2",
     "color": "^4.2.3",
@@ -46,8 +47,8 @@
     "lodash.get": "^4.4.2",
     "lodash.isequal": "^4.5.0",
     "lodash.throttle": "^4.1.1",
-    "mapbox-gl": "^1.13.2",
     "mapbox-gl-inspect": "^1.3.1",
+    "maplibre-gl": "^2.4.0",
     "maputnik-design": "github:maputnik/design#172b06c",
     "ol": "^6.14.1",
     "ol-mapbox-style": "^7.1.1",
@@ -100,7 +101,7 @@
       "node": true,
       "es6": true
     },
-    "parser": "babel-eslint",
+    "parser": "@babel/eslint-parser",
     "parserOptions": {
       "ecmaVersion": 6,
       "sourceType": "module",
@@ -118,6 +119,7 @@
   },
   "devDependencies": {
     "@babel/core": "^7.17.9",
+    "@babel/eslint-parser": "^7.19.1",
     "@babel/plugin-proposal-class-properties": "^7.16.7",
     "@babel/plugin-transform-runtime": "^7.17.0",
     "@babel/preset-env": "^7.16.11",
@@ -136,7 +138,6 @@
     "@wdio/mocha-framework": "^7.19.3",
     "@wdio/selenium-standalone-service": "^7.19.1",
     "@wdio/spec-reporter": "^7.19.1",
-    "babel-eslint": "^10.1.0",
     "babel-loader": "^8.2.4",
     "babel-plugin-istanbul": "^6.1.1",
     "babel-plugin-static-fs": "^3.0.0",

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 buffer from 'buffer'
 import get from 'lodash.get'
 import {unset} from 'lodash'
 import {arrayMoveMutable} from 'array-move'
@@ -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'
-
-
-// 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;
-  }
-}
+// Buffer must be defined globally for @maplibre/maplibre-gl-style-spec validate() function to succeed.
+window.Buffer = buffer.Buffer;
 
 function setFetchAccessToken(url, mapStyle) {
   const matchesTilehosting = url.match(/\.tilehosting\.com/);
@@ -441,7 +429,7 @@ export default class App extends React.Component {
     if (opts.save) {
       this.saveStyle(newStyle);
     }
-       
+
     this.setState({
       mapStyle: newStyle,
       dirtyMapStyle: dirtyMapStyle,
@@ -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}

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';
 
 
@@ -366,7 +366,7 @@ export default class FieldFunction  extends React.Component {
           onDeleteStop={this.deleteStop}
           onAddStop={this.addStop}
           onChangeToDataFunction={this.makeDataFunction}
-          onExpressionClick={this.makeExpression} 
+          onExpressionClick={this.makeExpression}
         />
       )
     }
@@ -383,7 +383,7 @@ export default class FieldFunction  extends React.Component {
           onDeleteStop={this.deleteStop}
           onAddStop={this.addStop}
           onChangeToZoomFunction={this.makeZoomFunction}
-          onExpressionClick={this.makeExpression} 
+          onExpressionClick={this.makeExpression}
         />
       )
     }
@@ -397,8 +397,8 @@ export default class FieldFunction  extends React.Component {
           fieldSpec={this.props.fieldSpec}
           value={this.props.value}
           onZoomClick={this.makeZoomFunction}
-          onDataClick={this.makeDataFunction} 
-          onExpressionClick={this.makeExpression} 
+          onDataClick={this.makeDataFunction}
+          onExpressionClick={this.makeExpression}
         />
       )
     }

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/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 = {}
@@ -11,7 +11,7 @@ function groupFeaturesBySourceLayer(features) {
   features.forEach(feature => {
     if(returnedFeatures.hasOwnProperty(feature.layer.id)) {
       returnedFeatures[feature.layer.id]++
-      
+
       const featureObject = sources[feature.layer['source-layer']].find(f => f.layer.id === feature.layer.id)
 
       featureObject.counter = returnedFeatures[feature.layer.id]
@@ -86,7 +86,7 @@ class FeatureLayerPopup extends React.Component {
             className="maputnik-popup-layer"
         >
           <div
-            className="maputnik-popup-layer__swatch" 
+            className="maputnik-popup-layer__swatch"
             style={{background: featureColor}}
           ></div>
           <label
@@ -95,7 +95,7 @@ class FeatureLayerPopup extends React.Component {
               this.props.onLayerSelect(feature.layer.id)
             }}
           >
-            {feature.layer.type && 
+            {feature.layer.type &&
               <IconLayer type={feature.layer.type} style={{
                 width: 14,
                 height: 14,

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'
@@ -90,21 +90,21 @@ export default class ModalSettings extends React.Component {
         <FieldString {...inputProps}
           label={"Name"}
           fieldSpec={latest.$root.name}
-          data-wd-key="modal:settings.name" 
+          data-wd-key="modal:settings.name"
           value={this.props.mapStyle.name}
           onChange={this.changeStyleProperty.bind(this, "name")}
         />
         <FieldString {...inputProps}
           label={"Owner"}
           fieldSpec={{doc: "Owner ID of the style. Used by Mapbox or future style APIs."}}
-          data-wd-key="modal:settings.owner" 
+          data-wd-key="modal:settings.owner"
           value={this.props.mapStyle.owner}
           onChange={this.changeStyleProperty.bind(this, "owner")}
         />
         <FieldUrl {...inputProps}
           fieldSpec={latest.$root.sprite}
           label="Sprite URL"
-          data-wd-key="modal:settings.sprite" 
+          data-wd-key="modal:settings.sprite"
           value={this.props.mapStyle.sprite}
           onChange={this.changeStyleProperty.bind(this, "sprite")}
         />
@@ -112,31 +112,31 @@ export default class ModalSettings extends React.Component {
         <FieldUrl {...inputProps}
           label="Glyphs URL"
           fieldSpec={latest.$root.glyphs}
-          data-wd-key="modal:settings.glyphs" 
+          data-wd-key="modal:settings.glyphs"
           value={this.props.mapStyle.glyphs}
           onChange={this.changeStyleProperty.bind(this, "glyphs")}
         />
 
         <FieldString {...inputProps}
-          label={fieldSpecAdditional.maputnik.mapbox_access_token.label} 
+          label={fieldSpecAdditional.maputnik.mapbox_access_token.label}
           fieldSpec={fieldSpecAdditional.maputnik.mapbox_access_token}
-          data-wd-key="modal:settings.maputnik:mapbox_access_token" 
+          data-wd-key="modal:settings.maputnik:mapbox_access_token"
           value={metadata['maputnik:mapbox_access_token']}
           onChange={onChangeMetadataProperty.bind(this, "maputnik:mapbox_access_token")}
         />
 
         <FieldString {...inputProps}
-          label={fieldSpecAdditional.maputnik.maptiler_access_token.label} 
+          label={fieldSpecAdditional.maputnik.maptiler_access_token.label}
           fieldSpec={fieldSpecAdditional.maputnik.maptiler_access_token}
-          data-wd-key="modal:settings.maputnik:openmaptiles_access_token" 
+          data-wd-key="modal:settings.maputnik:openmaptiles_access_token"
           value={metadata['maputnik:openmaptiles_access_token']}
           onChange={onChangeMetadataProperty.bind(this, "maputnik:openmaptiles_access_token")}
         />
 
         <FieldString {...inputProps}
-          label={fieldSpecAdditional.maputnik.thunderforest_access_token.label} 
+          label={fieldSpecAdditional.maputnik.thunderforest_access_token.label}
           fieldSpec={fieldSpecAdditional.maputnik.thunderforest_access_token}
-          data-wd-key="modal:settings.maputnik:thunderforest_access_token" 
+          data-wd-key="modal:settings.maputnik:thunderforest_access_token"
           value={metadata['maputnik:thunderforest_access_token']}
           onChange={onChangeMetadataProperty.bind(this, "maputnik:thunderforest_access_token")}
         />
@@ -239,7 +239,7 @@ export default class ModalSettings extends React.Component {
         <FieldSelect {...inputProps}
           label={fieldSpecAdditional.maputnik.style_renderer.label}
           fieldSpec={fieldSpecAdditional.maputnik.style_renderer}
-          data-wd-key="modal:settings.maputnik:renderer" 
+          data-wd-key="modal:settings.maputnik:renderer"
           options={[
             ['mbgljs', 'MapboxGL JS'],
             ['ol', 'Open Layers (experimental)'],

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'
@@ -197,7 +197,7 @@ class AddSource extends React.Component {
 
   render() {
     // Kind of a hack because the type changes, however maputnik has 1..n
-    // options per type, for example 
+    // options per type, for example
     //
     //  - 'geojson' - 'GeoJSON (URL)' and 'GeoJSON (JSON)'
     //  - 'raster' - 'Raster (TileJSON URL)' and 'Raster (XYZ URL)'

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'

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 false;
-    }
-    else {
-      return true;
-    }
+    return !queryObj[key].match(/^false|0$/);
   }
   else {
     return false;

src/libs/sort-numerically.js

@@ -1,6 +1,6 @@
 export default function(a, b) {
-  a = parseFloat(a, 10);
-  b = parseFloat(b, 10);
+  a = parseFloat(a);
+  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 false;
-            }
-            else {
-              return true;
-            }
+            return !err.message.match(/^layers\[0\]: source ".*" not found$/);
           })
           .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 {