From 3727c9ad5e44896cf20814a53d6a9e60528e1fda Mon Sep 17 00:00:00 2001 From: Kevin Schaul Date: Mon, 28 Aug 2023 21:17:49 -0500 Subject: [PATCH] 814/remove mapbox references (#816) Fixes #814 * fix: remove outdated references to mapbox * docs: fix references in readme * chore: fix mapbox references in tests * chore: fix mapbox references in stories, webpack config * chore: remove empty array --- README.md | 4 +- config/webpack.config.js | 3 -- config/webpack.production.config.js | 3 -- src/components/App.jsx | 26 +++++------ src/components/AppToolbar.jsx | 4 +- src/components/FilterEditor.jsx | 2 +- src/components/InputSpec.jsx | 2 +- .../{MapMapboxGl.jsx => MapMaplibreGl.jsx} | 21 +++++---- ... => MapMaplibreGlFeaturePropertyPopup.jsx} | 0 ...rPopup.jsx => MapMaplibreGlLayerPopup.jsx} | 0 src/components/MapOpenLayers.jsx | 6 +-- src/components/ModalDebug.jsx | 6 +-- src/components/ModalExport.jsx | 17 +++---- src/components/ModalSettings.jsx | 12 +---- src/config/tokens.json | 1 - src/libs/field-spec-additional.js | 4 -- src/libs/layer.js | 2 +- src/libs/layerwatcher.js | 4 +- src/libs/{mapbox-rtl.js => maplibre-rtl.js} | 0 src/libs/style.js | 1 - src/libs/zoomcontrol.js | 2 +- src/{mapboxgl.css => maplibregl.css} | 44 +++++++++---------- ...Gl.stories.js => MapMaplibreGl.stories.js} | 8 ++-- stories/ModalDebug.stories.js | 4 +- test/example-layer-style.json | 2 +- test/example-style.json | 2 +- test/functional/accessibility/skip-links.js | 2 +- test/functional/keyboard/index.js | 2 +- test/functional/map/index.js | 8 ++-- test/functional/modals/index.js | 13 ------ test/geojson-server.js | 2 +- 31 files changed, 82 insertions(+), 125 deletions(-) rename src/components/{MapMapboxGl.jsx => MapMaplibreGl.jsx} (89%) rename src/components/{MapMapboxGlFeaturePropertyPopup.jsx => MapMaplibreGlFeaturePropertyPopup.jsx} (100%) rename src/components/{MapMapboxGlLayerPopup.jsx => MapMaplibreGlLayerPopup.jsx} (100%) rename src/libs/{mapbox-rtl.js => maplibre-rtl.js} (100%) rename src/{mapboxgl.css => maplibregl.css} (79%) rename stories/{MapMapboxGl.stories.js => MapMaplibreGl.stories.js} (93%) diff --git a/README.md b/README.md index 9d3e68f..11962bc 100644 --- a/README.md +++ b/README.md @@ -7,7 +7,7 @@ [github-action-ci]: https://github.com/maputnik/editor/actions?query=workflow%3Aci [license]: https://tldrlegal.com/license/mit-license -A free and open visual editor for the [Mapbox GL styles](https://www.mapbox.com/mapbox-gl-style-spec/) +A free and open visual editor for the [MapLibre GL styles](https://maplibre.org/maplibre-style-spec/) targeted at developers and map designers. @@ -36,7 +36,7 @@ The documentation can be found in the [Wiki](https://github.com/maputnik/editor/ ## Develop -Maputnik is written in ES6 and is using [React](https://github.com/facebook/react) and [Mapbox GL JS](https://www.mapbox.com/mapbox-gl-js/api/). +Maputnik is written in ES6 and is using [React](https://github.com/facebook/react) and [MapLibre GL JS](https://maplibre.org/projects/maplibre-gl-js/). We ensure building and developing Maputnik works with the [current active LTS Node.js version and above](https://github.com/nodejs/Release#release-schedule). diff --git a/config/webpack.config.js b/config/webpack.config.js index fea68ab..2d3ba31 100644 --- a/config/webpack.config.js +++ b/config/webpack.config.js @@ -25,9 +25,6 @@ module.exports = { extensions: ['.js', '.jsx'] }, module: { - noParse: [ - /mapbox-gl\/dist\/mapbox-gl.js/ - ], rules: rules }, node: { diff --git a/config/webpack.production.config.js b/config/webpack.production.config.js index 5afad47..fd46006 100644 --- a/config/webpack.production.config.js +++ b/config/webpack.production.config.js @@ -23,9 +23,6 @@ module.exports = { extensions: ['.js', '.jsx'] }, module: { - noParse: [ - /mapbox-gl\/dist\/mapbox-gl.js/ - ], rules: rules }, node: { diff --git a/src/components/App.jsx b/src/components/App.jsx index 80ccb17..6714f42 100644 --- a/src/components/App.jsx +++ b/src/components/App.jsx @@ -9,7 +9,7 @@ import {arrayMoveMutable} from 'array-move' import url from 'url' import hash from "string-hash"; -import MapMapboxGl from './MapMapboxGl' +import MapMaplibreGl from './MapMaplibreGl' import MapOpenLayers from './MapOpenLayers' import LayerList from './LayerList' import LayerEditor from './LayerEditor' @@ -136,7 +136,7 @@ export default class App extends React.Component { { key: "m", handler: () => { - document.querySelector(".mapboxgl-canvas").focus(); + document.querySelector(".maplibregl-canvas").focus(); } }, { @@ -220,7 +220,7 @@ export default class App extends React.Component { survey: false, debug: false, }, - mapboxGlDebugOptions: { + maplibreGlDebugOptions: { showTileBoundaries: false, showCollisionBoxes: false, showOverdrawInspector: false, @@ -290,7 +290,7 @@ export default class App extends React.Component { // If we're changing renderer reset the map state. if ( property === 'maputnik:renderer' && - value !== get(this.state.mapStyle, ['metadata', 'maputnik:renderer'], 'mbgljs') + value !== get(this.state.mapStyle, ['metadata', 'maputnik:renderer'], 'mlgljs') ) { this.setState({ mapState: 'map' @@ -547,7 +547,7 @@ export default class App extends React.Component { ...styleObj, metadata: { ...styleObj.metadata, - 'maputnik:renderer': 'mbgljs' + 'maputnik:renderer': 'mlgljs' } } return changedStyle @@ -626,7 +626,7 @@ export default class App extends React.Component { _getRenderer () { const metadata = this.state.mapStyle.metadata || {}; - return metadata['maputnik:renderer'] || 'mbgljs'; + return metadata['maputnik:renderer'] || 'mlgljs'; } onMapChange = (mapView) => { @@ -665,9 +665,9 @@ export default class App extends React.Component { onLayerSelect={this.onLayerSelect} /> } else { - mapElement = @@ -800,10 +800,10 @@ export default class App extends React.Component { }); } - onChangeMaboxGlDebug = (key, value) => { + onChangeMaplibreGlDebug = (key, value) => { this.setState({ - mapboxGlDebugOptions: { - ...this.state.mapboxGlDebugOptions, + maplibreGlDebugOptions: { + ...this.state.maplibreGlDebugOptions, [key]: value, } }); @@ -870,9 +870,9 @@ export default class App extends React.Component { const modals =
{ if (target === "map") { - document.querySelector(".mapboxgl-canvas").focus(); + document.querySelector(".maplibregl-canvas").focus(); } else { const el = document.querySelector("#skip-target-"+target); @@ -152,7 +152,7 @@ export default class AppToolbar extends React.Component { id: "inspect", group: "general", title: "Inspect", - disabled: this.props.renderer !== 'mbgljs', + disabled: this.props.renderer !== 'mlgljs', }, { id: "filter-deuteranopia", diff --git a/src/components/FilterEditor.jsx b/src/components/FilterEditor.jsx index 11b8451..3d570e0 100644 --- a/src/components/FilterEditor.jsx +++ b/src/components/FilterEditor.jsx @@ -42,7 +42,7 @@ function createStyleFromFilter (filter) { "id": "tmp", "version": 8, "name": "Empty Style", - "metadata": {"maputnik:renderer": "mbgljs"}, + "metadata": {"maputnik:renderer": "mlgljs"}, "sources": { "tmp": { "type": "geojson", diff --git a/src/components/InputSpec.jsx b/src/components/InputSpec.jsx index 1e470b2..021a978 100644 --- a/src/components/InputSpec.jsx +++ b/src/components/InputSpec.jsx @@ -32,7 +32,7 @@ function optionsLabelLength(options) { return sum } -/** Display any field from the Mapbox GL style spec and +/** Display any field from the Maplibre GL style spec and * choose the correct field component based on the @{fieldSpec} * to display @{value}. */ export default class SpecField extends React.Component { diff --git a/src/components/MapMapboxGl.jsx b/src/components/MapMaplibreGl.jsx similarity index 89% rename from src/components/MapMapboxGl.jsx rename to src/components/MapMaplibreGl.jsx index 33ae99b..ceba1ab 100644 --- a/src/components/MapMapboxGl.jsx +++ b/src/components/MapMaplibreGl.jsx @@ -3,16 +3,16 @@ import PropTypes from 'prop-types' import ReactDOM from 'react-dom' import MapLibreGl from 'maplibre-gl' import MapboxInspect from 'mapbox-gl-inspect' -import MapMapboxGlLayerPopup from './MapMapboxGlLayerPopup' -import MapMapboxGlFeaturePropertyPopup from './MapMapboxGlFeaturePropertyPopup' +import MapMaplibreGlLayerPopup from './MapMaplibreGlLayerPopup' +import MapMaplibreGlFeaturePropertyPopup from './MapMaplibreGlFeaturePropertyPopup' import tokens from '../config/tokens.json' import colors from 'mapbox-gl-inspect/lib/colors' import Color from 'color' import ZoomControl from '../libs/zoomcontrol' import { colorHighlightedLayer } from '../libs/highlight' import 'maplibre-gl/dist/maplibre-gl.css' -import '../mapboxgl.css' -import '../libs/mapbox-rtl' +import '../maplibregl.css' +import '../libs/maplibre-rtl' const IS_SUPPORTED = MapLibreGl.supported(); @@ -52,7 +52,7 @@ function buildInspectStyle(originalMapStyle, coloredLayers, highlightedLayer) { return inspectStyle } -export default class MapMapboxGl extends React.Component { +export default class MapMaplibreGl extends React.Component { static propTypes = { onDataChange: PropTypes.func, onLayerSelect: PropTypes.func.isRequired, @@ -69,7 +69,6 @@ export default class MapMapboxGl extends React.Component { onDataChange: () => {}, onLayerSelect: () => {}, onChange: () => {}, - mapboxAccessToken: tokens.mapbox, options: {}, } @@ -86,7 +85,7 @@ export default class MapMapboxGl extends React.Component { if(!this.state.map) return - //Mapbox GL now does diffing natively so we don't need to calculate + //Maplibre GL now does diffing natively so we don't need to calculate //the necessary operations ourselves! this.state.map.setStyle( this.props.replaceAccessTokens(props.mapStyle), @@ -120,7 +119,7 @@ export default class MapMapboxGl extends React.Component { if (map) { if (this.props.inspectModeEnabled) { // HACK: We need to work out why we need to do this and what's causing - // this error. I'm assuming an issue with mapbox-gl update and + // this error. I'm assuming an issue with maplibre-gl update and // mapbox-gl-inspect. try { this.state.inspect.render(); @@ -182,9 +181,9 @@ export default class MapMapboxGl extends React.Component { buildInspectStyle: (originalMapStyle, coloredLayers) => buildInspectStyle(originalMapStyle, coloredLayers, this.props.highlightedLayer), renderPopup: features => { if(this.props.inspectModeEnabled) { - return renderPopup(, tmpNode); + return renderPopup(, tmpNode); } else { - return renderPopup(, tmpNode); + return renderPopup(, tmpNode); } } }) @@ -238,7 +237,7 @@ export default class MapMapboxGl extends React.Component { className="maputnik-map maputnik-map--error" >
- Error: Cannot load MapboxGL, WebGL is either unsupported or disabled + Error: Cannot load MaplibreGL, WebGL is either unsupported or disabled
} diff --git a/src/components/MapMapboxGlFeaturePropertyPopup.jsx b/src/components/MapMaplibreGlFeaturePropertyPopup.jsx similarity index 100% rename from src/components/MapMapboxGlFeaturePropertyPopup.jsx rename to src/components/MapMaplibreGlFeaturePropertyPopup.jsx diff --git a/src/components/MapMapboxGlLayerPopup.jsx b/src/components/MapMaplibreGlLayerPopup.jsx similarity index 100% rename from src/components/MapMapboxGlLayerPopup.jsx rename to src/components/MapMaplibreGlLayerPopup.jsx diff --git a/src/components/MapOpenLayers.jsx b/src/components/MapOpenLayers.jsx index 2359d5d..2559d9b 100644 --- a/src/components/MapOpenLayers.jsx +++ b/src/components/MapOpenLayers.jsx @@ -3,7 +3,7 @@ import {throttle} from 'lodash'; import PropTypes from 'prop-types' import { loadJSON } from '../libs/urlopen' -import MapMapboxGlLayerPopup from './MapMapboxGlLayerPopup'; +import MapMaplibreGlLayerPopup from './MapMaplibreGlLayerPopup'; import 'ol/ol.css' import {apply} from 'ol-mapbox-style'; @@ -146,13 +146,13 @@ export default class MapOpenLayers extends React.Component { className="maputnik-popup" > - diff --git a/src/components/ModalDebug.jsx b/src/components/ModalDebug.jsx index a7e040c..ba5dc8c 100644 --- a/src/components/ModalDebug.jsx +++ b/src/components/ModalDebug.jsx @@ -11,7 +11,7 @@ export default class ModalDebug extends React.Component { onChangeMaboxGlDebug: PropTypes.func.isRequired, onChangeOpenlayersDebug: PropTypes.func.isRequired, onOpenToggle: PropTypes.func.isRequired, - mapboxGlDebugOptions: PropTypes.object, + maplibreGlDebugOptions: PropTypes.object, openlayersDebugOptions: PropTypes.object, mapView: PropTypes.object, } @@ -31,9 +31,9 @@ export default class ModalDebug extends React.Component { >

Options

- {this.props.renderer === 'mbgljs' && + {this.props.renderer === 'mlgljs' &&
    - {Object.entries(this.props.mapboxGlDebugOptions).map(([key, val]) => { + {Object.entries(this.props.maplibreGlDebugOptions).map(([key, val]) => { return