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

Convert from Mapbox GL to MapLibre
This commit is contained in:
Yuri Astrakhan 2023-07-18 23:32:11 +02:00 committed by GitHub
commit a99cbc00ba
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
42 changed files with 32712 additions and 6911 deletions

View file

@ -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

39412
package-lock.json generated

File diff suppressed because it is too large Load diff

View file

@ -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",

View file

@ -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/);
@ -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}

View file

@ -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'

View file

@ -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';

View file

@ -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'

View file

@ -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'

View file

@ -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'

View file

@ -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'

View file

@ -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'

View file

@ -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'

View file

@ -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'

View file

@ -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,

View file

@ -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 = {}

View file

@ -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'

View file

@ -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'

View file

@ -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'

View file

@ -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'

View file

@ -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'

View file

@ -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'

View file

@ -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'

View file

@ -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'

View file

@ -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'

View file

@ -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'

View file

@ -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'

View file

@ -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'

View file

@ -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'

View file

@ -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 {

View file

@ -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)

View file

@ -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

View file

@ -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 }

View file

@ -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, () => {});

View file

@ -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;

View file

@ -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

View file

@ -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
}

View file

@ -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) {

View file

@ -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

View file

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

View file

@ -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

View file

@ -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 {

View file

@ -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 {