@orioro/react-maplibre-util 0.5.1 → 0.5.3

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @orioro/react-maplibre-util
 
+## 0.5.3
+
+### Patch Changes
+
+- fix layer ordering sync issue
+
+## 0.5.2
+
+### Patch Changes
+
+- fix TerrainControl position usage
+
 ## 0.5.1
 
 ### Patch Changes

package/dist/Controls/ControlContainer/index.d.ts

@@ -8,7 +8,7 @@ export type ControlContainerProps = {
     /** Button content and props */
     children: React.ReactNode;
 };
-export declare function ControlContainer({ style, position, children, }: ControlContainerProps): any;
+export declare function ControlContainer({ style, position, children, }: ControlContainerProps): React.ReactPortal | null;
 export declare namespace ControlContainer {
     var Unstyled: typeof ControlContainerWithStyleReset;
 }

package/dist/Controls/TerrainControl/TerrainControl.d.ts

@@ -17,5 +17,5 @@ type TerrainControlProps = Omit<ControlContainerProps, 'children'> & {
     demSource?: SourceSpecInput;
     contourTileOptions?: Partial<GlobalContourTileOptions>;
 };
-export declare function TerrainControl({ value: externalValue, onSetValue: onSetExternalValue, demSourceId: DEM_SOURCE_ID, demSource: DEM_SOURCE_SPEC, contourTileOptions: contourTileOptionsInput, }: TerrainControlProps): React.JSX.Element;
+export declare function TerrainControl({ value: externalValue, onSetValue: onSetExternalValue, demSourceId: DEM_SOURCE_ID, demSource: DEM_SOURCE_SPEC, contourTileOptions: contourTileOptionsInput, ...controlContainerProps }: TerrainControlProps): React.JSX.Element;
 export {};

package/dist/LayeredMap/syncLayerOrder.d.ts

@@ -0,0 +1,23 @@
+import type { Map } from 'maplibre-gl';
+export type ParseLayerOrderOpts = {
+    map: Map;
+    layerIds: string[];
+};
+export declare function parseLayerOrder({ map, layerIds }: ParseLayerOrderOpts): string[];
+export type SyncLayerOrderOpts = {
+    expectedLayerOrderId: string[];
+    map: Map;
+    topAnchorLayerId?: string;
+};
+/**
+ * Sync MapLibre layer order to match `expectedLayerOrderId`.
+ *
+ * - Only layers present in `expectedLayerOrderId` are moved.
+ * - Missing layers are ignored (no-op for those entries).
+ * - If `topAnchorLayerId` is provided, the last expected layer is positioned
+ *   just beneath that anchor; otherwise it becomes the topmost layer.
+ *
+ * This helps counteract dynamic reordering issues when using react-map-gl.
+ * See: https://github.com/visgl/react-map-gl/issues/939#issuecomment-1515395161
+ */
+export declare function syncLayerOrder({ expectedLayerOrderId, map, topAnchorLayerId, }: SyncLayerOrderOpts): void;

package/dist/index.mjs

@@ -1,7 +1,7 @@
 import { __assign, __spreadArray, __rest, __awaiter, __generator, __makeTemplateObject } from 'tslib';
-import React, { forwardRef, useContext, createContext, useRef, useMemo, useImperativeHandle, useState, useCallback, useLayoutEffect, useEffect, createRef } from 'react';
+import React, { forwardRef, useContext, createContext, useRef, useMemo, useImperativeHandle, useEffect, useState, useCallback, useLayoutEffect, createRef } from 'react';
 import { Map, Source, Layer, useMap, useControl } from 'react-map-gl/maplibre';
-import { isPlainObject, uniq, uniqBy, pick, omit } from 'lodash-es';
+import { isPlainObject, uniq, uniqBy, isEqual, pick, omit } from 'lodash-es';
 import { Flex, useRefByKey, useLocalState, DropdownMenu } from '@orioro/react-ui-core';
 import styled from 'styled-components';
 import { usePrevious } from 'react-use';
@@ -164,6 +164,58 @@ function parseMapViews(orderedViews, _a) {
   };
 }
 
