@orioro/react-maplibre-util 0.4.0 → 0.5.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @orioro/react-maplibre-util
 
+## 0.5.0
+
+### Minor Changes
+
+- implement onClick handler on LayeredMap layers; implement DynamicImage component and CustomSprite
+
 ## 0.4.0
 
 ### Minor Changes

package/README.md

@@ -1 +0,0 @@
-# Template react lib

package/dist/Controls/InspectControl/InspectControl.d.ts

@@ -1,3 +1,2 @@
 import { MaplibreInspectOptions } from '@maplibre/maplibre-gl-inspect';
-import '@maplibre/maplibre-gl-inspect/dist/maplibre-gl-inspect.css';
 export declare function InspectControl(props: MaplibreInspectOptions): null;

package/dist/CustomSprite/CustomSprite.d.ts

@@ -0,0 +1,5 @@
+type CustomSpriteProps = {
+    url: string;
+};
+export declare function CustomSprite({ url }: CustomSpriteProps): null;
+export {};

package/dist/CustomSprite/index.d.ts

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

package/dist/DynamicImages/DynamicImages.d.ts

@@ -0,0 +1,7 @@
+import { Map, MapStyleImageMissingEvent, StyleImageMetadata } from 'maplibre-gl';
+type OnGenerateImageRes = Parameters<Map['addImage']>[1] | [Parameters<Map['addImage']>[1], Partial<StyleImageMetadata>];
+type DynamicImagesProps = {
+    onGenerateImage: (imageId: string, event: MapStyleImageMissingEvent) => OnGenerateImageRes | Promise<OnGenerateImageRes>;
+};
+export declare function DynamicImages({ onGenerateImage }: DynamicImagesProps): null;
+export {};

package/dist/DynamicImages/index.d.ts

@@ -0,0 +1,2 @@
+export * from './DynamicImages';
+export * from './svgImages';

package/dist/DynamicImages/svgImages/assets.d.ts

@@ -0,0 +1 @@
+export declare const MARKER = "<?xml version=\"1.0\" encoding=\"utf-8\"?>\n<svg fill=\"#000000\" width=\"800px\" height=\"800px\" viewBox=\"-64 0 512 512\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M172.268 501.67C26.97 291.031 0 269.413 0 192 0 85.961 85.961 0 192 0s192 85.961 192 192c0 77.413-26.97 99.031-172.268 309.67-9.535 13.774-29.93 13.773-39.464 0z\"/></svg>";

package/dist/DynamicImages/svgImages/index.d.ts

@@ -0,0 +1,32 @@
+import { StyleImageMetadata } from 'maplibre-gl';
+type IconPathToSvgOptions = {
+    size?: number;
+    fill?: string;
+    stroke?: string;
+    strokeWidth?: string | number;
+    viewBox?: string;
+    style?: string;
+};
+export declare function iconPathToSvg(path: string, { size, fill, stroke, strokeWidth, viewBox, style, }?: IconPathToSvgOptions): string;
+/**
+ * Renders an SVG string onto a canvas and returns an object compatible with maplibre `addImage`.
+ *
+ * @param svgString - The SVG markup as a string
+ * @param pixelRatio - (Optional) device pixel ratio, defaults to window.devicePixelRatio
+ * @returns Promise resolving to { width, height, data, pixelRatio }
+ */
+export declare function svgToMaplibreImage(svgString: string, pixelRatio?: number): Promise<[
+    {
+        width: number;
+        height: number;
+        data: Uint8ClampedArray;
+    },
+    Partial<StyleImageMetadata>
+]>;
+export declare function svgIconId(iconId: string, options?: IconPathToSvgOptions): string;
+export declare function svgIconGenerator(iconPathsById: Record<string, string>): (imageId: string) => Promise<[{
+    width: number;
+    height: number;
+    data: Uint8ClampedArray;
+}, Partial<StyleImageMetadata>]>;
+export {};

package/dist/LayeredMap/index.d.ts

@@ -1,2 +1,3 @@
 export * from './LayeredMap';
 export * from './parseMapViews';
+export * from './layeredMapOnClickHandler';

package/dist/LayeredMap/layeredMapOnClickHandler.d.ts

@@ -0,0 +1,16 @@
+import type { MapGeoJSONFeature, MapMouseEvent } from 'maplibre-gl';
+import { Merge } from 'type-fest';
+type ClickableFeature = Merge<MapGeoJSONFeature, {
+    layer: {
+        id: string;
+        onClick: (feature: MapGeoJSONFeature, event: AugmentedMouseEvent) => any;
+    };
+}>;
+type AugmentedMouseEvent = Merge<MapMouseEvent, {
+    features: ClickableFeature[];
+}>;
+type LayeredMapOnClickHandlerProps = {
+    resolveTargetFeature?: (features: AugmentedMouseEvent['features'], event: AugmentedMouseEvent) => ClickableFeature | Promise<ClickableFeature>;
+};
+export declare function layeredMapOnClickHandler({ resolveTargetFeature, }?: LayeredMapOnClickHandlerProps): (e: AugmentedMouseEvent) => Promise<void>;
+export {};

