From 3ae1e002b789a960e6481b51bb189f473cb49a9c Mon Sep 17 00:00:00 2001 From: Olivier Terral Date: Fri, 1 Mar 2024 14:50:04 +0100 Subject: [PATCH 01/41] fix: use mbt v3 --- package.json | 2 +- .../BaseLayerSwitcher/BaseLayerSwitcher.js | 2 +- .../BaseLayerSwitcher.test.js | 2 +- src/components/BaseLayerSwitcher/README.md | 14 ++-- src/components/BasicMap/BasicMap.js | 37 ++--------- src/components/BasicMap/BasicMap.test.js | 7 +- src/components/BasicMap/README.md | 6 +- src/components/CanvasSaveButton/README.md | 12 ++-- src/components/Copyright/Copyright.test.js | 11 ++-- src/components/Copyright/README.md | 10 ++- .../FeatureExportButton.js | 4 +- .../FeatureExportButton.test.js | 61 ++++++++--------- src/components/FeatureExportButton/README.md | 44 ++++++------- src/components/FitExtent/README.md | 4 +- src/components/Geolocation/README.md | 4 +- src/components/LayerTree/LayerTree.js | 3 +- src/components/LayerTree/LayerTree.test.js | 30 +++------ src/components/LayerTree/README.md | 10 +-- src/components/MousePosition/README.md | 4 +- src/components/NorthArrow/README.md | 37 +++++------ src/components/Permalink/Permalink.js | 31 +++++---- src/components/Permalink/Permalink.test.js | 31 +++------ src/components/Permalink/README.md | 66 +++++++++++-------- src/components/Popup/README.md | 40 ++++++----- src/components/RouteSchedule/README.md | 27 +++++--- src/components/ScaleLine/README.md | 4 +- src/components/StopsFinder/README.md | 7 +- src/components/StopsFinder/StopsFinder.js | 4 +- src/components/Zoom/README.md | 4 +- src/utils/KML.js | 2 +- src/utils/KML.test.js | 10 ++- styleguide.config.js | 18 ++--- yarn.lock | 8 +-- 33 files changed, 252 insertions(+), 304 deletions(-) diff --git a/package.json b/package.json index f84020e6..c017b2d8 100644 --- a/package.json +++ b/package.json @@ -65,7 +65,7 @@ "lint-staged": "15.2.2", "mapbox-gl": "1.13.1", "maplibre-gl": "4.0.0", - "mobility-toolbox-js": "2.3.8", + "mobility-toolbox-js": "3.0.0-beta.1", "ol": "8.2.0", "postcss": "^8.4.35", "prettier": "3.2.5", diff --git a/src/components/BaseLayerSwitcher/BaseLayerSwitcher.js b/src/components/BaseLayerSwitcher/BaseLayerSwitcher.js index 40b12b27..5f14a598 100644 --- a/src/components/BaseLayerSwitcher/BaseLayerSwitcher.js +++ b/src/components/BaseLayerSwitcher/BaseLayerSwitcher.js @@ -2,8 +2,8 @@ import React, { useState, useEffect } from "react"; import PropTypes from "prop-types"; import { FaChevronLeft } from "react-icons/fa"; -import { Layer } from "mobility-toolbox-js/ol"; import { unByKey } from "ol/Observable"; +import Layer from "ol/layer/Layer"; const propTypes = { /** diff --git a/src/components/BaseLayerSwitcher/BaseLayerSwitcher.test.js b/src/components/BaseLayerSwitcher/BaseLayerSwitcher.test.js index a61ad050..33f29792 100644 --- a/src/components/BaseLayerSwitcher/BaseLayerSwitcher.test.js +++ b/src/components/BaseLayerSwitcher/BaseLayerSwitcher.test.js @@ -1,6 +1,6 @@ import React from "react"; -import { Layer } from "mobility-toolbox-js/ol"; import { fireEvent, render } from "@testing-library/react"; +import Layer from "ol/layer/Layer"; import BaseLayerSwitcher from "./BaseLayerSwitcher"; describe("BaseLayerSwitcher", () => { diff --git a/src/components/BaseLayerSwitcher/README.md b/src/components/BaseLayerSwitcher/README.md index eb6bb7e8..2b4ecb8b 100644 --- a/src/components/BaseLayerSwitcher/README.md +++ b/src/components/BaseLayerSwitcher/README.md @@ -5,7 +5,7 @@ import React from 'react'; import Map from 'ol/Map'; import TileLayer from 'ol/layer/Tile'; import OSM from 'ol/source/OSM'; -import { MapboxLayer, Layer } from 'mobility-toolbox-js/ol'; +import { MaplibreLayer } from 'mobility-toolbox-js/ol'; import BaseLayerSwitcher from 'react-spatial/components/BaseLayerSwitcher'; import BasicMap from 'react-spatial/components/BasicMap'; import osmImage from 'react-spatial/images/baselayer/baselayer.osm.png'; @@ -14,33 +14,31 @@ import basebrightImage from 'react-spatial/images/baselayer/baselayer.basebright const center = [1149722.7037660484, 6618091.313553318]; const map = new Map({ controls: [] }); -const travicLayer = new MapboxLayer({ +const travicLayer = new MaplibreLayer({ url: `https://maps.geops.io/styles/travic_v2/style.json?key=${apiKey}`, name: 'Travic', key: 'travic.baselayer', visible: true, }); -const basebrightLayer = new MapboxLayer({ +const basebrightLayer = new MaplibreLayer({ url: `https://maps.geops.io/styles/base_bright_v2/style.json?key=${apiKey}`, name: 'Base - Bright', key: 'basebright.baselayer', visible: false, }); -const osmLayer = new Layer({ - olLayer: new TileLayer({ - source: new OSM(), - }), +const osmLayer = new TileLayer({ name: 'OSM', key: 'osm.baselayer', visible: false, + source: new OSM(), }); const layerImages = { 'travic.baselayer': travicImage, 'basebright.baselayer': basebrightImage, - 'osm.baselayer': osmImage, + 'osm.baselayer': osmImage, }; const layers = [travicLayer, basebrightLayer, osmLayer]; diff --git a/src/components/BasicMap/BasicMap.js b/src/components/BasicMap/BasicMap.js index 004b19d0..fc2b9027 100644 --- a/src/components/BasicMap/BasicMap.js +++ b/src/components/BasicMap/BasicMap.js @@ -7,7 +7,7 @@ import OLCollection from "ol/Collection"; import View from "ol/View"; import { unByKey } from "ol/Observable"; import Interaction from "ol/interaction/Interaction"; -import { Layer } from "mobility-toolbox-js/ol"; +import Layer from "ol/layer/Layer"; const propTypes = { /** Map animation options */ @@ -298,47 +298,24 @@ class BasicMap extends PureComponent { } initLayer(layer) { - if (layer.attachToMap) { - layer.attachToMap(this.map); + if (!this.map?.getLayers()?.getArray()?.includes(layer)) { + this.map.addLayer(layer); } - if (layer.init) { - layer.init(this.map); - } - - if ( - layer.olLayer && - this.map.getLayers() && - !this.map.getLayers().getArray().includes(layer.olLayer) - ) { - this.map.addLayer(layer.olLayer); - } - const layers = layer.children || []; + const layers = layer.children || layer.get("children") || []; for (let i = 0; i < layers.length; i += 1) { this.initLayer(layers[i]); } } terminateLayer(layer) { - const layers = layer.children || []; + const layers = layer.children || layer.get("children") || []; for (let i = 0; i < layers.length; i += 1) { this.terminateLayer(layers[i]); } - if ( - layer.olLayer && - this.map.getLayers() && - this.map.getLayers().getArray().includes(layer.olLayer) - ) { - this.map.removeLayer(layer.olLayer); - } - - if (layer.terminate) { - layer.terminate(this.map); - } - - if (layer.detachFromMap) { - layer.detachFromMap(this.map); + if (this.map?.getLayers()?.getArray()?.includes(layer)) { + this.map.removeLayer(layer); } } diff --git a/src/components/BasicMap/BasicMap.test.js b/src/components/BasicMap/BasicMap.test.js index 8cc3460c..bed6529d 100644 --- a/src/components/BasicMap/BasicMap.test.js +++ b/src/components/BasicMap/BasicMap.test.js @@ -2,12 +2,12 @@ import "jest-canvas-mock"; import proj4 from "proj4"; import { register } from "ol/proj/proj4"; import React from "react"; -import { Layer } from "mobility-toolbox-js/ol"; import MapEvent from "ol/MapEvent"; import OLLayer from "ol/layer/Vector"; import OLMap from "ol/Map"; import OLView from "ol/View"; import { render } from "@testing-library/react"; +import Layer from "ol/layer/Layer"; import BasicMap from "./BasicMap"; proj4.defs( @@ -21,9 +21,8 @@ register(proj4); const extent = [0, 0, 1000, 1000]; const olLayers = [ - new Layer({ + new OLLayer({ name: "foo", - olLayer: new OLLayer({}), visible: true, }), ]; @@ -187,7 +186,7 @@ describe("BasicMap", () => { test("layers shoud be updated", () => { const addLayer = jest.spyOn(olMap, "addLayer"); const { rerender } = render(); - const layer = new Layer({ name: "test", olLayer: new OLLayer() }); + const layer = new OLLayer(); rerender(); expect(addLayer).toHaveBeenCalled(); }); diff --git a/src/components/BasicMap/README.md b/src/components/BasicMap/README.md index 47383c2c..7f1b9ea7 100644 --- a/src/components/BasicMap/README.md +++ b/src/components/BasicMap/README.md @@ -3,13 +3,11 @@ The following example demonstrates the use of BasicMap. ```jsx import React from 'react'; -import { MapboxLayer } from 'mobility-toolbox-js/ol'; -import Tile from 'ol/layer/Tile'; -import OSM from 'ol/source/OSM'; import BasicMap from 'react-spatial/components/BasicMap'; +import { MaplibreLayer } from 'mobility-toolbox-js/ol'; const layers = [ - new MapboxLayer({ + new MaplibreLayer({ url: `https://maps.geops.io/styles/travic_v2/style.json?key=${apiKey}`, }) ]; diff --git a/src/components/CanvasSaveButton/README.md b/src/components/CanvasSaveButton/README.md index 03a3e9ed..d2bacf02 100644 --- a/src/components/CanvasSaveButton/README.md +++ b/src/components/CanvasSaveButton/README.md @@ -6,7 +6,6 @@ import { TiImage } from 'react-icons/ti'; import { geopsTheme } from '@geops/geops-ui'; import { ThemeProvider } from '@mui/material'; import Button from '@mui/material/Button'; -import { Layer } from 'mobility-toolbox-js/ol'; import Tile from 'ol/layer/Tile'; import OSM from 'ol/source/OSM'; import Map from 'ol/Map'; @@ -16,14 +15,13 @@ import BasicMap from 'react-spatial/components/BasicMap'; import geopsLogo from 'react-spatial/images/geops_logo.png'; import qrCode from 'react-spatial/images/geops_qr.png'; -const map = new Map({ controls: [] }); +const map = new Map(); const layers = [ - new Layer({ - olLayer: new Tile({ - source: new OSM(), + new Tile({ + source: new OSM({ + attributions: '© layer-copyright', }), - copyrights: '© layer-copyright', }), ]; @@ -41,7 +39,7 @@ const layers = [ extraData={{ copyright: { text: () => { - return layers[0].copyrights; + return layers[0].getSource().getAttributions()(); }, background: true, }, diff --git a/src/components/Copyright/Copyright.test.js b/src/components/Copyright/Copyright.test.js index f7c40bee..f8861314 100644 --- a/src/components/Copyright/Copyright.test.js +++ b/src/components/Copyright/Copyright.test.js @@ -8,7 +8,6 @@ import Tile from "ol/Tile"; import TileLayer from "ol/layer/Tile"; import TileSource from "ol/source/Tile"; import { createXYZ } from "ol/tilegrid"; -import { Layer } from "mobility-toolbox-js/ol"; import Copyright from "./Copyright"; configure({ adapter: new Adapter() }); @@ -25,8 +24,9 @@ const tileLoadFunction = () => { return tile; }; -const getOLTileLayer = () => { +const getOLTileLayer = (options = {}) => { const layer = new TileLayer({ + ...options, source: new TileSource({ projection: "EPSG:3857", tileGrid: createXYZ(), @@ -37,10 +37,9 @@ const getOLTileLayer = () => { }; const getLayer = (copyrights, visible = true) => { - return new Layer({ + return getOLTileLayer({ visible, copyrights, - olLayer: getOLTileLayer(), }); }; @@ -59,12 +58,12 @@ describe("Copyright", () => { zoom: 0, }), layers: layers.map((layer) => { - return layer.olLayer; + return layer; }), }); map.setSize([200, 200]); layers.forEach((layer) => { - layer.attachToMap(map); + map.addLayer(layer); }); act(() => { map.renderSync(); diff --git a/src/components/Copyright/README.md b/src/components/Copyright/README.md index 98a9a60d..34a36540 100644 --- a/src/components/Copyright/README.md +++ b/src/components/Copyright/README.md @@ -6,7 +6,7 @@ import Map from 'ol/Map'; import Tile from 'ol/layer/Tile'; import OSM from 'ol/source/OSM'; import { defaults } from 'ol/control'; -import { Layer, MapboxLayer } from 'mobility-toolbox-js/ol'; +import { MaplibreLayer } from 'mobility-toolbox-js/ol'; import BasicMap from 'react-spatial/components/BasicMap'; import Copyright from 'react-spatial/components/Copyright'; @@ -17,17 +17,15 @@ const map = new Map({ }); const layers = [ - new MapboxLayer({ + new MaplibreLayer({ url: `https://maps.geops.io/styles/base_bright_v2/style.json?key=${window.apiKey}`, }), - new Layer({ + new Tile({ copyrights: '© My custom copyright for OSM Contributors', - olLayer: new Tile({ - source: new OSM(), + source: new OSM({ }), }), ]; -window.layers = layers;
diff --git a/src/components/FeatureExportButton/FeatureExportButton.js b/src/components/FeatureExportButton/FeatureExportButton.js index 64dd4bbe..163d3a60 100644 --- a/src/components/FeatureExportButton/FeatureExportButton.js +++ b/src/components/FeatureExportButton/FeatureExportButton.js @@ -1,7 +1,7 @@ import React, { PureComponent } from "react"; import PropTypes from "prop-types"; import KMLFormat from "ol/format/KML"; -import { Layer } from "mobility-toolbox-js/ol"; +import Layer from "ol/layer/Layer"; import KML from "../../utils/KML"; const propTypes = { @@ -49,7 +49,7 @@ class FeatureExportButton extends PureComponent { } // eslint-disable-next-line new-cap - return new format().writeFeatures(layer.olLayer.getSource().getFeatures(), { + return new format().writeFeatures(layer.getSource().getFeatures(), { featureProjection: projection, }); } diff --git a/src/components/FeatureExportButton/FeatureExportButton.test.js b/src/components/FeatureExportButton/FeatureExportButton.test.js index 4edd4288..2db4a966 100644 --- a/src/components/FeatureExportButton/FeatureExportButton.test.js +++ b/src/components/FeatureExportButton/FeatureExportButton.test.js @@ -3,7 +3,6 @@ import React from "react"; import renderer from "react-test-renderer"; import { configure, mount, shallow } from "enzyme"; import Adapter from "@cfaester/enzyme-adapter-react-18"; -import { Layer } from "mobility-toolbox-js/ol"; import GPX from "ol/format/GPX"; import VectorSource from "ol/source/Vector"; import Style from "ol/style/Style"; @@ -21,16 +20,14 @@ import FeatureExportButton from "."; configure({ adapter: new Adapter() }); -const layer = new Layer({ +const layer = new VectorLayer({ name: "Sample layer", - olLayer: new VectorLayer({ - source: new VectorSource({ - features: [ - new Feature({ - geometry: new Point([819103.972418, 6120013.078324]), - }), - ], - }), + source: new VectorSource({ + features: [ + new Feature({ + geometry: new Point([819103.972418, 6120013.078324]), + }), + ], }), }); @@ -80,12 +77,10 @@ describe("FeatureExportButton", () => { ); } - return new Layer({ + return new VectorLayer({ name: "ExportLayer", - olLayer: new VectorLayer({ - source: new VectorSource({ - features: featsArray, - }), + source: new VectorSource({ + features: featsArray, }), }); }; @@ -143,7 +138,7 @@ describe("FeatureExportButton", () => { }), }); - iconLayer.olLayer.getSource().forEachFeature((f) => { + iconLayer.getSource().forEachFeature((f) => { f.setStyle(iconStyle); }); @@ -190,7 +185,7 @@ describe("FeatureExportButton", () => { test("should export text style in kml.", () => { const textlayer = renderLayer(2); - textlayer.olLayer.getSource().forEachFeature((f) => { + textlayer.getSource().forEachFeature((f) => { f.setStyle(textStyle); }); const exportString = FeatureExportButton.createFeatureString( @@ -209,7 +204,7 @@ describe("FeatureExportButton", () => { test("should only export none-empty text style in kml.", () => { const textlayer = renderLayer(2); - textlayer.olLayer.getSource().forEachFeature((f) => { + textlayer.getSource().forEachFeature((f) => { f.setStyle(textStyle); }); const exportString1 = FeatureExportButton.createFeatureString( @@ -233,7 +228,7 @@ describe("FeatureExportButton", () => { }), }); // Set empty string as name for first feature - textlayer.olLayer.getSource().getFeatures()[0].setStyle(newStyle); + textlayer.getSource().getFeatures()[0].setStyle(newStyle); const exportString2 = FeatureExportButton.createFeatureString( textlayer, @@ -247,19 +242,17 @@ describe("FeatureExportButton", () => { }); test("should not export 'Cirle geom' (kml unsupported).", () => { - const circleLayer = new Layer({ + const circleLayer = new VectorLayer({ name: "ExportLayer", - olLayer: new VectorLayer({ - source: new VectorSource({ - features: [ - new Feature({ - geometry: new Circle({ - center: [843119.531243, 6111943.000197], - radius: 1000, - }), + source: new VectorSource({ + features: [ + new Feature({ + geometry: new Circle({ + center: [843119.531243, 6111943.000197], + radius: 1000, }), - ], - }), + }), + ], }), }); @@ -273,7 +266,7 @@ describe("FeatureExportButton", () => { }), }); - circleLayer.olLayer.getSource().forEachFeature((f) => { + circleLayer.getSource().forEachFeature((f) => { f.setStyle(circleStyle); }); const exportString = FeatureExportButton.createFeatureString( @@ -302,7 +295,7 @@ describe("FeatureExportButton", () => { }), }); - extendedLayer.olLayer.getSource().forEachFeature((f) => { + extendedLayer.getSource().forEachFeature((f) => { f.setStyle(style); }); const exportString = FeatureExportButton.createFeatureString( @@ -338,7 +331,7 @@ describe("FeatureExportButton", () => { }), }); - extendedLayer.olLayer.getSource().forEachFeature((f) => { + extendedLayer.getSource().forEachFeature((f) => { f.setStyle(style); f.set("foo", "bar"); }); @@ -366,7 +359,7 @@ describe("FeatureExportButton", () => { [4, 5], ]), }); - extendedLayer.olLayer.getSource().addFeatures([line]); + extendedLayer.getSource().addFeatures([line]); const style = [ new Style({ diff --git a/src/components/FeatureExportButton/README.md b/src/components/FeatureExportButton/README.md index 03d6bd4d..3c235074 100644 --- a/src/components/FeatureExportButton/README.md +++ b/src/components/FeatureExportButton/README.md @@ -3,7 +3,7 @@ The following example demonstrates the use of FeatureExportButton. ```jsx import React from 'react'; -import { Layer, MapboxLayer } from 'mobility-toolbox-js/ol'; +import { MaplibreLayer } from 'mobility-toolbox-js/ol'; import VectorLayer from 'ol/layer/Vector'; import VectorSource from 'ol/source/Vector'; import Feature from 'ol/Feature'; @@ -17,32 +17,30 @@ import BasicMap from 'react-spatial/components/BasicMap'; import FeatureExportButton from 'react-spatial/components/FeatureExportButton'; -const vectorLayer = new Layer({ - olLayer: new VectorLayer({ - style: new Style({ - image: new Icon({ - anchor: [0.5, 46], - anchorXUnits: 'fraction', - anchorYUnits: 'pixels', - src: 'https://openlayers.org/en/latest/examples/data/icon.png', - size: [32, 48] - }) - }), - source: new VectorSource({ - features: [ - new Feature({ - geometry: new Point([819103.972418, 6120013.078324]), - }), - new Feature({ - geometry: new Point([873838.856313, 6106009.575876]), - }), - ], - }), +const vectorLayer = new VectorLayer({ + style: new Style({ + image: new Icon({ + anchor: [0.5, 46], + anchorXUnits: 'fraction', + anchorYUnits: 'pixels', + src: 'https://openlayers.org/en/latest/examples/data/icon.png', + size: [32, 48] + }) + }), + source: new VectorSource({ + features: [ + new Feature({ + geometry: new Point([819103.972418, 6120013.078324]), + }), + new Feature({ + geometry: new Point([873838.856313, 6106009.575876]), + }), + ], }), }); const layers = [ - new MapboxLayer({ + new MaplibreLayer({ url: `https://maps.geops.io/styles/travic_v2/style.json?key=${apiKey}`, }), vectorLayer, diff --git a/src/components/FitExtent/README.md b/src/components/FitExtent/README.md index fb4577e2..845f81c7 100644 --- a/src/components/FitExtent/README.md +++ b/src/components/FitExtent/README.md @@ -3,7 +3,7 @@ The following example demonstrates the use of FitExtent. ```jsx import React from 'react'; -import { MapboxLayer } from 'mobility-toolbox-js/ol'; +import { MaplibreLayer } from 'mobility-toolbox-js/ol'; import Tile from 'ol/layer/Tile'; import OSM from 'ol/source/OSM'; import Map from 'ol/Map'; @@ -18,7 +18,7 @@ const extent = [-15380353.1391, 2230738.2886, -6496535.908, 6927029.2369]; const map = new Map({ controls: [] }); const layers = [ - new MapboxLayer({ + new MaplibreLayer({ url: `https://maps.geops.io/styles/travic_v2/style.json?key=${apiKey}`, }), ]; diff --git a/src/components/Geolocation/README.md b/src/components/Geolocation/README.md index d9e14035..1a7983d7 100644 --- a/src/components/Geolocation/README.md +++ b/src/components/Geolocation/README.md @@ -3,7 +3,7 @@ The following example demonstrates the use of Geolocation. ```jsx import React from 'react'; -import { MapboxLayer } from 'mobility-toolbox-js/ol'; +import { MaplibreLayer } from 'mobility-toolbox-js/ol'; import Tile from 'ol/layer/Tile'; import OSM from 'ol/source/OSM'; import Map from 'ol/Map'; @@ -13,7 +13,7 @@ import BasicMap from 'react-spatial/components/BasicMap'; const map = new Map({ controls: [] }); const layers = [ - new MapboxLayer({ + new MaplibreLayer({ url: `https://maps.geops.io/styles/travic_v2/style.json?key=${apiKey}`, }), ]; diff --git a/src/components/LayerTree/LayerTree.js b/src/components/LayerTree/LayerTree.js index 4d7831a7..0bfcf62c 100644 --- a/src/components/LayerTree/LayerTree.js +++ b/src/components/LayerTree/LayerTree.js @@ -1,7 +1,8 @@ import React, { Component } from "react"; import PropTypes from "prop-types"; -import { Layer, getLayersAsFlatArray } from "mobility-toolbox-js/ol"; +import { getLayersAsFlatArray } from "mobility-toolbox-js/ol"; import { unByKey } from "ol/Observable"; +import Layer from "ol/layer/Layer"; const propTypes = { /** diff --git a/src/components/LayerTree/LayerTree.test.js b/src/components/LayerTree/LayerTree.test.js index eed25d23..2341e8aa 100644 --- a/src/components/LayerTree/LayerTree.test.js +++ b/src/components/LayerTree/LayerTree.test.js @@ -4,7 +4,7 @@ import { configure, mount } from "enzyme"; import Adapter from "@cfaester/enzyme-adapter-react-18"; import "jest-canvas-mock"; import renderer from "react-test-renderer"; -import { Layer } from "mobility-toolbox-js/ol"; +import Layer from "ol/layer/Layer"; import LayerTree from "./LayerTree"; configure({ adapter: new Adapter() }); @@ -38,16 +38,12 @@ describe("LayerTree", () => { new Layer({ name: "1-1", group: "radio", - properties: { - radioGroup: "radio", - }, + radioGroup: "radio", }), new Layer({ name: "1-2", group: "radio", - properties: { - radioGroup: "radio", - }, + radioGroup: "radio", visible: false, children: [ new Layer({ @@ -165,16 +161,12 @@ describe("LayerTree", () => { new Layer({ name: "Expanded layer 1.1 (because of isAlwaysExpanded=true)", visible: true, - properties: { - isAlwaysExpanded: true, - }, + isAlwaysExpanded: true, children: [ new Layer({ name: "Expanded layer 1.1.1 (because of isAlwaysExpanded=true)", visible: true, - properties: { - isAlwaysExpanded: true, - }, + isAlwaysExpanded: true, children: [ new Layer({ name: "Visible layer 1.1.1.1 (as parent is expanded)", @@ -185,9 +177,7 @@ describe("LayerTree", () => { new Layer({ name: "Hidden layer 1.1.1 (because of hidden=true)", visible: true, - properties: { - hideInLegend: true, - }, + hideInLegend: true, children: [ new Layer({ name: "Invisible layer 1.1.1.1 (as parent is hidden)", @@ -200,9 +190,7 @@ describe("LayerTree", () => { new Layer({ name: "Expanded layer 1.2 (because of isAlwaysExpanded=true)", visible: true, - properties: { - isAlwaysExpanded: true, - }, + isAlwaysExpanded: true, children: [ new Layer({ name: "Visible layer 1.2.1 (as parent is expanded)", @@ -229,9 +217,7 @@ describe("LayerTree", () => { new Layer({ name: "Invisible layer 2.1.1 (as parent isAlwaysExpanded=false)", visible: true, - properties: { - isAlwaysExpanded: true, - }, + isAlwaysExpanded: true, children: [ new Layer({ name: "Invisible layer 2.1.1.1 (as parent is not visible)", diff --git a/src/components/LayerTree/README.md b/src/components/LayerTree/README.md index c42124d0..1d223629 100644 --- a/src/components/LayerTree/README.md +++ b/src/components/LayerTree/README.md @@ -2,7 +2,7 @@ The following example demonstrates the use of LayerTree. ```jsx import React, { useEffect } from 'react'; -import { MapboxLayer, MapboxStyleLayer, Layer } from 'mobility-toolbox-js/ol'; +import { MaplibreLayer, MaplibreStyleLayer, Layer } from 'mobility-toolbox-js/ol'; import { Style, Circle, Stroke, Fill } from 'ol/style'; import VectorLayer from 'ol/layer/Vector'; import VectorSource from 'ol/source/Vector'; @@ -10,13 +10,13 @@ import GeoJSONFormat from 'ol/format/GeoJSON'; import LayerTree from 'react-spatial/components/LayerTree'; import BasicMap from 'react-spatial/components/BasicMap'; -const baseTravic = new MapboxLayer({ +const baseTravic = new MaplibreLayer({ name: 'Base - Bright', group: 'baseLayer', url: `https://maps.geops.io/styles/travic_v2_generalized/style.json?key=${apiKey}`, }); -const stations = new MapboxStyleLayer({ +const stations = new MaplibreStyleLayer({ name: 'Stations', mapboxLayer: baseTravic, styleLayersFilter: (layer) => { @@ -24,7 +24,7 @@ const stations = new MapboxStyleLayer({ } }); -const railLines = new MapboxStyleLayer({ +const railLines = new MaplibreStyleLayer({ name: 'Railways routes', mapboxLayer: baseTravic, styleLayer: { @@ -43,7 +43,7 @@ const railLines = new MapboxStyleLayer({ baseTravic.children = [railLines, stations]; -const baseDark = new MapboxLayer({ +const baseDark = new MaplibreLayer({ name: 'Base - Dark', group: 'baseLayer', visible: false, diff --git a/src/components/MousePosition/README.md b/src/components/MousePosition/README.md index 0f802366..c3c86422 100644 --- a/src/components/MousePosition/README.md +++ b/src/components/MousePosition/README.md @@ -3,7 +3,7 @@ The following example demonstrates the use of MousePosition. ```jsx import React from 'react'; -import { MapboxLayer } from 'mobility-toolbox-js/ol'; +import { MaplibreLayer } from 'mobility-toolbox-js/ol'; import Tile from 'ol/layer/Tile'; import OSM from 'ol/source/OSM'; import Map from 'ol/Map'; @@ -13,7 +13,7 @@ import MousePosition from 'react-spatial/components/MousePosition'; const map = new Map({ controls: [] }); const layers = [ - new MapboxLayer({ + new MaplibreLayer({ url: `https://maps.geops.io/styles/travic_v2/style.json?key=${apiKey}`, }), ]; diff --git a/src/components/NorthArrow/README.md b/src/components/NorthArrow/README.md index d8601d3b..91ffddaf 100644 --- a/src/components/NorthArrow/README.md +++ b/src/components/NorthArrow/README.md @@ -3,7 +3,6 @@ The following example demonstrates the use of NorthArrowExample (Alt + Shift + c ```jsx import React from 'react'; -import { Layer } from 'mobility-toolbox-js/ol'; import Map from 'ol/Map'; import { DragRotate, defaults } from 'ol/interaction'; import Tile from 'ol/layer/Tile'; @@ -18,25 +17,23 @@ const extent = [599500, 199309, 600714, 200002]; const map = new Map({ controls: [] }); const layers = [ - new Layer({ - olLayer: new Tile({ - extent, - source: new TileImageSource({ - tileUrlFunction: c => - '//plans.trafimage.ch/static/tiles/' + - `bern_aussenplan/${c[0]}/${c[1]}/${-c[2]-1}.png`, - tileGrid: new TileGrid({ - origin: [extent[0], extent[1]], - resolutions: [ - 6.927661, - 3.4638305, - 1.73191525, - 0.865957625, - 0.4329788125, - 0.21648940625, - 0.108244703125, - ], - }), + new Tile({ + extent, + source: new TileImageSource({ + tileUrlFunction: c => + '//plans.trafimage.ch/static/tiles/' + + `bern_aussenplan/${c[0]}/${c[1]}/${-c[2]-1}.png`, + tileGrid: new TileGrid({ + origin: [extent[0], extent[1]], + resolutions: [ + 6.927661, + 3.4638305, + 1.73191525, + 0.865957625, + 0.4329788125, + 0.21648940625, + 0.108244703125, + ], }), }), }), diff --git a/src/components/Permalink/Permalink.js b/src/components/Permalink/Permalink.js index 8a991ed2..567f8a77 100644 --- a/src/components/Permalink/Permalink.js +++ b/src/components/Permalink/Permalink.js @@ -2,7 +2,8 @@ import { PureComponent } from "react"; import PropTypes from "prop-types"; import OLMap from "ol/Map"; import { unByKey } from "ol/Observable"; -import { Layer, getLayersAsFlatArray } from "mobility-toolbox-js/ol"; +import { getLayersAsFlatArray } from "mobility-toolbox-js/ol"; +import Layer from "ol/layer/Layer"; const propTypes = { /** @@ -104,7 +105,7 @@ class Permalink extends PureComponent { if (urlParams.get("layers")) { const visibleLayers = urlParams.get("layers").split(","); getLayersAsFlatArray(layers).forEach((l) => { - if (visibleLayers.includes(l.key)) { + if (visibleLayers.includes(l.key || l.get("key"))) { if (l.setVisible) { l.setVisible(true); } else { @@ -114,8 +115,8 @@ class Permalink extends PureComponent { } else if ( !isBaseLayer(l) && !isLayerHidden(l) && - !l.children.some((ll) => { - return ll.visible; + !(l.children || l.get("children")).some((ll) => { + return ll.getVisible ? ll.getVisible() : ll.visible; }) ) { if (l.setVisible) { @@ -137,7 +138,8 @@ class Permalink extends PureComponent { getLayersAsFlatArray(layers) .filter(isBaseLayer) .forEach((baseLayer) => { - const visible = baseLayer.key === visibleBaseLayer; + const key = baseLayer.key || baseLayer.get("key"); + const visible = key === visibleBaseLayer; if (baseLayer.setVisible) { baseLayer.setVisible(visible); } else { @@ -226,17 +228,18 @@ class Permalink extends PureComponent { return isLayerHidden(child); }); const hasVisibleChildren = children.some((child) => { - return child.visible; + return child.getVisible ? child.getVisible() : child.visible; }); + const isVisible = l.getVisible ? l.getVisible() : l.visible; return ( !isBaseLayer(l) && !isLayerHidden(l) && - l.visible && + isVisible && (!hasVisibleChildren || allChildrenHidden) ); }) .map((l) => { - return l.key; + return l.key || l.get("key"); }) .join(); } @@ -248,25 +251,27 @@ class Permalink extends PureComponent { // First baselayers in order of visibility, top layer is first const visibleBaseLayers = ( baseLayers.filter((l) => { - return l.visible; + return l.getVisible ? l.getVisible() : l.visible; }) || [] ).reverse(); const nonVisibleBaseLayers = baseLayers.filter((l) => { - return !l.visible; + return !(l.getVisible ? l.getVisible() : l.visible); }) || []; baseLayersParam = [...visibleBaseLayers, ...nonVisibleBaseLayers] .sort((a, b) => { - if (a.visible === b.visible) { + const aVisible = a.getVisible ? a.getVisible() : a.visible; + const bVisible = b.getVisible ? b.getVisible() : b.visible; + if (aVisible === bVisible) { return 0; } - if (a.visible && !b.visible) { + if (aVisible && !bVisible) { return -1; } return 1; }) .map((l) => { - return l.key; + return l.key || l.get("key"); }) .join(); } diff --git a/src/components/Permalink/Permalink.test.js b/src/components/Permalink/Permalink.test.js index 15a296b1..e6dc84b5 100644 --- a/src/components/Permalink/Permalink.test.js +++ b/src/components/Permalink/Permalink.test.js @@ -3,8 +3,9 @@ import React from "react"; import MapEvent from "ol/MapEvent"; import OLMap from "ol/Map"; import View from "ol/View"; -import { Layer, MapboxLayer } from "mobility-toolbox-js/ol"; +import { MaplibreLayer } from "mobility-toolbox-js/ol"; import { act, render } from "@testing-library/react"; +import Layer from "ol/layer/Layer"; import Permalink from "./Permalink"; const defaultIsLayerHidden = (l) => { @@ -28,34 +29,26 @@ describe("Permalink", () => { name: "Ultimate layer", key: "ultimate.layer", visible: true, - properties: { - hideInLegend: true, - }, + hideInLegend: true, }), new Layer({ name: "Swiss boundaries", key: "swiss.boundaries", visible: false, - properties: { - hideInLegend: true, - }, + hideInLegend: true, }), - new MapboxLayer({ + new MaplibreLayer({ name: "Base - Bright", key: "basebright.baselayer", group: "baseLayer", - properties: { - isBaseLayer: true, - }, + isBaseLayer: true, }), - new MapboxLayer({ + new MaplibreLayer({ name: "Base - Dark", key: "basedark.baselayer", visible: false, group: "baseLayer", - properties: { - isBaseLayer: true, - }, + isBaseLayer: true, }), new Layer({ name: "Layer with children that are hidden", @@ -66,17 +59,13 @@ describe("Permalink", () => { name: "Child 1 hidden", key: "child.hidden.1", visible: true, - properties: { - hideInLegend: true, - }, + hideInLegend: true, }), new Layer({ name: "Childr 2 hidden", key: "child.hidden.2", visible: false, - properties: { - hideInLegend: true, - }, + hideInLegend: true, }), ], }), diff --git a/src/components/Permalink/README.md b/src/components/Permalink/README.md index a4536d79..7550cb5c 100644 --- a/src/components/Permalink/README.md +++ b/src/components/Permalink/README.md @@ -1,6 +1,16 @@ The following example demonstrates the use of Permalink. +The Peramlink component add the following parameters to the url: + +- `x`,`y`,`z`: The center and zoom of the map. +- `layers`: The visible layers of the map. +- `baselayers`: List of all base layers of the map. The first one is currently visible. + +`layers` and `baselayers` uses by default the `key` property of the layers. This key must be unique. + +Which layers appears in `baselayers` or `layers` are defined by the `isBaseLayer` attribute of the component. + ```jsx import React from 'react'; import VectorSource from 'ol/source/Vector'; @@ -9,7 +19,7 @@ import { Style, Circle, Stroke, Fill } from 'ol/style'; import GeoJSONFormat from 'ol/format/GeoJSON'; import { geopsTheme } from '@geops/geops-ui'; import { ThemeProvider } from '@mui/material'; -import { Layer, MapboxLayer } from 'mobility-toolbox-js/ol'; +import { MaplibreLayer } from 'mobility-toolbox-js/ol'; import Button from '@mui/material/Button'; import Permalink from 'react-spatial/components/Permalink'; import BasicMap from 'react-spatial/components/BasicMap'; @@ -17,39 +27,37 @@ import Map from 'ol/Map'; const map = new Map({ controls: [] }); -const swissBoundries = new Layer({ +const swissBoundries = new VectorLayer({ name: 'Swiss boundaries', key: 'swiss.boundaries', visible: true, - olLayer: new VectorLayer({ - source: new VectorSource({ - url: 'https://raw.githubusercontent.com/openlayers/openlayers/' + - '3c64018b3754cf605ea19cbbe4c8813304da2539/examples/data/geojson/' + - 'switzerland.geojson', - format: new GeoJSONFormat(), - }), - style: new Style({ - image: new Circle({ - radius: 5, - fill: new Fill({ - color: '#ff0000', - }), - }), - stroke: new Stroke({ - color: '#ffcc33', - width: 2, - }), + source: new VectorSource({ + url: 'https://raw.githubusercontent.com/openlayers/openlayers/' + + '3c64018b3754cf605ea19cbbe4c8813304da2539/examples/data/geojson/' + + 'switzerland.geojson', + format: new GeoJSONFormat(), + }), + style: new Style({ + image: new Circle({ + radius: 5, + fill: new Fill({ + color: '#ff0000', }), - }) + }), + stroke: new Stroke({ + color: '#ffcc33', + width: 2, + }), + }), }); const baseLayers = [ - new MapboxLayer({ + new MaplibreLayer({ url: `https://maps.geops.io/styles/base_bright_v2/style.json?key=${apiKey}`, name: 'Base - Bright', key: 'basebright.baselayer', }), - new MapboxLayer({ + new MaplibreLayer({ url: `https://maps.geops.io/styles/base_dark_v2/style.json?key=${apiKey}`, name: 'Base - Dark', key: 'basedark.baselayer', @@ -84,19 +92,19 @@ const layers = [...baseLayers, swissBoundries];