@mapcomponents/react-maplibre 1.1.0 → 1.3.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.
Files changed (20) hide show
  1. package/CHANGELOG.md +21 -0
  2. package/dist/index.cjs.js +315 -282
  3. package/dist/index.cjs.js.map +1 -1
  4. package/dist/index.esm.js +316 -283
  5. package/dist/index.esm.js.map +1 -1
  6. package/dist/src/components/MlComponentTemplate/MlComponentTemplate.stories_.d.ts +14 -0
  7. package/dist/src/components/MlLayerSwipe/assets/SwipeIcon.d.ts +10 -0
  8. package/dist/src/components/MlMarker/MlMarker.d.ts +21 -26
  9. package/dist/src/components/MlNavigationCompass/assets/CompassBackground.d.ts +9 -0
  10. package/dist/src/components/MlNavigationCompass/assets/CompassNeedle.d.ts +9 -0
  11. package/dist/src/components/MlShareMapState/MlShareMapState.d.ts +0 -7
  12. package/dist/src/components/MlThreeJsLayer/MlThreeJsLayer.d.ts +1 -18
  13. package/dist/src/components/MlWmsFeatureInfoPopup/MlWmsFeatureInfoPopup.d.ts +0 -7
  14. package/dist/src/components/MlWmsLayer/MlWmsLayer.d.ts +0 -46
  15. package/dist/src/contexts/SimpleDataProvider.d.ts +1 -7
  16. package/dist/src/hooks/useFeatureEditor/utils/FeatureEditorStyle.d.ts +28 -0
  17. package/dist/src/protocol_handlers/osm.d.ts +0 -1
  18. package/dist/src/ui_components/LoadingOverlayContext.d.ts +1 -7
  19. package/package.json +42 -41
  20. package/rollup.config.mjs +15 -16
