From 396a216b5b6af80c5ee2a3537473da2699f56dcf Mon Sep 17 00:00:00 2001
From: Max Kohler <hello@maxkohler.com>
Date: Sun, 5 Oct 2025 12:55:29 +0200
Subject: [PATCH 1/2] Block out feature

---
 components/package.json                       |   1 +
 .../GeoJSONSource.stories.svelte              |   2 +
 .../InspectControl.stories.svelte             |  29 +++
 .../InspectControl/InspectControl.svelte      | 178 ++++++++++++++++++
 .../src/maplibre/InspectControl/index.js      |   2 +
 .../MapControl/MapControl.stories.svelte      |   2 +-
 package-lock.json                             |  27 +++
 7 files changed, 240 insertions(+), 1 deletion(-)
 create mode 100644 components/src/maplibre/InspectControl/InspectControl.stories.svelte
 create mode 100644 components/src/maplibre/InspectControl/InspectControl.svelte
 create mode 100644 components/src/maplibre/InspectControl/index.js

diff --git a/components/package.json b/components/package.json
index 11d44494..e517735a 100644
--- a/components/package.json
+++ b/components/package.json
@@ -32,6 +32,7 @@
 	},
 	"dependencies": {
 		"@maplibre/maplibre-gl-geocoder": "^1.9.1",
+		"@maplibre/maplibre-gl-inspect": "^1.7.1",
 		"maplibre-gl": "^5.7.0",
 		"svelte-select": "^5.8.3"
 	},
diff --git a/components/src/maplibre/GeoJSONSource/GeoJSONSource.stories.svelte b/components/src/maplibre/GeoJSONSource/GeoJSONSource.stories.svelte
index ae3f88d0..a74c5cfe 100644
--- a/components/src/maplibre/GeoJSONSource/GeoJSONSource.stories.svelte
+++ b/components/src/maplibre/GeoJSONSource/GeoJSONSource.stories.svelte
@@ -4,6 +4,7 @@
 	import GeoJSONSource from './GeoJSONSource.svelte';
 	import VectorLayer from '../VectorLayer/VectorLayer.svelte';
 	import DesignTokens from '../../DesignTokens/DesignTokens.svelte';
+	import InspectControl from '../InspectControl/InspectControl.svelte';
 	import AttributionControl from '../AttributionControl/AttributionControl.svelte';
 
 	import { SWRDataLabLight } from '../MapStyle';
@@ -49,6 +50,7 @@
 						'line-opacity': 1
 					}}
 				/>
+				<InspectControl />
 				<AttributionControl />
 			</Map>
 		</div>
