mirror of
https://github.com/a-nyx/maputnik-with-pmtiles.git
synced 2024-12-25 18:58:33 +01:00
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
This commit is contained in:
Kevin Schaul
GitHub
parent
a99cbc00ba
commit
3727c9ad5e
31 changed files with 82 additions and 125 deletions
|
|
@ -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).
|
||||
|
||||
|
|
|
|||
|
|
@ -25,9 +25,6 @@ module.exports = {
|
|||
extensions: ['.js', '.jsx']
|
||||
},
|
||||
module: {
|
||||
noParse: [
|
||||
/mapbox-gl\/dist\/mapbox-gl.js/
|
||||
],
|
||||
rules: rules
|
||||
},
|
||||
node: {
|
||||
|
|
|
|||
|
|
@ -23,9 +23,6 @@ module.exports = {
|
|||
extensions: ['.js', '.jsx']
|
||||
},
|
||||
module: {
|
||||
noParse: [
|
||||
/mapbox-gl\/dist\/mapbox-gl.js/
|
||||
],
|
||||
rules: rules
|
||||
},
|
||||
node: {
|
||||
|
|
|
|||
|
|
@ -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 = <MapMapboxGl {...mapProps}
|
||||
mapElement = <MapMaplibreGl {...mapProps}
|
||||
onChange={this.onMapChange}
|
||||
options={this.state.mapboxGlDebugOptions}
|
||||
options={this.state.maplibreGlDebugOptions}
|
||||
inspectModeEnabled={this.state.mapState === "inspect"}
|
||||
highlightedLayer={this.state.mapStyle.layers[this.state.selectedLayerIndex]}
|
||||
onLayerSelect={this.onLayerSelect} />
|
||||
|
|
@ -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 = <div>
|
||||
<ModalDebug
|
||||
renderer={this._getRenderer()}
|
||||
mapboxGlDebugOptions={this.state.mapboxGlDebugOptions}
|
||||
maplibreGlDebugOptions={this.state.maplibreGlDebugOptions}
|
||||
openlayersDebugOptions={this.state.openlayersDebugOptions}
|
||||
onChangeMaboxGlDebug={this.onChangeMaboxGlDebug}
|
||||
onChangeMaplibreGlDebug={this.onChangeMaplibreGlDebug}
|
||||
onChangeOpenlayersDebug={this.onChangeOpenlayersDebug}
|
||||
isOpen={this.state.isOpen.debug}
|
||||
onOpenToggle={this.toggleModal.bind(this, 'debug')}
|
||||
|
|
|
|||
|
|
@ -133,7 +133,7 @@ export default class AppToolbar extends React.Component {
|
|||
|
||||
onSkip = (target) => {
|
||||
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",
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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(<MapMapboxGlFeaturePropertyPopup features={features} />, tmpNode);
|
||||
return renderPopup(<MapMaplibreGlFeaturePropertyPopup features={features} />, tmpNode);
|
||||
} else {
|
||||
return renderPopup(<MapMapboxGlLayerPopup features={features} onLayerSelect={this.onLayerSelectById} zoom={this.state.zoom} />, tmpNode);
|
||||
return renderPopup(<MapMaplibreGlLayerPopup features={features} onLayerSelect={this.onLayerSelectById} zoom={this.state.zoom} />, tmpNode);
|
||||
}
|
||||
}
|
||||
})
|
||||
|
|
@ -238,7 +237,7 @@ export default class MapMapboxGl extends React.Component {
|
|||
className="maputnik-map maputnik-map--error"
|
||||
>
|
||||
<div className="maputnik-map__error-message">
|
||||
Error: Cannot load MapboxGL, WebGL is either unsupported or disabled
|
||||
Error: Cannot load MaplibreGL, WebGL is either unsupported or disabled
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
|
@ -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"
|
||||
>
|
||||
<button
|
||||
className="mapboxgl-popup-close-button"
|
||||
className="maplibregl-popup-close-button"
|
||||
onClick={this.closeOverlay}
|
||||
aria-label="Close popup"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
<MapMapboxGlLayerPopup
|
||||
<MapMaplibreGlLayerPopup
|
||||
features={this.state.selectedFeatures || []}
|
||||
onLayerSelect={this.props.onLayerSelect}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -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 {
|
|||
>
|
||||
<section className="maputnik-modal-section maputnik-modal-shortcuts">
|
||||
<h1>Options</h1>
|
||||
{this.props.renderer === 'mbgljs' &&
|
||||
{this.props.renderer === 'mlgljs' &&
|
||||
<ul>
|
||||
{Object.entries(this.props.mapboxGlDebugOptions).map(([key, val]) => {
|
||||
{Object.entries(this.props.maplibreGlDebugOptions).map(([key, val]) => {
|
||||
return <li key={key}>
|
||||
<label>
|
||||
<input type="checkbox" checked={val} onClick={(e) => this.props.onChangeMaboxGlDebug(key, e.target.checked)} /> {key}
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ import style from '../libs/style'
|
|||
import fieldSpecAdditional from '../libs/field-spec-additional'
|
||||
|
||||
|
||||
const MAPBOX_GL_VERSION = pkgLockJson.dependencies["mapbox-gl"].version;
|
||||
const MAPLIBRE_GL_VERSION = pkgLockJson.dependencies["maplibre-gl"].version;
|
||||
|
||||
|
||||
export default class ModalExport extends React.Component {
|
||||
|
|
@ -58,8 +58,8 @@ export default class ModalExport extends React.Component {
|
|||
<meta charset="utf-8" />
|
||||
<title>${htmlTitle}</title>
|
||||
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
|
||||
<script src="https://api.mapbox.com/mapbox-gl-js/v${MAPBOX_GL_VERSION}/mapbox-gl.js"></script>
|
||||
<link href="https://api.mapbox.com/mapbox-gl-js/v${MAPBOX_GL_VERSION}/mapbox-gl.css" rel="stylesheet" />
|
||||
<script src="https://unpkg.com/maplibre-gl@${MAPLIBRE_GL_VERSION}/dist/maplibre-gl.js"></script>
|
||||
<link href="https://unpkg.com/maplibre-gl@${MAPLIBRE_GL_VERSION}/dist/maplibre-gl.css" rel="stylesheet" />
|
||||
<style>
|
||||
body { margin: 0; padding: 0; }
|
||||
#map { position: absolute; top: 0; bottom: 0; width: 100%; }
|
||||
|
|
@ -68,12 +68,11 @@ export default class ModalExport extends React.Component {
|
|||
<body>
|
||||
<div id="map"></div>
|
||||
<script>
|
||||
mapboxgl.accessToken = 'access_token';
|
||||
const map = new mapboxgl.Map({
|
||||
const map = new maplibregl.Map({
|
||||
container: 'map',
|
||||
style: ${tokenStyle},
|
||||
});
|
||||
map.addControl(new mapboxgl.NavigationControl());
|
||||
map.addControl(new maplibregl.NavigationControl());
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -119,12 +118,6 @@ export default class ModalExport extends React.Component {
|
|||
</p>
|
||||
|
||||
<div>
|
||||
<FieldString
|
||||
label={fieldSpecAdditional.maputnik.mapbox_access_token.label}
|
||||
fieldSpec={fieldSpecAdditional.maputnik.mapbox_access_token}
|
||||
value={(this.props.mapStyle.metadata || {})['maputnik:mapbox_access_token']}
|
||||
onChange={this.changeMetadataProperty.bind(this, "maputnik:mapbox_access_token")}
|
||||
/>
|
||||
<FieldString
|
||||
label={fieldSpecAdditional.maputnik.maptiler_access_token.label}
|
||||
fieldSpec={fieldSpecAdditional.maputnik.maptiler_access_token}
|
||||
|
|
|
|||
|
|
@ -117,14 +117,6 @@ export default class ModalSettings extends React.Component {
|
|||
onChange={this.changeStyleProperty.bind(this, "glyphs")}
|
||||
/>
|
||||
|
||||
<FieldString {...inputProps}
|
||||
label={fieldSpecAdditional.maputnik.mapbox_access_token.label}
|
||||
fieldSpec={fieldSpecAdditional.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}
|
||||
fieldSpec={fieldSpecAdditional.maputnik.maptiler_access_token}
|
||||
|
|
@ -241,10 +233,10 @@ export default class ModalSettings extends React.Component {
|
|||
fieldSpec={fieldSpecAdditional.maputnik.style_renderer}
|
||||
data-wd-key="modal:settings.maputnik:renderer"
|
||||
options={[
|
||||
['mbgljs', 'MapboxGL JS'],
|
||||
['mlgljs', 'MapLibreGL JS'],
|
||||
['ol', 'Open Layers (experimental)'],
|
||||
]}
|
||||
value={metadata['maputnik:renderer'] || 'mbgljs'}
|
||||
value={metadata['maputnik:renderer'] || 'mlgljs'}
|
||||
onChange={onChangeMetadataProperty.bind(this, 'maputnik:renderer')}
|
||||
/>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
{
|
||||
"mapbox": "pk.eyJ1IjoibW9yZ2Vua2FmZmVlIiwiYSI6ImNpeHJmNXNmZTAwNHIycXBid2NqdTJibjMifQ.Dv1-GDpTWi0NP6xW9Fct1w",
|
||||
"openmaptiles": "KDhMfHvorAFkFe64wlZb",
|
||||
"thunderforest": "b71f7f0ba4064f5eb9e903859a9cf5c6"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,5 @@
|
|||
const spec = {
|
||||
maputnik: {
|
||||
mapbox_access_token: {
|
||||
label: "Mapbox Access Token",
|
||||
doc: "Public access token for Mapbox services."
|
||||
},
|
||||
maptiler_access_token: {
|
||||
label: "MapTiler Access Token",
|
||||
doc: "Public access token for MapTiler Cloud."
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@ export function changeProperty(layer, group, property, newValue) {
|
|||
if(group) {
|
||||
const newLayer = {
|
||||
...layer,
|
||||
// Change object so the diff works in ./src/components/map/MapboxGlMap.jsx
|
||||
// Change object so the diff works in ./src/components/map/MaplibreGlMap.jsx
|
||||
[group]: {
|
||||
...layer[group]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -21,8 +21,8 @@ export default class LayerWatcher {
|
|||
const previousSources = { ...this._sources }
|
||||
|
||||
Object.keys(map.style.sourceCaches).forEach(sourceId => {
|
||||
//NOTE: This heavily depends on the internal API of Mapbox GL
|
||||
//so this breaks between Mapbox GL JS releases
|
||||
//NOTE: This heavily depends on the internal API of Maplibre GL
|
||||
//so this breaks between Maplibre GL JS releases
|
||||
this._sources[sourceId] = map.style.sourceCaches[sourceId]._source.vectorLayerIds
|
||||
})
|
||||
|
||||
|
|
|
|||
|
|
@ -116,7 +116,6 @@ function stripAccessTokens(mapStyle) {
|
|||
const changedMetadata = {
|
||||
...mapStyle.metadata
|
||||
};
|
||||
delete changedMetadata['maputnik:mapbox_access_token'];
|
||||
delete changedMetadata['maputnik:openmaptiles_access_token'];
|
||||
return {
|
||||
...mapStyle,
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ export default class ZoomControl {
|
|||
onAdd(map) {
|
||||
this._map = map;
|
||||
this._container = document.createElement('div');
|
||||
this._container.className = 'mapboxgl-ctrl mapboxgl-ctrl-group mapboxgl-ctrl-zoom';
|
||||
this._container.className = 'maplibregl-ctrl maplibregl-ctrl-group maplibregl-ctrl-zoom';
|
||||
this._container.innerHTML = `
|
||||
Zoom: <span></span>
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -1,93 +1,91 @@
|
|||
/* TODO */
|
||||
|
||||
.mapboxgl-popup-anchor-top .mapboxgl-popup-tip {
|
||||
.maplibregl-popup-anchor-top .maplibregl-popup-tip {
|
||||
border-bottom-color: rgb(28, 31, 36);
|
||||
}
|
||||
|
||||
.mapboxgl-popup-anchor-left .mapboxgl-popup-tip {
|
||||
.maplibregl-popup-anchor-left .maplibregl-popup-tip {
|
||||
border-right-color: rgb(28, 31, 36);
|
||||
}
|
||||
|
||||
.mapboxgl-popup-anchor-right .mapboxgl-popup-tip {
|
||||
.maplibregl-popup-anchor-right .maplibregl-popup-tip {
|
||||
border-left-color: rgb(28, 31, 36);
|
||||
}
|
||||
|
||||
.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip {
|
||||
.maplibregl-popup-anchor-bottom .maplibregl-popup-tip {
|
||||
border-top-color: rgb(28, 31, 36);
|
||||
}
|
||||
|
||||
.mapboxgl-popup-anchor-top-left .mapboxgl-popup-tip {
|
||||
.maplibregl-popup-anchor-top-left .maplibregl-popup-tip {
|
||||
border-bottom-color: rgb(28, 31, 36);
|
||||
}
|
||||
|
||||
.mapboxgl-popup-anchor-top-right .mapboxgl-popup-tip {
|
||||
.maplibregl-popup-anchor-top-right .maplibregl-popup-tip {
|
||||
border-bottom-color: rgb(28, 31, 36);
|
||||
}
|
||||
|
||||
.mapboxgl-popup-anchor-bottom-left .mapboxgl-popup-tip {
|
||||
.maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip {
|
||||
border-top-color: rgb(28, 31, 36);
|
||||
}
|
||||
|
||||
.mapboxgl-popup-anchor-bottom-right .mapboxgl-popup-tip {
|
||||
.maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip {
|
||||
border-top-color: rgb(28, 31, 36);
|
||||
}
|
||||
|
||||
.mapboxgl-popup-content {
|
||||
.maplibregl-popup-content {
|
||||
background-color: rgb(28, 31, 36);
|
||||
box-shadow: rgba(0, 0, 0, 0.298039) 0px 0px 5px 0px;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.mapboxgl-popup-close-button {
|
||||
.maplibregl-popup-close-button {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.mapboxgl-ctrl-zoom {
|
||||
.maplibregl-ctrl-zoom {
|
||||
color: #a4a4a4;
|
||||
font-weight: bold;
|
||||
padding: 4px 8px;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.mapboxgl-ctrl-group {
|
||||
.maplibregl-ctrl-group {
|
||||
background: rgb(28, 31, 36);
|
||||
}
|
||||
|
||||
.mapboxgl-ctrl-group > button {
|
||||
.maplibregl-ctrl-group > button {
|
||||
background-color: rgb(28, 31, 36);
|
||||
border-color: rgb(28, 31, 36);
|
||||
}
|
||||
|
||||
.mapboxgl-ctrl button:not(:disabled):hover {
|
||||
.maplibregl-ctrl button:not(:disabled):hover {
|
||||
background-color: rgb(86, 83, 83);
|
||||
}
|
||||
|
||||
.mapboxgl-ctrl-zoom-in {
|
||||
.maplibregl-ctrl-zoom-in {
|
||||
border-radius: 4px 4px 0 0;
|
||||
}
|
||||
|
||||
.mapboxgl-ctrl-compass {
|
||||
.maplibregl-ctrl-compass {
|
||||
border-radius: 0 0 4px 4px;
|
||||
}
|
||||
|
||||
.mapboxgl-ctrl button.mapboxgl-ctrl-zoom-in .mapboxgl-ctrl-icon {
|
||||
.maplibregl-ctrl button.maplibregl-ctrl-zoom-in .maplibregl-ctrl-icon {
|
||||
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D%270%200%2020%2020%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%0A%20%20%3Cpath%20style%3D%27fill%3A%23a4a4a4%3B%27%20d%3D%27M%2010%206%20C%209.446%206%209%206.4459904%209%207%20L%209%209%20L%207%209%20C%206.446%209%206%209.446%206%2010%20C%206%2010.554%206.446%2011%207%2011%20L%209%2011%20L%209%2013%20C%209%2013.55401%209.446%2014%2010%2014%20C%2010.554%2014%2011%2013.55401%2011%2013%20L%2011%2011%20L%2013%2011%20C%2013.554%2011%2014%2010.554%2014%2010%20C%2014%209.446%2013.554%209%2013%209%20L%2011%209%20L%2011%207%20C%2011%206.4459904%2010.554%206%2010%206%20z%27%20%2F%3E%0A%3C%2Fsvg%3E%0A")
|
||||
}
|
||||
|
||||
.mapboxgl-ctrl button.mapboxgl-ctrl-zoom-out .mapboxgl-ctrl-icon {
|
||||
.maplibregl-ctrl button.maplibregl-ctrl-zoom-out .maplibregl-ctrl-icon {
|
||||
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D%270%200%2020%2020%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%0A%20%20%3Cpath%20style%3D%27fill%3A%23a4a4a4%3B%27%20d%3D%27m%207%2C9%20c%20-0.554%2C0%20-1%2C0.446%20-1%2C1%200%2C0.554%200.446%2C1%201%2C1%20l%206%2C0%20c%200.554%2C0%201%2C-0.446%201%2C-1%200%2C-0.554%20-0.446%2C-1%20-1%2C-1%20z%27%20%2F%3E%0A%3C%2Fsvg%3E%0A")
|
||||
}
|
||||
|
||||
.mapboxgl-ctrl button.mapboxgl-ctrl-compass .mapboxgl-ctrl-icon {
|
||||
.maplibregl-ctrl button.maplibregl-ctrl-compass .maplibregl-ctrl-icon {
|
||||
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%0A%09%3Cpolygon%20fill%3D%27%23a4a4a4%27%20points%3D%276%2C9%2010%2C1%2014%2C9%27%2F%3E%0A%09%3Cpolygon%20fill%3D%27%23545454%27%20points%3D%276%2C11%2010%2C19%2014%2C11%20%27%2F%3E%0A%3C%2Fsvg%3E");
|
||||
background-size: 18px;
|
||||
}
|
||||
|
||||
.mapboxgl-ctrl-inspect {
|
||||
.maplibregl-ctrl-inspect {
|
||||
background-image: url('data:image/svg+xml;charset=utf8,<svg%20xmlns="http://www.w3.org/2000/svg"%20fill="#8e8e8e%22%20preserveAspectRatio=%22xMidYMid%20meet%22%20viewBox=%22-10%20-10%2060%2060%22%3E%3Cg%3E%3Cpath%20d=%22m15%2021.6q0-2%201.5-3.5t3.5-1.5%203.5%201.5%201.5%203.5-1.5%203.6-3.5%201.4-3.5-1.4-1.5-3.6z%20m18.4%2011.1l-6.4-6.5q1.4-2.1%201.4-4.6%200-3.4-2.5-5.8t-5.9-2.4-5.9%202.4-2.5%205.8%202.5%205.9%205.9%202.5q2.4%200%204.6-1.4l7.4%207.4q-0.9%200.6-2%200.6h-20q-1.3%200-2.3-0.9t-1.1-2.3l0.1-26.8q0-1.3%201-2.3t2.3-0.9h13.4l10%2010v19.3z%22%3E%3C/path%3E%3C/g%3E%3C/svg%3E');
|
||||
}
|
||||
|
||||
.mapboxgl-ctrl-map {
|
||||
.maplibregl-ctrl-map {
|
||||
background-image: url('data:image/svg+xml;charset=utf8,<svg%20xmlns="http://www.w3.org/2000/svg"%20fill="#8e8e8e%22%20viewBox=%22-10%20-10%2060%2060%22%20preserveAspectRatio=%22xMidYMid%20meet%22%3E%3Cg%3E%3Cpath%20d=%22m25%2031.640000000000004v-19.766666666666673l-10-3.511666666666663v19.766666666666666z%20m9.140000000000008-26.640000000000004q0.8599999999999923%200%200.8599999999999923%200.8600000000000003v25.156666666666666q0%200.625-0.625%200.783333333333335l-9.375%203.1999999999999993-10-3.5133333333333354-8.906666666666668%203.4383333333333326-0.2333333333333334%200.07833333333333314q-0.8616666666666664%200-0.8616666666666664-0.8599999999999994v-25.156666666666663q0-0.625%200.6233333333333331-0.7833333333333332l9.378333333333334-3.198333333333334%2010%203.5133333333333336%208.905000000000001-3.4383333333333344z%22%3E%3C/path%3E%3C/g%3E%3C/svg%3E');
|
||||
}
|
||||
|
||||
|
|
@ -1,13 +1,13 @@
|
|||
import React from 'react';
|
||||
import MapMapboxGl from '../src/components/MapMapboxGl';
|
||||
import MapMaplibreGl from '../src/components/MapMaplibreGl';
|
||||
import {action} from '@storybook/addon-actions';
|
||||
import {Wrapper} from './ui';
|
||||
import {withA11y} from '@storybook/addon-a11y';
|
||||
|
||||
|
||||
export default {
|
||||
title: 'MapMapboxGl',
|
||||
component: MapMapboxGl,
|
||||
title: 'MapMaplibreGl',
|
||||
component: MapMaplibreGl,
|
||||
decorators: [withA11y],
|
||||
};
|
||||
|
||||
|
|
@ -98,7 +98,7 @@ const mapStyle = {
|
|||
|
||||
export const Basic = () => {
|
||||
return <div style={{height: "100vh", width: "100vw"}}>
|
||||
<MapMapboxGl
|
||||
<MapMaplibreGl
|
||||
mapStyle={mapStyle}
|
||||
inspectModeEnabled={false}
|
||||
replaceAccessTokens={(s) => s}
|
||||
|
|
@ -16,8 +16,8 @@ export const Basic = () => (
|
|||
<div style={{maxHeight: "200px"}}>
|
||||
<ModalDebug
|
||||
isOpen={true}
|
||||
renderer="mbgljs"
|
||||
mapboxGlDebugOptions={{}}
|
||||
renderer="mlgljs"
|
||||
maplibreGlDebugOptions={{}}
|
||||
mapView={{zoom: 1, center: {lat: 0, lng: 0}}}
|
||||
/>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
"version": 8,
|
||||
"name": "Test Style",
|
||||
"metadata": {
|
||||
"maputnik:renderer": "mbgljs"
|
||||
"maputnik:renderer": "mlgljs"
|
||||
},
|
||||
"sources": {},
|
||||
"glyphs": "https://example.local/fonts/{fontstack}/{range}.pbf",
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
"version": 8,
|
||||
"name": "Test Style",
|
||||
"metadata": {
|
||||
"maputnik:renderer": "mbgljs"
|
||||
"maputnik:renderer": "mlgljs"
|
||||
},
|
||||
"sources": {},
|
||||
"glyphs": "https://example.local/fonts/{fontstack}/{range}.pbf",
|
||||
|
|
|
|||
|
|
@ -45,7 +45,7 @@ describe("skip links", function() {
|
|||
assert(await elem.isFocused());
|
||||
await elem.click();
|
||||
|
||||
const targetEl = await $(".mapboxgl-canvas");
|
||||
const targetEl = await $(".maplibregl-canvas");
|
||||
assert(await targetEl.isFocused());
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -44,7 +44,7 @@ describe("keyboard", function() {
|
|||
|
||||
it("'m' should focus map", async function() {
|
||||
await browser.keys(["m"]);
|
||||
assert(await (await $(".mapboxgl-canvas")).isFocused());
|
||||
assert(await (await $(".maplibregl-canvas")).isFocused());
|
||||
});
|
||||
|
||||
it("'!' should show debug modal", async function() {
|
||||
|
|
|
|||
|
|
@ -13,8 +13,8 @@ describe("map", function() {
|
|||
|
||||
await browser.waitUntil(async function () {
|
||||
return (
|
||||
await browser.isVisible(".mapboxgl-ctrl-zoom")
|
||||
&& await browser.getText(".mapboxgl-ctrl-zoom") === "Zoom level: "+(zoomLevel)
|
||||
await browser.isVisible(".maplibregl-ctrl-zoom")
|
||||
&& await browser.getText(".maplibregl-ctrl-zoom") === "Zoom level: "+(zoomLevel)
|
||||
);
|
||||
}, 10*1000)
|
||||
})
|
||||
|
|
@ -25,9 +25,9 @@ describe("map", function() {
|
|||
])+"#"+zoomLevel+"/41.3805/2.1635");
|
||||
await browser.alertAccept();
|
||||
|
||||
await browser.click(".mapboxgl-ctrl-zoom-in")
|
||||
await browser.click(".maplibregl-ctrl-zoom-in")
|
||||
await browser.waitUntil(async function () {
|
||||
var text = await browser.getText(".mapboxgl-ctrl-zoom")
|
||||
var text = await browser.getText(".maplibregl-ctrl-zoom")
|
||||
return text === "Zoom level: "+(zoomLevel+1);
|
||||
}, 10*1000)
|
||||
})
|
||||
|
|
|
|||
|
|
@ -184,19 +184,6 @@ describe("modals", function() {
|
|||
assert.equal(styleObj.glyphs, glyphsUrl);
|
||||
})
|
||||
|
||||
it("mapbox access token", async function() {
|
||||
var apiKey = "testing123";
|
||||
await browser.setValueSafe(wd.$("modal:settings.maputnik:mapbox_access_token"), apiKey);
|
||||
const elem = await $(wd.$("modal:settings.name"));
|
||||
await elem.click();
|
||||
await browser.flushReactUpdates();
|
||||
|
||||
var styleObj = await helper.getStyleStore(browser);
|
||||
await browser.waitUntil(function() {
|
||||
return styleObj.metadata["maputnik:mapbox_access_token"] == apiKey;
|
||||
})
|
||||
})
|
||||
|
||||
it("maptiler access token", async function() {
|
||||
var apiKey = "testing123";
|
||||
await browser.setValueSafe(wd.$("modal:settings.maputnik:openmaptiles_access_token"), apiKey);
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ function buildStyle(opts) {
|
|||
"version": 8,
|
||||
"name": "Test Style",
|
||||
"metadata": {
|
||||
"maputnik:renderer": "mbgljs"
|
||||
"maputnik:renderer": "mlgljs"
|
||||
},
|
||||
"sources": opts.sources,
|
||||
"glyphs": "https://example.local/fonts/{fontstack}/{range}.pbf",
|
||||
|
|
|
|||
Loading…
Reference in a new issue