@mapcomponents/react-maplibre 0.1.94 → 0.1.96

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/dist/index.esm.js CHANGED
@@ -57,6 +57,10 @@ var reactColor = require('react-color');
57
57
  var TuneIcon = require('@mui/icons-material/Tune');
58
58
  var ScatterPlotIcon = require('@mui/icons-material/ScatterPlot');
59
59
  var PolylineIcon = require('@mui/icons-material/Polyline');
60
+ var csv2geojson = require('csv2geojson');
61
+ var osm2geojson = require('osm2geojson-lite');
62
+ var topojsonClient = require('topojson-client');
63
+ var externParser = require('@tmcw/togeojson');
60
64
  var d3 = require('d3');
61
65
  var core = require('@dnd-kit/core');
62
66
  var modifiers = require('@dnd-kit/modifiers');
@@ -64,10 +68,6 @@ var PlaylistAddIcon = require('@mui/icons-material/PlaylistAdd');
64
68
  var DynamicFeedIcon = require('@mui/icons-material/DynamicFeed');
65
69
  var AddBoxIcon = require('@mui/icons-material/AddBox');
66
70
  var IndeterminateCheckBoxIcon = require('@mui/icons-material/IndeterminateCheckBox');
67
- var csv2geojson = require('csv2geojson');
68
- var topojsonClient = require('topojson-client');
69
- var osm2geojson = require('osm2geojson-lite');
70
- var externParser = require('@tmcw/togeojson');
71
71
  var KeyboardArrowDownIcon = require('@mui/icons-material/KeyboardArrowDown');
72
72
  var KeyboardArrowUpIcon = require('@mui/icons-material/KeyboardArrowUp');
73
73
  var AppBar = require('@mui/material/AppBar');
@@ -151,14 +151,14 @@ var Tooltip__default = /*#__PURE__*/_interopDefaultLegacy(Tooltip);
151
151
  var TuneIcon__default = /*#__PURE__*/_interopDefaultLegacy(TuneIcon);
152
152
  var ScatterPlotIcon__default = /*#__PURE__*/_interopDefaultLegacy(ScatterPlotIcon);
153
153
  var PolylineIcon__default = /*#__PURE__*/_interopDefaultLegacy(PolylineIcon);
154
+ var csv2geojson__namespace = /*#__PURE__*/_interopNamespace(csv2geojson);
155
+ var osm2geojson__default = /*#__PURE__*/_interopDefaultLegacy(osm2geojson);
156
+ var externParser__namespace = /*#__PURE__*/_interopNamespace(externParser);
154
157
  var d3__namespace = /*#__PURE__*/_interopNamespace(d3);
155
158
  var PlaylistAddIcon__default = /*#__PURE__*/_interopDefaultLegacy(PlaylistAddIcon);
156
159
  var DynamicFeedIcon__default = /*#__PURE__*/_interopDefaultLegacy(DynamicFeedIcon);
157
160
  var AddBoxIcon__default = /*#__PURE__*/_interopDefaultLegacy(AddBoxIcon);
158
161
  var IndeterminateCheckBoxIcon__default = /*#__PURE__*/_interopDefaultLegacy(IndeterminateCheckBoxIcon);
159
- var csv2geojson__namespace = /*#__PURE__*/_interopNamespace(csv2geojson);
160
- var osm2geojson__default = /*#__PURE__*/_interopDefaultLegacy(osm2geojson);
161
- var externParser__namespace = /*#__PURE__*/_interopNamespace(externParser);
162
162
  var KeyboardArrowDownIcon__default = /*#__PURE__*/_interopDefaultLegacy(KeyboardArrowDownIcon);
163
163
  var KeyboardArrowUpIcon__default = /*#__PURE__*/_interopDefaultLegacy(KeyboardArrowUpIcon);
164
164
  var AppBar__default = /*#__PURE__*/_interopDefaultLegacy(AppBar);