+//
+// Retrive a list of current ordered layer ids
+// within a given set of layer ids
+//
+function parseLayerOrder(_a) {
+  var map = _a.map,
+    layerIds = _a.layerIds;
+  return map.getLayersOrder().filter(function (layerId) {
+    return layerIds.includes(layerId);
+  });
+}
+/**
+ * Sync MapLibre layer order to match `expectedLayerOrderId`.
+ *
+ * - Only layers present in `expectedLayerOrderId` are moved.
+ * - Missing layers are ignored (no-op for those entries).
+ * - If `topAnchorLayerId` is provided, the last expected layer is positioned
+ *   just beneath that anchor; otherwise it becomes the topmost layer.
+ *
+ * This helps counteract dynamic reordering issues when using react-map-gl.
+ * See: https://github.com/visgl/react-map-gl/issues/939#issuecomment-1515395161
+ */
+function syncLayerOrder(_a) {
+  var expectedLayerOrderId = _a.expectedLayerOrderId,
+    map = _a.map,
+    _b = _a.topAnchorLayerId,
+    topAnchorLayerId = _b === void 0 ? undefined : _b;
+  var currentLayerOrderId = parseLayerOrder({
+    map: map,
+    layerIds: expectedLayerOrderId
+  });
+  if (isEqual(expectedLayerOrderId, currentLayerOrderId)) {
+    return;
+  }
+  expectedLayerOrderId.forEach(function (layerId, index) {
+    if (!map.getLayer(layerId)) {
+      return;
+    }
+    if (index === expectedLayerOrderId.length - 1) {
+      // Place the last expected layer just beneath the top anchor (if any),
+      // otherwise move it to the absolute top.
+      map.moveLayer(layerId, topAnchorLayerId);
+    } else {
+      var beneathLayerId = expectedLayerOrderId[index + 1];
+      if (!map.getLayer(beneathLayerId)) {
+        return;
+      }
+      map.moveLayer(layerId, beneathLayerId);
+    }
+  });
+}
+
 // import { mergeRefs } from 'react-merge-refs'
 //
 // Augment mouse events with info from original view
@@ -230,6 +282,25 @@ var LayeredMap = /*#__PURE__*/forwardRef(function LayeredMapInner(_a, layeredMap
   useImperativeHandle(layeredMapRef, function () {
     return imperativeHandle;
   }, [imperativeHandle]);
+  //
+  // Force sync layer order
+  // https://github.com/visgl/react-map-gl/issues/939#issuecomment-1515395161
+  //
+  useEffect(function () {
+    if (!(parsed === null || parsed === void 0 ? void 0 : parsed.layers) || !mapRef.current) {
+      return;
+    }
+    // Timeout ensures layers are added to map before moving
+    setTimeout(function () {
+      var expectedLayerOrderId = parsed.layers.map(function (layer) {
+        return layer.id;
+      });
+      syncLayerOrder({
+        expectedLayerOrderId: expectedLayerOrderId,
+        map: mapRef.current
+      });
+    }, 0);
+  }, [parsed === null || parsed === void 0 ? void 0 : parsed.layers]);
   return /*#__PURE__*/React.createElement(Map, __assign({
     ref: mapRef,
     interactiveLayerIds: __spreadArray(__spreadArray([], interactiveLayerIdsInput, true), parsed.interactiveLayerIds, true)
@@ -1306,7 +1377,8 @@ function TerrainControl(_a) {
     _f = _a.demSource,
     DEM_SOURCE_SPEC = _f === void 0 ? DEFAULT_DEM_SOURCE_SPEC : _f,
     _g = _a.contourTileOptions,
-    contourTileOptionsInput = _g === void 0 ? DEFAULT_CONTOUR_TILE_OPTIONS : _g;
+    contourTileOptionsInput = _g === void 0 ? DEFAULT_CONTOUR_TILE_OPTIONS : _g,
+    controlContainerProps = __rest(_a, ["value", "onSetValue", "demSourceId", "demSource", "contourTileOptions"]);
   var _contourTileOptions = useMemo(function () {
     return __assign(__assign({}, contourTileOptionsInput), DEFAULT_CONTOUR_TILE_OPTIONS);
   }, [contourTileOptionsInput]);
@@ -1498,7 +1570,7 @@ function TerrainControl(_a) {
       return map.off('style.load', handleStyleLoad);
     };
   }, [(_c = mapRef.current) === null || _c === void 0 ? void 0 : _c.getMap(), settings && settings.enable3d]);
-  return /*#__PURE__*/React.createElement(ControlContainer, null, /*#__PURE__*/React.createElement(DropdownMenu, {
+  return /*#__PURE__*/React.createElement(ControlContainer, __assign({}, controlContainerProps), /*#__PURE__*/React.createElement(DropdownMenu, {
     size: "1",
     options: [{
       label: (/*#__PURE__*/React.createElement(React.Fragment, null, "Relevo", settings && (settings.hillshade || settings.enable3d) && (/*#__PURE__*/React.createElement(Icon, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orioro/react-maplibre-util",
-  "version": "0.5.1",
+  "version": "0.5.3",
   "packageManager": "yarn@4.0.2",
   "type": "module",
   "main": "dist/index.mjs",