@orioro/react-maplibre-util 0.1.0 → 0.2.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @orioro/react-maplibre-util
 
+## 0.2.0
+
+### Minor Changes
+
+- implement 3D maps
+
 ## 0.1.0
 
 ### Minor Changes

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import maplibregl from 'maplibre-gl';
+export type ControlContainerProps = {
+    /** Optional style for the outer container */
+    style?: React.CSSProperties;
+    /** Optional position in MapLibre control bar */
+    position?: maplibregl.ControlPosition;
+    /** Button content and props */
+    children: React.ReactNode;
+};
+export declare function ControlContainer({ style, position, children, }: ControlContainerProps): React.ReactPortal | null;
+export declare namespace ControlContainer {
+    var StyleReset: typeof ControlContainerWithStyleReset;
+}
+declare function ControlContainerWithStyleReset({ style, ...props }: ControlContainerProps): React.JSX.Element;
+export {};

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

@@ -0,0 +1,21 @@
+import React from 'react';
+import { ControlContainerProps } from '../ControlContainer';
+import maplibregl from 'maplibre-gl';
+import type { GlobalContourTileOptions } from 'maplibre-contour/dist/types';
+type TerrainSettings = {
+    hillshade?: boolean;
+    enable3d?: boolean;
+    contours?: boolean;
+};
+type SourceSpecInput = Omit<maplibregl.RasterDEMSourceSpecification, 'type' | 'tiles' | 'url'> & {
+    url: string;
+};
+type TerrainControlProps = Omit<ControlContainerProps, 'children'> & {
+    value?: TerrainSettings | false;
+    onSetValue?: (v: TerrainSettings | false) => any;
+    demSourceId?: string;
+    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 {};

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

@@ -0,0 +1 @@
+export * from './TerrainControl';

package/dist/Controls/index.d.ts

@@ -0,0 +1,2 @@
+export * from './ControlContainer';
+export * from './TerrainControl';

package/dist/HoverTooltip/HoverTooltip.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
 import { FlexProps } from '@orioro/react-ui-core';
 type DataSectionProps = FlexProps & {
-    title: string;
-    entries: [React.ReactNode, React.ReactNode][];
+    title?: string;
+    entries?: [React.ReactNode, React.ReactNode][];
 };
 type HoverTooltipProps = {
     position: [number, number];
@@ -10,5 +10,6 @@ type HoverTooltipProps = {
     dataSections?: DataSectionProps[];
     style?: React.CSSProperties;
 };
+export declare function useClientRect<T extends HTMLElement>(): readonly [DOMRect | null, (node: T | null) => void];
 export declare function HoverTooltip({ position, children, dataSections, style, }: HoverTooltipProps): React.JSX.Element;
 export {};

package/dist/SyncedMaps/SyncedMaps.d.ts

@@ -1,10 +1,12 @@
 import React from 'react';
 import { Map, MapInstance, MapMouseEvent } from 'react-map-gl/maplibre';
+import { MapGeoJSONFeature } from 'maplibre-gl';
 type HoverInfo = {
     index: number;
     point: [number, number];
     coordinates: [number, number];
     event: MapMouseEvent;
+    features?: MapGeoJSONFeature[];
 };
 export declare function makeSyncedMaps({ components, }: {
     components: {
@@ -72,12 +74,12 @@ export declare function makeSyncedMaps({ components, }: {
         width: number;
         height: number;
     };
-    mapStyle?: string | import("@maplibre/maplibre-gl-style-spec").StyleSpecification | import("react-map-gl/maplibre").ImmutableLike<import("@maplibre/maplibre-gl-style-spec").StyleSpecification>;
+    mapStyle?: string | import("maplibre-gl").StyleSpecification | import("react-map-gl/maplibre").ImmutableLike<import("maplibre-gl").StyleSpecification>;
     styleDiffing?: boolean;
-    projection?: import("@maplibre/maplibre-gl-style-spec").ProjectionSpecification | "mercator" | "globe";
-    light?: import("@maplibre/maplibre-gl-style-spec").LightSpecification;
-    terrain?: import("@maplibre/maplibre-gl-style-spec").TerrainSpecification;
-    sky?: import("@maplibre/maplibre-gl-style-spec").SkySpecification;
+    projection?: import("maplibre-gl").ProjectionSpecification | "mercator" | "globe";
+    light?: import("maplibre-gl").LightSpecification;
+    terrain?: import("maplibre-gl").TerrainSpecification;
+    sky?: import("maplibre-gl").SkySpecification;
     interactiveLayerIds?: string[];
     cursor?: string;
 } & import("@vis.gl/react-maplibre/dist/utils/set-globals").GlobalSettings & {
@@ -152,12 +154,12 @@ export declare function makeSyncedMaps({ components, }: {
             width: number;
             height: number;
         };
-        mapStyle?: string | import("@maplibre/maplibre-gl-style-spec").StyleSpecification | import("react-map-gl/maplibre").ImmutableLike<import("@maplibre/maplibre-gl-style-spec").StyleSpecification>;
+        mapStyle?: string | import("maplibre-gl").StyleSpecification | import("react-map-gl/maplibre").ImmutableLike<import("maplibre-gl").StyleSpecification>;
         styleDiffing?: boolean;
-        projection?: import("@maplibre/maplibre-gl-style-spec").ProjectionSpecification | "mercator" | "globe";
-        light?: import("@maplibre/maplibre-gl-style-spec").LightSpecification;
-        terrain?: import("@maplibre/maplibre-gl-style-spec").TerrainSpecification;
-        sky?: import("@maplibre/maplibre-gl-style-spec").SkySpecification;
+        projection?: import("maplibre-gl").ProjectionSpecification | "mercator" | "globe";
+        light?: import("maplibre-gl").LightSpecification;
+        terrain?: import("maplibre-gl").TerrainSpecification;
+        sky?: import("maplibre-gl").SkySpecification;
         interactiveLayerIds?: string[];
         cursor?: string;
     } & import("@vis.gl/react-maplibre/dist/utils/set-globals").GlobalSettings & {
@@ -232,12 +234,12 @@ export declare const SyncedMaps: React.ForwardRefExoticComponent<Omit<Omit<{
         width: number;
         height: number;
     };
-    mapStyle?: string | import("@maplibre/maplibre-gl-style-spec").StyleSpecification | import("react-map-gl/maplibre").ImmutableLike<import("@maplibre/maplibre-gl-style-spec").StyleSpecification>;
+    mapStyle?: string | import("maplibre-gl").StyleSpecification | import("react-map-gl/maplibre").ImmutableLike<import("maplibre-gl").StyleSpecification>;
     styleDiffing?: boolean;
-    projection?: import("@maplibre/maplibre-gl-style-spec").ProjectionSpecification | "mercator" | "globe";
-    light?: import("@maplibre/maplibre-gl-style-spec").LightSpecification;
-    terrain?: import("@maplibre/maplibre-gl-style-spec").TerrainSpecification;
-    sky?: import("@maplibre/maplibre-gl-style-spec").SkySpecification;
+    projection?: import("maplibre-gl").ProjectionSpecification | "mercator" | "globe";
+    light?: import("maplibre-gl").LightSpecification;
+    terrain?: import("maplibre-gl").TerrainSpecification;
+    sky?: import("maplibre-gl").SkySpecification;
     interactiveLayerIds?: string[];
     cursor?: string;
 } & import("@vis.gl/react-maplibre/dist/utils/set-globals").GlobalSettings & {
@@ -312,12 +314,12 @@ export declare const SyncedMaps: React.ForwardRefExoticComponent<Omit<Omit<{
             width: number;
             height: number;
         };
-        mapStyle?: string | import("@maplibre/maplibre-gl-style-spec").StyleSpecification | import("react-map-gl/maplibre").ImmutableLike<import("@maplibre/maplibre-gl-style-spec").StyleSpecification>;
+        mapStyle?: string | import("maplibre-gl").StyleSpecification | import("react-map-gl/maplibre").ImmutableLike<import("maplibre-gl").StyleSpecification>;
         styleDiffing?: boolean;
-        projection?: import("@maplibre/maplibre-gl-style-spec").ProjectionSpecification | "mercator" | "globe";
-        light?: import("@maplibre/maplibre-gl-style-spec").LightSpecification;
-        terrain?: import("@maplibre/maplibre-gl-style-spec").TerrainSpecification;
-        sky?: import("@maplibre/maplibre-gl-style-spec").SkySpecification;
+        projection?: import("maplibre-gl").ProjectionSpecification | "mercator" | "globe";
+        light?: import("maplibre-gl").LightSpecification;
+        terrain?: import("maplibre-gl").TerrainSpecification;
+        sky?: import("maplibre-gl").SkySpecification;
         interactiveLayerIds?: string[];
         cursor?: string;
     } & import("@vis.gl/react-maplibre/dist/utils/set-globals").GlobalSettings & {

package/dist/index.d.ts

@@ -6,3 +6,4 @@ export * from './useHover';
 export * from './scales';
 export * from './util';
 export * from './types';
+export * from './Controls';

package/dist/index.mjs

@@ -1,14 +1,21 @@
 import { __assign, __spreadArray, __rest, __makeTemplateObject } from 'tslib';
-import React, { forwardRef, useRef, useMemo, useImperativeHandle, useEffect, createRef, useState, useCallback } from 'react';
-import { Map, Source, Layer, useMap } from 'react-map-gl/maplibre';
-import { isPlainObject, uniq, uniqBy, pick } from 'lodash-es';
-import { Flex, useRefByKey } from '@orioro/react-ui-core';
+import React, { forwardRef, useRef, useMemo, useImperativeHandle, useState, useCallback, useLayoutEffect, useEffect, createRef } from 'react';
+import { Map, Source, Layer, useMap, useControl } from 'react-map-gl/maplibre';
+import { isPlainObject, uniq, uniqBy, 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';
 import { mergeRefs } from 'react-merge-refs';
 import { ckmeans } from 'simple-statistics';
 import { schemeYlOrRd } from 'd3-scale-chromatic';
 import { maxIndex, range, variance, sum } from 'd3';
 import { bbox } from '@turf/turf';
+import { createPortal } from 'react-dom';
+import { mdiCheck, mdiTerrain, mdiVideo3d } from '@mdi/js';
+import { Icon } from '@mdi/react';
+import { Tooltip } from '@radix-ui/themes';
+import maplibregl from 'maplibre-gl';
+import mlcontour from 'maplibre-contour';
 
 function sortLayers(layers, _a) {
   var existingLayers = _a.existingLayers;
@@ -181,9 +188,8 @@ var LayeredMap = /*#__PURE__*/forwardRef(function LayeredMapInner(_a, layeredMap
   var views = _a.views,
     _b = _a.interactiveLayerIds,
     interactiveLayerIdsInput = _b === void 0 ? [] : _b,
-    children = _a.children;
-    _a.hover;
-    var mapProps = __rest(_a, ["views", "interactiveLayerIds", "children", "hover"]);
+    children = _a.children,
+    mapProps = __rest(_a, ["views", "interactiveLayerIds", "children"]);
   var mapRef = useRef(null);
   //
   // Parse sources, layers and interactiveLayerIds from
@@ -233,15 +239,15 @@ var LayeredMap = /*#__PURE__*/forwardRef(function LayeredMapInner(_a, layeredMap
 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"])));
 var DataSectionHeading = styled.h3(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  margin: 0;\n  line-height: 1.2;\n  font-size: 1rem;\n"], ["\n  margin: 0;\n  line-height: 1.2;\n  font-size: 1rem;\n"])));
 var DataSectionContainer = styled(Flex)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  padding: 15px 10px;\n"], ["\n  padding: 15px 10px;\n"])));
-var EntriesList = styled.ul(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  padding: 0;\n  list-style: none;\n  margin-bottom: 0;\n  > li + li {\n    margin-top: 4px;\n  }\n  // padding: 10px;\n"], ["\n  padding: 0;\n  list-style: none;\n  margin-bottom: 0;\n  > li + li {\n    margin-top: 4px;\n  }\n  // padding: 10px;\n"])));
+var EntriesList = styled.ul(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  padding: 0;\n  list-style: none;\n  margin-top: 0;\n  margin-bottom: 0;\n  > li + li {\n    margin-top: 4px;\n  }\n"], ["\n  padding: 0;\n  list-style: none;\n  margin-top: 0;\n  margin-bottom: 0;\n  > li + li {\n    margin-top: 4px;\n  }\n"])));
 function DataSection(_a) {
   var title = _a.title,
     entries = _a.entries,
     props = __rest(_a, ["title", "entries"]);
-  return entries.length > 0 && (/*#__PURE__*/React.createElement(DataSectionContainer, __assign({
+  return Array.isArray(entries) && entries.length > 0 && (/*#__PURE__*/React.createElement(DataSectionContainer, __assign({
     direction: "column",
     gap: "10px"
-  }, props), title && /*#__PURE__*/React.createElement(DataSectionHeading, null, title), /*#__PURE__*/React.createElement(EntriesList, null, entries.map(function (_a, index) {
+  }, props), title && /*#__PURE__*/React.createElement(DataSectionHeading, null, title), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(EntriesList, null, entries.map(function (_a, index) {
     var label = _a[0],
       value = _a[1];
     return /*#__PURE__*/React.createElement("li", {
@@ -251,19 +257,88 @@ function DataSection(_a) {
         fontWeight: 'bold'
       }
     }, value)) : value);
-  }))));
+  })))));
+}
+function useMaxValue(initial) {
+  var maxRef = useRef(initial);
+  var applyMax = function applyMax(value) {
+    if (value > maxRef.current) {
+      maxRef.current = value;
+    }
+    return maxRef.current;
+  };
+  return applyMax;
+}
+function useClientRect() {
+  var _a = useState(null),
+    rect = _a[0],
+    setRect = _a[1];
+  var ref = useCallback(function (node) {
+    if (node !== null) {
+      setRect(node.getBoundingClientRect());
+    }
+  }, []);
+  useLayoutEffect(function () {
+    var handleResize = function handleResize() {
+      if (ref.current) {
+        setRect(ref.current.getBoundingClientRect());
+      }
+    };
+    window.addEventListener('resize', handleResize);
+    return function () {
+      return window.removeEventListener('resize', handleResize);
+    };
+  }, []);
+  return [rect, ref];
 }
+var PADDING = 15;
+var Y_OFFSET = -20;
 function HoverTooltip(_a) {
   var position = _a.position,
     children = _a.children,
     dataSections = _a.dataSections,
     _b = _a.style,
     style = _b === void 0 ? {} : _b;
+  var ref = useRef(null);
+  var applyMaxW = useMaxValue(0);
+  var applyMaxY = useMaxValue(0);
+  var prevRef = usePrevious(ref.current);
+  var positioning = useMemo(function () {
+    var _a;
+    if (!ref.current) {
+      return {
+        opacity: 0
+      };
+    }
+    var rect = ref.current.getBoundingClientRect();
+    var parentRect = (_a = ref.current.offsetParent) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+    if (!parentRect) {
+      console.warn('could not find parentRect for HoverTooltip');
+      return {
+        opacity: 0
+      };
+    }
+    var maxW = applyMaxW((rect === null || rect === void 0 ? void 0 : rect.width) || 0);
+    var maxH = applyMaxY((rect === null || rect === void 0 ? void 0 : rect.height) || 0);
+    var translateX = position[0] + maxW + PADDING * 2 < parentRect.width ? 'translateX(0)' : "translateX(calc(-100% - ".concat(2 * PADDING, "px))");
+    var translateY = position[1] + maxH + PADDING * 2 + Y_OFFSET < parentRect.height ? 'translateY(0)' : "translateY(calc(-100% + ".concat(PADDING, "px + ").concat(-1 * Y_OFFSET, "px)");
+    return {
+      left: position[0] + PADDING,
+      top: position[1] + Y_OFFSET,
+      transform: "".concat(translateX, " ").concat(translateY),
+      //
+      // If previous ref was not set, it means
+      // that this is the first time the component
+      // is being rendered, thus do not animate
+      //
+      transition: !prevRef ? 'none' : 'transform .3s ease'
+    };
+  }, [position]);
   return /*#__PURE__*/React.createElement(Container, {
-    style: __assign({
-      left: position[0] + 15,
-      top: position[1] - 20
-    }, style)
+    ref: ref,
+    style: __assign(__assign(__assign({}, positioning), {
+      minWidth: 200
+    }), style)
   }, Array.isArray(dataSections) && dataSections.length > 0 && (/*#__PURE__*/React.createElement(Flex, {
     direction: "column"
   }, dataSections.map(function (section, index) {
@@ -274,7 +349,6 @@ function HoverTooltip(_a) {
         width: '100%',
         margin: 0,
         borderBottom: '1px solid currentColor'
-        // marginBottom: 'none',
       }
     })));
   }))), children);
@@ -362,7 +436,6 @@ var MapWindow = /*#__PURE__*/forwardRef(function MapWindowInner(_a, externalRef)
     mapReady = _c[0],
     setMapReady = _c[1];
   var parentMapRef = useMap();
-  console.log('parentMapRef', parentMapRef);
   useSyncedMaps(parentMapRef, mapRef, {
     centerOffsetPixels: centerOffsetPixels
   }, [centerOffsetPixels, mapReady]);
@@ -401,134 +474,6 @@ var MapWindow = /*#__PURE__*/forwardRef(function MapWindowInner(_a, externalRef)
 var GhostCursor = styled.div(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n  --synced-maps-ghost-cursor-size: 24px;\n  position: absolute;\n\n  height: 0;\n  width: 0;\n  color: inherit;\n\n  &::before {\n    content: '';\n    display: block;\n    background-color: currentColor;\n    width: 1px;\n    height: var(--synced-maps-ghost-cursor-size);\n    position: absolute;\n    top: calc(-1 * (var(--synced-maps-ghost-cursor-size) / 2));\n    left: 0;\n  }\n\n  &::after {\n    content: '';\n    display: block;\n    background-color: currentColor;\n    height: 1px;\n    width: var(--synced-maps-ghost-cursor-size);\n    position: absolute;\n    left: calc(-1 * (var(--synced-maps-ghost-cursor-size) / 2));\n    top: 0;\n  }\n"], ["\n  --synced-maps-ghost-cursor-size: 24px;\n  position: absolute;\n\n  height: 0;\n  width: 0;\n  color: inherit;\n\n  &::before {\n    content: '';\n    display: block;\n    background-color: currentColor;\n    width: 1px;\n    height: var(--synced-maps-ghost-cursor-size);\n    position: absolute;\n    top: calc(-1 * (var(--synced-maps-ghost-cursor-size) / 2));\n    left: 0;\n  }\n\n  &::after {\n    content: '';\n    display: block;\n    background-color: currentColor;\n    height: 1px;\n    width: var(--synced-maps-ghost-cursor-size);\n    position: absolute;\n    left: calc(-1 * (var(--synced-maps-ghost-cursor-size) / 2));\n    top: 0;\n  }\n"])));
 var templateObject_1$1;
 
-function parseHoverInfo(index, event) {
-  return {
-    index: index,
-    point: [event.point.x, event.point.y],
-    coordinates: [event.lngLat.lng, event.lngLat.lat],
-    event: event
-  };
-}
-var SingleMapContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject([""], [""])));
-function makeSyncedMaps(_a) {
-  var components = _a.components;
-  var MapComponent = components.Map;
-  return /*#__PURE__*/forwardRef(function SyncedMaps(_a, ref) {
-    var maps = _a.maps,
-      style = _a.style,
-      initialViewState = _a.initialViewState,
-      children = _a.children,
-      getTooltip = _a.tooltip,
-      baseMapProps = __rest(_a, ["maps", "style", "initialViewState", "children", "tooltip"]);
-    var _b = useRefByKey(),
-      mapInstanceRefs = _b[0],
-      setMapInstanceRef = _b[1];
-    var containerRef = useRef(null);
-    var _c = useState(initialViewState),
-      viewState = _c[0],
-      setViewState = _c[1];
-    var onSyncMove = useCallback(function (evt) {
-      return setViewState(evt.viewState);
-    }, []);
-    var _d = useState(false),
-      isDragging = _d[0],
-      setIsDragging = _d[1];
-    var onDragStart = useCallback(function () {
-      return setIsDragging(true);
-    }, [setIsDragging]);
-    var onDragEnd = useCallback(function () {
-      return setIsDragging(false);
-    }, [setIsDragging]);
-    var _e = useState(null),
-      hoverInfo = _e[0],
-      setHoverInfo = _e[1];
-    var _f = useState(null),
-      tooltips = _f[0],
-      setTooltips = _f[1];
-    var _onMouseMove = useCallback(function (index, event) {
-      var nextHoverInfo = parseHoverInfo(index, event);
-      setHoverInfo(nextHoverInfo);
-      setTooltips(typeof getTooltip === 'function' ? maps.map(function (_a, index) {
-        var _b = _a.tooltip,
-          tooltip = _b === void 0 ? true : _b;
-        if (!tooltip) {
-          return null;
-        }
-        return getTooltip(nextHoverInfo, mapInstanceRefs[index]) || null;
-      }) : null);
-    }, [maps]);
-    //
-    // Expose map instances
-    //
-    useImperativeHandle(ref, function () {
-      return {
-        mapInstances: mapInstanceRefs
-      };
-    }, [mapInstanceRefs]);
-    return /*#__PURE__*/React.createElement(Flex, {
-      ref: containerRef,
-      direction: "row",
-      style: __assign({
-        position: 'relative'
-      }, style || {})
-    }, maps.map(function (mapProps, index) {
-      return /*#__PURE__*/React.createElement(SingleMapContainer, {
-        key: mapProps.id || index,
-        style: {
-          position: 'absolute',
-          top: 0,
-          height: '100%',
-          left: "calc(".concat(index, " * (100% / ").concat(maps.length, "))"),
-          width: "calc(100% / ".concat(maps.length, ")")
-        }
-      }, !isDragging && hoverInfo && hoverInfo.index !== index ? (/*#__PURE__*/React.createElement(GhostCursor, {
-        style: {
-          position: 'absolute',
-          left: hoverInfo.point[0],
-          top: hoverInfo.point[1],
-          zIndex: 2
-        }
-      })) : null, !isDragging && Array.isArray(tooltips) && tooltips[index], /*#__PURE__*/React.createElement(MapComponent, __assign({
-        ref: setMapInstanceRef(index),
-        cursor: isDragging ? 'grabbing' : 'default'
-      }, baseMapProps, mapProps, viewState || {}, {
-        style: __assign(__assign({}, mapProps.style || {}), {
-          position: 'absolute',
-          top: 0,
-          left: 0,
-          width: '100%',
-          height: '100%'
-        }),
-        onMove: onSyncMove,
-        onDragStart: onDragStart,
-        onDragEnd: onDragEnd,
-        onMouseMove: function onMouseMove(event) {
-          return _onMouseMove(index, event);
-        },
-        //
-        // There is no notion of mouseenter/mouseleave
-        // in maplibre.gl.
-        //
-        // Use onMouseOut instead
-        //
-        // https://github.com/mapbox/mapbox-gl-js/issues/10594
-        // https://maplibre.org/maplibre-gl-js/docs/API/type-aliases/MapEventType/#mouseout
-        //
-        onMouseOut: function onMouseOut() {
-          setHoverInfo(null);
-          setTooltips(null);
-        }
-      })));
-    }), children);
-  });
-}
-var SyncedMaps = makeSyncedMaps({
-  components: {
-    Map: Map
-  }
-});
-var templateObject_1;
-
 function hoverParseEvent(event) {
   return {
     point: [event.point.x, event.point.y],
@@ -539,6 +484,22 @@ function hoverParseEvent(event) {
 var DEFAULT_PROPS = {
   parseEvent: hoverParseEvent
 };
+function mapSetFeaturesState(map, features, state) {
+  if (!Array.isArray(features)) {
+    return;
+  }
+  features.forEach(function (feat) {
+    if (feat.id) {
+      map.setFeatureState({
+        source: feat.source,
+        sourceLayer: feat.sourceLayer,
+        id: feat.id
+      }, state);
+    } else {
+      console.warn("could not get feature id", feat);
+    }
+  });
+}
 function useHover(props, deps) {
   var _a;
   if (props === void 0) {
@@ -549,8 +510,9 @@ function useHover(props, deps) {
     isDragging = _b[0],
     setIsDragging = _b[1];
   var onDragStart = useCallback(function () {
-    return setIsDragging(true);
-  }, [setIsDragging]);
+    setTooltip(null);
+    setIsDragging(true);
+  }, []);
   var onDragEnd = useCallback(function () {
     return setIsDragging(false);
   }, [setIsDragging]);
@@ -562,8 +524,21 @@ function useHover(props, deps) {
     setHoverInfo = _d[1];
   var onMouseMove = useCallback(function (event) {
     var nextHoverInfo = props.parseEvent(event);
-    setHoverInfo(nextHoverInfo);
     setTooltip(props.tooltip ? props.tooltip(nextHoverInfo) : null);
+    var map = event.target;
+    setHoverInfo(function (prevHoverInfo) {
+      if (Array.isArray(prevHoverInfo === null || prevHoverInfo === void 0 ? void 0 : prevHoverInfo.features)) {
+        mapSetFeaturesState(map, prevHoverInfo.features, {
+          hover: false
+        });
+      }
+      if (Array.isArray(nextHoverInfo === null || nextHoverInfo === void 0 ? void 0 : nextHoverInfo.features)) {
+        mapSetFeaturesState(map, nextHoverInfo.features, {
+          hover: true
+        });
+      }
+      return nextHoverInfo;
+    });
   }, __spreadArray(__spreadArray([], deps, true), [props.tooltip], false));
   //
   // There is no notion of mouseenter/mouseleave
@@ -574,10 +549,15 @@ function useHover(props, deps) {
   // https://github.com/mapbox/mapbox-gl-js/issues/10594
   // https://maplibre.org/maplibre-gl-js/docs/API/type-aliases/MapEventType/#mouseout
   //
-  var onMouseOut = useCallback(function () {
+  var onMouseOut = useCallback(function (event) {
     setHoverInfo(null);
     setTooltip(null);
-  }, [setHoverInfo, setTooltip]);
+    if (Array.isArray(hoverInfo === null || hoverInfo === void 0 ? void 0 : hoverInfo.features)) {
+      mapSetFeaturesState(event.target, hoverInfo.features, {
+        hover: false
+      });
+    }
+  }, [setHoverInfo, setTooltip, hoverInfo]);
   return [{
     onMouseMove: onMouseMove,
     onMouseOut: onMouseOut,
@@ -655,6 +635,15 @@ function _objectWithoutPropertiesLoose(r, e) {
 function _slicedToArray(r, e) {
   return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest();
 }
+function _typeof(o) {
+  "@babel/helpers - typeof";
+
+  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) {
+    return typeof o;
+  } : function (o) {
+    return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
+  }, _typeof(o);
+}
 function _unsupportedIterableToArray(r, a) {
   if (r) {
     if ("string" == typeof r) return _arrayLikeToArray(r, a);
@@ -698,6 +687,159 @@ function withHover(Component, withHoverProps) {
   });
 }
 
+function parseHoverInfo(index, event) {
+  return {
+    index: index,
+    point: [event.point.x, event.point.y],
+    coordinates: [event.lngLat.lng, event.lngLat.lat],
+    event: event,
+    features: event.features
+  };
+}
+var SingleMapContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject([""], [""])));
+function makeSyncedMaps(_a) {
+  var components = _a.components;
+  var MapComponent = components.Map;
+  return /*#__PURE__*/forwardRef(function SyncedMaps(_a, ref) {
+    var maps = _a.maps,
+      style = _a.style,
+      initialViewState = _a.initialViewState,
+      children = _a.children,
+      getTooltip = _a.tooltip,
+      baseMapProps = __rest(_a, ["maps", "style", "initialViewState", "children", "tooltip"]);
+    var _b = useRefByKey(),
+      mapInstanceRefs = _b[0],
+      setMapInstanceRef = _b[1];
+    var containerRef = useRef(null);
+    var _c = useState(initialViewState),
+      viewState = _c[0],
+      setViewState = _c[1];
+    var onSyncMove = useCallback(function (evt) {
+      return setViewState(evt.viewState);
+    }, []);
+    var _d = useState(false),
+      isDragging = _d[0],
+      setIsDragging = _d[1];
+    var onDragEnd = useCallback(function () {
+      return setIsDragging(false);
+    }, [setIsDragging]);
+    var _e = useState(null),
+      hoverInfo = _e[0],
+      setHoverInfo = _e[1];
+    var _f = useState(null),
+      tooltips = _f[0],
+      setTooltips = _f[1];
+    var onDragStart = useCallback(function () {
+      setIsDragging(true);
+      setTooltips(null);
+    }, []);
+    var _onMouseMove = useCallback(function (index, event) {
+      var nextHoverInfo = parseHoverInfo(index, event);
+      setHoverInfo(function (prevHoverInfo) {
+        mapSetFeaturesState(event.target, prevHoverInfo === null || prevHoverInfo === void 0 ? void 0 : prevHoverInfo.features, {
+          hover: false
+        });
+        mapSetFeaturesState(event.target, nextHoverInfo === null || nextHoverInfo === void 0 ? void 0 : nextHoverInfo.features, {
+          hover: true
+        });
+        return nextHoverInfo;
+      });
+      setTooltips(typeof getTooltip === 'function' ? maps.map(function (_a, index) {
+        var _b = _a.tooltip,
+          tooltip = _b === void 0 ? true : _b;
+        if (!tooltip) {
+          return null;
+        }
+        return getTooltip(nextHoverInfo, mapInstanceRefs[index]) || null;
+      }) : null);
+    }, [maps]);
+    //
+    // There is no notion of mouseenter/mouseleave
+    // in maplibre.gl.
+    //
+    // Use onMouseOut instead
+    //
+    // https://github.com/mapbox/mapbox-gl-js/issues/10594
+    // https://maplibre.org/maplibre-gl-js/docs/API/type-aliases/MapEventType/#mouseout
+    //
+    var onMouseOut = useCallback(function (event) {
+      setHoverInfo(null);
+      setTooltips(null);
+      if (Array.isArray(hoverInfo === null || hoverInfo === void 0 ? void 0 : hoverInfo.features)) {
+        mapSetFeaturesState(event.target, hoverInfo.features, {
+          hover: false
+        });
+      }
+    }, [setHoverInfo, setTooltips, hoverInfo]);
+    //
+    // Expose map instances
+    //
+    useImperativeHandle(ref, function () {
+      return {
+        mapInstances: mapInstanceRefs
+      };
+    }, [mapInstanceRefs]);
+    return /*#__PURE__*/React.createElement(Flex, {
+      ref: containerRef,
+      direction: "row",
+      style: __assign({
+        position: 'relative'
+      }, style || {})
+    }, maps.map(function (mapProps, index) {
+      return /*#__PURE__*/React.createElement(SingleMapContainer, {
+        key: mapProps.id || index,
+        style: {
+          position: 'absolute',
+          top: 0,
+          height: '100%',
+          left: "calc(".concat(index, " * (100% / ").concat(maps.length, "))"),
+          width: "calc(100% / ".concat(maps.length, ")")
+        }
+      }, !isDragging && hoverInfo && hoverInfo.index !== index ? (/*#__PURE__*/React.createElement(GhostCursor, {
+        style: {
+          position: 'absolute',
+          left: hoverInfo.point[0],
+          top: hoverInfo.point[1],
+          zIndex: 2
+        }
+      })) : null, Array.isArray(tooltips) && tooltips[index], /*#__PURE__*/React.createElement(MapComponent, __assign({
+        ref: setMapInstanceRef(index),
+        cursor: isDragging ? 'grabbing' : 'default'
+      }, baseMapProps, mapProps, maps.length > 1 ? viewState || {} : {}, {
+        style: __assign(__assign({}, mapProps.style || {}), {
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          width: '100%',
+          height: '100%'
+        }),
+        onMove: onSyncMove,
+        onDragStart: onDragStart,
+        onDragEnd: onDragEnd,
+        onMouseMove: function onMouseMove(event) {
+          return _onMouseMove(index, event);
+        },
+        //
+        // There is no notion of mouseenter/mouseleave
+        // in maplibre.gl.
+        //
+        // Use onMouseOut instead
+        //
+        // https://github.com/mapbox/mapbox-gl-js/issues/10594
+        // https://maplibre.org/maplibre-gl-js/docs/API/type-aliases/MapEventType/#mouseout
+        //
+        onMouseOut: onMouseOut
+      })));
+    }), children);
+  });
+}
+var SyncedMaps = makeSyncedMaps({
+  components: {
+    Map: Map
+  }
+});
+var templateObject_1;
+
 var DEFAULT_MIN_K = 3;
 var DEFAULT_MAX_K = 9;
 //
@@ -805,4 +947,402 @@ function fitGeometry(map, geo, options) {
   return map.fitBounds([[bounds[0], bounds[1]], [bounds[2], bounds[3]]], __assign(__assign({}, DEFAULT_OPTIONS), options));
 }
 
-export { $naturalBreaks, HoverTooltip, LayeredMap, MapWindow, SyncedMaps, augmentFeature, fitGeometry, getSrcLayer, getSrcViewByLayerId, hoverParseEvent, makeSyncedMaps, naturalBreakBounds, parseMapViews, scaleNaturalBreaks, sortLayers, useHover, withHover };
+//
+// Taken from react-map-gl/maplibre
+// https://github.com/visgl/react-map-gl/blob/c7112cf50d6985e8427d6b187d23a4d957791bb7/modules/react-maplibre/src/utils/apply-react-style.ts
+//
+// This is a simplified version of
+// https://github.com/facebook/react/blob/4131af3e4bf52f3a003537ec95a1655147c81270/src/renderers/dom/shared/CSSPropertyOperations.js#L62
+var unitlessNumber = /box|flex|grid|column|lineHeight|fontWeight|opacity|order|tabSize|zIndex/;
+function applyReactStyle(element, styles) {
+  if (!element || !styles) {
+    return;
+  }
+  var style = element.style;
+  for (var key in styles) {
+    var value = styles[key];
+    if (Number.isFinite(value) && !unitlessNumber.test(key)) {
+      style[key] = "".concat(value, "px");
+    } else {
+      style[key] = value;
+    }
+  }
+}
+
+function ensureAddLayer(map, layerId, layer) {
+  if (!map.getLayer(layerId)) {
+    map.addLayer(__assign(__assign({}, layer), {
+      id: layerId
+    }));
+  }
+}
+function ensureRemoveLayer(map, layerId) {
+  if (map.getLayer(layerId)) {
+    map.removeLayer(layerId);
+  }
+}
+function ensureAddSource(map, sourceId, sourceSpec) {
+  if (!map.getSource(sourceId)) {
+    map.addSource(sourceId, sourceSpec);
+  }
+}
+function ensureRemoveSource(map, sourceId) {
+  if (map.getSource(sourceId)) {
+    map.removeSource(sourceId);
+  }
+}
+
+function ControlContainer(_a) {
+  var style = _a.style,
+    _b = _a.position,
+    position = _b === void 0 ? 'top-right' : _b,
+    children = _a.children;
+  var containerRef = useRef(null);
+  var mapRef = useRef(null);
+  var _c = useState(null),
+    mountPoint = _c[0],
+    setMountPoint = _c[1];
+  useControl(function () {
+    var container = document.createElement('div');
+    container.className = 'maplibregl-ctrl maplibregl-ctrl-group';
+    var mount = document.createElement('div');
+    container.appendChild(mount);
+    containerRef.current = container;
+    setMountPoint(mount);
+    return {
+      onAdd: function onAdd(map) {
+        mapRef.current = map;
+        return container;
+      },
+      onRemove: function onRemove() {
+        container.remove();
+        mapRef.current = null;
+      }
+    };
+  }, {
+    position: position
+  });
+  useEffect(function () {
+    if (style && containerRef.current) {
+      applyReactStyle(containerRef.current, style);
+    }
+  }, [style]);
+  return mountPoint ? /*#__PURE__*/createPortal(children, mountPoint) : null;
+}
+function ControlContainerWithStyleReset(_a) {
+  var _b = _a.style,
+    style = _b === void 0 ? {} : _b,
+    props = __rest(_a, ["style"]);
+  return /*#__PURE__*/React.createElement(ControlContainer, __assign({}, props, {
+    style: __assign(__assign({}, style), {
+      boxShadow: 'none',
+      borderRadius: 0
+    })
+  }));
+}
+ControlContainer.StyleReset = ControlContainerWithStyleReset;
+
+var DEFAULT_DEM_SOURCE_ID = 'dem';
+var DEFAULT_DEM_SOURCE_SPEC = {
+  url: 'https://elevation-tiles-prod.s3.amazonaws.com/terrarium/{z}/{x}/{y}.png',
+  encoding: 'terrarium',
+  attribution: 'TEST',
+  tileSize: 256
+};
+function _parseSettings(nextSettings) {
+  if (_typeof(nextSettings) === 'object' && nextSettings !== null && Object.values(nextSettings).every(function (v) {
+    return !v;
+  })) {
+    return false;
+  }
+  return nextSettings;
+}
+function _toggleSetting(setSettings, key) {
+  return setSettings(function (curr) {
+    var _a;
+    return _parseSettings(__assign(__assign({}, curr || {}), (_a = {}, _a[key] = !(curr && curr[key]), _a)));
+  });
+}
+var DEFAULT_CONTOUR_TILE_OPTIONS = {
+  // convert meters to feet, default=1 for meters
+  // multiplier: 3.28084,
+  thresholds: {
+    // zoom: [minor, major]
+    // 3: [200, 1000],
+    // 8: [200, 1000],
+    // 9: [200, 1000],
+    7: [300, 1000],
+    11: [200, 400],
+    12: [100, 300],
+    13: [50, 200],
+    14: [20, 100],
+    15: [10, 50]
+  },
+  // optional, override vector tile parameters:
+  contourLayer: 'contours',
+  elevationKey: 'ele',
+  levelKey: 'level',
+  extent: 4096,
+  buffer: 1
+};
+function TerrainControl(_a) {
+  var _b, _c;
+  var _d = _a.value,
+    externalValue = _d === void 0 ? false : _d,
+    onSetExternalValue = _a.onSetValue,
+    _e = _a.demSourceId,
+    DEM_SOURCE_ID = _e === void 0 ? DEFAULT_DEM_SOURCE_ID : _e,
+    _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;
+  var _contourTileOptions = useMemo(function () {
+    return __assign(__assign({}, contourTileOptionsInput), DEFAULT_CONTOUR_TILE_OPTIONS);
+  }, [contourTileOptionsInput]);
+  var _h = useLocalState(externalValue, onSetExternalValue),
+    settings = _h[0],
+    setSettings = _h[1];
+  var mapRef = useMap();
+  var demSrcInstance = useMemo(function () {
+    var source = new mlcontour.DemSource(__assign(__assign({}, DEM_SOURCE_SPEC), {
+      url: DEM_SOURCE_SPEC.url,
+      encoding: DEM_SOURCE_SPEC.encoding,
+      maxzoom: 13
+    }));
+    // calls maplibregl.addProtocol for the shared cache and contour protocols
+    source.setupMaplibre(maplibregl);
+    return source;
+  }, [DEM_SOURCE_SPEC]);
+  function _applySettings() {
+    var _a;
+    var map = (_a = mapRef === null || mapRef === void 0 ? void 0 : mapRef.current) === null || _a === void 0 ? void 0 : _a.getMap();
+    if (!map || !map.isStyleLoaded()) {
+      return;
+    }
+    if (!settings) {
+      // Remove terrain and hillshade
+      map.setTerrain(null);
+      ensureRemoveLayer(map, 'hillshade');
+      ensureRemoveSource(map, DEM_SOURCE_ID);
+      ensureRemoveLayer(map, 'contour-lines');
+      ensureRemoveLayer(map, 'contour-labels');
+      ensureRemoveSource(map, 'contour-source');
+      // Reset pitch if desired
+      if (map.getPitch() > 0) {
+        map.easeTo({
+          pitch: 0,
+          bearing: 0,
+          duration: 500
+        });
+      }
+      return;
+    }
+    // Add DEM source if not present
+    if (!map.getSource(DEM_SOURCE_ID)) {
+      map.addSource(DEM_SOURCE_ID, __assign(__assign({
+        maxzoom: 13,
+        tileSize: 256
+      }, omit(DEM_SOURCE_SPEC, ['url', 'tiles'])), {
+        type: 'raster-dem',
+        encoding: DEM_SOURCE_SPEC.encoding,
+        tiles: [demSrcInstance.sharedDemProtocolUrl]
+      }));
+    }
+    // Add hillshade layer if not present
+    if (settings.hillshade || settings.enable3d) {
+      ensureAddLayer(map, 'hillshade', {
+        id: 'hillshade',
+        type: 'hillshade',
+        source: DEM_SOURCE_ID
+      });
+    } else {
+      ensureRemoveLayer(map, 'hillshade');
+    }
+    if (settings === null || settings === void 0 ? void 0 : settings.enable3d) {
+      ensureAddSource(map, "".concat(DEM_SOURCE_ID, "_terrain"), {
+        type: 'raster-dem',
+        // url: DEM_SOURCE_URL,
+        encoding: DEM_SOURCE_SPEC.encoding,
+        tiles: [demSrcInstance.sharedDemProtocolUrl],
+        maxzoom: 13,
+        tileSize: 256
+      });
+      map.setTerrain({
+        source: "".concat(DEM_SOURCE_ID, "_terrain"),
+        exaggeration: 1.5
+      });
+      // Optional: only tilt if pitch is low
+      if (map.getPitch() < 40) {
+        map.easeTo({
+          pitch: 60,
+          bearing: -20,
+          duration: 1000
+        });
+      }
+    } else {
+      map.setTerrain(null);
+      // Reset pitch if desired
+      if (map.getPitch() > 0) {
+        map.easeTo({
+          pitch: 0,
+          bearing: 0,
+          duration: 500
+        });
+      }
+    }
+    //
+    // Add contour
+    //
+    if (settings.contours) {
+      ensureAddSource(map, 'contour-source', {
+        type: 'vector',
+        tiles: [demSrcInstance.contourProtocolUrl(_contourTileOptions)],
+        maxzoom: 15
+      });
+      ensureAddLayer(map, 'contour-lines', {
+        id: 'contour-lines',
+        type: 'line',
+        source: 'contour-source',
+        'source-layer': 'contours',
+        paint: {
+          // 'line-color': 'rgba(0,0,0, 50%)',
+          // 'line-color': 'rgb(229, 77, 46, 80%)',
+          // 'line-color': 'rgb(46, 77, 229, 80%)',
+          'line-color': '#FF4500',
+          // level = highest index in thresholds array the elevation is a multiple of
+          'line-width': ['match', ['get', 'level'], 1, 1, 0.5]
+        }
+      });
+      ensureAddLayer(map, 'contour-labels', {
+        id: 'contour-labels',
+        type: 'symbol',
+        source: 'contour-source',
+        'source-layer': 'contours',
+        filter: ['>', ['get', 'level'], 0],
+        layout: {
+          // 'symbol-placement': 'point',
+          'symbol-placement': 'line-center',
+          // 'symbol-placement': ['step', ['zoom'], 'point', 14, 'line'],
+          'text-max-angle': 80,
+          'text-allow-overlap': true,
+          'text-ignore-placement': true,
+          'text-size': 10,
+          // 'text-field': 'test',
+          'text-field': ['concat', ['number-format', ['get', 'ele'], {
+            locale: 'pt-BR'
+          }], 'm'],
+          'text-font': ['Noto Sans Bold']
+        },
+        paint: {
+          'text-halo-color': 'white',
+          'text-halo-width': 1,
+          'text-color': '#E54D2E'
+        }
+      });
+      var CONTOURS_MIN_ZOOM = Object.keys(_contourTileOptions.thresholds).map(function (k) {
+        return parseInt(k);
+      }).sort(function (a, b) {
+        return a - b;
+      })[0];
+      if (map.getZoom() < CONTOURS_MIN_ZOOM) {
+        map.easeTo({
+          zoom: CONTOURS_MIN_ZOOM,
+          duration: 500
+        });
+      }
+    } else {
+      ensureRemoveLayer(map, 'contour-lines');
+      ensureRemoveLayer(map, 'contour-labels');
+      ensureRemoveSource(map, 'contour-source');
+    }
+  }
+  useEffect(function () {
+    _applySettings();
+  }, [(_b = mapRef.current) === null || _b === void 0 ? void 0 : _b.getMap(), settings]);
+  useEffect(function () {
+    var _a;
+    var map = (_a = mapRef.current) === null || _a === void 0 ? void 0 : _a.getMap();
+    if (!map) {
+      return function () {};
+    }
+    var handleStyleLoad = function handleStyleLoad() {
+      map.once('idle', _applySettings);
+      // setTimeout(_applySettings, 1000)
+      // ()
+      // if (settings && settings.enable3d) {
+      //   const terrainDemSourceId = `${DEM_SOURCE_ID}_terrain`
+      //   ensureAddSource(map, terrainDemSourceId, {
+      //     type: 'raster-dem',
+      //     // url: DEM_SOURCE_URL,
+      //     encoding: DEM_SOURCE_ENCODING,
+      //     tiles: [demSrcInstance.sharedDemProtocolUrl],
+      //     maxzoom: 13,
+      //     tileSize: 256,
+      //   })
+      //   map.setTerrain({ source: terrainDemSourceId, exaggeration: 1.5 })
+      // }
+    };
+    map.on('style.load', handleStyleLoad);
+    return function () {
+      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, {
+    size: "1",
+    options: [{
+      label: (/*#__PURE__*/React.createElement(React.Fragment, null, "Relevo", settings && (settings.hillshade || settings.enable3d) && (/*#__PURE__*/React.createElement(Icon, {
+        path: mdiCheck,
+        size: "12px"
+      })))),
+      disabled: settings && settings.enable3d,
+      onClick: function onClick() {
+        return _toggleSetting(setSettings, 'hillshade');
+      }
+    }, {
+      label: (/*#__PURE__*/React.createElement(React.Fragment, null, "3D", settings && settings.enable3d && (/*#__PURE__*/React.createElement(Icon, {
+        path: mdiCheck,
+        size: "12px"
+      })))),
+      onClick: function onClick() {
+        return _toggleSetting(setSettings, 'enable3d');
+      }
+    }, {
+      label: (/*#__PURE__*/React.createElement(React.Fragment, null, "Curvas de n\xEDvel", settings && settings.contours && (/*#__PURE__*/React.createElement(Icon, {
+        path: mdiCheck,
+        size: "12px"
+      })))),
+      onClick: function onClick() {
+        return _toggleSetting(setSettings, 'contours');
+      }
+    }]
+  }, /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    "aria-label": "Relevo",
+    style: {
+      position: 'relative'
+    }
+  }, /*#__PURE__*/React.createElement(Tooltip, {
+    content: "Relevo"
+  }, /*#__PURE__*/React.createElement(Icon, {
+    color: settings ? 'var(--accent-9)' : 'inherit',
+    path: mdiTerrain,
+    size: "24px"
+  })), settings && settings.enable3d && (/*#__PURE__*/React.createElement("div", {
+    style: {
+      width: 14,
+      height: 14,
+      background: 'var(--accent-9)',
+      color: 'var(--accent-contrast)',
+      borderRadius: '50%',
+      position: 'absolute',
+      top: '100%',
+      left: '100%',
+      transform: 'translate(-50%, -50%)'
+    }
+  }, /*#__PURE__*/React.createElement(Icon, {
+    path: mdiVideo3d,
+    size: "14px"
+  }))))));
+}
+
+export { $naturalBreaks, ControlContainer, HoverTooltip, LayeredMap, MapWindow, SyncedMaps, TerrainControl, applyReactStyle, augmentFeature, ensureAddLayer, ensureAddSource, ensureRemoveLayer, ensureRemoveSource, fitGeometry, getSrcLayer, getSrcViewByLayerId, hoverParseEvent, makeSyncedMaps, mapSetFeaturesState, naturalBreakBounds, parseMapViews, scaleNaturalBreaks, sortLayers, useClientRect, useHover, withHover };

package/dist/useHover/useHover.d.ts

@@ -1,18 +1,19 @@
-import { MapMouseEvent } from 'maplibre-gl';
+import { Map, MapGeoJSONFeature, MapMouseEvent } from 'maplibre-gl';
 import React from 'react';
 type DefaultHoverInfo = {
     point: [number, number];
     coordinates: [number, number];
-    features: GeoJSON.Feature[];
+    features: MapGeoJSONFeature[];
 };
 export declare function hoverParseEvent(event: MapMouseEvent): DefaultHoverInfo;
 export type UseHoverProps<DataT = DefaultHoverInfo> = {
     parseEvent?: (event: MapMouseEvent) => DataT;
     tooltip?: (data: DataT) => React.ReactNode;
 };
+export declare function mapSetFeaturesState(map: Map, features: MapGeoJSONFeature[] | undefined, state: any): void;
 export declare function useHover<InfoT = any>(props: UseHoverProps | undefined, deps: any[]): (boolean | InfoT | {
     onMouseMove: (event: MapMouseEvent) => void;
-    onMouseOut: () => void;
+    onMouseOut: (event: any) => void;
     onDragStart: () => void;
     onDragEnd: () => void;
     cursor: string;

package/dist/util/applyReactStyle.d.ts

@@ -0,0 +1,2 @@
+import * as React from 'react';
+export declare function applyReactStyle(element: HTMLElement, styles: React.CSSProperties): void;

package/dist/util/index.d.ts

@@ -1 +1,3 @@
 export * from './fitGeometry';
+export * from './applyReactStyle';
+export * from './misc';

package/dist/util/misc.d.ts

@@ -0,0 +1,5 @@
+import type { LayerSpecification, Map, SourceSpecification } from 'maplibre-gl';
+export declare function ensureAddLayer(map: Map, layerId: string, layer: LayerSpecification): void;
+export declare function ensureRemoveLayer(map: Map, layerId: string): void;
+export declare function ensureAddSource(map: Map, sourceId: string, sourceSpec: SourceSpecification): void;
+export declare function ensureRemoveSource(map: Map, sourceId: string): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orioro/react-maplibre-util",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "packageManager": "yarn@4.0.2",
   "type": "module",
   "main": "dist/index.mjs",
@@ -29,27 +29,34 @@
     "storybook": "^8.0.0"
   },
   "dependencies": {
+    "@mdi/js": "^7.4.47",
+    "@mdi/react": "^1.6.1",
     "@orioro/react-chart-util": "^0.1.0",
     "@orioro/react-select": "^3.0.2",
     "@orioro/react-ui-core": "^0.0.6",
     "@orioro/resolve": "^0.1.2",
     "@orioro/scale-util": "^0.0.2",
+    "@radix-ui/themes": "^3.2.1",
     "@turf/turf": "^7.2.0",
     "@types/d3": "^7.4.3",
     "@types/d3-scale-chromatic": "^3.1.0",
     "@types/geojson": "^7946.0.16",
+    "@types/react-dom": "^19.1.3",
     "d3": "^7.9.0",
     "d3-scale-chromatic": "^3.1.0",
     "greenlet": "^1.1.0",
     "lodash-es": "^4.17.21",
+    "maplibre-contour": "^0.1.0",
     "maplibre-gl": "^5.1.0",
     "query-string": "^9.1.1",
     "react": "^18.2.0",
+    "react-dom": "^19.1.0",
     "react-map-gl": "^8.0.0",
     "react-merge-refs": "^2.1.1",
     "react-use": "^17.5.0",
     "simple-statistics": "^7.8.7",
     "styled-components": "^6.1.8",
-    "tslib": "^2.8.1"
+    "tslib": "^2.8.1",
+    "type-fest": "^4.40.1"
   }
 }