@orioro/react-maplibre-util 0.3.1 → 0.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/CHANGELOG.md +17 -0
  2. package/dist/Controls/ControlContainer/index.d.ts +1 -1
  3. package/dist/LayeredMap/LayeredMap.d.ts +1 -0
  4. package/dist/LayeredMap/parseMapViews.d.ts +1 -0
  5. package/dist/index.mjs +22 -7
  6. package/dist/scales/naturalBreaks/autoK.d.ts +1 -1
  7. package/dist/scales/naturalBreaks/index.d.ts +2 -2
  8. package/package.json +19 -12
package/CHANGELOG.md CHANGED
@@ -1,5 +1,22 @@
1
1
  # @orioro/react-maplibre-util
2
2
 
3
+ ## 0.4.0
4
+
5
+ ### Minor Changes
6
+
7
+ - implement proof-of-concept of hover interaction on legend
8
+
9
+ ### Patch Changes
10
+
11
+ - Updated dependencies
12
+ - @orioro/react-chart-util@0.2.0
13
+
14
+ ## 0.3.2
15
+
16
+ ### Patch Changes
17
+
18
+ - fix peerDependencies
19
+
3
20
  ## 0.3.1
4
21
 
5
22
  ### Patch Changes
package/dist/Controls/ControlContainer/index.d.ts CHANGED
@@ -8,7 +8,7 @@ export type ControlContainerProps = {
8
8
  /** Button content and props */
9
9
  children: React.ReactNode;
10
10
  };
11
- export declare function ControlContainer({ style, position, children, }: ControlContainerProps): React.ReactPortal | null;
11
+ export declare function ControlContainer({ style, position, children, }: ControlContainerProps): any;
12
12
  export declare namespace ControlContainer {
13
13
  var Unstyled: typeof ControlContainerWithStyleReset;
14
14
  }
package/dist/LayeredMap/LayeredMap.d.ts CHANGED
@@ -2,6 +2,7 @@ import React from 'react';
2
2
  import { MapInstance } from 'react-map-gl/maplibre';
3
3
  import { LayeredMapProps } from '../types';
4
4
  import { augmentFeature, getSrcLayer, getSrcViewByLayerId } from './parseMapViews';
