@orioro/react-maplibre-util 0.0.1

package/dist/index.mjs

@@ -0,0 +1,825 @@
+import { __assign, __spreadArray, __rest, __makeTemplateObject } from 'tslib';
+import React, { forwardRef, useRef, useMemo, useImperativeHandle, useEffect, useState, useCallback, createRef } from 'react';
+import { Map, Source, Layer, useMap } from 'react-map-gl/maplibre';
+import { isPlainObject, uniqBy, uniq, pick } from 'lodash-es';
+import { Flex, useRefByKey } from '@orioro/react-ui-core';
+import styled from 'styled-components';
+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';
+
+function sortLayers(layers, _a) {
+  var existingLayers = _a.existingLayers;
+  var existingLayersById = existingLayers ? Object.fromEntries(existingLayers.map(function (layer) {
+    return [layer.id, layer];
+  })) : {};
+  //
+  // Apply ordering to layers
+  //
+  // About layer ordering:
+  // - Later in the list → Rendered on top (higher z-index).
+  // - Earlier in the list → Rendered below.
+  //
+  return layers.map(function (layer, index) {
+    return __assign(__assign({}, layer), {
+      //
+      // Allow for zIndex overriding
+      // In case no zIndex is set, respect the order in which
+      // layers were provided.
+      //
+      // Layers that come after are rendered on top of previous layers
+      //
+      zIndex: typeof layer.zIndex === 'number' ? layer.zIndex : index
+    });
+  })
+  //
+  // Order layers in ascending zIndex order, so that
+  // layers with higher zIndex are rendered later and on top of
+  // previous ones
+  //
+  .sort(function (layerA, layerB) {
+    return layerA.zIndex >= layerB.zIndex ? 1 : -1;
+  }).map(function (layer, index, sortedLayers) {
+    if (index === sortedLayers.length - 1) {
+      // is last layer
+      return layer;
+    } else {
+      var beforeId = sortedLayers[index + 1].id;
+      //
+      // If the layer this layer should be placed before exists,
+      // set beforeId. Otherwise, ignore beforeId.
+      //
+      // This handles the scenario in which layers are being added
+      // simultaneously
+      //
+      return existingLayersById[beforeId] ? __assign(__assign({}, layer), {
+        beforeId: beforeId
+      }) : layer;
+    }
+  });
+}
+function getSrcLayer(parsed, layerId) {
+  return parsed.layers.find(function (layer) {
+    return layer.id === layerId;
+  }) || null;
+}
+/**
+ * Given a layerId, attempts to retrieve the source mapView
+ *
+ * @param  {MapViewsParseResult} parsed  [description]
+ * @param  {string}              layerId [description]
+ * @param  {[type]}                      [description]
+ * @return {MapView}                     [description]
+ */
+function getSrcViewByLayerId(parsed, layerId) {
+  var layer = getSrcLayer(parsed, layerId);
+  return layer ? parsed.srcMapViews.find(function (view) {
+    return view.id === layer.viewId;
+  }) || null : null;
+}
+function augmentFeature(parsed, feature) {
+  //
+  // Augment the feature with the mapView property
+  //
+  var mapView = getSrcViewByLayerId(parsed, feature.layer.id);
+  var layer = getSrcLayer(parsed, feature.layer.id);
+  return __assign(__assign({}, feature), {
+    layer: layer,
+    mapView: mapView
+  });
+}
+function parseMapViews(orderedViews, _a) {
+  var _b = _a === void 0 ? {} : _a,
+    existingLayers = _b.existingLayers;
+  var parsed = orderedViews.reduce(function (acc, _a) {
+    var viewId = _a.id,
+      sources = _a.sources,
+      layers = _a.layers;
+    var _sources = isPlainObject(sources) ? Object.entries(sources).reduce(function (acc, _a) {
+      var sourceRelativeId = _a[0],
+        source = _a[1];
+      return !source ? acc : __spreadArray(__spreadArray([], acc, true), [__assign(__assign({}, source), {
+        viewId: viewId,
+        id: source.absoluteId ? source.absoluteId : "".concat(viewId, "__").concat(sourceRelativeId)
+      })], false);
+    }, []) : [];
+    var _b = isPlainObject(layers) ? Object.entries(layers).reduce(function (acc, _a) {
+        var layerRelativeId = _a[0],
+          layer = _a[1];
+        if (!layer) {
+          return acc;
+        }
+        var layerId = layer.absoluteId ? layer.absoluteId : "".concat(viewId, "__").concat(layerRelativeId);
+        return {
+          interactiveLayerIds: layer.interactive ? __spreadArray(__spreadArray([], acc.interactiveLayerIds, true), [layerId], false) : acc.interactiveLayerIds,
+          _layers: __spreadArray(__spreadArray([], acc._layers, true), [__assign(__assign({}, layer), {
+            viewId: viewId,
+            id: layerId,
+            source: layer.absoluteSourceId ? layer.absoluteSourceId : "".concat(viewId, "__").concat(layer.source)
+          })], false)
+        };
+      }, {
+        interactiveLayerIds: [],
+        _layers: []
+      }) : {
+        _layers: [],
+        interactiveLayerIds: []
+      },
+      _layers = _b._layers,
+      interactiveLayerIds = _b.interactiveLayerIds;
+    return {
+      sources: __spreadArray(__spreadArray([], acc.sources, true), _sources, true),
+      layers: __spreadArray(__spreadArray([], acc.layers, true), _layers, true),
+      interactiveLayerIds: __spreadArray(__spreadArray([], acc.interactiveLayerIds, true), interactiveLayerIds, true)
+    };
+  }, {
+    sources: [],
+    layers: [],
+    interactiveLayerIds: []
+  });
+  return {
+    srcMapViews: orderedViews,
+    sources: uniqBy(parsed.sources, 'id'),
+    layers: sortLayers(uniqBy(parsed.layers, 'id'), {
+      existingLayers: existingLayers
+    }),
+    interactiveLayerIds: uniq(parsed.interactiveLayerIds)
+  };
+}
+
+// import { mergeRefs } from 'react-merge-refs'
+//
+// Augment mouse events with info from original view
+//
+var VIEW_AUGMENTED_EVENT_HANDLERS = ['onMouseDown', 'onMouseUp', 'onMouseOver',
+//
+// There is no notion of mouseenter/mouseleave
+// in maplibre.gl
+//
+// https://github.com/mapbox/mapbox-gl-js/issues/10594
+// https://maplibre.org/maplibre-gl-js/docs/API/type-aliases/MapEventType/#mouseout
+//
+// 'onMouseEnter',
+// 'onMouseLeave',
+'onMouseMove', 'onMouseOut', 'onClick', 'onDblClick', 'onContextMenu'];
+function useViewAugmentedEventHandlers(props, parsedMapViews) {
+  var handlers = Object.fromEntries(VIEW_AUGMENTED_EVENT_HANDLERS.map(function (handlerName) {
+    return typeof props[handlerName] === 'function' ? [handlerName, function (evt) {
+      var _a;
+      return props[handlerName](__assign(__assign({}, evt), {
+        features: (_a = evt.features) === null || _a === void 0 ? void 0 : _a.map(function (feat) {
+          return augmentFeature(parsedMapViews, feat);
+        })
+      }));
+    }] : null;
+  }).filter(Boolean));
+  return handlers;
+}
+var LayeredMap = /*#__PURE__*/forwardRef(function LayeredMapInner(_a, layeredMapRef) {
+  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"]);
+  var mapRef = useRef(null);
+  //
+  // Parse sources, layers and interactiveLayerIds from
+  // views spec
+  //
+  var parsed = useMemo(function () {
+    var _a;
+    return views ? parseMapViews(views, {
+      existingLayers: mapRef.current ? ((_a = mapRef.current.getStyle()) === null || _a === void 0 ? void 0 : _a.layers) || null : null
+    }) : {
+      srcMapViews: [],
+      sources: [],
+      layers: [],
+      interactiveLayerIds: []
+    };
+  }, [views, mapRef.current]);
+  var evtHandlers = useViewAugmentedEventHandlers(mapProps, parsed);
+  useImperativeHandle(layeredMapRef, function () {
+    return {
+      map: mapRef.current,
+      augmentFeature: augmentFeature.bind(null, parsed),
+      getSrcViewByLayerId: getSrcViewByLayerId.bind(null, parsed),
+      getSrcLayer: getSrcLayer.bind(null, parsed)
+    };
+  }, [mapRef.current, parsed]);
+  return /*#__PURE__*/React.createElement(Map, __assign({
+    ref: mapRef,
+    interactiveLayerIds: __spreadArray(__spreadArray([], interactiveLayerIdsInput, true), parsed.interactiveLayerIds, true)
+  }, mapProps, evtHandlers), children, parsed.sources.map(function (_a) {
+    var id = _a.id;
+      _a.viewId;
+      var source = __rest(_a, ["id", "viewId"]);
+    return /*#__PURE__*/React.createElement(Source, __assign({
+      key: id,
+      id: id
+    }, source));
+  }), parsed.layers.map(function (_a) {
+    var id = _a.id,
+      layer = __rest(_a, ["id"]);
+    return /*#__PURE__*/React.createElement(Layer, __assign({
+      key: id,
+      id: id
+    }, layer));
+  }));
+});
+
+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"])));
+function DataSection(_a) {
+  var title = _a.title,
+    entries = _a.entries,
+    props = __rest(_a, ["title", "entries"]);
+  return 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) {
+    var label = _a[0],
+      value = _a[1];
+    return /*#__PURE__*/React.createElement("li", {
+      key: index
+    }, typeof label === 'string' ? /*#__PURE__*/React.createElement("span", null, label, ": ") : label, typeof value === 'string' ? ( /*#__PURE__*/React.createElement("span", {
+      style: {
+        fontWeight: 'bold'
+      }
+    }, value)) : value);
+  }))));
+}
+function HoverTooltip(_a) {
+  var position = _a.position,
+    children = _a.children,
+    dataSections = _a.dataSections,
+    _b = _a.style,
+    style = _b === void 0 ? {} : _b;
+  return /*#__PURE__*/React.createElement(Container, {
+    style: __assign({
+      left: position[0] + 15,
+      top: position[1] - 20
+    }, style)
+  }, Array.isArray(dataSections) && dataSections.length > 0 && ( /*#__PURE__*/React.createElement(Flex, {
+    direction: "column"
+  }, dataSections.map(function (section, index) {
+    return /*#__PURE__*/React.createElement(React.Fragment, {
+      key: index
+    }, /*#__PURE__*/React.createElement(DataSection, __assign({}, section)), index === dataSections.length - 1 ? null : ( /*#__PURE__*/React.createElement("div", {
+      style: {
+        width: '100%',
+        margin: 0,
+        borderBottom: '1px solid currentColor'
+        // marginBottom: 'none',
+      }
+    })));
+  }))), children);
+}
+var templateObject_1$2, templateObject_2, templateObject_3, templateObject_4;
+
+function syncMaps(mainMap, targetMap, _a) {
+  var centerOffsetPixels = _a.centerOffsetPixels;
+  var center = mainMap.getCenter();
+  var zoom = mainMap.getZoom();
+  var bearing = mainMap.getBearing();
+  var pitch = mainMap.getPitch();
+  if (!centerOffsetPixels || !mainMap || !targetMap) {
+    console.warn('could not sync maps, missing centerOffsetPixels || mainMap || targetMap');
+    return;
+  }
+  // Convert the center to a pixel point
+  var centerPoint = mainMap.project(center);
+  // Apply the offset
+  var offsetPoint = {
+    x: centerPoint.x + centerOffsetPixels.x,
+    y: centerPoint.y + centerOffsetPixels.y
+  };
+  // Convert the offset pixel back to a lngLat
+  var newCenter = mainMap.unproject(offsetPoint);
+  // Move the mini-map to the new center
+  targetMap.jumpTo({
+    center: newCenter,
+    zoom: zoom,
+    bearing: bearing,
+    pitch: pitch
+  });
+}
+
+function useSyncedMaps(mainMapRef, otherMapRef, options, deps) {
+  useEffect(function () {
+    var _a, _b;
+    var mainMap = (_a = mainMapRef.current) === null || _a === void 0 ? void 0 : _a.getMap();
+    var otherMap = (_b = otherMapRef.current) === null || _b === void 0 ? void 0 : _b.getMap();
+    if (!mainMap || !otherMap) {
+      return;
+    }
+    var _syncMainToOther = function _syncMainToOther() {
+      syncMaps(mainMap, otherMap, options);
+    };
+    mainMap.on('move', _syncMainToOther);
+    _syncMainToOther();
+    // const _syncOtherToMain = () => {
+    //   syncMaps(otherMap, mainMap, options)
+    // }
+    // otherMap.on('move', _syncOtherToMain)
+    return function () {
+      mainMap.off('move', _syncMainToOther);
+      // otherMap.off('move', _syncOtherToMain)
+    };
+  }, __spreadArray(__spreadArray([], deps, true), [options], false));
+}
+
+function getCenterOffsetPixels(mainMapContainer, targetMapContainer) {
+  var mainRect = mainMapContainer.getBoundingClientRect();
+  var targetRect = targetMapContainer.getBoundingClientRect();
+  var mainCenter = {
+    x: mainRect.left + mainRect.width / 2,
+    y: mainRect.top + mainRect.height / 2
+  };
+  var targetCenter = {
+    x: targetRect.left + targetRect.width / 2,
+    y: targetRect.top + targetRect.height / 2
+  };
+  return {
+    x: targetCenter.x - mainCenter.x,
+    y: targetCenter.y - mainCenter.y
+  };
+}
+
+var MapWindow = /*#__PURE__*/forwardRef(function MapWindowInner(_a, externalRef) {
+  var externalOnLoad = _a.onLoad,
+    mapProps = __rest(_a, ["onLoad"]);
+  var mapRef = /*#__PURE__*/createRef(null);
+  var mergedRef = mergeRefs([externalRef, mapRef]);
+  var _b = useState(null),
+    centerOffsetPixels = _b[0],
+    setCenterOffsetPixels = _b[1];
+  var _c = useState(false),
+    mapReady = _c[0],
+    setMapReady = _c[1];
+  var parentMapRef = useMap();
+  console.log('parentMapRef', parentMapRef);
+  useSyncedMaps(parentMapRef, mapRef, {
+    centerOffsetPixels: centerOffsetPixels
+  }, [centerOffsetPixels, mapReady]);
+  var _onLoad = useCallback(function (e) {
+    var _a, _b, _c, _d, _e;
+    var parentMap = (_a = parentMapRef.current) === null || _a === void 0 ? void 0 : _a.getMap();
+    var parentEl = (_c = (_b = parentMapRef.current) === null || _b === void 0 ? void 0 : _b.getContainer) === null || _c === void 0 ? void 0 : _c.call(_b);
+    var selfMap = e.target;
+    var selfEl = (_e = (_d = e.target) === null || _d === void 0 ? void 0 : _d.getContainer) === null || _e === void 0 ? void 0 : _e.call(_d);
+    //
+    // TODO: probably we need to check for parentMap load event as well.
+    //
+    if (!parentMap || !selfMap || !parentEl || !selfEl) {
+      console.log('MISSING', {
+        parentMap: parentMap,
+        selfMap: selfMap,
+        parentEl: parentEl,
+        selfEl: selfEl
+      });
+      return;
+    }
+    setCenterOffsetPixels(getCenterOffsetPixels(parentEl, selfEl));
+    setMapReady(true);
+    if (typeof externalOnLoad === 'function') {
+      externalOnLoad(e);
+    }
+  }, [setCenterOffsetPixels, setMapReady]);
+  return /*#__PURE__*/React.createElement(Map, __assign({
+    attributionControl: false
+  }, mapProps, {
+    onLoad: _onLoad,
+    ref: mergedRef
+  }));
+});
+
+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],
+    coordinates: [event.lngLat.lng, event.lngLat.lat],
+    features: event.features
+  };
+}
+var DEFAULT_PROPS = {
+  parseEvent: hoverParseEvent
+};
+function useHover(props, deps) {
+  var _a;
+  if (props === void 0) {
+    props = DEFAULT_PROPS;
+  }
+  props = __assign(__assign({}, DEFAULT_PROPS), props);
+  var _b = useState(false),
+    isDragging = _b[0],
+    setIsDragging = _b[1];
+  var onDragStart = useCallback(function () {
+    return setIsDragging(true);
+  }, [setIsDragging]);
+  var onDragEnd = useCallback(function () {
+    return setIsDragging(false);
+  }, [setIsDragging]);
+  var _c = useState(null),
+    tooltip = _c[0],
+    setTooltip = _c[1];
+  var _d = useState(null),
+    hoverInfo = _d[0],
+    setHoverInfo = _d[1];
+  var onMouseMove = useCallback(function (event) {
+    var nextHoverInfo = props.parseEvent(event);
+    setHoverInfo(nextHoverInfo);
+    setTooltip(props.tooltip ? props.tooltip(nextHoverInfo) : null);
+  }, __spreadArray(__spreadArray([], deps, true), [props.tooltip], false));
+  //
+  // 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 () {
+    setHoverInfo(null);
+    setTooltip(null);
+  }, [setHoverInfo, setTooltip]);
+  return [{
+    onMouseMove: onMouseMove,
+    onMouseOut: onMouseOut,
+    onDragStart: onDragStart,
+    onDragEnd: onDragEnd,
+    cursor: isDragging ? 'grabbing' : ((_a = hoverInfo === null || hoverInfo === void 0 ? void 0 : hoverInfo.features) === null || _a === void 0 ? void 0 : _a.length) > 0 ? 'default' : 'grab',
+    children: isDragging ? null : /*#__PURE__*/React.createElement(React.Fragment, null, tooltip)
+  }, hoverInfo, isDragging];
+}
+
+function _iterableToArrayLimit(r, l) {
+  var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
+  if (null != t) {
+    var e,
+      n,
+      i,
+      u,
+      a = [],
+      f = !0,
+      o = !1;
+    try {
+      if (i = (t = t.call(r)).next, 0 === l) {
+        if (Object(t) !== t) return;
+        f = !1;
+      } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
+    } catch (r) {
+      o = !0, n = r;
+    } finally {
+      try {
+        if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return;
+      } finally {
+        if (o) throw n;
+      }
+    }
+    return a;
+  }
+}
+function _extends() {
+  _extends = Object.assign ? Object.assign.bind() : function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends.apply(this, arguments);
+}
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+  return target;
+}
+function _objectWithoutProperties(source, excluded) {
+  if (source == null) return {};
+  var target = _objectWithoutPropertiesLoose(source, excluded);
+  var key, i;
+  if (Object.getOwnPropertySymbols) {
+    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+    for (i = 0; i < sourceSymbolKeys.length; i++) {
+      key = sourceSymbolKeys[i];
+      if (excluded.indexOf(key) >= 0) continue;
+      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+      target[key] = source[key];
+    }
+  }
+  return target;
+}
+function _slicedToArray(arr, i) {
+  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
+}
+function _arrayWithHoles(arr) {
+  if (Array.isArray(arr)) return arr;
+}
+function _unsupportedIterableToArray(o, minLen) {
+  if (!o) return;
+  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
+  var n = Object.prototype.toString.call(o).slice(8, -1);
+  if (n === "Object" && o.constructor) n = o.constructor.name;
+  if (n === "Map" || n === "Set") return Array.from(o);
+  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
+}
+function _arrayLikeToArray(arr, len) {
+  if (len == null || len > arr.length) len = arr.length;
+  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
+  return arr2;
+}
+function _nonIterableRest() {
+  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+
+var _excluded = ["cursor", "onMouseMove", "onDragStart", "onDragEnd", "children"];
+function useMergedCallback(cbA, cbB) {
+  return useCallback(function () {
+    if (typeof cbA === 'function') {
+      cbA.apply(void 0, arguments);
+    }
+    if (typeof cbB === 'function') {
+      cbB.apply(void 0, arguments);
+    }
+  }, [cbA, cbB]);
+}
+function withHover(Component, withHoverProps) {
+  return /*#__PURE__*/forwardRef(function WithHover(_ref, ref) {
+    var cursor = _ref.cursor,
+      onMouseMove = _ref.onMouseMove,
+      onDragStart = _ref.onDragStart,
+      onDragEnd = _ref.onDragEnd,
+      children = _ref.children,
+      restProps = _objectWithoutProperties(_ref, _excluded);
+    //
+    // Hover stuff
+    //
+    var _useHover = useHover(withHoverProps, []),
+      _useHover2 = _slicedToArray(_useHover, 1),
+      hoverProps = _useHover2[0];
+    return /*#__PURE__*/React.createElement(Component, _extends({}, restProps, {
+      ref: ref,
+      cursor: cursor || hoverProps.cursor,
+      onMouseMove: useMergedCallback(onMouseMove, hoverProps.onMouseMove),
+      onDragStart: useMergedCallback(onDragStart, hoverProps.onDragStart),
+      onDragEnd: useMergedCallback(onDragEnd, hoverProps.onDragEnd)
+    }), hoverProps.children, children);
+  });
+}
+
+var DEFAULT_MIN_K = 3;
+var DEFAULT_MAX_K = 9;
+//
+// https://observablehq.com/@visionscarto/natural-breaks
+//
+var elbowiness = function elbowiness(numbers, _a) {
+  _a[0];
+    var maxK = _a[1];
+  var intrass = __spreadArray([null], range(1, maxK + 1).map(function (k) {
+    return k === 1 ? variance(numbers) : sum(ckmeans(numbers, k), function (v) {
+      return variance(v);
+    });
+  }), true);
+  return range(0, intrass.length - 1).map(function (k) {
+    return k < 2 ? NaN : Math.log(intrass[k - 1]) + Math.log(intrass[k + 1]) - 2 * Math.log(intrass[k]);
+  });
+};
+function within(value, _a) {
+  var min = _a[0],
+    max = _a[1];
+  return Math.max(min, Math.min(max, value));
+}
+var autoK = function autoK(numbers, _a) {
+  var _b = _a === void 0 ? [DEFAULT_MIN_K, DEFAULT_MAX_K] : _a,
+    minK = _b[0],
+    maxK = _b[1];
+  return within(maxIndex(elbowiness(numbers, [minK, maxK]), function (score, k) {
+    return score / (1 + Math.sqrt(k));
+  }), [minK, maxK]);
+};
+
+// import greenlet from 'greenlet'
+var DEFAULT_COLOR_SCALE = schemeYlOrRd;
+function naturalBreakBounds(values, k) {
+  var groups = ckmeans(values, k);
+  var bounds = groups.map(function (group) {
+    return [group[0], group[group.length - 1]];
+  });
+  return bounds;
+}
+var DEFAULT_COLOR = 'transparent';
+function scaleNaturalBreaks(_a) {
+  var values = _a.values,
+    k = _a.k,
+    _b = _a.defaultColor,
+    defaultColor = _b === void 0 ? DEFAULT_COLOR : _b,
+    _c = _a.minK,
+    minK = _c === void 0 ? DEFAULT_MIN_K : _c,
+    _d = _a.maxK,
+    maxK = _d === void 0 ? DEFAULT_MAX_K : _d,
+    _e = _a.scalesByK,
+    scalesByK = _e === void 0 ? DEFAULT_COLOR_SCALE : _e;
+  try {
+    values = values.filter(function (v) {
+      return typeof v === 'number' && !Number.isNaN(v);
+    });
+    k = typeof k === 'number' ? within(k, [minK, maxK]) : autoK(values, [minK, maxK]);
+    var bounds = naturalBreakBounds(values, k);
+    var scale_1 = scalesByK[k];
+    //
+    // Will produce an array such as:
+    // [
+    //   "below_10",
+    //   10,
+    //   "between_10_20",
+    //   20,
+    //   "between_20_30",
+    //   30,
+    //   "above_30"
+    // ]
+    //
+    var steps = bounds.map(function (_a, index) {
+      var min = _a[0],
+        max = _a[1];
+      var color = scale_1[index];
+      return index === 0 ? [defaultColor, min, color] : [min, color];
+    }).flat(1);
+    return steps;
+  } catch (err) {
+    console.error(err);
+    return null;
+  }
+}
+var $naturalBreaks = function $naturalBreaks(_a) {
+  var values = _a[0],
+    opt = _a[1];
+  var breaks = scaleNaturalBreaks(__assign({
+    values: values
+  }, isPlainObject(opt) ? pick(opt, ['scalesByK', 'k', 'minK', 'maxK']) : {}));
+  return breaks;
+};
+
+var DEFAULT_OPTIONS = {
+  padding: {
+    top: 60,
+    bottom: 60,
+    left: 60,
+    right: 60
+  }
+};
+function fitGeometry(map, geo, options) {
+  if (options === void 0) {
+    options = DEFAULT_OPTIONS;
+  }
+  var bounds = bbox(geo);
+  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 };