@swr-data-lab/components 1.13.1 → 1.13.3

package/dist/Switcher/Switcher.stories.svelte

@@ -1,44 +0,0 @@
-<script context="module">
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import Switcher from './Switcher.svelte';
-	import DesignTokens from '../DesignTokens/DesignTokens.svelte';
-	import { userEvent, within, expect } from 'storybook/test';
-
-	const { Story } = defineMeta({
-		title: 'Form/Switcher',
-		component: Switcher
-	});
-</script>
-
-<Story name="Two Options" asChild>
-	<DesignTokens>
-		<Switcher options={['Option A', 'Option B']} value="Option A" size="default" label="Label" />
-	</DesignTokens>
-</Story>
-
-<Story
-	name="Four Options"
-	asChild
-	play={async ({ canvasElement, step }) => {
-		const canvas = within(canvasElement);
-		await step('Clicking selects the expected option', async () => {
-			const optionA = canvas.getByLabelText('Apples');
-			const optionB = canvas.getByLabelText('Bananas');
-			await userEvent.click(optionA);
-			expect(optionA).toBeChecked();
-			expect(optionB).not.toBeChecked();
-			await userEvent.click(optionB);
-			expect(optionB).toBeChecked();
-			expect(optionA).not.toBeChecked();
-		});
-	}}
->
-	<DesignTokens>
-		<Switcher
-			options={['Apples', 'Oranges', 'Bananas', 'Peaches']}
-			value="Oranges"
-			label="Label"
-			size="small"
-		/>
-	</DesignTokens>
-</Story>

package/dist/Switcher/Switcher.stories.svelte.d.ts

@@ -1,27 +0,0 @@
-export default Switcher;
-type Switcher = SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string | undefined;
-};
-declare const Switcher: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-import Switcher from './Switcher.svelte';
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}

package/dist/maplibre/AttributionControl/AttributionControl.stories.svelte

@@ -1,27 +0,0 @@
-<script context="module" lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
-import AttributionControl from './AttributionControl.svelte';
-import DesignTokens from '../../DesignTokens/DesignTokens.svelte';
-import Map from '../Map/Map.svelte';
-import { SWRDataLabLight } from '../MapStyle';
-const { Story } = defineMeta({
-    title: 'Maplibre/Control/AttributionControl',
-    component: AttributionControl
-});
-</script>
-
-<Story asChild name="Default">
-	<DesignTokens>
-		<div class="container">
-			<Map style={SWRDataLabLight} initialLocation={{ lat: 51, lng: 10, zoom: 20 }}>
-				<AttributionControl customAttribution="SWR Data Lab" position="bottom-left" />
-			</Map>
-		</div>
-	</DesignTokens>
-</Story>
-
-<style>
-	.container {
-		width: 500px;
-		height: 300px;
-	}
-</style>

package/dist/maplibre/AttributionControl/AttributionControl.stories.svelte.d.ts

@@ -1,19 +0,0 @@
-import AttributionControl from './AttributionControl.svelte';
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const AttributionControl: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type AttributionControl = InstanceType<typeof AttributionControl>;
-export default AttributionControl;

package/dist/maplibre/GeocoderControl/GeocoderControl.stories.svelte

@@ -1,74 +0,0 @@
-<script context="module" lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
-import { within, expect } from 'storybook/test';
-import GeocoderControl from './GeocoderControl.svelte';
-import DesignTokens from '../../DesignTokens/DesignTokens.svelte';
-import Map from '../Map/Map.svelte';
-import { SWRDataLabLight } from '../MapStyle';
-const { Story } = defineMeta({
-    title: 'Maplibre/Control/GeocoderControl',
-    component: GeocoderControl
-});
-</script>
-
-<Story
-	asChild
-	name="Default"
-	play={async ({ canvasElement, step }) => {
-		const canvas = within(canvasElement);
-		const containerEl = canvas.getByTestId('map-container');
-
-		await step('Geocoder control renders', async () => {
-			const el = containerEl.querySelector('.maplibregl-ctrl-geocoder');
-			expect(el).toBeTruthy();
-		});
-		await step('Localised placeholder text renders', async () => {
-			const el = containerEl.querySelector('.maplibregl-ctrl-geocoder input');
-			expect(el).toHaveAttribute('placeholder', 'Suche');
-		});
-	}}
->
-	<DesignTokens>
-		<div class="container">
-			<Map style={SWRDataLabLight} initialLocation={{ lat: 51, lng: 10, zoom: 20 }}>
-				<GeocoderControl languages="de" service="maptiler" key="V32kPHZjMa0Mkn6YvSzA" />
-			</Map>
-		</div>
-	</DesignTokens>
-</Story>
-<Story
-	asChild
-	name="Custom placeholder text"
-	play={async ({ canvasElement, step }) => {
-		const canvas = within(canvasElement);
-		const containerEl = canvas.getByTestId('map-container');
-
-		await step('Geocoder control renders', async () => {
-			const el = containerEl.querySelector('.maplibregl-ctrl-geocoder');
-			expect(el).toBeTruthy();
-		});
-		await step('Custom placeholder text renders', async () => {
-			const el = containerEl.querySelector('.maplibregl-ctrl-geocoder input');
-			expect(el).toHaveAttribute('placeholder', 'My placeholder text');
-		});
-	}}
->
-	<DesignTokens>
-		<div class="container">
-			<Map style={SWRDataLabLight} initialLocation={{ lat: 51, lng: 10, zoom: 20 }}>
-				<GeocoderControl
-					placeholder="My placeholder text"
-					languages="de"
-					service="maptiler"
-					key="V32kPHZjMa0Mkn6YvSzA"
-				/>
-			</Map>
-		</div>
-	</DesignTokens>
-</Story>
-
-<style>
-	.container {
-		width: 500px;
-		height: 300px;
-	}
-</style>

