maplibre-gl-inspect 0.0.1
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.
- package/LICENSE +21 -0
- package/README.md +211 -0
- package/package.json +107 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2019-current Vinayak Kulkarni
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1,211 @@
|
|
|
1
|
+
# Maplibre GL Inspect
|
|
2
|
+
|
|
3
|
+
<!-- Badges -->
|
|
4
|
+
[](https://github.com/geoql/maplibre-gl-inspect/actions/workflows/ci.yml)
|
|
5
|
+
[](https://github.com/geoql/maplibre-gl-inspect/actions/workflows/shipjs-trigger.yml)
|
|
6
|
+
[](https://github.com/geoql/maplibre-gl-inspect/actions/workflows/codeql.yml)
|
|
7
|
+
[](https://github.com/geoql/maplibre-gl-inspect/releases)
|
|
8
|
+
[![DeepScan grade]()]()
|
|
9
|
+
[](https://github.com/geoql/maplibre-gl-inspect/graphs/contributors)
|
|
10
|
+
|
|
11
|
+
[](https://vitejs.dev)
|
|
12
|
+
[](https://maplibre.org/maplibre-gl-js-docs/api/)
|
|
13
|
+
[](https://typicode.github.io/husky/#/)
|
|
14
|
+
[](https://eslint.org/)
|
|
15
|
+
[](https://prettier.io/)
|
|
16
|
+
[](https://www.typescriptlang.org/)
|
|
17
|
+
|
|
18
|
+
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 🕺
|
|
19
|
+
|
|
20
|
+
Add an inspect control to [maplibre-gl-js](https://github.com/maplibre/maplibre-gl-js) to view all features
|
|
21
|
+
of the vector sources and allows hovering over features to see their properties.
|
|
22
|
+
|
|
23
|
+
**Requires [maplibre-gl-js](https://github.com/maplibre/maplibre-gl-js) (min version 1.15).**
|
|
24
|
+
|
|
25
|
+
|
|
26
|
+
|
|
27
|
+
## Usage
|
|
28
|
+
|
|
29
|
+
**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.
|
|
30
|
+
|
|
31
|
+
Make sure to include the CSS and JS files.
|
|
32
|
+
|
|
33
|
+
**When using a CDN**
|
|
34
|
+
|
|
35
|
+
```html
|
|
36
|
+
<script src='https://unpkg.com/maplibre-gl-inspect@latest/dist/maplibre-gl-inspect.min.js'></script>
|
|
37
|
+
```
|
|
38
|
+
<!-- <link href='https://unpkg.com/maplibre-gl-inspect@latest/dist/maplibre-gl-inspect.css' rel='stylesheet' /> -->
|
|
39
|
+
|
|
40
|
+
**When using modules**
|
|
41
|
+
|
|
42
|
+
```js
|
|
43
|
+
require('maplibre-gl-inspect/dist/maplibre-gl-inspect.css');
|
|
44
|
+
var maplibregl = require('maplibre-gl');
|
|
45
|
+
var MaplibreInspect = require('maplibre-gl-inspect');
|
|
46
|
+
|
|
47
|
+
// Pass an initialized popup to Maplibre GL
|
|
48
|
+
map.addControl(new MaplibreInspect({
|
|
49
|
+
popup: new maplibregl.Popup({
|
|
50
|
+
closeButton: false,
|
|
51
|
+
closeOnClick: false
|
|
52
|
+
})
|
|
53
|
+
}));
|
|
54
|
+
```
|
|
55
|
+
|
|
56
|
+
|
|
57
|
+
### Add Inspect Control
|
|
58
|
+
|
|
59
|
+
Add the inspect control to your map.
|
|
60
|
+
|
|
61
|
+
```javascript
|
|
62
|
+
map.addControl(new MaplibreInspect());
|
|
63
|
+
```
|
|
64
|
+
|
|
65
|
+
|
|
66
|
+
### Show Inspection Map
|
|
67
|
+
|
|
68
|
+
Switch to the inspection map by default.
|
|
69
|
+
|
|
70
|
+
```javascript
|
|
71
|
+
map.addControl(new MaplibreInspect({
|
|
72
|
+
showInspectMap: true
|
|
73
|
+
}));
|
|
74
|
+
```
|
|
75
|
+
|
|
76
|
+
### Show only Inspection Mode
|
|
77
|
+
|
|
78
|
+
Switch to the inspection map by default and hide the inspect button to switch back to the normal map. Check `examples/inspect-only.html`
|
|
79
|
+
|
|
80
|
+
|
|
81
|
+
```javascript
|
|
82
|
+
map.addControl(new MaplibreInspect({
|
|
83
|
+
showInspectMap: true,
|
|
84
|
+
showInspectButton: false
|
|
85
|
+
}));
|
|
86
|
+
```
|
|
87
|
+
|
|
88
|
+
### Disable Popup
|
|
89
|
+
|
|
90
|
+
Disable the feature Popup in inspection mode and in map mode. Check `examples/no-popup.html`
|
|
91
|
+
|
|
92
|
+
```javascript
|
|
93
|
+
map.addControl(new MaplibreInspect({
|
|
94
|
+
showInspectMapPopup: false,
|
|
95
|
+
showMapPopup: false
|
|
96
|
+
}));
|
|
97
|
+
```
|
|
98
|
+
|
|
99
|
+
### Custom Popup Function
|
|
100
|
+
|
|
101
|
+
You can also control the Popup output. Check `examples/custom-popup.html`
|
|
102
|
+
|
|
103
|
+
```javascript
|
|
104
|
+
map.addControl(new MaplibreInspect({
|
|
105
|
+
renderPopup: function(features) {
|
|
106
|
+
return '<h1>' + features.length + '</h1>';
|
|
107
|
+
}
|
|
108
|
+
}));
|
|
109
|
+
```
|
|
110
|
+
|
|
111
|
+
### Custom Color Function
|
|
112
|
+
|
|
113
|
+
You are able to control the generated colors and background of the inspection style.
|
|
114
|
+
Check `examples/custom-color-1.html` and `examples/custom-color-2.html`.
|
|
115
|
+
|
|
116
|
+
```javascript
|
|
117
|
+
var colors = ['#FC49A3', '#CC66FF', '#66CCFF', '#66FFCC'];
|
|
118
|
+
map.addControl(new MaplibreInspect({
|
|
119
|
+
backgroundColor: '#000',
|
|
120
|
+
assignLayerColor: function(layerId, alpha) {
|
|
121
|
+
var randomNumber = parseInt(Math.random() * colors.length);
|
|
122
|
+
return colors[randomNumber];
|
|
123
|
+
}
|
|
124
|
+
}));
|
|
125
|
+
```
|
|
126
|
+
|
|
127
|
+
### Show just Popup but no Inspect Style
|
|
128
|
+
|
|
129
|
+
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.
|
|
130
|
+
Check `examples/no-inspect-style.html`.
|
|
131
|
+
|
|
132
|
+
|
|
133
|
+
```js
|
|
134
|
+
map.addControl(new MaplibreInspect({
|
|
135
|
+
showInspectButton: false,
|
|
136
|
+
showMapPopup: true
|
|
137
|
+
}));
|
|
138
|
+
```
|
|
139
|
+
|
|
140
|
+
### Show Popup only for certain Features
|
|
141
|
+
|
|
142
|
+
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).
|
|
143
|
+
This let's you show the inspect popup for only certain layers.
|
|
144
|
+
Check `examples/query-params.html`.
|
|
145
|
+
|
|
146
|
+
|
|
147
|
+
```js
|
|
148
|
+
map.addControl(new MaplibreInspect({
|
|
149
|
+
queryParameters: {
|
|
150
|
+
layers: ['composite_road_line']
|
|
151
|
+
}
|
|
152
|
+
}));
|
|
153
|
+
```
|
|
154
|
+
|
|
155
|
+
You can also use this feature to do custom layer [filtering](https://maplibre.org/maplibre-gl-js-docs/style-spec/types/).
|
|
156
|
+
|
|
157
|
+
```js
|
|
158
|
+
map.addControl(new MaplibreInspect({
|
|
159
|
+
queryParameters: {
|
|
160
|
+
filter: ['>', 'height', 10]
|
|
161
|
+
}
|
|
162
|
+
}));
|
|
163
|
+
```
|
|
164
|
+
|
|
165
|
+
### Less Fidly Popup
|
|
166
|
+
|
|
167
|
+
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.
|
|
168
|
+
Check `examples/less-fidly.html`.
|
|
169
|
+
|
|
170
|
+
|
|
171
|
+
```js
|
|
172
|
+
map.addControl(new MaplibreInspect({
|
|
173
|
+
selectThreshold: 50
|
|
174
|
+
}));
|
|
175
|
+
```
|
|
176
|
+
|
|
177
|
+
### Show Popup only on Click not on Hovering
|
|
178
|
+
|
|
179
|
+
Do not show the inspect popup when hovering over the map but only when clicking on the map.
|
|
180
|
+
Check `examples/popup-on-click.html`.
|
|
181
|
+
|
|
182
|
+
|
|
183
|
+
```js
|
|
184
|
+
map.addControl(new MaplibreInspect({
|
|
185
|
+
showMapPopup: true,
|
|
186
|
+
showMapPopupOnHover: false,
|
|
187
|
+
showInspectMapPopupOnHover: false
|
|
188
|
+
}));
|
|
189
|
+
```
|
|
190
|
+
|
|
191
|
+
### Add a Callback for Inspect Toggle Events
|
|
192
|
+
|
|
193
|
+
Call a function whenever the user toggles the inpect map on or off. Useful for adding inspect state to URL hash.
|
|
194
|
+
Check `examples/url-hash-toggle-callback.html`.
|
|
195
|
+
|
|
196
|
+
```js
|
|
197
|
+
map.addControl(new MaplibreInspect({
|
|
198
|
+
toggleCallback: function(showInspectMap) {
|
|
199
|
+
console.log(`showInspectMap is ${showInspectMap}`);
|
|
200
|
+
}
|
|
201
|
+
}));
|
|
202
|
+
```
|
|
203
|
+
|
|
204
|
+
## Develop
|
|
205
|
+
|
|
206
|
+
Create a minified standalone build.
|
|
207
|
+
|
|
208
|
+
```
|
|
209
|
+
npm install
|
|
210
|
+
npm run build
|
|
211
|
+
```
|
package/package.json
ADDED
|
@@ -0,0 +1,107 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "maplibre-gl-inspect",
|
|
3
|
+
"description": "Mapbox layer for average/interpolation heatmaps",
|
|
4
|
+
"version": "0.0.1",
|
|
5
|
+
"main": "./dist/maplibre-gl-inspect.js",
|
|
6
|
+
"module": "./dist/maplibre-gl-inspect.js",
|
|
7
|
+
"umd": "./dist/maplibre-gl-inspect.umd.cjs",
|
|
8
|
+
"unpkg": "./dist/maplibre-gl-inspect.cjs",
|
|
9
|
+
"jsdelivr": "./dist/maplibre-gl-inspect.cjs",
|
|
10
|
+
"cdn": "./dist/maplibre-gl-inspect.min.js",
|
|
11
|
+
"exports": {
|
|
12
|
+
".": {
|
|
13
|
+
"import": "./dist/maplibre-gl-inspect.js",
|
|
14
|
+
"require": "./dist/maplibre-gl-inspect.umd.cjs"
|
|
15
|
+
}
|
|
16
|
+
},
|
|
17
|
+
"types": "./dist/maplibre-gl-inspect.d.ts",
|
|
18
|
+
"type": "module",
|
|
19
|
+
"files": [
|
|
20
|
+
"dist"
|
|
21
|
+
],
|
|
22
|
+
"scripts": {
|
|
23
|
+
"build": "rimraf dist && vite build && prettier --write dist/*{cjs,js,ts}",
|
|
24
|
+
"test": "echo 'test!'",
|
|
25
|
+
"prepare": "husky install",
|
|
26
|
+
"lint": "npm run lint:css && npm run lint:prettier && npm run lint:eslint",
|
|
27
|
+
"lintfix": "npm run lint:css:fix && npm run lint:prettier:fix && npm run lint:eslint:fix",
|
|
28
|
+
"lint:js": "npm run lint:eslint && npm run lint:prettier",
|
|
29
|
+
"lint:eslint": "eslint \"{,!(node_modules|dist)/**/}*.{js,ts}\" --ignore-path .gitignore",
|
|
30
|
+
"lint:eslint:fix": "eslint --fix \"{,!(node_modules|dist)/**/}*.{js,ts}\" --ignore-path .gitignore",
|
|
31
|
+
"lint:prettier": "prettier --check \"{,!(node_modules|dist)/**/}*.{js,ts}\" --ignore-path .gitignore",
|
|
32
|
+
"lint:prettier:fix": "prettier --write \"{,!(node_modules|dist)/**/}*.{js,ts}\" --ignore-path .gitignore",
|
|
33
|
+
"lint:css": "stylelint '**/*.{css,scss,sass}' --ignore-path .gitignore",
|
|
34
|
+
"lint:css:fix": "stylelint --fix '**/*.{css,scss,sass}' --ignore-path .gitignore",
|
|
35
|
+
"release": "shipjs prepare",
|
|
36
|
+
"release:auto": "shipjs prepare --yes",
|
|
37
|
+
"release:dry": "shipjs prepare --dry-run"
|
|
38
|
+
},
|
|
39
|
+
"dependencies": {
|
|
40
|
+
"randomcolor": "^0.6.2"
|
|
41
|
+
},
|
|
42
|
+
"devDependencies": {
|
|
43
|
+
"@commitlint/cli": "^17.5.0",
|
|
44
|
+
"@commitlint/config-conventional": "^17.4.4",
|
|
45
|
+
"@types/node": "^18.15.5",
|
|
46
|
+
"@types/randomcolor": "^0.5.7",
|
|
47
|
+
"@typescript-eslint/eslint-plugin": "^5.56.0",
|
|
48
|
+
"@typescript-eslint/parser": "^5.56.0",
|
|
49
|
+
"eslint": "^8.36.0",
|
|
50
|
+
"eslint-config-prettier": "^8.8.0",
|
|
51
|
+
"eslint-plugin-import": "^2.27.5",
|
|
52
|
+
"eslint-plugin-jsdoc": "^40.1.0",
|
|
53
|
+
"eslint-plugin-prettier": "^4.2.1",
|
|
54
|
+
"eslint-plugin-security": "^1.7.1",
|
|
55
|
+
"husky": "^8.0.3",
|
|
56
|
+
"lint-staged": "^13.2.0",
|
|
57
|
+
"lodash.isequal": "^4.5.0",
|
|
58
|
+
"maplibre-gl": "^2.4.0",
|
|
59
|
+
"prettier": "^2.8.6",
|
|
60
|
+
"sass": "^1.59.3",
|
|
61
|
+
"shipjs": "^0.26.1",
|
|
62
|
+
"stylelint": "^15.3.0",
|
|
63
|
+
"stylelint-config-standard": "^31.0.0",
|
|
64
|
+
"stylelint-prettier": "^3.0.0",
|
|
65
|
+
"typescript": "^5.0.2",
|
|
66
|
+
"vite": "^4.2.1",
|
|
67
|
+
"vite-plugin-dts": "^2.1.0"
|
|
68
|
+
},
|
|
69
|
+
"peerDependencies": {
|
|
70
|
+
"maplibre-gl": "^2.4.0"
|
|
71
|
+
},
|
|
72
|
+
"keywords": [
|
|
73
|
+
"maplibre",
|
|
74
|
+
"maplibre-gl",
|
|
75
|
+
"inspect-tool",
|
|
76
|
+
"GIS",
|
|
77
|
+
"maplibre-gl-js",
|
|
78
|
+
"inspect-control",
|
|
79
|
+
"map"
|
|
80
|
+
],
|
|
81
|
+
"publishConfig": {
|
|
82
|
+
"access": "public",
|
|
83
|
+
"registry": "https://registry.npmjs.org"
|
|
84
|
+
},
|
|
85
|
+
"author": {
|
|
86
|
+
"name": "Vinayak Kulkarni",
|
|
87
|
+
"email": "inbox.vinayak@gmail.com",
|
|
88
|
+
"url": "https://vinayakkulkarni.dev"
|
|
89
|
+
},
|
|
90
|
+
"contributors": [
|
|
91
|
+
"Andrew Calcutt",
|
|
92
|
+
"Lukas Martinelli"
|
|
93
|
+
],
|
|
94
|
+
"license": "MIT",
|
|
95
|
+
"engines": {
|
|
96
|
+
"node": ">=18.15.0",
|
|
97
|
+
"npm": ">=9.6.2"
|
|
98
|
+
},
|
|
99
|
+
"private": false,
|
|
100
|
+
"sideEffects": [
|
|
101
|
+
"*.css"
|
|
102
|
+
],
|
|
103
|
+
"bugs": {
|
|
104
|
+
"url": "https://github.com/geoql/maplibre-gl-inspect/issues"
|
|
105
|
+
},
|
|
106
|
+
"homepage": "https://github.com/geoql/maplibre-gl-inspect#readme"
|
|
107
|
+
}
|