@opengeoweb/webmap-react 13.2.1 → 14.0.1

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/index.esm.js CHANGED
@@ -1,4 +1,4 @@
1
- import { WMImageStore, WMInvalidDateValues, getCorrectWMSDimName, WMJSDimension, webmapUtils, WMLayer, LayerType, legendImageStore, WMImageEventType, getLegendGraphicURLForLayer, WEBMAP_NAMESPACE, WMProj4Defs, privateWebMapUtils, tilesettings } from '@opengeoweb/webmap';
1
+ import { WMImageStore, WMImageStoreLoadType, WMInvalidDateValues, getCorrectWMSDimName, WMJSDimension, webmapUtils, WMLayer, LayerType, legendImageStore, WMImageEventType, getLegendGraphicURLForLayer, WEBMAP_NAMESPACE, WMProj4Defs, privateWebMapUtils, tilesettings } from '@opengeoweb/webmap';
2
2
  export { WEBMAP_NAMESPACE, webmapTranslations } from '@opengeoweb/webmap';
3
3
  import * as React from 'react';
4
4
  import React__default, { createContext, useMemo, useRef, useState, useEffect, useCallback, useContext, useLayoutEffect } from 'react';
@@ -794,7 +794,8 @@ var WorkerQueue = /*#__PURE__*/function () {
794
794
  // eslint-disable-next-line no-param-reassign
795
795
  job.cancelled = true;
796
796
  });
797
- this.taskQueue = [];
797
+ this.taskQueue.length = 0;
798
+ this.tasksInProcess.length = 0;
798
799
  }