package/dist/maplibre/GeocoderControl/GeocoderControl.stories.svelte.d.ts

@@ -1,19 +0,0 @@
-import GeocoderControl from './GeocoderControl.svelte';
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const GeocoderControl: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type GeocoderControl = InstanceType<typeof GeocoderControl>;
-export default GeocoderControl;

package/dist/maplibre/Map/Map.stories.svelte

@@ -1,113 +0,0 @@
-<script context="module" lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
-import { within, expect } from 'storybook/test';
-import Map from './Map.svelte';
-import ScaleControl from '../ScaleControl/ScaleControl.svelte';
-import NavigationControl from '../NavigationControl/NavigationControl.svelte';
-import DesignTokens from '../../DesignTokens/DesignTokens.svelte';
-import AttributionControl from '../AttributionControl/AttributionControl.svelte';
-import GeocoderControl from '../GeocoderControl/GeocoderControl.svelte';
-import { SWRDataLabLight } from '../MapStyle';
-import { eclipse } from '@versatiles/style';
-const alternateStyle = eclipse({
-    language: 'de',
-    baseUrl: 'https://tiles.versatiles.org',
-    glyphs: 'https://static.datenhub.net/maps/fonts/{fontstack}/{range}.pbf'
-});
-const { Story } = defineMeta({
-    title: 'Maplibre/Map',
-    component: Map
-});
-</script>
-
-<Story
-	asChild
-	name="Default"
-	play={async ({ canvasElement, step }) => {
-		const canvas = within(canvasElement);
-		const containerEl = canvas.getByTestId('map-container');
-
-		await step('Map canvas renders', async () => {
-			const mapEl = containerEl.querySelector('.maplibregl-canvas');
-			expect(mapEl).toBeTruthy();
-		});
-		await step('Scale control renders', async () => {
-			const el = containerEl.querySelector('.maplibregl-ctrl-scale');
-			expect(el).toBeTruthy();
-		});
-		await step('Scale renders expected value', async () => {
-			const el = containerEl.querySelector('.maplibregl-ctrl-scale');
-			expect(el).toHaveTextContent('100 km');
-		});
-		await step('Navigation control renders', async () => {
-			const zoomInEl = containerEl.querySelector('.maplibregl-ctrl-zoom-in');
-			const zoomOutEl = containerEl.querySelector('.maplibregl-ctrl-zoom-out');
-			expect(zoomInEl).toBeTruthy();
-			expect(zoomInEl).toHaveRole('button');
-			expect(zoomOutEl).toBeTruthy();
-			expect(zoomOutEl).toHaveRole('button');
-		});
-
-		await step('Attribution control renders', async () => {
-			const el = containerEl.querySelector('.maplibregl-ctrl-attrib');
-			expect(el).toBeTruthy();
-		});
-
-		await step('Geocoder control renders', async () => {
-			const el = containerEl.querySelector('.maplibregl-ctrl-geocoder');
-			expect(el).toBeTruthy();
-		});
-	}}
->
-	<div class="container">
-		<DesignTokens>
-			<Map style={SWRDataLabLight}>
-				<ScaleControl />
-				<AttributionControl />
-				<NavigationControl showCompass visualizePitch />
-				<GeocoderControl languages="de" service="maptiler" key="V32kPHZjMa0Mkn6YvSzA" />
-			</Map>
-		</DesignTokens>
-	</div>
-</Story>
-
-<Story asChild name="Globe Projection">
-	<div class="container dark">
-		<DesignTokens>
-			<Map
-				style={SWRDataLabLight}
-				showDebug
-				projection={{ type: 'globe' }}
-				pitch={52}
-				initialLocation={{ lat: 51.3, lng: 10.2, zoom: 3.5 }}
-			>
-				<ScaleControl />
-				<AttributionControl />
-				<NavigationControl showCompass visualizePitch />
-				<GeocoderControl languages="de" service="maptiler" key="V32kPHZjMa0Mkn6YvSzA" />
-			</Map>
-		</DesignTokens>
-	</div>
-</Story>
-
-<Story asChild name="Alternate Style">
-	<div class="container dark">
-		<DesignTokens>
-			<Map style={alternateStyle}>
-				<ScaleControl />
-				<AttributionControl />
-				<NavigationControl showCompass visualizePitch />
-				<GeocoderControl languages="de" service="maptiler" key="V32kPHZjMa0Mkn6YvSzA" />
-			</Map>
-		</DesignTokens>
-	</div>
-</Story>
-
-<style>
-	.container {
-		width: 100%;
-		height: 600px;
-	}
-	.dark {
-		color: rgb(230, 230, 230);
-	}
-</style>