@@ -2437,7 +2437,7 @@ function useLayer(props) {
2437
2437
  var initializedRef = React.useRef(false);
2438
2438
  var layerId = React.useRef(props.layerId || (props.idPrefix ? props.idPrefix : 'Layer-') + mapHook.componentId);
2439
2439
  var createLayer = React.useCallback(function () {
2440
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
2440
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
2441
2441
  if (!mapHook.map || (mapHook === null || mapHook === void 0 ? void 0 : mapHook.map.cancelled))
2442
2442
  return;
2443
2443
  if (mapHook.map.map.getLayer(layerId.current)) {
@@ -2453,7 +2453,8 @@ function useLayer(props) {
2453
2453
  }
2454
2454
  if (typeof ((_b = props === null || props === void 0 ? void 0 : props.options) === null || _b === void 0 ? void 0 : _b.source) !== 'string' &&
2455
2455
  !props.geojson &&
2456
- !((_d = (_c = props === null || props === void 0 ? void 0 : props.options) === null || _c === void 0 ? void 0 : _c.source) === null || _d === void 0 ? void 0 : _d.data)) {
2456
+ !((_d = (_c = props === null || props === void 0 ? void 0 : props.options) === null || _c === void 0 ? void 0 : _c.source) === null || _d === void 0 ? void 0 : _d.data) &&
2457
+ ((_e = props === null || props === void 0 ? void 0 : props.options) === null || _e === void 0 ? void 0 : _e.type) !== 'background') {
2457
2458
  return;
2458
2459
  }
2459
2460
  if (typeof props.options.type === 'undefined') {
@@ -2462,21 +2463,21 @@ function useLayer(props) {
2462
2463
  initializedRef.current = true;
2463
2464
  try {
2464
2465
  mapHook.map.addLayer(__assign(__assign(__assign(__assign({}, props.options), (props.geojson &&
2465
- (!((_e = props.options) === null || _e === void 0 ? void 0 : _e.source) ||
2466
- (typeof ((_f = props === null || props === void 0 ? void 0 : props.options) === null || _f === void 0 ? void 0 : _f.source) !== 'string' &&
2467
- ((_h = (_g = props.options) === null || _g === void 0 ? void 0 : _g.source) === null || _h === void 0 ? void 0 : _h.attribution) &&
2468
- !((_k = (_j = props.options) === null || _j === void 0 ? void 0 : _j.source) === null || _k === void 0 ? void 0 : _k.type))) // if either options.source isn't defined or only options.source.attribution is defined
2466
+ (!((_f = props.options) === null || _f === void 0 ? void 0 : _f.source) ||
2467
+ (typeof ((_g = props === null || props === void 0 ? void 0 : props.options) === null || _g === void 0 ? void 0 : _g.source) !== 'string' &&
2468
+ ((_j = (_h = props.options) === null || _h === void 0 ? void 0 : _h.source) === null || _j === void 0 ? void 0 : _j.attribution) &&
2469
+ !((_l = (_k = props.options) === null || _k === void 0 ? void 0 : _k.source) === null || _l === void 0 ? void 0 : _l.type))) // if either options.source isn't defined or only options.source.attribution is defined
2469
2470
  ? {
2470
2471
  source: {
2471
2472
  type: 'geojson',
2472
2473
  data: props.geojson,
2473
- attribution: typeof ((_l = props === null || props === void 0 ? void 0 : props.options) === null || _l === void 0 ? void 0 : _l.source) !== 'string' && ((_m = props.options.source) === null || _m === void 0 ? void 0 : _m.attribution)
2474
- ? (_o = props.options.source) === null || _o === void 0 ? void 0 : _o.attribution
2474
+ attribution: typeof ((_m = props === null || props === void 0 ? void 0 : props.options) === null || _m === void 0 ? void 0 : _m.source) !== 'string' && ((_o = props.options.source) === null || _o === void 0 ? void 0 : _o.attribution)
2475
+ ? (_p = props.options.source) === null || _p === void 0 ? void 0 : _p.attribution
2475
2476
  : '',
2476
2477
  },
2477
2478
  // eslint-disable-next-line no-mixed-spaces-and-tabs
2478
2479
  }
2479
- : {})), (typeof ((_p = props.options) === null || _p === void 0 ? void 0 : _p.source) === 'string'
2480
+ : {})), (typeof ((_q = props.options) === null || _q === void 0 ? void 0 : _q.source) === 'string'
2480
2481
  ? {
2481
2482
  source: props.options.source,
2482
2483
  // eslint-disable-next-line no-mixed-spaces-and-tabs
@@ -2507,19 +2508,19 @@ function useLayer(props) {
2507
2508
  createLayer();
2508
2509
  }
2509
2510
  }, mapHook.componentId);
2510
- layerPaintConfRef.current = JSON.stringify((_q = props.options) === null || _q === void 0 ? void 0 : _q.paint);
2511
- layerLayoutConfRef.current = JSON.stringify((_r = props.options) === null || _r === void 0 ? void 0 : _r.layout);
2511
+ layerPaintConfRef.current = JSON.stringify((_r = props.options) === null || _r === void 0 ? void 0 : _r.paint);
2512
+ layerLayoutConfRef.current = JSON.stringify((_s = props.options) === null || _s === void 0 ? void 0 : _s.layout);
2512
2513
  layerTypeRef.current = props.options.type;
2513
2514
  }, [props, mapHook]);
2514
2515
  React.useEffect(function () {
2515
- var _a, _b, _c, _d;
2516
+ var _a, _b, _c, _d, _e;
2516
2517
  if (!mapHook.map)
2517
2518
  return;
2518
- if (!props.geojson && !props.options.source)
2519
+ if (!props.geojson && !props.options.source && ((_a = props === null || props === void 0 ? void 0 : props.options) === null || _a === void 0 ? void 0 : _a.type) !== 'background')
2519
2520
  return;
2520
- if (((_a = mapHook.map) === null || _a === void 0 ? void 0 : _a.cancelled) === false &&
2521
+ if (((_b = mapHook.map) === null || _b === void 0 ? void 0 : _b.cancelled) === false &&
2521
2522
  initializedRef.current &&
2522
- ((_d = (_c = (_b = mapHook === null || mapHook === void 0 ? void 0 : mapHook.map) === null || _b === void 0 ? void 0 : _b.map) === null || _c === void 0 ? void 0 : _c.getLayer) === null || _d === void 0 ? void 0 : _d.call(_c, layerId.current)) &&
2523
+ ((_e = (_d = (_c = mapHook === null || mapHook === void 0 ? void 0 : mapHook.map) === null || _c === void 0 ? void 0 : _c.map) === null || _d === void 0 ? void 0 : _d.getLayer) === null || _e === void 0 ? void 0 : _e.call(_d, layerId.current)) &&
2523
2524
  (legalLayerTypes.indexOf(props.options.type) === -1 ||
2524
2525
  (legalLayerTypes.indexOf(props.options.type) !== -1 &&
2525
2526
  props.options.type === layerTypeRef.current))) {
@@ -2780,7 +2781,7 @@ function useSource(props) {
2780
2781
  * @component
2781
2782
  */
2782
2783
  var MlGeoJsonLayer = function (props) {
2783
- var _a, _b, _c, _d, _e;
2784
+ var _a, _b, _c, _d, _e, _f, _g, _h;
2784
2785
  var layerType = props.type || getDefaulLayerTypeByGeometry(props.geojson);
2785
2786
  var layerId = React.useRef(props.layerId || 'MlGeoJsonLayer-' + uuid.v4());
2786
2787
  var labelLayerId = "label-".concat(layerId.current);
@@ -2794,16 +2795,16 @@ var MlGeoJsonLayer = function (props) {
2794
2795
  }, [props.layerId]);
2795
2796
  useSource({
2796
2797
  mapId: props.mapId,
2797
- sourceId: "source-" + layerId.current,
2798
- source: {
2799
- type: 'geojson',
2800
- data: props.geojson,
2801
- },
2798
+ sourceId: 'source-' + layerId.current,
2799
+ source: __assign({ type: 'geojson', data: props.geojson }, (typeof ((_a = props === null || props === void 0 ? void 0 : props.options) === null || _a === void 0 ? void 0 : _a.source) !== 'undefined' &&
2800
+ typeof ((_b = props === null || props === void 0 ? void 0 : props.options) === null || _b === void 0 ? void 0 : _b.source) !== 'string'
2801
+ ? props.options.source
2802
+ : {})),
2802
2803
  });
2803
2804
  useLayer({
2804
2805
  mapId: props.mapId,
2805
2806
  layerId: layerId.current,
2806
- options: __assign(__assign({ source: "source-" + layerId.current }, props.options), { paint: __assign(__assign({}, (props.paint || getDefaultPaintPropsByType(layerType, props.defaultPaintOverrides))), (_a = props === null || props === void 0 ? void 0 : props.options) === null || _a === void 0 ? void 0 : _a.paint), layout: __assign(__assign({}, ((props === null || props === void 0 ? void 0 : props.layout) || {})), (_b = props === null || props === void 0 ? void 0 : props.options) === null || _b === void 0 ? void 0 : _b.layout), type: layerType }),
2807
+ options: __assign(__assign({}, props.options), { source: 'source-' + layerId.current, paint: __assign(__assign({}, (props.paint || getDefaultPaintPropsByType(layerType, props.defaultPaintOverrides))), (_c = props === null || props === void 0 ? void 0 : props.options) === null || _c === void 0 ? void 0 : _c.paint), layout: __assign(__assign({}, ((props === null || props === void 0 ? void 0 : props.layout) || {})), (_d = props === null || props === void 0 ? void 0 : props.options) === null || _d === void 0 ? void 0 : _d.layout), type: layerType }),
2807
2808
  insertBeforeLayer: props.insertBeforeLayer,
2808
2809
  onHover: props.onHover,
2809
2810
  onClick: props.onClick,
@@ -2813,11 +2814,7 @@ var MlGeoJsonLayer = function (props) {
2813
2814
  // Using it with geojson and options.source undefined will cause it to return without creating a layer.
2814
2815
  useLayer({
2815
2816
  mapId: props.mapId,
2816
- options: __assign(__assign(__assign({ source: props.labelProp ? "source-" + layerId.current : undefined, id: labelLayerId, type: 'symbol', maxzoom: 24, minzoom: 1 }, ((props === null || props === void 0 ? void 0 : props.labelOptions) ? props.labelOptions : {})), (((_c = props === null || props === void 0 ? void 0 : props.options) === null || _c === void 0 ? void 0 : _c.filter) ? { filter: props.options.filter } : {})), { layout: __assign(__assign({ 'text-font': ['Open Sans Regular'], 'text-field': "{".concat(props.labelProp, "}"), 'text-size': 12, 'text-anchor': 'top' }, (((_d = props === null || props === void 0 ? void 0 : props.labelOptions) === null || _d === void 0 ? void 0 : _d.layout) ? props.labelOptions.layout : {})), (((_e = props === null || props === void 0 ? void 0 : props.layout) === null || _e === void 0 ? void 0 : _e.visibility) ? { visibility: props.layout.visibility } : {})), paint: {
2817
- 'text-halo-width': 1,
2818
- 'text-halo-color': '#fefefe',
2819
- 'text-color': '#121212',
2820
- } }),
2817
+ options: __assign(__assign(__assign({ source: props.labelProp ? 'source-' + layerId.current : undefined, id: labelLayerId, type: 'symbol', maxzoom: 24, minzoom: 1 }, ((props === null || props === void 0 ? void 0 : props.labelOptions) ? props.labelOptions : {})), (((_e = props === null || props === void 0 ? void 0 : props.options) === null || _e === void 0 ? void 0 : _e.filter) ? { filter: props.options.filter } : {})), { layout: __assign(__assign({ 'text-font': ['Open Sans Regular'], 'text-field': "{".concat(props.labelProp, "}"), 'text-size': 12, 'text-anchor': 'top' }, (((_f = props === null || props === void 0 ? void 0 : props.labelOptions) === null || _f === void 0 ? void 0 : _f.layout) ? props.labelOptions.layout : {})), (((_g = props === null || props === void 0 ? void 0 : props.layout) === null || _g === void 0 ? void 0 : _g.visibility) ? { visibility: props.layout.visibility } : {})), paint: __assign({ 'text-halo-width': 1, 'text-halo-color': '#fefefe', 'text-color': '#121212' }, (((_h = props === null || props === void 0 ? void 0 : props.labelOptions) === null || _h === void 0 ? void 0 : _h.paint) ? props.labelOptions.paint : {})) }),
2821
2818
  });
2822
2819
  return React__default["default"].createElement(React__default["default"].Fragment, null);
2823
2820
  };
@@ -3030,10 +3027,10 @@ var MlMeasureTool = function (props) {
3030
3027
  value = result * 1000000;
3031
3028
  }
3032
3029
  if (getUnitLabel(props.unit) === 'mi') {
3033
- label = 'in';
3034
- value = result * 63360;
3030
+ label = 'Yard';
3031
+ value = result * 1760;
3035
3032
  if (props.measureType === 'polygon') {
3036
- value = result * 4014489599.4792;
3033
+ value = result * 3097600;
3037
3034
  }
3038
3035
  }
3039
3036
  setDisplayValue({ value: value, label: label });
@@ -6680,16 +6677,16 @@ var DeleteIconButton = material.styled(material.IconButton)({
6680
6677
  marginLeft: '20px',
6681
6678
  });
6682
6679
  function LayerListItem(_a) {
6683
- var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
6680
+ var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
6684
6681
  var layerComponent = _a.layerComponent, visible = _a.visible, type = _a.type, name = _a.name, description = _a.description, configurable = _a.configurable, setLayerState = _a.setLayerState, props = __rest(_a, ["layerComponent", "visible", "type", "name", "description", "configurable", "setLayerState"]);
6685
- var _p = React.useState(true), localVisible = _p[0], setLocalVisible = _p[1];
6686
- var _q = React.useState(false), paintPropsFormVisible = _q[0], setPaintPropsFormVisible = _q[1];
6687
- var _r = React.useState(false), showDeletionConfirmationDialog = _r[0], setShowDeletionConfirmationDialog = _r[1];
6682
+ var _r = React.useState(true), localVisible = _r[0], setLocalVisible = _r[1];
6683
+ var _s = React.useState(false), paintPropsFormVisible = _s[0], setPaintPropsFormVisible = _s[1];
6684
+ var _t = React.useState(false), showDeletionConfirmationDialog = _t[0], setShowDeletionConfirmationDialog = _t[1];
6688
6685
  var deletedRef = React.useRef(false);
6689
6686
  var visibleRef = React.useRef(visible);
6690
6687
  // this state variable is used for layer components that provide a paint attribute
6691
- var _s = React.useState(((_b = layerComponent === null || layerComponent === void 0 ? void 0 : layerComponent.props) === null || _b === void 0 ? void 0 : _b.paint) ||
6692
- getDefaultPaintPropsByType(((_c = layerComponent === null || layerComponent === void 0 ? void 0 : layerComponent.props) === null || _c === void 0 ? void 0 : _c.type) || getDefaulLayerTypeByGeometry(layerComponent.props.geojson))), paintProps = _s[0], setPaintProps = _s[1];
6688
+ var _u = React.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) ||
6689
+ 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];
6693
6690
  var _visible = React.useMemo(function () {
6694
6691
  if (!visible) {
6695
6692
  return false;
@@ -6729,8 +6726,9 @@ function LayerListItem(_a) {
6729
6726
  if (JSON.stringify(paintProps) === JSON.stringify((_b = layerComponent.props) === null || _b === void 0 ? void 0 : _b.paint))
6730
6727
  return;
6731
6728
  setLayerState(__assign(__assign({}, layerComponent.props), { paint: paintProps }));
6732
- }, [paintProps, setLayerState, (_d = layerComponent.props) === null || _d === void 0 ? void 0 : _d.paint]);
6729
+ }, [paintProps, setLayerState, (_f = layerComponent.props) === null || _f === void 0 ? void 0 : _f.paint]);
6733
6730
  var _layerComponent = React.useMemo(function () {
6731
+ var _a;
6734
6732
  if (layerComponent && type === 'layer') {
6735
6733
  switch (layerComponent.type.name) {
6736
6734
  case 'MlWmsLayer':
@@ -6739,13 +6737,16 @@ function LayerListItem(_a) {
6739
6737
  return React__default["default"].cloneElement(layerComponent, __assign({}, layerComponent === null || layerComponent === void 0 ? void 0 : layerComponent.props));
6740
6738
  default:
6741
6739
  case 'MlGeoJsonLayer':
6742
- return React__default["default"].cloneElement(layerComponent, __assign({ layout: {
6740
+ return React__default["default"].cloneElement(layerComponent, {
6741
+ layout: {
6743
6742
  visibility: _visible ? 'visible' : 'none',
6744
- } }, (setLayerState ? {} : { paint: paintProps })));
6743
+ },
6744
+ options: __assign(__assign({}, (_a = layerComponent === null || layerComponent === void 0 ? void 0 : layerComponent.props) === null || _a === void 0 ? void 0 : _a.options), (setLayerState ? {} : { paint: paintProps }))
6745
+ });
6745
6746
  }
6746
6747
  }
6747
6748
  return React__default["default"].createElement(React__default["default"].Fragment, null);
6748
- }, [type, layerComponent, paintProps, _visible, (_e = layerComponent === null || layerComponent === void 0 ? void 0 : layerComponent.props) === null || _e === void 0 ? void 0 : _e.layers, setLayerState]);
6749
+ }, [type, layerComponent, paintProps, _visible, (_g = layerComponent === null || layerComponent === void 0 ? void 0 : layerComponent.props) === null || _g === void 0 ? void 0 : _g.layers, setLayerState]);
6749
6750
  var layerType = React.useMemo(function () {
6750
6751
  if (layerComponent && type === 'layer') {
6751
6752
  if (layerComponent.props.type) {
@@ -6757,7 +6758,7 @@ function LayerListItem(_a) {
6757
6758
  }
6758
6759
  return undefined;
6759
6760
  }, [layerComponent]);
6760
- var listContent = (React__default["default"].createElement(ListItemStyled, { sx: __assign({}, props.listItemSx), secondaryAction: configurable && ((_f = Object.keys(paintProps)) === null || _f === void 0 ? void 0 : _f.length) > 0 ? (React__default["default"].createElement(React__default["default"].Fragment, null, props === null || props === void 0 ? void 0 :
6761
+ var listContent = (React__default["default"].createElement(ListItemStyled, { sx: __assign({}, props.listItemSx), secondaryAction: configurable && ((_h = Object.keys(paintProps)) === null || _h === void 0 ? void 0 : _h.length) > 0 ? (React__default["default"].createElement(React__default["default"].Fragment, null, props === null || props === void 0 ? void 0 :
6761
6762
  props.buttons,
6762
6763
  React__default["default"].createElement(TuneIconButton, { edge: 'end', "aria-label": "settings", onClick: function () {
6763
6764
  setPaintPropsFormVisible(function (current) {
@@ -6771,10 +6772,10 @@ function LayerListItem(_a) {
6771
6772
  } })),
6772
6773
  React__default["default"].createElement(material.ListItemText, { variant: "layerlist", primary: name, secondary: description, primaryTypographyProps: { overflow: 'hidden' } })));
6773
6774
  return (React__default["default"].createElement(React__default["default"].Fragment, null,
6774
- props.sortable && props.layerId && !((_g = layerComponent === null || layerComponent === void 0 ? void 0 : layerComponent.props) === null || _g === void 0 ? void 0 : _g.layers) && (React__default["default"].createElement(SortableContainer, { layerId: props.layerId }, listContent)),
6775
- !props.sortable && !((_h = layerComponent === null || layerComponent === void 0 ? void 0 : layerComponent.props) === null || _h === void 0 ? void 0 : _h.layers) && (listContent),
6775
+ props.sortable && props.layerId && !((_j = layerComponent === null || layerComponent === void 0 ? void 0 : layerComponent.props) === null || _j === void 0 ? void 0 : _j.layers) && (React__default["default"].createElement(SortableContainer, { layerId: props.layerId }, listContent)),
6776
+ !props.sortable && !((_k = layerComponent === null || layerComponent === void 0 ? void 0 : layerComponent.props) === null || _k === void 0 ? void 0 : _k.layers) && (listContent),
6776
6777
  _layerComponent,
6777
- !((_j = layerComponent === null || layerComponent === void 0 ? void 0 : layerComponent.props) === null || _j === void 0 ? void 0 : _j.layers) &&
6778
+ !((_l = layerComponent === null || layerComponent === void 0 ? void 0 : layerComponent.props) === null || _l === void 0 ? void 0 : _l.layers) &&
6778
6779
  Object.keys(paintProps).length > 0 &&
6779
6780
  configurable &&
6780
6781
  paintPropsFormVisible && (React__default["default"].createElement(React__default["default"].Fragment, null,
@@ -6795,7 +6796,7 @@ function LayerListItem(_a) {
6795
6796
  setShowDeletionConfirmationDialog(false);
6796
6797
  }, title: "Delete layer", text: "Are you sure you want to delete this layer?" })))),
6797
6798
  React__default["default"].createElement(LayerPropertyForm, { paintProps: paintProps, setPaintProps: setPaintProps, layerType: layerType }))),
6798
- ((_k = layerComponent === null || layerComponent === void 0 ? void 0 : layerComponent.props) === null || _k === void 0 ? void 0 : _k.layers) && (React__default["default"].createElement(LayerListFolder, { visible: localVisible, setVisible: setLocalVisible, name: name }, (_o = (_m = (_l = layerComponent === null || layerComponent === void 0 ? void 0 : layerComponent.props) === null || _l === void 0 ? void 0 : _l.layers) === null || _m === void 0 ? void 0 : _m.map) === null || _o === void 0 ? void 0 : _o.call(_m, function (_el, idx) { return (React__default["default"].createElement(LayerListItemVectorLayer, { vtProps: layerComponent === null || layerComponent === void 0 ? void 0 : layerComponent.props, setVtProps: setLayerState, id: '' + idx, key: '' + idx, visibleMaster: _visible })); })))));
6799
+ ((_m = layerComponent === null || layerComponent === void 0 ? void 0 : layerComponent.props) === null || _m === void 0 ? void 0 : _m.layers) && (React__default["default"].createElement(LayerListFolder, { visible: localVisible, setVisible: setLocalVisible, name: name }, (_q = (_p = (_o = layerComponent === null || layerComponent === void 0 ? void 0 : layerComponent.props) === null || _o === void 0 ? void 0 : _o.layers) === null || _p === void 0 ? void 0 : _p.map) === null || _q === void 0 ? void 0 : _q.call(_p, function (_el, idx) { return (React__default["default"].createElement(LayerListItemVectorLayer, { vtProps: layerComponent === null || layerComponent === void 0 ? void 0 : layerComponent.props, setVtProps: setLayerState, id: '' + idx, key: '' + idx, visibleMaster: _visible })); })))));
6799
6800
  }
6800
6801
  LayerListItem.defaultProps = {
6801
6802
  type: 'layer',
@@ -7201,170 +7202,454 @@ useAddProtocol.defaultProps = {
7201
7202
  mapId: undefined,
7202
7203
  };
7203
7204
 
7204
- var SimpleDataContext = /*#__PURE__*/React__default["default"].createContext({});
7205
- var SimpleDataContextProvider = SimpleDataContext.Provider;
7206
-
7207
- var SimpleDataProvider = function SimpleDataProvider(props) {
7208
- var _useState = React.useState(null),
7209
- _useState2 = _slicedToArray(_useState, 2),
7210
- data = _useState2[0],
7211
- setData = _useState2[1];
7212
- React.useEffect(function () {
7213
- if (!props.url) return;
7214
- var data_promise = null;
7215
- if (props.format === "json") {
7216
- data_promise = d3__namespace.json(props.url);
7217
- } else if (props.format === "csv") {
7218
- data_promise = d3__namespace.csv(props.url);
7219
- } else if (props.format === "xml") {
7220
- data_promise = d3__namespace.xml(props.url);
7221
- }
7222
- if (data_promise) {
7223
- data_promise.then(function (received_data) {
7224
- if (props.format === "xml") {
7225
- if (props.nodeType) {
7226
- var dataTmp = [];
7227
- received_data.querySelectorAll(props.nodeType).forEach(function (el) {
7228
- dataTmp.push(props.formatData(el));
7229
- });
7230
- setData(dataTmp);
7231
- }
7232
- } else {
7233
- if (props.data_property) {
7234
- received_data = received_data[props.data_property];
7235
- }
7236
- if (typeof props.formatData === "function") {
7237
- setData(received_data.map(props.formatData));
7238
- } else {
7239
- setData(received_data);
7240
- }
7241
- }
7242
- if (typeof props.onData === "function") {
7243
- props.onData();
7244
- }
7245
- });
7246
- }
7247
- }, [props.url, props]);
7248
- var value = {
7249
- data: data,
7250
- setData: setData
7251
- };
7252
- return /*#__PURE__*/React__default["default"].createElement(SimpleDataContextProvider, {
7253
- value: value
7254
- }, props.children);
7255
- };
7256
- SimpleDataProvider.propTypes = {
7257
- children: PropTypes__default["default"].node.isRequired
7258
- };
7205
+ function protocolPathParser(url) {
7206
+ var test = url.split('?');
7207
+ var urlParts = test[0].split('://');
7208
+ var protocolId = urlParts[0];
7209
+ var csvUrl = urlParts.length > 2 ? urlParts[1] + '://' + urlParts[2] : urlParts[1];
7210
+ var csvParts = csvUrl.split('/');
7211
+ var filename = csvParts.join('/');
7212
+ var optionsString = decodeURI(test[1]);
7213
+ var options = Object.fromEntries(new URLSearchParams(optionsString));
7214
+ return {
7215
+ protocolId: protocolId,
7216
+ filename: filename,
7217
+ options: options,
7218
+ };
7219
+ }
7259
7220
 
7260
- var ListStyled = material.styled(material.List)({
7261
- marginTop: '15px',
7262
- });
7263
- function LayerList(props) {
7264
- return React__default["default"].createElement(ListStyled, null, props === null || props === void 0 ? void 0 : props.children);
7221
+ function getProtocolData(path) {
7222
+ return __awaiter(this, void 0, void 0, function () {
7223
+ var response, rawData, error_1;
7224
+ return __generator(this, function (_a) {
7225
+ switch (_a.label) {
7226
+ case 0:
7227
+ _a.trys.push([0, 3, , 4]);
7228
+ return [4 /*yield*/, fetch(path)];
7229
+ case 1:
7230
+ response = _a.sent();
7231
+ return [4 /*yield*/, response.text()];
7232
+ case 2:
7233
+ rawData = _a.sent();
7234
+ return [2 /*return*/, rawData];
7235
+ case 3:
7236
+ error_1 = _a.sent();
7237
+ console.error('File could not be loaded: ', error_1);
7238
+ return [2 /*return*/, error_1];
7239
+ case 4: return [2 /*return*/];
7240
+ }
7241
+ });
7242
+ });
7265
7243
  }
7266
7244
 
7267
- var IconButtonStyled = material.styled(material.IconButton)({
7268
- padding: '4px',
7269
- marginTop: '-3px',
7270
- background: 'none',
7271
- '&:hover': {
7272
- background: 'none',
7273
- },
7274
- });
7275
- function LayerListItemFactory(props) {
7276
- var _a, _b;
7277
- var layerContext = useLayerContext();
7278
- var mapHook = useMap({ mapId: undefined });
7279
- //useCallback Hook
7280
- function fitLayer(layer) {
7281
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
7282
- var layerSource = layer.id && ((_b = (_a = mapHook.map) === null || _a === void 0 ? void 0 : _a.getLayer(layer.id)) === null || _b === void 0 ? void 0 : _b.source)
7283
- ? (_c = mapHook.map) === null || _c === void 0 ? void 0 : _c.getLayer(layer.id).source
7284
- : undefined;
7285
- var _bbox = null;
7286
- switch (layer.type) {
7287
- case 'geojson':
7288
- if ((_d = layer.config) === null || _d === void 0 ? void 0 : _d.geojson) {
7289
- (_e = mapHook.map) === null || _e === void 0 ? void 0 : _e.fitBounds(turf.bbox((_f = layer.config) === null || _f === void 0 ? void 0 : _f.geojson), props.fitBoundsOptions);
7290
- }
7291
- else {
7292
- if (!layerSource) {
7293
- return;
7294
- }
7295
- var _geojson = {
7296
- type: 'FeatureCollection',
7297
- features: (_g = mapHook.map) === null || _g === void 0 ? void 0 : _g.querySourceFeatures(layerSource),
7298
- };
7299
- if (_geojson.features.length === 0) {
7300
- (_h = mapHook.map) === null || _h === void 0 ? void 0 : _h.zoomTo(1);
7301
- _geojson.features = (_j = mapHook.map) === null || _j === void 0 ? void 0 : _j.querySourceFeatures(layerSource);
7302
- }
7303
- _bbox = turf.bbox(_geojson);
7304
- }
7305
- break;
7306
- case 'vt':
7307
- console.log('vt');
7308
- break;
7309
- case 'wms':
7310
- _bbox = (_o = (_m = (_l = (_k = layer === null || layer === void 0 ? void 0 : layer.config) === null || _k === void 0 ? void 0 : _k.config) === null || _l === void 0 ? void 0 : _l.layers) === null || _m === void 0 ? void 0 : _m[0]) === null || _o === void 0 ? void 0 : _o.EX_GeographicBoundingBox;
7311
- break;
7312
- default:
7313
- return;
7245
+ function convertCsv(filename, options) {
7246
+ return __awaiter(this, void 0, void 0, function () {
7247
+ var geojson;
7248
+ return __generator(this, function (_a) {
7249
+ switch (_a.label) {
7250
+ case 0: return [4 /*yield*/, new Promise(function (resolve, reject) {
7251
+ var useOptions = options || {};
7252
+ var extension = filename.substring(filename.length - 3);
7253
+ if (extension === 'tsv') {
7254
+ options.delimiter = '\t';
7255
+ }
7256
+ getProtocolData(filename).then(function (rawData) {
7257
+ // Use the csv2geojson library to convert the CSV to GeoJSON
7258
+ csv2geojson__namespace.csv2geojson(rawData, useOptions, function (err, data) {
7259
+ if (err) {
7260
+ reject(err);
7261
+ }
7262
+ else {
7263
+ resolve(data);
7264
+ }
7265
+ });
7266
+ });
7267
+ })];
7268
+ case 1:
7269
+ geojson = _a.sent();
7270
+ return [2 /*return*/, geojson];
7271
+ }
7272
+ });
7273
+ });
7274
+ }
7275
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
7276
+ var CSVProtocolHandler = function (params, callback) {
7277
+ var parsedParams = protocolPathParser(params.url);
7278
+ convertCsv(parsedParams.filename, parsedParams.options).then(function (data) {
7279
+ if (data !== undefined) {
7280
+ callback(null, data, null, null);
7314
7281
  }
7315
- if (_bbox) {
7316
- (_p = mapHook.map) === null || _p === void 0 ? void 0 : _p.fitBounds(_bbox, props.fitBoundsOptions);
7282
+ else {
7283
+ callback(new Error('CSV not found'));
7317
7284
  }
7318
- }
7319
- var orderLayers = React.useMemo(function () {
7320
- var layerIds = __spreadArray(__spreadArray([
7321
- 'order-background'
7322
- ], __spreadArray([], layerContext.layers, true).map(function (_el, idx) { return 'content_order_' + idx; }), true), [
7323
- 'order-labels',
7324
- ], false);
7325
- return layerIds.reverse();
7326
- }, [layerContext.layers]);
7327
- var layers = React.useMemo(function () {
7328
- if (props.layers)
7329
- return props.layers;
7330
- if (layerContext === null || layerContext === void 0 ? void 0 : layerContext.layers)
7331
- return layerContext.layers;
7332
- return [];
7333
- }, [props.layers, layerContext.layers]);
7334
- var setLayers = React.useMemo(function () {
7335
- if (props.setLayers)
7336
- return props.setLayers;
7337
- return layerContext.setLayers;
7338
- }, [props.setLayers, layerContext.setLayers]);
7339
- var pointerSensor = core.useSensor(core.PointerSensor, {
7340
- activationConstraint: {
7341
- distance: 5,
7342
- },
7343
7285
  });
7344
- var mouseSensor = core.useSensor(core.MouseSensor, {
7345
- activationConstraint: {
7346
- distance: 5,
7347
- },
7348
- });
7349
- var sensors = core.useSensors(mouseSensor, pointerSensor);
7350
- function dragEnd(event) {
7351
- var _a, _b, _c;
7352
- var dragLayerId = event.active.id;
7353
- var dragLayerNewPosition = (_c = (_b = (_a = event.over) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.current) === null || _c === void 0 ? void 0 : _c.sortable.index;
7354
- layerContext.moveLayer(String(dragLayerId), function () { return dragLayerNewPosition; });
7355
- }
7356
- return (React__default["default"].createElement(React__default["default"].Fragment, null,
7357
- React__default["default"].createElement(MlOrderLayers, { layerIds: orderLayers, insertBeforeLayer: "_background" }),
7358
- ((_a = layerContext === null || layerContext === void 0 ? void 0 : layerContext.symbolLayers) === null || _a === void 0 ? void 0 : _a.length) > 0 && (React__default["default"].createElement(LayerListItem, { key: 'background_labels', layerComponent: React__default["default"].createElement(MlVectorTileLayer, __assign({}, layerContext.vtLayerConfig, { layers: layerContext.symbolLayers, mapId: props === null || props === void 0 ? void 0 : props.mapId, insertBeforeLayer: 'order-labels' })), setLayerState: function (state) {
7359
- return layerContext.setSymbolLayers(state === null || state === void 0 ? void 0 : state.layers);
7360
- }, visible: true, configurable: true, type: "layer", name: "Labels" })),
7361
- React__default["default"].createElement(core.DndContext, { collisionDetection: core.closestCenter, sensors: sensors, onDragEnd: function (event) { return dragEnd(event); }, modifiers: [modifiers.restrictToVerticalAxis] },
7362
- React__default["default"].createElement(sortable.SortableContext, { items: layers, strategy: sortable.verticalListSortingStrategy },
7363
- __spreadArray([], layers, true).map(function (layer, idx) {
7364
- var _a, _b, _c, _d, _e;
7365
- if (!(layer === null || layer === void 0 ? void 0 : layer.id))
7366
- return null;
7367
- switch (layer.type) {
7286
+ return { cancel: function () { } };
7287
+ };
7288
+
7289
+ function convertOSM(params) {
7290
+ return __awaiter(this, void 0, void 0, function () {
7291
+ var options, geojson;
7292
+ return __generator(this, function (_a) {
7293
+ switch (_a.label) {
7294
+ case 0:
7295
+ options = params.options || {};
7296
+ return [4 /*yield*/, new Promise(function (resolve, reject) {
7297
+ getProtocolData(params.filename).then(function (rawData) {
7298
+ var newData = osm2geojson__default["default"](rawData, options);
7299
+ if (!newData) {
7300
+ reject('Conversion failed');
7301
+ }
7302
+ else {
7303
+ resolve(newData);
7304
+ }
7305
+ });
7306
+ })];
7307
+ case 1:
7308
+ geojson = _a.sent();
7309
+ return [2 /*return*/, geojson];
7310
+ }
7311
+ });
7312
+ });
7313
+ }
7314
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
7315
+ var OSMProtocolHandler = function (params, callback) {
7316
+ var parsedParams = protocolPathParser(params.url);
7317
+ convertOSM(parsedParams).then(function (data) {
7318
+ if (data !== undefined) {
7319
+ callback(null, data, null, null);
7320
+ }
7321
+ else {
7322
+ callback(new Error('OSM File not found'));
7323
+ }
7324
+ });
7325
+ return { cancel: function () { } };
7326
+ };
7327
+
7328
+ function reduceFeatures(geojson) {
7329
+ var newFeatures = [];
7330
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
7331
+ geojson.features.forEach(function (e) {
7332
+ if (!e.features) {
7333
+ newFeatures.push({
7334
+ type: e.type,
7335
+ geometry: e.geometry,
7336
+ properties: e.properties,
7337
+ });
7338
+ }
7339
+ else {
7340
+ e.features.forEach(function (el) {
7341
+ newFeatures.push({ type: el.type, geometry: el.geometry, properties: el.properties });
7342
+ });
7343
+ }
7344
+ });
7345
+ return newFeatures;
7346
+ }
7347
+ function convertTopojson(params) {
7348
+ return __awaiter(this, void 0, void 0, function () {
7349
+ var geojson;
7350
+ return __generator(this, function (_a) {
7351
+ switch (_a.label) {
7352
+ case 0: return [4 /*yield*/, new Promise(function (resolve) {
7353
+ var topoJsonData = {
7354
+ type: 'Topology',
7355
+ objects: { key: '' },
7356
+ arcs: []
7357
+ };
7358
+ getProtocolData(params.filename).then(function (rawData) {
7359
+ try {
7360
+ topoJsonData = JSON.parse(rawData);
7361
+ }
7362
+ catch (e) {
7363
+ throw 'Invalid TopoJson';
7364
+ }
7365
+ // Convert the data
7366
+ var result = {
7367
+ type: 'FeatureCollection',
7368
+ features: [],
7369
+ };
7370
+ if (topoJsonData.type === 'Topology' && topoJsonData.objects !== undefined) {
7371
+ // add the "fromObject" property in each topojson feature
7372
+ Object.keys(topoJsonData.objects).map(function (key) {
7373
+ var _a, _b, _c, _d, _e, _f, _g;
7374
+ if (((_a = topoJsonData.objects) === null || _a === void 0 ? void 0 : _a[key].type) === 'GeometryCollection') {
7375
+ (_c = (_b = topoJsonData.objects) === null || _b === void 0 ? void 0 : _b[key].geometries) === null || _c === void 0 ? void 0 : _c.forEach(function (e) { return (e.properties = __assign({ fromObject: key }, e.properties)); });
7376
+ }
7377
+ else if (((_d = topoJsonData === null || topoJsonData === void 0 ? void 0 : topoJsonData.objects) === null || _d === void 0 ? void 0 : _d[key]) &&
7378
+ ((_f = (_e = topoJsonData === null || topoJsonData === void 0 ? void 0 : topoJsonData.objects) === null || _e === void 0 ? void 0 : _e[key]) === null || _f === void 0 ? void 0 : _f.type) !== 'GeometryCollection') {
7379
+ topoJsonData.objects[key].properties = __assign({ fromObject: key }, (_g = topoJsonData.objects) === null || _g === void 0 ? void 0 : _g[key].properties);
7380
+ }
7381
+ });
7382
+ //convert the data into a geoJson object
7383
+ result = {
7384
+ type: 'FeatureCollection',
7385
+ features: Object.keys(topoJsonData.objects).map(function (key) {
7386
+ return topojsonClient.feature(topoJsonData, key);
7387
+ }),
7388
+ };
7389
+ result.features = reduceFeatures(result);
7390
+ }
7391
+ resolve(result);
7392
+ });
7393
+ })];
7394
+ case 1:
7395
+ geojson = _a.sent();
7396
+ return [2 /*return*/, geojson];
7397
+ }
7398
+ });
7399
+ });
7400
+ }
7401
+ var TopojsonProtocolHandler = function (params, callback) {
7402
+ var parsedParams = protocolPathParser(params.url);
7403
+ convertTopojson(parsedParams).then(function (data) {
7404
+ if (data !== undefined) {
7405
+ callback(null, data, null, null);
7406
+ }
7407
+ else {
7408
+ callback(new Error('Topojson not found'));
7409
+ }
7410
+ });
7411
+ return { cancel: function () { } };
7412
+ };
7413
+
7414
+ function convertXML(params) {
7415
+ return __awaiter(this, void 0, void 0, function () {
7416
+ var geojson;
7417
+ return __generator(this, function (_a) {
7418
+ switch (_a.label) {
7419
+ case 0: return [4 /*yield*/, new Promise(function (resolve, reject) {
7420
+ getProtocolData(params.filename).then(function (rawData) {
7421
+ var newData = function () {
7422
+ // use an extern converter for tcx files
7423
+ if (params.protocolId === 'tcx') {
7424
+ return externParser__namespace[params.protocolId](new DOMParser().parseFromString(rawData, 'text/xml'));
7425
+ // use the projects gpxConverter function for gpx and kml files
7426
+ }
7427
+ else {
7428
+ return toGeoJSON[params.protocolId](new DOMParser().parseFromString(rawData, 'text/xml'));
7429
+ }
7430
+ };
7431
+ if (!newData()) {
7432
+ reject('Conversion failed');
7433
+ }
7434
+ else {
7435
+ resolve(newData());
7436
+ }
7437
+ });
7438
+ })];
7439
+ case 1:
7440
+ geojson = _a.sent();
7441
+ return [2 /*return*/, geojson];
7442
+ }
7443
+ });
7444
+ });
7445
+ }
7446
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
7447
+ var XMLProtocolHandler = function (params, callback) {
7448
+ var parsedParams = protocolPathParser(params.url);
7449
+ convertXML(parsedParams).then(function (data) {
7450
+ if (data !== undefined) {
7451
+ callback(null, data, null, null);
7452
+ }
7453
+ else {
7454
+ callback(new Error('XML not found'));
7455
+ }
7456
+ });
7457
+ return { cancel: function () { } };
7458
+ };
7459
+
7460
+ /**
7461
+ *
7462
+ */
7463
+ var useAddImage = function (props) {
7464
+ var mapHook = useMap({
7465
+ mapId: undefined,
7466
+ });
7467
+ var initializedRef = React.useRef(false);
7468
+ React.useEffect(function () {
7469
+ var _a;
7470
+ if (!mapHook.map || initializedRef.current)
7471
+ return;
7472
+ (_a = mapHook.map) === null || _a === void 0 ? void 0 : _a.loadImage(props.imagePath, function (error, image) {
7473
+ var _a;
7474
+ if (error)
7475
+ throw error;
7476
+ (_a = mapHook.map) === null || _a === void 0 ? void 0 : _a.addImage(props.imageId, image);
7477
+ return function () {
7478
+ var _a;
7479
+ (_a = mapHook.map) === null || _a === void 0 ? void 0 : _a.removeImage(props.imageId);
7480
+ };
7481
+ });
7482
+ }, [mapHook.map, props]);
7483
+ return;
7484
+ };
7485
+ useAddImage.defaultProps = {
7486
+ mapId: undefined,
7487
+ };
7488
+
7489
+ var SimpleDataContext = /*#__PURE__*/React__default["default"].createContext({});
7490
+ var SimpleDataContextProvider = SimpleDataContext.Provider;
7491
+
7492
+ var SimpleDataProvider = function SimpleDataProvider(props) {
7493
+ var _useState = React.useState(null),
7494
+ _useState2 = _slicedToArray(_useState, 2),
7495
+ data = _useState2[0],
7496
+ setData = _useState2[1];
7497
+ React.useEffect(function () {
7498
+ if (!props.url) return;
7499
+ var data_promise = null;
7500
+ if (props.format === "json") {
7501
+ data_promise = d3__namespace.json(props.url);
7502
+ } else if (props.format === "csv") {
7503
+ data_promise = d3__namespace.csv(props.url);
7504
+ } else if (props.format === "xml") {
7505
+ data_promise = d3__namespace.xml(props.url);
7506
+ }
7507
+ if (data_promise) {
7508
+ data_promise.then(function (received_data) {
7509
+ if (props.format === "xml") {
7510
+ if (props.nodeType) {
7511
+ var dataTmp = [];
7512
+ received_data.querySelectorAll(props.nodeType).forEach(function (el) {
7513
+ dataTmp.push(props.formatData(el));
7514
+ });
7515
+ setData(dataTmp);
7516
+ }
7517
+ } else {
7518
+ if (props.data_property) {
7519
+ received_data = received_data[props.data_property];
7520
+ }
7521
+ if (typeof props.formatData === "function") {
7522
+ setData(received_data.map(props.formatData));
7523
+ } else {
7524
+ setData(received_data);
7525
+ }
7526
+ }
7527
+ if (typeof props.onData === "function") {
7528
+ props.onData();
7529
+ }
7530
+ });
7531
+ }
7532
+ }, [props.url, props]);
7533
+ var value = {
7534
+ data: data,
7535
+ setData: setData
7536
+ };
7537
+ return /*#__PURE__*/React__default["default"].createElement(SimpleDataContextProvider, {
7538
+ value: value
7539
+ }, props.children);
7540
+ };
7541
+ SimpleDataProvider.propTypes = {
7542
+ children: PropTypes__default["default"].node.isRequired
7543
+ };
7544
+
7545
+ var ListStyled = material.styled(material.List)({
7546
+ marginTop: '15px',
7547
+ });
7548
+ function LayerList(props) {
7549
+ return React__default["default"].createElement(ListStyled, null, props === null || props === void 0 ? void 0 : props.children);
7550
+ }
7551
+
7552
+ var IconButtonStyled = material.styled(material.IconButton)({
7553
+ padding: '4px',
7554
+ marginTop: '-3px',
7555
+ background: 'none',
7556
+ '&:hover': {
7557
+ background: 'none',
7558
+ },
7559
+ });
7560
+ function LayerListItemFactory(props) {
7561
+ var _a, _b;
7562
+ var layerContext = useLayerContext();
7563
+ var mapHook = useMap({ mapId: undefined });
7564
+ //useCallback Hook
7565
+ function fitLayer(layer) {
7566
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
7567
+ var layerSource = layer.id && ((_b = (_a = mapHook.map) === null || _a === void 0 ? void 0 : _a.getLayer(layer.id)) === null || _b === void 0 ? void 0 : _b.source)
7568
+ ? (_c = mapHook.map) === null || _c === void 0 ? void 0 : _c.getLayer(layer.id).source
7569
+ : undefined;
7570
+ var _bbox = null;
7571
+ switch (layer.type) {
7572
+ case 'geojson':
7573
+ if ((_d = layer.config) === null || _d === void 0 ? void 0 : _d.geojson) {
7574
+ (_e = mapHook.map) === null || _e === void 0 ? void 0 : _e.fitBounds(turf.bbox((_f = layer.config) === null || _f === void 0 ? void 0 : _f.geojson), props.fitBoundsOptions);
7575
+ }
7576
+ else {
7577
+ if (!layerSource) {
7578
+ return;
7579
+ }
7580
+ var _geojson = {
7581
+ type: 'FeatureCollection',
7582
+ features: (_g = mapHook.map) === null || _g === void 0 ? void 0 : _g.querySourceFeatures(layerSource),
7583
+ };
7584
+ if (_geojson.features.length === 0) {
7585
+ (_h = mapHook.map) === null || _h === void 0 ? void 0 : _h.zoomTo(1);
7586
+ _geojson.features = (_j = mapHook.map) === null || _j === void 0 ? void 0 : _j.querySourceFeatures(layerSource);
7587
+ }
7588
+ _bbox = turf.bbox(_geojson);
7589
+ }
7590
+ break;
7591
+ case 'vt':
7592
+ console.log('vt');
7593
+ break;
7594
+ case 'wms':
7595
+ _bbox = (_o = (_m = (_l = (_k = layer === null || layer === void 0 ? void 0 : layer.config) === null || _k === void 0 ? void 0 : _k.config) === null || _l === void 0 ? void 0 : _l.layers) === null || _m === void 0 ? void 0 : _m[0]) === null || _o === void 0 ? void 0 : _o.EX_GeographicBoundingBox;
7596
+ break;
7597
+ default:
7598
+ return;
7599
+ }
7600
+ if (_bbox) {
7601
+ (_p = mapHook.map) === null || _p === void 0 ? void 0 : _p.fitBounds(_bbox, props.fitBoundsOptions);
7602
+ }
7603
+ }
7604
+ var orderLayers = React.useMemo(function () {
7605
+ var layerIds = __spreadArray(__spreadArray([
7606
+ 'order-background'
7607
+ ], __spreadArray([], layerContext.layers, true).map(function (_el, idx) { return 'content_order_' + idx; }), true), [
7608
+ 'order-labels',
7609
+ ], false);
7610
+ return layerIds.reverse();
7611
+ }, [layerContext.layers]);
7612
+ var layers = React.useMemo(function () {
7613
+ if (props.layers)
7614
+ return props.layers;
7615
+ if (layerContext === null || layerContext === void 0 ? void 0 : layerContext.layers)
7616
+ return layerContext.layers;
7617
+ return [];
7618
+ }, [props.layers, layerContext.layers]);
7619
+ var setLayers = React.useMemo(function () {
7620
+ if (props.setLayers)
7621
+ return props.setLayers;
7622
+ return layerContext.setLayers;
7623
+ }, [props.setLayers, layerContext.setLayers]);
7624
+ var pointerSensor = core.useSensor(core.PointerSensor, {
7625
+ activationConstraint: {
7626
+ distance: 5,
7627
+ },
7628
+ });
7629
+ var mouseSensor = core.useSensor(core.MouseSensor, {
7630
+ activationConstraint: {
7631
+ distance: 5,
7632
+ },
7633
+ });
7634
+ var sensors = core.useSensors(mouseSensor, pointerSensor);
7635
+ function dragEnd(event) {
7636
+ var _a, _b, _c;
7637
+ var dragLayerId = event.active.id;
7638
+ var dragLayerNewPosition = (_c = (_b = (_a = event.over) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.current) === null || _c === void 0 ? void 0 : _c.sortable.index;
7639
+ layerContext.moveLayer(String(dragLayerId), function () { return dragLayerNewPosition; });
7640
+ }
7641
+ return (React__default["default"].createElement(React__default["default"].Fragment, null,
7642
+ React__default["default"].createElement(MlOrderLayers, { layerIds: orderLayers, insertBeforeLayer: "_background" }),
7643
+ ((_a = layerContext === null || layerContext === void 0 ? void 0 : layerContext.symbolLayers) === null || _a === void 0 ? void 0 : _a.length) > 0 && (React__default["default"].createElement(LayerListItem, { key: 'background_labels', layerComponent: React__default["default"].createElement(MlVectorTileLayer, __assign({}, layerContext.vtLayerConfig, { layers: layerContext.symbolLayers, mapId: props === null || props === void 0 ? void 0 : props.mapId, insertBeforeLayer: 'order-labels' })), setLayerState: function (state) {
7644
+ return layerContext.setSymbolLayers(state === null || state === void 0 ? void 0 : state.layers);
7645
+ }, visible: true, configurable: true, type: "layer", name: "Labels" })),
7646
+ React__default["default"].createElement(core.DndContext, { collisionDetection: core.closestCenter, sensors: sensors, onDragEnd: function (event) { return dragEnd(event); }, modifiers: [modifiers.restrictToVerticalAxis] },
7647
+ React__default["default"].createElement(sortable.SortableContext, { items: layers, strategy: sortable.verticalListSortingStrategy },
7648
+ __spreadArray([], layers, true).map(function (layer, idx) {
7649
+ var _a, _b, _c, _d, _e;
7650
+ if (!(layer === null || layer === void 0 ? void 0 : layer.id))
7651
+ return null;
7652
+ switch (layer.type) {
7368
7653
  case 'geojson':
7369
7654
  return (React__default["default"].createElement(LayerListItem, { key: layer.id, layerId: layer.id, sortable: props.sortable, name: (layer === null || layer === void 0 ? void 0 : layer.name) || ((_a = layer === null || layer === void 0 ? void 0 : layer.config) === null || _a === void 0 ? void 0 : _a.type) + ' layer' || 'unnamed layer', layerComponent: React__default["default"].createElement(MlGeoJsonLayer, __assign({}, layer.config, { mapId: props === null || props === void 0 ? void 0 : props.mapId, layerId: layer.id, insertBeforeLayer: 'content_order_' + (layers.length - 1 - idx) })), buttons: React__default["default"].createElement(React__default["default"].Fragment, null,
7370
7655
  React__default["default"].createElement(IconButtonStyled, { disabled: idx === layers.length - 1, onClick: function () {
@@ -7575,261 +7860,6 @@ function OsmOptionsFomular(props) {
7575
7860
  })))));
7576
7861
  }
7577
7862
 
7578
- function protocolPathParser(url) {
7579
- var test = url.split('?');
7580
- var urlParts = test[0].split('://');
7581
- var protocolId = urlParts[0];
7582
- var csvUrl = urlParts.length > 2 ? urlParts[1] + '://' + urlParts[2] : urlParts[1];
7583
- var csvParts = csvUrl.split('/');
7584
- var filename = csvParts.join('/');
7585
- var optionsString = decodeURI(test[1]);
7586
- var options = Object.fromEntries(new URLSearchParams(optionsString));
7587
- return {
7588
- protocolId: protocolId,
7589
- filename: filename,
7590
- options: options,
7591
- };
7592
- }
7593
-
7594
- function getProtocolData(path) {
7595
- return __awaiter(this, void 0, void 0, function () {
7596
- var response, rawData, error_1;
7597
- return __generator(this, function (_a) {
7598
- switch (_a.label) {
7599
- case 0:
7600
- _a.trys.push([0, 3, , 4]);
7601
- return [4 /*yield*/, fetch(path)];
7602
- case 1:
7603
- response = _a.sent();
7604
- return [4 /*yield*/, response.text()];
7605
- case 2:
7606
- rawData = _a.sent();
7607
- return [2 /*return*/, rawData];
7608
- case 3:
7609
- error_1 = _a.sent();
7610
- console.error('File could not be loaded: ', error_1);
7611
- return [2 /*return*/, error_1];
7612
- case 4: return [2 /*return*/];
7613
- }
7614
- });
7615
- });
7616
- }
7617
-
7618
- function convertCsv(filename, options) {
7619
- return __awaiter(this, void 0, void 0, function () {
7620
- var geojson;
7621
- return __generator(this, function (_a) {
7622
- switch (_a.label) {
7623
- case 0: return [4 /*yield*/, new Promise(function (resolve, reject) {
7624
- var useOptions = options || {};
7625
- var extension = filename.substring(filename.length - 3);
7626
- if (extension === 'tsv') {
7627
- options.delimiter = '\t';
7628
- }
7629
- getProtocolData(filename).then(function (rawData) {
7630
- // Use the csv2geojson library to convert the CSV to GeoJSON
7631
- csv2geojson__namespace.csv2geojson(rawData, useOptions, function (err, data) {
7632
- if (err) {
7633
- reject(err);
7634
- }
7635
- else {
7636
- resolve(data);
7637
- }
7638
- });
7639
- });
7640
- })];
7641
- case 1:
7642
- geojson = _a.sent();
7643
- return [2 /*return*/, geojson];
7644
- }
7645
- });
7646
- });
7647
- }
7648
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
7649
- var CSVProtocolHandler = function (params, callback) {
7650
- var parsedParams = protocolPathParser(params.url);
7651
- convertCsv(parsedParams.filename, parsedParams.options).then(function (data) {
7652
- if (data !== undefined) {
7653
- callback(null, data, null, null);
7654
- }
7655
- else {
7656
- callback(new Error('CSV not found'));
7657
- }
7658
- });
7659
- return { cancel: function () { } };
7660
- };
7661
-
7662
- function reduceFeatures(geojson) {
7663
- var newFeatures = [];
7664
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
7665
- geojson.features.forEach(function (e) {
7666
- if (!e.features) {
7667
- newFeatures.push({
7668
- type: e.type,
7669
- geometry: e.geometry,
7670
- properties: e.properties,
7671
- });
7672
- }
7673
- else {
7674
- e.features.forEach(function (el) {
7675
- newFeatures.push({ type: el.type, geometry: el.geometry, properties: el.properties });
7676
- });
7677
- }
7678
- });
7679
- return newFeatures;
7680
- }
7681
- function convertTopojson(params) {
7682
- return __awaiter(this, void 0, void 0, function () {
7683
- var geojson;
7684
- return __generator(this, function (_a) {
7685
- switch (_a.label) {
7686
- case 0: return [4 /*yield*/, new Promise(function (resolve) {
7687
- var topoJsonData = {
7688
- type: 'Topology',
7689
- objects: { key: '' },
7690
- arcs: []
7691
- };
7692
- getProtocolData(params.filename).then(function (rawData) {
7693
- try {
7694
- topoJsonData = JSON.parse(rawData);
7695
- }
7696
- catch (e) {
7697
- throw 'Invalid TopoJson';
7698
- }
7699
- // Convert the data
7700
- var result = {
7701
- type: 'FeatureCollection',
7702
- features: [],
7703
- };
7704
- if (topoJsonData.type === 'Topology' && topoJsonData.objects !== undefined) {
7705
- // add the "fromObject" property in each topojson feature
7706
- Object.keys(topoJsonData.objects).map(function (key) {
7707
- var _a, _b, _c, _d, _e, _f, _g;
7708
- if (((_a = topoJsonData.objects) === null || _a === void 0 ? void 0 : _a[key].type) === 'GeometryCollection') {
7709
- (_c = (_b = topoJsonData.objects) === null || _b === void 0 ? void 0 : _b[key].geometries) === null || _c === void 0 ? void 0 : _c.forEach(function (e) { return (e.properties = __assign({ fromObject: key }, e.properties)); });
7710
- }
7711
- else if (((_d = topoJsonData === null || topoJsonData === void 0 ? void 0 : topoJsonData.objects) === null || _d === void 0 ? void 0 : _d[key]) &&
7712
- ((_f = (_e = topoJsonData === null || topoJsonData === void 0 ? void 0 : topoJsonData.objects) === null || _e === void 0 ? void 0 : _e[key]) === null || _f === void 0 ? void 0 : _f.type) !== 'GeometryCollection') {
7713
- topoJsonData.objects[key].properties = __assign({ fromObject: key }, (_g = topoJsonData.objects) === null || _g === void 0 ? void 0 : _g[key].properties);
7714
- }
7715
- });
7716
- //convert the data into a geoJson object
7717
- result = {
7718
- type: 'FeatureCollection',
7719
- features: Object.keys(topoJsonData.objects).map(function (key) {
7720
- return topojsonClient.feature(topoJsonData, key);
7721
- }),
7722
- };
7723
- result.features = reduceFeatures(result);
7724
- }
7725
- resolve(result);
7726
- });
7727
- })];
7728
- case 1:
7729
- geojson = _a.sent();
7730
- return [2 /*return*/, geojson];
7731
- }
7732
- });
7733
- });
7734
- }
7735
- var TopojsonProtocolHandler = function (params, callback) {
7736
- var parsedParams = protocolPathParser(params.url);
7737
- convertTopojson(parsedParams).then(function (data) {
7738
- if (data !== undefined) {
7739
- callback(null, data, null, null);
7740
- }
7741
- else {
7742
- callback(new Error('Topojson not found'));
7743
- }
7744
- });
7745
- return { cancel: function () { } };
7746
- };
7747
-
7748
- function convertOSM(params) {
7749
- return __awaiter(this, void 0, void 0, function () {
7750
- var options, geojson;
7751
- return __generator(this, function (_a) {
7752
- switch (_a.label) {
7753
- case 0:
7754
- options = params.options || {};
7755
- return [4 /*yield*/, new Promise(function (resolve, reject) {
7756
- getProtocolData(params.filename).then(function (rawData) {
7757
- var newData = osm2geojson__default["default"](rawData, options);
7758
- if (!newData) {
7759
- reject('Conversion failed');
7760
- }
7761
- else {
7762
- resolve(newData);
7763
- }
7764
- });
7765
- })];
7766
- case 1:
7767
- geojson = _a.sent();
7768
- return [2 /*return*/, geojson];
7769
- }
7770
- });
7771
- });
7772
- }
7773
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
7774
- var OSMProtocolHandler = function (params, callback) {
7775
- var parsedParams = protocolPathParser(params.url);
7776
- convertOSM(parsedParams).then(function (data) {
7777
- if (data !== undefined) {
7778
- callback(null, data, null, null);
7779
- }
7780
- else {
7781
- callback(new Error('OSM File not found'));
7782
- }
7783
- });
7784
- return { cancel: function () { } };
7785
- };
7786
-
7787
- function convertXML(params) {
7788
- return __awaiter(this, void 0, void 0, function () {
7789
- var geojson;
7790
- return __generator(this, function (_a) {
7791
- switch (_a.label) {
7792
- case 0: return [4 /*yield*/, new Promise(function (resolve, reject) {
7793
- getProtocolData(params.filename).then(function (rawData) {
7794
- var newData = function () {
7795
- // use an extern converter for tcx files
7796
- if (params.protocolId === 'tcx') {
7797
- return externParser__namespace[params.protocolId](new DOMParser().parseFromString(rawData, 'text/xml'));
7798
- // use the projects gpxConverter function for gpx and kml files
7799
- }
7800
- else {
7801
- return toGeoJSON[params.protocolId](new DOMParser().parseFromString(rawData, 'text/xml'));
7802
- }
7803
- };
7804
- if (!newData()) {
7805
- reject('Conversion failed');
7806
- }
7807
- else {
7808
- resolve(newData());
7809
- }
7810
- });
7811
- })];
7812
- case 1:
7813
- geojson = _a.sent();
7814
- return [2 /*return*/, geojson];
7815
- }
7816
- });
7817
- });
7818
- }
7819
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
7820
- var XMLProtocolHandler = function (params, callback) {
7821
- var parsedParams = protocolPathParser(params.url);
7822
- convertXML(parsedParams).then(function (data) {
7823
- if (data !== undefined) {
7824
- callback(null, data, null, null);
7825
- }
7826
- else {
7827
- callback(new Error('XML not found'));
7828
- }
7829
- });
7830
- return { cancel: function () { } };
7831
- };
7832
-
7833
7863
  var handlers = {
7834
7864
  csv: CSVProtocolHandler,
7835
7865
  topojson: TopojsonProtocolHandler,
@@ -21130,6 +21160,7 @@ SpeedDial.defaultProps = {
21130
21160
 
21131
21161
  exports.AddLayerButton = AddLayerButton;
21132
21162
  exports.AddLayerPopup = AddLayerPopup;
21163
+ exports.CSVProtocolHandler = CSVProtocolHandler;
21133
21164
  exports.ColorPicker = PaintPropsColorPicker;
21134
21165
  exports.ConfirmDialog = ConfirmDialog;
21135
21166
  exports.GeoJsonContext = GeoJsonContext;
@@ -21183,6 +21214,7 @@ exports.MlWmsFeatureInfoPopup = MlWmsFeatureInfoPopup;
21183
21214
  exports.MlWmsLayer = MlWmsLayer;
21184
21215
  exports.MlWmsLoader = MlWmsLoader;
21185
21216
  exports.MonokaiStyle = MonokaiStyle;
21217
+ exports.OSMProtocolHandler = OSMProtocolHandler;
21186
21218
  exports.OceanicNextStyle = OceanicNextStyle;
21187
21219
  exports.PdfContext = PdfContext;
21188
21220
  exports.PdfForm = PdfForm;
@@ -21194,9 +21226,16 @@ exports.SimpleDataProvider = SimpleDataProvider;
21194
21226
  exports.SolarizedStyle = SolarizedStyle;
21195
21227
  exports.SpeedDial = SpeedDial;
21196
21228
  exports.TopToolbar = TopToolbar;
21229
+ exports.TopojsonProtocolHandler = TopojsonProtocolHandler;
21197
21230
  exports.UploadButton = UploadButton;
21198
21231
  exports.WmsLayerForm = WmsLayerForm;
21232
+ exports.XMLProtocolHandler = XMLProtocolHandler;
21233
+ exports.convertCsv = convertCsv;
21234
+ exports.convertOSM = convertOSM;
21235
+ exports.convertTopojson = convertTopojson;
21236
+ exports.convertXML = convertXML;
21199
21237
  exports.getTheme = getTheme;
21238
+ exports.useAddImage = useAddImage;
21200
21239
  exports.useAddProtocol = useAddProtocol;
21201
21240
  exports.useCameraFollowPath = useCameraFollowPath;
21202
21241
  exports.useExportMap = useExportMap;