package/dist/index.esm.js CHANGED
@@ -4,12 +4,12 @@ import React__default, { useMemo, useEffect, useCallback, useState, useRef, useC
4
4
  import { createTheme, ThemeProvider, styled as styled$2, useTheme } from '@mui/material/styles';
5
5
  import { v4 } from 'uuid';
6
6
  import 'maplibre-gl/dist/maplibre-gl.css';
7
- import { Button, CircularProgress, useMediaQuery, FormControl, InputLabel, Select, MenuItem, FormLabel, RadioGroup, FormControlLabel, Radio, styled, List, ListItem, ListItemIcon, IconButton, Checkbox, ListItemText, Grid, Paper, Box as Box$1, Typography, TextField, Slider, Drawer, Tooltip, Snackbar, DialogTitle as DialogTitle$1, DialogActions as DialogActions$1, ListItemButton, ListItemAvatar, Avatar, DialogContent as DialogContent$1, OutlinedInput, Accordion, AccordionSummary, Dialog as Dialog$1 } from '@mui/material';
7
+ import { Button, CircularProgress, useMediaQuery, FormControl, InputLabel, Select, MenuItem, FormLabel, RadioGroup, FormControlLabel, Radio, styled, List, ListItem, ListItemIcon, IconButton, Checkbox, ListItemText, Grid, Paper, Box as Box$1, Typography, TextField, Slider, Drawer, SwipeableDrawer, Tooltip, Snackbar, DialogTitle as DialogTitle$1, DialogActions as DialogActions$1, ListItemButton, ListItemAvatar, Avatar, DialogContent as DialogContent$1, OutlinedInput, Accordion, AccordionSummary, Dialog as Dialog$1 } from '@mui/material';
8
8
  import FilterCenterFocusIcon from '@mui/icons-material/FilterCenterFocus';
9
9
  import PrinterIcon from '@mui/icons-material/Print';
10
10
  import Button$1 from '@mui/material/Button';
11
11
  import jsPDF from 'jspdf';
12
- import ReactDOM from 'react-dom';
12
+ import ReactDOM, { createPortal } from 'react-dom';
13
13
  import Moveable from 'react-moveable';
14
14
  import * as turf from '@turf/turf';
15
15
  import { point, circle, lineArc, bbox, booleanContains, bboxPolygon, featureCollection, distance, lineOffset } from '@turf/turf';
@@ -20,10 +20,12 @@ import Box$2 from '@mui/material/Box';
20
20
  import Grid$1 from '@mui/material/Grid';
21
21
  import PolylineIcon from '@mui/icons-material/Polyline';
22
22
  import PentagonIcon from '@mui/icons-material/Pentagon';
23
- import { ExpandMore, KeyboardArrowRight, Tune, Delete, ExpandLess, ArrowCircleDown, ArrowCircleUp, CenterFocusWeak } from '@mui/icons-material';
23
+ import DeleteIcon from '@mui/icons-material/Delete';
24
+ import TuneIcon from '@mui/icons-material/Tune';
24
25
  import { styled as styled$1, Box } from '@mui/system';
26
+ import ExpandLessIcon from '@mui/icons-material/ExpandLess';
27
+ import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
25
28
  import { ChromePicker } from 'react-color';
26
- import TuneIcon from '@mui/icons-material/Tune';
27
29
  import Dialog from '@mui/material/Dialog';
28
30
  import DialogActions from '@mui/material/DialogActions';
29
31
  import DialogContent from '@mui/material/DialogContent';
@@ -34,16 +36,12 @@ import { CSS } from '@dnd-kit/utilities';
34
36
  import CloseIcon from '@mui/icons-material/Close';
35
37
  import useMediaQuery$1 from '@mui/material/useMediaQuery';
36
38
  import { Global } from '@emotion/react';
37
- import { Typography as Typography$1, SwipeableDrawer } from '@mui/material/';
38
- import DeleteIcon from '@mui/icons-material/Delete';
39
39
  import ButtonGroup from '@mui/material/ButtonGroup';
40
40
  import ControlPointIcon from '@mui/icons-material/ControlPoint';
41
41
  import RemoveCircleOutlineIcon from '@mui/icons-material/RemoveCircleOutline';
42
42
  import Divider from '@mui/material/Divider';
43
43
  import syncMove from '@mapbox/mapbox-gl-sync-move';
44
- import Paper$1 from '@mui/material/Paper';
45
44
  import * as xmldom from '@xmldom/xmldom';
46
- import PropTypes from 'prop-types';
47
45
  import { featureCollection as featureCollection$1, lineString, polygon } from '@turf/helpers';
48
46
  import WMSCapabilities from 'wms-capabilities';
49
47
  import InfoIcon from '@mui/icons-material/Info';
@@ -64,6 +62,9 @@ import osm2geojson from 'osm2geojson-lite';
64
62
  import { feature } from 'topojson-client';
65
63
  import * as externParser from '@tmcw/togeojson';
66
64
  import * as d3 from 'd3';
65
+ import ArrowCircleDownIcon from '@mui/icons-material/ArrowCircleDown';
66
+ import ArrowCircleUpIcon from '@mui/icons-material/ArrowCircleUp';
67
+ import CenterFocusWeakIcon from '@mui/icons-material/CenterFocusWeak';
67
68
  import { useSensor, PointerSensor, MouseSensor, useSensors, DndContext, closestCenter } from '@dnd-kit/core';
68
69
  import { restrictToVerticalAxis } from '@dnd-kit/modifiers';
69
70
  import PlaylistAddIcon from '@mui/icons-material/PlaylistAdd';
@@ -86,6 +87,7 @@ import DesignServicesIcon from '@mui/icons-material/DesignServices';
86
87
  import PictureAsPdfIcon from '@mui/icons-material/PictureAsPdf';
87
88
  import { useSelector, useDispatch } from 'react-redux';
88
89
  import { createSlice, configureStore } from '@reduxjs/toolkit';
90
+ import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
89
91
 
90
92
  /******************************************************************************
91
93
  Copyright (c) Microsoft Corporation.
@@ -2066,7 +2068,8 @@ function featureEditorStyle() {
2066
2068
  },
2067
2069
  paint: {
2068
2070
  'line-color': '#009EE0',
2069
- 'line-width': 3,
2071
+ 'line-width': 10,
2072
+ 'line-opacity': 0.2,
2070
2073
  },
2071
2074
  },
2072
2075
  {
@@ -2078,7 +2081,7 @@ function featureEditorStyle() {
2078
2081
  'line-join': 'round',
2079
2082
  },
2080
2083
  paint: {
2081
- 'line-color': "#009EE0",
2084
+ 'line-color': '#009EE0',
2082
2085
  'line-dasharray': [0.2, 2],
2083
2086
  'line-width': 2,
2084
2087
  },
@@ -2091,7 +2094,7 @@ function featureEditorStyle() {
2091
2094
  'circle-radius': mediaIsMobile ? 5 : 4,
2092
2095
  'circle-color': '#ffffff',
2093
2096
  'circle-stroke-color': '#009EE0',
2094
- 'circle-stroke-width': 1
2097
+ 'circle-stroke-width': 1,
2095
2098
  },
2096
2099
  },
2097
2100
  {
@@ -2111,7 +2114,7 @@ function featureEditorStyle() {
2111
2114
  'circle-radius': mediaIsMobile ? 7 : 5,
2112
2115
  'circle-color': '#ffffff',
2113
2116
  'circle-stroke-color': '#009EE0',
2114
- 'circle-stroke-width': 1
2117
+ 'circle-stroke-width': 1,
2115
2118
  },
2116
2119
  },
2117
2120
  {
@@ -2628,15 +2631,21 @@ var getDefaultPaintPropsByType = function (type, defaultPaintOverrides) {
2628
2631
  return defaultPaintOverrides.fill;
2629
2632
  }
2630
2633
  return {
2631
- 'fill-color': 'rgba(10,240,256,0.6)',
2632
- 'fill-outline-color': 'rgba(20,230,256,0.8)',
2634
+ // 'fill-color': 'rgba(10,240,256,0.6)',
2635
+ // 'fill-outline-color': 'rgba(20,230,256,0.8)',
2636
+ 'fill-color': '#009EE0',
2637
+ 'fill-outline-color': '#009EE0',
2633
2638
  };
2634
2639
  case 'line':
2635
2640
  if (defaultPaintOverrides === null || defaultPaintOverrides === void 0 ? void 0 : defaultPaintOverrides.line) {
2641
+ console.log(defaultPaintOverrides.line);
2636
2642
  return defaultPaintOverrides.line;
2637
2643
  }
2638
2644
  return {
2639
- 'line-color': 'rgb(203,211,2)',
2645
+ // // 'line-color': 'rgb(203,211,2)',
2646
+ // 'line-width': 5,
2647
+ // 'line-blur': 0,
2648
+ 'line-color': '#009EE0',
2640
2649
  'line-width': 5,
2641
2650
  'line-blur': 0,
2642
2651
  };
@@ -2645,10 +2654,14 @@ var getDefaultPaintPropsByType = function (type, defaultPaintOverrides) {
2645
2654
  return defaultPaintOverrides.circle;
2646
2655
  }
2647
2656
  return {
2648
- 'circle-color': 'rgba(10,240,256,0.8)',
2657
+ // 'circle-color': 'rgba(10,240,256,0.8)',
2658
+ // 'circle-stroke-color': '#fff',
2659
+ // 'circle-stroke-width': 2,
2660
+ // 'circle-radius': 4,
2661
+ 'circle-color': '#009EE0',
2649
2662
  'circle-stroke-color': '#fff',
2650
2663
  'circle-stroke-width': 2,
2651
- 'circle-radius': 4,
2664
+ 'circle-radius': 5,
2652
2665
  };
2653
2666
  default:
2654
2667
  return {};
@@ -2920,7 +2933,7 @@ var MlFollowGps = function (props) {
2920
2933
  isFollowed && userLocationGeoJson && (React__default.createElement(MlGeoJsonLayer, { geojson: accuracyGeoJson, type: 'fill', paint: __assign({ 'fill-color': '#cbd300', 'fill-opacity': 0.3 }, props.accuracyPaint), insertBeforeLayer: props.insertBeforeLayer })),
2921
2934
  isFollowed && orientationCone && (React__default.createElement(MlGeoJsonLayer, { geojson: orientationCone, type: 'fill', paint: __assign({ 'fill-color': '#0000ff', 'fill-antialias': false, 'fill-opacity': 0.3 }, props.orientationConePaint), insertBeforeLayer: props.insertBeforeLayer })),
2922
2935
  isFollowed && userLocationGeoJson && (React__default.createElement(MlGeoJsonLayer, { geojson: userLocationGeoJson, type: 'circle', paint: __assign({ 'circle-color': '#009ee0', 'circle-radius': 5, 'circle-stroke-color': '#fafaff', 'circle-stroke-width': 1 }, props.circlePaint), insertBeforeLayer: props.insertBeforeLayer })),
2923
- React__default.createElement(Button, { variant: "navtools", sx: {
2936
+ React__default.createElement(Button, { variant: "navtools", "data-testid": "mlFollowGpsBtn", sx: {
2924
2937
  zIndex: 1002,
2925
2938
  color: isFollowed
2926
2939
  ? function (theme) { return theme.palette.GPS.GPSActiveColor; }
@@ -3161,7 +3174,7 @@ function LayerListFolder(_a) {
3161
3174
  return (React__default.createElement(React__default.Fragment, null,
3162
3175
  React__default.createElement(ListItemStyled$2, null,
3163
3176
  React__default.createElement(ListItemIconStyled$1, null,
3164
- React__default.createElement(IconButtonStyled$2, { edge: "end", "aria-label": "open", onClick: function () { return setOpen(!open); } }, open ? React__default.createElement(ExpandMore, null) : React__default.createElement(KeyboardArrowRight, null)),
3177
+ React__default.createElement(IconButtonStyled$2, { edge: "end", "aria-label": "open", onClick: function () { return setOpen(!open); } }, open ? React__default.createElement(ExpandMoreIcon, null) : React__default.createElement(ExpandLessIcon, null)),
3165
3178
  React__default.createElement(CheckboxStyled$1, { disabled: setVisible ? false : !visible, checked: setVisible ? visible : localVisible, onClick: function () {
3166
3179
  if (setVisible) {
3167
3180
  setVisible(function (val) { return !val; });
@@ -3189,7 +3202,7 @@ var ColorPicker = function (_a) {
3189
3202
  var value = (props === null || props === void 0 ? void 0 : props.value) || '';
3190
3203
  return (React__default.createElement(React__default.Fragment, null,
3191
3204
  React__default.createElement(Grid, { container: true, sx: { flexWrap: 'nowrap' } },
3192
- React__default.createElement(Grid, { xs: 12, item: true },
3205
+ React__default.createElement(Grid, { size: 12 },
3193
3206
  React__default.createElement(Button, { variant: "outlined", onClick: function () { return setShowPicker(true); }, sx: {
3194
3207
  minWidth: '100%',
3195
3208
  padding: '5px',
@@ -3434,7 +3447,8 @@ function LayerListItem(_a) {
3434
3447
  var deletedRef = useRef(false);
3435
3448
  var visibleRef = useRef(visible);
3436
3449
  // this state variable is used for layer components that provide a paint attribute
3437
- var _u = useState(((_b = layerComponent === null || layerComponent === void 0 ? void 0 : layerComponent.props) === null || _b === void 0 ? void 0 : _b.paint) || ((_d = (_c = layerComponent === null || layerComponent === void 0 ? void 0 : layerComponent.props) === null || _c === void 0 ? void 0 : _c.options) === null || _d === void 0 ? void 0 : _d.paint) ||
3450
+ var _u = useState(((_b = layerComponent === null || layerComponent === void 0 ? void 0 : layerComponent.props) === null || _b === void 0 ? void 0 : _b.paint) ||
3451
+ ((_d = (_c = layerComponent === null || layerComponent === void 0 ? void 0 : layerComponent.props) === null || _c === void 0 ? void 0 : _c.options) === null || _d === void 0 ? void 0 : _d.paint) ||
3438
3452
  getDefaultPaintPropsByType(((_e = layerComponent === null || layerComponent === void 0 ? void 0 : layerComponent.props) === null || _e === void 0 ? void 0 : _e.type) || getDefaulLayerTypeByGeometry(layerComponent.props.geojson))), paintProps = _u[0], setPaintProps = _u[1];
3439
3453
  var _visible = useMemo(function () {
3440
3454
  if (!visible) {
@@ -3490,7 +3504,7 @@ function LayerListItem(_a) {
3490
3504
  layout: {
3491
3505
  visibility: _visible ? 'visible' : 'none',
3492
3506
  },
3493
- options: __assign(__assign({}, (_a = layerComponent === null || layerComponent === void 0 ? void 0 : layerComponent.props) === null || _a === void 0 ? void 0 : _a.options), (setLayerState ? {} : { paint: paintProps }))
3507
+ options: __assign(__assign({}, (_a = layerComponent === null || layerComponent === void 0 ? void 0 : layerComponent.props) === null || _a === void 0 ? void 0 : _a.options), (setLayerState ? {} : { paint: paintProps })),
3494
3508
  });
3495
3509
  }
3496
3510
  }
@@ -3514,7 +3528,7 @@ function LayerListItem(_a) {
3514
3528
  return !current;
3515
3529
  });
3516
3530
  } },
3517
- React__default.createElement(Tune, null)))) : undefined },
3531
+ React__default.createElement(TuneIcon, null)))) : undefined },
3518
3532
  React__default.createElement(CheckboxListItemIcon, null,
3519
3533
  React__default.createElement(CheckboxStyled, { disabled: !visible, checked: localVisible, onClick: function () {
3520
3534
  setLocalVisible(function (val) { return !val; });
@@ -3522,7 +3536,7 @@ function LayerListItem(_a) {
3522
3536
  React__default.createElement(ListItemText, { variant: "layerlist", primary: name, secondary: description, primaryTypographyProps: { overflow: 'hidden' } })));
3523
3537
  return (React__default.createElement(React__default.Fragment, null,
3524
3538
  props.sortable && props.layerId && !((_j = layerComponent === null || layerComponent === void 0 ? void 0 : layerComponent.props) === null || _j === void 0 ? void 0 : _j.layers) && (React__default.createElement(SortableContainer, { layerId: props.layerId }, listContent)),
3525
- !props.sortable && !((_k = layerComponent === null || layerComponent === void 0 ? void 0 : layerComponent.props) === null || _k === void 0 ? void 0 : _k.layers) && (listContent),
3539
+ !props.sortable && !((_k = layerComponent === null || layerComponent === void 0 ? void 0 : layerComponent.props) === null || _k === void 0 ? void 0 : _k.layers) && listContent,
3526
3540
  _layerComponent,
3527
3541
  !((_l = layerComponent === null || layerComponent === void 0 ? void 0 : layerComponent.props) === null || _l === void 0 ? void 0 : _l.layers) &&
3528
3542
  Object.keys(paintProps).length > 0 &&
@@ -3534,7 +3548,7 @@ function LayerListItem(_a) {
3534
3548
  setShowDeletionConfirmationDialog(true);
3535
3549
  }
3536
3550
  } },
3537
- React__default.createElement(Delete, null)),
3551
+ React__default.createElement(DeleteIcon, null)),
3538
3552
  showDeletionConfirmationDialog && (React__default.createElement(ConfirmDialog, { open: showDeletionConfirmationDialog, onConfirm: function () {
3539
3553
  if (typeof setLayerState === 'function') {
3540
3554
  deletedRef.current = true;
@@ -3585,7 +3599,7 @@ function Sidebar(_a) {
3585
3599
  lg: '350px',
3586
3600
  }, boxSizing: 'border-box' }, drawerPaperProps === null || drawerPaperProps === void 0 ? void 0 : drawerPaperProps.sx) }), sx: __assign({ flexGrow: 1, zIndex: 105, position: 'absolute', bottom: 0, display: 'flex', flexDirection: 'column', maxWidth: { lg: '30%', md: '40%', sm: '50%', xs: '78%' } }, (drawerOpen ? {} : { left: mediaIsMobile ? '-90vw' : '-20vw' })) }, props),
3587
3601
  React__default.createElement(DrawerHeader, __assign({}, drawerHeaderProps),
3588
- React__default.createElement(Typography$1, { variant: "h6" }, props.name),
3602
+ React__default.createElement(Typography, { variant: "h6" }, props.name),
3589
3603
  React__default.createElement(IconButton, { onClick: setOpen
3590
3604
  ? function () {
3591
3605
  setOpen === null || setOpen === void 0 ? void 0 : setOpen(false);
@@ -3632,7 +3646,7 @@ function Sidebar(_a) {
3632
3646
  left: 0,
3633
3647
  } },
3634
3648
  React__default.createElement(Puller, null),
3635
- React__default.createElement(Typography$1, { variant: "h6", sx: { p: '13px' } }, props.name)),
3649
+ React__default.createElement(Typography, { variant: "h6", sx: { p: '13px' } }, props.name)),
3636
3650
  React__default.createElement(Paper, { sx: {
3637
3651
  px: '15px',
3638
3652
  pb: '15px',
@@ -3679,14 +3693,16 @@ var MlMultiMeasureTool = function (props) {
3679
3693
  });
3680
3694
  };
3681
3695
  useEffect(function () {
3682
- reload && setReload(false);
3683
- reload &&
3696
+ if (reload) {
3697
+ setReload(false);
3698
+ // eslint-disable-next-line @typescript-eslint/no-unused-expressions
3684
3699
  measureState &&
3685
- setMeasureList(function (current) {
3686
- var newList = __spreadArray([], current, true);
3687
- newList.push(measureState);
3688
- return newList;
3689
- });
3700
+ setMeasureList(function (current) {
3701
+ var newList = __spreadArray([], current, true);
3702
+ newList.push(measureState);
3703
+ return newList;
3704
+ });
3705
+ }
3690
3706
  }, [reload]);
3691
3707
  useEffect(function () {
3692
3708
  setMeasureState(undefined);
@@ -3696,7 +3712,7 @@ var MlMultiMeasureTool = function (props) {
3696
3712
  React__default.createElement(Box$2, { sx: { flexGrow: 1 } },
3697
3713
  React__default.createElement("br", null),
3698
3714
  React__default.createElement(Grid$1, { container: true, spacing: 4, justifyContent: "flex-start" },
3699
- React__default.createElement(Grid$1, { item: true, xs: 3 },
3715
+ React__default.createElement(Grid$1, { size: 3 },
3700
3716
  React__default.createElement(Tooltip, { title: "Measure Area" },
3701
3717
  React__default.createElement(Button, { variant: "outlined", sx: {
3702
3718
  backgroundColor: selectedMode === 'polygon'
@@ -3711,7 +3727,7 @@ var MlMultiMeasureTool = function (props) {
3711
3727
  setReload(true);
3712
3728
  } },
3713
3729
  React__default.createElement(PentagonIcon, null)))),
3714
- React__default.createElement(Grid$1, { item: true, xs: 3 },
3730
+ React__default.createElement(Grid$1, { size: 3 },
3715
3731
  React__default.createElement(Tooltip, { title: "Measure Distance" },
3716
3732
  React__default.createElement(Button, { variant: "outlined", sx: {
3717
3733
  backgroundColor: selectedMode === 'line'
@@ -3727,7 +3743,7 @@ var MlMultiMeasureTool = function (props) {
3727
3743
  } },
3728
3744
  React__default.createElement(PolylineIcon, null)))))),
3729
3745
  React__default.createElement("br", null),
3730
- React__default.createElement(Grid$1, { item: true, xs: 4 },
3746
+ React__default.createElement(Grid$1, { size: 4 },
3731
3747
  React__default.createElement(FormControl, null,
3732
3748
  React__default.createElement(InputLabel, { id: "unit-select-label" }, "Unit"),
3733
3749
  React__default.createElement(Select, { labelId: "unit-select-label", id: "unit-select", value: selectedUnit, label: "Unit", onChange: function (e) {
@@ -3799,56 +3815,24 @@ MlMultiMeasureTool.defaultProps = {
3799
3815
  buttonStyleOverride: {},
3800
3816
  };
3801
3817
 
3802
- var _g;
3803
- function _extends$2() { _extends$2 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$2.apply(this, arguments); }
3804
- var SvgCompassNeedle = function SvgCompassNeedle(props) {
3805
- return /*#__PURE__*/React.createElement("svg", _extends$2({
3806
- width: 10,
3807
- height: 40,
3808
- viewBox: "0 0 10 40",
3809
- fill: "none",
3810
- id: "svg6"
3811
- }, props), _g || (_g = /*#__PURE__*/React.createElement("g", {
3812
- id: "g14",
3813
- transform: "translate(0.67544,-1.25e-5)"
3814
- }, /*#__PURE__*/React.createElement("path", {
3815
- d: "m 3.34715,4.52028 c 0.22737,-1.05154 1.72745,-1.05154 1.95482,0 L 8.64912,20 H 0 Z",
3816
- fill: "#cf003d"
3817
- }), /*#__PURE__*/React.createElement("path", {
3818
- d: "m 3.34715,35.4797 c 0.22737,1.0516 1.72745,1.0516 1.95482,0 L 8.64912,20 H 0 Z",
3819
- fill: "#d3dcf0"
3820
- }))));
3818
+ var CompassBackground = function (_a) {
3819
+ var _b = _a.className, className = _b === void 0 ? '' : _b, title = _a.title, onClick = _a.onClick, style = _a.style;
3820
+ return (React__default.createElement("svg", { width: "52", height: "53", viewBox: "0 0 52 53", fill: "none", className: className, onClick: onClick, role: title ? 'img' : 'presentation', "aria-hidden": !title, style: style },
3821
+ title && React__default.createElement("title", null, title),
3822
+ React__default.createElement("circle", { cx: "26.0001", cy: "26.1843", r: "24", fill: "white", stroke: "#009EE0", strokeWidth: "2" }),
3823
+ React__default.createElement("path", { d: "M26.4915 7.59161C26.3524 8.07338 25.6698 8.07338 25.5307 7.59161L24.2998 3.3276C24.2075 3.0079 24.4474 2.68893 24.7802 2.68893H27.242C27.5748 2.68893 27.8147 3.0079 27.7224 3.3276L26.4915 7.59161Z", fill: "#009EE0" }),
3824
+ React__default.createElement("path", { d: "M25.5085 44.7598C25.6476 44.278 26.3302 44.278 26.4693 44.7598L27.7002 49.0238C27.7925 49.3435 27.5526 49.6625 27.2198 49.6625H24.758C24.4252 49.6625 24.1853 49.3435 24.2776 49.0238L25.5085 44.7598Z", fill: "#009EE0" }),
3825
+ React__default.createElement("path", { d: "M44.6641 26.4915C44.1823 26.3524 44.1823 25.6698 44.6641 25.5307L48.9281 24.2998C49.2478 24.2075 49.5668 24.4474 49.5668 24.7802V27.242C49.5668 27.5747 49.2478 27.8147 48.9281 27.7224L44.6641 26.4915Z", fill: "#009EE0" }),
3826
+ React__default.createElement("path", { d: "M7.3959 25.6085C7.87766 25.7476 7.87766 26.4302 7.3959 26.5693L3.13189 27.8002C2.81218 27.8925 2.49321 27.6526 2.49321 27.3198L2.49321 24.858C2.49321 24.5253 2.81218 24.2853 3.13189 24.3776L7.3959 25.6085Z", fill: "#009EE0" })));
3821
3827
  };
3822
3828
 
3823
- var _circle, _path$1, _path2$1, _path3, _path4;
3824
- function _extends$1() { _extends$1 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); }
3825
- var SvgCompassBackground = function SvgCompassBackground(props) {
3826
- return /*#__PURE__*/React.createElement("svg", _extends$1({
3827
- width: 52,
3828
- height: 53,
3829
- viewBox: "0 0 52 53",
3830
- fill: "none",
3831
- xmlns: "http://www.w3.org/2000/svg"
3832
- }, props), _circle || (_circle = /*#__PURE__*/React.createElement("circle", {
3833
- cx: 26.0001,
3834
- cy: 26.1843,
3835
- r: 24,
3836
- fill: "white",
3837
- stroke: "#009EE0",
3838
- strokeWidth: 2
3839
- })), _path$1 || (_path$1 = /*#__PURE__*/React.createElement("path", {
3840
- d: "M26.4915 7.59161C26.3524 8.07338 25.6698 8.07338 25.5307 7.59161L24.2998 3.3276C24.2075 3.0079 24.4474 2.68893 24.7802 2.68893H27.242C27.5748 2.68893 27.8147 3.0079 27.7224 3.3276L26.4915 7.59161Z",
3841
- fill: "#009EE0"
3842
- })), _path2$1 || (_path2$1 = /*#__PURE__*/React.createElement("path", {
3843
- d: "M25.5085 44.7598C25.6476 44.278 26.3302 44.278 26.4693 44.7598L27.7002 49.0238C27.7925 49.3435 27.5526 49.6625 27.2198 49.6625H24.758C24.4252 49.6625 24.1853 49.3435 24.2776 49.0238L25.5085 44.7598Z",
3844
- fill: "#009EE0"
3845
- })), _path3 || (_path3 = /*#__PURE__*/React.createElement("path", {
3846
- d: "M44.6641 26.4915C44.1823 26.3524 44.1823 25.6698 44.6641 25.5307L48.9281 24.2998C49.2478 24.2075 49.5668 24.4474 49.5668 24.7802V27.242C49.5668 27.5747 49.2478 27.8147 48.9281 27.7224L44.6641 26.4915Z",
3847
- fill: "#009EE0"
3848
- })), _path4 || (_path4 = /*#__PURE__*/React.createElement("path", {
3849
- d: "M7.3959 25.6085C7.87766 25.7476 7.87766 26.4302 7.3959 26.5693L3.13189 27.8002C2.81218 27.8925 2.49321 27.6526 2.49321 27.3198L2.49321 24.858C2.49321 24.5253 2.81218 24.2853 3.13189 24.3776L7.3959 25.6085Z",
3850
- fill: "#009EE0"
3851
- })));
3829
+ var CompassNeedle = function (_a) {
3830
+ var _b = _a.className, className = _b === void 0 ? '' : _b, title = _a.title, onClick = _a.onClick, style = _a.style;
3831
+ return (React__default.createElement("svg", { width: "10", height: "40", viewBox: "0 0 10 40", fill: "none", className: className, onClick: onClick, role: title ? 'img' : 'presentation', "aria-hidden": !title, style: style },
3832
+ title && React__default.createElement("title", null, title),
3833
+ React__default.createElement("g", { transform: "translate(0.67544,-1.25e-5)" },
3834
+ React__default.createElement("path", { d: "m 3.34715,4.52028 c 0.22737,-1.05154 1.72745,-1.05154 1.95482,0 L 8.64912,20 H 0 Z", fill: "#cf003d" }),
3835
+ React__default.createElement("path", { d: "m 3.34715,35.4797 c 0.22737,1.0516 1.72745,1.0516 1.95482,0 L 8.64912,20 H 0 Z", fill: "#d3dcf0" }))));
3852
3836
  };
3853
3837
 
3854
3838
  var BoxStyled$2 = styled(Box$1)(function (_a) {
@@ -3954,9 +3938,9 @@ var MlNavigationCompass = function (props) {
3954
3938
  return (React__default.createElement(React__default.Fragment, null,
3955
3939
  React__default.createElement(BoxStyled$2, { sx: __assign({}, props.style) },
3956
3940
  React__default.createElement(CompassBox, { onClick: rotate, sx: __assign({}, props.backgroundStyle) },
3957
- React__default.createElement(SvgCompassBackground, { style: { position: 'absolute', top: 0, left: 0 } }),
3941
+ React__default.createElement(CompassBackground, { style: { position: 'absolute', top: 0, left: 0 } }),
3958
3942
  React__default.createElement(NeedleBox, { onClick: rotate, sx: __assign({}, props.needleStyle) },
3959
- React__default.createElement(SvgCompassNeedle, { style: {
3943
+ React__default.createElement(CompassNeedle, { style: {
3960
3944
  transform: 'rotate(' + (bearing > 0 ? '-' + bearing : -1 * bearing) + 'deg)',
3961
3945
  } }))))));
3962
3946
  };
@@ -4270,20 +4254,11 @@ MlLayerMagnify.defaultProps = {
4270
4254
  magnifierStyle: {},
4271
4255
  };
4272
4256
 
4273
- var _path, _path2;
4274
- function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
4275
- var SvgIcononlyarrow = function SvgIcononlyarrow(props) {
4276
- return /*#__PURE__*/React.createElement("svg", _extends({
4277
- viewBox: "0 0 47 30",
4278
- fill: "none",
4279
- xmlns: "http://www.w3.org/2000/svg"
4280
- }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
4281
- d: "M29.5 21.25L35.75 15L29.5 8.75V21.25Z",
4282
- fill: "#009EE0"
4283
- })), _path2 || (_path2 = /*#__PURE__*/React.createElement("path", {
4284
- d: "M17.5 8.75L11.25 15L17.5 21.25V8.75Z",
4285
- fill: "#009EE0"
4286
- })));
4257
+ var SwipeIcon = function (_a) {
4258
+ var _b = _a.className, className = _b === void 0 ? '' : _b, title = _a.title, onClick = _a.onClick, style = _a.style, color = _a.color;
4259
+ return (React__default.createElement("svg", { viewBox: "0 0 47 30", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className, onClick: onClick, role: title ? 'img' : 'presentation', "aria-hidden": !title, style: style, color: color },
4260
+ React__default.createElement("path", { d: "M29.5 21.25L35.75 15L29.5 8.75V21.25Z", fill: "#009EE0" }),
4261
+ React__default.createElement("path", { d: "M17.5 8.75L11.25 15L17.5 21.25V8.75Z", fill: "#009EE0" })));
4287
4262
  };
4288
4263
 
4289
4264
  /**
@@ -4377,7 +4352,7 @@ var MlLayerSwipe = function (props) {
4377
4352
  };
4378
4353
  }, [mapContext]);
4379
4354
  return (React__default.createElement("div", { style: __assign({ position: 'absolute', left: swipeX + '%', top: '50%', borderRadius: '50%', width: '65px', height: '65px', background: 'rgba(234, 235, 241, 0.75)', border: '2px solid rgba(0, 158, 224, 0.75)', cursor: 'pointer', zIndex: '110', marginLeft: '-35px', marginTop: '-50px', textAlign: 'center', lineHeight: '91px', fontSize: '2em', color: '#fafafa', userSelect: 'none' }, props.buttonStyle), onTouchStart: onDown, onMouseDown: onDown },
4380
- React__default.createElement(SvgIcononlyarrow, { color: "#0066ff", style: {
4355
+ React__default.createElement(SwipeIcon, { color: "#0066ff", style: {
4381
4356
  width: '65px',
4382
4357
  height: '65px',
4383
4358
  justifyContent: 'center',
@@ -4615,76 +4590,130 @@ var MlTransitionGeoJsonLayer = function (props) {
4615
4590
  React__default.createElement(MlGeoJsonLayer, __assign({}, restProps, { geojson: displayGeojson }))));
4616
4591
  };
4617
4592
 
4618
- /**
4619
- * Adds a marker to the map and displays the contents of the "content" property in an iframe next to it
4620
- */
4621
- var MlMarker = function (props) {
4593
+ var getBoxTransform = function (anchor) {
4594
+ if (anchor === void 0) { anchor = 'top'; }
4595
+ switch (anchor) {
4596
+ case 'bottom':
4597
+ return 'translate(-50%, 0%)';
4598
+ case 'left':
4599
+ return 'translate(-100%, -50%)';
4600
+ case 'right':
4601
+ return 'translate(0%, -50%)';
4602
+ case 'top-left':
4603
+ return 'translate(-100%, -100%)';
4604
+ case 'top-right':
4605
+ return 'translate(0%, -100%)';
4606
+ case 'bottom-left':
4607
+ return 'translate(-100%, 0%)';
4608
+ case 'bottom-right':
4609
+ return 'translate(0%, 0%)';
4610
+ default:
4611
+ case 'top':
4612
+ return 'translate(-50%, -100%)';
4613
+ }
4614
+ };
4615
+ function getBoxMargins(anchor, offset, style) {
4616
+ var w = parseInt(String((style === null || style === void 0 ? void 0 : style.width) || 14), 10);
4617
+ var h = parseInt(String((style === null || style === void 0 ? void 0 : style.height) || 14), 10);
4618
+ var m = {};
4619
+ switch (anchor) {
4620
+ case 'bottom':
4621
+ m.marginTop = "".concat(offset, "px");
4622
+ break;
4623
+ case 'left':
4624
+ m.marginLeft = "-".concat(offset, "px");
4625
+ break;
4626
+ case 'right':
4627
+ m.marginLeft = "".concat(w + offset, "px");
4628
+ break;
4629
+ case 'top-left':
4630
+ m.marginTop = "-".concat(h + offset, "px");
4631
+ m.marginLeft = "-".concat(offset, "px");
4632
+ break;
4633
+ case 'top-right':
4634
+ m.marginTop = "-".concat(h + offset, "px");
4635
+ m.marginLeft = "".concat(w + offset, "px");
4636
+ break;
4637
+ case 'bottom-left':
4638
+ m.marginTop = "".concat(offset, "px");
4639
+ m.marginLeft = "-".concat(offset, "px");
4640
+ break;
4641
+ case 'bottom-right':
4642
+ m.marginTop = "".concat(offset, "px");
4643
+ m.marginLeft = "".concat(w + offset, "px");
4644
+ break;
4645
+ case 'top':
4646
+ default:
4647
+ m.marginTop = "-".concat(h + offset, "px");
4648
+ break;
4649
+ }
4650
+ return m;
4651
+ }
4652
+ var MlMarker = function (_a) {
4653
+ var _b = _a.passEventsThrough, passEventsThrough = _b === void 0 ? true : _b, _c = _a.contentOffset, contentOffset = _c === void 0 ? 5 : _c, props = __rest(_a, ["passEventsThrough", "contentOffset"]);
4622
4654
  var mapHook = useMap({
4623
4655
  mapId: props.mapId,
4624
4656
  waitForLayer: props.insertBeforeLayer,
4625
4657
  });
4626
- var mapState = useMapState({
4627
- mapId: props.mapId,
4628
- watch: { viewport: true },
4629
- });
4630
- var iframe = useRef(null);
4631
- var _a = useState({
4632
- width: "400px",
4633
- height: "500px",
4634
- }), iframeDimensions = _a[0], setIframeDimensions = _a[1];
4635
- var _b = useState(), markerPixelPos = _b[0], setMarkerPixelPos = _b[1];
4636
- useEffect(function () {
4637
- var _a, _b;
4638
- if (!((_b = (_a = mapHook.map) === null || _a === void 0 ? void 0 : _a.map) === null || _b === void 0 ? void 0 : _b.project))
4639
- return;
4640
- var _pixelPos = mapHook.map.map.project([props.lng, props.lat]);
4641
- setMarkerPixelPos(_pixelPos);
4642
- }, [mapHook.map, props.lng, props.lat, mapState.viewport]);
4658
+ var _d = useState(null), marker = _d[0], setMarker = _d[1];
4659
+ var container = useRef(null);
4660
+ var iframeRef = useRef(null);
4643
4661
  useEffect(function () {
4644
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
4645
- if (!mapHook.map ||
4646
- !((_d = (_c = (_b = (_a = iframe.current) === null || _a === void 0 ? void 0 : _a.contentWindow) === null || _b === void 0 ? void 0 : _b.document) === null || _c === void 0 ? void 0 : _c.body) === null || _d === void 0 ? void 0 : _d.scrollHeight))
4662
+ if (!mapHook.map)
4647
4663
  return;
4648
- var mapHeight = mapHook.map.map._container.clientHeight;
4649
- var _pixelPos = mapHook.map.map.project([props.lng, props.lat]);
4650
- var pixelToBottom = mapHeight - _pixelPos.y;
4651
- var iframeHeight = (_h = (_g = (_f = (_e = iframe.current) === null || _e === void 0 ? void 0 : _e.contentWindow) === null || _f === void 0 ? void 0 : _f.document) === null || _g === void 0 ? void 0 : _g.body) === null || _h === void 0 ? void 0 : _h.scrollHeight;
4652
- var iframeWidth = (_m = (_l = (_k = (_j = iframe.current) === null || _j === void 0 ? void 0 : _j.contentWindow) === null || _k === void 0 ? void 0 : _k.document) === null || _l === void 0 ? void 0 : _l.body) === null || _m === void 0 ? void 0 : _m.scrollWidth;
4653
- setIframeDimensions({
4654
- width: iframeWidth + "px",
4655
- height: (pixelToBottom < iframeHeight ? pixelToBottom : iframeHeight) + "px",
4664
+ container.current = document.createElement('div');
4665
+ var defaultMarkerStyle = {
4666
+ width: '12px',
4667
+ height: '12px',
4668
+ background: 'linear-gradient(135deg, rgb(186, 208, 218) 0%, rgb(96, 209, 253) 100%)',
4669
+ border: '1px solid rgba(255, 255, 255, 0.7)',
4670
+ boxShadow: '0 2px 6px rgba(90, 0, 0, 0.2), 0 0 0 2px rgba(240, 147, 251, 0.2)',
4671
+ borderRadius: '50%',
4672
+ };
4673
+ var markerStyle = __assign(__assign({}, defaultMarkerStyle), props.markerStyle);
4674
+ var maplibreMarker = new maplibregl.Marker({
4675
+ element: container.current,
4676
+ anchor: 'center',
4677
+ })
4678
+ .setLngLat([props.lng, props.lat])
4679
+ .addTo(mapHook.map.map);
4680
+ setMarker(maplibreMarker);
4681
+ var markerDot = document.createElement('div');
4682
+ Object.entries(markerStyle).forEach(function (_a) {
4683
+ var key = _a[0], value = _a[1];
4684
+ markerDot.style.setProperty(key.replace(/([A-Z])/g, '-$1').toLowerCase(), String(value));
4656
4685
  });
4657
- }, [props.lng, props.lat, props.content]);
4658
- return (React__default.createElement(React__default.Fragment, null,
4659
- React__default.createElement(MlGeoJsonLayer, { geojson: {
4660
- type: "Feature",
4661
- geometry: {
4662
- type: "Point",
4663
- coordinates: [props.lng, props.lat],
4664
- },
4665
- properties: {},
4666
- }, paint: {
4667
- "circle-radius": 14,
4668
- "circle-color": "rgba(40,200,20,0.5)",
4669
- }, type: "circle", mapId: props.mapId }),
4670
- markerPixelPos && (React__default.createElement(Paper$1, { sx: {
4671
- opacity: 0.7,
4672
- position: "fixed",
4673
- display: "flex",
4674
- /** TODO: fix positioning delay when moving the map */
4675
- left: markerPixelPos.x,
4676
- top: markerPixelPos.y,
4677
- width: iframeDimensions.width,
4678
- height: iframeDimensions.height,
4679
- "&:hover": {
4686
+ container.current.appendChild(markerDot);
4687
+ return function () {
4688
+ var _a;
4689
+ markerDot.remove();
4690
+ maplibreMarker.remove();
4691
+ (_a = container.current) === null || _a === void 0 ? void 0 : _a.remove();
4692
+ };
4693
+ }, [mapHook.map, props.lng, props.lat, props.markerStyle, props.anchor]);
4694
+ useEffect(function () {
4695
+ if (marker) {
4696
+ marker.setLngLat([props.lng, props.lat]);
4697
+ }
4698
+ }, [marker, props.lng, props.lat]);
4699
+ function handleIframeLoad() {
4700
+ var _a, _b, _c;
4701
+ var iframeDoc = (_b = (_a = iframeRef.current) === null || _a === void 0 ? void 0 : _a.contentWindow) === null || _b === void 0 ? void 0 : _b.document;
4702
+ if (iframeDoc && ((_c = iframeRef.current) === null || _c === void 0 ? void 0 : _c.parentElement)) {
4703
+ var scrollHeight = iframeDoc.documentElement.scrollHeight;
4704
+ iframeRef.current.parentElement.style.height = "".concat(scrollHeight, "px");
4705
+ }
4706
+ }
4707
+ return (container.current &&
4708
+ createPortal(React__default.createElement(Box$1, { sx: __assign(__assign(__assign({ position: 'absolute', display: 'flex', width: '300px', maxHeight: '500px', opacity: passEventsThrough ? 1 : 0.7, zIndex: -1, transform: getBoxTransform(props.anchor) }, getBoxMargins(props.anchor, contentOffset, props.markerStyle)), { pointerEvents: passEventsThrough ? 'none' : 'auto', '&:hover': {
4680
4709
  opacity: 1,
4681
- },
4682
- zIndex: -1,
4683
- } },
4684
- React__default.createElement("iframe", { style: { width: "100%" }, srcDoc: props.content, ref: iframe, sandbox: "allow-same-origin allow-popups-to-escape-sandbox", frameBorder: "0", title: mapHook.componentId })))));
4685
- };
4686
- MlMarker.defaultProps = {
4687
- mapId: undefined,
4710
+ } }), props.containerStyle) },
4711
+ React__default.createElement("iframe", { ref: iframeRef, onLoad: handleIframeLoad, style: __assign({ width: '100%', borderStyle: 'none' }, props.iframeStyle), srcDoc: "<div>\n\t<style>\n\t\tbody {\n\t\t\t".concat(Object.entries(props.iframeBodyStyle || {})
4712
+ .map(function (_a) {
4713
+ var key = _a[0], val = _a[1];
4714
+ return "".concat(key.replace(/([A-Z])/g, '-$1').toLowerCase(), ": ").concat(val, ";");
4715
+ })
4716
+ .join(' '), "\n\t\t}\n\t</style>\n\t").concat(props.content || '', "\n</div>"), sandbox: "allow-same-origin allow-popups-to-escape-sandbox allow-scripts", title: mapHook.componentId })), container.current));
4688
4717
  };
4689
4718
 
4690
4719
  /**
@@ -5564,12 +5593,6 @@ var MlShareMapState = function (props) {
5564
5593
  MlShareMapState.defaultProps = {
5565
5594
  mapId: undefined,
5566
5595
  };
5567
- MlShareMapState.propTypes = {
5568
- /**
5569
- * Id of the target MapLibre instance in mapContext
5570
- */
5571
- mapId: PropTypes.string,
5572
- };
5573
5596
 
5574
5597
  function getElevationData(_geojsonInfo, elevationFactor) {
5575
5598
  var createStep = function (x, y, z, x2, y2) {
@@ -5915,12 +5938,6 @@ var MlWmsFeatureInfoPopup = function (props) {
5915
5938
  MlWmsFeatureInfoPopup.defaultProps = {
5916
5939
  mapId: undefined,
5917
5940
  };
5918
- MlWmsFeatureInfoPopup.propTypes = {
5919
- /**
5920
- * Id of the target MapLibre instance in mapContext
5921
- */
5922
- mapId: PropTypes.string,
5923
- };
5924
5941
 
5925
5942
  var defaultProps = {
5926
5943
  visible: true,
@@ -6032,51 +6049,6 @@ var MlWmsLayer = function (props) {
6032
6049
  return React__default.createElement(React__default.Fragment, null);
6033
6050
  };
6034
6051
  MlWmsLayer.defaultProps = __assign({}, defaultProps);
6035
- MlWmsLayer.propTypes = {
6036
- /**
6037
- * WMS URL
6038
- */
6039
- url: PropTypes.string.isRequired,
6040
- /**
6041
- * URL query parameters that will be added to the WMS URL. A layers property (string) is mandatory. Any value defined on this attribute will extend the default object.
6042
- */
6043
- urlParameters: PropTypes.shape({
6044
- layers: PropTypes.string.isRequired,
6045
- bbox: PropTypes.string,
6046
- format: PropTypes.string,
6047
- service: PropTypes.string,
6048
- version: PropTypes.string,
6049
- request: PropTypes.string,
6050
- srs: PropTypes.string,
6051
- width: PropTypes.number,
6052
- height: PropTypes.number,
6053
- }),
6054
- /**
6055
- * Id of the target MapLibre instance in mapContext
6056
- */
6057
- mapId: PropTypes.string,
6058
- /**
6059
- * MapLibre attribution shown in the bottom right of the map, if this layer is visible
6060
- */
6061
- attribution: PropTypes.string,
6062
- /**
6063
- * Object that is passed to the MapLibre.addLayer call as config option parameter
6064
- */
6065
- layerOptions: PropTypes.object,
6066
- /**
6067
- * Object that is passed to the MapLibre.addSource call as config option parameter
6068
- */
6069
- sourceOptions: PropTypes.object,
6070
- /**
6071
- * Id of an existing layer in the mapLibre instance to help specify the layer order
6072
- * This layer will be visually beneath the layer with the "insertBeforeLayer" id.
6073
- */
6074
- insertBeforeLayer: PropTypes.string,
6075
- /**
6076
- * Sets layer "visibility" property to "visible" if true or "none" if false
6077
- */
6078
- visible: PropTypes.bool,
6079
- };
6080
6052
 
6081
6053
  function useWms(props) {
6082
6054
  // Use a useRef hook to reference the layer object to be able to access it later inside useEffect hooks
@@ -6388,7 +6360,7 @@ var MlWmsLoader = function (props) {
6388
6360
  }
6389
6361
  }, disabled: !(layers === null || layers === void 0 ? void 0 : layers.some(function (layer) { return layer.visible && layer.queryable; })) },
6390
6362
  React__default.createElement(InfoIcon, null))),
6391
- React__default.createElement(IconButton$1, { edge: props.showDeleteButton ? false : 'end', sx: __assign({ padding: '4px', marginTop: '-3px' }, (props.showDeleteButton ? { marginRight: '4px' } : {})), "aria-label": "open", onClick: function () { return setOpen(function (current) { return !current; }); } }, open ? React__default.createElement(ExpandLess, null) : React__default.createElement(ExpandMore, null)),
6363
+ React__default.createElement(IconButton$1, { edge: props.showDeleteButton ? false : 'end', sx: __assign({ padding: '4px', marginTop: '-3px' }, (props.showDeleteButton ? { marginRight: '4px' } : {})), "aria-label": "open", onClick: function () { return setOpen(function (current) { return !current; }); } }, open ? React__default.createElement(ExpandLessIcon, null) : React__default.createElement(ExpandMoreIcon, null)),
6392
6364
  props.showDeleteButton && (React__default.createElement(React__default.Fragment, null,
6393
6365
  React__default.createElement(IconButton$1, { "aria-label": "delete", edge: "end", onClick: function () {
6394
6366
  if (typeof props.onConfigChange === 'function') {
@@ -6752,9 +6724,8 @@ function TemporalControllerPlayer(props) {
6752
6724
  flexShrink: 0,
6753
6725
  '& .MuiDrawer-paper': mediaIsMobile ? mobileScreenBoxStyle : bigScreenBoxStyle,
6754
6726
  } },
6755
- React__default.createElement(Grid, { container: true },
6756
- mediaIsMobile ? React__default.createElement(React__default.Fragment, null) : React__default.createElement(Grid, { item: true, xs: 3 }),
6757
- React__default.createElement(Grid, { item: true, xs: mediaIsMobile ? 12 : 6, textAlign: "center" },
6727
+ React__default.createElement(Grid, { container: true, alignItems: "center", justifyContent: "space-between" },
6728
+ React__default.createElement(Grid, { item: true, xs: 12, sm: 10, textAlign: "center" },
6758
6729
  React__default.createElement(Button, { onClick: handleFastRewind },
6759
6730
  React__default.createElement(FastRewindIcon, null)),
6760
6731
  React__default.createElement(Button, { onClick: handleStop },
@@ -6762,8 +6733,11 @@ function TemporalControllerPlayer(props) {
6762
6733
  React__default.createElement(Button, { onClick: handlePlayPause }, isPlaying ? React__default.createElement(PauseIcon, null) : React__default.createElement(PlayArrowIcon, null)),
6763
6734
  React__default.createElement(Button, { onClick: handleFastForward },
6764
6735
  React__default.createElement(FastForwardIcon, null))),
6765
- props.display && !mediaIsMobile && (React__default.createElement(Grid, { item: true, xs: 3 },
6766
- React__default.createElement(Typography, { variant: 'h5', textAlign: 'right', sx: { paddingRight: '25px' } }, Math.floor(currentVal))))),
6736
+ props.display && !mediaIsMobile && (
6737
+ // eslint-disable-next-line @typescript-eslint/ban-ts-comment
6738
+ // @ts-expect-error
6739
+ React__default.createElement(Grid, { item: true, xs: 12, sm: 5, textAlign: "right" },
6740
+ React__default.createElement(Typography, { variant: 'h5', sx: { paddingRight: '25px' } }, Math.floor(currentVal))))),
6767
6741
  React__default.createElement(Slider, { sx: {
6768
6742
  position: 'flex',
6769
6743
  width: '95%',
@@ -7018,37 +6992,53 @@ var sketchTools = [
7018
6992
  *
7019
6993
  */
7020
6994
  var MlSketchTool = function (props) {
7021
- var _a, _b;
7022
6995
  var mapHook = useMap({
7023
6996
  mapId: props.mapId,
7024
6997
  waitForLayer: props.insertBeforeLayer,
7025
6998
  });
7026
- var _c = useState(), hoveredGeometry = _c[0], setHoveredGeometry = _c[1];
7027
- var _d = useState({
6999
+ var _a = useState(), hoveredGeometry = _a[0], setHoveredGeometry = _a[1];
7000
+ var _b = useState({
7028
7001
  activeGeometryIndex: undefined,
7029
7002
  selectedGeoJson: undefined,
7030
7003
  geometries: [],
7031
7004
  drawMode: undefined,
7032
- }), sketchState = _d[0], setSketchState = _d[1];
7005
+ }), sketchState = _b[0], setSketchState = _b[1];
7006
+ console.log(sketchState);
7033
7007
  useEffect(function () {
7034
7008
  if (!(typeof props.onChange === 'function'))
7035
7009
  return;
7036
7010
  props.onChange(sketchState);
7037
7011
  }, [sketchState, props.onChange]);
7038
7012
  var buttonStyle = __assign({}, props.buttonStyleOverride);
7013
+ // const buttonClickHandler = (buttonDrawMode: keyof MapboxDraw.Modes) => {
7014
+ // setSketchState((_state) => ({
7015
+ // drawMode: _state.drawMode !== buttonDrawMode ? buttonDrawMode : undefined,
7016
+ // geometries: _state.geometries,
7017
+ // activeGeometryIndex: undefined,
7018
+ // selectedGeoJson: undefined,
7019
+ // }));
7020
+ // };
7039
7021
  var buttonClickHandler = function (buttonDrawMode) {
7040
- setSketchState(function (_state) { return ({
7041
- drawMode: _state.drawMode !== buttonDrawMode ? buttonDrawMode : undefined,
7042
- geometries: _state.geometries,
7043
- activeGeometryIndex: undefined,
7044
- selectedGeoJson: undefined,
7045
- }); });
7022
+ var modeRef = undefined;
7023
+ setSketchState(function (prevState) {
7024
+ modeRef = prevState.drawMode;
7025
+ return __assign(__assign({}, prevState), { drawMode: undefined, activeGeometryIndex: undefined, selectedGeoJson: undefined });
7026
+ });
7027
+ requestAnimationFrame(function () {
7028
+ setSketchState(function (prevState) {
7029
+ if ((modeRef === 'draw_polygon' || modeRef === 'draw_line_string') &&
7030
+ buttonDrawMode === 'draw_point') {
7031
+ return __assign(__assign({}, prevState), { drawMode: undefined });
7032
+ }
7033
+ return __assign(__assign({}, prevState), { drawMode: buttonDrawMode });
7034
+ });
7035
+ });
7046
7036
  };
7047
7037
  var removeGeoJson = function (geoJson) {
7048
7038
  setSketchState(function (_sketchState) {
7049
7039
  var _geometries = __spreadArray([], _sketchState.geometries, true);
7050
7040
  _geometries.splice(_geometries.indexOf(geoJson), 1);
7051
- return __assign(__assign({}, _sketchState), { geometries: _geometries, activeGeometryIndex: _sketchState.activeGeometryIndex
7041
+ return __assign(__assign({}, _sketchState), { drawMode: undefined, geometries: _geometries, activeGeometryIndex: _sketchState.activeGeometryIndex
7052
7042
  ? _sketchState.activeGeometryIndex - 1
7053
7043
  : undefined });
7054
7044
  });
@@ -7085,6 +7075,7 @@ var MlSketchTool = function (props) {
7085
7075
  React__default.createElement(ButtonGroup, null,
7086
7076
  React__default.createElement(SketchToolButtons, null))),
7087
7077
  sketchState.drawMode && (React__default.createElement(MlFeatureEditor, { mode: sketchState.drawMode, geojson: sketchState.selectedGeoJson, onChange: function (feature) {
7078
+ console.log(feature);
7088
7079
  if (!(feature === null || feature === void 0 ? void 0 : feature[0]))
7089
7080
  return;
7090
7081
  setSketchState(function (_sketchState) {
@@ -7103,6 +7094,24 @@ var MlSketchTool = function (props) {
7103
7094
  else {
7104
7095
  _geometries[_sketchState.activeGeometryIndex] = feature[0];
7105
7096
  }
7097
+ // Check if the geometry type is point and if the coordinates have changed to exit draw mode after editing
7098
+ var changedPoint = function () {
7099
+ var _a, _b, _c, _d;
7100
+ if (_sketchState.selectedGeoJson &&
7101
+ typeof _sketchState.activeGeometryIndex !== 'undefined' &&
7102
+ _sketchState.geometries[_sketchState.activeGeometryIndex] &&
7103
+ _sketchState.geometries[_sketchState.activeGeometryIndex].geometry.type ===
7104
+ 'Point') {
7105
+ var selectedCoords = (_b = (_a = _sketchState.selectedGeoJson) === null || _a === void 0 ? void 0 : _a.geometry) === null || _b === void 0 ? void 0 : _b.coordinates;
7106
+ var activeCoords = (_d = (_c = _sketchState.geometries[_sketchState.activeGeometryIndex]) === null || _c === void 0 ? void 0 : _c.geometry) === null || _d === void 0 ? void 0 : _d.coordinates;
7107
+ // Compare coordinates
7108
+ return JSON.stringify(selectedCoords) !== JSON.stringify(activeCoords);
7109
+ }
7110
+ return false;
7111
+ };
7112
+ if (changedPoint()) {
7113
+ _sketchState.drawMode = undefined;
7114
+ }
7106
7115
  return __assign(__assign({}, _sketchState), { geometries: _geometries });
7107
7116
  });
7108
7117
  }, onFinish: function () {
@@ -7122,46 +7131,73 @@ var MlSketchTool = function (props) {
7122
7131
  }, onMouseLeave: function () {
7123
7132
  setHoveredGeometry(undefined);
7124
7133
  } },
7125
- React__default.createElement(LayerListItem, { listItemSx: buttonStyle, configurable: true, layerComponent: React__default.createElement(MlGeoJsonLayer, { mapId: props.mapId, geojson: el, layerId: String(el.id) }), type: 'layer', name: String(el.id), description: el.geometry.type }),
7134
+ React__default.createElement(LayerListItem, { listItemSx: buttonStyle, configurable: true, layerComponent: React__default.createElement(MlGeoJsonLayer, { mapId: props.mapId, geojson: el, layerId: String(el.id), defaultPaintOverrides: {
7135
+ fill: { 'fill-opacity': 0.5 },
7136
+ } }), type: 'layer', name: String(el.id), description: el.geometry.type }),
7126
7137
  React__default.createElement(Box, { sx: {
7127
7138
  padding: '3px 30px',
7128
7139
  } },
7129
7140
  React__default.createElement(ButtonGroup, { size: "small" },
7130
- React__default.createElement(Button, { onClick: function () {
7131
- var _a;
7132
- (_a = mapHook === null || mapHook === void 0 ? void 0 : mapHook.map) === null || _a === void 0 ? void 0 : _a.map.setCenter(el.geometry.type === 'Point'
7133
- ? el.geometry.coordinates
7134
- : turf.centerOfMass(el).geometry.coordinates);
7135
- } },
7136
- React__default.createElement(GpsFixedIcon, null)),
7137
- React__default.createElement(Button, { sx: buttonStyle, onClick: function () {
7138
- setSketchState(function (_sketchState) { return (__assign(__assign({}, _sketchState), { selectedGeoJson: el, activeGeometryIndex: _sketchState.geometries.indexOf(el), drawMode: 'simple_select' })); });
7139
- } },
7140
- React__default.createElement(EditIcon, null)),
7141
- React__default.createElement(Button, { sx: buttonStyle, onClick: function () {
7142
- removeGeoJson(el);
7143
- setHoveredGeometry(undefined);
7144
- } },
7145
- React__default.createElement(DeleteIcon, null)))))))); }),
7141
+ React__default.createElement(Tooltip$1, { title: "Center" },
7142
+ React__default.createElement(Button, { sx: __assign({ color: function (theme) { return theme.palette.primary.main; }, backgroundColor: function (theme) { return theme.palette.navigation.navColor; } }, buttonStyle), onClick: function () {
7143
+ var _a;
7144
+ (_a = mapHook === null || mapHook === void 0 ? void 0 : mapHook.map) === null || _a === void 0 ? void 0 : _a.map.setCenter(el.geometry.type === 'Point'
7145
+ ? el.geometry.coordinates
7146
+ : turf.centerOfMass(el).geometry.coordinates);
7147
+ } },
7148
+ React__default.createElement(GpsFixedIcon, null))),
7149
+ React__default.createElement(Tooltip$1, { title: "Edit" },
7150
+ React__default.createElement(Button, { sx: __assign({ color: function (theme) {
7151
+ var _a;
7152
+ if (sketchState.drawMode === 'simple_select' &&
7153
+ ((_a = sketchState.selectedGeoJson) === null || _a === void 0 ? void 0 : _a.id) === el.id) {
7154
+ return theme.palette.navigation.navColor;
7155
+ }
7156
+ else {
7157
+ return theme.palette.primary.main;
7158
+ }
7159
+ }, backgroundColor: function (theme) {
7160
+ var _a;
7161
+ if (sketchState.drawMode === 'simple_select' &&
7162
+ ((_a = sketchState.selectedGeoJson) === null || _a === void 0 ? void 0 : _a.id) === el.id) {
7163
+ return theme.palette.primary.main;
7164
+ }
7165
+ else {
7166
+ return theme.palette.navigation.navColor;
7167
+ }
7168
+ } }, buttonStyle), onClick: function () {
7169
+ setSketchState(function (_sketchState) {
7170
+ var _a;
7171
+ var newDrawMode = _sketchState.drawMode === 'simple_select' &&
7172
+ ((_a = _sketchState.selectedGeoJson) === null || _a === void 0 ? void 0 : _a.id) === el.id
7173
+ ? undefined
7174
+ : 'simple_select';
7175
+ return __assign(__assign({}, _sketchState), { selectedGeoJson: el, activeGeometryIndex: _sketchState.geometries.indexOf(el), drawMode: newDrawMode });
7176
+ });
7177
+ } },
7178
+ React__default.createElement(EditIcon, null))),
7179
+ React__default.createElement(Tooltip$1, { title: "Delete" },
7180
+ React__default.createElement(Button, { sx: __assign({ color: function (theme) { return theme.palette.primary.main; }, backgroundColor: function (theme) { return theme.palette.navigation.navColor; } }, buttonStyle), onClick: function () {
7181
+ removeGeoJson(el);
7182
+ setHoveredGeometry(undefined);
7183
+ } },
7184
+ React__default.createElement(DeleteIcon, null))))))))); }),
7146
7185
  hoveredGeometry && (React__default.createElement(MlGeoJsonLayer, { mapId: props.mapId, geojson: { type: 'FeatureCollection', features: [hoveredGeometry] }, layerId: 'highlightBorder', defaultPaintOverrides: {
7147
7186
  circle: {
7148
- 'circle-color': '#dd9900',
7149
- 'circle-opacity': 0.4,
7187
+ 'circle-color': '#000000',
7188
+ 'circle-opacity': 0.2,
7150
7189
  'circle-radius': 10,
7151
7190
  },
7152
7191
  line: {
7153
- 'line-color': '#dd9900',
7154
- 'line-opacity': 0.4,
7192
+ 'line-color': '#000000',
7193
+ 'line-opacity': 0.2,
7155
7194
  'line-width': 10,
7156
7195
  },
7157
7196
  fill: {
7158
- 'fill-color': '#dd9900',
7159
- 'fill-opacity': 0.4,
7197
+ 'fill-color': '#000000',
7198
+ 'fill-opacity': 0.2,
7160
7199
  },
7161
- } }))),
7162
- sketchState.drawMode === 'simple_select' && (React__default.createElement(Typography, { sx: { fontSize: '0.6em' } },
7163
- "Edit ", (_b = (_a = sketchState.selectedGeoJson) === null || _a === void 0 ? void 0 : _a.geometry) === null || _b === void 0 ? void 0 :
7164
- _b.type))));
7200
+ } })))));
7165
7201
  };
7166
7202
  MlSketchTool.defaultProps = {
7167
7203
  mapId: undefined,
@@ -7767,9 +7803,6 @@ var SimpleDataProvider = function (props) {
7767
7803
  };
7768
7804
  return (React__default.createElement(SimpleDataContextProvider, { value: value }, props.children));
7769
7805
  };
7770
- SimpleDataProvider.propTypes = {
7771
- children: PropTypes.node.isRequired,
7772
- };
7773
7806
 
7774
7807
  var IconButtonStyled$1 = styled(IconButton)({
7775
7808
  padding: '4px',
@@ -7877,13 +7910,13 @@ function LayerListItemFactory(props) {
7877
7910
  React__default.createElement(IconButtonStyled$1, { disabled: idx === layers.length - 1, onClick: function () {
7878
7911
  layerContext.moveDown(layer.id || '');
7879
7912
  } },
7880
- React__default.createElement(ArrowCircleDown, null)),
7913
+ React__default.createElement(ArrowCircleDownIcon, null)),
7881
7914
  React__default.createElement(IconButtonStyled$1, { disabled: idx === 0, onClick: function () {
7882
7915
  layerContext.moveUp(layer.id || '');
7883
7916
  } },
7884
- React__default.createElement(ArrowCircleUp, null)),
7917
+ React__default.createElement(ArrowCircleUpIcon, null)),
7885
7918
  React__default.createElement(IconButtonStyled$1, { onClick: function () { return fitLayer(layer); } },
7886
- React__default.createElement(CenterFocusWeak, null))), setLayerState: function (layerConfig) {
7919
+ React__default.createElement(CenterFocusWeakIcon, null))), setLayerState: function (layerConfig) {
7887
7920
  return setLayers === null || setLayers === void 0 ? void 0 : setLayers(function (current) {
7888
7921
  var _layers = __spreadArray([], current, true);
7889
7922
  if (layerConfig === false) {
@@ -7923,26 +7956,26 @@ function LayerListItemFactory(props) {
7923
7956
  React__default.createElement(IconButtonStyled$1, { disabled: idx === layers.length - 1, onClick: function () {
7924
7957
  layerContext.moveDown(layer.id || '');
7925
7958
  } },
7926
- React__default.createElement(ArrowCircleDown, null)),
7959
+ React__default.createElement(ArrowCircleDownIcon, null)),
7927
7960
  React__default.createElement(IconButtonStyled$1, { disabled: idx === 0, onClick: function () {
7928
7961
  layerContext.moveUp(layer.id || '');
7929
7962
  } },
7930
- React__default.createElement(ArrowCircleUp, null)),
7963
+ React__default.createElement(ArrowCircleUpIcon, null)),
7931
7964
  React__default.createElement(IconButtonStyled$1, { onClick: function () { return fitLayer(layer); } },
7932
- React__default.createElement(CenterFocusWeak, null))) }))));
7965
+ React__default.createElement(CenterFocusWeakIcon, null))) }))));
7933
7966
  case 'vt':