package/dist/maplibre/Map/Map.stories.svelte.d.ts

@@ -1,19 +0,0 @@
-import Map from './Map.svelte';
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const Map: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type Map = InstanceType<typeof Map>;
-export default Map;

package/dist/maplibre/MapControl/MapControl.mdx

@@ -1,12 +0,0 @@
-import { Meta } from '@storybook/addon-docs/blocks';
-import { Story, Primary, Controls, Stories } from '@storybook/addon-docs/blocks';
-import * as MapControlStories from './MapControl.stories.svelte';
-
-<Meta of={MapControlStories} />
-
-# MapControl
-
-Base component used by all other built-in control components. Also useful for building application-specific controls (see demo below).
-
-<Stories />
-<Controls />

package/dist/maplibre/MapControl/MapControl.stories.svelte

@@ -1,46 +0,0 @@
-<script module lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
-import MapControl from './MapControl.svelte';
-import { SWRDataLabLight } from '../MapStyle';
-import DesignTokens from '../../DesignTokens/DesignTokens.svelte';
-import Switcher from '../../Switcher/Switcher.svelte';
-import Map from '../Map/Map.svelte';
-import { eclipse } from '@versatiles/style';
-const eclipseStyle = eclipse({
-    language: 'de',
-    baseUrl: 'https://tiles.versatiles.org',
-    glyphs: 'https://static.datenhub.net/maps/fonts/{fontstack}/{range}.pbf'
-});
-const { Story } = defineMeta({
-    title: 'Maplibre/Control/MapControl',
-    component: MapControl
-});
-const themes = {
-    'SWRDL Light': SWRDataLabLight,
-    Eclipse: eclipseStyle
-};
-let currentTheme = $state('SWRDL Light');
-</script>
-
-<Story asChild name="Custom HTML Control">
-	<DesignTokens>
-		<div class="container">
-			<Map style={themes[currentTheme]} initialLocation={{ lat: 51, lng: 10, zoom: 20 }}>
-				<MapControl position="top-left">
-					<Switcher
-						options={Object.keys(themes)}
-						bind:value={currentTheme}
-						label="Select theme"
-						size="small"
-					/>
-				</MapControl>
-			</Map>
-		</div>
-	</DesignTokens>
-</Story>
-
-<style>
-	.container {
-		width: 500px;
-		height: 300px;
-	}
-</style>

package/dist/maplibre/MapControl/MapControl.stories.svelte.d.ts

@@ -1,19 +0,0 @@
-import MapControl from './MapControl.svelte';
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const MapControl: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type MapControl = InstanceType<typeof MapControl>;
-export default MapControl;

package/dist/maplibre/MapStyle/SWRDataLabLight.mdx