diff --git a/components/src/maplibre/InspectControl/InspectControl.stories.svelte b/components/src/maplibre/InspectControl/InspectControl.stories.svelte
new file mode 100644
index 00000000..6c821639
--- /dev/null
+++ b/components/src/maplibre/InspectControl/InspectControl.stories.svelte
@@ -0,0 +1,29 @@
+<script context="module" lang="ts">
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import InspectControl from './InspectControl.svelte';
+	import DesignTokens from '../../DesignTokens/DesignTokens.svelte';
+	import { SWRDataLabLight } from '../MapStyle';
+	import Map from '../Map/Map.svelte';
+
+	const { Story } = defineMeta({
+		title: 'Maplibre/Control/InspectControl',
+		component: InspectControl
+	});
+</script>
+
+<Story asChild name="Default">
+	<DesignTokens theme="light">
+		<div class="container">
+			<Map style={SWRDataLabLight()} initialLocation={{ lat: 51, lng: 10, zoom: 20 }}>
+				<InspectControl />
+			</Map>
+		</div>
+	</DesignTokens>
+</Story>
+
+<style>
+	.container {
+		width: 700px;
+		height: 500px;
+	}
+</style>
diff --git a/components/src/maplibre/InspectControl/InspectControl.svelte b/components/src/maplibre/InspectControl/InspectControl.svelte
new file mode 100644
index 00000000..3fe38485
--- /dev/null
+++ b/components/src/maplibre/InspectControl/InspectControl.svelte
@@ -0,0 +1,178 @@
+<script lang="ts">
+	import MaplibreInspect from '@maplibre/maplibre-gl-inspect';
+	import maplibre, { type ControlPosition } from 'maplibre-gl';
+	import MapControl from '../MapControl/MapControl.svelte';
+
+	interface InspectControlProps {
+		position?: ControlPosition;
+	}
+	const { position = 'bottom-left' }: InspectControlProps = $props();
+</script>
+
+<MapControl
+	control={new MaplibreInspect({
+		popup: new maplibre.Popup({ closeButton: false, closeOnClick: false })
+	})}
+	{position}
+/>
+
+<style lang="scss">
+	:global {
+		.maplibregl-popup {
+			display: flex;
+			left: 0;
+			pointer-events: none;
+			position: absolute;
+			top: 0;
+			pointer-events: none;
+			will-change: transform;
+		}
+		.maplibregl-popup-anchor-top,
+		.maplibregl-popup-anchor-top-left,
+		.maplibregl-popup-anchor-top-right {
+			flex-direction: column;
+		}
+		.maplibregl-popup-anchor-bottom,
+		.maplibregl-popup-anchor-bottom-left,
+		.maplibregl-popup-anchor-bottom-right {
+			flex-direction: column-reverse;
+		}
+		.maplibregl-popup-anchor-left {
+			flex-direction: row;
+		}
+		.maplibregl-popup-anchor-right {
+			flex-direction: row-reverse;
+		}
+		.maplibregl-popup-tip {
+			border: 10px solid transparent;
+			height: 0;
+			width: 0;
+			z-index: 1;
+		}
+		.maplibregl-popup-anchor-top .maplibregl-popup-tip {
+			align-self: center;
+			border-bottom-color: #fff;
+			border-top: none;
+		}
+		.maplibregl-popup-anchor-top-left .maplibregl-popup-tip {
+			align-self: flex-start;
+			border-bottom-color: #fff;
+			border-left: none;
+			border-top: none;
+		}
+		.maplibregl-popup-anchor-top-right .maplibregl-popup-tip {
+			align-self: flex-end;
+			border-bottom-color: #fff;
+			border-right: none;
+			border-top: none;
+		}
+		.maplibregl-popup-anchor-bottom .maplibregl-popup-tip {
+			align-self: center;
+			border-bottom: none;
+			border-top-color: #fff;
+		}
+		.maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip {
+			align-self: flex-start;
+			border-bottom: none;
+			border-left: none;
+			border-top-color: #fff;
+		}
+		.maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip {
+			align-self: flex-end;
+			border-bottom: none;
+			border-right: none;
+			border-top-color: #fff;
+		}
+		.maplibregl-popup-anchor-left .maplibregl-popup-tip {
+			align-self: center;
+			border-left: none;
+			border-right-color: #fff;
+		}
+		.maplibregl-popup-anchor-right .maplibregl-popup-tip {
+			align-self: center;
+			border-left-color: #fff;
+			border-right: none;
+		}
+		.maplibregl-popup-close-button {
+			background-color: transparent;
+			border: 0;
+			border-radius: 0 3px 0 0;
+			cursor: pointer;
+			position: absolute;
+			right: 0;
+			top: 0;
+		}
+		.maplibregl-popup-close-button:hover {
+			background-color: rgba(0, 0, 0, 0.05);
+		}
+		.maplibregl-popup-content {
+			background: #fff;
+			border-radius: 3px;
+			box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+			padding: 15px 10px;
+			pointer-events: none;
+			position: relative;
+		}
+		.maplibregl-popup-anchor-top-left .maplibregl-popup-content {
+			border-top-left-radius: 0;
+		}
+		.maplibregl-popup-anchor-top-right .maplibregl-popup-content {
+			border-top-right-radius: 0;
+		}
+		.maplibregl-popup-anchor-bottom-left .maplibregl-popup-content {
+			border-bottom-left-radius: 0;
+		}
+		.maplibregl-popup-anchor-bottom-right .maplibregl-popup-content {
+			border-bottom-right-radius: 0;
+		}
+		.maplibregl-popup-track-pointer {
+			display: none;
+		}
+		.maplibregl-popup-track-pointer * {
+			pointer-events: none;
+			-webkit-user-select: none;
+			-moz-user-select: none;
+			user-select: none;
+		}
+		.maplibregl-inspect_popup {
+			font-family: monospace;
+			display: table;
+		}
+
+		.maplibregl-inspect_feature:not(:last-child) {
+			border-bottom: 1px solid #ccc;
+		}
+
+		.maplibregl-inspect_layer:before {
+			content: '#';
+		}
+
+		.maplibregl-inspect_layer {
+			display: block;
+			font-weight: bold;
+		}
+
+		.maplibregl-inspect_property {
+			display: table-row;
+		}
+
+		.maplibregl-inspect_property-value {
+			display: table-cell;
+			word-break: break-all;
+		}
+
+		.maplibregl-inspect_property-name {
+			display: table-cell;
+			padding-right: 10px;
+			word-break: break-all;
+		}
+
+		.maplibregl-ctrl-inspect {
+			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");
+		}
+
+		.maplibregl-ctrl-map {
+			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");
+		}
+	}
+</style>
diff --git a/components/src/maplibre/InspectControl/index.js b/components/src/maplibre/InspectControl/index.js
new file mode 100644
index 00000000..3cd13641
--- /dev/null
+++ b/components/src/maplibre/InspectControl/index.js
@@ -0,0 +1,2 @@
+import InspectControl from './InspectControl.svelte';
+export default InspectControl;
diff --git a/components/src/maplibre/MapControl/MapControl.stories.svelte b/components/src/maplibre/MapControl/MapControl.stories.svelte
index 6c6aefad..53bd692f 100644
--- a/components/src/maplibre/MapControl/MapControl.stories.svelte
+++ b/components/src/maplibre/MapControl/MapControl.stories.svelte
@@ -1,4 +1,5 @@
 <script module lang="ts">
