maplibre-gl-inspect 0.0.6 → 0.0.8

package/README.md

@@ -1,216 +1,204 @@
-# Maplibre GL Inspect
+# maplibre-gl-inspect
 
-<!-- Badges -->
-[![GitHub Workflow Status](https://img.shields.io/github/actions/workflow/status/geoql/maplibre-gl-inspect/pipeline.yml?logo=github-actions)](https://github.com/geoql/maplibre-gl-inspect/actions/workflows/pipeline.yml)
-[![GitHub Workflow Status](https://img.shields.io/github/actions/workflow/status/geoql/maplibre-gl-inspect/codeql.yml?logo=lgtm&logoWidth=18)](https://github.com/geoql/maplibre-gl-inspect/actions/workflows/codeql.yml)
-[![GitHub Workflow Status](https://img.shields.io/github/actions/workflow/status/geoql/maplibre-gl-inspect/shipjs-trigger.yml?label=⛴%20Ship.js%20trigger)](https://github.com/geoql/maplibre-gl-inspect/actions/workflows/shipjs-trigger.yml)
-[![GitHub release (latest SemVer)](https://img.shields.io/github/v/release/geoql/maplibre-gl-inspect?sort=semver&logo=github)](https://github.com/geoql/maplibre-gl-inspect/releases)
+[![CI](https://img.shields.io/github/actions/workflow/status/geoql/maplibre-gl-inspect/ci.yml?logo=github-actions)](https://github.com/geoql/maplibre-gl-inspect/actions/workflows/ci.yml)
 [![npm](https://img.shields.io/npm/v/maplibre-gl-inspect?logo=npm)](https://www.npmjs.com/package/maplibre-gl-inspect)
-[![DeepScan grade](https://deepscan.io/api/teams/15032/projects/24288/branches/745727/badge/grade.svg)](https://deepscan.io/dashboard#view=project&tid=15032&pid=24288&bid=745727)
-[![GitHub contributors](https://img.shields.io/github/contributors/geoql/maplibre-gl-inspect)](https://github.com/geoql/maplibre-gl-inspect/graphs/contributors)
-[![npm type definitions](https://img.shields.io/npm/types/maplibre-gl-inspect?logo=typescript)](https://github.com/vinayakkulkarni/maplibre-gl-inspect/blob/main/package.json)
-[![npm](https://img.shields.io/npm/dt/maplibre-gl-inspect?logo=npm)](http://npm-stat.com/charts.html?package=maplibre-gl-inspect)
-[![npm](https://img.shields.io/npm/dw/maplibre-gl-inspect?logo=npm)](http://npm-stat.com/charts.html?package=maplibre-gl-inspect)
-[![npm bundle size (version)](https://img.shields.io/bundlephobia/minzip/maplibre-gl-inspect)](https://bundlephobia.com/package/maplibre-gl-inspect@latest)
+[![JSR](https://jsr.io/badges/@geoql/maplibre-gl-inspect)](https://jsr.io/@geoql/maplibre-gl-inspect)
+[![npm bundle size](https://img.shields.io/bundlephobia/minzip/maplibre-gl-inspect)](https://bundlephobia.com/package/maplibre-gl-inspect@latest)
+[![npm type definitions](https://img.shields.io/npm/types/maplibre-gl-inspect?logo=typescript)](https://github.com/geoql/maplibre-gl-inspect/blob/main/package.json)
+[![GitHub release](https://img.shields.io/github/v/release/geoql/maplibre-gl-inspect?sort=semver&logo=github)](https://github.com/geoql/maplibre-gl-inspect/releases)
 
-[![vite](https://img.shields.io/github/package-json/dependency-version/geoql/maplibre-gl-inspect/dev/vite?logo=vite)](https://vitejs.dev)
-[![maplibre-gl](https://img.shields.io/github/package-json/dependency-version/geoql/maplibre-gl-inspect/dev/maplibre-gl)](https://maplibre.org/maplibre-gl-js-docs/api/)
-[![husky](https://img.shields.io/github/package-json/dependency-version/geoql/maplibre-gl-inspect/dev/vite?label=🐶%20dependency)](https://typicode.github.io/husky/#/)
-[![eslint](https://img.shields.io/github/package-json/dependency-version/geoql/maplibre-gl-inspect/dev/eslint?logo=eslint)](https://eslint.org/)
-[![prettier](https://img.shields.io/github/package-json/dependency-version/geoql/maplibre-gl-inspect/dev/prettier?logo=prettier)](https://prettier.io/)
-[![typescript](https://img.shields.io/github/package-json/dependency-version/geoql/maplibre-gl-inspect/dev/typescript?logo=TypeScript)](https://www.typescriptlang.org/)
+Add an inspect control to [maplibre-gl-js](https://github.com/maplibre/maplibre-gl-js) to view all features of the vector sources and allows hovering over features to see their properties.
 
-Maplibre GL Inspect is a fork of [@acalcutt's Maplibre GL Inspect](https://github.com/acalcutt/maplibre-gl-inspect) which is a fork of [@lukasmartinelli Mapbox GL Inspect](https://github.com/lukasmartinelli/mapbox-gl-inspect). This fork is typescriptified along with strict ESLint & Prettier rule(s) in place for code standardisation 🕺
-
-Add an inspect control to [maplibre-gl-js](https://github.com/maplibre/maplibre-gl-js) to view all features
-of the vector sources and allows hovering over features to see their properties.
-
-**Requires [maplibre-gl-js](https://github.com/maplibre/maplibre-gl-js) (min version 1.15).**
+**Requires [maplibre-gl-js](https://github.com/maplibre/maplibre-gl-js) >= 5.0.0**
 
 ![Maplibre GL Inspect Preview](https://cloud.githubusercontent.com/assets/1288339/21744637/11759412-d51a-11e6-9581-f26741fcd182.gif)
 
-## Usage
-
-**maplibre-gl-inspect** is a Maplibre GL JS plugin that you can easily add on top of your map. Check `index.html` for a complete example.
-
-Make sure to include the CSS and JS files.
-
-**When using a CDN**
-
-```html
-<script src='https://unpkg.com/maplibre-gl-inspect@latest/dist/maplibre-gl-inspect.js'></script>
-<link href='https://unpkg.com/maplibre-gl-inspect@latest/dist/maplibre-gl-inspect.css' rel='stylesheet' />
-```
-
-**When using modules**
+## Install
 
-```js
-require('maplibre-gl-inspect/dist/maplibre-gl-inspect.css');
-var maplibregl = require('maplibre-gl');
-var MaplibreInspect = require('maplibre-gl-inspect');
+```bash
+# npm
+npm install maplibre-gl-inspect maplibre-gl
 
-// Pass an initialized popup to Maplibre GL
-map.addControl(new MaplibreInspect({
-  popup: new maplibregl.Popup({
-    closeButton: false,
-    closeOnClick: false
-  })
-}));
+# bun
+bun add maplibre-gl-inspect maplibre-gl
 ```
 
+## Usage
 
-### Add Inspect Control
+```ts
+import maplibregl from 'maplibre-gl';
+import { MaplibreInspect } from 'maplibre-gl-inspect';
+import 'maplibre-gl-inspect/dist/style.css';
 
-Add the inspect control to your map.
+const map = new maplibregl.Map({
+  container: 'map',
+  style: 'https://demotiles.maplibre.org/style.json',
+});
 
-```javascript
 map.addControl(new MaplibreInspect());
 ```
 
+### Show Inspection Map by Default
 
-### Show Inspection Map
-
-Switch to the inspection map by default.
-
-```javascript
-map.addControl(new MaplibreInspect({
-  showInspectMap: true
-}));
+```ts
+map.addControl(
+  new MaplibreInspect({
+    showInspectMap: true,
+  }),
+);
 ```
 
-### Show only Inspection Mode
-
-Switch to the inspection map by default and hide the inspect button to switch back to the normal map. Check `examples/inspect-only.html`
-
+### Inspect Only Mode
 
-```javascript
-map.addControl(new MaplibreInspect({
-  showInspectMap: true,
-  showInspectButton: false
-}));
+```ts
+map.addControl(
+  new MaplibreInspect({
+    showInspectMap: true,
+    showInspectButton: false,
+  }),
+);
 ```
 
 ### Disable Popup
 
-Disable the feature Popup in inspection mode and in map mode. Check `examples/no-popup.html`
-
-```javascript
-map.addControl(new MaplibreInspect({
-  showInspectMapPopup: false,
-  showMapPopup: false
-}));
+```ts
+map.addControl(
+  new MaplibreInspect({
+    showInspectMapPopup: false,
+    showMapPopup: false,
+  }),
+);
 ```
 
-### Custom Popup Function
-
-You can also control the Popup output. Check `examples/custom-popup.html`
+### Custom Popup
 
-```javascript
-map.addControl(new MaplibreInspect({
-  renderPopup: function(features) {
-    return '<h1>' + features.length + '</h1>';
-  }
-}));
+```ts
+map.addControl(
+  new MaplibreInspect({
+    renderPopup(features) {
+      return `<h1>${features.length}</h1>`;
+    },
+  }),
+);
 ```
 
-### Custom Color Function
-
-You are able to control the generated colors and background of the inspection style.
-Check `examples/custom-color-1.html` and `examples/custom-color-2.html`.
-
-```javascript
-var colors = ['#FC49A3', '#CC66FF', '#66CCFF', '#66FFCC'];
-map.addControl(new MaplibreInspect({
-  backgroundColor: '#000',
-  assignLayerColor: function(layerId, alpha) {
-    var randomNumber = parseInt(Math.random() * colors.length);
-    return colors[randomNumber];
-   }
-}));
+### Custom Colors
+
+```ts
+const colors = ['#FC49A3', '#CC66FF', '#66CCFF', '#66FFCC'];
+map.addControl(
+  new MaplibreInspect({
+    backgroundColor: '#000',
+    assignLayerColor(_layerId, _alpha) {
+      return colors[Math.floor(Math.random() * colors.length)];
+    },
+  }),
+);
 ```
 
-### Show just Popup but no Inspect Style
+### Popup on Click Only
 
-You can also hide the inspect button and enable the popup on the map if just want the popup hovering feature in your normal map but no inspect style.
-Check `examples/no-inspect-style.html`.
-
-
-```js
-map.addControl(new MaplibreInspect({
-  showInspectButton: false,
-  showMapPopup: true
-}));
+```ts
+map.addControl(
+  new MaplibreInspect({
+    showMapPopup: true,
+    showMapPopupOnHover: false,
+    showInspectMapPopupOnHover: false,
+  }),
+);
 ```
 
-### Show Popup only for certain Features
-
-You can pass a `queryParameters` object structured like the parameters object documented for `map.queryRenderedFeatures`](https://maplibre.org/maplibre-gl-js-docs/api/map/#map#queryrenderedfeatures).
-This let's you show the inspect popup for only certain layers.
-Check `examples/query-params.html`.
+### Query Parameters
 
+Filter which layers show in the popup using [`queryRenderedFeatures` parameters](https://maplibre.org/maplibre-gl-js/docs/API/classes/Map/#queryrenderedfeatures).
 
-```js
-map.addControl(new MaplibreInspect({
-  queryParameters: {
-    layers: ['composite_road_line']
-  }
-}));
+```ts
+map.addControl(
+  new MaplibreInspect({
+    queryParameters: {
+      layers: ['road_line'],
+    },
+  }),
+);
 ```
 
-You can also use this feature to do custom layer [filtering](https://maplibre.org/maplibre-gl-js-docs/style-spec/types/).
+### Toggle Callback
 
-```js
-map.addControl(new MaplibreInspect({
-  queryParameters: {
-    filter: ['>', 'height', 10]
-  }
-}));
+```ts
+map.addControl(
+  new MaplibreInspect({
+    toggleCallback(showInspectMap) {
+      console.log(`Inspect mode: ${showInspectMap}`);
+    },
+  }),
+);
 ```
 
-### Less Fidly Popup
+### Theming
 
-If inspecting features is too fiddly for thin lines you can optionally set a custom pixel buffer around the pointer when querying for features to make inspection a bit more forgiving.
-Check `examples/less-fidly.html`.
+Supports `light`, `dark`, and `system` (auto-detect) themes. By default, the theme is `system` which follows `prefers-color-scheme`.
 
+```ts
+// Use dark theme
+const inspect = new MaplibreInspect({
+  theme: 'dark',
+});
+map.addControl(inspect);
 
-```js
-map.addControl(new MaplibreInspect({
-  selectThreshold: 50
-}));
+// Switch theme at runtime
+inspect.setTheme('light');
 ```
 
-### Show Popup only on Click not on Hovering
+### Custom Theme Colors
+
+```ts
+import type { ThemeColors } from 'maplibre-gl-inspect';
+
+const inspect = new MaplibreInspect({
+  theme: 'system',
+  lightColors: {
+    popupText: '#1a1a1a',
+    popupBorder: '#e0e0e0',
+    buttonIcon: '#1a1a1a',
+    inspectBackground: '#fafafa',
+  },
+  darkColors: {
+    popupText: '#f0f0f0',
+    popupBorder: '#555555',
+    buttonIcon: '#f0f0f0',
+    inspectBackground: '#111827',
+  },
+});
+```
 
-Do not show the inspect popup when hovering over the map but only when clicking on the map.
-Check `examples/popup-on-click.html`.
+The following CSS custom properties are available for manual override:
 
+| Variable                 | Description                   |
+| ------------------------ | ----------------------------- |
+| `--inspect-popup-text`   | Popup text color              |
+| `--inspect-popup-border` | Popup feature border color    |
+| `--inspect-button-icon`  | Toggle button icon color      |
+| `--inspect-background`   | Inspect mode background color |
 
-```js
-map.addControl(new MaplibreInspect({
-  showMapPopup: true,
-  showMapPopupOnHover: false,
-  showInspectMapPopupOnHover: false
-}));
-```
+## Develop
 
-### Add a Callback for Inspect Toggle Events
+```bash
+bun install
+bun run build
+```
 
-Call a function whenever the user toggles the inpect map on or off. Useful for adding inspect state to URL hash.
-Check `examples/url-hash-toggle-callback.html`.
+Run the example locally:
 
-```js
-map.addControl(new MaplibreInspect({
-  toggleCallback: function(showInspectMap) { 
-    console.log(`showInspectMap is ${showInspectMap}`);
-  }
-}));
+```bash
+cd example
+bun install
+bun run dev
 ```
 
-## Develop
+## Credits
 
-Create a minified standalone build.
+Fork of [@acalcutt's maplibre-gl-inspect](https://github.com/acalcutt/maplibre-gl-inspect), which is a fork of [@lukasmartinelli's mapbox-gl-inspect](https://github.com/lukasmartinelli/mapbox-gl-inspect).
 
-```
-npm install
-npm run build
-```
+## License
+
+[MIT](LICENSE)

package/dist/index.d.mts

@@ -0,0 +1,96 @@
+import { LayerSpecification, Map, Popup, SourceSpecification, StyleSpecification } from "maplibre-gl";
+
+//#region src/types.d.ts
+type RenderPopupProperty = {
+  [x: string]: null | undefined | string | number | object | Date;
+};
+type RenderPopupFeature = {
+  source: string;
+  sourceLayer?: string;
+  layer: {
+    [x: string]: string;
+    source: string;
+  };
+  geometry: {
+    type: string;
+  };
+  properties: RenderPopupProperty;
+};
+type Theme = 'light' | 'dark' | 'system';
+interface ThemeColors {
+  /** Popup text color */
+  popupText: string;
+  /** Popup background color */
+  popupBg: string;
+  /** Popup feature border color */
+  popupBorder: string;
+  /** Button icon fill color */
+  buttonIcon: string;
+  /** Control group background color */
+  ctrlBg: string;
+  /** Inspect mode background color */
+  inspectBackground: string;
+}
+type Options = {
+  showInspectMap: boolean;
+  showInspectButton: boolean;
+  showInspectMapPopup: boolean;
+  showMapPopup: boolean;
+  showMapPopupOnHover: boolean;
+  showInspectMapPopupOnHover: boolean;
+  blockHoverPopupOnClick: boolean;
+  backgroundColor: string;
+  assignLayerColor(layerId: string, alpha?: number): string;
+  buildInspectStyle(originalMapStyle: StyleSpecification, coloredLayers: LayerSpecification[], opts: any): StyleSpecification;
+  renderPopup(features: RenderPopupFeature[]): string;
+  popup: Popup | null;
+  selectThreshold: number;
+  useInspectStyle: boolean;
+  queryParameters: Record<string, string>;
+  sources: {
+    [_: string]: SourceSpecification | string[];
+  };
+  toggleCallback(showInspectMap?: boolean): void;
+  theme?: Theme;
+  lightColors?: Partial<ThemeColors>;
+  darkColors?: Partial<ThemeColors>;
+};
+//#endregion
+//#region src/maplibre-gl-inspect.d.ts
+declare class MaplibreInspect {
+  private _map;
+  private _popup;
+  private _popupBlocked;
+  private _showInspectMap;
+  private _originalStyle;
+  private _toggle;
+  options: Options;
+  sources: Options['sources'];
+  assignLayerColor: Options['assignLayerColor'];
+  private _currentTheme;
+  private readonly _mediaQuery;
+  private readonly _lightColors;
+  private readonly _darkColors;
+  constructor(options?: Partial<Options>);
+  private _inspectStyle;
+  private _onSourceChange;
+  private _onStyleChange;
+  private _onRightClick;
+  private _onMouseMove;
+  toggleInspector(): void;
+  get theme(): Theme;
+  setTheme(theme: Theme): void;
+  private _onSystemThemeChange;
+  private _getResolvedTheme;
+  private _applyTheme;
+  render(): void;
+  onAdd(map: Map): HTMLDivElement;
+  onRemove(): void;
+}
+//#endregion
+//#region src/theme-colors.d.ts
+declare const DEFAULT_LIGHT_COLORS: ThemeColors;
+declare const DEFAULT_DARK_COLORS: ThemeColors;
+//#endregion
+export { DEFAULT_DARK_COLORS, DEFAULT_LIGHT_COLORS, MaplibreInspect, MaplibreInspect as default, type Options, type RenderPopupFeature, type RenderPopupProperty, type Theme, type ThemeColors };
+//# sourceMappingURL=index.d.mts.map

package/dist/index.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.mts","names":[],"sources":["../src/types.ts","../src/maplibre-gl-inspect.ts","../src/theme-colors.ts"],"mappings":";;;KAOY,mBAAA;EAAA,CACT,CAAA,yDAA0D,IAAA;AAAA;AAAA,KAGjD,kBAAA;EACV,MAAA;EACA,WAAA;EACA,KAAA;IAAA,CAAU,CAAA;IAAoB,MAAA;EAAA;EAC9B,QAAA;IAAY,IAAA;EAAA;EACZ,UAAA,EAAY,mBAAA;AAAA;AAAA,KAGF,KAAA;AAAA,UAEK,WAAA;EANH;EAQZ,SAAA;EAPY;EASZ,OAAA;EAT+B;EAW/B,WAAA;EARe;EAUf,UAAA;EAVe;EAYf,MAAA;EAVe;EAYf,iBAAA;AAAA;AAAA,KAGU,OAAA;EACV,cAAA;EACA,iBAAA;EACA,mBAAA;EACA,YAAA;EACA,mBAAA;EACA,0BAAA;EACA,sBAAA;EACA,eAAA;EACA,gBAAA,CAAiB,OAAA,UAAiB,KAAA;EAClC,iBAAA,CACE,gBAAA,EAAkB,kBAAA,EAClB,aAAA,EAAe,kBAAA,IACf,IAAA,QACC,kBAAA;EACH,WAAA,CAAY,QAAA,EAAU,kBAAA;EACtB,KAAA,EAAO,KAAA;EACP,eAAA;EACA,eAAA;EACA,eAAA,EAAiB,MAAA;EACjB,OAAA;IAAA,CAAY,CAAA,WAAY,mBAAA;EAAA;EACxB,cAAA,CAAe,cAAA;EACf,KAAA,GAAQ,KAAA;EACR,WAAA,GAAc,OAAA,CAAQ,WAAA;EACtB,UAAA,GAAa,OAAA,CAAQ,WAAA;AAAA;;;cCXjB,eAAA;EAAA,QACI,IAAA;EAAA,QACA,MAAA;EAAA,QACA,aAAA;EAAA,QACA,eAAA;EAAA,QACA,cAAA;EAAA,QACA,OAAA;EACD,OAAA,EAAS,OAAA;EACT,OAAA,EAAS,OAAA;EACT,gBAAA,EAAkB,OAAA;EAAA,QACjB,aAAA;EAAA,iBACS,WAAA;EAAA,iBACA,YAAA;EAAA,iBACA,WAAA;cAEL,OAAA,GAAU,OAAA,CAAQ,OAAA;EAAA,QAgFtB,aAAA;EAAA,QAkBA,eAAA;EAAA,QAqCA,cAAA;EAAA,QAOA,aAAA;EAAA,QAUA,YAAA;EAkED,eAAA,CAAA;EAAA,IAMH,KAAA,CAAA,GAAS,KAAA;EAIN,QAAA,CAAS,KAAA,EAAO,KAAA;EAAA,QAiBf,oBAAA;EAAA,QAMA,iBAAA;EAAA,QAUA,WAAA;EAoCD,MAAA,CAAA;EAmBA,KAAA,CAAM,GAAA,EAAK,GAAA,GAAG,cAAA;EAkBd,QAAA,CAAA;AAAA;;;cC5YI,oBAAA,EAAsB,WAAA;AAAA,cAStB,mBAAA,EAAqB,WAAA"}