@mapcomponents/react-maplibre 0.1.81 → 0.1.83
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/CHANGELOG.md +6 -0
- package/dist/components/MlNavigationCompass/MlNavigationCompass.d.ts +22 -37
- package/dist/components/MlNavigationTools/MlNavigationTools.cy.d.ts +1 -0
- package/dist/components/MlNavigationTools/MlNavigationTools.d.ts +1 -5
- package/dist/components/MlNavigationTools/MlNavigationTools.stories.d.ts +1 -0
- package/dist/index.d.ts +0 -1
- package/dist/index.esm.js +169 -325
- package/dist/index.esm.js.map +1 -1
- package/dist/ui_components/MapcomponentsTheme.d.ts +16 -1
- package/package.json +2 -2
package/dist/index.esm.js
CHANGED
|
@@ -22,8 +22,7 @@ var ButtonGroup = require('@mui/material/ButtonGroup');
|
|
|
22
22
|
var ControlPointIcon = require('@mui/icons-material/ControlPoint');
|
|
23
23
|
var RemoveCircleOutlineIcon = require('@mui/icons-material/RemoveCircleOutline');
|
|
24
24
|
var Box = require('@mui/material/Box');
|
|
25
|
-
var
|
|
26
|
-
var css = require('@emotion/css');
|
|
25
|
+
var Divider = require('@mui/material/Divider');
|
|
27
26
|
var useMediaQuery = require('@mui/material/useMediaQuery');
|
|
28
27
|
var syncMove = require('@mapbox/mapbox-gl-sync-move');
|
|
29
28
|
var Paper = require('@mui/material/Paper');
|
|
@@ -46,8 +45,6 @@ var PauseIcon = require('@mui/icons-material/Pause');
|
|
|
46
45
|
var StopIcon = require('@mui/icons-material/Stop');
|
|
47
46
|
var FastForwardIcon = require('@mui/icons-material/FastForward');
|
|
48
47
|
var FastRewindIcon = require('@mui/icons-material/FastRewind');
|
|
49
|
-
var initSqlJs = require('sql.js');
|
|
50
|
-
var pako = require('pako');
|
|
51
48
|
var d3 = require('d3');
|
|
52
49
|
var TuneIcon = require('@mui/icons-material/Tune');
|
|
53
50
|
var reactColor = require('react-color');
|
|
@@ -108,7 +105,7 @@ var ButtonGroup__default = /*#__PURE__*/_interopDefaultLegacy(ButtonGroup);
|
|
|
108
105
|
var ControlPointIcon__default = /*#__PURE__*/_interopDefaultLegacy(ControlPointIcon);
|
|
109
106
|
var RemoveCircleOutlineIcon__default = /*#__PURE__*/_interopDefaultLegacy(RemoveCircleOutlineIcon);
|
|
110
107
|
var Box__default = /*#__PURE__*/_interopDefaultLegacy(Box);
|
|
111
|
-
var
|
|
108
|
+
var Divider__default = /*#__PURE__*/_interopDefaultLegacy(Divider);
|
|
112
109
|
var useMediaQuery__default = /*#__PURE__*/_interopDefaultLegacy(useMediaQuery);
|
|
113
110
|
var syncMove__default = /*#__PURE__*/_interopDefaultLegacy(syncMove);
|
|
114
111
|
var Paper__default = /*#__PURE__*/_interopDefaultLegacy(Paper);
|
|
@@ -129,8 +126,6 @@ var PauseIcon__default = /*#__PURE__*/_interopDefaultLegacy(PauseIcon);
|
|
|
129
126
|
var StopIcon__default = /*#__PURE__*/_interopDefaultLegacy(StopIcon);
|
|
130
127
|
var FastForwardIcon__default = /*#__PURE__*/_interopDefaultLegacy(FastForwardIcon);
|
|
131
128
|
var FastRewindIcon__default = /*#__PURE__*/_interopDefaultLegacy(FastRewindIcon);
|
|
132
|
-
var initSqlJs__default = /*#__PURE__*/_interopDefaultLegacy(initSqlJs);
|
|
133
|
-
var pako__namespace = /*#__PURE__*/_interopNamespace(pako);
|
|
134
129
|
var d3__namespace = /*#__PURE__*/_interopNamespace(d3);
|
|
135
130
|
var TuneIcon__default = /*#__PURE__*/_interopDefaultLegacy(TuneIcon);
|
|
136
131
|
var ArrowCircleDownIcon__default = /*#__PURE__*/_interopDefaultLegacy(ArrowCircleDownIcon);
|
|
@@ -235,11 +230,6 @@ function __spreadArray(to, from, pack) {
|
|
|
235
230
|
}
|
|
236
231
|
}
|
|
237
232
|
return to.concat(ar || Array.prototype.slice.call(from));
|
|
238
|
-
}
|
|
239
|
-
|
|
240
|
-
function __makeTemplateObject(cooked, raw) {
|
|
241
|
-
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
|
|
242
|
-
return cooked;
|
|
243
233
|
}
|
|
244
234
|
|
|
245
235
|
var MapLibreGlWrapper = /** @class */ (function () {
|
|
@@ -785,34 +775,30 @@ var darkDefault = styles.createTheme({
|
|
|
785
775
|
var getDesignTokens = function (mode) { return (__assign(__assign({}, (mode === 'light' ? lightDefault : darkDefault)), { palette: __assign({ mode: mode }, (mode === 'dark'
|
|
786
776
|
? {
|
|
787
777
|
primary: {
|
|
788
|
-
main: '#
|
|
778
|
+
main: '#FFF',
|
|
789
779
|
},
|
|
790
780
|
secondary: { main: '#747577' },
|
|
791
|
-
background: {
|
|
792
|
-
default: '#222222',
|
|
793
|
-
paper: '#414141',
|
|
794
|
-
icon: '#525252',
|
|
795
|
-
},
|
|
781
|
+
background: { paper: '#414244', test: '#272727' },
|
|
796
782
|
text: {
|
|
797
|
-
|
|
798
|
-
contrast: '#
|
|
783
|
+
primary: '#BCBDBF',
|
|
784
|
+
contrast: '#000',
|
|
799
785
|
},
|
|
786
|
+
topToolbar: { barColor: '#000' },
|
|
787
|
+
navigation: { navColor: '#525252', navHover: '#626262' },
|
|
788
|
+
compass: { compColor: '#414244', compHover: '#626262' },
|
|
800
789
|
}
|
|
801
790
|
: {
|
|
802
791
|
primary: {
|
|
803
792
|
main: '#009EE0',
|
|
804
793
|
},
|
|
805
794
|
secondary: { main: '#747577' },
|
|
806
|
-
background: {
|
|
807
|
-
default: '#fff',
|
|
808
|
-
paper: '#fdfdfd',
|
|
809
|
-
icon: '#bdbdbd',
|
|
810
|
-
},
|
|
811
795
|
text: {
|
|
812
|
-
primary: '#
|
|
813
|
-
secondary: '#121212',
|
|
796
|
+
primary: '#000',
|
|
814
797
|
contrast: '#fff',
|
|
815
798
|
},
|
|
799
|
+
topToolbar: { barColor: '#fff' },
|
|
800
|
+
navigation: { navColor: '#fff', navHover: '#f5f5f5' },
|
|
801
|
+
compass: { compColor: '#fff', compHover: '#f5f5f5' },
|
|
816
802
|
})) })); };
|
|
817
803
|
var getTheme = function (mode) {
|
|
818
804
|
var _a;
|
|
@@ -829,19 +815,7 @@ var getTheme = function (mode) {
|
|
|
829
815
|
MuiAppBar: {
|
|
830
816
|
styleOverrides: {
|
|
831
817
|
root: {
|
|
832
|
-
backgroundColor: theme.palette.
|
|
833
|
-
},
|
|
834
|
-
},
|
|
835
|
-
},
|
|
836
|
-
MuiIconButton: {
|
|
837
|
-
styleOverrides: {
|
|
838
|
-
root: {
|
|
839
|
-
color: theme.palette.text.primary,
|
|
840
|
-
backgroundColor: theme.palette.background.icon,
|
|
841
|
-
':hover': {
|
|
842
|
-
backgroundColor: theme.palette.background.icon,
|
|
843
|
-
color: theme.palette.primary.main,
|
|
844
|
-
},
|
|
818
|
+
backgroundColor: theme.palette.topToolbar.barColor,
|
|
845
819
|
},
|
|
846
820
|
},
|
|
847
821
|
},
|
|
@@ -869,17 +843,15 @@ var getTheme = function (mode) {
|
|
|
869
843
|
height: '30px',
|
|
870
844
|
fontSize: '1.2em',
|
|
871
845
|
},
|
|
872
|
-
_a.
|
|
846
|
+
_a.color = theme.palette.text.primary,
|
|
847
|
+
_a.backgroundColor = theme.palette.navigation.navColor,
|
|
873
848
|
_a.borderRadius = '23%',
|
|
874
|
-
//border: "1px solid #bbb",
|
|
875
|
-
//boxShadow: "0px 0px 4px rgba(0,0,0,.5)",
|
|
876
849
|
_a.margin = '0.15px',
|
|
877
850
|
_a.marginTop = '4px',
|
|
878
851
|
_a[':hover'] = {
|
|
879
852
|
color: theme.palette.primary.main,
|
|
880
|
-
backgroundColor: theme.palette.
|
|
853
|
+
backgroundColor: theme.palette.navigation.navHover,
|
|
881
854
|
},
|
|
882
|
-
_a.color = theme.palette.text.secondary,
|
|
883
855
|
_a),
|
|
884
856
|
},
|
|
885
857
|
],
|
|
@@ -1566,7 +1538,7 @@ var MlCreatePdfButton = function (props) {
|
|
|
1566
1538
|
});
|
|
1567
1539
|
}
|
|
1568
1540
|
} }, loading ? (React__default["default"].createElement(material.CircularProgress, { size: 24, sx: {
|
|
1569
|
-
color: '
|
|
1541
|
+
color: '#fff',
|
|
1570
1542
|
} })) : (React__default["default"].createElement(PrinterIcon__default["default"], null)))));
|
|
1571
1543
|
};
|
|
1572
1544
|
MlCreatePdfButton.defaultProps = {
|
|
@@ -2645,60 +2617,97 @@ MlMeasureTool.defaultProps = {
|
|
|
2645
2617
|
unit: "kilometers",
|
|
2646
2618
|
};
|
|
2647
2619
|
|
|
2648
|
-
|
|
2649
|
-
var SvgRotateRight = function SvgRotateRight(props) {
|
|
2650
|
-
return /*#__PURE__*/React__namespace.createElement("svg", _extends$2({
|
|
2651
|
-
width: "39.675098mm",
|
|
2652
|
-
height: "104.27064mm",
|
|
2653
|
-
viewBox: "0 0 39.675098 104.27064"
|
|
2654
|
-
}, props), /*#__PURE__*/React__namespace.createElement("g", {
|
|
2655
|
-
transform: "translate(-86.019554,-58.032633)"
|
|
2656
|
-
}, /*#__PURE__*/React__namespace.createElement("path", {
|
|
2657
|
-
style: {
|
|
2658
|
-
strokeWidth: 0.744756
|
|
2659
|
-
},
|
|
2660
|
-
d: "m 442.74023,219.33594 -117.62695,32.32422 54.71094,31.12304 c -21.99397,41.5931 -32.8507,84.88283 -38.33008,127.89649 -6.86182,50.94051 -5.95715,103.99765 20.23828,155.46484 5.97246,11.72776 13.65817,23.59773 24.38867,35.06641 2.6597,2.84073 5.65602,5.75455 9.12891,8.68164 0.87557,0.7378 1.85363,1.52609 2.95117,2.35547 0.29669,0.22563 0.63616,0.47742 1.02149,0.75586 l 0.58203,0.42578 34.57812,-15.12305 -0.33789,-0.2207 c -0.0265,-0.0151 -0.0842,-0.0587 -0.18359,-0.13086 -0.46723,-0.34885 -0.9819,-0.76796 -1.56055,-1.25 -2.29757,-1.91343 -4.46539,-4.04643 -6.64062,-6.33985 -8.80052,-9.27114 -15.30333,-19.4993 -20.83985,-30.13867 -24.42289,-46.90715 -24.77465,-97.03535 -18.58008,-146.68164 4.94388,-37.37493 13.65299,-74.4847 30.20508,-109.92969 l 58.6211,33.34766 z",
|
|
2661
|
-
transform: "scale(0.26458333)"
|
|
2662
|
-
})));
|
|
2663
|
-
};
|
|
2664
|
-
|
|
2665
|
-
var _g$1;
|
|
2620
|
+
var _path$1, _path2$1;
|
|
2666
2621
|
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); }
|
|
2667
|
-
var
|
|
2622
|
+
var SvgCompassNeedle = function SvgCompassNeedle(props) {
|
|
2668
2623
|
return /*#__PURE__*/React__namespace.createElement("svg", _extends$1({
|
|
2669
|
-
width:
|
|
2670
|
-
height:
|
|
2671
|
-
viewBox: "0 0
|
|
2672
|
-
|
|
2673
|
-
|
|
2674
|
-
}, /*#__PURE__*/React__namespace.createElement("path", {
|
|
2675
|
-
d: "
|
|
2676
|
-
|
|
2624
|
+
width: 9,
|
|
2625
|
+
height: 40,
|
|
2626
|
+
viewBox: "0 0 9 40",
|
|
2627
|
+
fill: "none",
|
|
2628
|
+
xmlns: "http://www.w3.org/2000/svg"
|
|
2629
|
+
}, props), _path$1 || (_path$1 = /*#__PURE__*/React__namespace.createElement("path", {
|
|
2630
|
+
d: "M3.34715 4.52028C3.57452 3.46874 5.0746 3.46874 5.30197 4.52028L8.64912 20H0L3.34715 4.52028Z",
|
|
2631
|
+
fill: "#CF003D"
|
|
2632
|
+
})), _path2$1 || (_path2$1 = /*#__PURE__*/React__namespace.createElement("path", {
|
|
2633
|
+
d: "M3.34715 35.4797C3.57452 36.5313 5.0746 36.5313 5.30197 35.4797L8.64912 20H0L3.34715 35.4797Z",
|
|
2634
|
+
fill: "#D3DCE1"
|
|
2635
|
+
})));
|
|
2677
2636
|
};
|
|
2678
2637
|
|
|
2679
|
-
var
|
|
2638
|
+
var _circle, _path, _path2, _path3, _path4;
|
|
2680
2639
|
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); }
|
|
2681
|
-
var
|
|
2640
|
+
var SvgCompassBackground = function SvgCompassBackground(props) {
|
|
2682
2641
|
return /*#__PURE__*/React__namespace.createElement("svg", _extends({
|
|
2683
|
-
width:
|
|
2684
|
-
height:
|
|
2685
|
-
viewBox: "0 0
|
|
2686
|
-
|
|
2687
|
-
|
|
2688
|
-
}, /*#__PURE__*/React__namespace.createElement("
|
|
2689
|
-
|
|
2690
|
-
|
|
2691
|
-
|
|
2692
|
-
|
|
2642
|
+
width: 52,
|
|
2643
|
+
height: 53,
|
|
2644
|
+
viewBox: "0 0 52 53",
|
|
2645
|
+
fill: "none",
|
|
2646
|
+
xmlns: "http://www.w3.org/2000/svg"
|
|
2647
|
+
}, props), _circle || (_circle = /*#__PURE__*/React__namespace.createElement("circle", {
|
|
2648
|
+
cx: 26.0001,
|
|
2649
|
+
cy: 26.1843,
|
|
2650
|
+
r: 24,
|
|
2651
|
+
fill: "white",
|
|
2652
|
+
stroke: "#009EE0",
|
|
2653
|
+
strokeWidth: 2
|
|
2654
|
+
})), _path || (_path = /*#__PURE__*/React__namespace.createElement("path", {
|
|
2655
|
+
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",
|
|
2656
|
+
fill: "#009EE0"
|
|
2657
|
+
})), _path2 || (_path2 = /*#__PURE__*/React__namespace.createElement("path", {
|
|
2658
|
+
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",
|
|
2659
|
+
fill: "#009EE0"
|
|
2660
|
+
})), _path3 || (_path3 = /*#__PURE__*/React__namespace.createElement("path", {
|
|
2661
|
+
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",
|
|
2662
|
+
fill: "#009EE0"
|
|
2663
|
+
})), _path4 || (_path4 = /*#__PURE__*/React__namespace.createElement("path", {
|
|
2664
|
+
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",
|
|
2665
|
+
fill: "#009EE0"
|
|
2666
|
+
})));
|
|
2693
2667
|
};
|
|
2694
2668
|
|
|
2695
|
-
var
|
|
2696
|
-
var
|
|
2697
|
-
var
|
|
2669
|
+
var StyleBox = material.styled('div')(function (_a) {
|
|
2670
|
+
var _b;
|
|
2671
|
+
var theme = _a.theme;
|
|
2672
|
+
return (_b = {
|
|
2673
|
+
zIndex: 1000,
|
|
2674
|
+
cursor: 'pointer',
|
|
2675
|
+
transform: 'scale(1)'
|
|
2676
|
+
},
|
|
2677
|
+
_b[theme.breakpoints.down('md')] = {
|
|
2678
|
+
transform: 'scale(1.6)',
|
|
2679
|
+
},
|
|
2680
|
+
_b);
|
|
2681
|
+
});
|
|
2682
|
+
var CompassBox = material.styled('div')(function (_a) {
|
|
2683
|
+
var _b;
|
|
2684
|
+
var theme = _a.theme;
|
|
2685
|
+
return (_b = {
|
|
2686
|
+
position: 'absolute',
|
|
2687
|
+
right: '-10px',
|
|
2688
|
+
top: '-52px'
|
|
2689
|
+
},
|
|
2690
|
+
_b[theme.breakpoints.down('md')] = {
|
|
2691
|
+
right: '0px',
|
|
2692
|
+
top: '-52px',
|
|
2693
|
+
},
|
|
2694
|
+
_b.circle = {
|
|
2695
|
+
fill: theme.palette.compass.compColor,
|
|
2696
|
+
},
|
|
2697
|
+
_b['&:hover circle'] = {
|
|
2698
|
+
fill: theme.palette.compass.compHover,
|
|
2699
|
+
},
|
|
2700
|
+
_b);
|
|
2701
|
+
});
|
|
2702
|
+
var NeedleBox = material.styled('div')({
|
|
2703
|
+
position: 'absolute',
|
|
2704
|
+
right: '21.4px',
|
|
2705
|
+
top: '6px',
|
|
2706
|
+
});
|
|
2698
2707
|
/**
|
|
2699
2708
|
* Navigation component that displays a compass component which indicates the current oriantation of the map it is registered for and offers controls to turn the bearing 90° left/right or reset north to point up.
|
|
2700
2709
|
*
|
|
2701
|
-
* All style props are applied using @
|
|
2710
|
+
* All style props are applied using @mui/material/styled to allow more complex css selectors.
|
|
2702
2711
|
*
|
|
2703
2712
|
* @component
|
|
2704
2713
|
*/
|
|
@@ -2708,89 +2717,46 @@ var MlNavigationCompass = function (props) {
|
|
|
2708
2717
|
waitForLayer: props.insertBeforeLayer,
|
|
2709
2718
|
});
|
|
2710
2719
|
var _a = React.useState(0), bearing = _a[0], setBearing = _a[1];
|
|
2720
|
+
var _updateBearing = function () {
|
|
2721
|
+
var _a, _b;
|
|
2722
|
+
if (!((_b = (_a = mapHook.map) === null || _a === void 0 ? void 0 : _a.map) === null || _b === void 0 ? void 0 : _b.getBearing))
|
|
2723
|
+
return;
|
|
2724
|
+
setBearing(Math.round(mapHook.map.map.getBearing()));
|
|
2725
|
+
};
|
|
2711
2726
|
React.useEffect(function () {
|
|
2712
2727
|
if (!mapHook.map)
|
|
2713
2728
|
return;
|
|
2714
|
-
|
|
2715
|
-
var _a, _b;
|
|
2716
|
-
if (!((_b = (_a = mapHook.map) === null || _a === void 0 ? void 0 : _a.map) === null || _b === void 0 ? void 0 : _b.getBearing))
|
|
2717
|
-
return;
|
|
2718
|
-
setBearing(Math.round(mapHook.map.map.getBearing()));
|
|
2719
|
-
};
|
|
2720
|
-
mapHook.map.on("rotate", _updateBearing, mapHook.componentId);
|
|
2729
|
+
mapHook.map.on('rotate', _updateBearing, mapHook.componentId);
|
|
2721
2730
|
_updateBearing();
|
|
2722
2731
|
return function () {
|
|
2723
2732
|
var _a;
|
|
2724
|
-
(_a = mapHook.map) === null || _a === void 0 ? void 0 : _a.map.off(
|
|
2733
|
+
(_a = mapHook.map) === null || _a === void 0 ? void 0 : _a.map.off('rotate', _updateBearing);
|
|
2725
2734
|
};
|
|
2726
2735
|
}, [mapHook.map, props.mapId]);
|
|
2736
|
+
var rotate = function () {
|
|
2737
|
+
var _a, _b, _c, _d;
|
|
2738
|
+
if (bearing == 0) {
|
|
2739
|
+
(_a = mapHook.map) === null || _a === void 0 ? void 0 : _a.map.setBearing(-90);
|
|
2740
|
+
}
|
|
2741
|
+
else if (bearing == -90) {
|
|
2742
|
+
(_b = mapHook.map) === null || _b === void 0 ? void 0 : _b.map.setBearing(180);
|
|
2743
|
+
}
|
|
2744
|
+
else if (bearing == 180) {
|
|
2745
|
+
(_c = mapHook.map) === null || _c === void 0 ? void 0 : _c.map.setBearing(90);
|
|
2746
|
+
}
|
|
2747
|
+
else {
|
|
2748
|
+
(_d = mapHook.map) === null || _d === void 0 ? void 0 : _d.map.setBearing(0);
|
|
2749
|
+
}
|
|
2750
|
+
};
|
|
2727
2751
|
return (React__default["default"].createElement(React__default["default"].Fragment, null,
|
|
2728
|
-
React__default["default"].createElement(
|
|
2729
|
-
React__default["default"].createElement(
|
|
2730
|
-
React__default["default"].createElement(
|
|
2731
|
-
|
|
2732
|
-
|
|
2733
|
-
|
|
2734
|
-
var bearing = Math.round(mapHook.map.map.getBearing());
|
|
2735
|
-
var rest = Math.round(bearing % 90);
|
|
2736
|
-
if (bearing > 0) {
|
|
2737
|
-
rest = 90 - rest;
|
|
2738
|
-
}
|
|
2739
|
-
if (rest === 0) {
|
|
2740
|
-
rest = 90;
|
|
2741
|
-
}
|
|
2742
|
-
mapHook.map.map.setBearing(Math.round(bearing + Math.abs(rest)));
|
|
2743
|
-
} })),
|
|
2744
|
-
React__default["default"].createElement(NeedleButton, { className: css.css(__assign({}, props.needleStyle)), onClick: function () {
|
|
2745
|
-
var _a;
|
|
2746
|
-
(_a = mapHook.map) === null || _a === void 0 ? void 0 : _a.map.setBearing(0);
|
|
2747
|
-
} },
|
|
2748
|
-
React__default["default"].createElement(NeedleContainer, { style: {
|
|
2749
|
-
transform: "rotate(" + (bearing > 0 ? "-" + bearing : -1 * bearing) + "deg)",
|
|
2750
|
-
} },
|
|
2751
|
-
React__default["default"].createElement(SvgNeedle, null))),
|
|
2752
|
-
React__default["default"].createElement(RotateButton, { className: css.css(__assign({}, props.rotateLeftStyle)) },
|
|
2753
|
-
React__default["default"].createElement(SvgRotateLeft, { onClick: function () {
|
|
2754
|
-
if (!mapHook.map)
|
|
2755
|
-
return;
|
|
2756
|
-
var bearing = Math.round(mapHook.map.map.getBearing());
|
|
2757
|
-
var rest = Math.round(bearing % 90);
|
|
2758
|
-
if (bearing < 0) {
|
|
2759
|
-
rest = 90 + rest;
|
|
2760
|
-
}
|
|
2761
|
-
if (rest === 0) {
|
|
2762
|
-
rest = 90;
|
|
2763
|
-
}
|
|
2764
|
-
mapHook.map.map.setBearing(Math.round(bearing - Math.abs(rest)));
|
|
2752
|
+
React__default["default"].createElement(StyleBox, { sx: __assign({}, props.style) },
|
|
2753
|
+
React__default["default"].createElement(CompassBox, { onClick: rotate, sx: __assign({}, props.backgroundStyle) },
|
|
2754
|
+
React__default["default"].createElement(SvgCompassBackground, null),
|
|
2755
|
+
React__default["default"].createElement(NeedleBox, { onClick: rotate, sx: __assign({}, props.needleStyle) },
|
|
2756
|
+
React__default["default"].createElement(SvgCompassNeedle, { style: {
|
|
2757
|
+
transform: 'rotate(' + (bearing > 0 ? '-' + bearing : -1 * bearing) + 'deg)',
|
|
2765
2758
|
} }))))));
|
|
2766
|
-
};
|
|
2767
|
-
MlNavigationCompass.propTypes = {
|
|
2768
|
-
/**
|
|
2769
|
-
* Component id prefix
|
|
2770
|
-
*/
|
|
2771
|
-
idPrefix: PropTypes__default["default"].string,
|
|
2772
|
-
/**
|
|
2773
|
-
* Style object to adjust css definitions of the component.
|
|
2774
|
-
*/
|
|
2775
|
-
style: PropTypes__default["default"].object,
|
|
2776
|
-
/**
|
|
2777
|
-
* Style object to adjust css definitions of the background.
|
|
2778
|
-
*/
|
|
2779
|
-
backgroundStyle: PropTypes__default["default"].object,
|
|
2780
|
-
/**
|
|
2781
|
-
* Style object to adjust css definitions of the compass needle.
|
|
2782
|
-
*/
|
|
2783
|
-
needleStyle: PropTypes__default["default"].object,
|
|
2784
|
-
/**
|
|
2785
|
-
* Style object to adjust css definitions of the rotate right button.
|
|
2786
|
-
*/
|
|
2787
|
-
rotateRightStyle: PropTypes__default["default"].object,
|
|
2788
|
-
/**
|
|
2789
|
-
* Style object to adjust css definitions of the rotate left button.
|
|
2790
|
-
*/
|
|
2791
|
-
rotateLeftStyle: PropTypes__default["default"].object,
|
|
2792
|
-
};
|
|
2793
|
-
var templateObject_1, templateObject_2, templateObject_3;
|
|
2759
|
+
};
|
|
2794
2760
|
|
|
2795
2761
|
/**
|
|
2796
2762
|
* @component
|
|
@@ -2801,7 +2767,7 @@ var MlNavigationTools = function (props) {
|
|
|
2801
2767
|
waitForLayer: props.insertBeforeLayer,
|
|
2802
2768
|
});
|
|
2803
2769
|
var _a = React.useState(0), pitch = _a[0], setPitch = _a[1];
|
|
2804
|
-
var mediaIsMobile = useMediaQuery__default["default"](
|
|
2770
|
+
var mediaIsMobile = useMediaQuery__default["default"](function (theme) { return theme.breakpoints.down('md'); });
|
|
2805
2771
|
React.useEffect(function () {
|
|
2806
2772
|
if (!mapHook.map)
|
|
2807
2773
|
return;
|
|
@@ -2835,28 +2801,20 @@ var MlNavigationTools = function (props) {
|
|
|
2835
2801
|
}
|
|
2836
2802
|
mapHook.map.map.easeTo({ pitch: targetPitch });
|
|
2837
2803
|
}, [mapHook.map]);
|
|
2838
|
-
return (React__default["default"].createElement(Box__default["default"], { sx: __assign(__assign({ zIndex: 501, position: 'absolute', display: 'flex', flexDirection: 'column' }, (mediaIsMobile ? { margin: '
|
|
2839
|
-
React__default["default"].createElement(MlNavigationCompass,
|
|
2840
|
-
|
|
2841
|
-
position: 'relative',
|
|
2842
|
-
height: mediaIsMobile ? '55px' : '45px',
|
|
2843
|
-
marginLeft: mediaIsMobile ? '3px' : '-5px',
|
|
2844
|
-
transform: mediaIsMobile ? 'scale(1.6)' : 'scale(1)',
|
|
2845
|
-
}, backgroundStyle: {
|
|
2846
|
-
boxShadow: '0px 0px 18px rgba(0,0,0,.5)',
|
|
2847
|
-
} }),
|
|
2848
|
-
props.show3DButton && (React__default["default"].createElement(Button__default["default"], { variant: "navtools", onClick: adjustPitch }, pitch ? '2D' : '3D')),
|
|
2804
|
+
return (React__default["default"].createElement(Box__default["default"], { sx: __assign(__assign({ zIndex: 501, position: 'absolute', display: 'flex', flexDirection: 'column', right: mediaIsMobile ? '15px' : '25px', bottom: mediaIsMobile ? '20px' : '30px' }, (mediaIsMobile ? { margin: '80px 10px 20px 10px' } : { marginTop: '50px' })), props.sx) },
|
|
2805
|
+
React__default["default"].createElement(MlNavigationCompass, null),
|
|
2806
|
+
props.show3DButton && (React__default["default"].createElement(Button__default["default"], { variant: "navtools", onClick: adjustPitch, className: "pitchbutton", sx: {} }, pitch ? '2D' : '3D')),
|
|
2849
2807
|
props.showFollowGpsButton && React__default["default"].createElement(MlFollowGps, null),
|
|
2850
2808
|
props.showCenterLocationButton && React__default["default"].createElement(MlCenterPosition, null),
|
|
2851
2809
|
React__default["default"].createElement(ButtonGroup__default["default"], { orientation: "vertical", sx: {
|
|
2852
|
-
width: '50px',
|
|
2853
2810
|
border: 'none',
|
|
2854
2811
|
Button: { minWidth: '20px !important' },
|
|
2855
2812
|
'Button:hover': { border: 'none' },
|
|
2856
2813
|
} }, props.showZoomButtons && (React__default["default"].createElement(React__default["default"].Fragment, null,
|
|
2857
|
-
React__default["default"].createElement(Button__default["default"], { variant: "navtools", onClick: zoomIn },
|
|
2814
|
+
React__default["default"].createElement(Button__default["default"], { className: "zoomplus", variant: "navtools", onClick: zoomIn },
|
|
2858
2815
|
React__default["default"].createElement(ControlPointIcon__default["default"], { sx: { fontSize: { xs: '1.4em', md: '1em' } } })),
|
|
2859
|
-
React__default["default"].createElement(
|
|
2816
|
+
React__default["default"].createElement(Divider__default["default"], { sx: { zIndex: 500, marginLeft: '7px', marginRight: '7px' } }),
|
|
2817
|
+
React__default["default"].createElement(Button__default["default"], { className: "zoomminus", variant: "navtools", onClick: zoomOut },
|
|
2860
2818
|
React__default["default"].createElement(RemoveCircleOutlineIcon__default["default"], { sx: { fontSize: { xs: '1.4em', md: '1em' } } }))))),
|
|
2861
2819
|
props.children && React__default["default"].cloneElement(props.children, {})));
|
|
2862
2820
|
};
|
|
@@ -2866,10 +2824,6 @@ MlNavigationTools.defaultProps = {
|
|
|
2866
2824
|
showFollowGpsButton: true,
|
|
2867
2825
|
showCenterLocationButton: false,
|
|
2868
2826
|
showZoomButtons: true,
|
|
2869
|
-
sx: {
|
|
2870
|
-
right: "5px",
|
|
2871
|
-
bottom: "20px",
|
|
2872
|
-
},
|
|
2873
2827
|
};
|
|
2874
2828
|
|
|
2875
2829
|
/**
|
|
@@ -5605,7 +5559,7 @@ function TemporalControllerPlayer(props) {
|
|
|
5605
5559
|
var _b = React.useState(props.isPlaying), isPlaying = _b[0], setIsPlaying = _b[1];
|
|
5606
5560
|
var range = props.maxVal - props.minVal;
|
|
5607
5561
|
var intervalRef = React.useRef();
|
|
5608
|
-
var mediaIsMobile = material.useMediaQuery(
|
|
5562
|
+
var mediaIsMobile = material.useMediaQuery(function (theme) { return theme.breakpoints.down('md'); });
|
|
5609
5563
|
React.useEffect(function () {
|
|
5610
5564
|
return function () {
|
|
5611
5565
|
if (intervalRef.current) {
|
|
@@ -6212,128 +6166,6 @@ useAddProtocol.defaultProps = {
|
|
|
6212
6166
|
mapId: undefined,
|
|
6213
6167
|
};
|
|
6214
6168
|
|
|
6215
|
-
var loadedMbtiles = {};
|
|
6216
|
-
var parseParams = function (url) {
|
|
6217
|
-
var urlParts = url.split('://');
|
|
6218
|
-
var mbtilesUrl = urlParts[1];
|
|
6219
|
-
var mbtilesParts = mbtilesUrl.split('/');
|
|
6220
|
-
var mbtilesPartsLength = mbtilesParts.length;
|
|
6221
|
-
var y = mbtilesParts.splice(mbtilesPartsLength - 1, 1)[0];
|
|
6222
|
-
var x = mbtilesParts.splice(mbtilesPartsLength - 2, 1)[0];
|
|
6223
|
-
var z = mbtilesParts.splice(mbtilesPartsLength - 3, 1)[0];
|
|
6224
|
-
var filename = mbtilesParts.join('/');
|
|
6225
|
-
return {
|
|
6226
|
-
filename: filename,
|
|
6227
|
-
z: z,
|
|
6228
|
-
x: x,
|
|
6229
|
-
y: y,
|
|
6230
|
-
};
|
|
6231
|
-
};
|
|
6232
|
-
// mbtiles files are sqlite databases. This function loads the database and returns a handler
|
|
6233
|
-
// to work with sqlite databases in javascript we need to use sql.js.
|
|
6234
|
-
// to make this work in your project make sure to copy sql-wasm.wasm to the file root of your public folder and
|
|
6235
|
-
// add the following config to the externals prop of your webpack config
|
|
6236
|
-
// {externals: { fs: 'fs' }};
|
|
6237
|
-
var getMbtilesDbHandler = function (_a) {
|
|
6238
|
-
var filename = _a.filename;
|
|
6239
|
-
return __awaiter(void 0, void 0, void 0, function () {
|
|
6240
|
-
var SQL, fetched, buf, db;
|
|
6241
|
-
return __generator(this, function (_b) {
|
|
6242
|
-
switch (_b.label) {
|
|
6243
|
-
case 0:
|
|
6244
|
-
if (!!loadedMbtiles[filename]) return [3 /*break*/, 4];
|
|
6245
|
-
return [4 /*yield*/, initSqlJs__default["default"]()];
|
|
6246
|
-
case 1:
|
|
6247
|
-
SQL = _b.sent();
|
|
6248
|
-
return [4 /*yield*/, fetch(filename)];
|
|
6249
|
-
case 2:
|
|
6250
|
-
fetched = _b.sent();
|
|
6251
|
-
return [4 /*yield*/, fetched.arrayBuffer()];
|
|
6252
|
-
case 3:
|
|
6253
|
-
buf = _b.sent();
|
|
6254
|
-
db = new SQL.Database(new Uint8Array(buf));
|
|
6255
|
-
loadedMbtiles[filename] = db;
|
|
6256
|
-
_b.label = 4;
|
|
6257
|
-
case 4: return [2 /*return*/, loadedMbtiles[filename]];
|
|
6258
|
-
}
|
|
6259
|
-
});
|
|
6260
|
-
});
|
|
6261
|
-
};
|
|
6262
|
-
/**
|
|
6263
|
-
* Example usage:
|
|
6264
|
-
* getBufferFromMbtiles({ filename: 'mbtiles/countries.mbtiles', z: '0', x: '0', y: '0' }).then(
|
|
6265
|
-
* (result) => {
|
|
6266
|
-
* console.log(result);
|
|
6267
|
-
* }
|
|
6268
|
-
* );
|
|
6269
|
-
*/
|
|
6270
|
-
function getBufferFromMbtiles(params) {
|
|
6271
|
-
return __awaiter(this, void 0, void 0, function () {
|
|
6272
|
-
var db, query;
|
|
6273
|
-
return __generator(this, function (_a) {
|
|
6274
|
-
switch (_a.label) {
|
|
6275
|
-
case 0: return [4 /*yield*/, getMbtilesDbHandler(params)];
|
|
6276
|
-
case 1:
|
|
6277
|
-
db = _a.sent();
|
|
6278
|
-
query = 'SELECT tile_data FROM tiles WHERE zoom_level = ' +
|
|
6279
|
-
params.z +
|
|
6280
|
-
' AND tile_column = ' +
|
|
6281
|
-
params.x +
|
|
6282
|
-
' AND tile_row = ' +
|
|
6283
|
-
(Math.pow(2, parseInt(params.z)) - parseInt(params.y) - 1);
|
|
6284
|
-
return [2 /*return*/, new Promise(function (resolve, reject) {
|
|
6285
|
-
try {
|
|
6286
|
-
// some of the logic here was heavily inspired by
|
|
6287
|
-
// https://github.com/IsraelHikingMap/Site/blob/6aa2ec0cfb8891fa048b1d9e2a4fc7d4cbcc8c97/IsraelHiking.Web/src/application/services/database.service.ts
|
|
6288
|
-
var result = db.exec(query);
|
|
6289
|
-
if (result.length !== 1) {
|
|
6290
|
-
reject(new Error('Tile not found.'));
|
|
6291
|
-
return;
|
|
6292
|
-
}
|
|
6293
|
-
var resultData = result[0].values[0][0];
|
|
6294
|
-
var binData = void 0;
|
|
6295
|
-
var isGzipped = resultData[0] === 0x1f && resultData[1] === 0x8b;
|
|
6296
|
-
if (isGzipped) {
|
|
6297
|
-
binData = pako__namespace.inflate(resultData);
|
|
6298
|
-
}
|
|
6299
|
-
else {
|
|
6300
|
-
binData = resultData;
|
|
6301
|
-
}
|
|
6302
|
-
if (binData === null || binData === void 0 ? void 0 : binData.buffer) {
|
|
6303
|
-
resolve(binData.buffer);
|
|
6304
|
-
}
|
|
6305
|
-
else {
|
|
6306
|
-
reject(new Error('Tile not found.'));
|
|
6307
|
-
return;
|
|
6308
|
-
}
|
|
6309
|
-
}
|
|
6310
|
-
catch (error) {
|
|
6311
|
-
reject(error);
|
|
6312
|
-
}
|
|
6313
|
-
})];
|
|
6314
|
-
}
|
|
6315
|
-
});
|
|
6316
|
-
});
|
|
6317
|
-
}
|
|
6318
|
-
/**
|
|
6319
|
-
* Expects a tile url in the following format:
|
|
6320
|
-
*
|
|
6321
|
-
* 'mbtiles://mbtiles/countries.mbtiles/{z}/{x}/{y}'
|
|
6322
|
-
*/
|
|
6323
|
-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
6324
|
-
var mbTilesProtocolHandler = function (params, callback) {
|
|
6325
|
-
var parsedParams = parseParams(params.url);
|
|
6326
|
-
getBufferFromMbtiles(parsedParams).then(function (result) {
|
|
6327
|
-
if (result) {
|
|
6328
|
-
callback(null, result, null, null);
|
|
6329
|
-
}
|
|
6330
|
-
else {
|
|
6331
|
-
callback(new Error('Tile not found'));
|
|
6332
|
-
}
|
|
6333
|
-
});
|
|
6334
|
-
return { cancel: function () { } };
|
|
6335
|
-
};
|
|
6336
|
-
|
|
6337
6169
|
var SimpleDataContext = /*#__PURE__*/React__default["default"].createContext({});
|
|
6338
6170
|
var SimpleDataContextProvider = SimpleDataContext.Provider;
|
|
6339
6171
|
|
|
@@ -6408,15 +6240,22 @@ var ColorPicker = function (_a) {
|
|
|
6408
6240
|
var _c = React.useState((props === null || props === void 0 ? void 0 : props.value) || ''), value = _c[0], setValue = _c[1];
|
|
6409
6241
|
return (React__default["default"].createElement(React__default["default"].Fragment, null,
|
|
6410
6242
|
React__default["default"].createElement(material.Grid, { container: true, sx: { flexWrap: 'nowrap' } },
|
|
6411
|
-
React__default["default"].createElement(material.Grid, { xs:
|
|
6243
|
+
React__default["default"].createElement(material.Grid, { xs: 12, item: true },
|
|
6412
6244
|
React__default["default"].createElement(material.Button, { variant: "outlined", onClick: function () { return setShowPicker(true); }, sx: {
|
|
6413
|
-
minWidth: '
|
|
6245
|
+
minWidth: '100%',
|
|
6414
6246
|
padding: '5px',
|
|
6247
|
+
marginBottom: '10px',
|
|
6248
|
+
justifyContent: 'flex-start',
|
|
6415
6249
|
borderColor: function (theme) { return theme.palette.text.primary; },
|
|
6250
|
+
color: function (theme) { return theme.palette.text.primary; },
|
|
6416
6251
|
} },
|
|
6417
|
-
React__default["default"].createElement("div", { style: {
|
|
6418
|
-
|
|
6419
|
-
|
|
6252
|
+
React__default["default"].createElement("div", { style: {
|
|
6253
|
+
width: '25px',
|
|
6254
|
+
height: '25px',
|
|
6255
|
+
marginRight: '10px',
|
|
6256
|
+
backgroundColor: value,
|
|
6257
|
+
} }),
|
|
6258
|
+
value))),
|
|
6420
6259
|
showPicker && (React__default["default"].createElement("div", { style: { position: 'relative', marginTop: 0 } },
|
|
6421
6260
|
React__default["default"].createElement("div", { style: { position: 'absolute', zIndex: 1000 } },
|
|
6422
6261
|
React__default["default"].createElement("div", { style: { position: 'fixed', top: '0px', right: '0px', bottom: '0px', left: '0px' }, onClick: function () {
|
|
@@ -6522,13 +6361,16 @@ function LayerPropertyForm(_a) {
|
|
|
6522
6361
|
return null;
|
|
6523
6362
|
}, [paintProps]);
|
|
6524
6363
|
return (React__default["default"].createElement(React__default["default"].Fragment, null,
|
|
6525
|
-
React__default["default"].createElement(material.
|
|
6526
|
-
|
|
6527
|
-
|
|
6528
|
-
|
|
6529
|
-
|
|
6530
|
-
|
|
6531
|
-
|
|
6364
|
+
React__default["default"].createElement(material.Paper, { sx: {
|
|
6365
|
+
marginLeft: '-100px',
|
|
6366
|
+
marginRight: '-21px',
|
|
6367
|
+
paddingLeft: '81px',
|
|
6368
|
+
borderRadius: '0px',
|
|
6369
|
+
} },
|
|
6370
|
+
React__default["default"].createElement(material.ListItem, { key: key + '_paintPropForm' },
|
|
6371
|
+
React__default["default"].createElement(material.Box, { sx: {
|
|
6372
|
+
marginLeft: '61px',
|
|
6373
|
+
} }, Object.keys(paintProps).map(function (el) { return getFormInputByType(el); }))))));
|
|
6532
6374
|
}
|
|
6533
6375
|
|
|
6534
6376
|
function LayerListFolder(_a) {
|
|
@@ -6557,14 +6399,18 @@ function LayerListFolder(_a) {
|
|
|
6557
6399
|
return React__default["default"].createElement(React__default["default"].Fragment, null);
|
|
6558
6400
|
}, [_visible]);
|
|
6559
6401
|
return (React__default["default"].createElement(React__default["default"].Fragment, null,
|
|
6560
|
-
React__default["default"].createElement(material.ListItem, {
|
|
6402
|
+
React__default["default"].createElement(material.ListItem, { className: 'listItemFolder', sx: {
|
|
6561
6403
|
paddingRight: 0,
|
|
6562
6404
|
paddingLeft: 0,
|
|
6563
6405
|
paddingTop: 0,
|
|
6564
6406
|
paddingBottom: '4px',
|
|
6565
6407
|
} },
|
|
6566
6408
|
React__default["default"].createElement(material.ListItemIcon, { sx: { minWidth: '30px' } },
|
|
6567
|
-
React__default["default"].createElement(material.
|
|
6409
|
+
React__default["default"].createElement(material.IconButton, { sx: {
|
|
6410
|
+
marginRight: '0px',
|
|
6411
|
+
padding: '0px',
|
|
6412
|
+
}, edge: "end", "aria-label": "open", onClick: function () { return setOpen(!open); } }, open ? React__default["default"].createElement(iconsMaterial.ExpandMore, null) : React__default["default"].createElement(iconsMaterial.KeyboardArrowRight, null)),
|
|
6413
|
+
React__default["default"].createElement(material.Checkbox, { disabled: setVisible ? false : !visible, checked: setVisible ? visible : localVisible, sx: { padding: 0, marginRight: '5px' }, onClick: function () {
|
|
6568
6414
|
if (setVisible) {
|
|
6569
6415
|
setVisible(function (val) { return !val; });
|
|
6570
6416
|
}
|
|
@@ -6574,7 +6420,7 @@ function LayerListFolder(_a) {
|
|
|
6574
6420
|
} })),
|
|
6575
6421
|
React__default["default"].createElement(material.ListItemText, { primary: name, variant: "layerlist" })),
|
|
6576
6422
|
React__default["default"].createElement(system.Box, { sx: { display: open ? 'block' : 'none' } },
|
|
6577
|
-
React__default["default"].createElement(material.List, { component: "div", disablePadding: true, sx: {
|
|
6423
|
+
React__default["default"].createElement(material.List, { component: "div", disablePadding: true, sx: { marginLeft: '25px' } }, _children))));
|
|
6578
6424
|
}
|
|
6579
6425
|
|
|
6580
6426
|
function LayerListItemVectorLayer(_a) {
|
|
@@ -6713,13 +6559,13 @@ function LayerListItem(_a) {
|
|
|
6713
6559
|
return undefined;
|
|
6714
6560
|
}, [layerComponent]);
|
|
6715
6561
|
return (React__default["default"].createElement(React__default["default"].Fragment, null,
|
|
6716
|
-
!((_f = layerComponent === null || layerComponent === void 0 ? void 0 : layerComponent.props) === null || _f === void 0 ? void 0 : _f.layers) && (React__default["default"].createElement(material.ListItem, { sx: __assign({ paddingRight: configurable ? '56px' : 0, paddingLeft:
|
|
6562
|
+
!((_f = layerComponent === null || layerComponent === void 0 ? void 0 : layerComponent.props) === null || _f === void 0 ? void 0 : _f.layers) && (React__default["default"].createElement(material.ListItem, { sx: __assign({ paddingRight: configurable ? '56px' : 0, paddingLeft: '25px', paddingTop: 0, paddingBottom: '4px' }, props.listItemSx), secondaryAction: configurable && ((_g = Object.keys(paintProps)) === null || _g === void 0 ? void 0 : _g.length) > 0 ? (React__default["default"].createElement(React__default["default"].Fragment, null, props === null || props === void 0 ? void 0 :
|
|
6717
6563
|
props.buttons,
|
|
6718
6564
|
React__default["default"].createElement(material.IconButton, { edge: props.showDeleteButton ? false : 'end', "aria-label": "settings", onClick: function () {
|
|
6719
6565
|
setPaintPropsFormVisible(function (current) {
|
|
6720
6566
|
return !current;
|
|
6721
6567
|
});
|
|
6722
|
-
}, sx: __assign({ padding: '4px', marginTop: '-3px' }, (props.showDeleteButton ? { marginRight: '4px' } : {})) },
|
|
6568
|
+
}, sx: __assign({ marginRight: '0px', padding: '4px', marginTop: '-3px' }, (props.showDeleteButton ? { marginRight: '4px' } : {})) },
|
|
6723
6569
|
React__default["default"].createElement(TuneIcon__default["default"], null)),
|
|
6724
6570
|
props.showDeleteButton && (React__default["default"].createElement(React__default["default"].Fragment, null,
|
|
6725
6571
|
React__default["default"].createElement(material.IconButton, { edge: "end", "aria-label": "delete", onClick: function () {
|
|
@@ -7060,7 +6906,7 @@ var Puller = styles.styled(Box__default["default"])(function (_a) {
|
|
|
7060
6906
|
});
|
|
7061
6907
|
function Sidebar(_a) {
|
|
7062
6908
|
var drawerPaperProps = _a.drawerPaperProps, drawerHeaderProps = _a.drawerHeaderProps, setOpen = _a.setOpen, props = __rest(_a, ["drawerPaperProps", "drawerHeaderProps", "setOpen"]);
|
|
7063
|
-
var mediaIsMobile = useMediaQuery__default["default"](
|
|
6909
|
+
var mediaIsMobile = useMediaQuery__default["default"](function (theme) { return theme.breakpoints.down('sm'); });
|
|
7064
6910
|
var _b = React.useState(false), drawerOpen = _b[0], setDrawerOpen = _b[1];
|
|
7065
6911
|
return (React__default["default"].createElement(React__default["default"].Fragment, null,
|
|
7066
6912
|
!mediaIsMobile ? (React__default["default"].createElement(Box__default["default"], { sx: { display: { xs: 'none', sm: 'flex' }, mr: 1 } },
|
|
@@ -19993,7 +19839,6 @@ var SpeedDial = function () {
|
|
|
19993
19839
|
}
|
|
19994
19840
|
};
|
|
19995
19841
|
var handleClose = function () { return setOpen(false); };
|
|
19996
|
-
var theme = getTheme('light');
|
|
19997
19842
|
return (React__default["default"].createElement(Box__default["default"], { sx: {
|
|
19998
19843
|
height: 330,
|
|
19999
19844
|
transform: 'translateZ(0px)',
|
|
@@ -20004,7 +19849,7 @@ var SpeedDial = function () {
|
|
|
20004
19849
|
width: '100px',
|
|
20005
19850
|
zIndex: '1000',
|
|
20006
19851
|
} },
|
|
20007
|
-
React__default["default"].createElement(MuiSpeedDial__default["default"], { ariaLabel: "SpeedDial tooltip example", sx: { position: 'absolute', bottom: 16, right: 16 }, icon: open ? React__default["default"].createElement(CloseIcon__default["default"], { fontSize: "large" }) : React__default["default"].createElement(MoreVertIcon__default["default"], { fontSize: "large" }), onClick: open ? handleClose : handleOpen, onOpen: handleOpen, open: open }, actions.map(function (action) { return (React__default["default"].createElement(SpeedDialAction__default["default"], { key: action.name, icon: action.icon, tooltipTitle: action.name, tooltipOpen: true, onClick: handleClose, FabProps: { sx: { color:
|
|
19852
|
+
React__default["default"].createElement(MuiSpeedDial__default["default"], { ariaLabel: "SpeedDial tooltip example", sx: { position: 'absolute', bottom: 16, right: 16 }, icon: open ? React__default["default"].createElement(CloseIcon__default["default"], { fontSize: "large" }) : React__default["default"].createElement(MoreVertIcon__default["default"], { fontSize: "large" }), onClick: open ? handleClose : handleOpen, onOpen: handleOpen, open: open }, actions.map(function (action) { return (React__default["default"].createElement(SpeedDialAction__default["default"], { key: action.name, icon: action.icon, tooltipTitle: action.name, tooltipOpen: true, onClick: handleClose, FabProps: { sx: { color: 'text.primary' } } })); }))));
|
|
20008
19853
|
};
|
|
20009
19854
|
SpeedDial.defaultProps = {
|
|
20010
19855
|
mapId: undefined,
|
|
@@ -20078,7 +19923,6 @@ exports.TopToolbar = TopToolbar;
|
|
|
20078
19923
|
exports.UploadButton = UploadButton;
|
|
20079
19924
|
exports.WmsLayerForm = WmsLayerForm;
|
|
20080
19925
|
exports.getTheme = getTheme;
|
|
20081
|
-
exports.mbTilesProtocolHandler = mbTilesProtocolHandler;
|
|
20082
19926
|
exports.useAddProtocol = useAddProtocol;
|
|
20083
19927
|
exports.useCameraFollowPath = useCameraFollowPath;
|
|
20084
19928
|
exports.useExportMap = useExportMap;
|