@@ -1,86 +0,0 @@
-import { Story, Meta, Primary, Controls, Stories } from '@storybook/addon-docs/blocks';
-import Mermaid from '../../../.storybook/blocks/Mermaid';
-import SWRDataLabLight from './SWRDataLabLight';
-import * as MapStyleStories from './SWRDataLabLight.stories.svelte';
-
-<Meta of={MapStyleStories} />
-
-# SWR Data Lab Light
-
-Light-themed general-purpose basemap using SWR colours and typefaces based on
-[versatiles-greybeard](https://github.com/versatiles-org/versatiles-style).
-
-- Data sources
-  - Vector data: [versatiles-osm](https://download.versatiles.org/) in the [Shortbread schema](https://shortbread-tiles.org/) served from `tiles.versatiles.org`
-  - Typefaces: SWR Sans served from `https://static.datenhub.net/maps/fonts/`.
-- Layer count: {SWRDataLabLight.layers.length}
-
-<Story of={MapStyleStories.Default} />
-
-<br />
-
-### Design Notes
-
-We take a two-step design approach:
-
-1. Sort the geographic data we want to present into semantic groups like "Admin Boundaries", "Roads" or "Transit" (inspired by Mapbox's [Style Components](https://docs.mapbox.com/studio-manual/guides/components/)).
-2. Derive physical layers (ie. `MapLayerSpecification`) from these groups and interleave them to produce a convincing image
-3. Use shared design tokens to style each physical layer
-
-<Mermaid chart={`
-block-beta
-columns 10
-
-classDef admin fill:#e5dbf5;
-classDef buildings fill:#FFBA35;
-classDef roads fill:#FFD584;
-classDef transit fill:#C5F0B1;
-classDef walking fill:#65D62B;
-classDef landuse fill:#eee;
-
-block:semantic:6
-columns 1
-columns 1
-s_admin["Admin"]
-s_buildings["Buildings"]
-s_roads["Roads"]
-s_transit["Transit"]
-s_walking["Walking + Cycling"]
-s_landuse["Landuse"]
-end
-
-block:actual:10
-columns 1
-a_admin_labels["Admin Labels"]
-a_walking_labels["Walking (Labels)"]
-a_transit_labels["Transit (Labels)"]
-a_roads_labels["Roads (Labels)"]
-a_admin0["Admin 0 (Countries)"]
-a_admin1["Admin 1 (States/Provinces)"]
-a_admin2["Admin 2 (Districts)"]
-a_buildings["Buildings"]
-a_walking_bridge["Walking (Bridge)"]
-a_transit_bridge["Transit (Bridge)"]
-a_roads_bridge["Roads (Bridge)"]
-a_walking_surface["Walking (Surface)"]
-a_transit_surface["Transit (Surface)"]
-a_roads_surface["Roads (Surface)"]
-a_walking_tunnel["Walking (Tunnel)"]
-a_transit_tunnel["Transit (Tunnel)"]
-a_roads_tunnel["Roads (Tunnel)"]
-a_land["Land"]
-a_ocean["Ocean"]
-a_background["Background"]
-end
-
-class s_admin,a_admin0,a_admin1,a_admin2,a_admin_labels admin
-class s_buildings,a_buildings buildings
-class s_roads,a_roads_bridge,a_roads_surface,a_roads_tunnel,a_roads_labels roads
-class s_transit,a_transit_bridge,a_transit_surface,a_transit_tunnel,a_transit_labels transit
-class s_walking,a_walking_bridge,a_walking_surface,a_walking_tunnel,a_walking_labels walking
-class s_landuse,a_land,a_ocean,a_background landuse
-`}/>
-
-### References
-
-- [Foundational Map Design | BUILD with Mapbox ](https://www.youtube.com/watch?v=QDfj9oGVZmE)

package/dist/maplibre/MapStyle/SWRDataLabLight.stories.svelte

@@ -1,39 +0,0 @@
-<script context="module" lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
-import Map from '../Map/Map.svelte';
-import DesignTokens from '../../DesignTokens/DesignTokens.svelte';
-import AttributionControl from '../AttributionControl/AttributionControl.svelte';
-import GeocoderControl from '../GeocoderControl/GeocoderControl.svelte';
-import { SWRDataLabLight } from './index';
-const { Story } = defineMeta({
-    title: 'Maplibre/Style/SWR Data Lab Light',
-    component: Map
-});
-</script>
-
-<Story asChild name="Default">
-	<DesignTokens>
-		<div class="grid">
-			<div class="container">
-				<Map
-					style={SWRDataLabLight}
-					initialLocation={{ lng: 8.239451072800875, lat: 48.75692609731408, zoom: 14.99 }}
-				>
-					<GeocoderControl languages="de" service="maptiler" key="V32kPHZjMa0Mkn6YvSzA" />
-					<AttributionControl position="bottom-left" />
-				</Map>
-			</div>
-		</div>
-	</DesignTokens>
-</Story>
-
-<style>
-	.grid {
-		display: grid;
-		grid-template-columns: repeat(1, 1fr);
-		grid-template-rows: auto;
-		height: 700px;
-	}
-	.container {
-		overflow: hidden;
-	}
-</style>

package/dist/maplibre/MapStyle/SWRDataLabLight.stories.svelte.d.ts

@@ -1,18 +0,0 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const SwrDataLabLight: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type SwrDataLabLight = InstanceType<typeof SwrDataLabLight>;
-export default SwrDataLabLight;

package/dist/maplibre/Maplibre.mdx

@@ -1,91 +0,0 @@
-import { Meta } from '@storybook/addon-docs/blocks';
-import { Story, Primary, Controls, Stories } from '@storybook/addon-docs/blocks';
-import * as MapStories from './Map/Map.stories.svelte';
-import * as MapStyleStories from './MapStyle/SWRDataLabLight.stories.svelte';
-
-<Meta title="Maplibre" />
-
-# Maplibre
-
-Lightweight svelte components and basemaps for rendering custom slippy maps using the [versatiles](https://docs.versatiles.org/) stack.
-
-Based on [prior work](https://github.com/SWRdata/frontend_svelte_p012_spritpreise/blob/main/src/lib/components/Map/Map.svelte) from [Michael Kreil](https://github.com/MichaelKreil), [Jakob Bauer](https://github.com/AgricolaJKB), [dimfield](https://github.com/dimfeld/svelte-maplibre) and [MIRUNE](https://github.com/MIERUNE/svelte-maplibre-gl).
-
-<Story of={MapStyleStories.Default} />
-
-<br />
-
-## Usage
-
-This example initialises a map using the SWRDataLabLight style, adds an additional vector tile source and renders it as a vector layer.
-
-```jsx
-<script>
-  import {
-    Map,
-    VectorLayer,
-    AttributionControl,
-    VectorTileSource,
-    SWRDataLabLight,
-    DesignTokens
-  } from '@swr-data-lab/components';
-</script>
-
-<DesignTokens>
-  <div class='container'>
-    <Map style={SWRDataLabLight}>
-      <VectorTileSource
-        id='ev-infra-source'
-        url='https://static.datenhub.net/data/p108_e_auto_check/ev_infra_merged.versatiles?tiles/{z}/{x}/{y}'>
-      </VectorTileSource>
-      <VectorLayer
-        sourceId='ev-infra-source'
-        sourceLayer='coverage'
-        id='ev-infra-outline'
-        type='line'
-        paint={{'line-width': 1, 'line-color': 'red'}}>
-      </VectorLayer>
-      <AttributionControl />
-    </Map>
-  </div>
-</DesignTokens>
-
-<style>
-  .container {
-    width: 100%;
-    height: 600px;
-  }
-</style>
-```
-
-## Available components
-
-### Sources
-
-- **[VectorTileSource](?path=/docs/maplibre-source-vectortilesource--docs)**: Loads a vector tile source supplied by a tileserver
-
-### Layers
-
-- **[VectorLayer](?path=/docs/maplibre-layer-vectorlayer--docs)**: Renders a layer from a vector tile source.
-
-### Controls
-
-- **[ScaleControl](?path=/docs/maplibre-control-scalecontrol--docs)**: Renders a dynamic scalebar
-- **[NavigationControl](?path=/docs/maplibre-control-navigationcontrol--docs)**: Renders zoom buttons and optional compass
-- **[GeocoderControl](?path=/docs/maplibre-control-geocodercontrol--docs)**: Renders a search input using [maplibre-gl-geocoder](https://github.com/maplibre/maplibre-gl-geocoder) and any supported forward geocoding service (currently [maptiler](https://www.maptiler.com/) only)
-- **[AttributionControl](?path=/docs/maplibre-control-attributioncontrol--docs)**: Renders maplibre's default attribution control
-- **[Custom controls](?path=/docs/maplibre-control-mapcontrol--docs)**: Renders arbitrary HTML inside maplibre's layout
-
-### Misc
-
-- **[Tooltip](?path=/docs/maplibre-extras-tooltip--docs)**
-- **[WithLinkLocation](?path=/docs/maplibre-extras-withlinklocation--docs)**: Derive the maps `initialLocation` from a URL parameter via forward geocoding
-
-### Styles
-
-- **[SWR Data Lab Light](?path=/docs/maplibre-style-swr-data-lab-light--docs)**: Light-themed basemap using SWR colours and typefaces
-- Any valid MapLibre style specification, such as [versatiles-style](https://github.com/versatiles-org/versatiles-style) (see [demo](?path=/story/map-map--alternate-style))
-
-## Known issues
-
-- Firefox throws warning `WebGL warning: texImage: Alpha-premult and y-flip are deprecated for non-DOM-Element uploads`: Known [upstream mapligre-gl issue](https://github.com/maplibre/maplibre-gl-js/issues/2030) (safe to ignore)