react-spatial 1.12.2 → 1.12.3-beta.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +3 -3
- package/components/BaseLayerSwitcher/BaseLayerSwitcher.js +43 -39
- package/components/BaseLayerSwitcher/BaseLayerSwitcher.js.map +2 -2
- package/components/BasicMap/BasicMap.js +8 -20
- package/components/BasicMap/BasicMap.js.map +2 -2
- package/components/Copyright/Copyright.js +15 -26
- package/components/Copyright/Copyright.js.map +2 -2
- package/components/FeatureExportButton/FeatureExportButton.js +3 -3
- package/components/FeatureExportButton/FeatureExportButton.js.map +2 -2
- package/components/LayerTree/LayerTree.js +113 -37
- package/components/LayerTree/LayerTree.js.map +2 -2
- package/components/Permalink/Permalink.js +19 -14
- package/components/Permalink/Permalink.js.map +2 -2
- package/components/StopsFinder/StopsFinder.js +25 -31
- package/components/StopsFinder/StopsFinder.js.map +2 -2
- package/package.json +8 -11
- package/utils/KML.js +3 -3
- package/utils/KML.js.map +2 -2
- package/utils/getLayersAsFlatArray.js +14 -0
- package/utils/getLayersAsFlatArray.js.map +7 -0
- package/images/baselayer/osm.baselayer.hot.png +0 -0
- package/images/baselayer/osm.baselayer.png +0 -0
package/README.md
CHANGED
|
@@ -5,9 +5,9 @@
|
|
|
5
5
|
[](https://github.com/prettier/prettier)
|
|
6
6
|

|
|
7
7
|
|
|
8
|
-
This library provides React components to build web applications and to visualize real-time geographical information based on [OpenLayers](https://openlayers.org/) and [
|
|
8
|
+
This library provides React components to build web applications and to visualize real-time geographical information based on [OpenLayers](https://openlayers.org/) and [MapLibre GL JS](https://maplibre.org/maplibre-gl-js/).
|
|
9
9
|
|
|
10
|
-
This library uses the [mobility-toolbox-js](https://mobility-toolbox-js.geops.io/) library.
|
|
10
|
+
This library uses the [mobility-toolbox-js](https://mobility-toolbox-js.geops.io/) library for some components.
|
|
11
11
|
|
|
12
12
|
Documentation and examples at https://react-spatial.geops.io.
|
|
13
13
|
|
|
@@ -16,7 +16,7 @@ Documentation and examples at https://react-spatial.geops.io.
|
|
|
16
16
|
Install the [react-spatial](https://www.npmjs.com/package/react-spatial) package:
|
|
17
17
|
|
|
18
18
|
```bash
|
|
19
|
-
yarn add mobility-toolbox-js
|
|
19
|
+
yarn add maplibre-gl ol mobility-toolbox-js react-spatial
|
|
20
20
|
```
|
|
21
21
|
|
|
22
22
|
Your build pipeline needs to support ES6 modules and SASS.
|
|
@@ -1,13 +1,9 @@
|
|
|
1
|
-
import
|
|
1
|
+
import Layer from "ol/layer/Layer";
|
|
2
2
|
import { unByKey } from "ol/Observable";
|
|
3
3
|
import PropTypes from "prop-types";
|
|
4
4
|
import React, { useEffect, useState } from "react";
|
|
5
5
|
import { FaChevronLeft } from "react-icons/fa";
|
|
6
6
|
const propTypes = {
|
|
7
|
-
/**
|
|
8
|
-
* Alternative text rendered if layer images can't be loaded
|
|
9
|
-
*/
|
|
10
|
-
altText: PropTypes.string,
|
|
11
7
|
/**
|
|
12
8
|
* CSS class to apply on the container.
|
|
13
9
|
*/
|
|
@@ -16,6 +12,14 @@ const propTypes = {
|
|
|
16
12
|
* Image (node) rendered in the switcher close button.
|
|
17
13
|
*/
|
|
18
14
|
closeButtonImage: PropTypes.node,
|
|
15
|
+
/**
|
|
16
|
+
* Function that returns the alternative text if the layer's image is not found.
|
|
17
|
+
*/
|
|
18
|
+
getAltText: PropTypes.func,
|
|
19
|
+
/**
|
|
20
|
+
* Function that returns the label to display att the bootm of the layer's image and as title attribute.
|
|
21
|
+
*/
|
|
22
|
+
getLayerLabel: PropTypes.func,
|
|
19
23
|
/**
|
|
20
24
|
* Object containing relative paths to the base layer images. Object
|
|
21
25
|
* keys need to correspond to layer keys
|
|
@@ -40,11 +44,6 @@ const propTypes = {
|
|
|
40
44
|
* @param {function} Callback function triggered when a switcher button is clicked. Takes the event as argument.
|
|
41
45
|
*/
|
|
42
46
|
onSwitcherButtonClick: PropTypes.func,
|
|
43
|
-
/**
|
|
44
|
-
* Translation function.
|
|
45
|
-
* @param {function} Translation function returning the translated string.
|
|
46
|
-
*/
|
|
47
|
-
t: PropTypes.func,
|
|
48
47
|
/**
|
|
49
48
|
* Button titles.
|
|
50
49
|
*/
|
|
@@ -56,7 +55,7 @@ const propTypes = {
|
|
|
56
55
|
};
|
|
57
56
|
const getVisibleLayer = (layers) => {
|
|
58
57
|
return layers.find((layer) => {
|
|
59
|
-
return layer.visible;
|
|
58
|
+
return layer.getVisible ? layer.getVisible() : layer.visible;
|
|
60
59
|
});
|
|
61
60
|
};
|
|
62
61
|
const getNextImage = (currentLayer, layers, layerImages) => {
|
|
@@ -99,21 +98,28 @@ CloseButton.propTypes = {
|
|
|
99
98
|
tabIndex: PropTypes.string.isRequired,
|
|
100
99
|
title: PropTypes.string.isRequired
|
|
101
100
|
};
|
|
101
|
+
const defaultTitles = {
|
|
102
|
+
button: "Base layers",
|
|
103
|
+
closeSwitcher: "Close Baselayer-Switcher",
|
|
104
|
+
openSwitcher: "Open Baselayer-Switcher"
|
|
105
|
+
};
|
|
106
|
+
const getDefaultLabel = (layer) => {
|
|
107
|
+
return layer?.get("name") || "";
|
|
108
|
+
};
|
|
109
|
+
const getDefaultAltText = () => {
|
|
110
|
+
return "Source not found";
|
|
111
|
+
};
|
|
102
112
|
function BaseLayerSwitcher({
|
|
103
|
-
altText = "Source not found",
|
|
104
113
|
className = "rs-base-layer-switcher",
|
|
105
114
|
closeButtonImage = /* @__PURE__ */ React.createElement(FaChevronLeft, null),
|
|
106
|
-
|
|
115
|
+
getAltText = getDefaultAltText,
|
|
116
|
+
getLayerLabel = getDefaultLabel,
|
|
117
|
+
layerImages,
|
|
107
118
|
layers,
|
|
108
|
-
onCloseButtonClick
|
|
109
|
-
onLayerButtonClick
|
|
110
|
-
onSwitcherButtonClick
|
|
111
|
-
|
|
112
|
-
titles = {
|
|
113
|
-
button: "Base layers",
|
|
114
|
-
closeSwitcher: "Close Baselayer-Switcher",
|
|
115
|
-
openSwitcher: "Open Baselayer-Switcher"
|
|
116
|
-
}
|
|
119
|
+
onCloseButtonClick,
|
|
120
|
+
onLayerButtonClick,
|
|
121
|
+
onSwitcherButtonClick,
|
|
122
|
+
titles = defaultTitles
|
|
117
123
|
}) {
|
|
118
124
|
const [switcherOpen, setSwitcherOpen] = useState(false);
|
|
119
125
|
const [isClosed, setIsClosed] = useState(true);
|
|
@@ -129,7 +135,7 @@ function BaseLayerSwitcher({
|
|
|
129
135
|
const hiddenStyle = switcherOpen && !isClosed ? "visible" : "hidden";
|
|
130
136
|
const handleSwitcherClick = (evt) => {
|
|
131
137
|
const nextLayer = layers.find((layer) => {
|
|
132
|
-
return !layer.visible;
|
|
138
|
+
return !(layer.getVisible ? layer.getVisible() : layer.visible);
|
|
133
139
|
});
|
|
134
140
|
const onButtonClick = layers.length === 2 ? onLayerButtonClick : onSwitcherButtonClick;
|
|
135
141
|
if (onButtonClick) {
|
|
@@ -200,7 +206,8 @@ function BaseLayerSwitcher({
|
|
|
200
206
|
useEffect(() => {
|
|
201
207
|
const olKeys = (layers || []).map((layer) => {
|
|
202
208
|
return layer.on("change:visible", (evt) => {
|
|
203
|
-
|
|
209
|
+
const vis = evt.target.getVisible ? evt.target.getVisible() : evt.target.visible;
|
|
210
|
+
if (vis && currentLayer !== evt.target) {
|
|
204
211
|
setCurrentLayer(evt.target);
|
|
205
212
|
}
|
|
206
213
|
});
|
|
@@ -212,6 +219,9 @@ function BaseLayerSwitcher({
|
|
|
212
219
|
if (!layers || layers.length < 2 || !currentLayer) {
|
|
213
220
|
return null;
|
|
214
221
|
}
|
|
222
|
+
const firstNonVisibleLayer = layers.find((layer) => {
|
|
223
|
+
return !(layer.getVisible ? layer.getVisible() : layer.visible);
|
|
224
|
+
});
|
|
215
225
|
return /* @__PURE__ */ React.createElement("div", { className: `${className}${openClass}` }, /* @__PURE__ */ React.createElement(
|
|
216
226
|
"div",
|
|
217
227
|
{
|
|
@@ -228,19 +238,13 @@ function BaseLayerSwitcher({
|
|
|
228
238
|
tabIndex: "0",
|
|
229
239
|
title: titles.openSwitcher
|
|
230
240
|
},
|
|
231
|
-
/* @__PURE__ */ React.createElement("div", { className: "rs-base-layer-switcher-title" }, layers.length !== 2 ? titles.button :
|
|
232
|
-
|
|
233
|
-
}) && t(
|
|
234
|
-
layers.find((layer) => {
|
|
235
|
-
return !layer.visible;
|
|
236
|
-
}).name
|
|
237
|
-
)),
|
|
238
|
-
nextImage ? null : /* @__PURE__ */ React.createElement("span", { className: "rs-alt-text" }, t(altText))
|
|
241
|
+
/* @__PURE__ */ React.createElement("div", { className: "rs-base-layer-switcher-title" }, layers.length !== 2 ? titles.button : firstNonVisibleLayer && getLayerLabel(firstNonVisibleLayer)),
|
|
242
|
+
nextImage ? null : /* @__PURE__ */ React.createElement("span", { className: "rs-alt-text" }, getAltText(firstNonVisibleLayer))
|
|
239
243
|
), layers.map((layer, idx) => {
|
|
240
|
-
const layerName = layer
|
|
241
|
-
const activeClass = layerName === currentLayer.name ? " rs-active" : "";
|
|
244
|
+
const layerName = getLayerLabel(layer);
|
|
245
|
+
const activeClass = layerName === currentLayer.get("name") ? " rs-active" : "";
|
|
242
246
|
const imageStyle = getImageStyle(
|
|
243
|
-
layerImages ? layerImages[`${layer.key}`] : layer.get("previewImage")
|
|
247
|
+
layerImages ? layerImages[`${layer.get("key") || layer.key}`] : layer.get("previewImage")
|
|
244
248
|
);
|
|
245
249
|
return /* @__PURE__ */ React.createElement(
|
|
246
250
|
"div",
|
|
@@ -257,7 +261,7 @@ function BaseLayerSwitcher({
|
|
|
257
261
|
/* @__PURE__ */ React.createElement(
|
|
258
262
|
"div",
|
|
259
263
|
{
|
|
260
|
-
"aria-label":
|
|
264
|
+
"aria-label": layerName,
|
|
261
265
|
className: `rs-base-layer-switcher-button${openClass}`,
|
|
262
266
|
onClick: (evt) => {
|
|
263
267
|
return onLayerSelect(layer, evt);
|
|
@@ -270,10 +274,10 @@ function BaseLayerSwitcher({
|
|
|
270
274
|
role: "button",
|
|
271
275
|
style: imageStyle,
|
|
272
276
|
tabIndex: switcherOpen ? "0" : "-1",
|
|
273
|
-
title:
|
|
277
|
+
title: layerName
|
|
274
278
|
},
|
|
275
|
-
/* @__PURE__ */ React.createElement("div", { className: `rs-base-layer-switcher-title${activeClass}` },
|
|
276
|
-
imageStyle ? null : /* @__PURE__ */ React.createElement("span", { className: "rs-alt-text" },
|
|
279
|
+
/* @__PURE__ */ React.createElement("div", { className: `rs-base-layer-switcher-title${activeClass}` }, layerName),
|
|
280
|
+
imageStyle ? null : /* @__PURE__ */ React.createElement("span", { className: "rs-alt-text" }, getAltText(layer))
|
|
277
281
|
)
|
|
278
282
|
);
|
|
279
283
|
}), /* @__PURE__ */ React.createElement(
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/BaseLayerSwitcher/BaseLayerSwitcher.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable jsx-a11y/interactive-supports-focus */\nimport { Layer } from \"mobility-toolbox-js/ol\";\nimport { unByKey } from \"ol/Observable\";\nimport PropTypes from \"prop-types\";\nimport React, { useEffect, useState } from \"react\";\nimport { FaChevronLeft } from \"react-icons/fa\";\n\nconst propTypes = {\n /**\n * Alternative text rendered if layer images can't be loaded\n */\n altText: PropTypes.string,\n\n /**\n * CSS class to apply on the container.\n */\n className: PropTypes.string,\n\n /**\n * Image (node) rendered in the switcher close button.\n */\n closeButtonImage: PropTypes.node,\n\n /**\n * Object containing relative paths to the base layer images. Object\n * keys need to correspond to layer keys\n */\n layerImages: PropTypes.objectOf(PropTypes.string),\n\n /**\n * An array of [mobility-toolbox-js layers](https://mobility-toolbox-js.geops.io/api/identifiers%20html#ol-layers).\n */\n layers: PropTypes.arrayOf(PropTypes.instanceOf(Layer)).isRequired,\n\n /**\n * Callback function on close button click.\n * @param {function} Callback function triggered when a switcher button is clicked. Takes the event as argument.\n */\n onCloseButtonClick: PropTypes.func,\n\n /**\n * Callback function on layer button click.\n * @param {function} Callback function triggered when a switcher button is clicked. Takes the event and the layer as arguments.\n */\n onLayerButtonClick: PropTypes.func,\n\n /**\n * Callback function on main switcher button click.\n * @param {function} Callback function triggered when a switcher button is clicked. Takes the event as argument.\n */\n onSwitcherButtonClick: PropTypes.func,\n\n /**\n * Translation function.\n * @param {function} Translation function returning the translated string.\n */\n t: PropTypes.func,\n\n /**\n * Button titles.\n */\n titles: PropTypes.shape({\n button: PropTypes.string,\n closeSwitcher: PropTypes.string,\n openSwitcher: PropTypes.string,\n }),\n};\n\nconst getVisibleLayer = (layers) => {\n return layers.find((layer) => {\n return layer.visible;\n });\n};\n\nconst getNextImage = (currentLayer, layers, layerImages) => {\n const currentIndex = layers.indexOf(\n layers.find((layer) => {\n return layer === currentLayer;\n }),\n );\n const nextIndex = currentIndex + 1 === layers.length ? 0 : currentIndex + 1;\n return layerImages[nextIndex];\n};\n\nconst getImageStyle = (url) => {\n return url\n ? {\n backgroundImage: `url(${url})`,\n backgroundPosition: \"center\",\n backgroundRepeat: \"no-repeat\",\n backgroundSize: \"cover\",\n }\n : null;\n};\n\nfunction CloseButton({ children, onClick, tabIndex, title }) {\n return (\n <div\n aria-label={title}\n className=\"rs-base-layer-switcher-close-btn\"\n onClick={onClick}\n onKeyPress={(e) => {\n return e.which === 13 && onClick();\n }}\n role=\"button\"\n tabIndex={tabIndex}\n title={title}\n >\n {children}\n </div>\n );\n}\n\nCloseButton.propTypes = {\n children: PropTypes.node.isRequired,\n onClick: PropTypes.func.isRequired,\n tabIndex: PropTypes.string.isRequired,\n title: PropTypes.string.isRequired,\n};\n\n/**\n * The BaseLayerSwitcher component renders a button interface for switching the visible\n * [mobility-toolbox-js layer](https://mobility-toolbox-js.geops.io/api/identifiers%20html#ol-layers)\n * when defined as base layer.\n */\n\nfunction BaseLayerSwitcher({\n altText = \"Source not found\",\n className = \"rs-base-layer-switcher\",\n closeButtonImage = <FaChevronLeft />,\n layerImages = undefined,\n layers,\n onCloseButtonClick = null,\n onLayerButtonClick = null,\n onSwitcherButtonClick = null,\n t = (s) => s,\n titles = {\n button: \"Base layers\",\n closeSwitcher: \"Close Baselayer-Switcher\",\n openSwitcher: \"Open Baselayer-Switcher\",\n },\n}) {\n const [switcherOpen, setSwitcherOpen] = useState(false);\n const [isClosed, setIsClosed] = useState(true);\n const [currentLayer, setCurrentLayer] = useState(\n getVisibleLayer(layers) || layers[0],\n );\n\n /* Images are loaded from props if provided, fallback from layer */\n const images = layerImages\n ? Object.keys(layerImages).map((layerImage) => {\n return layerImages[layerImage];\n })\n : layers.map((layer) => {\n return layer.get(\"previewImage\");\n });\n\n const openClass = switcherOpen ? \" rs-open\" : \"\";\n const hiddenStyle = switcherOpen && !isClosed ? \"visible\" : \"hidden\";\n\n const handleSwitcherClick = (evt) => {\n const nextLayer = layers.find((layer) => {\n return !layer.visible;\n });\n const onButtonClick =\n layers.length === 2 ? onLayerButtonClick : onSwitcherButtonClick;\n if (onButtonClick) {\n onButtonClick(evt, nextLayer);\n }\n if (layers.length === 2) {\n /* On only two layer options the opener becomes a layer toggle button */\n if (currentLayer.setVisible) {\n currentLayer.setVisible(false);\n } else {\n currentLayer.visible = false;\n }\n setCurrentLayer(nextLayer);\n if (nextLayer.setVisible) {\n nextLayer.setVisible(true);\n } else {\n nextLayer.visible = true;\n }\n return;\n }\n // eslint-disable-next-line consistent-return\n return setSwitcherOpen(true) && setIsClosed(false);\n };\n\n const onLayerSelect = (layer, evt) => {\n if (onLayerButtonClick) {\n onLayerButtonClick(evt, layer);\n }\n if (!switcherOpen) {\n setSwitcherOpen(true);\n return;\n }\n setCurrentLayer(layer);\n if (layer.setVisible) {\n layer.setVisible(true);\n } else {\n // eslint-disable-next-line no-param-reassign\n layer.visible = true;\n }\n layers\n .filter((l) => {\n return l !== layer;\n })\n .forEach((l) => {\n if (l.setVisible) {\n l.setVisible(false);\n } else {\n // eslint-disable-next-line no-param-reassign\n l.visible = false;\n }\n });\n setSwitcherOpen(false);\n };\n\n /* Get next image for closed button */\n const nextImage = getNextImage(currentLayer, layers, images);\n\n useEffect(() => {\n /* Ensure correct layer is active on app load */\n if (currentLayer !== getVisibleLayer(layers)) {\n setCurrentLayer(getVisibleLayer(layers) || layers[0]);\n }\n }, [currentLayer, layers]);\n\n useEffect(() => {\n /* Used for correct layer image render with animation */\n let timeout;\n if (!switcherOpen) {\n timeout = setTimeout(() => {\n setIsClosed(true);\n }, 200);\n } else {\n timeout = setTimeout(() => {\n setIsClosed(false);\n }, 800);\n }\n return () => {\n return clearTimeout(timeout);\n };\n }, [switcherOpen]);\n\n useEffect(() => {\n // Update the layer selected when a visibility changes.\n const olKeys = (layers || []).map((layer) => {\n return layer.on(\"change:visible\", (evt) => {\n if (evt.target.visible && currentLayer !== evt.target) {\n setCurrentLayer(evt.target);\n }\n });\n });\n return () => {\n unByKey(olKeys);\n };\n }, [currentLayer, layers]);\n\n if (!layers || layers.length < 2 || !currentLayer) {\n return null;\n }\n\n return (\n <div className={`${className}${openClass}`}>\n <div\n aria-label={titles.openSwitcher}\n className={`rs-base-layer-switcher-button rs-opener${openClass}`}\n onClick={handleSwitcherClick}\n onKeyPress={(e) => {\n if (e.which === 13) {\n handleSwitcherClick();\n }\n }}\n role=\"button\"\n style={getImageStyle(nextImage)}\n tabIndex=\"0\"\n title={titles.openSwitcher}\n >\n <div className=\"rs-base-layer-switcher-title\">\n {layers.length !== 2\n ? titles.button\n : layers.find((layer) => {\n return !layer.visible;\n }) &&\n t(\n layers.find((layer) => {\n return !layer.visible;\n }).name,\n )}\n </div>\n {nextImage ? null : <span className=\"rs-alt-text\">{t(altText)}</span>}\n </div>\n {layers.map((layer, idx) => {\n const layerName = layer.name;\n const activeClass = layerName === currentLayer.name ? \" rs-active\" : \"\";\n const imageStyle = getImageStyle(\n layerImages ? layerImages[`${layer.key}`] : layer.get(\"previewImage\"),\n );\n return (\n <div\n className=\"rs-base-layer-switcher-btn-wrapper\"\n key={layer.key}\n style={{\n /* stylelint-disable-next-line value-keyword-case */\n overflow: hiddenStyle,\n /* stylelint-disable-next-line value-keyword-case */\n zIndex: layers.length - idx,\n }}\n >\n <div\n aria-label={t(layerName)}\n className={`rs-base-layer-switcher-button${openClass}`}\n onClick={(evt) => {\n return onLayerSelect(layer, evt);\n }}\n onKeyPress={(evt) => {\n if (evt.which === 13) {\n onLayerSelect(layer, evt);\n }\n }}\n role=\"button\"\n style={imageStyle}\n tabIndex={switcherOpen ? \"0\" : \"-1\"}\n title={t(layerName)}\n >\n <div className={`rs-base-layer-switcher-title${activeClass}`}>\n {t(layerName)}\n </div>\n {imageStyle ? null : (\n <span className=\"rs-alt-text\">{t(altText)}</span>\n )}\n </div>\n </div>\n );\n })}\n <CloseButton\n onClick={(evt) => {\n if (onCloseButtonClick) {\n onCloseButtonClick(evt);\n }\n setSwitcherOpen(false);\n }}\n tabIndex={switcherOpen ? \"0\" : \"-1\"}\n title={titles.closeSwitcher}\n >\n {closeButtonImage}\n </CloseButton>\n </div>\n );\n}\n\nBaseLayerSwitcher.propTypes = propTypes;\n\nexport default BaseLayerSwitcher;\n"],
|
|
5
|
-
"mappings": "
|
|
4
|
+
"sourcesContent": ["import Layer from \"ol/layer/Layer\";\nimport { unByKey } from \"ol/Observable\";\nimport PropTypes from \"prop-types\";\n/* eslint-disable jsx-a11y/interactive-supports-focus */\nimport React, { useEffect, useState } from \"react\";\nimport { FaChevronLeft } from \"react-icons/fa\";\n\nconst propTypes = {\n /**\n * CSS class to apply on the container.\n */\n className: PropTypes.string,\n\n /**\n * Image (node) rendered in the switcher close button.\n */\n closeButtonImage: PropTypes.node,\n\n /**\n * Function that returns the alternative text if the layer's image is not found.\n */\n getAltText: PropTypes.func,\n\n /**\n * Function that returns the label to display att the bootm of the layer's image and as title attribute.\n */\n getLayerLabel: PropTypes.func,\n\n /**\n * Object containing relative paths to the base layer images. Object\n * keys need to correspond to layer keys\n */\n layerImages: PropTypes.objectOf(PropTypes.string),\n\n /**\n * An array of [mobility-toolbox-js layers](https://mobility-toolbox-js.geops.io/api/identifiers%20html#ol-layers).\n */\n layers: PropTypes.arrayOf(PropTypes.instanceOf(Layer)).isRequired,\n\n /**\n * Callback function on close button click.\n * @param {function} Callback function triggered when a switcher button is clicked. Takes the event as argument.\n */\n onCloseButtonClick: PropTypes.func,\n\n /**\n * Callback function on layer button click.\n * @param {function} Callback function triggered when a switcher button is clicked. Takes the event and the layer as arguments.\n */\n onLayerButtonClick: PropTypes.func,\n\n /**\n * Callback function on main switcher button click.\n * @param {function} Callback function triggered when a switcher button is clicked. Takes the event as argument.\n */\n onSwitcherButtonClick: PropTypes.func,\n\n /**\n * Button titles.\n */\n titles: PropTypes.shape({\n button: PropTypes.string,\n closeSwitcher: PropTypes.string,\n openSwitcher: PropTypes.string,\n }),\n};\n\nconst getVisibleLayer = (layers) => {\n return layers.find((layer) => {\n return layer.getVisible ? layer.getVisible() : layer.visible;\n });\n};\n\nconst getNextImage = (currentLayer, layers, layerImages) => {\n const currentIndex = layers.indexOf(\n layers.find((layer) => {\n return layer === currentLayer;\n }),\n );\n const nextIndex = currentIndex + 1 === layers.length ? 0 : currentIndex + 1;\n return layerImages[nextIndex];\n};\n\nconst getImageStyle = (url) => {\n return url\n ? {\n backgroundImage: `url(${url})`,\n backgroundPosition: \"center\",\n backgroundRepeat: \"no-repeat\",\n backgroundSize: \"cover\",\n }\n : null;\n};\n\nfunction CloseButton({ children, onClick, tabIndex, title }) {\n return (\n <div\n aria-label={title}\n className=\"rs-base-layer-switcher-close-btn\"\n onClick={onClick}\n onKeyPress={(e) => {\n return e.which === 13 && onClick();\n }}\n role=\"button\"\n tabIndex={tabIndex}\n title={title}\n >\n {children}\n </div>\n );\n}\n\nCloseButton.propTypes = {\n children: PropTypes.node.isRequired,\n onClick: PropTypes.func.isRequired,\n tabIndex: PropTypes.string.isRequired,\n title: PropTypes.string.isRequired,\n};\n\nconst defaultTitles = {\n button: \"Base layers\",\n closeSwitcher: \"Close Baselayer-Switcher\",\n openSwitcher: \"Open Baselayer-Switcher\",\n};\n\nconst getDefaultLabel = (layer) => {\n return layer?.get(\"name\") || \"\";\n};\n\nconst getDefaultAltText = () => {\n return \"Source not found\";\n};\n\n/**\n * The BaseLayerSwitcher component renders a button interface for switching the visible\n * when defined as base layer.\n */\n\nfunction BaseLayerSwitcher({\n className = \"rs-base-layer-switcher\",\n closeButtonImage = <FaChevronLeft />,\n getAltText = getDefaultAltText,\n getLayerLabel = getDefaultLabel,\n layerImages,\n layers,\n onCloseButtonClick,\n onLayerButtonClick,\n onSwitcherButtonClick,\n titles = defaultTitles,\n}) {\n const [switcherOpen, setSwitcherOpen] = useState(false);\n const [isClosed, setIsClosed] = useState(true);\n const [currentLayer, setCurrentLayer] = useState(\n getVisibleLayer(layers) || layers[0],\n );\n\n /* Images are loaded from props if provided, fallback from layer */\n const images = layerImages\n ? Object.keys(layerImages).map((layerImage) => {\n return layerImages[layerImage];\n })\n : layers.map((layer) => {\n return layer.get(\"previewImage\");\n });\n\n const openClass = switcherOpen ? \" rs-open\" : \"\";\n const hiddenStyle = switcherOpen && !isClosed ? \"visible\" : \"hidden\";\n\n const handleSwitcherClick = (evt) => {\n const nextLayer = layers.find((layer) => {\n return !(layer.getVisible ? layer.getVisible() : layer.visible);\n });\n const onButtonClick =\n layers.length === 2 ? onLayerButtonClick : onSwitcherButtonClick;\n if (onButtonClick) {\n onButtonClick(evt, nextLayer);\n }\n if (layers.length === 2) {\n /* On only two layer options the opener becomes a layer toggle button */\n if (currentLayer.setVisible) {\n currentLayer.setVisible(false);\n } else {\n currentLayer.visible = false;\n }\n setCurrentLayer(nextLayer);\n if (nextLayer.setVisible) {\n nextLayer.setVisible(true);\n } else {\n nextLayer.visible = true;\n }\n return;\n }\n // eslint-disable-next-line consistent-return\n return setSwitcherOpen(true) && setIsClosed(false);\n };\n\n const onLayerSelect = (layer, evt) => {\n if (onLayerButtonClick) {\n onLayerButtonClick(evt, layer);\n }\n if (!switcherOpen) {\n setSwitcherOpen(true);\n return;\n }\n setCurrentLayer(layer);\n if (layer.setVisible) {\n layer.setVisible(true);\n } else {\n // eslint-disable-next-line no-param-reassign\n layer.visible = true;\n }\n layers\n .filter((l) => {\n return l !== layer;\n })\n .forEach((l) => {\n if (l.setVisible) {\n l.setVisible(false);\n } else {\n // eslint-disable-next-line no-param-reassign\n l.visible = false;\n }\n });\n setSwitcherOpen(false);\n };\n\n /* Get next image for closed button */\n const nextImage = getNextImage(currentLayer, layers, images);\n\n useEffect(() => {\n /* Ensure correct layer is active on app load */\n if (currentLayer !== getVisibleLayer(layers)) {\n setCurrentLayer(getVisibleLayer(layers) || layers[0]);\n }\n }, [currentLayer, layers]);\n\n useEffect(() => {\n /* Used for correct layer image render with animation */\n let timeout;\n if (!switcherOpen) {\n timeout = setTimeout(() => {\n setIsClosed(true);\n }, 200);\n } else {\n timeout = setTimeout(() => {\n setIsClosed(false);\n }, 800);\n }\n return () => {\n return clearTimeout(timeout);\n };\n }, [switcherOpen]);\n\n useEffect(() => {\n // Update the layer selected when a visibility changes.\n const olKeys = (layers || []).map((layer) => {\n return layer.on(\"change:visible\", (evt) => {\n const vis = evt.target.getVisible\n ? evt.target.getVisible()\n : evt.target.visible;\n if (vis && currentLayer !== evt.target) {\n setCurrentLayer(evt.target);\n }\n });\n });\n return () => {\n unByKey(olKeys);\n };\n }, [currentLayer, layers]);\n\n if (!layers || layers.length < 2 || !currentLayer) {\n return null;\n }\n\n const firstNonVisibleLayer = layers.find((layer) => {\n return !(layer.getVisible ? layer.getVisible() : layer.visible);\n });\n\n return (\n <div className={`${className}${openClass}`}>\n <div\n aria-label={titles.openSwitcher}\n className={`rs-base-layer-switcher-button rs-opener${openClass}`}\n onClick={handleSwitcherClick}\n onKeyPress={(e) => {\n if (e.which === 13) {\n handleSwitcherClick();\n }\n }}\n role=\"button\"\n style={getImageStyle(nextImage)}\n tabIndex=\"0\"\n title={titles.openSwitcher}\n >\n <div className=\"rs-base-layer-switcher-title\">\n {layers.length !== 2\n ? titles.button\n : firstNonVisibleLayer && getLayerLabel(firstNonVisibleLayer)}\n </div>\n {nextImage ? null : (\n <span className=\"rs-alt-text\">\n {getAltText(firstNonVisibleLayer)}\n </span>\n )}\n </div>\n {layers.map((layer, idx) => {\n const layerName = getLayerLabel(layer);\n const activeClass =\n layerName === currentLayer.get(\"name\") ? \" rs-active\" : \"\";\n const imageStyle = getImageStyle(\n layerImages\n ? layerImages[`${layer.get(\"key\") || layer.key}`]\n : layer.get(\"previewImage\"),\n );\n return (\n <div\n className=\"rs-base-layer-switcher-btn-wrapper\"\n key={layer.key}\n style={{\n /* stylelint-disable-next-line value-keyword-case */\n overflow: hiddenStyle,\n /* stylelint-disable-next-line value-keyword-case */\n zIndex: layers.length - idx,\n }}\n >\n <div\n aria-label={layerName}\n className={`rs-base-layer-switcher-button${openClass}`}\n onClick={(evt) => {\n return onLayerSelect(layer, evt);\n }}\n onKeyPress={(evt) => {\n if (evt.which === 13) {\n onLayerSelect(layer, evt);\n }\n }}\n role=\"button\"\n style={imageStyle}\n tabIndex={switcherOpen ? \"0\" : \"-1\"}\n title={layerName}\n >\n <div className={`rs-base-layer-switcher-title${activeClass}`}>\n {layerName}\n </div>\n {imageStyle ? null : (\n <span className=\"rs-alt-text\">{getAltText(layer)}</span>\n )}\n </div>\n </div>\n );\n })}\n <CloseButton\n onClick={(evt) => {\n if (onCloseButtonClick) {\n onCloseButtonClick(evt);\n }\n setSwitcherOpen(false);\n }}\n tabIndex={switcherOpen ? \"0\" : \"-1\"}\n title={titles.closeSwitcher}\n >\n {closeButtonImage}\n </CloseButton>\n </div>\n );\n}\n\nBaseLayerSwitcher.propTypes = propTypes;\n\nexport default BaseLayerSwitcher;\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import { Layer } from "mobility-toolbox-js/ol";
|
|
2
1
|
import OLCollection from "ol/Collection";
|
|
3
2
|
import { equals } from "ol/extent";
|
|
4
3
|
import { defaults as defaultInteractions } from "ol/interaction";
|
|
5
4
|
import Interaction from "ol/interaction/Interaction";
|
|
5
|
+
import Layer from "ol/layer/Layer";
|
|
6
6
|
import OLMap from "ol/Map";
|
|
7
7
|
import { unByKey } from "ol/Observable";
|
|
8
8
|
import View from "ol/View";
|
|
@@ -39,7 +39,7 @@ const propTypes = {
|
|
|
39
39
|
PropTypes.arrayOf(PropTypes.instanceOf(Interaction)),
|
|
40
40
|
PropTypes.instanceOf(OLCollection)
|
|
41
41
|
]),
|
|
42
|
-
/** Array of
|
|
42
|
+
/** Array of Openlayers layers */
|
|
43
43
|
layers: PropTypes.arrayOf(PropTypes.instanceOf(Layer)),
|
|
44
44
|
/** An [ol/map](https://openlayers.org/en/latest/apidoc/module-ol_Map-Map.html). */
|
|
45
45
|
map: PropTypes.instanceOf(OLMap),
|
|
@@ -213,16 +213,10 @@ class BasicMap extends PureComponent {
|
|
|
213
213
|
unByKey([this.moveEndRef, this.singleClickRef, this.pointerMoveRef]);
|
|
214
214
|
}
|
|
215
215
|
initLayer(layer) {
|
|
216
|
-
if (
|
|
217
|
-
|
|
216
|
+
if (!this.map?.getLayers()?.getArray()?.includes(layer)) {
|
|
217
|
+
this.map.addLayer(layer);
|
|
218
218
|
}
|
|
219
|
-
|
|
220
|
-
layer.init(this.map);
|
|
221
|
-
}
|
|
222
|
-
if (layer.olLayer && this.map.getLayers() && !this.map.getLayers().getArray().includes(layer.olLayer)) {
|
|
223
|
-
this.map.addLayer(layer.olLayer);
|
|
224
|
-
}
|
|
225
|
-
const layers = layer.children || [];
|
|
219
|
+
const layers = layer.get("children") || layer.children || [];
|
|
226
220
|
for (let i = 0; i < layers.length; i += 1) {
|
|
227
221
|
this.initLayer(layers[i]);
|
|
228
222
|
}
|
|
@@ -288,18 +282,12 @@ class BasicMap extends PureComponent {
|
|
|
288
282
|
this.setState({ node });
|
|
289
283
|
}
|
|
290
284
|
terminateLayer(layer) {
|
|
291
|
-
const layers = layer.children || [];
|
|
285
|
+
const layers = layer.get("children") || layer.children || [];
|
|
292
286
|
for (let i = 0; i < layers.length; i += 1) {
|
|
293
287
|
this.terminateLayer(layers[i]);
|
|
294
288
|
}
|
|
295
|
-
if (
|
|
296
|
-
this.map.removeLayer(layer
|
|
297
|
-
}
|
|
298
|
-
if (layer.terminate) {
|
|
299
|
-
layer.terminate(this.map);
|
|
300
|
-
}
|
|
301
|
-
if (layer.detachFromMap) {
|
|
302
|
-
layer.detachFromMap(this.map);
|
|
289
|
+
if (this.map?.getLayers()?.getArray()?.includes(layer)) {
|
|
290
|
+
this.map.removeLayer(layer);
|
|
303
291
|
}
|
|
304
292
|
}
|
|
305
293
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/BasicMap/BasicMap.js"],
|
|
4
|
-
"sourcesContent": ["import { Layer } from \"mobility-toolbox-js/ol\";\nimport OLCollection from \"ol/Collection\";\nimport { equals } from \"ol/extent\";\nimport { defaults as defaultInteractions } from \"ol/interaction\";\nimport Interaction from \"ol/interaction/Interaction\";\nimport OLMap from \"ol/Map\";\nimport { unByKey } from \"ol/Observable\";\nimport View from \"ol/View\";\nimport PropTypes from \"prop-types\";\nimport React, { PureComponent } from \"react\";\n\nconst propTypes = {\n /** Map animation options */\n animationOptions: PropTypes.shape({\n center: PropTypes.arrayOf(PropTypes.number),\n resolution: PropTypes.number,\n zoom: PropTypes.number,\n }),\n\n /** HTML aria-label. */\n ariaLabel: PropTypes.string,\n\n /** Center of the [ol/View](https://openlayers.org/en/latest/apidoc/module-ol_View-View.html). */\n center: PropTypes.arrayOf(PropTypes.number),\n\n /** Class name of the map container */\n className: PropTypes.string,\n\n /** Map extent */\n extent: PropTypes.arrayOf(PropTypes.number),\n\n /**\n * Optional options to pass on feature click. Passed to ol's 'getFeaturesAtPixel' method.\n * https://openlayers.org/en/latest/apidoc/module-ol_Map-Map.html#getFeaturesAtPixel\n */\n featuresClickOptions: PropTypes.shape({\n checkWrapped: PropTypes.bool,\n hitTolerance: PropTypes.number,\n layerFilter: PropTypes.func,\n }),\n\n /** Openlayers [fit options](https://openlayers.org/en/latest/apidoc/module-ol_View-View.html#fit) when extent is updated */\n fitOptions: PropTypes.object,\n\n /** Array of [ol/interaction](https://openlayers.org/en/latest/apidoc/module-ol_interaction_Interaction-Interaction.html). */\n interactions: PropTypes.oneOfType([\n PropTypes.arrayOf(PropTypes.instanceOf(Interaction)),\n PropTypes.instanceOf(OLCollection),\n ]),\n\n /** Array of [mobility-toolbox-js layers](https://mobility-toolbox-js.geops.io/api/identifiers%20html#ol-layers) to display. */\n layers: PropTypes.arrayOf(PropTypes.instanceOf(Layer)),\n\n /** An [ol/map](https://openlayers.org/en/latest/apidoc/module-ol_Map-Map.html). */\n map: PropTypes.instanceOf(OLMap),\n\n /**\n * Callback when a [ol/Feature](https://openlayers.org/en/latest/apidoc/module-ol_Feature-Feature.html) is clicked.\n * @param {OLFeature[]} features An array of [ol/Feature](https://openlayers.org/en/latest/apidoc/module-ol_Feature-Feature.html).\n * @param {ol.MapBrowserEvent} event The singleclick [ol/MapBrowserEvent](https://openlayers.org/en/latest/apidoc/module-ol_MapBrowserEvent-MapBrowserEvent.html#event:singleclick).\n */\n onFeaturesClick: PropTypes.func,\n\n /**\n * Callback when a [ol/Feature](https://openlayers.org/en/latest/apidoc/module-ol_Feature-Feature.html) is hovered.\n * @param {OLFeature[]} features An array of [ol/Feature](https://openlayers.org/en/latest/apidoc/module-ol_Feature-Feature.html).\n * @param {ol.MapBrowserEvent} event The pointermove [ol/MapBrowserEvent](https://openlayers.org/en/latest/apidoc/module-ol_MapBrowserEvent-MapBrowserEvent.html#event:pointermove).\n */\n onFeaturesHover: PropTypes.func,\n\n /**\n * Callback when the map was moved.\n * @param {ol.MapEvent} event The movend [ol/MapEvent](https://openlayers.org/en/latest/apidoc/module-ol_MapBrowserEvent-MapBrowserEvent.html#event:moveend).\n */\n onMapMoved: PropTypes.func,\n\n /** Map resolution */\n resolution: PropTypes.number,\n\n /** The style of the map. */\n style: PropTypes.object,\n\n /** The tabIndex of the map. */\n tabIndex: PropTypes.number,\n\n /** [ol/View](https://openlayers.org/en/latest/apidoc/module-ol_View-View.html) constructor options */\n viewOptions: PropTypes.shape({\n extent: PropTypes.array,\n maxZoom: PropTypes.number,\n minZoom: PropTypes.number,\n projection: PropTypes.string,\n }),\n\n /** Map zoom level */\n zoom: PropTypes.number,\n};\n\nconst defaultProps = {\n animationOptions: undefined,\n ariaLabel: \"map\",\n center: [0, 0],\n className: \"rs-map\",\n extent: undefined,\n featuresClickOptions: {\n hitTolerance: 0,\n },\n fitOptions: {\n duration: 1000,\n maxZoom: 23,\n padding: [20, 20, 20, 20],\n },\n interactions: null,\n layers: [],\n map: null,\n onFeaturesClick: undefined,\n onFeaturesHover: undefined,\n onMapMoved: undefined,\n resolution: undefined,\n style: undefined,\n tabIndex: undefined,\n viewOptions: {\n extent: undefined,\n maxZoom: 22,\n minZoom: 0,\n projection: \"EPSG:3857\",\n },\n zoom: 1,\n};\n\n/**\n * The BasicMap component renders an [ol/map](https://openlayers.org/en/latest/apidoc/module-ol_Map-Map.html).\n *\n * The map's view is created with the following parameters for the view:\n * - projection: 'EPSG:3857'\n * - zoom: 0\n * - minZoom: 0\n * - maxZoom: 22\n *\n * These options can be overridden using the viewOptions property.\n */\nclass BasicMap extends PureComponent {\n constructor(props) {\n super(props);\n const { interactions, map } = this.props;\n\n this.map =\n map ||\n new OLMap({\n controls: [],\n interactions:\n interactions ||\n defaultInteractions({\n altShiftDragRotate: false,\n pinchRotate: false,\n }),\n });\n\n this.state = {\n node: null,\n };\n\n this.moveEndRef = null;\n this.singleClickRef = null;\n this.pointerMoveRef = null;\n this.setNode = this.setNode.bind(this);\n }\n\n componentDidMount() {\n const { center, extent, layers, resolution, viewOptions, zoom } =\n this.props;\n const { node } = this.state;\n this.map.setTarget(node);\n\n // We set the view here otherwise the map is not correctly zoomed.\n this.map.setView(new View({ ...viewOptions, center, resolution, zoom }));\n\n // // Since ol 6.1.0 touch-action is set to auto and creates a bad navigation experience on mobile,\n // // so we have to force it to none for mobile.\n // // https://github.com/openlayers/openlayers/pull/10187/files\n const viewPort = this.map.getViewport();\n viewPort.style.touchAction = \"none\";\n viewPort.style.msTouchAction = \"none\";\n viewPort.setAttribute(\"touch-action\", \"none\");\n\n // Fit only work if the map has a size.\n if (this.map.getSize() && extent) {\n this.map.getView().fit(extent);\n }\n\n this.setLayers(layers);\n this.listenMoveEnd();\n this.listenSingleClick();\n this.listenPointerMove();\n }\n\n componentDidUpdate(prevProps, prevState) {\n const {\n animationOptions,\n center,\n extent,\n fitOptions,\n layers,\n onFeaturesClick,\n onFeaturesHover,\n onMapMoved,\n resolution,\n viewOptions,\n zoom,\n } = this.props;\n const { node } = this.state;\n\n if (prevState.node !== node) {\n if (zoom) {\n this.map.getView().setZoom(zoom);\n }\n\n if (resolution) {\n this.map.getView().setResolution(resolution);\n }\n this.map.setTarget(node);\n\n // When the node is set we reinitialize the extent with the extent property.\n if (!prevState.node && node && extent) {\n this.map.getView().fit(extent);\n }\n }\n\n if (prevProps.layers !== layers) {\n this.setLayers(layers, prevProps.layers);\n }\n\n // Creates a new view if necessary before updating the others prop.\n if (\n viewOptions &&\n JSON.stringify(viewOptions) !== JSON.stringify(prevProps.viewOptions)\n ) {\n // Re-create a view, ol doesn't provide any method to setExtent of view.\n this.map.setView(\n new View({\n ...viewOptions,\n center,\n resolution,\n zoom,\n }),\n );\n }\n\n const view = this.map.getView();\n\n if (animationOptions && prevProps.animationOptions !== animationOptions) {\n view.animate(animationOptions);\n }\n\n if (prevProps.center !== center) {\n view.setCenter(center);\n }\n\n if (zoom !== prevProps.zoom) {\n view.setZoom(zoom);\n }\n\n if (resolution !== prevProps.resolution) {\n view.setResolution(resolution);\n }\n\n if (extent && !equals(extent, prevProps.extent || [])) {\n view.fit(extent, fitOptions);\n }\n\n if (onMapMoved !== prevProps.onMapMoved) {\n this.listenMoveEnd();\n }\n\n if (onFeaturesClick !== prevProps.onFeaturesClick) {\n this.listenSingleClick();\n }\n\n if (onFeaturesHover !== prevProps.onFeaturesHover) {\n this.listenPointerMove();\n }\n }\n\n componentWillUnmount() {\n unByKey([this.moveEndRef, this.singleClickRef, this.pointerMoveRef]);\n }\n\n initLayer(layer) {\n if (layer.attachToMap) {\n layer.attachToMap(this.map);\n }\n\n if (layer.init) {\n layer.init(this.map);\n }\n\n if (\n layer.olLayer &&\n this.map.getLayers() &&\n !this.map.getLayers().getArray().includes(layer.olLayer)\n ) {\n this.map.addLayer(layer.olLayer);\n }\n const layers = layer.children || [];\n for (let i = 0; i < layers.length; i += 1) {\n this.initLayer(layers[i]);\n }\n }\n\n listenMoveEnd() {\n const { onMapMoved } = this.props;\n unByKey(this.moveEndRef);\n\n if (!onMapMoved) {\n return;\n }\n\n this.moveEndRef = this.map.on(\"moveend\", (evt) => {\n return onMapMoved(evt);\n });\n }\n\n listenPointerMove() {\n const { onFeaturesHover } = this.props;\n unByKey(this.pointerMoveRef);\n\n if (!onFeaturesHover) {\n return;\n }\n\n this.pointerMoveRef = this.map.on(\"pointermove\", (evt) => {\n const features = evt.map.getFeaturesAtPixel(evt.pixel);\n onFeaturesHover(features || [], evt);\n });\n }\n\n listenSingleClick() {\n const { featuresClickOptions, onFeaturesClick } = this.props;\n unByKey(this.singleClickRef);\n\n if (!onFeaturesClick) {\n return;\n }\n\n this.singleClickRef = this.map.on(\"singleclick\", (evt) => {\n const features = evt.map.getFeaturesAtPixel(\n evt.pixel,\n featuresClickOptions,\n );\n onFeaturesClick(features || [], evt);\n });\n }\n\n render() {\n const { ariaLabel, className, style, tabIndex } = this.props;\n return (\n <div\n aria-label={ariaLabel}\n className={className}\n ref={this.setNode}\n role=\"presentation\"\n style={style}\n tabIndex={tabIndex}\n />\n );\n }\n\n setLayers(layers = [], prevLayers = []) {\n for (let i = 0; i < prevLayers.length; i += 1) {\n this.terminateLayer(prevLayers[i]);\n }\n for (let i = 0; i < layers.length; i += 1) {\n this.initLayer(layers[i]);\n }\n }\n\n setNode(node) {\n this.setState({ node });\n }\n\n terminateLayer(layer) {\n const layers = layer.children || [];\n for (let i = 0; i < layers.length; i += 1) {\n this.terminateLayer(layers[i]);\n }\n\n if (\n layer.olLayer &&\n this.map.getLayers() &&\n this.map.getLayers().getArray().includes(layer.olLayer)\n ) {\n this.map.removeLayer(layer.olLayer);\n }\n\n if (layer.terminate) {\n layer.terminate(this.map);\n }\n\n if (layer.detachFromMap) {\n layer.detachFromMap(this.map);\n }\n }\n}\n\nBasicMap.propTypes = propTypes;\nBasicMap.defaultProps = defaultProps;\n\nexport default BasicMap;\n"],
|
|
5
|
-
"mappings": "AAAA,
|
|
4
|
+
"sourcesContent": ["import OLCollection from \"ol/Collection\";\nimport { equals } from \"ol/extent\";\nimport { defaults as defaultInteractions } from \"ol/interaction\";\nimport Interaction from \"ol/interaction/Interaction\";\nimport Layer from \"ol/layer/Layer\";\nimport OLMap from \"ol/Map\";\nimport { unByKey } from \"ol/Observable\";\nimport View from \"ol/View\";\nimport PropTypes from \"prop-types\";\nimport React, { PureComponent } from \"react\";\n\nconst propTypes = {\n /** Map animation options */\n animationOptions: PropTypes.shape({\n center: PropTypes.arrayOf(PropTypes.number),\n resolution: PropTypes.number,\n zoom: PropTypes.number,\n }),\n\n /** HTML aria-label. */\n ariaLabel: PropTypes.string,\n\n /** Center of the [ol/View](https://openlayers.org/en/latest/apidoc/module-ol_View-View.html). */\n center: PropTypes.arrayOf(PropTypes.number),\n\n /** Class name of the map container */\n className: PropTypes.string,\n\n /** Map extent */\n extent: PropTypes.arrayOf(PropTypes.number),\n\n /**\n * Optional options to pass on feature click. Passed to ol's 'getFeaturesAtPixel' method.\n * https://openlayers.org/en/latest/apidoc/module-ol_Map-Map.html#getFeaturesAtPixel\n */\n featuresClickOptions: PropTypes.shape({\n checkWrapped: PropTypes.bool,\n hitTolerance: PropTypes.number,\n layerFilter: PropTypes.func,\n }),\n\n /** Openlayers [fit options](https://openlayers.org/en/latest/apidoc/module-ol_View-View.html#fit) when extent is updated */\n fitOptions: PropTypes.object,\n\n /** Array of [ol/interaction](https://openlayers.org/en/latest/apidoc/module-ol_interaction_Interaction-Interaction.html). */\n interactions: PropTypes.oneOfType([\n PropTypes.arrayOf(PropTypes.instanceOf(Interaction)),\n PropTypes.instanceOf(OLCollection),\n ]),\n\n /** Array of Openlayers layers */\n layers: PropTypes.arrayOf(PropTypes.instanceOf(Layer)),\n\n /** An [ol/map](https://openlayers.org/en/latest/apidoc/module-ol_Map-Map.html). */\n map: PropTypes.instanceOf(OLMap),\n\n /**\n * Callback when a [ol/Feature](https://openlayers.org/en/latest/apidoc/module-ol_Feature-Feature.html) is clicked.\n * @param {OLFeature[]} features An array of [ol/Feature](https://openlayers.org/en/latest/apidoc/module-ol_Feature-Feature.html).\n * @param {ol.MapBrowserEvent} event The singleclick [ol/MapBrowserEvent](https://openlayers.org/en/latest/apidoc/module-ol_MapBrowserEvent-MapBrowserEvent.html#event:singleclick).\n */\n onFeaturesClick: PropTypes.func,\n\n /**\n * Callback when a [ol/Feature](https://openlayers.org/en/latest/apidoc/module-ol_Feature-Feature.html) is hovered.\n * @param {OLFeature[]} features An array of [ol/Feature](https://openlayers.org/en/latest/apidoc/module-ol_Feature-Feature.html).\n * @param {ol.MapBrowserEvent} event The pointermove [ol/MapBrowserEvent](https://openlayers.org/en/latest/apidoc/module-ol_MapBrowserEvent-MapBrowserEvent.html#event:pointermove).\n */\n onFeaturesHover: PropTypes.func,\n\n /**\n * Callback when the map was moved.\n * @param {ol.MapEvent} event The movend [ol/MapEvent](https://openlayers.org/en/latest/apidoc/module-ol_MapBrowserEvent-MapBrowserEvent.html#event:moveend).\n */\n onMapMoved: PropTypes.func,\n\n /** Map resolution */\n resolution: PropTypes.number,\n\n /** The style of the map. */\n style: PropTypes.object,\n\n /** The tabIndex of the map. */\n tabIndex: PropTypes.number,\n\n /** [ol/View](https://openlayers.org/en/latest/apidoc/module-ol_View-View.html) constructor options */\n viewOptions: PropTypes.shape({\n extent: PropTypes.array,\n maxZoom: PropTypes.number,\n minZoom: PropTypes.number,\n projection: PropTypes.string,\n }),\n\n /** Map zoom level */\n zoom: PropTypes.number,\n};\n\nconst defaultProps = {\n animationOptions: undefined,\n ariaLabel: \"map\",\n center: [0, 0],\n className: \"rs-map\",\n extent: undefined,\n featuresClickOptions: {\n hitTolerance: 0,\n },\n fitOptions: {\n duration: 1000,\n maxZoom: 23,\n padding: [20, 20, 20, 20],\n },\n interactions: null,\n layers: [],\n map: null,\n onFeaturesClick: undefined,\n onFeaturesHover: undefined,\n onMapMoved: undefined,\n resolution: undefined,\n style: undefined,\n tabIndex: undefined,\n viewOptions: {\n extent: undefined,\n maxZoom: 22,\n minZoom: 0,\n projection: \"EPSG:3857\",\n },\n zoom: 1,\n};\n\n/**\n * The BasicMap component renders an [ol/map](https://openlayers.org/en/latest/apidoc/module-ol_Map-Map.html).\n *\n * The map's view is created with the following parameters for the view:\n * - projection: 'EPSG:3857'\n * - zoom: 0\n * - minZoom: 0\n * - maxZoom: 22\n *\n * These options can be overridden using the viewOptions property.\n */\nclass BasicMap extends PureComponent {\n constructor(props) {\n super(props);\n const { interactions, map } = this.props;\n\n this.map =\n map ||\n new OLMap({\n controls: [],\n interactions:\n interactions ||\n defaultInteractions({\n altShiftDragRotate: false,\n pinchRotate: false,\n }),\n });\n\n this.state = {\n node: null,\n };\n\n this.moveEndRef = null;\n this.singleClickRef = null;\n this.pointerMoveRef = null;\n this.setNode = this.setNode.bind(this);\n }\n\n componentDidMount() {\n const { center, extent, layers, resolution, viewOptions, zoom } =\n this.props;\n const { node } = this.state;\n this.map.setTarget(node);\n\n // We set the view here otherwise the map is not correctly zoomed.\n this.map.setView(new View({ ...viewOptions, center, resolution, zoom }));\n\n // // Since ol 6.1.0 touch-action is set to auto and creates a bad navigation experience on mobile,\n // // so we have to force it to none for mobile.\n // // https://github.com/openlayers/openlayers/pull/10187/files\n const viewPort = this.map.getViewport();\n viewPort.style.touchAction = \"none\";\n viewPort.style.msTouchAction = \"none\";\n viewPort.setAttribute(\"touch-action\", \"none\");\n\n // Fit only work if the map has a size.\n if (this.map.getSize() && extent) {\n this.map.getView().fit(extent);\n }\n\n this.setLayers(layers);\n this.listenMoveEnd();\n this.listenSingleClick();\n this.listenPointerMove();\n }\n\n componentDidUpdate(prevProps, prevState) {\n const {\n animationOptions,\n center,\n extent,\n fitOptions,\n layers,\n onFeaturesClick,\n onFeaturesHover,\n onMapMoved,\n resolution,\n viewOptions,\n zoom,\n } = this.props;\n const { node } = this.state;\n\n if (prevState.node !== node) {\n if (zoom) {\n this.map.getView().setZoom(zoom);\n }\n\n if (resolution) {\n this.map.getView().setResolution(resolution);\n }\n this.map.setTarget(node);\n\n // When the node is set we reinitialize the extent with the extent property.\n if (!prevState.node && node && extent) {\n this.map.getView().fit(extent);\n }\n }\n\n if (prevProps.layers !== layers) {\n this.setLayers(layers, prevProps.layers);\n }\n\n // Creates a new view if necessary before updating the others prop.\n if (\n viewOptions &&\n JSON.stringify(viewOptions) !== JSON.stringify(prevProps.viewOptions)\n ) {\n // Re-create a view, ol doesn't provide any method to setExtent of view.\n this.map.setView(\n new View({\n ...viewOptions,\n center,\n resolution,\n zoom,\n }),\n );\n }\n\n const view = this.map.getView();\n\n if (animationOptions && prevProps.animationOptions !== animationOptions) {\n view.animate(animationOptions);\n }\n\n if (prevProps.center !== center) {\n view.setCenter(center);\n }\n\n if (zoom !== prevProps.zoom) {\n view.setZoom(zoom);\n }\n\n if (resolution !== prevProps.resolution) {\n view.setResolution(resolution);\n }\n\n if (extent && !equals(extent, prevProps.extent || [])) {\n view.fit(extent, fitOptions);\n }\n\n if (onMapMoved !== prevProps.onMapMoved) {\n this.listenMoveEnd();\n }\n\n if (onFeaturesClick !== prevProps.onFeaturesClick) {\n this.listenSingleClick();\n }\n\n if (onFeaturesHover !== prevProps.onFeaturesHover) {\n this.listenPointerMove();\n }\n }\n\n componentWillUnmount() {\n unByKey([this.moveEndRef, this.singleClickRef, this.pointerMoveRef]);\n }\n\n initLayer(layer) {\n if (!this.map?.getLayers()?.getArray()?.includes(layer)) {\n this.map.addLayer(layer);\n }\n\n const layers = layer.get(\"children\") || layer.children || [];\n for (let i = 0; i < layers.length; i += 1) {\n this.initLayer(layers[i]);\n }\n }\n\n listenMoveEnd() {\n const { onMapMoved } = this.props;\n unByKey(this.moveEndRef);\n\n if (!onMapMoved) {\n return;\n }\n\n this.moveEndRef = this.map.on(\"moveend\", (evt) => {\n return onMapMoved(evt);\n });\n }\n\n listenPointerMove() {\n const { onFeaturesHover } = this.props;\n unByKey(this.pointerMoveRef);\n\n if (!onFeaturesHover) {\n return;\n }\n\n this.pointerMoveRef = this.map.on(\"pointermove\", (evt) => {\n const features = evt.map.getFeaturesAtPixel(evt.pixel);\n onFeaturesHover(features || [], evt);\n });\n }\n\n listenSingleClick() {\n const { featuresClickOptions, onFeaturesClick } = this.props;\n unByKey(this.singleClickRef);\n\n if (!onFeaturesClick) {\n return;\n }\n\n this.singleClickRef = this.map.on(\"singleclick\", (evt) => {\n const features = evt.map.getFeaturesAtPixel(\n evt.pixel,\n featuresClickOptions,\n );\n onFeaturesClick(features || [], evt);\n });\n }\n\n render() {\n const { ariaLabel, className, style, tabIndex } = this.props;\n return (\n <div\n aria-label={ariaLabel}\n className={className}\n ref={this.setNode}\n role=\"presentation\"\n style={style}\n tabIndex={tabIndex}\n />\n );\n }\n\n setLayers(layers = [], prevLayers = []) {\n for (let i = 0; i < prevLayers.length; i += 1) {\n this.terminateLayer(prevLayers[i]);\n }\n for (let i = 0; i < layers.length; i += 1) {\n this.initLayer(layers[i]);\n }\n }\n\n setNode(node) {\n this.setState({ node });\n }\n\n terminateLayer(layer) {\n const layers = layer.get(\"children\") || layer.children || [];\n for (let i = 0; i < layers.length; i += 1) {\n this.terminateLayer(layers[i]);\n }\n\n if (this.map?.getLayers()?.getArray()?.includes(layer)) {\n this.map.removeLayer(layer);\n }\n }\n}\n\nBasicMap.propTypes = propTypes;\nBasicMap.defaultProps = defaultProps;\n\nexport default BasicMap;\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -29,44 +29,33 @@ function Copyright({
|
|
|
29
29
|
map,
|
|
30
30
|
...other
|
|
31
31
|
}) {
|
|
32
|
-
const [
|
|
33
|
-
const control = useMemo(
|
|
34
|
-
()
|
|
35
|
-
return
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
target: document.createElement("div")
|
|
44
|
-
});
|
|
45
|
-
},
|
|
46
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
47
|
-
[]
|
|
48
|
-
);
|
|
32
|
+
const [node, setNode] = useState(null);
|
|
33
|
+
const control = useMemo(() => {
|
|
34
|
+
if (!node) {
|
|
35
|
+
return null;
|
|
36
|
+
}
|
|
37
|
+
return new CopyrightControl({
|
|
38
|
+
element: document.createElement("div"),
|
|
39
|
+
format,
|
|
40
|
+
target: node
|
|
41
|
+
});
|
|
42
|
+
}, [node, format]);
|
|
49
43
|
useEffect(() => {
|
|
50
44
|
if (!control) {
|
|
51
45
|
return () => {
|
|
52
46
|
};
|
|
53
47
|
}
|
|
54
|
-
control
|
|
48
|
+
map.addControl(control);
|
|
55
49
|
return () => {
|
|
56
|
-
control
|
|
50
|
+
map.removeControl(control);
|
|
57
51
|
};
|
|
58
52
|
}, [map, control]);
|
|
59
|
-
if (!control || !control.getCopyrights().length) {
|
|
60
|
-
return null;
|
|
61
|
-
}
|
|
62
53
|
return /* @__PURE__ */ React.createElement(
|
|
63
54
|
"div",
|
|
64
55
|
{
|
|
65
56
|
className,
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
__html: format(copyrights) || ""
|
|
69
|
-
}
|
|
57
|
+
ref: (nod) => setNode(nod),
|
|
58
|
+
...other
|
|
70
59
|
}
|
|
71
60
|
);
|
|
72
61
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/Copyright/Copyright.js"],
|
|
4
|
-
"sourcesContent": ["import { CopyrightControl } from \"mobility-toolbox-js/ol\";\nimport { Map } from \"ol\";\nimport PropTypes from \"prop-types\";\nimport React, { useEffect, useMemo, useState } from \"react\";\n\nconst propTypes = {\n /**\n * CSS class of th root element\n */\n className: PropTypes.string,\n\n /**\n * Format function. Called with an array of copyrights from visible layers\n * and returns the copyright.\n */\n format: PropTypes.func,\n\n /**\n * A map.\n */\n map: PropTypes.instanceOf(Map).isRequired,\n};\n\nconst defaultProps = {\n className: \"rs-copyright\",\n format: (copyrights) => {\n return copyrights.join(\" | \");\n },\n};\n\n/**\n * The Copyright component uses the\n * [mobility-toolbox-js CopyrightControl](https://mobility-toolbox-js.geops.io/api/class/src/mapbox/controls/CopyrightControl%20js~CopyrightControl%20html-offset-anchor)\n * to render the layer copyrights.\n */\nfunction Copyright({\n className = defaultProps.className,\n format = defaultProps.format,\n map,\n ...other\n}) {\n const [
|
|
5
|
-
"mappings": "AAAA,SAAS,wBAAwB;AACjC,SAAS,WAAW;AACpB,OAAO,eAAe;AACtB,OAAO,SAAS,WAAW,SAAS,gBAAgB;AAEpD,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA,EAIhB,WAAW,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,EAMrB,QAAQ,UAAU;AAAA;AAAA;AAAA;AAAA,EAKlB,KAAK,UAAU,WAAW,GAAG,EAAE;AACjC;AAEA,MAAM,eAAe;AAAA,EACnB,WAAW;AAAA,EACX,QAAQ,CAAC,eAAe;AACtB,WAAO,WAAW,KAAK,KAAK;AAAA,EAC9B;AACF;AAOA,SAAS,UAAU;AAAA,EACjB,YAAY,aAAa;AAAA,EACzB,SAAS,aAAa;AAAA,EACtB;AAAA,EACA,GAAG;AACL,GAAG;AACD,QAAM,CAAC,
|
|
4
|
+
"sourcesContent": ["import { CopyrightControl } from \"mobility-toolbox-js/ol\";\nimport { Map } from \"ol\";\nimport PropTypes from \"prop-types\";\nimport React, { useEffect, useMemo, useState } from \"react\";\n\nconst propTypes = {\n /**\n * CSS class of th root element\n */\n className: PropTypes.string,\n\n /**\n * Format function. Called with an array of copyrights from visible layers\n * and returns the copyright.\n */\n format: PropTypes.func,\n\n /**\n * A map.\n */\n map: PropTypes.instanceOf(Map).isRequired,\n};\n\nconst defaultProps = {\n className: \"rs-copyright\",\n format: (copyrights) => {\n return copyrights.join(\" | \");\n },\n};\n\n/**\n * The Copyright component uses the\n * [mobility-toolbox-js CopyrightControl](https://mobility-toolbox-js.geops.io/api/class/src/mapbox/controls/CopyrightControl%20js~CopyrightControl%20html-offset-anchor)\n * to render the layer copyrights.\n */\nfunction Copyright({\n className = defaultProps.className,\n format = defaultProps.format,\n map,\n ...other\n}) {\n const [node, setNode] = useState(null);\n\n const control = useMemo(() => {\n if (!node) {\n return null;\n }\n return new CopyrightControl({\n element: document.createElement(\"div\"),\n format,\n target: node,\n });\n }, [node, format]);\n\n // Ensure the control is not associated to the wrong map\n useEffect(() => {\n if (!control) {\n return () => {};\n }\n\n map.addControl(control);\n\n return () => {\n map.removeControl(control);\n };\n }, [map, control]);\n\n return (\n <div\n className={className}\n ref={(nod) => setNode(nod)}\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...other}\n />\n );\n}\n\nCopyright.propTypes = propTypes;\n\nexport default React.memo(Copyright);\n"],
|
|
5
|
+
"mappings": "AAAA,SAAS,wBAAwB;AACjC,SAAS,WAAW;AACpB,OAAO,eAAe;AACtB,OAAO,SAAS,WAAW,SAAS,gBAAgB;AAEpD,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA,EAIhB,WAAW,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,EAMrB,QAAQ,UAAU;AAAA;AAAA;AAAA;AAAA,EAKlB,KAAK,UAAU,WAAW,GAAG,EAAE;AACjC;AAEA,MAAM,eAAe;AAAA,EACnB,WAAW;AAAA,EACX,QAAQ,CAAC,eAAe;AACtB,WAAO,WAAW,KAAK,KAAK;AAAA,EAC9B;AACF;AAOA,SAAS,UAAU;AAAA,EACjB,YAAY,aAAa;AAAA,EACzB,SAAS,aAAa;AAAA,EACtB;AAAA,EACA,GAAG;AACL,GAAG;AACD,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,IAAI;AAErC,QAAM,UAAU,QAAQ,MAAM;AAC5B,QAAI,CAAC,MAAM;AACT,aAAO;AAAA,IACT;AACA,WAAO,IAAI,iBAAiB;AAAA,MAC1B,SAAS,SAAS,cAAc,KAAK;AAAA,MACrC;AAAA,MACA,QAAQ;AAAA,IACV,CAAC;AAAA,EACH,GAAG,CAAC,MAAM,MAAM,CAAC;AAGjB,YAAU,MAAM;AACd,QAAI,CAAC,SAAS;AACZ,aAAO,MAAM;AAAA,MAAC;AAAA,IAChB;AAEA,QAAI,WAAW,OAAO;AAEtB,WAAO,MAAM;AACX,UAAI,cAAc,OAAO;AAAA,IAC3B;AAAA,EACF,GAAG,CAAC,KAAK,OAAO,CAAC;AAEjB,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,KAAK,CAAC,QAAQ,QAAQ,GAAG;AAAA,MAExB,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,UAAU,YAAY;AAEtB,eAAe,MAAM,KAAK,SAAS;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { Layer } from "mobility-toolbox-js/ol";
|
|
2
1
|
import KMLFormat from "ol/format/KML";
|
|
2
|
+
import Layer from "ol/layer/Layer";
|
|
3
3
|
import PropTypes from "prop-types";
|
|
4
4
|
import React, { PureComponent } from "react";
|
|
5
5
|
import KML from "../../utils/KML";
|
|
@@ -14,7 +14,7 @@ const propTypes = {
|
|
|
14
14
|
*/
|
|
15
15
|
format: PropTypes.func,
|
|
16
16
|
/**
|
|
17
|
-
*
|
|
17
|
+
* A layer extending an [ol/layer/Layer](https://openlayers.org/en/latest/apidoc/module-ol_layer_Layer.html),
|
|
18
18
|
* using a valid [ol/source/Vector](https://openlayers.org/en/latest/apidoc/module-ol_source_Vector.html)
|
|
19
19
|
*/
|
|
20
20
|
layer: PropTypes.instanceOf(Layer).isRequired,
|
|
@@ -33,7 +33,7 @@ class FeatureExportButton extends PureComponent {
|
|
|
33
33
|
if (format === KMLFormat) {
|
|
34
34
|
return KML.writeFeatures(layer, projection);
|
|
35
35
|
}
|
|
36
|
-
return new format().writeFeatures(layer.
|
|
36
|
+
return new format().writeFeatures(layer.getSource().getFeatures(), {
|
|
37
37
|
featureProjection: projection
|
|
38
38
|
});
|
|
39
39
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/FeatureExportButton/FeatureExportButton.js"],
|
|
4
|
-
"sourcesContent": ["import
|
|
5
|
-
"mappings": "AAAA,
|
|
4
|
+
"sourcesContent": ["import KMLFormat from \"ol/format/KML\";\nimport Layer from \"ol/layer/Layer\";\nimport PropTypes from \"prop-types\";\nimport React, { PureComponent } from \"react\";\n\nimport KML from \"../../utils/KML\";\n\nconst propTypes = {\n /**\n * Children content of the Feature export button.\n */\n children: PropTypes.node,\n\n /**\n * Format to export features (function).\n * Supported formats: https://openlayers.org/en/latest/apidoc/module-ol_format_Feature-FeatureFormat.html\n */\n format: PropTypes.func,\n\n /**\n * A layer extending an [ol/layer/Layer](https://openlayers.org/en/latest/apidoc/module-ol_layer_Layer.html),\n * using a valid [ol/source/Vector](https://openlayers.org/en/latest/apidoc/module-ol_source_Vector.html)\n */\n layer: PropTypes.instanceOf(Layer).isRequired,\n\n /**\n * Map projection.\n */\n projection: PropTypes.string,\n};\n\nconst defaultProps = {\n children: null,\n format: KMLFormat,\n projection: \"EPSG:3857\",\n};\n\n/**\n * The FeatureExportButton component creates a button that exports feature geometries\n * from an [ol/layer/Vector](https://openlayers.org/en/latest/apidoc/module-ol_layer_Vector-VectorLayer.html)\n * with a [ol/source/Vector](https://openlayers.org/en/latest/apidoc/module-ol_source_Vector.html) on click.<br>\n * The default export format is KML, which supports the features' style export.<br>\n * Other formats do not always support style export (See specific format specs).\n */\nclass FeatureExportButton extends PureComponent {\n static createFeatureString(layer, projection, format) {\n if (format === KMLFormat) {\n return KML.writeFeatures(layer, projection);\n }\n\n // eslint-disable-next-line new-cap\n return new format().writeFeatures(layer.getSource().getFeatures(), {\n featureProjection: projection,\n });\n }\n\n static exportFeatures(layer, projection, format) {\n const now = new Date()\n .toJSON()\n .slice(0, 20)\n .replace(/[.:T-]+/g, \"\");\n const featString = this.createFeatureString(layer, projection, format);\n\n const formatString = featString\n ? featString.match(/<(\\w+)\\s+\\w+.*?>/)[1]\n : \"xml\";\n\n const fileName = `exported_features_${now}.${formatString}`;\n const charset = document.characterSet || \"UTF-8\";\n const type = `${\n formatString === \"kml\"\n ? \"data:application/vnd.google-earth.kml+xml\"\n : \"data:text/xml\"\n };charset=${charset}`;\n\n if (featString) {\n if (window.navigator.msSaveBlob) {\n // ie 11 and higher\n window.navigator.msSaveBlob(new Blob([featString], { type }), fileName);\n } else {\n const link = document.createElement(\"a\");\n link.download = fileName;\n link.href = `${type},${encodeURIComponent(featString)}`;\n link.click();\n }\n }\n }\n\n render() {\n const { children, format, layer, projection, ...other } = this.props;\n\n return (\n <div\n className=\"rs-feature-export-button\"\n role=\"button\"\n tabIndex={0}\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...other}\n onClick={() => {\n return FeatureExportButton.exportFeatures(layer, projection, format);\n }}\n onKeyPress={(evt) => {\n return (\n evt.which === 13 &&\n FeatureExportButton.exportFeatures(layer, projection, format)\n );\n }}\n >\n {children}\n </div>\n );\n }\n}\n\nFeatureExportButton.propTypes = propTypes;\nFeatureExportButton.defaultProps = defaultProps;\n\nexport default FeatureExportButton;\n"],
|
|
5
|
+
"mappings": "AAAA,OAAO,eAAe;AACtB,OAAO,WAAW;AAClB,OAAO,eAAe;AACtB,OAAO,SAAS,qBAAqB;AAErC,OAAO,SAAS;AAEhB,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA,EAIhB,UAAU,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,EAMpB,QAAQ,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,EAMlB,OAAO,UAAU,WAAW,KAAK,EAAE;AAAA;AAAA;AAAA;AAAA,EAKnC,YAAY,UAAU;AACxB;AAEA,MAAM,eAAe;AAAA,EACnB,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,YAAY;AACd;AASA,MAAM,4BAA4B,cAAc;AAAA,EAC9C,OAAO,oBAAoB,OAAO,YAAY,QAAQ;AACpD,QAAI,WAAW,WAAW;AACxB,aAAO,IAAI,cAAc,OAAO,UAAU;AAAA,IAC5C;AAGA,WAAO,IAAI,OAAO,EAAE,cAAc,MAAM,UAAU,EAAE,YAAY,GAAG;AAAA,MACjE,mBAAmB;AAAA,IACrB,CAAC;AAAA,EACH;AAAA,EAEA,OAAO,eAAe,OAAO,YAAY,QAAQ;AAC/C,UAAM,OAAM,oBAAI,KAAK,GAClB,OAAO,EACP,MAAM,GAAG,EAAE,EACX,QAAQ,YAAY,EAAE;AACzB,UAAM,aAAa,KAAK,oBAAoB,OAAO,YAAY,MAAM;AAErE,UAAM,eAAe,aACjB,WAAW,MAAM,kBAAkB,EAAE,CAAC,IACtC;AAEJ,UAAM,WAAW,qBAAqB,GAAG,IAAI,YAAY;AACzD,UAAM,UAAU,SAAS,gBAAgB;AACzC,UAAM,OAAO,GACX,iBAAiB,QACb,8CACA,eACN,YAAY,OAAO;AAEnB,QAAI,YAAY;AACd,UAAI,OAAO,UAAU,YAAY;AAE/B,eAAO,UAAU,WAAW,IAAI,KAAK,CAAC,UAAU,GAAG,EAAE,KAAK,CAAC,GAAG,QAAQ;AAAA,MACxE,OAAO;AACL,cAAM,OAAO,SAAS,cAAc,GAAG;AACvC,aAAK,WAAW;AAChB,aAAK,OAAO,GAAG,IAAI,IAAI,mBAAmB,UAAU,CAAC;AACrD,aAAK,MAAM;AAAA,MACb;AAAA,IACF;AAAA,EACF;AAAA,EAEA,SAAS;AACP,UAAM,EAAE,UAAU,QAAQ,OAAO,YAAY,GAAG,MAAM,IAAI,KAAK;AAE/D,WACE;AAAA,MAAC;AAAA;AAAA,QACC,WAAU;AAAA,QACV,MAAK;AAAA,QACL,UAAU;AAAA,QAET,GAAG;AAAA,QACJ,SAAS,MAAM;AACb,iBAAO,oBAAoB,eAAe,OAAO,YAAY,MAAM;AAAA,QACrE;AAAA,QACA,YAAY,CAAC,QAAQ;AACnB,iBACE,IAAI,UAAU,MACd,oBAAoB,eAAe,OAAO,YAAY,MAAM;AAAA,QAEhE;AAAA;AAAA,MAEC;AAAA,IACH;AAAA,EAEJ;AACF;AAEA,oBAAoB,YAAY;AAChC,oBAAoB,eAAe;AAEnC,eAAe;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|