maplibre-gl-inspect 0.0.7 → 0.0.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/README.md +103 -136
  2. package/dist/index.d.mts +33 -2
  3. package/dist/index.d.mts.map +1 -1
  4. package/dist/index.mjs +74 -5
  5. package/dist/index.mjs.map +1 -1
  6. package/dist/style.css +139 -7
  7. package/package.json +1 -1
package/README.md CHANGED
@@ -1,82 +1,46 @@
1
- # Maplibre GL Inspect
1
+ # maplibre-gl-inspect
2
2
 
3
- <!-- Badges -->
4
-
5
- [![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)
6
- [![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)
7
- [![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)
8
- [![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)
3
+ [![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)
9
4
  [![npm](https://img.shields.io/npm/v/maplibre-gl-inspect?logo=npm)](https://www.npmjs.com/package/maplibre-gl-inspect)
10
- [![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)
11
- [![GitHub contributors](https://img.shields.io/github/contributors/geoql/maplibre-gl-inspect)](https://github.com/geoql/maplibre-gl-inspect/graphs/contributors)
12
- [![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)
13
- [![npm](https://img.shields.io/npm/dt/maplibre-gl-inspect?logo=npm)](http://npm-stat.com/charts.html?package=maplibre-gl-inspect)
14
- [![npm](https://img.shields.io/npm/dw/maplibre-gl-inspect?logo=npm)](http://npm-stat.com/charts.html?package=maplibre-gl-inspect)
15
- [![npm bundle size (version)](https://img.shields.io/bundlephobia/minzip/maplibre-gl-inspect)](https://bundlephobia.com/package/maplibre-gl-inspect@latest)
16
-
17
- [![vite](https://img.shields.io/github/package-json/dependency-version/geoql/maplibre-gl-inspect/dev/vite?logo=vite)](https://vitejs.dev)
18
- [![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/)
19
- [![husky](https://img.shields.io/github/package-json/dependency-version/geoql/maplibre-gl-inspect/dev/vite?label=🐶%20dependency)](https://typicode.github.io/husky/#/)
20
- [![eslint](https://img.shields.io/github/package-json/dependency-version/geoql/maplibre-gl-inspect/dev/eslint?logo=eslint)](https://eslint.org/)
21
- [![prettier](https://img.shields.io/github/package-json/dependency-version/geoql/maplibre-gl-inspect/dev/prettier?logo=prettier)](https://prettier.io/)
22
- [![typescript](https://img.shields.io/github/package-json/dependency-version/geoql/maplibre-gl-inspect/dev/typescript?logo=TypeScript)](https://www.typescriptlang.org/)
5
+ [![JSR](https://jsr.io/badges/@geoql/maplibre-gl-inspect)](https://jsr.io/@geoql/maplibre-gl-inspect)
6
+ [![npm bundle size](https://img.shields.io/bundlephobia/minzip/maplibre-gl-inspect)](https://bundlephobia.com/package/maplibre-gl-inspect@latest)
7
+ [![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)
8
+ [![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)
23
9
 
24
- 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 🕺
10
+ 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.
25
11
 
26
- Add an inspect control to [maplibre-gl-js](https://github.com/maplibre/maplibre-gl-js) to view all features
27
- of the vector sources and allows hovering over features to see their properties.
28
-
29
- **Requires [maplibre-gl-js](https://github.com/maplibre/maplibre-gl-js) (min version 1.15).**
12
+ **Requires [maplibre-gl-js](https://github.com/maplibre/maplibre-gl-js) >= 5.0.0**
30
13
 
31
14
  ![Maplibre GL Inspect Preview](https://cloud.githubusercontent.com/assets/1288339/21744637/11759412-d51a-11e6-9581-f26741fcd182.gif)
32
15
 
33
- ## Usage
16
+ ## Install
34
17
 
35
- **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.
18
+ ```bash
19
+ # npm
20
+ npm install maplibre-gl-inspect maplibre-gl
36
21
 
37
- Make sure to include the CSS and JS files.
38
-
39
- **When using a CDN**
40
-
41
- ```html
42
- <script src="https://unpkg.com/maplibre-gl-inspect@latest/dist/maplibre-gl-inspect.js"></script>
43
- <link
44
- href="https://unpkg.com/maplibre-gl-inspect@latest/dist/maplibre-gl-inspect.css"
45
- rel="stylesheet"
46
- />
22
+ # bun
23
+ bun add maplibre-gl-inspect maplibre-gl
47
24
  ```
48
25
 
49
- **When using modules**
50
-
51
- ```js
52
- require('maplibre-gl-inspect/dist/maplibre-gl-inspect.css');
53
- var maplibregl = require('maplibre-gl');
54
- var MaplibreInspect = require('maplibre-gl-inspect');
55
-
56
- // Pass an initialized popup to Maplibre GL
57
- map.addControl(
58
- new MaplibreInspect({
59
- popup: new maplibregl.Popup({
60
- closeButton: false,
61
- closeOnClick: false,
62
- }),
63
- }),
64
- );
65
- ```
26
+ ## Usage
66
27
 
67
- ### Add Inspect Control
28
+ ```ts
29
+ import maplibregl from 'maplibre-gl';
30
+ import { MaplibreInspect } from 'maplibre-gl-inspect';
31
+ import 'maplibre-gl-inspect/dist/style.css';
68
32
 
69
- Add the inspect control to your map.
33
+ const map = new maplibregl.Map({
34
+ container: 'map',
35
+ style: 'https://demotiles.maplibre.org/style.json',
36
+ });
70
37
 
71
- ```javascript
72
38
  map.addControl(new MaplibreInspect());
73
39
  ```
74
40
 
75
- ### Show Inspection Map
76
-
77
- Switch to the inspection map by default.
41
+ ### Show Inspection Map by Default
78
42
 
79
- ```javascript
43
+ ```ts
80
44
  map.addControl(
81
45
  new MaplibreInspect({
82
46
  showInspectMap: true,
@@ -84,11 +48,9 @@ map.addControl(
84
48
  );
85
49
  ```
86
50
 
87
- ### Show only Inspection Mode
88
-
89
- Switch to the inspection map by default and hide the inspect button to switch back to the normal map. Check `examples/inspect-only.html`
51
+ ### Inspect Only Mode
90
52
 
91
- ```javascript
53
+ ```ts
92
54
  map.addControl(
93
55
  new MaplibreInspect({
94
56
  showInspectMap: true,
@@ -99,9 +61,7 @@ map.addControl(
99
61
 
100
62
  ### Disable Popup
101
63
 
102
- Disable the feature Popup in inspection mode and in map mode. Check `examples/no-popup.html`
103
-
104
- ```javascript
64
+ ```ts
105
65
  map.addControl(
106
66
  new MaplibreInspect({
107
67
  showInspectMapPopup: false,
@@ -110,128 +70,135 @@ map.addControl(
110
70
  );
111
71
  ```
112
72
 
113
- ### Custom Popup Function
114
-
115
- You can also control the Popup output. Check `examples/custom-popup.html`
73
+ ### Custom Popup
116
74
 
117
- ```javascript
75
+ ```ts
118
76
  map.addControl(
119
77
  new MaplibreInspect({
120
- renderPopup: function (features) {
121
- return '<h1>' + features.length + '</h1>';
78
+ renderPopup(features) {
79
+ return `<h1>${features.length}</h1>`;
122
80
  },
123
81
  }),
124
82
  );
125
83
  ```
126
84
 
127
- ### Custom Color Function
128
-
129
- You are able to control the generated colors and background of the inspection style.
130
- Check `examples/custom-color-1.html` and `examples/custom-color-2.html`.
85
+ ### Custom Colors
131
86
 
132
- ```javascript
133
- var colors = ['#FC49A3', '#CC66FF', '#66CCFF', '#66FFCC'];
87
+ ```ts
88
+ const colors = ['#FC49A3', '#CC66FF', '#66CCFF', '#66FFCC'];
134
89
  map.addControl(
135
90
  new MaplibreInspect({
136
91
  backgroundColor: '#000',
137
- assignLayerColor: function (layerId, alpha) {
138
- var randomNumber = parseInt(Math.random() * colors.length);
139
- return colors[randomNumber];
92
+ assignLayerColor(_layerId, _alpha) {
93
+ return colors[Math.floor(Math.random() * colors.length)];
140
94
  },
141
95
  }),
142
96
  );
143
97
  ```
144
98
 
145
- ### Show just Popup but no Inspect Style
99
+ ### Popup on Click Only
146
100
 
147
- 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.
148
- Check `examples/no-inspect-style.html`.
149
-
150
- ```js
101
+ ```ts
151
102
  map.addControl(
152
103
  new MaplibreInspect({
153
- showInspectButton: false,
154
104
  showMapPopup: true,
105
+ showMapPopupOnHover: false,
106
+ showInspectMapPopupOnHover: false,
155
107
  }),
156
108
  );
157
109
  ```
158
110
 
159
- ### Show Popup only for certain Features
111
+ ### Query Parameters
160
112
 
161
- 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).
162
- This let's you show the inspect popup for only certain layers.
163
- Check `examples/query-params.html`.
113
+ Filter which layers show in the popup using [`queryRenderedFeatures` parameters](https://maplibre.org/maplibre-gl-js/docs/API/classes/Map/#queryrenderedfeatures).
164
114
 
165
- ```js
115
+ ```ts
166
116
  map.addControl(
167
117
  new MaplibreInspect({
168
118
  queryParameters: {
169
- layers: ['composite_road_line'],
119
+ layers: ['road_line'],
170
120
  },
171
121
  }),
172
122
  );
173
123
  ```
174
124
 
175
- You can also use this feature to do custom layer [filtering](https://maplibre.org/maplibre-gl-js-docs/style-spec/types/).
125
+ ### Toggle Callback
176
126
 
177
- ```js
127
+ ```ts
178
128
  map.addControl(
179
129
  new MaplibreInspect({
180
- queryParameters: {
181
- filter: ['>', 'height', 10],
130
+ toggleCallback(showInspectMap) {
131
+ console.log(`Inspect mode: ${showInspectMap}`);
182
132
  },
183
133
  }),
184
134
  );
185
135
  ```
186
136
 
187
- ### Less Fidly Popup
137
+ ### Theming
188
138
 
189
- 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.
190
- Check `examples/less-fidly.html`.
139
+ Supports `light`, `dark`, and `system` (auto-detect) themes. By default, the theme is `system` which follows `prefers-color-scheme`.
191
140
 
192
- ```js
193
- map.addControl(
194
- new MaplibreInspect({
195
- selectThreshold: 50,
196
- }),
197
- );
141
+ ```ts
142
+ // Use dark theme
143
+ const inspect = new MaplibreInspect({
144
+ theme: 'dark',
145
+ });
146
+ map.addControl(inspect);
147
+
148
+ // Switch theme at runtime
149
+ inspect.setTheme('light');
198
150
  ```
199
151
 
200
- ### Show Popup only on Click not on Hovering
152
+ ### Custom Theme Colors
201
153
 
202
- Do not show the inspect popup when hovering over the map but only when clicking on the map.
203
- Check `examples/popup-on-click.html`.
154
+ ```ts
155
+ import type { ThemeColors } from 'maplibre-gl-inspect';
204
156
 
205
- ```js
206
- map.addControl(
207
- new MaplibreInspect({
208
- showMapPopup: true,
209
- showMapPopupOnHover: false,
210
- showInspectMapPopupOnHover: false,
211
- }),
212
- );
157
+ const inspect = new MaplibreInspect({
158
+ theme: 'system',
159
+ lightColors: {
160
+ popupText: '#1a1a1a',
161
+ popupBorder: '#e0e0e0',
162
+ buttonIcon: '#1a1a1a',
163
+ inspectBackground: '#fafafa',
164
+ },
165
+ darkColors: {
166
+ popupText: '#f0f0f0',
167
+ popupBorder: '#555555',
168
+ buttonIcon: '#f0f0f0',
169
+ inspectBackground: '#111827',
170
+ },
171
+ });
213
172
  ```
214
173
 
215
- ### Add a Callback for Inspect Toggle Events
174
+ The following CSS custom properties are available for manual override:
216
175
 
217
- Call a function whenever the user toggles the inpect map on or off. Useful for adding inspect state to URL hash.
218
- Check `examples/url-hash-toggle-callback.html`.
219
-
220
- ```js
221
- map.addControl(
222
- new MaplibreInspect({
223
- toggleCallback: function (showInspectMap) {
224
- console.log(`showInspectMap is ${showInspectMap}`);
225
- },
226
- }),
227
- );
228
- ```
176
+ | Variable | Description |
177
+ | ------------------------ | ----------------------------- |
178
+ | `--inspect-popup-text` | Popup text color |
179
+ | `--inspect-popup-border` | Popup feature border color |
180
+ | `--inspect-button-icon` | Toggle button icon color |
181
+ | `--inspect-background` | Inspect mode background color |
229
182
 
230
183
  ## Develop
231
184
 
232
- Create a minified standalone build.
233
-
185
+ ```bash
186
+ bun install
187
+ bun run build
234
188
  ```
235
- npm install
236
- npm run build
189
+
190
+ Run the example locally:
191
+
192
+ ```bash
193
+ cd example
194
+ bun install
195
+ bun run dev
237
196
  ```
197
+
198
+ ## Credits
199
+
200
+ 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).
201
+
202
+ ## License
203
+
204
+ [MIT](LICENSE)
package/dist/index.d.mts CHANGED
@@ -16,6 +16,21 @@ type RenderPopupFeature = {
16
16
  };
17
17
  properties: RenderPopupProperty;
18
18
  };
19
+ type Theme = 'light' | 'dark' | 'system';
20
+ interface ThemeColors {
21
+ /** Popup text color */
22
+ popupText: string;
23
+ /** Popup background color */
24
+ popupBg: string;
25
+ /** Popup feature border color */
26
+ popupBorder: string;
27
+ /** Button icon fill color */
28
+ buttonIcon: string;
29
+ /** Control group background color */
30
+ ctrlBg: string;
31
+ /** Inspect mode background color */
32
+ inspectBackground: string;
33
+ }
19
34
  type Options = {
20
35
  showInspectMap: boolean;
21
36
  showInspectButton: boolean;
@@ -36,6 +51,9 @@ type Options = {
36
51
  [_: string]: SourceSpecification | string[];
37
52
  };
38
53
  toggleCallback(showInspectMap?: boolean): void;
54
+ theme?: Theme;
55
+ lightColors?: Partial<ThemeColors>;
56
+ darkColors?: Partial<ThemeColors>;
39
57
  };
40
58
  //#endregion
41
59
  //#region src/maplibre-gl-inspect.d.ts
@@ -49,17 +67,30 @@ declare class MaplibreInspect {
49
67
  options: Options;
50
68
  sources: Options['sources'];
51
69
  assignLayerColor: Options['assignLayerColor'];
52
- constructor(options: Options);
70
+ private _currentTheme;
71
+ private readonly _mediaQuery;
72
+ private readonly _lightColors;
73
+ private readonly _darkColors;
74
+ constructor(options?: Partial<Options>);
53
75
  private _inspectStyle;
54
76
  private _onSourceChange;
55
77
  private _onStyleChange;
56
78
  private _onRightClick;
57
79
  private _onMouseMove;
58
80
  toggleInspector(): void;
81
+ get theme(): Theme;
82
+ setTheme(theme: Theme): void;
83
+ private _onSystemThemeChange;
84
+ private _getResolvedTheme;
85
+ private _applyTheme;
59
86
  render(): void;
60
87
  onAdd(map: Map): HTMLDivElement;
61
88
  onRemove(): void;
62
89
  }
63
90
  //#endregion
64
- export { MaplibreInspect, MaplibreInspect as default };
91
+ //#region src/theme-colors.d.ts
92
+ declare const DEFAULT_LIGHT_COLORS: ThemeColors;
93
+ declare const DEFAULT_DARK_COLORS: ThemeColors;
94
+ //#endregion
95
+ export { DEFAULT_DARK_COLORS, DEFAULT_LIGHT_COLORS, MaplibreInspect, MaplibreInspect as default, type Options, type RenderPopupFeature, type RenderPopupProperty, type Theme, type ThemeColors };
65
96
  //# sourceMappingURL=index.d.mts.map
package/dist/index.d.mts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.mts","names":[],"sources":["../src/types.ts","../src/maplibre-gl-inspect.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,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;AAAA;;;cCWX,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;cAEb,OAAA,EAAS,OAAA;EAAA,QA4Db,aAAA;EAAA,QAkBA,eAAA;EAAA,QAqCA,cAAA;EAAA,QAOA,aAAA;EAAA,QAUA,YAAA;EAkED,eAAA,CAAA;EAMA,MAAA,CAAA;EAmBA,KAAA,CAAM,GAAA,EAAK,GAAA,GAAG,cAAA;EAkBd,QAAA,CAAA;AAAA"}
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"}
package/dist/index.mjs CHANGED
@@ -210,10 +210,27 @@ const brightColor = (layerId, alpha) => {
210
210
  })},${alpha || 1}`})`;
211
211
  };
212
212
  //#endregion
213
+ //#region src/theme-colors.ts
214
+ const DEFAULT_LIGHT_COLORS = {
215
+ popupText: "#333333",
216
+ popupBg: "#ffffff",
217
+ popupBorder: "#e5e7eb",
218
+ buttonIcon: "#333333",
219
+ ctrlBg: "#ffffff",
220
+ inspectBackground: "#ffffff"
221
+ };
222
+ const DEFAULT_DARK_COLORS = {
223
+ popupText: "#e5e7eb",
224
+ popupBg: "#1f2937",
225
+ popupBorder: "#4b5563",
226
+ buttonIcon: "#e5e7eb",
227
+ ctrlBg: "#374151",
228
+ inspectBackground: "#1f2937"
229
+ };
230
+ //#endregion
213
231
  //#region src/maplibre-gl-inspect.ts
214
232
  const isInspectStyle = (style) => {
215
- if (style.metadata && "maplibregl-inspect:inspect" in Object.keys(style.metadata)) return true;
216
- return false;
233
+ return !!(style.metadata && "maplibregl-inspect:inspect" in style.metadata);
217
234
  };
218
235
  const markInspectStyle = (style) => {
219
236
  return {
@@ -231,6 +248,10 @@ var MaplibreInspect = class MaplibreInspect {
231
248
  options;
232
249
  sources;
233
250
  assignLayerColor;
251
+ _currentTheme;
252
+ _mediaQuery;
253
+ _lightColors;
254
+ _darkColors;
234
255
  constructor(options) {
235
256
  if (!(this instanceof MaplibreInspect)) throw new Error("MaplibreInspect needs to be called with the new keyword");
236
257
  let popup = null;
@@ -238,14 +259,14 @@ var MaplibreInspect = class MaplibreInspect {
238
259
  closeButton: false,
239
260
  closeOnClick: false
240
261
  });
241
- else if (!options.popup) console.error("Maplibre GL JS can not be found. Make sure to include it or pass an initialized MaplibreGL Popup to MaplibreInspect if you are using moduleis.");
262
+ else if (!options?.popup) console.error("Maplibre GL JS can not be found. Make sure to include it or pass an initialized MaplibreGL Popup to MaplibreInspect if you are using moduleis.");
242
263
  const defaults = {
243
264
  showInspectMap: false,
244
265
  showInspectButton: true,
245
266
  showInspectMapPopup: true,
246
267
  showMapPopup: false,
247
268
  showMapPopupOnHover: true,
248
- showInspectMapPopupOnHover: true,
269
+ showInspectMapPopupOnHover: false,
249
270
  blockHoverPopupOnClick: false,
250
271
  backgroundColor: "#fff",
251
272
  assignLayerColor: brightColor,
@@ -271,6 +292,20 @@ var MaplibreInspect = class MaplibreInspect {
271
292
  this._onMouseMove = this._onMouseMove.bind(this);
272
293
  this._onRightClick = this._onRightClick.bind(this);
273
294
  this._onStyleChange = this._onStyleChange.bind(this);
295
+ this._currentTheme = this.options.theme ?? "system";
296
+ this._lightColors = {
297
+ ...DEFAULT_LIGHT_COLORS,
298
+ ...this.options.lightColors
299
+ };
300
+ this._darkColors = {
301
+ ...DEFAULT_DARK_COLORS,
302
+ ...this.options.darkColors
303
+ };
304
+ if (this._currentTheme === "system" && typeof window !== "undefined" && window.matchMedia) {
305
+ this._mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
306
+ this._mediaQuery.addEventListener("change", this._onSystemThemeChange);
307
+ } else this._mediaQuery = null;
308
+ this._applyTheme();
274
309
  this._originalStyle = null;
275
310
  this._toggle = new InspectButton({
276
311
  show: this.options.showInspectButton,
@@ -345,6 +380,38 @@ var MaplibreInspect = class MaplibreInspect {
345
380
  this.options.toggleCallback(this._showInspectMap);
346
381
  this.render();
347
382
  }
383
+ get theme() {
384
+ return this._currentTheme;
385
+ }
386
+ setTheme(theme) {
387
+ const previousTheme = this._currentTheme;
388
+ this._currentTheme = theme;
389
+ if (previousTheme === "system" && theme !== "system" && this._mediaQuery) this._mediaQuery.removeEventListener("change", this._onSystemThemeChange);
390
+ else if (previousTheme !== "system" && theme === "system" && this._mediaQuery) this._mediaQuery.addEventListener("change", this._onSystemThemeChange);
391
+ this._applyTheme();
392
+ }
393
+ _onSystemThemeChange = () => {
394
+ if (this._currentTheme === "system") this._applyTheme();
395
+ };
396
+ _getResolvedTheme() {
397
+ if (this._currentTheme === "system") {
398
+ if (this._mediaQuery) return this._mediaQuery.matches ? "dark" : "light";
399
+ return "light";
400
+ }
401
+ return this._currentTheme;
402
+ }
403
+ _applyTheme() {
404
+ const resolved = this._getResolvedTheme();
405
+ const colors = resolved === "dark" ? this._darkColors : this._lightColors;
406
+ document.documentElement.style.setProperty("--inspect-popup-text", colors.popupText);
407
+ document.documentElement.style.setProperty("--inspect-popup-bg", colors.popupBg);
408
+ document.documentElement.style.setProperty("--inspect-popup-border", colors.popupBorder);
409
+ document.documentElement.style.setProperty("--inspect-button-icon", colors.buttonIcon);
410
+ document.documentElement.style.setProperty("--inspect-ctrl-bg", colors.ctrlBg);
411
+ document.documentElement.style.setProperty("--inspect-background", colors.inspectBackground);
412
+ if (this._currentTheme === "system") document.documentElement.removeAttribute("data-inspect-theme");
413
+ else document.documentElement.setAttribute("data-inspect-theme", resolved);
414
+ }
348
415
  render() {
349
416
  if (this._showInspectMap) {
350
417
  if (this.options.useInspectStyle) {
@@ -376,6 +443,8 @@ var MaplibreInspect = class MaplibreInspect {
376
443
  this._map?.off("mousemove", this._onMouseMove);
377
444
  this._map?.off("click", this._onMouseMove);
378
445
  this._map?.off("contextmenu", this._onRightClick);
446
+ if (this._mediaQuery) this._mediaQuery.removeEventListener("change", this._onSystemThemeChange);
447
+ document.documentElement.removeAttribute("data-inspect-theme");
379
448
  const elem = this._toggle.elem;
380
449
  elem.parentNode?.removeChild(elem);
381
450
  this._map = void 0;
@@ -385,6 +454,6 @@ var MaplibreInspect = class MaplibreInspect {
385
454
  //#region src/index.ts
386
455
  var src_default = MaplibreInspect;
387
456
  //#endregion
388
- export { MaplibreInspect, src_default as default };
457
+ export { DEFAULT_DARK_COLORS, DEFAULT_LIGHT_COLORS, MaplibreInspect, src_default as default };
389
458
 
390
459
  //# sourceMappingURL=index.mjs.map
package/dist/index.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.mjs","names":[],"sources":["../src/style-gen.ts","../src/inspect-button.ts","../src/render-popup.ts","../src/colors.ts","../src/maplibre-gl-inspect.ts","../src/index.ts"],"sourcesContent":["import type {\n SourceSpecification,\n LayerSpecification,\n StyleSpecification,\n CircleLayerSpecification,\n FillLayerSpecification,\n LineLayerSpecification,\n BackgroundLayerSpecification,\n} from 'maplibre-gl';\nimport type { Options } from './types';\n\nconst circleLayer = (\n color: string,\n source: string,\n vectorLayer?: string | undefined,\n) => {\n const layer: CircleLayerSpecification = {\n id: [source, vectorLayer, 'circle'].join('_'),\n source,\n type: 'circle',\n paint: {\n 'circle-color': color,\n 'circle-radius': 2,\n },\n filter: ['==', '$type', 'Point'],\n };\n if (vectorLayer) {\n layer['source-layer'] = vectorLayer;\n }\n return layer;\n};\nconst polygonLayer = (\n color: string,\n outlineColor: string,\n source: string,\n vectorLayer?: string | undefined,\n) => {\n const layer: FillLayerSpecification = {\n id: [source, vectorLayer, 'polygon'].join('_'),\n source,\n type: 'fill',\n paint: {\n 'fill-antialias': true,\n 'fill-color': color,\n 'fill-outline-color': outlineColor,\n },\n filter: ['==', '$type', 'Polygon'],\n };\n if (vectorLayer) {\n layer['source-layer'] = vectorLayer;\n }\n return layer;\n};\nconst lineLayer = (\n color: string,\n source: string,\n vectorLayer?: string | undefined,\n) => {\n const layer: LineLayerSpecification = {\n id: [source, vectorLayer, 'line'].join('_'),\n source,\n layout: {\n 'line-join': 'round',\n 'line-cap': 'round',\n },\n type: 'line',\n paint: {\n 'line-color': color,\n },\n filter: ['==', '$type', 'LineString'],\n };\n if (vectorLayer) {\n layer['source-layer'] = vectorLayer;\n }\n return layer;\n};\n\nconst generateColoredLayers = (\n sources: Options['sources'],\n assignLayerColor: Options['assignLayerColor'],\n): (\n | FillLayerSpecification\n | LineLayerSpecification\n | CircleLayerSpecification\n)[] => {\n const polyLayers: FillLayerSpecification[] = [];\n const circleLayers: CircleLayerSpecification[] = [];\n const lineLayers: LineLayerSpecification[] = [];\n\n const alphaColors = (layerId: string) => {\n const color = assignLayerColor.bind(null, layerId);\n const obj = {\n circle: color(0.8),\n line: color(0.6),\n polygon: color(0.3),\n polygonOutline: color(0.6),\n default: color(1),\n };\n return obj;\n };\n\n Object.keys(sources).forEach((sourceId) => {\n const layers = sources[`${sourceId}`] as string[];\n\n if (!layers || layers.length === 0) {\n const colors = alphaColors(sourceId);\n circleLayers.push(circleLayer(colors.circle, sourceId));\n lineLayers.push(lineLayer(colors.line, sourceId));\n polyLayers.push(\n polygonLayer(colors.polygon, colors.polygonOutline, sourceId),\n );\n } else {\n layers.forEach((layer: string) => {\n const colors = alphaColors(layer);\n\n circleLayers.push(circleLayer(colors.circle, sourceId, layer));\n lineLayers.push(lineLayer(colors.line, sourceId, layer));\n polyLayers.push(\n polygonLayer(colors.polygon, colors.polygonOutline, sourceId, layer),\n );\n });\n }\n });\n\n return [...polyLayers, ...lineLayers, ...circleLayers];\n};\n\nconst generateInspectStyle = (\n originalMapStyle: StyleSpecification,\n coloredLayers: LayerSpecification[],\n opts: any,\n): StyleSpecification => {\n opts = Object.assign(\n {\n backgroundColor: '#fff',\n },\n opts,\n );\n\n const backgroundLayer: BackgroundLayerSpecification = {\n id: 'background',\n type: 'background',\n paint: {\n 'background-color': opts.backgroundColor,\n },\n };\n\n const sources = {} as {\n [_: string]: SourceSpecification;\n };\n Object.keys(originalMapStyle.sources).forEach((sourceId) => {\n const source = originalMapStyle.sources[`${sourceId}`];\n if (source && (source.type === 'vector' || source.type === 'geojson')) {\n sources[`${sourceId}`] = source;\n }\n });\n\n return {\n ...originalMapStyle,\n layers: [backgroundLayer, ...coloredLayers],\n sources,\n };\n};\n\nexport { generateInspectStyle, generateColoredLayers };\n","class InspectButton {\n private _btn: HTMLButtonElement;\n public elem: HTMLDivElement;\n\n constructor(options: any) {\n options = Object.assign(\n {\n show: true,\n onToggle: () => {},\n },\n options,\n );\n\n this._btn = this.button();\n this._btn.onclick = options.onToggle;\n this.elem = this.container(this._btn, options.show);\n }\n\n private container(child: Node, show: boolean): HTMLDivElement {\n const container = document.createElement('div');\n container.className = 'maplibregl-ctrl maplibregl-ctrl-group';\n container.appendChild(child);\n if (!show) {\n container.style.display = 'none';\n }\n return container;\n }\n\n private button(): HTMLButtonElement {\n const btn = document.createElement('button');\n btn.className = 'maplibregl-ctrl-icon maplibregl-ctrl-inspect';\n btn.type = 'button';\n btn.ariaLabel = 'Inspect';\n return btn;\n }\n\n public setInspectIcon(): void {\n this._btn.className = 'maplibregl-ctrl-icon maplibregl-ctrl-inspect';\n }\n\n public setMapIcon(): void {\n this._btn.className = 'maplibregl-ctrl-icon maplibregl-ctrl-map';\n }\n}\n\nexport { InspectButton };\n","import type { RenderPopupFeature, RenderPopupProperty } from './types';\n\nconst displayValue = (\n value: RenderPopupProperty[keyof RenderPopupProperty],\n) => {\n if (typeof value === 'undefined' || value === null) return value;\n if (value instanceof Date) return value.toLocaleString();\n if (\n typeof value === 'object' ||\n typeof value === 'number' ||\n typeof value === 'string'\n )\n return value.toString();\n return value;\n};\n\nconst renderProperty = <\n T extends RenderPopupProperty[keyof RenderPopupProperty],\n>(\n propertyName: string,\n property: T,\n) => {\n return (\n `${\n '<div class=\"maplibregl-inspect-property\">' +\n '<div class=\"maplibregl-inspect-property-name\">'\n }${propertyName}</div>` +\n `<div class=\"maplibregl-inspect-property-value\">${displayValue(\n property,\n )}</div>` +\n '</div>'\n );\n};\n\nconst renderLayer = (layerId: string) => {\n return `<div class=\"maplibregl-inspect-layer\">${layerId}</div>`;\n};\n\nconst renderProperties = (feature: RenderPopupFeature) => {\n const sourceProperty = renderLayer(\n feature.layer['source-layer'] || feature.layer.source,\n );\n const typeProperty = renderProperty<string>('$type', feature.geometry.type);\n const properties = Object.keys(feature.properties).map((propertyName) =>\n renderProperty(propertyName, feature.properties[`${propertyName}`]),\n );\n return [sourceProperty, typeProperty].concat(properties).join('');\n};\n\nconst renderFeatures = (features: RenderPopupFeature[]) => {\n return features\n .map(\n (ft: RenderPopupFeature) =>\n `<div class=\"maplibregl-inspect-feature\">${renderProperties(ft)}</div>`,\n )\n .join('');\n};\n\nconst renderPopup = (features: RenderPopupFeature[]) => {\n return `<div class=\"maplibregl-inspect-popup\">${renderFeatures(\n features,\n )}</div>`;\n};\n\nexport { renderPopup };\n","import randomColor from 'randomcolor';\n\n/**\n * Assign a color to a unique layer ID and also considering\n * common layer names such as water or wood.\n *\n * @param {string} layerId - Unique layer ID\n * @param {number} alpha - Alpha value for the color\n * @returns {string} Unique random for the layer ID\n */\nconst brightColor = (layerId: string, alpha?: number): string => {\n let luminosity: 'bright' | 'dark' = 'bright';\n let hue: string | undefined = undefined;\n\n if (/water|ocean|lake|sea|river/.test(layerId)) {\n hue = 'blue';\n }\n\n if (/state|country|place/.test(layerId)) {\n hue = 'pink';\n }\n\n if (/road|highway|transport|streets/.test(layerId)) {\n hue = 'orange';\n }\n\n if (/contour|building/.test(layerId)) {\n hue = 'monochrome';\n }\n\n if (/building/.test(layerId)) {\n luminosity = 'dark';\n }\n\n if (/contour|landuse/.test(layerId)) {\n hue = 'yellow';\n }\n\n if (/wood|forest|park|landcover|land/.test(layerId)) {\n hue = 'green';\n }\n\n const rgb = randomColor({\n luminosity,\n hue,\n seed: layerId,\n format: 'rgbArray',\n });\n\n const rgba = `${rgb},${alpha || 1}`;\n return `rgba(${rgba})`;\n};\n\nexport { brightColor };\n","import maplibregl from 'maplibre-gl';\nimport type {\n Map,\n Popup,\n PointLike,\n MapMouseEvent,\n MapSourceDataEvent,\n StyleSpecification,\n} from 'maplibre-gl';\nimport type { Options, RenderPopupFeature } from './types';\nimport './maplibre-gl-inspect.css';\n\nimport { generateInspectStyle, generateColoredLayers } from './style-gen';\nimport { InspectButton } from './inspect-button';\nimport { renderPopup } from './render-popup';\nimport { brightColor } from './colors';\n\n/** Internal MapLibre GL types for accessing private style APIs */\ninterface SourceInternal {\n vectorLayerIds?: string[];\n type?: string;\n}\n\ninterface TileManagerInternal {\n getSource(): SourceInternal;\n}\n\ninterface StyleInternal {\n tileManagers: Record<string, TileManagerInternal>;\n}\n\nconst isInspectStyle = (style: StyleSpecification): boolean => {\n if (\n style.metadata &&\n 'maplibregl-inspect:inspect' in Object.keys(style.metadata)\n ) {\n return true;\n }\n return false;\n};\n\nconst markInspectStyle = (style: StyleSpecification): StyleSpecification => {\n const updatedStyle = {\n ...style,\n metadata: Object.assign({}, style.metadata, {\n 'maplibregl-inspect:inspect': true,\n }),\n };\n return updatedStyle;\n};\n\nclass MaplibreInspect {\n private _map: Map | undefined;\n private _popup: Popup | null;\n private _popupBlocked = false;\n private _showInspectMap: boolean;\n private _originalStyle: StyleSpecification | null;\n private _toggle: InspectButton;\n public options: Options;\n public sources: Options['sources'];\n public assignLayerColor: Options['assignLayerColor'];\n\n constructor(options: Options) {\n if (!(this instanceof MaplibreInspect)) {\n throw new Error(\n 'MaplibreInspect needs to be called with the new keyword',\n );\n }\n\n let popup: Popup | null = null;\n if (maplibregl) {\n popup = new maplibregl.Popup({\n closeButton: false,\n closeOnClick: false,\n });\n } else if (!options.popup) {\n console.error(\n 'Maplibre GL JS can not be found. Make sure to include it or pass an initialized MaplibreGL Popup to MaplibreInspect if you are using moduleis.',\n );\n }\n\n const defaults: Options = {\n showInspectMap: false,\n showInspectButton: true,\n showInspectMapPopup: true,\n showMapPopup: false,\n showMapPopupOnHover: true,\n showInspectMapPopupOnHover: true,\n blockHoverPopupOnClick: false,\n backgroundColor: '#fff',\n assignLayerColor: brightColor,\n buildInspectStyle: generateInspectStyle,\n renderPopup,\n popup,\n selectThreshold: 5,\n useInspectStyle: true,\n queryParameters: {},\n sources: {},\n toggleCallback(showInspect: boolean) {\n console.log('Inspector status?: ', showInspect);\n },\n };\n this.options = Object.assign(defaults, options);\n\n this.sources = this.options.sources;\n this.assignLayerColor = this.options.assignLayerColor;\n this.toggleInspector = this.toggleInspector.bind(this);\n this._popup = this.options.popup;\n this._popupBlocked = false;\n this._showInspectMap = this.options.showInspectMap;\n this._onSourceChange = this._onSourceChange.bind(this);\n this._onMouseMove = this._onMouseMove.bind(this);\n this._onRightClick = this._onRightClick.bind(this);\n this._onStyleChange = this._onStyleChange.bind(this);\n\n this._originalStyle = null;\n this._toggle = new InspectButton({\n show: this.options.showInspectButton,\n onToggle: this.toggleInspector.bind(this),\n });\n }\n\n private _inspectStyle(): StyleSpecification {\n let style = this._map?.getStyle();\n if (this._map) {\n const coloredLayers = generateColoredLayers(\n this.sources,\n this.assignLayerColor,\n );\n style = this.options.buildInspectStyle(\n this._map.getStyle(),\n coloredLayers,\n {\n backgroundColor: this.options.backgroundColor,\n },\n );\n }\n return style as StyleSpecification;\n }\n\n private _onSourceChange(e: MapSourceDataEvent) {\n const sources = this.sources;\n if (this._map) {\n const map = this._map;\n const mapStyle = map.getStyle();\n const mapStyleSourcesNames = Object.keys(mapStyle.sources);\n const previousSources = Object.assign({}, sources);\n\n //NOTE: This heavily depends on the internal API of Maplibre GL\n //so this breaks between Maplibre GL JS releases\n if (e.isSourceLoaded) {\n const { tileManagers } = map.style as unknown as StyleInternal;\n for (const sourceId of Object.keys(tileManagers)) {\n const source = tileManagers[sourceId]?.getSource();\n if (source?.vectorLayerIds) {\n sources[sourceId] = source.vectorLayerIds;\n } else if (source?.type === 'geojson') {\n sources[sourceId] = [];\n }\n }\n\n Object.keys(sources).forEach((sourceId) => {\n if (mapStyleSourcesNames.indexOf(sourceId) === -1) {\n delete sources[`${sourceId}`];\n }\n });\n\n if (\n JSON.stringify(previousSources) !== JSON.stringify(sources) &&\n Object.keys(sources).length > 0\n ) {\n this.render();\n }\n }\n }\n }\n\n private _onStyleChange() {\n const style = this._map?.getStyle();\n if (style && !isInspectStyle(style)) {\n this._originalStyle = style;\n }\n }\n\n private _onRightClick() {\n if (\n !this.options.showMapPopupOnHover &&\n !this.options.showInspectMapPopupOnHover &&\n !this.options.blockHoverPopupOnClick\n ) {\n if (this._popup) this._popup.remove();\n }\n }\n\n private _onMouseMove(e: MouseEvent | MapMouseEvent) {\n if (this._showInspectMap) {\n if (!this.options.showInspectMapPopup) return;\n if (e.type === 'mousemove' && !this.options.showInspectMapPopupOnHover)\n return;\n if (\n e.type === 'click' &&\n this.options.showInspectMapPopupOnHover &&\n this.options.blockHoverPopupOnClick\n ) {\n this._popupBlocked = !this._popupBlocked;\n }\n } else {\n if (!this.options.showMapPopup) return;\n if (e.type === 'mousemove' && !this.options.showMapPopupOnHover) return;\n if (\n e.type === 'click' &&\n this.options.showMapPopupOnHover &&\n this.options.blockHoverPopupOnClick\n ) {\n this._popupBlocked = !this._popupBlocked;\n }\n }\n\n if (!this._popupBlocked && this._map) {\n let queryBox: PointLike | [PointLike, PointLike];\n if (this.options.selectThreshold === 0) {\n queryBox = (e as MapMouseEvent).point;\n } else {\n // set a bbox around the pointer\n queryBox = [\n [\n (e as MapMouseEvent).point.x - this.options.selectThreshold,\n (e as MapMouseEvent).point.y + this.options.selectThreshold,\n ], // bottom left (SW)\n [\n (e as MapMouseEvent).point.x + this.options.selectThreshold,\n (e as MapMouseEvent).point.y - this.options.selectThreshold,\n ], // top right (NE)\n ];\n }\n const features =\n this._map.queryRenderedFeatures(\n queryBox,\n this.options.queryParameters,\n ) || [];\n\n this._map.getCanvas().style.cursor = features.length ? 'pointer' : '';\n\n if (features.length > 0 && this._popup instanceof maplibregl.Popup) {\n this._popup.setLngLat((e as MapMouseEvent).lngLat);\n const renderedPopup = this.options.renderPopup(\n features as unknown as RenderPopupFeature[],\n );\n if (typeof renderedPopup === 'string') {\n this._popup.setHTML(renderedPopup);\n } else {\n this._popup.setDOMContent(renderedPopup);\n }\n this._popup.addTo(this._map);\n } else {\n this._popup?.remove();\n }\n }\n }\n\n public toggleInspector(): void {\n this._showInspectMap = !this._showInspectMap;\n this.options.toggleCallback(this._showInspectMap);\n this.render();\n }\n\n public render(): void {\n if (this._showInspectMap) {\n if (this.options.useInspectStyle) {\n const inspectedStyle = this._inspectStyle();\n this._map?.setStyle(\n markInspectStyle(inspectedStyle as StyleSpecification),\n );\n }\n this._toggle.setMapIcon();\n }\n if (!this._showInspectMap && this._originalStyle) {\n if (this.options.useInspectStyle) {\n this._map?.setStyle(this._originalStyle);\n }\n if (this._popup) this._popup.remove();\n this._toggle.setInspectIcon();\n }\n }\n\n public onAdd(map: Map) {\n this._map = map;\n\n // if sources have already been passed as options\n // we do not need to figure out the sources ourselves\n if (Object.keys(this.sources).length === 0) {\n // map.on('tiledata', this._onSourceChange);\n map.on('sourcedata', this._onSourceChange);\n }\n\n map.on('styledata', this._onStyleChange);\n map.on('load', this._onStyleChange);\n map.on('mousemove', this._onMouseMove);\n map.on('click', this._onMouseMove);\n map.on('contextmenu', this._onRightClick);\n return this._toggle.elem;\n }\n\n public onRemove() {\n this._map?.off('styledata', this._onStyleChange);\n this._map?.off('load', this._onStyleChange);\n // this._map?.off('tiledata', this._onSourceChange);\n this._map?.off('sourcedata', this._onSourceChange);\n this._map?.off('mousemove', this._onMouseMove);\n this._map?.off('click', this._onMouseMove);\n this._map?.off('contextmenu', this._onRightClick);\n\n const elem = this._toggle.elem;\n elem.parentNode?.removeChild(elem);\n this._map = undefined;\n }\n}\n\nexport { MaplibreInspect };\n","import { MaplibreInspect } from './maplibre-gl-inspect';\n\nexport { MaplibreInspect };\nexport default MaplibreInspect;\n"],"mappings":"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"}
1
+ {"version":3,"file":"index.mjs","names":[],"sources":["../src/style-gen.ts","../src/inspect-button.ts","../src/render-popup.ts","../src/colors.ts","../src/theme-colors.ts","../src/maplibre-gl-inspect.ts","../src/index.ts"],"sourcesContent":["import type {\n SourceSpecification,\n LayerSpecification,\n StyleSpecification,\n CircleLayerSpecification,\n FillLayerSpecification,\n LineLayerSpecification,\n BackgroundLayerSpecification,\n} from 'maplibre-gl';\nimport type { Options } from './types';\n\nconst circleLayer = (\n color: string,\n source: string,\n vectorLayer?: string | undefined,\n) => {\n const layer: CircleLayerSpecification = {\n id: [source, vectorLayer, 'circle'].join('_'),\n source,\n type: 'circle',\n paint: {\n 'circle-color': color,\n 'circle-radius': 2,\n },\n filter: ['==', '$type', 'Point'],\n };\n if (vectorLayer) {\n layer['source-layer'] = vectorLayer;\n }\n return layer;\n};\nconst polygonLayer = (\n color: string,\n outlineColor: string,\n source: string,\n vectorLayer?: string | undefined,\n) => {\n const layer: FillLayerSpecification = {\n id: [source, vectorLayer, 'polygon'].join('_'),\n source,\n type: 'fill',\n paint: {\n 'fill-antialias': true,\n 'fill-color': color,\n 'fill-outline-color': outlineColor,\n },\n filter: ['==', '$type', 'Polygon'],\n };\n if (vectorLayer) {\n layer['source-layer'] = vectorLayer;\n }\n return layer;\n};\nconst lineLayer = (\n color: string,\n source: string,\n vectorLayer?: string | undefined,\n) => {\n const layer: LineLayerSpecification = {\n id: [source, vectorLayer, 'line'].join('_'),\n source,\n layout: {\n 'line-join': 'round',\n 'line-cap': 'round',\n },\n type: 'line',\n paint: {\n 'line-color': color,\n },\n filter: ['==', '$type', 'LineString'],\n };\n if (vectorLayer) {\n layer['source-layer'] = vectorLayer;\n }\n return layer;\n};\n\nconst generateColoredLayers = (\n sources: Options['sources'],\n assignLayerColor: Options['assignLayerColor'],\n): (\n | FillLayerSpecification\n | LineLayerSpecification\n | CircleLayerSpecification\n)[] => {\n const polyLayers: FillLayerSpecification[] = [];\n const circleLayers: CircleLayerSpecification[] = [];\n const lineLayers: LineLayerSpecification[] = [];\n\n const alphaColors = (layerId: string) => {\n const color = assignLayerColor.bind(null, layerId);\n const obj = {\n circle: color(0.8),\n line: color(0.6),\n polygon: color(0.3),\n polygonOutline: color(0.6),\n default: color(1),\n };\n return obj;\n };\n\n Object.keys(sources).forEach((sourceId) => {\n const layers = sources[`${sourceId}`] as string[];\n\n if (!layers || layers.length === 0) {\n const colors = alphaColors(sourceId);\n circleLayers.push(circleLayer(colors.circle, sourceId));\n lineLayers.push(lineLayer(colors.line, sourceId));\n polyLayers.push(\n polygonLayer(colors.polygon, colors.polygonOutline, sourceId),\n );\n } else {\n layers.forEach((layer: string) => {\n const colors = alphaColors(layer);\n\n circleLayers.push(circleLayer(colors.circle, sourceId, layer));\n lineLayers.push(lineLayer(colors.line, sourceId, layer));\n polyLayers.push(\n polygonLayer(colors.polygon, colors.polygonOutline, sourceId, layer),\n );\n });\n }\n });\n\n return [...polyLayers, ...lineLayers, ...circleLayers];\n};\n\nconst generateInspectStyle = (\n originalMapStyle: StyleSpecification,\n coloredLayers: LayerSpecification[],\n opts: any,\n): StyleSpecification => {\n opts = Object.assign(\n {\n backgroundColor: '#fff',\n },\n opts,\n );\n\n const backgroundLayer: BackgroundLayerSpecification = {\n id: 'background',\n type: 'background',\n paint: {\n 'background-color': opts.backgroundColor,\n },\n };\n\n const sources = {} as {\n [_: string]: SourceSpecification;\n };\n Object.keys(originalMapStyle.sources).forEach((sourceId) => {\n const source = originalMapStyle.sources[`${sourceId}`];\n if (source && (source.type === 'vector' || source.type === 'geojson')) {\n sources[`${sourceId}`] = source;\n }\n });\n\n return {\n ...originalMapStyle,\n layers: [backgroundLayer, ...coloredLayers],\n sources,\n };\n};\n\nexport { generateInspectStyle, generateColoredLayers };\n","class InspectButton {\n private _btn: HTMLButtonElement;\n public elem: HTMLDivElement;\n\n constructor(options: any) {\n options = Object.assign(\n {\n show: true,\n onToggle: () => {},\n },\n options,\n );\n\n this._btn = this.button();\n this._btn.onclick = options.onToggle;\n this.elem = this.container(this._btn, options.show);\n }\n\n private container(child: Node, show: boolean): HTMLDivElement {\n const container = document.createElement('div');\n container.className = 'maplibregl-ctrl maplibregl-ctrl-group';\n container.appendChild(child);\n if (!show) {\n container.style.display = 'none';\n }\n return container;\n }\n\n private button(): HTMLButtonElement {\n const btn = document.createElement('button');\n btn.className = 'maplibregl-ctrl-icon maplibregl-ctrl-inspect';\n btn.type = 'button';\n btn.ariaLabel = 'Inspect';\n return btn;\n }\n\n public setInspectIcon(): void {\n this._btn.className = 'maplibregl-ctrl-icon maplibregl-ctrl-inspect';\n }\n\n public setMapIcon(): void {\n this._btn.className = 'maplibregl-ctrl-icon maplibregl-ctrl-map';\n }\n}\n\nexport { InspectButton };\n","import type { RenderPopupFeature, RenderPopupProperty } from './types';\n\nconst displayValue = (\n value: RenderPopupProperty[keyof RenderPopupProperty],\n) => {\n if (typeof value === 'undefined' || value === null) return value;\n if (value instanceof Date) return value.toLocaleString();\n if (\n typeof value === 'object' ||\n typeof value === 'number' ||\n typeof value === 'string'\n )\n return value.toString();\n return value;\n};\n\nconst renderProperty = <\n T extends RenderPopupProperty[keyof RenderPopupProperty],\n>(\n propertyName: string,\n property: T,\n) => {\n return (\n `${\n '<div class=\"maplibregl-inspect-property\">' +\n '<div class=\"maplibregl-inspect-property-name\">'\n }${propertyName}</div>` +\n `<div class=\"maplibregl-inspect-property-value\">${displayValue(\n property,\n )}</div>` +\n '</div>'\n );\n};\n\nconst renderLayer = (layerId: string) => {\n return `<div class=\"maplibregl-inspect-layer\">${layerId}</div>`;\n};\n\nconst renderProperties = (feature: RenderPopupFeature) => {\n const sourceProperty = renderLayer(\n feature.layer['source-layer'] || feature.layer.source,\n );\n const typeProperty = renderProperty<string>('$type', feature.geometry.type);\n const properties = Object.keys(feature.properties).map((propertyName) =>\n renderProperty(propertyName, feature.properties[`${propertyName}`]),\n );\n return [sourceProperty, typeProperty].concat(properties).join('');\n};\n\nconst renderFeatures = (features: RenderPopupFeature[]) => {\n return features\n .map(\n (ft: RenderPopupFeature) =>\n `<div class=\"maplibregl-inspect-feature\">${renderProperties(ft)}</div>`,\n )\n .join('');\n};\n\nconst renderPopup = (features: RenderPopupFeature[]) => {\n return `<div class=\"maplibregl-inspect-popup\">${renderFeatures(\n features,\n )}</div>`;\n};\n\nexport { renderPopup };\n","import randomColor from 'randomcolor';\n\n/**\n * Assign a color to a unique layer ID and also considering\n * common layer names such as water or wood.\n *\n * @param {string} layerId - Unique layer ID\n * @param {number} alpha - Alpha value for the color\n * @returns {string} Unique random for the layer ID\n */\nconst brightColor = (layerId: string, alpha?: number): string => {\n let luminosity: 'bright' | 'dark' = 'bright';\n let hue: string | undefined = undefined;\n\n if (/water|ocean|lake|sea|river/.test(layerId)) {\n hue = 'blue';\n }\n\n if (/state|country|place/.test(layerId)) {\n hue = 'pink';\n }\n\n if (/road|highway|transport|streets/.test(layerId)) {\n hue = 'orange';\n }\n\n if (/contour|building/.test(layerId)) {\n hue = 'monochrome';\n }\n\n if (/building/.test(layerId)) {\n luminosity = 'dark';\n }\n\n if (/contour|landuse/.test(layerId)) {\n hue = 'yellow';\n }\n\n if (/wood|forest|park|landcover|land/.test(layerId)) {\n hue = 'green';\n }\n\n const rgb = randomColor({\n luminosity,\n hue,\n seed: layerId,\n format: 'rgbArray',\n });\n\n const rgba = `${rgb},${alpha || 1}`;\n return `rgba(${rgba})`;\n};\n\nexport { brightColor };\n","import type { ThemeColors } from './types';\n\nexport const DEFAULT_LIGHT_COLORS: ThemeColors = {\n popupText: '#333333',\n popupBg: '#ffffff',\n popupBorder: '#e5e7eb',\n buttonIcon: '#333333',\n ctrlBg: '#ffffff',\n inspectBackground: '#ffffff',\n};\n\nexport const DEFAULT_DARK_COLORS: ThemeColors = {\n popupText: '#e5e7eb',\n popupBg: '#1f2937',\n popupBorder: '#4b5563',\n buttonIcon: '#e5e7eb',\n ctrlBg: '#374151',\n inspectBackground: '#1f2937',\n};\n","import maplibregl from 'maplibre-gl';\nimport type {\n Map,\n Popup,\n PointLike,\n MapMouseEvent,\n MapSourceDataEvent,\n StyleSpecification,\n} from 'maplibre-gl';\nimport type { Options, RenderPopupFeature, Theme, ThemeColors } from './types';\nimport './maplibre-gl-inspect.css';\n\nimport { generateInspectStyle, generateColoredLayers } from './style-gen';\nimport { InspectButton } from './inspect-button';\nimport { renderPopup } from './render-popup';\nimport { brightColor } from './colors';\nimport { DEFAULT_LIGHT_COLORS, DEFAULT_DARK_COLORS } from './theme-colors';\n\n/** Internal MapLibre GL types for accessing private style APIs */\ninterface SourceInternal {\n vectorLayerIds?: string[];\n type?: string;\n}\n\ninterface TileManagerInternal {\n getSource(): SourceInternal;\n}\n\ninterface StyleInternal {\n tileManagers: Record<string, TileManagerInternal>;\n}\n\nconst isInspectStyle = (style: StyleSpecification): boolean => {\n return !!(\n style.metadata &&\n 'maplibregl-inspect:inspect' in (style.metadata as Record<string, unknown>)\n );\n};\n\nconst markInspectStyle = (style: StyleSpecification): StyleSpecification => {\n const updatedStyle = {\n ...style,\n metadata: Object.assign({}, style.metadata, {\n 'maplibregl-inspect:inspect': true,\n }),\n };\n return updatedStyle;\n};\n\nclass MaplibreInspect {\n private _map: Map | undefined;\n private _popup: Popup | null;\n private _popupBlocked = false;\n private _showInspectMap: boolean;\n private _originalStyle: StyleSpecification | null;\n private _toggle: InspectButton;\n public options: Options;\n public sources: Options['sources'];\n public assignLayerColor: Options['assignLayerColor'];\n private _currentTheme: Theme;\n private readonly _mediaQuery: MediaQueryList | null;\n private readonly _lightColors: ThemeColors;\n private readonly _darkColors: ThemeColors;\n\n constructor(options?: Partial<Options>) {\n if (!(this instanceof MaplibreInspect)) {\n throw new Error(\n 'MaplibreInspect needs to be called with the new keyword',\n );\n }\n\n let popup: Popup | null = null;\n if (maplibregl) {\n popup = new maplibregl.Popup({\n closeButton: false,\n closeOnClick: false,\n });\n } else if (!options?.popup) {\n console.error(\n 'Maplibre GL JS can not be found. Make sure to include it or pass an initialized MaplibreGL Popup to MaplibreInspect if you are using moduleis.',\n );\n }\n\n const defaults: Options = {\n showInspectMap: false,\n showInspectButton: true,\n showInspectMapPopup: true,\n showMapPopup: false,\n showMapPopupOnHover: true,\n showInspectMapPopupOnHover: false,\n blockHoverPopupOnClick: false,\n backgroundColor: '#fff',\n assignLayerColor: brightColor,\n buildInspectStyle: generateInspectStyle,\n renderPopup,\n popup,\n selectThreshold: 5,\n useInspectStyle: true,\n queryParameters: {},\n sources: {},\n toggleCallback(showInspect: boolean) {\n console.log('Inspector status?: ', showInspect);\n },\n };\n this.options = Object.assign(defaults, options);\n\n this.sources = this.options.sources;\n this.assignLayerColor = this.options.assignLayerColor;\n this.toggleInspector = this.toggleInspector.bind(this);\n this._popup = this.options.popup;\n this._popupBlocked = false;\n this._showInspectMap = this.options.showInspectMap;\n this._onSourceChange = this._onSourceChange.bind(this);\n this._onMouseMove = this._onMouseMove.bind(this);\n this._onRightClick = this._onRightClick.bind(this);\n this._onStyleChange = this._onStyleChange.bind(this);\n\n this._currentTheme = this.options.theme ?? 'system';\n this._lightColors = {\n ...DEFAULT_LIGHT_COLORS,\n ...this.options.lightColors,\n };\n this._darkColors = { ...DEFAULT_DARK_COLORS, ...this.options.darkColors };\n\n if (\n this._currentTheme === 'system' &&\n typeof window !== 'undefined' &&\n window.matchMedia\n ) {\n this._mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');\n this._mediaQuery.addEventListener('change', this._onSystemThemeChange);\n } else {\n this._mediaQuery = null;\n }\n\n this._applyTheme();\n\n this._originalStyle = null;\n this._toggle = new InspectButton({\n show: this.options.showInspectButton,\n onToggle: this.toggleInspector.bind(this),\n });\n }\n\n private _inspectStyle(): StyleSpecification {\n let style = this._map?.getStyle();\n if (this._map) {\n const coloredLayers = generateColoredLayers(\n this.sources,\n this.assignLayerColor,\n );\n style = this.options.buildInspectStyle(\n this._map.getStyle(),\n coloredLayers,\n {\n backgroundColor: this.options.backgroundColor,\n },\n );\n }\n return style as StyleSpecification;\n }\n\n private _onSourceChange(e: MapSourceDataEvent) {\n const sources = this.sources;\n if (this._map) {\n const map = this._map;\n const mapStyle = map.getStyle();\n const mapStyleSourcesNames = Object.keys(mapStyle.sources);\n const previousSources = Object.assign({}, sources);\n\n //NOTE: This heavily depends on the internal API of Maplibre GL\n //so this breaks between Maplibre GL JS releases\n if (e.isSourceLoaded) {\n const { tileManagers } = map.style as unknown as StyleInternal;\n for (const sourceId of Object.keys(tileManagers)) {\n const source = tileManagers[sourceId]?.getSource();\n if (source?.vectorLayerIds) {\n sources[sourceId] = source.vectorLayerIds;\n } else if (source?.type === 'geojson') {\n sources[sourceId] = [];\n }\n }\n\n Object.keys(sources).forEach((sourceId) => {\n if (mapStyleSourcesNames.indexOf(sourceId) === -1) {\n delete sources[`${sourceId}`];\n }\n });\n\n if (\n JSON.stringify(previousSources) !== JSON.stringify(sources) &&\n Object.keys(sources).length > 0\n ) {\n this.render();\n }\n }\n }\n }\n\n private _onStyleChange() {\n const style = this._map?.getStyle();\n if (style && !isInspectStyle(style)) {\n this._originalStyle = style;\n }\n }\n\n private _onRightClick() {\n if (\n !this.options.showMapPopupOnHover &&\n !this.options.showInspectMapPopupOnHover &&\n !this.options.blockHoverPopupOnClick\n ) {\n if (this._popup) this._popup.remove();\n }\n }\n\n private _onMouseMove(e: MouseEvent | MapMouseEvent) {\n if (this._showInspectMap) {\n if (!this.options.showInspectMapPopup) return;\n if (e.type === 'mousemove' && !this.options.showInspectMapPopupOnHover)\n return;\n if (\n e.type === 'click' &&\n this.options.showInspectMapPopupOnHover &&\n this.options.blockHoverPopupOnClick\n ) {\n this._popupBlocked = !this._popupBlocked;\n }\n } else {\n if (!this.options.showMapPopup) return;\n if (e.type === 'mousemove' && !this.options.showMapPopupOnHover) return;\n if (\n e.type === 'click' &&\n this.options.showMapPopupOnHover &&\n this.options.blockHoverPopupOnClick\n ) {\n this._popupBlocked = !this._popupBlocked;\n }\n }\n\n if (!this._popupBlocked && this._map) {\n let queryBox: PointLike | [PointLike, PointLike];\n if (this.options.selectThreshold === 0) {\n queryBox = (e as MapMouseEvent).point;\n } else {\n // set a bbox around the pointer\n queryBox = [\n [\n (e as MapMouseEvent).point.x - this.options.selectThreshold,\n (e as MapMouseEvent).point.y + this.options.selectThreshold,\n ], // bottom left (SW)\n [\n (e as MapMouseEvent).point.x + this.options.selectThreshold,\n (e as MapMouseEvent).point.y - this.options.selectThreshold,\n ], // top right (NE)\n ];\n }\n const features =\n this._map.queryRenderedFeatures(\n queryBox,\n this.options.queryParameters,\n ) || [];\n\n this._map.getCanvas().style.cursor = features.length ? 'pointer' : '';\n\n if (features.length > 0 && this._popup instanceof maplibregl.Popup) {\n this._popup.setLngLat((e as MapMouseEvent).lngLat);\n const renderedPopup = this.options.renderPopup(\n features as unknown as RenderPopupFeature[],\n );\n if (typeof renderedPopup === 'string') {\n this._popup.setHTML(renderedPopup);\n } else {\n this._popup.setDOMContent(renderedPopup);\n }\n this._popup.addTo(this._map);\n } else {\n this._popup?.remove();\n }\n }\n }\n\n public toggleInspector(): void {\n this._showInspectMap = !this._showInspectMap;\n this.options.toggleCallback(this._showInspectMap);\n this.render();\n }\n\n get theme(): Theme {\n return this._currentTheme;\n }\n\n public setTheme(theme: Theme): void {\n const previousTheme = this._currentTheme;\n this._currentTheme = theme;\n\n if (previousTheme === 'system' && theme !== 'system' && this._mediaQuery) {\n this._mediaQuery.removeEventListener('change', this._onSystemThemeChange);\n } else if (\n previousTheme !== 'system' &&\n theme === 'system' &&\n this._mediaQuery\n ) {\n this._mediaQuery.addEventListener('change', this._onSystemThemeChange);\n }\n\n this._applyTheme();\n }\n\n private _onSystemThemeChange = (): void => {\n if (this._currentTheme === 'system') {\n this._applyTheme();\n }\n };\n\n private _getResolvedTheme(): 'light' | 'dark' {\n if (this._currentTheme === 'system') {\n if (this._mediaQuery) {\n return this._mediaQuery.matches ? 'dark' : 'light';\n }\n return 'light';\n }\n return this._currentTheme;\n }\n\n private _applyTheme(): void {\n const resolved = this._getResolvedTheme();\n const colors = resolved === 'dark' ? this._darkColors : this._lightColors;\n\n document.documentElement.style.setProperty(\n '--inspect-popup-text',\n colors.popupText,\n );\n document.documentElement.style.setProperty(\n '--inspect-popup-bg',\n colors.popupBg,\n );\n document.documentElement.style.setProperty(\n '--inspect-popup-border',\n colors.popupBorder,\n );\n document.documentElement.style.setProperty(\n '--inspect-button-icon',\n colors.buttonIcon,\n );\n document.documentElement.style.setProperty(\n '--inspect-ctrl-bg',\n colors.ctrlBg,\n );\n document.documentElement.style.setProperty(\n '--inspect-background',\n colors.inspectBackground,\n );\n\n if (this._currentTheme === 'system') {\n document.documentElement.removeAttribute('data-inspect-theme');\n } else {\n document.documentElement.setAttribute('data-inspect-theme', resolved);\n }\n }\n\n public render(): void {\n if (this._showInspectMap) {\n if (this.options.useInspectStyle) {\n const inspectedStyle = this._inspectStyle();\n this._map?.setStyle(\n markInspectStyle(inspectedStyle as StyleSpecification),\n );\n }\n this._toggle.setMapIcon();\n }\n if (!this._showInspectMap && this._originalStyle) {\n if (this.options.useInspectStyle) {\n this._map?.setStyle(this._originalStyle);\n }\n if (this._popup) this._popup.remove();\n this._toggle.setInspectIcon();\n }\n }\n\n public onAdd(map: Map) {\n this._map = map;\n\n // if sources have already been passed as options\n // we do not need to figure out the sources ourselves\n if (Object.keys(this.sources).length === 0) {\n // map.on('tiledata', this._onSourceChange);\n map.on('sourcedata', this._onSourceChange);\n }\n\n map.on('styledata', this._onStyleChange);\n map.on('load', this._onStyleChange);\n map.on('mousemove', this._onMouseMove);\n map.on('click', this._onMouseMove);\n map.on('contextmenu', this._onRightClick);\n return this._toggle.elem;\n }\n\n public onRemove() {\n this._map?.off('styledata', this._onStyleChange);\n this._map?.off('load', this._onStyleChange);\n // this._map?.off('tiledata', this._onSourceChange);\n this._map?.off('sourcedata', this._onSourceChange);\n this._map?.off('mousemove', this._onMouseMove);\n this._map?.off('click', this._onMouseMove);\n this._map?.off('contextmenu', this._onRightClick);\n\n if (this._mediaQuery) {\n this._mediaQuery.removeEventListener('change', this._onSystemThemeChange);\n }\n\n document.documentElement.removeAttribute('data-inspect-theme');\n\n const elem = this._toggle.elem;\n elem.parentNode?.removeChild(elem);\n this._map = undefined;\n }\n}\n\nexport { MaplibreInspect };\n","import { MaplibreInspect } from './maplibre-gl-inspect';\n\nexport { MaplibreInspect };\nexport { DEFAULT_LIGHT_COLORS, DEFAULT_DARK_COLORS } from './theme-colors';\nexport type {\n Options,\n RenderPopupFeature,\n RenderPopupProperty,\n Theme,\n ThemeColors,\n} from './types';\nexport default MaplibreInspect;\n"],"mappings":"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"}
package/dist/style.css CHANGED
@@ -1,10 +1,106 @@
1
+ :root {
2
+ --inspect-popup-text: #333333;
3
+ --inspect-popup-border: #e5e7eb;
4
+ --inspect-popup-bg: #ffffff;
5
+ --inspect-button-icon: #333333;
6
+ --inspect-ctrl-bg: #ffffff;
7
+ --inspect-background: #ffffff;
8
+ }
9
+
10
+ @media (prefers-color-scheme: dark) {
11
+ :root:not([data-inspect-theme='light']) {
12
+ --inspect-popup-text: #e5e7eb;
13
+ --inspect-popup-border: #4b5563;
14
+ --inspect-popup-bg: #1f2937;
15
+ --inspect-button-icon: #e5e7eb;
16
+ --inspect-ctrl-bg: #374151;
17
+ --inspect-background: #1f2937;
18
+ }
19
+ }
20
+
21
+ :root[data-inspect-theme='light'] {
22
+ --inspect-popup-text: #333333;
23
+ --inspect-popup-border: #e5e7eb;
24
+ --inspect-popup-bg: #ffffff;
25
+ --inspect-button-icon: #333333;
26
+ --inspect-ctrl-bg: #ffffff;
27
+ --inspect-background: #ffffff;
28
+ }
29
+
30
+ :root[data-inspect-theme='dark'] {
31
+ --inspect-popup-text: #e5e7eb;
32
+ --inspect-popup-border: #4b5563;
33
+ --inspect-popup-bg: #1f2937;
34
+ --inspect-button-icon: #e5e7eb;
35
+ --inspect-ctrl-bg: #374151;
36
+ --inspect-background: #1f2937;
37
+ }
38
+
39
+ /* Popup container — override MapLibre defaults */
40
+ .maplibregl-popup-content:has(.maplibregl-inspect-popup) {
41
+ background: var(--inspect-popup-bg);
42
+ border-radius: 8px;
43
+ box-shadow:
44
+ 0 4px 6px -1px rgba(0, 0, 0, 0.1),
45
+ 0 2px 4px -2px rgba(0, 0, 0, 0.1);
46
+ padding: 12px 14px;
47
+ max-height: 400px;
48
+ overflow-y: auto;
49
+ scrollbar-width: thin;
50
+ scrollbar-color: var(--inspect-popup-border) transparent;
51
+ }
52
+
53
+ /* Webkit thin scrollbar */
54
+ .maplibregl-popup-content:has(.maplibregl-inspect-popup)::-webkit-scrollbar {
55
+ width: 4px;
56
+ }
57
+
58
+ .maplibregl-popup-content:has(
59
+ .maplibregl-inspect-popup
60
+ )::-webkit-scrollbar-track {
61
+ background: transparent;
62
+ }
63
+
64
+ .maplibregl-popup-content:has(
65
+ .maplibregl-inspect-popup
66
+ )::-webkit-scrollbar-thumb {
67
+ background-color: var(--inspect-popup-border);
68
+ border-radius: 4px;
69
+ }
70
+
71
+ /* Popup tip arrow — all 8 anchor positions */
72
+ .maplibregl-popup-anchor-top .maplibregl-popup-tip,
73
+ .maplibregl-popup-anchor-top-left .maplibregl-popup-tip,
74
+ .maplibregl-popup-anchor-top-right .maplibregl-popup-tip {
75
+ border-bottom-color: var(--inspect-popup-bg);
76
+ }
77
+
78
+ .maplibregl-popup-anchor-bottom .maplibregl-popup-tip,
79
+ .maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip,
80
+ .maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip {
81
+ border-top-color: var(--inspect-popup-bg);
82
+ }
83
+
84
+ .maplibregl-popup-anchor-left .maplibregl-popup-tip {
85
+ border-right-color: var(--inspect-popup-bg);
86
+ }
87
+
88
+ .maplibregl-popup-anchor-right .maplibregl-popup-tip {
89
+ border-left-color: var(--inspect-popup-bg);
90
+ }
91
+
92
+ /* Popup content */
1
93
  .maplibregl-inspect-popup {
2
- color: #333;
94
+ color: var(--inspect-popup-text);
3
95
  display: table;
96
+ font-size: 12px;
97
+ line-height: 1.5;
4
98
  }
5
99
 
6
100
  .maplibregl-inspect-feature:not(:last-child) {
7
- border-bottom: 1px solid #ccc;
101
+ border-bottom: 1px solid var(--inspect-popup-border);
102
+ padding-bottom: 6px;
103
+ margin-bottom: 6px;
8
104
  }
9
105
 
10
106
  .maplibregl-inspect-layer::before {
@@ -13,7 +109,9 @@
13
109
 
14
110
  .maplibregl-inspect-layer {
15
111
  display: block;
16
- font-weight: bold;
112
+ font-weight: 600;
113
+ font-size: 13px;
114
+ margin-bottom: 2px;
17
115
  }
18
116
 
19
117
  .maplibregl-inspect-property {
@@ -23,18 +121,52 @@
23
121
  .maplibregl-inspect-property-value {
24
122
  display: table-cell;
25
123
  word-break: break-all;
124
+ padding: 1px 0;
26
125
  }
27
126
 
28
127
  .maplibregl-inspect-property-name {
29
128
  display: table-cell;
30
129
  padding-right: 10px;
31
130
  word-break: break-all;
131
+ padding: 1px 0;
132
+ opacity: 0.7;
133
+ }
134
+
135
+ /* Control button backgrounds */
136
+ .maplibregl-ctrl-group:has(.maplibregl-ctrl-inspect),
137
+ .maplibregl-ctrl-group:has(.maplibregl-ctrl-map) {
138
+ background: var(--inspect-ctrl-bg);
139
+ }
140
+
141
+ /* Button icons via mask-image — specificity must beat .maplibregl-ctrl-group button */
142
+ .maplibregl-ctrl-group button.maplibregl-ctrl-inspect {
143
+ background-color: var(--inspect-button-icon);
144
+ background-image: none;
145
+ -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='xMidYMid meet' viewBox='-10 -10 60 60'%3E%3Cg%3E%3Cpath d='m15 21.6q0-2 1.5-3.5t3.5-1.5 3.5 1.5 1.5 3.5-1.5 3.6-3.5 1.4-3.5-1.4-1.5-3.6z m18.4 11.1l-6.4-6.5q1.4-2.1 1.4-4.6 0-3.4-2.5-5.8t-5.9-2.4-5.9 2.4-2.5 5.8 2.5 5.9 5.9 2.5q2.4 0 4.6-1.4l7.4 7.4q-0.9 0.6-2 0.6h-20q-1.3 0-2.3-0.9t-1.1-2.3l0.1-26.8q0-1.3 1-2.3t2.3-0.9h13.4l10 10v19.3z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
146
+ -webkit-mask-size: contain;
147
+ -webkit-mask-repeat: no-repeat;
148
+ -webkit-mask-position: center;
149
+ mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='xMidYMid meet' viewBox='-10 -10 60 60'%3E%3Cg%3E%3Cpath d='m15 21.6q0-2 1.5-3.5t3.5-1.5 3.5 1.5 1.5 3.5-1.5 3.6-3.5 1.4-3.5-1.4-1.5-3.6z m18.4 11.1l-6.4-6.5q1.4-2.1 1.4-4.6 0-3.4-2.5-5.8t-5.9-2.4-5.9 2.4-2.5 5.8 2.5 5.9 5.9 2.5q2.4 0 4.6-1.4l7.4 7.4q-0.9 0.6-2 0.6h-20q-1.3 0-2.3-0.9t-1.1-2.3l0.1-26.8q0-1.3 1-2.3t2.3-0.9h13.4l10 10v19.3z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
150
+ mask-size: contain;
151
+ mask-repeat: no-repeat;
152
+ mask-position: center;
32
153
  }
33
154
 
34
- .maplibregl-ctrl-inspect {
35
- background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23333333' preserveAspectRatio='xMidYMid meet' viewBox='-10 -10 60 60'%3E%3Cg%3E%3Cpath d='m15 21.6q0-2 1.5-3.5t3.5-1.5 3.5 1.5 1.5 3.5-1.5 3.6-3.5 1.4-3.5-1.4-1.5-3.6z m18.4 11.1l-6.4-6.5q1.4-2.1 1.4-4.6 0-3.4-2.5-5.8t-5.9-2.4-5.9 2.4-2.5 5.8 2.5 5.9 5.9 2.5q2.4 0 4.6-1.4l7.4 7.4q-0.9 0.6-2 0.6h-20q-1.3 0-2.3-0.9t-1.1-2.3l0.1-26.8q0-1.3 1-2.3t2.3-0.9h13.4l10 10v19.3z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
155
+ /* Hover state — must beat .maplibregl-ctrl button:not(:disabled):hover (0,3,1) */
156
+ .maplibregl-ctrl-group button.maplibregl-ctrl-inspect:not(:disabled):hover,
157
+ .maplibregl-ctrl-group button.maplibregl-ctrl-map:not(:disabled):hover {
158
+ background-color: var(--inspect-button-icon);
36
159
  }
37
160
 
38
- .maplibregl-ctrl-map {
39
- background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23333333' viewBox='-10 -10 60 60' preserveAspectRatio='xMidYMid meet'%3E%3Cg%3E%3Cpath d='m25 31.640000000000004v-19.766666666666673l-10-3.511666666666663v19.766666666666666z m9.140000000000008-26.640000000000004q0.8599999999999923 0 0.8599999999999923 0.8600000000000003v25.156666666666666q0 0.625-0.625 0.783333333333335l-9.375 3.1999999999999993-10-3.5133333333333354-8.906666666666668 3.4383333333333326-0.2333333333333334 0.07833333333333314q-0.8616666666666664 0-0.8616666666666664-0.8599999999999994v-25.156666666666663q0-0.625 0.6233333333333331-0.7833333333333332l9.378333333333334-3.198333333333334 10 3.5133333333333336 8.905000000000001-3.4383333333333344z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
161
+ .maplibregl-ctrl-group button.maplibregl-ctrl-map {
162
+ background-color: var(--inspect-button-icon);
163
+ background-image: none;
164
+ -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-10 -10 60 60' preserveAspectRatio='xMidYMid meet'%3E%3Cg%3E%3Cpath d='m25 31.640000000000004v-19.766666666666673l-10-3.511666666666663v19.766666666666666z m9.140000000000008-26.640000000000004q0.8599999999999923 0 0.8599999999999923 0.8600000000000003v25.156666666666666q0 0.625-0.625 0.783333333333335l-9.375 3.1999999999999993-10-3.5133333333333354-8.906666666666668 3.4383333333333326-0.2333333333333334 0.07833333333333314q-0.8616666666666664 0-0.8616666666666664-0.8599999999999994v-25.156666666666663q0-0.625 0.6233333333333331-0.7833333333333332l9.378333333333334-3.198333333333334 10 3.5133333333333336 8.905000000000001-3.4383333333333344z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
165
+ -webkit-mask-size: contain;
166
+ -webkit-mask-repeat: no-repeat;
167
+ -webkit-mask-position: center;
168
+ mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-10 -10 60 60' preserveAspectRatio='xMidYMid meet'%3E%3Cg%3E%3Cpath d='m25 31.640000000000004v-19.766666666666673l-10-3.511666666666663v19.766666666666666z m9.140000000000008-26.640000000000004q0.8599999999999923 0 0.8599999999999923 0.8600000000000003v25.156666666666666q0 0.625-0.625 0.783333333333335l-9.375 3.1999999999999993-10-3.5133333333333354-8.906666666666668 3.4383333333333326-0.2333333333333334 0.07833333333333314q-0.8616666666666664 0-0.8616666666666664-0.8599999999999994v-25.156666666666663q0-0.625 0.6233333333333331-0.7833333333333332l9.378333333333334-3.198333333333334 10 3.5133333333333336 8.905000000000001-3.4383333333333344z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
169
+ mask-size: contain;
170
+ mask-repeat: no-repeat;
171
+ mask-position: center;
40
172
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "maplibre-gl-inspect",
3
- "version": "0.0.7",
3
+ "version": "0.0.8",
4
4
  "private": false,
5
5
  "description": "UI inspect control for MapLibre GL JS maps",
6
6
  "keywords": [