package/dist/LayeredMap/parseMapViews.d.ts

@@ -1,5 +1,6 @@
 import { AnyLayer } from 'react-map-gl/dist/esm/exports-maplibre';
 import { MapView, MapViewLayer, MapViewSource } from '../types';
+import { MapMouseEvent } from 'maplibre-gl';
 type ParsedSource = MapViewSource & {
     id: string;
     viewId: string;
@@ -7,6 +8,7 @@ type ParsedSource = MapViewSource & {
 type ParsedLayer = MapViewLayer & {
     id: string;
     viewId: string;
+    onClick?: (feature: GeoJSON.Feature, event: MapMouseEvent) => any;
 };
 export type MapViewsParseResult = {
     srcMapViews: MapView[];

package/dist/index.d.ts

@@ -2,6 +2,7 @@ export * from './LayeredMap';
 export * from './HoverTooltip';
 export * from './MapWindow';
 export * from './SyncedMaps';
+export * from './DynamicImages';
 export * from './useHover';
 export * from './scales';
 export * from './util';

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import { __assign, __spreadArray, __rest, __makeTemplateObject } from 'tslib';
+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 { Map, Source, Layer, useMap, useControl } from 'react-map-gl/maplibre';
 import { isPlainObject, uniq, uniqBy, pick, omit } from 'lodash-es';
@@ -6,6 +6,7 @@ import { Flex, useRefByKey, useLocalState, DropdownMenu } from '@orioro/react-ui
 import styled from 'styled-components';
 import { usePrevious } from 'react-use';
 import { mergeRefs } from 'react-merge-refs';
+import { strExpr } from '@orioro/util';
 import { ckmeans } from 'simple-statistics';
 import { schemeYlOrRd } from 'd3-scale-chromatic';
 import { maxIndex, range, variance, sum } from 'd3';
@@ -17,7 +18,6 @@ import { Tooltip } from '@radix-ui/themes';
 import maplibregl from 'maplibre-gl';
 import mlcontour from 'maplibre-contour';
 import MaplibreInspect from '@maplibre/maplibre-gl-inspect';
-import '@maplibre/maplibre-gl-inspect/dist/maplibre-gl-inspect.css';
 
 function sortLayers(layers, _a) {
   var existingLayers = _a.existingLayers;
@@ -128,7 +128,7 @@ function parseMapViews(orderedViews, _a) {
         var layerId = layer.absoluteId ? layer.absoluteId : fmtLayerAbsoluteId(viewId, layerRelativeId);
         // : `${viewId}__${layerRelativeId}`
         return {
-          interactiveLayerIds: layer.interactive ? __spreadArray(__spreadArray([], acc.interactiveLayerIds, true), [layerId], false) : acc.interactiveLayerIds,
+          interactiveLayerIds: layer.interactive || typeof layer.onClick === 'function' ? __spreadArray(__spreadArray([], acc.interactiveLayerIds, true), [layerId], false) : acc.interactiveLayerIds,
           _layers: __spreadArray(__spreadArray([], acc._layers, true), [__assign(__assign({}, layer), {
             viewId: viewId,
             id: layerId,
@@ -253,6 +253,45 @@ var LayeredMap = /*#__PURE__*/forwardRef(function LayeredMapInner(_a, layeredMap
   })));
 });
 
+function selectFirstClickableFeature(features) {
+  return features[0];
+}
+function layeredMapOnClickHandler(_a) {
+  var _b = _a === void 0 ? {} : _a,
+    _c = _b.resolveTargetFeature,
+    resolveTargetFeature = _c === void 0 ? selectFirstClickableFeature : _c;
+  return function onClick(e) {
+    return __awaiter(this, void 0, void 0, function () {
+      var features, clickableFeatures, targetFeature, _a;
+      return __generator(this, function (_b) {
+        switch (_b.label) {
+          case 0:
+            features = e.features || [];
+            clickableFeatures = features.filter(function (feature) {
+              var _a;
+              return typeof ((_a = feature.layer) === null || _a === void 0 ? void 0 : _a.onClick) === 'function';
+            });
+            if (!(clickableFeatures.length > 0)) return [3 /*break*/, 4];
+            if (!(clickableFeatures.length === 1)) return [3 /*break*/, 1];
+            _a = clickableFeatures[0];
+            return [3 /*break*/, 3];
+          case 1:
+            return [4 /*yield*/, resolveTargetFeature(clickableFeatures, e)];
+          case 2:
+            _a = _b.sent();
+            _b.label = 3;
+          case 3:
+            targetFeature = _a;
+            targetFeature.layer.onClick(targetFeature, e);
+            _b.label = 4;
+          case 4:
+            return [2 /*return*/];
+        }
+      });
+    });
+  };
+}
+
 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"])));
@@ -506,14 +545,12 @@ function mapSetFeaturesState(map, features, state) {
     return;
   }
   features.forEach(function (feat) {
-    if (feat.id) {
+    if (typeof feat.id === 'number' || typeof feat.id === 'string') {
       map.setFeatureState({
         source: feat.source,
         sourceLayer: feat.sourceLayer,
         id: feat.id
       }, state);
-    } else {
-      console.warn("could not get feature id", feat);
     }
   });
 }
@@ -580,7 +617,10 @@ function useHover(props, deps) {
     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',
+    cursor: isDragging ? 'grabbing' : (((_a = hoverInfo === null || hoverInfo === void 0 ? void 0 : hoverInfo.features) === null || _a === void 0 ? void 0 : _a.length) || 0) > 0 ? hoverInfo.features.some(function (feat) {
+      var _a;
+      return typeof ((_a = feat.layer) === null || _a === void 0 ? void 0 : _a.onClick) === 'function';
+    }) ? 'pointer' : 'default' : 'grab',
     children: isDragging ? null : /*#__PURE__*/React.createElement(React.Fragment, null, tooltip)
   }, hoverInfo, isDragging];
 }
@@ -857,6 +897,147 @@ var SyncedMaps = makeSyncedMaps({
 });
 var templateObject_1;
 
+function DynamicImages(_a) {
+  var _this = this;
+  var onGenerateImage = _a.onGenerateImage;
+  var map = useMap().current;
+  useEffect(function () {
+    if (!map) return function () {};
+    var handler = function handler(event) {
+      return __awaiter(_this, void 0, void 0, function () {
+        var imageId, result, err_1;
+        return __generator(this, function (_a) {
+          switch (_a.label) {
+            case 0:
+              imageId = event.id;
+              if (map.hasImage(imageId)) return [2 /*return*/];
+              _a.label = 1;
+            case 1:
+              _a.trys.push([1, 3,, 4]);
+              return [4 /*yield*/, onGenerateImage(imageId, event)];
+            case 2:
+              result = _a.sent();
+              if (!map.hasImage(imageId)) {
+                if (Array.isArray(result)) {
+                  map.addImage(imageId, result[0], result[1]);
+                } else {
+                  map.addImage(imageId, result);
+                }
+              }
+              return [3 /*break*/, 4];
+            case 3:
+              err_1 = _a.sent();
+              console.error("Failed to generate image for \"".concat(imageId, "\""), err_1);
+              return [3 /*break*/, 4];
+            case 4:
+              return [2 /*return*/];
+          }
+        });
+      });
+    };
+    map.on('styleimagemissing', handler);
+    return function () {
+      return map.off('styleimagemissing', handler);
+    };
+  }, [map, onGenerateImage]);
+  return null;
+}
+
+function iconPathToSvg(path, _a) {
+  var _b = _a === void 0 ? {} : _a,
+    _c = _b.size,
+    size = _c === void 0 ? 24 : _c,
+    _d = _b.fill,
+    fill = _d === void 0 ? 'black' : _d,
+    stroke = _b.stroke,
+    strokeWidth = _b.strokeWidth,
+    _e = _b.viewBox,
+    viewBox = _e === void 0 ? '0 0 24 24' : _e,
+    style = _b.style;
+  if (path.startsWith('<svg')) {
+    return path;
+  }
+  var svgAttrs = ["xmlns=\"http://www.w3.org/2000/svg\"", "width=\"".concat(size, "\""), "height=\"".concat(size, "\""), "viewBox=\"".concat(viewBox, "\""), stroke ? "stroke=\"".concat(stroke, "\"") : '', strokeWidth ? "stroke-width=\"".concat(strokeWidth, "\"") : ''].filter(Boolean).join(' ');
+  var pathAttrs = ["fill=\"".concat(fill, "\""), style ? "style=\"".concat(style, "\"") : ''].filter(Boolean).join(' ');
+  return "<svg ".concat(svgAttrs, "><path ").concat(pathAttrs, " d=\"").concat(path, "\" /></svg>");
+}
+/**
+ * Renders an SVG string onto a canvas and returns an object compatible with maplibre `addImage`.
+ *
+ * @param svgString - The SVG markup as a string
+ * @param pixelRatio - (Optional) device pixel ratio, defaults to window.devicePixelRatio
+ * @returns Promise resolving to { width, height, data, pixelRatio }
+ */
+function svgToMaplibreImage(svgString_1) {
+  return __awaiter(this, arguments, void 0, function (svgString, pixelRatio) {
+    if (pixelRatio === void 0) {
+      pixelRatio = typeof window !== 'undefined' ? window.devicePixelRatio : 1;
+    }
+    return __generator(this, function (_a) {
+      return [2 /*return*/, new Promise(function (resolve, reject) {
+        var svgBlob = new Blob([svgString], {
+          type: 'image/svg+xml'
+        });
+        var url = URL.createObjectURL(svgBlob);
+        var img = new Image();
+        img.onload = function () {
+          var width = img.width * pixelRatio;
+          var height = img.height * pixelRatio;
+          var canvas = document.createElement('canvas');
+          canvas.width = width;
+          canvas.height = height;
+          var ctx = canvas.getContext('2d');
+          ctx.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0);
+          ctx.drawImage(img, 0, 0);
+          var imageData = ctx.getImageData(0, 0, width, height);
+          URL.revokeObjectURL(url);
+          resolve([{
+            width: width,
+            height: height,
+            data: imageData.data
+          }, {
+            pixelRatio: pixelRatio
+          }]);
+        };
+        img.onerror = function () {
+          URL.revokeObjectURL(url);
+          reject(new Error('Failed to load SVG as image'));
+        };
+        img.src = url;
+      })];
+    });
+  });
+}
+function svgIconId(iconId, options) {
+  return options ? "".concat(iconId, "(").concat(JSON.stringify(options), ")") : iconId;
+}
+function svgIconGenerator(iconPathsById) {
+  var fns = Object.fromEntries(Object.entries(iconPathsById).map(function (_a) {
+    var iconId = _a[0],
+      iconPath = _a[1];
+    return [iconId, function (options) {
+      if (options === void 0) {
+        options = {};
+      }
+      return function () {
+        return iconPathToSvg(iconPath, options);
+      };
+    }];
+  }));
+  var expr = strExpr({
+    expressions: fns
+  });
+  return function onGenerateSvgImage(imageId) {
+    return __awaiter(this, void 0, void 0, function () {
+      var svg;
+      return __generator(this, function (_a) {
+        svg = expr.apply(imageId, undefined);
+        return [2 /*return*/, svgToMaplibreImage(svg)];
+      });
+    });
+  };
+}
+
 var DEFAULT_MIN_K = 3;
 var DEFAULT_MAX_K = 9;
 //
@@ -1376,4 +1557,4 @@ function InspectControl(props) {
   return null;
 }
 
-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 };
+export { $naturalBreaks, ControlContainer, DynamicImages, HoverTooltip, InspectControl, LayeredMap, MapWindow, SyncedMaps, TerrainControl, applyReactStyle, augmentFeature, ensureAddLayer, ensureAddSource, ensureRemoveLayer, ensureRemoveSource, fitGeometry, fmtLayerAbsoluteId, getSrcLayer, getSrcViewByLayerId, hoverParseEvent, iconPathToSvg, layeredMapOnClickHandler, makeSyncedMaps, mapSetFeaturesState, naturalBreakBounds, parseMapViews, scaleNaturalBreaks, sortLayers, svgIconGenerator, svgIconId, svgToMaplibreImage, useClientRect, useHover, useLayeredMap, withHover };

package/dist/types.d.ts

@@ -1,5 +1,6 @@
 import { Map } from 'react-map-gl/maplibre';
 import type { AnyLayer, AnySource } from 'react-map-gl/dist/esm/exports-maplibre';
+import { MapGeoJSONFeature, MapMouseEvent } from 'maplibre-gl';
 export type MapViewSource = AnySource & {
     absoluteId?: string;
 };
@@ -9,6 +10,7 @@ export type MapViewLayer = Omit<AnyLayer, 'id'> & {
     source?: string;
     absoluteSourceId?: string;
     zIndex?: number;
+    onClick?: (feature: MapGeoJSONFeature, event: MapMouseEvent) => any;
 };
 type MapViewLegend = {
     type: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orioro/react-maplibre-util",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "packageManager": "yarn@4.0.2",
   "type": "module",
   "main": "dist/index.mjs",
@@ -55,6 +55,7 @@
     "@orioro/react-ui-core": "^0.0.6",
     "@orioro/resolve": "^0.1.2",
     "@orioro/scale-util": "^0.0.2",
+    "@orioro/util": "^0.13.0",
     "@turf/turf": "^7.2.0",
     "d3": "^7.9.0",
     "d3-scale-chromatic": "^3.1.0",