7934
7967
  return (React__default.createElement(React__default.Fragment, { key: (layer === null || layer === void 0 ? void 0 : layer.id) + '_listItem' },
7935
7968
  React__default.createElement(LayerListItem, { key: layer.id, name: (layer === null || layer === void 0 ? void 0 : layer.name) || (layer === null || layer === void 0 ? void 0 : layer.type) + ' layer' || 'unnamed layer', layerComponent: React__default.createElement(MlVectorTileLayer, { layers: ((_c = layer === null || layer === void 0 ? void 0 : layer.config) === null || _c === void 0 ? void 0 : _c.layers) || [], key: layer.id, mapId: layer === null || layer === void 0 ? void 0 : layer.config.mapId, sourceOptions: (_d = layer === null || layer === void 0 ? void 0 : layer.config) === null || _d === void 0 ? void 0 : _d.sourceOptions, layerId: layer.id, url: (_e = layer === null || layer === void 0 ? void 0 : layer.config) === null || _e === void 0 ? void 0 : _e.url }), buttons: React__default.createElement(React__default.Fragment, null,
7936
7969
  React__default.createElement(IconButtonStyled$1, { key: layer.id + '_button1', disabled: idx === layers.length - 1, onClick: function () {
7937
7970
  layerContext.moveDown(layer.id || '');
7938
7971
  } },
7939
- React__default.createElement(ArrowCircleDown, null)),
7972
+ React__default.createElement(ArrowCircleDownIcon, null)),
7940
7973
  React__default.createElement(IconButtonStyled$1, { key: layer.id + '_button2', disabled: idx === 0, onClick: function () {
7941
7974
  layerContext.moveUp(layer.id || '');
7942
7975
  } },
7943
- React__default.createElement(ArrowCircleUp, null)),
7976
+ React__default.createElement(ArrowCircleUpIcon, null)),
7944
7977
  React__default.createElement(IconButtonStyled$1, { onClick: function () { return fitLayer(layer); } },
7945
- React__default.createElement(CenterFocusWeak, null))), setLayerState: function (layerConfig) {
7978
+ React__default.createElement(CenterFocusWeakIcon, null))), setLayerState: function (layerConfig) {
7946
7979
  return setLayers === null || setLayers === void 0 ? void 0 : setLayers(function (current) {
7947
7980
  var _layers = __spreadArray([], current, true);
7948
7981
  if (layerConfig === false) {
@@ -21682,18 +21715,18 @@ function LayerTreeListItem(props) {
21682
21715
  React__default.createElement(IconButtonStyled, { disabled: false, onClick: function () {
21683
21716
  moveDown(layer.uuid);
21684
21717
  } },
21685
- React__default.createElement(ArrowCircleDown, null)),
21718
+ React__default.createElement(ArrowCircleDownIcon, null)),
21686
21719
  React__default.createElement(IconButtonStyled, { disabled: false, onClick: function () {
21687
21720
  moveUp(layer.uuid);
21688
21721
  } },
21689
- React__default.createElement(ArrowCircleUp, null)),
21722
+ React__default.createElement(ArrowCircleUpIcon, null)),
21690
21723
  layer.configurable && (React__default.createElement(React__default.Fragment, null,
21691
21724
  React__default.createElement(TuneIconButton, { edge: 'end', "aria-label": "settings", onClick: function () {
21692
21725
  setPaintPropsFormVisible(function (current) {
21693
21726
  return !current;
21694
21727
  });
21695
21728
  } },
21696
- React__default.createElement(Tune, null))))) },
21729
+ React__default.createElement(TuneIcon, null))))) },
21697
21730
  React__default.createElement(CheckboxListItemIcon, null,
21698
21731
  React__default.createElement(CheckboxStyled, { checked: visible, disabled: layer.masterVisible === false, onClick: function () { return handleToggleVisibility(visible); } })),