799
800
  }, {
800
801
  key: "addJobs",
@@ -818,8 +819,8 @@ var WorkerQueue = /*#__PURE__*/function () {
818
819
  }
819
820
  this.tasksInProcess.push(job);
820
821
  job.task().then(function (finalise) {
821
- if (!job.cancelled && finalise) {
822
- finalise();
822
+ if (finalise) {
823
+ finalise(job.cancelled);
823
824
  }
824
825
  })["catch"](function (e) {
825
826
  window.console.error(e);
@@ -897,7 +898,7 @@ var TimeAwareImageWrapper = /*#__PURE__*/function (_ImageWrapper) {
897
898
  key: "getWMSGetMapRequestURL",
898
899
  value: function getWMSGetMapRequestURL(extentToLoad, resolutionToLoad, __pixelRatio, projection, getMapUrl, params, layerName, styleName, dimProps) {
899
900
  var pixelRatio = 1; // TODO?
900
- if (!getMapUrl || !layerName) {
901
+ if (!getMapUrl || !layerName || !extentToLoad || (extentToLoad === null || extentToLoad === void 0 ? void 0 : extentToLoad.length) === 0) {
901
902
  return {
902
903
  src: '',
903
904
  extent: this.extent,
@@ -1007,7 +1008,7 @@ var TimeAwareImageWrapper = /*#__PURE__*/function (_ImageWrapper) {
1007
1008
  if (imageEl.hasError()) {
1008
1009
  this._rejectAll(imageEl.getSrc());
1009
1010
  } else {
1010
- this._resolveAll();
1011
+ this._resolveAll(imageEl);
1011
1012
  }
1012
1013
  return;
1013
1014
  }
@@ -1035,10 +1036,10 @@ var TimeAwareImageWrapper = /*#__PURE__*/function (_ImageWrapper) {
1035
1036
  }
1036
1037
  }, {
1037
1038
  key: "_resolveAll",
1038
- value: function _resolveAll() {
1039
+ value: function _resolveAll(image) {
1039
1040
  while (this._resolvers.length !== 0) {
1040
1041
  var resolve = this._resolvers.pop();
1041
- resolve && resolve.resolve();
1042
+ resolve && resolve.resolve(image);
1042
1043
  }
1043
1044
  }
1044
1045
  }, {
@@ -1078,6 +1079,7 @@ var TimeawareImageSource = /*#__PURE__*/function (_ImageSource) {
1078
1079
  var wmsUrl = _ref.wmsUrl,
1079
1080
  timeStampsToPrefetch = _ref.timeStampsToPrefetch,
1080
1081
  layerName = _ref.layerName,
1082
+ layerId = _ref.layerId,
1081
1083
  styleName = _ref.styleName,
1082
1084
  dimProps = _ref.dimProps,
1083
1085
  params = _ref.params,
@@ -1097,14 +1099,21 @@ var TimeawareImageSource = /*#__PURE__*/function (_ImageSource) {
1097
1099
  _this.hasImageLoadedForTimeValue = _this.hasImageLoadedForTimeValue.bind(_this);
1098
1100
  _this.setImageForTimeValue = _this.setImageForTimeValue.bind(_this);
1099
1101
  _this._conditionalPrefetch = _this._conditionalPrefetch.bind(_this);
1100
- _this.throttledPrefetch = throttle(_this._conditionalPrefetch, 1000, {
1101
- leading: false,
1102
+ // These throttle settings ensure that prefetching starts after 200ms of inactivity, but at the same time
1103
+ // if there is a continuous stream of changes (like when moving the map), it will still trigger at least every 2 seconds.
1104
+ // This ensures that prefetching also happens when the user is continuously interacting with the map, but at a throttled rate.
1105
+ _this.throttledPrefetch = throttle(throttle(_this._conditionalPrefetch, 2000, {
1106
+ leading: true,
1102
1107
  trailing: true
1108
+ }), 200, {
1109
+ leading: true,
1110
+ trailing: false
1103
1111
  });
1104
1112
  _this.throttledImageLoad = debounce(_this._loadImagery, 100, {
1105
1113
  leading: false,
1106
1114
  trailing: true
1107
1115
  });
1116
+ _this._layerId = layerId;
1108
1117
  _this.triggerPrefetch = _this.triggerPrefetch.bind(_this);
1109
1118
  _this._imWrapperEmptyButLoading = initImageWrapper();
1110
1119
  _this._imWrapperForOlSource = initImageWrapper();
@@ -1131,8 +1140,6 @@ var TimeawareImageSource = /*#__PURE__*/function (_ImageSource) {
1131
1140
  timeStampsToPrefetch: this._timeStampsToPrefetch,
1132
1141
  dimProperties: this._dimProperties
1133
1142
  };
1134
- // Clear old jobs
1135
- this._prefetchWorkers.clearJobs();
1136
1143
  this.prefetch(extent, resolution, pixelRatio, projection);
1137
1144
  }
1138
1145
  }
@@ -1140,11 +1147,18 @@ var TimeawareImageSource = /*#__PURE__*/function (_ImageSource) {
1140
1147
  key: "_loadImagery",
1141
1148
  value: function _loadImagery(dimProperties) {
1142
1149
  var _this2 = this;
1150
+ // Tell the imagestore that we are about to do a GetMap request
1151
+ openLayersGetMapImageStore.loadDuration.setLoadingStatusForId(WMImageStoreLoadType.GETMAP, this._layerId, 0, 1, true);
1143
1152
  // Load the newly requested image
1144
- this._imWrapperForOlSource.loadAndResolve(this._lastRequestedExtent, this._lastRequestedResolution, this._lastRequestedPixelRatio, this._lastRequestedProjection, this._wmsUrl, this._extraWMSParams, this._layerName, this._styleName, dimProperties ? _objectSpread2({}, dimProperties) : _objectSpread2({}, this._dimProperties))["catch"](function () {
1153
+ this._imWrapperForOlSource.loadAndResolve(this._lastRequestedExtent, this._lastRequestedResolution, this._lastRequestedPixelRatio, this._lastRequestedProjection, this._wmsUrl, this._extraWMSParams, this._layerName, this._styleName, dimProperties ? _objectSpread2({}, dimProperties) : _objectSpread2({}, this._dimProperties)).then(function (el) {
1154
+ // Tell the imagestore that GetMap request was finished.
1155
+ openLayersGetMapImageStore.loadDuration.setLoadDurationForId(_this2._layerId, el.getLoadDuration());
1156
+ })["catch"](function () {
1145
1157
  // TODO, enable error handling
1146
1158
  // console.error(e);
1147
1159
  })["finally"](function () {
1160
+ // Tell the imagestore that GetMap request was finished.
1161
+ openLayersGetMapImageStore.loadDuration.setLoadingStatusForId(WMImageStoreLoadType.GETMAP, _this2._layerId, 1, 1);
1148
1162
  _this2._loadedExtent = _this2._lastRequestedExtent;
1149
1163
  _this2._loadedResolution = _this2._lastRequestedResolution;
1150
1164
  _this2._loadedPixelRatio = _this2._lastRequestedPixelRatio;
@@ -1158,20 +1172,51 @@ var TimeawareImageSource = /*#__PURE__*/function (_ImageSource) {
1158
1172
  key: "prefetch",
1159
1173
  value: function prefetch(extent, resolution, pixelRatio, projection) {
1160
1174
  var _this3 = this;
1175
+ var dimensionsToPrefetchUnFiltered = this._timeStampsToPrefetch;
1176
+ // Only work on imagery that still needs to be loaded.
1177
+ var dimensionsToPrefetch = dimensionsToPrefetchUnFiltered.filter(function (dimValue) {
1178
+ var hasExactImage = _this3._imWrapperForOlSource.hasImage(extent, resolution, pixelRatio, projection, _this3._wmsUrl, _this3._extraWMSParams, _this3._layerName, _this3._styleName, _objectSpread2(_objectSpread2({}, _this3._dimProperties), {}, {
1179
+ TIME: dimValue
1180
+ }));
1181
+ return hasExactImage === false || !hasExactImage.isLoadedWithoutErrors;
1182
+ });
1183
+ if (dimensionsToPrefetch.length === 0) {
1184
+ return;
1185
+ }
1161
1186
  this._prefetchWorkers.clearJobs();
1162
- var dimensionsToPrefetch = this._timeStampsToPrefetch;
1163
1187
  var jobs = dimensionsToPrefetch.slice(0, MAX_NUMBER_TO_PREFETCH).map(function (dimValue) {
1164
1188
  return {
1165
1189
  dimValue: dimValue,
1166
1190
  cancelled: false,
1167
- task: function task() {
1168
- return _this3._imWrapperForPrefetch.loadAndResolve(extent, resolution, pixelRatio, projection, _this3._wmsUrl, _this3._extraWMSParams, _this3._layerName, _this3._styleName, _objectSpread2(_objectSpread2({}, _this3._dimProperties), {}, {
1169
- TIME: dimValue
1191
+ task: function () {
1192
+ var _task = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
1193
+ return _regeneratorRuntime().wrap(function _callee$(_context) {
1194
+ while (1) switch (_context.prev = _context.next) {
1195
+ case 0:
1196
+ _context.next = 2;
1197
+ return _this3._imWrapperForPrefetch.loadAndResolve(extent, resolution, pixelRatio, projection, _this3._wmsUrl, _this3._extraWMSParams, _this3._layerName, _this3._styleName, _objectSpread2(_objectSpread2({}, _this3._dimProperties), {}, {
1198
+ TIME: dimValue
1199
+ }))["catch"](function (e) {
1200
+ console.error(e);
1201
+ });
1202
+ case 2:
1203
+ return _context.abrupt("return", function (cancelled) {
1204
+ openLayersGetMapImageStore.loadDuration.setLoadingStatusForId(WMImageStoreLoadType.PREFETCH, _this3._layerId, dimensionsToPrefetch.length - _this3._prefetchWorkers.taskQueue.length, dimensionsToPrefetch.length);
1205
+ });
1206
+ case 3:
1207
+ case "end":
1208
+ return _context.stop();
1209
+ }
1210
+ }, _callee);
1170
1211
  }));
1171
- }
1212
+ function task() {
1213
+ return _task.apply(this, arguments);
1214
+ }
1215
+ return task;
1216
+ }()
1172
1217
  };
1173
1218
  });
1174
- (dimensionsToPrefetch === null || dimensionsToPrefetch === void 0 ? void 0 : dimensionsToPrefetch.length) > 0 && this._prefetchWorkers.addJobs(jobs);
1219
+ this._prefetchWorkers.addJobs(jobs);
1175
1220
  }
1176
1221
  }, {
1177
1222
  key: "triggerPrefetch",
@@ -1326,17 +1371,6 @@ var makeDimValuesToPrefetch = function makeDimValuesToPrefetch(wmTimeDim, stepsT
1326
1371
  var dimValuesToPrefetch = dimensionValuesToPrefetchCombined.map(function (timeStamp) {
1327
1372
  return wmTimeDim.getClosestValueForTime(timeStamp);
1328
1373
  });
1329
- // TODO: When animating with two maps, the not leading map does get the wrong prefetch values. Use the following to debug this
1330
- // if (dimensionValuesToPrefetch.length === 0) {
1331
- // console.warn(
1332
- // 'NOTHING TO PREFETCH',
1333
- // stepsToCheck.map((s) => {
1334
- // return new Date(s).toISOString();
1335
- // }),
1336
- // wmTimeDim.getFirstValue(),
1337
- // wmTimeDim.getLastValue(),
1338
- // );
1339
- // }
1340
1374
  return dimValuesToPrefetch;
1341
1375
  }
1342
1376
  }
@@ -1407,13 +1441,15 @@ var timeSpanToTimeList = function timeSpanToTimeList(timespan) {
1407
1441
  }
1408
1442
  if (numStepsToFetch > MAX_NUMBER_STEPS_IN_TIME_SLIDER_TO_PREFETCH) {
1409
1443
  var msg = "too many steps to prefetch: ".concat(numStepsToFetch);
1410
- throw new RangeError(msg);
1444
+ console.warn(msg);
1445
+ return [];
1411
1446
  }
1412
1447
  var stepsToCheck = range(timespan.start, timespan.end + timespan.step, timespan.step);
1413
1448
  // Find out which dimension time values are available for prefetching
1414
1449
  if (stepsToCheck.length > MAX_NUMBER_STEPS_IN_TIME_SLIDER_TO_PREFETCH) {
1415
1450
  var _msg = "too many steps to prefetch: ".concat(stepsToCheck.length);
1416
- throw new RangeError(_msg);
1451
+ console.warn(_msg);
1452
+ return [];
1417
1453
  }
1418
1454
  return stepsToCheck;
1419
1455
  }
@@ -1591,6 +1627,7 @@ var fetchEDRLayerCollectionCube = /*#__PURE__*/function () {
1591
1627
  var DEFAULT_STALE_TIME = 60000; // One minute
1592
1628
  var useEDRLayerCollection = function useEDRLayerCollection(edrBaseUrlWithCollection) {
1593
1629
  var instanceId = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
1630
+ var enabled = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
1594
1631
  return useQuery({
1595
1632
  staleTime: DEFAULT_STALE_TIME,
1596
1633
  queryKey: [edrBaseUrlWithCollection, instanceId, 'useEDRLayerCollection'],
@@ -1611,7 +1648,7 @@ var useEDRLayerCollection = function useEDRLayerCollection(edrBaseUrlWithCollect
1611
1648
  }
1612
1649
  return queryFn;
1613
1650
  }(),
1614
- enabled: edrBaseUrlWithCollection.length > 0
1651
+ enabled: edrBaseUrlWithCollection.length > 0 && enabled
1615
1652
  });
1616
1653
  };
1617
1654
  var useEDRLayerCollectionCube = function useEDRLayerCollectionCube(edrBaseUrlWithCollection, parameterName) {
@@ -2044,6 +2081,42 @@ var styleNameToStyleLikeNotMemoed = function styleNameToStyleLikeNotMemoed(style
2044
2081
  };
2045
2082
  };
2046
2083
  var styleNameToStyleLike = memoize(styleNameToStyleLikeNotMemoed);
2084
+ var defaultEdrStyles = [{
2085
+ name: 'temperatureLegendColorsWoW:-18,38',
2086
+ title: 'WOW Legend -18 till 18 degrees',
2087
+ "abstract": 'temperatureLegendColorsWoW',
2088
+ legendURL: ''
2089
+ }, {
2090
+ name: 'temperatureLegendColorsWoW:0,20',
2091
+ title: 'WOW Legend 0 till 20 degrees',
2092
+ "abstract": 'temperatureLegendColorsWoW',
2093
+ legendURL: ''
2094
+ }, {
2095
+ name: 'temperatureLegendColorsWoW:10,20',
2096
+ title: 'WOW Legend 10 till 20 degrees',
2097
+ "abstract": 'temperatureLegendColorsWoW',
2098
+ legendURL: ''
2099
+ }, {
2100
+ name: 'temperatureLegendColorsCWK',
2101
+ title: 'temperatureLegendColorsCWK',
2102
+ "abstract": 'temperatureLegendColorsCWK',
2103
+ legendURL: ''
2104
+ }, {
2105
+ name: 'precipitationMMLegendColorsWoW:0,30',
2106
+ title: '0 till 30 mm/h',
2107
+ "abstract": 'precipitationMMLegendColorsWoW',
2108
+ legendURL: ''
2109
+ }, {
2110
+ name: 'precipitationMMLegendColorsWoW:0,3',
2111
+ title: '0 till 3 mm/h',
2112
+ "abstract": 'precipitationMMLegendColorsWoW',
2113
+ legendURL: ''
2114
+ }, {
2115
+ name: 'wind/direction-speed',
2116
+ title: 'Wind direction and speed',
2117
+ "abstract": '',
2118
+ legendURL: ''
2119
+ }];
2047
2120
 
2048
2121
  /**
2049
2122
  * Returns WMLayer instance in EDR mode. The layer will contains parsed dimensions and styles and keeps a state for these properties.
@@ -10593,7 +10666,7 @@ var GeoJSONTextField = function GeoJSONTextField(_ref) {
10593
10666
  try {
10594
10667
  onChangeGeoJSON(JSON.parse(event.target.value));
10595
10668
  setValidity(true);
10596
- } catch (e) {
10669
+ } catch (_e) {
10597
10670
  onChangeGeoJSON(null);
10598
10671
  setValidity(false);
10599
10672
  }
@@ -11439,9 +11512,7 @@ var moveFeature = function moveFeature(currentGeoJSON, newGeoJSON, featureLayerI
11439
11512
  * @param intersectB Feature B
11440
11513
  * @returns The intersection of the two features.
11441
11514
  */
11442
- var intersectPointGeoJSONS = function intersectPointGeoJSONS(
11443
- // eslint-disable-next-line id-length
11444
- intersectA, intersectB) {
11515
+ var intersectPointGeoJSONS = function intersectPointGeoJSONS(intersectA, intersectB) {
11445
11516
  var geoJSONProperties = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {
11446
11517
  stroke: '#FF0000',
11447
11518
  'stroke-width': 10.0,
@@ -11530,7 +11601,7 @@ var createInterSections = function createInterSections(geojson, otherGeoJSON) {
11530
11601
  return addFeatureProperties(intersectPointGeoJSONS(geojson, otherGeoJSON), geoJSONproperties);
11531
11602
  }
11532
11603
  return addFeatureProperties(intersectPolygonGeoJSONS(geojson, otherGeoJSON), geoJSONproperties);
11533
- } catch (error) {
11604
+ } catch (_error) {
11534
11605
  return addFeatureProperties(geojson, geoJSONproperties);
11535
11606
  }
11536
11607
  });
@@ -13960,6 +14031,7 @@ var TimeawareImageSourceWMSLayer = function TimeawareImageSourceWMSLayer(_ref) {
13960
14031
  var dimensionsValuesEffectCheck = dimensionsValues && Object.entries(dimensionsValues).map(function (dimensionNameAndCurrentValue) {
13961
14032
  return "".concat(dimensionNameAndCurrentValue[0], ":").concat(dimensionNameAndCurrentValue[1]);
13962
14033
  }).join(',');
14034
+ var prefetchListEffectCheck = (prefetchList !== null && prefetchList !== void 0 ? prefetchList : []).join(',');
13963
14035
  // Make a TimeawareImageSource and add it to the map, add and remove should only be done when the map changes, layer id changes, visibility changes or dimensionsValues get defined.
13964
14036
  useEffect(function () {
13965
14037
  if (!map || !wmLayer || visible === false || !dimensionsValues) {
@@ -13970,6 +14042,7 @@ var TimeawareImageSourceWMSLayer = function TimeawareImageSourceWMSLayer(_ref) {
13970
14042
  source: new TimeawareImageSource({
13971
14043
  wmsUrl: wmLayer.getmapURL,
13972
14044
  layerName: wmLayer.name,
14045
+ layerId: layerId || '',
13973
14046
  styleName: styleName,
13974
14047
  dimProps: dimensionsValues,
13975
14048
  timeStampsToPrefetch: [],
@@ -13999,7 +14072,7 @@ var TimeawareImageSourceWMSLayer = function TimeawareImageSourceWMSLayer(_ref) {
13999
14072
  return _regeneratorRuntime().wrap(function _callee$(_context) {
14000
14073
  while (1) switch (_context.prev = _context.next) {
14001
14074
  case 0:
14002
- if (!(wmLayer && visible !== false)) {
14075
+ if (!wmLayer) {
14003
14076
  _context.next = 11;
14004
14077
  break;
14005
14078
  }
@@ -14059,8 +14132,9 @@ var TimeawareImageSourceWMSLayer = function TimeawareImageSourceWMSLayer(_ref) {
14059
14132
  return window.console.error(e);
14060
14133
  });
14061
14134
  return function () {};
14135
+ // Effect array should only contain wmLayer and layerName
14062
14136
  // eslint-disable-next-line react-hooks/exhaustive-deps
14063
- }, [wmLayer, layerName, visible]);
14137
+ }, [wmLayer, layerName]);
14064
14138
  // Layer opacity and zIndex useEffect
14065
14139
  useEffect(function () {
14066
14140
  if (!layerOptions || !layer) {
@@ -14127,7 +14201,7 @@ var TimeawareImageSourceWMSLayer = function TimeawareImageSourceWMSLayer(_ref) {
14127
14201
  // - styleName,
14128
14202
  // - dimensionsValuesEffectCheck,
14129
14203
  // eslint-disable-next-line react-hooks/exhaustive-deps
14130
- }, [layer, wmLayer, prefetchList, layerName, styleName, dimensionsValuesEffectCheck]);
14204
+ }, [layer, wmLayer, prefetchListEffectCheck, layerName, styleName, dimensionsValuesEffectCheck]);
14131
14205
  // Only show debug info for data layers with time dimension
14132
14206
  var hasTimeDim = (_wmLayer$dimensions$f = wmLayer === null || wmLayer === void 0 || (_wmLayer$dimensions4 = wmLayer.dimensions) === null || _wmLayer$dimensions4 === void 0 ? void 0 : _wmLayer$dimensions4.findIndex(function (dimension) {
14133
14207
  return dimension.name === 'time';
@@ -14422,7 +14496,7 @@ var useViewFromLayer = function useViewFromLayer(layerProps) {
14422
14496
  if (viewRef.current === null) {
14423
14497
  try {
14424
14498
  viewRef.current = new View(baseView);
14425
- } catch (e) {
14499
+ } catch (_e) {
14426
14500
  viewRef.current = new View({
14427
14501
  projection: 'EPSG:3857',
14428
14502
  zoom: 1,
@@ -14448,7 +14522,6 @@ var useViewFromLayer = function useViewFromLayer(layerProps) {
14448
14522
  var USEANIMATIONFORLAYER_DEFAULT_NUMSTEPS = 48;
14449
14523
  var USEANIMATIONFORLAYER_DEFAULT_UPDATEINTERVALMS = 60000;
14450
14524
  var USEANIMATIONFORLAYER_DEFAULT_MSINHOUR = 3600000;
14451
- // eslint-disable-next-line import/prefer-default-export
14452
14525
  var useAnimationForLayer = function useAnimationForLayer(layerProps, intervalInMs) {
14453
14526
  var numStepsTillLatest = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : USEANIMATIONFORLAYER_DEFAULT_NUMSTEPS;
14454
14527
  var checkForUpdatesMs = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : USEANIMATIONFORLAYER_DEFAULT_UPDATEINTERVALMS;
@@ -14532,7 +14605,6 @@ var useAnimationForLayer = function useAnimationForLayer(layerProps, intervalInM
14532
14605
  }
14533
14606
  }, _callee);
14534
14607
  })), [calculateTimeSpan, wmLayer]);
14535
- // eslint-disable-next-line @typescript-eslint/no-misused-promises
14536
14608
  useSetIntervalWhenVisible(refetchLayer, checkForUpdatesMs);
14537
14609
  return {
14538
14610
  dimensions: [{
@@ -15267,7 +15339,7 @@ var FeatureLayer = function FeatureLayer(_ref) {
15267
15339
  }, [style]);
15268
15340
  useEffect(function () {
15269
15341
  // Handle opacity:
15270
- if (layerRef.current && opacity) {
15342
+ if (layerRef.current && opacity !== undefined) {
15271
15343
  var _layerRef$current2;
15272
15344
  (_layerRef$current2 = layerRef.current) === null || _layerRef$current2 === void 0 || _layerRef$current2.setOpacity(opacity);
15273
15345
  }
@@ -15373,7 +15445,6 @@ var OpenLayersFeatureLayer = function OpenLayersFeatureLayer(_ref) {
15373
15445
  var featureCollectionHasChanges = featureCollectionRef.current !== featureCollection;
15374
15446
  if (featureCollectionHasChanges) {
15375
15447
  if (projection && featureCollection) {
15376
- // eslint-disable-next-line no-console
15377
15448
  featureCollectionRef.current = featureCollection;
15378
15449
  var formatter = new GeoJSON({
15379
15450
  featureProjection: projection
@@ -15731,6 +15802,13 @@ var FEATURE_STROKE_EDIT = new Stroke({
15731
15802
  color: '#e14',
15732
15803
  width: 1.5 + 1
15733
15804
  });
15805
+ var FEATURE_FILL_SELECTED = new Fill({
15806
+ color: '#186DFF'
15807
+ });
15808
+ var FEATURE_STROKE_SELECTED = new Stroke({
15809
+ color: '#186DFF',
15810
+ width: 1.5 + 1
15811
+ });
15734
15812
  var FEATURE_VERTICE_IMAGE = new Circle({
15735
15813
  radius: 5,
15736
15814
  stroke: new Stroke({
@@ -15759,6 +15837,16 @@ var ICON_LOCATIONMARKER = createIconStyle(locationPath, {
15759
15837
  anchor: [0.5, 1]
15760
15838
  }
15761
15839
  });
15840
+ var ICON_LOCATIONMARKER_SELECTED = createIconStyle(locationPath, {
15841
+ render: {
15842
+ fillStyle: '#186DFF',
15843
+ strokeStyle: '#186DFF',
15844
+ lineWidth: 2
15845
+ },
15846
+ icon: {
15847
+ anchor: [0.5, 1]
15848
+ }
15849
+ });
15762
15850
  var ICON_LOCATIONMARKER_MODIFY = createIconStyle(locationPath, {
15763
15851
  render: {
15764
15852
  fillStyle: '#eee',
@@ -16003,14 +16091,26 @@ var stylesByMapFeatureClass = _defineProperty(_defineProperty(_defineProperty(_d
16003
16091
  return !feature.get('hover') ? FEATURE_EDR : [].concat(FEATURE_EDR_HOVER, [textLabelStyle(feature.getProperties().name)]);
16004
16092
  }), MapFeatureClass.EDRMultiPolygon, function (feature) {
16005
16093
  return !feature.get('hover') ? FEATURE_EDR : [].concat(FEATURE_EDR_HOVER, [multiPolygonLabelStyle(feature.getProperties().name)]);
16006
- }), MapFeatureClass["default"], [
16007
- // Polygon / LineString
16008
- new Style$1({
16009
- fill: FEATURE_FILL,
16010
- stroke: FEATURE_STROKE
16011
- }),
16012
- // Point
16013
- ICON_LOCATIONMARKER]);
16094
+ }), MapFeatureClass["default"], function (feature) {
16095
+ if (feature.get('highlightSelectedFeature')) {
16096
+ return [
16097
+ // Polygon / LineString
16098
+ new Style$1({
16099
+ fill: FEATURE_FILL_SELECTED,
16100
+ stroke: FEATURE_STROKE_SELECTED
16101
+ }),
16102
+ // Point
16103
+ ICON_LOCATIONMARKER_SELECTED];
16104
+ }
16105
+ return [
16106
+ // Polygon / LineString
16107
+ new Style$1({
16108
+ fill: FEATURE_FILL,
16109
+ stroke: FEATURE_STROKE
16110
+ }),
16111
+ // Point
16112
+ ICON_LOCATIONMARKER];
16113
+ });
16014
16114
  var geowebColorToOpenLayersColor = function geowebColorToOpenLayersColor(color, opacity) {
16015
16115
  // Return as-is if no opacity, or non-hex color (we do not know how to add opacity to non-hex colors)
16016
16116
  if (color[0] !== '#' || opacity === undefined) {
@@ -16095,7 +16195,7 @@ var genericOpenLayersFeatureStyle = function genericOpenLayersFeatureStyle(featu
16095
16195
  }
16096
16196
  return undefined;
16097
16197
  }
16098
- var shouldHighlight = mapFeatureClass !== MapFeatureClass.ObservationStation && !showNameOnHover && selectionType !== 'fir';
16198
+ var shouldHighlight = geometry && geometry.getType() !== 'Point' && mapFeatureClass !== MapFeatureClass.ObservationStation && !showNameOnHover && selectionType !== 'fir';
16099
16199
  // Highlight map polygons on hover
16100
16200
  if (hover && shouldHighlight) {
16101
16201
  return new Style$1({
@@ -16654,4 +16754,4 @@ var getLayerUpdateInfo = function getLayerUpdateInfo(wmLayer, mapId) {
16654
16754
  return updateObject;
16655
16755
  };
16656
16756
 
16657
- export { BaseLayerType, ClickOnMapTool, DRAWMODE, DefaultBaseLayers, DimensionSelectButton, DimensionSelectDialog, DimensionSelectSlider, EditModeButton as EditModeButtonField, FEATURE_FILL, FEATURE_STROKE, FEATURE_STROKE_EDIT, FEATURE_VERTICES_EDIT_HANDLES, FEATURE_VERTICE_HANDLE_IMAGE, FEATURE_VERTICE_IMAGE, FeatureLayer, FeatureLayers, GeoJSONTextField, ICON_LOCATIONMARKER, ICON_LOCATIONMARKER_MODIFY, IntersectionSelect, LayerInfoButton, LayerInfoDialog, LayerInfoLegend, LayerInfoList, LayerInfoText, Legend, LegendButton, LegendDialog, LegendLayout, MapContext, MapControlButton, MapControls, MapDimensionSelect, MapFeatureClass, MapTime, MapWarningProperties, NEW_FEATURE_CREATED, NEW_LINESTRING_CREATED, NEW_POINT_CREATED, OpenLayersFeatureLayer, OpenLayersGetFeatureInfo, OpenLayersLayer, OpenLayersMapDraw, OpenLayersMapView, OpenLayersZoomControl, Proj4js, SelectField, StoryLayoutGrid, TimeAwareEDRLocationLayer, TimeContext, TimeawareImageSource, TimeawareImageSourceWMSLayer, WEBMAP_REACT_NAMESPACE, WMSLayer, WMTSLayer, XYZLayer, ZoomControls, addFeatureProperties, addGeoJSONProperties, addSelectionTypeToGeoJSON, basicExampleDrawOptions, basicExampleMultipleShapeDrawOptions, basicExampleMultipleShapeWithValuesDrawOptions, basicExampleSmoothLineOptions, catmullRomSpline, clearImageCacheForAllMaps, colorMaps, createIconStyle, createInterSections, currentlySupportedDrawModes, defaultBox, defaultDelete, defaultGeoJSONStyleProperties, defaultIntersectionStyleProperties, defaultLayers, defaultModes, defaultPoint, defaultPolygon, defaultTimeFormat, dimensionConfig, drawPolyStoryStyles, drawStyles, emptyGeoJSON, endToolExampleConfig, exampleIntersectionOptions, exampleIntersectionWithShapeOptions, exampleIntersections, exampleIntersectionsMultiDrawTool, fakeEdrLayerApiHandlers, featureBox, featureMultiPoint, featurePoint, featurePolygon, fillOptions, firSelectionType, formatTime, generateImageFromLegend, genericOpenLayersFeatureStyle, geowebColorToOpenLayersColor, getDimensionIcon, getDimensionLabel, getDimensionValue, getDimensionsList, getDoubleControlToolIcon, getFeatureCollection, getFeatureExtent, getFirTitle, getGeoJSONPropertyValue, getGeoJson, getIcon, getIntersectionToolIcon, getIsInsideAcceptanceTime, getLastEmptyFeatureIndex, getLayerBbox, getLayerStyles, getLayerUpdateInfo, getLegendClass, getProj4, getTimeDimension, getToolIcon, initializeOpenLayersProjections, inlineFeatureStyle, intersectPointGeoJSONS, intersectPolygonGeoJSONS, intersectionFeatureBE, intersectionFeatureNL, isGeoJSONFeatureCreatedByTool, isGeoJSONGeometryEmpty, isPointFeatureCollection, lineString, lineStringCollection, makeFeatureStyleDisc, makeFeatureStyleLoading, makeFeatureStyleMultiParam, makeFeatureStyleMultiParamLoading, makeFeatureStyleWind, makeLegendFromColorMap, makeLegendFromStyleName, makeTimeList, makeView, marksByDimension, modifyStyles, moveFeature, multiLineStringLabelStyle, multiPolygonLabelStyle, opacityOptions, openLayersGetMapImageStore, precipitationMMLegendColorsWoW, projectorCache, publicLayers, publicServices, rewindGeometry, selectPreferredWMSProjection, setMapCenter, setViewFromExtent, setViewFromFeature, simpleBoxGeoJSON, simpleBoxGeoJSONWrongOrder, simpleFlightRouteLineStringGeoJSON, simpleFlightRoutePointsGeoJSON, simpleGeometryCollectionGeoJSON, simpleLineStringGeoJSON, simpleMultiPolygon, simplePointsGeojson, simplePolygonGeoJSON, simpleSmallLineStringGeoJSON, startToolExampleConfig, strokeWidthOptions, styleNameToStyleLike, temperatureLegendColorsCWK, temperatureLegendColorsWoW, textLabelStyle, textStyle, textStyleWithMargin, updateEditModeButtonsWithFir, useAnimationForLayer, useEDRLayerCollection, useEDRLayerCollectionCube, useGeoJSON, useGetEDRLayerInstance, useGetWMLayerInstance, useGetWMSLayerStyleList, useIconStyle, useMapDrawTool, useProjection, useQueryGetWMSGetCapabilities, useQueryGetWMSLayer, useQueryGetWMSLayers, useQueryGetWMSLayersTree, useQueryGetWMSServiceInfo, useQueryWMTSGetCapabilities, useSetIntervalWhenVisible, useViewFromLayer, viewUtils, webmapReactTranslations };
16757
+ export { BaseLayerType, ClickOnMapTool, DRAWMODE, DefaultBaseLayers, DimensionSelectButton, DimensionSelectDialog, DimensionSelectSlider, EditModeButton as EditModeButtonField, FEATURE_FILL, FEATURE_FILL_SELECTED, FEATURE_STROKE, FEATURE_STROKE_EDIT, FEATURE_STROKE_SELECTED, FEATURE_VERTICES_EDIT_HANDLES, FEATURE_VERTICE_HANDLE_IMAGE, FEATURE_VERTICE_IMAGE, FeatureLayer, FeatureLayers, GeoJSONTextField, ICON_LOCATIONMARKER, ICON_LOCATIONMARKER_MODIFY, ICON_LOCATIONMARKER_SELECTED, IntersectionSelect, LayerInfoButton, LayerInfoDialog, LayerInfoLegend, LayerInfoList, LayerInfoText, Legend, LegendButton, LegendDialog, LegendLayout, MapContext, MapControlButton, MapControls, MapDimensionSelect, MapFeatureClass, MapTime, MapWarningProperties, NEW_FEATURE_CREATED, NEW_LINESTRING_CREATED, NEW_POINT_CREATED, OpenLayersFeatureLayer, OpenLayersGetFeatureInfo, OpenLayersLayer, OpenLayersMapDraw, OpenLayersMapView, OpenLayersZoomControl, Proj4js, SelectField, StoryLayoutGrid, TimeAwareEDRLocationLayer, TimeContext, TimeawareImageSource, TimeawareImageSourceWMSLayer, WEBMAP_REACT_NAMESPACE, WMSLayer, WMTSLayer, XYZLayer, ZoomControls, addFeatureProperties, addGeoJSONProperties, addSelectionTypeToGeoJSON, basicExampleDrawOptions, basicExampleMultipleShapeDrawOptions, basicExampleMultipleShapeWithValuesDrawOptions, basicExampleSmoothLineOptions, catmullRomSpline, clearImageCacheForAllMaps, colorMaps, createIconStyle, createInterSections, currentlySupportedDrawModes, defaultBox, defaultDelete, defaultEdrStyles, defaultGeoJSONStyleProperties, defaultIntersectionStyleProperties, defaultLayers, defaultModes, defaultPoint, defaultPolygon, defaultTimeFormat, dimensionConfig, drawPolyStoryStyles, drawStyles, emptyGeoJSON, endToolExampleConfig, exampleIntersectionOptions, exampleIntersectionWithShapeOptions, exampleIntersections, exampleIntersectionsMultiDrawTool, fakeEdrLayerApiHandlers, featureBox, featureMultiPoint, featurePoint, featurePolygon, fillOptions, firSelectionType, formatTime, generateImageFromLegend, genericOpenLayersFeatureStyle, geowebColorToOpenLayersColor, getDimensionIcon, getDimensionLabel, getDimensionValue, getDimensionsList, getDoubleControlToolIcon, getFeatureCollection, getFeatureExtent, getFirTitle, getGeoJSONPropertyValue, getGeoJson, getIcon, getIntersectionToolIcon, getIsInsideAcceptanceTime, getLastEmptyFeatureIndex, getLayerBbox, getLayerStyles, getLayerUpdateInfo, getLegendClass, getProj4, getTimeDimension, getToolIcon, initializeOpenLayersProjections, inlineFeatureStyle, intersectPointGeoJSONS, intersectPolygonGeoJSONS, intersectionFeatureBE, intersectionFeatureNL, isGeoJSONFeatureCreatedByTool, isGeoJSONGeometryEmpty, isPointFeatureCollection, lineString, lineStringCollection, makeFeatureStyleDisc, makeFeatureStyleLoading, makeFeatureStyleMultiParam, makeFeatureStyleMultiParamLoading, makeFeatureStyleWind, makeLegendFromColorMap, makeLegendFromStyleName, makeTimeList, makeView, marksByDimension, modifyStyles, moveFeature, multiLineStringLabelStyle, multiPolygonLabelStyle, opacityOptions, openLayersGetMapImageStore, precipitationMMLegendColorsWoW, projectorCache, publicLayers, publicServices, rewindGeometry, selectPreferredWMSProjection, setMapCenter, setViewFromExtent, setViewFromFeature, simpleBoxGeoJSON, simpleBoxGeoJSONWrongOrder, simpleFlightRouteLineStringGeoJSON, simpleFlightRoutePointsGeoJSON, simpleGeometryCollectionGeoJSON, simpleLineStringGeoJSON, simpleMultiPolygon, simplePointsGeojson, simplePolygonGeoJSON, simpleSmallLineStringGeoJSON, startToolExampleConfig, strokeWidthOptions, styleNameToStyleLike, temperatureLegendColorsCWK, temperatureLegendColorsWoW, textLabelStyle, textStyle, textStyleWithMargin, updateEditModeButtonsWithFir, useAnimationForLayer, useEDRLayerCollection, useEDRLayerCollectionCube, useGeoJSON, useGetEDRLayerInstance, useGetWMLayerInstance, useGetWMSLayerStyleList, useIconStyle, useMapDrawTool, useProjection, useQueryGetWMSGetCapabilities, useQueryGetWMSLayer, useQueryGetWMSLayers, useQueryGetWMSLayersTree, useQueryGetWMSServiceInfo, useQueryWMTSGetCapabilities, useSetIntervalWhenVisible, useViewFromLayer, viewUtils, webmapReactTranslations };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@opengeoweb/webmap-react",
3
- "version": "13.2.1",
3
+ "version": "14.0.1",
4
4
  "description": "GeoWeb react wrapper for webmap",
5
5
  "license": "Apache-2.0",
6
6
  "repository": {
@@ -8,9 +8,9 @@
8
8
  "url": "git@gitlab.com:opengeoweb/opengeoweb.git"
9
9
  },
10
10
  "dependencies": {
11
- "@opengeoweb/webmap": "13.2.1",
12
- "@opengeoweb/theme": "13.2.1",
13
- "@opengeoweb/shared": "13.2.1",
11
+ "@opengeoweb/webmap": "14.0.1",
12
+ "@opengeoweb/theme": "14.0.1",
13
+ "@opengeoweb/shared": "14.0.1",
14
14
  "lodash": "^4.17.21",
15
15
  "ol": "^10.4.0",
16
16
  "proj4": "^2.9.2",
@@ -16,9 +16,12 @@ export declare enum MapFeatureClass {
16
16
  export declare const FEATURE_FILL: Fill;
17
17
  export declare const FEATURE_STROKE: Stroke;
18
18
  export declare const FEATURE_STROKE_EDIT: Stroke;
19
+ export declare const FEATURE_FILL_SELECTED: Fill;
20
+ export declare const FEATURE_STROKE_SELECTED: Stroke;
19
21
  export declare const FEATURE_VERTICE_IMAGE: Circle;
20
22
  export declare const FEATURE_VERTICE_HANDLE_IMAGE: Circle;
21
23
  export declare const ICON_LOCATIONMARKER: Style;
24
+ export declare const ICON_LOCATIONMARKER_SELECTED: Style;
22
25
  export declare const ICON_LOCATIONMARKER_MODIFY: Style;
23
26
  export declare const FEATURE_VERTICES_EDIT_HANDLES: Style;
24
27
  export declare const textLabelStyle: (text: string) => Style;
@@ -1,4 +1,4 @@
1
- export type FinaliseFn = () => void;
1
+ export type FinaliseFn = (cancelled: boolean) => void;
2
2
  export interface WorkerQueueJob {
3
3
  task: () => Promise<FinaliseFn | void>;
4
4
  cancelled: boolean;
@@ -1,7 +1,7 @@
1
1
  import { Extent } from 'ol/extent';
2
2
  import ImageWrapper from 'ol/Image';
3
3
  import { Projection } from 'ol/proj';
4
- import { WMImageStore } from '@opengeoweb/webmap';
4
+ import { WMImage, WMImageStore } from '@opengeoweb/webmap';
5
5
  export declare const openLayersGetMapImageStore: WMImageStore;
6
6
  export declare const clearImageCacheForAllMaps: () => void;
7
7
  interface TimeAwareGeoreferencedImageSrc {
@@ -38,6 +38,6 @@ declare class TimeAwareImageWrapper extends ImageWrapper {
38
38
  setState(state: number): void;
39
39
  private _rejectAll;
40
40
  private _resolveAll;
41
- loadAndResolve(extentToLoad: Extent, resolutionToLoad: number, pixelRatio: number, projection: Projection, getMapUrl: string, params: Record<string, string>, layerName: string, styleName: string, dimProps: Record<string, string>): Promise<void>;
41
+ loadAndResolve(extentToLoad: Extent, resolutionToLoad: number, pixelRatio: number, projection: Projection, getMapUrl: string, params: Record<string, string>, layerName: string, styleName: string, dimProps: Record<string, string>): Promise<WMImage>;
42
42
  }
43
43
  export default TimeAwareImageWrapper;
@@ -8,6 +8,7 @@ interface TimeawareImageSourceOptions {
8
8
  wmsUrl: string;
9
9
  params?: Record<string, string>;
10
10
  layerName: string;
11
+ layerId: string;
11
12
  dimProps?: Record<string, string>;
12
13
  styleName?: string | undefined;
13
14
  timeStampsToPrefetch?: string[];
@@ -36,7 +37,8 @@ export declare class TimeawareImageSource extends ImageSource {
36
37
  private _imWrapperForPrefetch;
37
38
  private throttledPrefetch;
38
39
  private throttledImageLoad;
39
- constructor({ wmsUrl, timeStampsToPrefetch, layerName, styleName, dimProps, params, visible, }: TimeawareImageSourceOptions);
40
+ private _layerId;
41
+ constructor({ wmsUrl, timeStampsToPrefetch, layerName, layerId, styleName, dimProps, params, visible, }: TimeawareImageSourceOptions);
40
42
  private _conditionalPrefetch;
41
43
  private _loadImagery;
42
44
  private prefetch;
@@ -1,6 +1,7 @@
1
1
  import { WMJSDimension, Dimension, WMLayer } from '@opengeoweb/webmap';
2
2
  import { Timespan } from '../types/Timespan';
3
3
  export declare const makeDimValuesToPrefetch: (wmTimeDim: WMJSDimension, stepsToCheck: number[], isAnimating: boolean) => string[];
4
+ export declare const extendPrefetchListWithModelRunTimeSteps: (wmLayer: WMLayer, stepsToCheck: number[]) => number[];
4
5
  /**
5
6
  * We use the WMLayer dimension logic to obtain the dimension value to use in the WMS GetMap request. The input is the dimensions array which is typically the properties set for the layer component.
6
7
  * The input time is descretized to the closest value which is available in the WMS layer.
@@ -24,3 +24,9 @@ export declare const makeFeatureStyleMultiParamLoading: () => Style;
24
24
  export declare const makeFeatureStyleDisc: (feature: FeatureLike, legend: EdrOlColorLegend) => Style;
25
25
  export declare const makeFeatureStyleLoading: (feature: FeatureLike) => Style;
26
26
  export declare const styleNameToStyleLike: ((styleName: string, multiParam?: boolean) => ((feature: FeatureLike) => Style | Style[])) & import("lodash").MemoizedFunction;
27
+ export declare const defaultEdrStyles: {
28
+ name: string;
29
+ title: string;
30
+ abstract: string;
31
+ legendURL: string;
32
+ }[];
@@ -2,6 +2,8 @@ import { EDRInstance, CoverageCollection, EdrParameters } from '@opengeoweb/shar
2
2
  import { UseQueryResult } from '@tanstack/react-query';
3
3
  export interface EdrLayerInstance extends EDRInstance {
4
4
  parameter_names?: EdrParameters;
5
+ title?: string;
6
+ description?: string;
5
7
  }
6
- export declare const useEDRLayerCollection: (edrBaseUrlWithCollection: string, instanceId?: string) => UseQueryResult<EdrLayerInstance, Error>;
8
+ export declare const useEDRLayerCollection: (edrBaseUrlWithCollection: string, instanceId?: string, enabled?: boolean) => UseQueryResult<EdrLayerInstance, Error>;
7
9
  export declare const useEDRLayerCollectionCube: (edrBaseUrlWithCollection: string, parameterName: string, datetime?: string, instanceId?: string, bbox?: string) => UseQueryResult<CoverageCollection, Error>;