5
+ export declare function useLayeredMap(): null;
5
6
  export declare const LayeredMap: React.ForwardRefExoticComponent<Omit<LayeredMapProps, "ref"> & React.RefAttributes<{
6
7
  map: MapInstance;
7
8
  augmentFeature: (feature: Parameters<typeof augmentFeature>[1]) => ReturnType<typeof augmentFeature>;
package/dist/LayeredMap/parseMapViews.d.ts CHANGED
@@ -41,5 +41,6 @@ export declare function augmentFeature(parsed: MapViewsParseResult, feature: Geo
41
41
  properties: import("geojson").GeoJsonProperties;
42
42
  bbox?: import("geojson").BBox | undefined;
43
43
  };
44
+ export declare function fmtLayerAbsoluteId(viewId: string, layerRelativeId: string): string;
44
45
  export declare function parseMapViews(orderedViews: MapView[], { existingLayers }?: ParseMapViewsOptions): MapViewsParseResult;
45
46
  export {};
package/dist/index.mjs CHANGED
@@ -1,5 +1,5 @@
1
1
  import { __assign, __spreadArray, __rest, __makeTemplateObject } from 'tslib';
2
- import React, { forwardRef, useRef, useMemo, useImperativeHandle, useState, useCallback, useLayoutEffect, useEffect, createRef } from 'react';
2
+ import React, { forwardRef, useContext, createContext, useRef, useMemo, useImperativeHandle, useState, useCallback, useLayoutEffect, useEffect, createRef } from 'react';
3
3
  import { Map, Source, Layer, useMap, useControl } from 'react-map-gl/maplibre';
4
4
  import { isPlainObject, uniq, uniqBy, pick, omit } from 'lodash-es';
5
5
  import { Flex, useRefByKey, useLocalState, DropdownMenu } from '@orioro/react-ui-core';
@@ -53,7 +53,9 @@ function sortLayers(layers, _a) {
53
53
  }).map(function (layer, index, sortedLayers) {
54
54
  if (index === sortedLayers.length - 1) {
55
55
  // is last layer
56
- return layer;
56
+ return __assign(__assign({}, layer), {
57
+ beforeId: null
58
+ });
57
59
  } else {
58
60
  var beforeId = sortedLayers[index + 1].id;
59
61
  //
@@ -99,6 +101,9 @@ function augmentFeature(parsed, feature) {
99
101
  mapView: mapView
100
102
  });
101
103
  }
104
+ function fmtLayerAbsoluteId(viewId, layerRelativeId) {
105
+ return "".concat(viewId, "__").concat(layerRelativeId);
106
+ }
102
107
  function parseMapViews(orderedViews, _a) {
103
108
  var _b = _a === void 0 ? {} : _a,
104
109
  existingLayers = _b.existingLayers;
@@ -120,7 +125,8 @@ function parseMapViews(orderedViews, _a) {
120
125
  if (!layer) {
121
126
  return acc;
122
127
  }
123
- var layerId = layer.absoluteId ? layer.absoluteId : "".concat(viewId, "__").concat(layerRelativeId);
128
+ var layerId = layer.absoluteId ? layer.absoluteId : fmtLayerAbsoluteId(viewId, layerRelativeId);
129
+ // : `${viewId}__${layerRelativeId}`
124
130
  return {
125
131
  interactiveLayerIds: layer.interactive ? __spreadArray(__spreadArray([], acc.interactiveLayerIds, true), [layerId], false) : acc.interactiveLayerIds,
126
132
  _layers: __spreadArray(__spreadArray([], acc._layers, true), [__assign(__assign({}, layer), {
@@ -173,6 +179,10 @@ var VIEW_AUGMENTED_EVENT_HANDLERS = ['onMouseDown', 'onMouseUp', 'onMouseOver',
173
179
  // 'onMouseEnter',
174
180
  // 'onMouseLeave',
175
181
  'onMouseMove', 'onMouseOut', 'onClick', 'onDblClick', 'onContextMenu'];
182
+ var LayeredMapContext = /*#__PURE__*/createContext(null);
183
+ function useLayeredMap() {
184
+ return useContext(LayeredMapContext);
185
+ }
176
186
  function useViewAugmentedEventHandlers(props, parsedMapViews) {
177
187
  var handlers = Object.fromEntries(VIEW_AUGMENTED_EVENT_HANDLERS.map(function (handlerName) {
178
188
  return typeof props[handlerName] === 'function' ? [handlerName, function (evt) {
@@ -209,7 +219,7 @@ var LayeredMap = /*#__PURE__*/forwardRef(function LayeredMapInner(_a, layeredMap
209
219
  };
210
220
  }, [views, mapRef.current]);
211
221
  var evtHandlers = useViewAugmentedEventHandlers(mapProps, parsed);
212
- useImperativeHandle(layeredMapRef, function () {
222
+ var imperativeHandle = useMemo(function () {
213
223
  return {
214
224
  map: mapRef.current,
215
225
  augmentFeature: augmentFeature.bind(null, parsed),
@@ -217,10 +227,15 @@ var LayeredMap = /*#__PURE__*/forwardRef(function LayeredMapInner(_a, layeredMap
217
227
  getSrcLayer: getSrcLayer.bind(null, parsed)
218
228
  };
219
229
  }, [mapRef.current, parsed]);
230
+ useImperativeHandle(layeredMapRef, function () {
231
+ return imperativeHandle;
232
+ }, [imperativeHandle]);
220
233
  return /*#__PURE__*/React.createElement(Map, __assign({
221
234
  ref: mapRef,
222
235
  interactiveLayerIds: __spreadArray(__spreadArray([], interactiveLayerIdsInput, true), parsed.interactiveLayerIds, true)
223
- }, mapProps, evtHandlers), children, parsed.sources.map(function (_a) {
236
+ }, mapProps, evtHandlers), /*#__PURE__*/React.createElement(LayeredMapContext.Provider, {
237
+ value: imperativeHandle
238
+ }, children, parsed.sources.map(function (_a) {
224
239
  var id = _a.id;
225
240
  _a.viewId;
226
241
  var source = __rest(_a, ["id", "viewId"]);
@@ -235,7 +250,7 @@ var LayeredMap = /*#__PURE__*/forwardRef(function LayeredMapInner(_a, layeredMap
235
250
  key: id,
236
251
  id: id
237
252
  }, layer));
238
- }));
253
+ })));
239
254
  });
240
255
 
241
256
  var Container = styled.div(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n pointer-events: none;\n position: absolute;\n z-index: 2;\n\n background: rgba(0, 0, 0, 0.5);\n border-radius: 16px;\n box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);\n backdrop-filter: blur(5px);\n -webkit-backdrop-filter: blur(5px);\n border: 1px solid rgba(0, 0, 0, 0.3);\n\n // background-color: black;\n color: white;\n border-radius: 5px;\n font-size: 0.9rem;\n\n max-width: 300px;\n\n hyphens: auto;\n word-break: break-word; /* Avoids overflow */\n overflow-wrap: break-word; /* Ensures long words break */\n white-space: normal;\n"], ["\n pointer-events: none;\n position: absolute;\n z-index: 2;\n\n background: rgba(0, 0, 0, 0.5);\n border-radius: 16px;\n box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);\n backdrop-filter: blur(5px);\n -webkit-backdrop-filter: blur(5px);\n border: 1px solid rgba(0, 0, 0, 0.3);\n\n // background-color: black;\n color: white;\n border-radius: 5px;\n font-size: 0.9rem;\n\n max-width: 300px;\n\n hyphens: auto;\n word-break: break-word; /* Avoids overflow */\n overflow-wrap: break-word; /* Ensures long words break */\n white-space: normal;\n"])));
@@ -1361,4 +1376,4 @@ function InspectControl(props) {
1361
1376
  return null;
1362
1377
  }
1363
1378
 
1364
- export { $naturalBreaks, ControlContainer, HoverTooltip, InspectControl, LayeredMap, MapWindow, SyncedMaps, TerrainControl, applyReactStyle, augmentFeature, ensureAddLayer, ensureAddSource, ensureRemoveLayer, ensureRemoveSource, fitGeometry, getSrcLayer, getSrcViewByLayerId, hoverParseEvent, makeSyncedMaps, mapSetFeaturesState, naturalBreakBounds, parseMapViews, scaleNaturalBreaks, sortLayers, useClientRect, useHover, withHover };
1379
+ export { $naturalBreaks, ControlContainer, HoverTooltip, InspectControl, LayeredMap, MapWindow, SyncedMaps, TerrainControl, applyReactStyle, augmentFeature, ensureAddLayer, ensureAddSource, ensureRemoveLayer, ensureRemoveSource, fitGeometry, fmtLayerAbsoluteId, getSrcLayer, getSrcViewByLayerId, hoverParseEvent, makeSyncedMaps, mapSetFeaturesState, naturalBreakBounds, parseMapViews, scaleNaturalBreaks, sortLayers, useClientRect, useHover, useLayeredMap, withHover };
package/dist/scales/naturalBreaks/autoK.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  export declare const DEFAULT_MIN_K = 3;
2
2
  export declare const DEFAULT_MAX_K = 9;
3
- export declare const elbowiness: (numbers: number[], [minK, maxK]: [number, number]) => number[];
3
+ export declare const elbowiness: (numbers: number[], [minK, maxK]: [number, number]) => any;
4
4
  export declare function within(value: number, [min, max]: [number, number]): number;
5
5
  export declare const autoK: (numbers: number[], [minK, maxK]?: [number, number]) => number;
package/dist/scales/naturalBreaks/index.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import { ExpressionFn } from '@orioro/resolve/dist/resolvers/expressions/types';
2
- declare const DEFAULT_COLOR_SCALE: readonly (readonly string[])[];
2
+ declare const DEFAULT_COLOR_SCALE: any;
3
3
  export type ScaleNaturalBreaksProps = {
4
4
  values: number[];
5
5
  k?: number;
@@ -9,7 +9,7 @@ export type ScaleNaturalBreaksProps = {
9
9
  scalesByK?: typeof DEFAULT_COLOR_SCALE;
10
10
  };
11
11
  export declare function naturalBreakBounds(values: number[], k: number): [number, number][];
12
- export declare function scaleNaturalBreaks({ values, k, defaultColor, minK, maxK, scalesByK, }: ScaleNaturalBreaksProps): (string | number)[] | null;
12
+ export declare function scaleNaturalBreaks({ values, k, defaultColor, minK, maxK, scalesByK, }: ScaleNaturalBreaksProps): any[] | null;
13
13
  export declare const $naturalBreaks: ExpressionFn<[
14
14
  number[],
15
15
  opt?: Pick<ScaleNaturalBreaksProps, 'k' | 'scalesByK'>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@orioro/react-maplibre-util",
3
- "version": "0.3.1",
3
+ "version": "0.4.0",
4
4
  "packageManager": "yarn@4.0.2",
5
5
  "type": "module",
6
6
  "main": "dist/index.mjs",
@@ -23,38 +23,45 @@
23
23
  },
24
24
  "devDependencies": {
25
25
  "@orioro/dev": "^0.0.5",
26
+ "@radix-ui/themes": "^3.0.1",
26
27
  "@tanstack/react-query": "^5.66.0",
28
+ "maplibre-gl": "^5.1.0",
27
29
  "next": "14.1.0",
30
+ "react": "^18.2.0",
31
+ "react-dom": "^18.2.0",
32
+ "react-map-gl": "^8.0.0",
28
33
  "rollup": "^4.13.0",
29
34
  "storybook": "^8.0.0"
30
35
  },
36
+ "peerDependencies": {
37
+ "@radix-ui/themes": "^3.0.1",
38
+ "@types/d3": "^7.4.3",
39
+ "@types/d3-scale-chromatic": "^3.1.0",
40
+ "@types/geojson": "^7946.0.16",
41
+ "@types/mapbox__mapbox-gl-geocoder": "^5.0.0",
42
+ "@types/react-dom": "^19.1.3",
43
+ "maplibre-gl": "^5.1.0",
44
+ "react": "^18.2.0",
45
+ "react-dom": "^18.2.0",
46
+ "react-map-gl": "^8.0.0"
47
+ },
31
48
  "dependencies": {
32
49
  "@mapbox/mapbox-gl-geocoder": "^5.0.3",
33
50
  "@maplibre/maplibre-gl-inspect": "^1.7.1",
34
51
  "@mdi/js": "^7.4.47",
35
52
  "@mdi/react": "^1.6.1",
36
- "@orioro/react-chart-util": "^0.1.0",
53
+ "@orioro/react-chart-util": "^0.2.0",
37
54
  "@orioro/react-select": "^3.0.2",
38
55
  "@orioro/react-ui-core": "^0.0.6",
39
56
  "@orioro/resolve": "^0.1.2",
40
57
  "@orioro/scale-util": "^0.0.2",
41
- "@radix-ui/themes": "^3.0.1",
42
58
  "@turf/turf": "^7.2.0",
43
- "@types/d3": "^7.4.3",
44
- "@types/d3-scale-chromatic": "^3.1.0",
45
- "@types/geojson": "^7946.0.16",
46
- "@types/mapbox__mapbox-gl-geocoder": "^5.0.0",
47
- "@types/react-dom": "^19.1.3",
48
59
  "d3": "^7.9.0",
49
60
  "d3-scale-chromatic": "^3.1.0",
50
61
  "greenlet": "^1.1.0",
51
62
  "lodash-es": "^4.17.21",
52
63
  "maplibre-contour": "^0.1.0",
53
- "maplibre-gl": "^5.1.0",
54
64
  "query-string": "^9.1.1",
55
- "react": "^18.2.0",
56
- "react-dom": "^19.1.0",
57
- "react-map-gl": "^8.0.0",
58
65
  "react-merge-refs": "^2.1.1",
59
66
  "react-use": "^17.5.0",
60
67
  "simple-statistics": "^7.8.7",