+	import type { StyleSpecification } from 'maplibre-gl';
 	import { defineMeta } from '@storybook/addon-svelte-csf';
 	import MapControl from './MapControl.svelte';
 	import { SWRDataLabLight } from '../MapStyle';
@@ -11,7 +12,6 @@
 	};
 
 	import { eclipse } from '@versatiles/style';
-	import type { StyleSpecification } from 'maplibre-gl';
 	const eclipseStyle = eclipse({
 		language: 'de',
 		baseUrl: 'https://tiles.versatiles.org',
diff --git a/package-lock.json b/package-lock.json
index b48d4bee..1ff684bb 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -21,6 +21,7 @@
 			"license": "UNLICENSED",
 			"dependencies": {
 				"@maplibre/maplibre-gl-geocoder": "^1.9.1",
+				"@maplibre/maplibre-gl-inspect": "^1.7.1",
 				"maplibre-gl": "^5.7.0",
 				"svelte-select": "^5.8.3"
 			},
@@ -2478,6 +2479,19 @@
 				"maplibre-gl": ">=4.0.0"
 			}
 		},
+		"node_modules/@maplibre/maplibre-gl-inspect": {
+			"version": "1.7.1",
+			"resolved": "https://registry.npmjs.org/@maplibre/maplibre-gl-inspect/-/maplibre-gl-inspect-1.7.1.tgz",
+			"integrity": "sha512-e4f1LBZT58L4oUQ8qA16nbiq5Y1sgqIaruDcpWpi2/UE1yAl/0XASZq3x9vDOkM9XshyxBMDz1nNZfJoqIIoXw==",
+			"license": "BSD-3-Clause",
+			"dependencies": {
+				"lodash.isequal": "^4.5.0",
+				"randomcolor": "^0.6.2"
+			},
+			"peerDependencies": {
+				"maplibre-gl": ">3.0.0"
+			}
+		},
 		"node_modules/@maplibre/maplibre-gl-style-spec": {
 			"version": "23.3.0",
 			"resolved": "https://registry.npmjs.org/@maplibre/maplibre-gl-style-spec/-/maplibre-gl-style-spec-23.3.0.tgz",
@@ -13086,6 +13100,13 @@
 			"dev": true,
 			"license": "MIT"
 		},
+		"node_modules/lodash.isequal": {
+			"version": "4.5.0",
+			"resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz",
+			"integrity": "sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ==",
+			"deprecated": "This package is deprecated. Use require('node:util').isDeepStrictEqual instead.",
+			"license": "MIT"
+		},
 		"node_modules/lodash.isplainobject": {
 			"version": "4.0.6",
 			"resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
@@ -19210,6 +19231,12 @@
 			"integrity": "sha512-XdjUArbK4Bm5fLLvlm5KpTFOiOThgfWWI4axAZDWg4E/0mKdZyI9tNEfds27qCi1ze/vwTR16kvmmGhRra3c2g==",
 			"license": "ISC"
 		},
+		"node_modules/randomcolor": {
+			"version": "0.6.2",
+			"resolved": "https://registry.npmjs.org/randomcolor/-/randomcolor-0.6.2.tgz",
+			"integrity": "sha512-Mn6TbyYpFgwFuQ8KJKqf3bqqY9O1y37/0jgSK/61PUxV4QfIMv0+K2ioq8DfOjkBslcjwSzRfIDEXfzA9aCx7A==",
+			"license": "CC0"
+		},
 		"node_modules/range-parser": {
 			"version": "1.2.1",
 			"resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz",

From 0ce4c772f76e969059bd155d253ee907995763e7 Mon Sep 17 00:00:00 2001
From: Max Kohler <hello@maxkohler.com>
Date: Sun, 5 Oct 2025 12:55:55 +0200
Subject: [PATCH 2/2] Tweak story

---
 .../src/maplibre/InspectControl/InspectControl.stories.svelte | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/src/maplibre/InspectControl/InspectControl.stories.svelte b/components/src/maplibre/InspectControl/InspectControl.stories.svelte
index 6c821639..c2b0abb7 100644
--- a/components/src/maplibre/InspectControl/InspectControl.stories.svelte
+++ b/components/src/maplibre/InspectControl/InspectControl.stories.svelte
@@ -23,7 +23,7 @@
 
 <style>
 	.container {
-		width: 700px;
-		height: 500px;
+		width: 500px;
+		height: 200px;
 	}
 </style>