Product
Introducing SSO
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
@maplibre/maplibre-gl-inspect
Advanced tools
Readme
Maplibre GL Inspect is a fork of Mapbox GL Inspect by lukasmartinelli ( https://github.com/lukasmartinelli/mapbox-gl-inspect ). It was forked to add support for maplibre-gl-js.
Add an inspect control to maplibre-gl-js to view all features of the vector sources and allows hovering over features to see their properties.
Requires maplibre-gl-js (min version 1.15).
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
<script src='https://unpkg.com/@maplibre/maplibre-gl-inspect@latest/dist/maplibre-gl-inspect.js'></script>
<link href='https://unpkg.com/@maplibre/maplibre-gl-inspect@latest/dist/maplibre-gl-inspect.css' rel='stylesheet' />
When using modules
require('maplibre-gl-inspect/dist/maplibre-gl-inspect.css');
var maplibregl = require('maplibre-gl');
var MaplibreInspect = require('maplibre-gl-inspect');
// Pass an initialized popup to Maplibre GL
map.addControl(new MaplibreInspect({
popup: new maplibregl.Popup({
closeButton: false,
closeOnClick: false
})
}));
Add the inspect control to your map.
map.addControl(new MaplibreInspect());
Switch to the inspection map by default.
map.addControl(new MaplibreInspect({
showInspectMap: true
}));
Switch to the inspection map by default and hide the inspect button to switch back to the normal map. Check examples/inspect-only.html
map.addControl(new MaplibreInspect({
showInspectMap: true,
showInspectButton: false
}));
Disable the feature Popup in inspection mode and in map mode. Check examples/no-popup.html
map.addControl(new MaplibreInspect({
showInspectMapPopup: false,
showMapPopup: false
}));
You can also control the Popup output. Check examples/custom-popup.html
map.addControl(new MaplibreInspect({
renderPopup: function(features) {
return '<h1>' + features.length + '</h1>';
}
}));
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
.
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];
}
}));
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
.
map.addControl(new MaplibreInspect({
showInspectButton: false,
showMapPopup: true
}));
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
.
map.addControl(new MaplibreInspect({
queryParameters: {
layers: ['composite_road_line']
}
}));
You can also use this feature to do custom layer filtering.
map.addControl(new MaplibreInspect({
queryParameters: {
filter: ['>', 'height', 10]
}
}));
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
.
map.addControl(new MaplibreInspect({
selectThreshold: 50
}));
Do not show the inspect popup when hovering over the map but only when clicking on the map.
Check examples/popup-on-click.html
.
map.addControl(new MaplibreInspect({
showMapPopup: true,
showMapPopupOnHover: false,
showInspectMapPopupOnHover: false
}));
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
.
map.addControl(new MaplibreInspect({
toggleCallback: function(showInspectMap) {
console.log(`showInspectMap is ${showInspectMap}`);
}
}));
Run the linter and watch for changes to rebuild with browserify.
npm install
npm run lint
npm run watch
Create a minified standalone build.
npm install
npm run build
FAQs
Maplibre GL JS plugin for inspecting vector data
The npm package @maplibre/maplibre-gl-inspect receives a total of 36 weekly downloads. As such, @maplibre/maplibre-gl-inspect popularity was classified as not popular.
We found that @maplibre/maplibre-gl-inspect demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 3 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.