21699
21732
  React__default.createElement(ListItemText, { variant: "layerlist", primary: layer.name || '', secondary: props.description, primaryTypographyProps: { overflow: 'hidden' } }),
@@ -21701,7 +21734,7 @@ function LayerTreeListItem(props) {
21701
21734
  layer.configurable && paintPropsFormVisible && (React__default.createElement(React__default.Fragment, null,
21702
21735
  props.showDeleteButton && (React__default.createElement(React__default.Fragment, null,
21703
21736
  React__default.createElement(DeleteIconButton, { edge: "end", "aria-label": "delete", onClick: function () { } },
21704
- React__default.createElement(Delete, null)),
21737
+ React__default.createElement(DeleteIcon, null)),
21705
21738
  showDeletionConfirmationDialog && (React__default.createElement(ConfirmDialog, { open: showDeletionConfirmationDialog, onConfirm: function () {
21706
21739
  setShowDeletionConfirmationDialog(false);
21707
21740
  }, onCancel: function () {
@@ -21713,7 +21746,7 @@ function LayerTreeListItem(props) {
21713
21746
  return (React__default.createElement(React__default.Fragment, null,
21714
21747
  React__default.createElement(ListItemStyled, { key: layer.uuid, sx: __assign({}, props.listItemSx), secondaryAction: undefined },
21715
21748
  React__default.createElement(ListItemIconStyled, null,
21716
- React__default.createElement(IconButtonStyled, { edge: "end", "aria-label": "open", onClick: function () { return setOpen(!open); } }, open ? React__default.createElement(ExpandMore, null) : React__default.createElement(KeyboardArrowRight, null)),
21749
+ React__default.createElement(IconButtonStyled, { edge: "end", "aria-label": "open", onClick: function () { return setOpen(!open); } }, open ? React__default.createElement(ExpandMoreIcon, null) : React__default.createElement(KeyboardArrowRightIcon, null)),
21717
21750
  React__default.createElement(CheckboxListItemIcon, null,
21718
21751
  React__default.createElement(CheckboxStyled, { checked: layer.visible, disabled: layer.masterVisible === false, onClick: function () { var _a; return handleToggleVisibility((_a = layer.visible) !== null && _a !== void 0 ? _a : false); } }))),
21719
21752
  React__default.createElement(ListItemText, { primary: layer.name, secondary: props.description, primaryTypographyProps: { overflow: 'hidden' } })),
@@ -21743,7 +21776,7 @@ function LayerTreeListItem(props) {
21743
21776
  return (React__default.createElement(React__default.Fragment, null,
21744
21777
  React__default.createElement(ListItemStyled, { key: layer.uuid, sx: __assign({}, props.listItemSx) },
21745
21778
  React__default.createElement(ListItemIconStyled, null,
21746
- React__default.createElement(IconButtonStyled, { edge: "end", "aria-label": "open", onClick: function () { return setOpen(!open); } }, open ? React__default.createElement(ExpandMore, null) : React__default.createElement(KeyboardArrowRight, null)),
21779
+ React__default.createElement(IconButtonStyled, { edge: "end", "aria-label": "open", onClick: function () { return setOpen(!open); } }, open ? React__default.createElement(ExpandMoreIcon, null) : React__default.createElement(KeyboardArrowRightIcon, null)),
21747
21780
  React__default.createElement(CheckboxListItemIcon, null,
21748
21781
  React__default.createElement(CheckboxStyled, { checked: layer.visible, disabled: layer.masterVisible, onClick: function () { return handleToggleVisibility(layer.visible ? layer.visible : false); } }))),
21749
21782
  React__default.createElement(ListItemText, { primary: layer.name, secondary: props.description, primaryTypographyProps: { overflow: 'hidden' } })),