@swr-data-lab/components 1.13.1 → 1.13.2

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 (59) hide show
  1. package/package.json +2 -4
  2. package/dist/Autocomplete/Autocomplete.stories.svelte +0 -61
  3. package/dist/Autocomplete/Autocomplete.stories.svelte.d.ts +0 -27
  4. package/dist/Button/Button.stories.svelte +0 -19
  5. package/dist/Button/Button.stories.svelte.d.ts +0 -19
  6. package/dist/Caption/Caption.stories.svelte +0 -24
  7. package/dist/Caption/Caption.stories.svelte.d.ts +0 -27
  8. package/dist/Card/Card.stories.svelte +0 -17
  9. package/dist/Card/Card.stories.svelte.d.ts +0 -19
  10. package/dist/ChartFooter/ChartFooter.stories.svelte +0 -32
  11. package/dist/ChartFooter/ChartFooter.stories.svelte.d.ts +0 -27
  12. package/dist/ChartHeader/ChartHeader.stories.svelte +0 -31
  13. package/dist/ChartHeader/ChartHeader.stories.svelte.d.ts +0 -27
  14. package/dist/ChartList/ChartList.stories.svelte +0 -48
  15. package/dist/ChartList/ChartList.stories.svelte.d.ts +0 -27
  16. package/dist/Copy/Copy.stories.svelte +0 -32
  17. package/dist/Copy/Copy.stories.svelte.d.ts +0 -27
  18. package/dist/FormLabel/FormLabel.stories.svelte +0 -52
  19. package/dist/FormLabel/FormLabel.stories.svelte.d.ts +0 -27
  20. package/dist/Headline/Headline.stories.svelte +0 -17
  21. package/dist/Headline/Headline.stories.svelte.d.ts +0 -27
  22. package/dist/HighlightCard/HighlightCard.stories.svelte +0 -55
  23. package/dist/HighlightCard/HighlightCard.stories.svelte.d.ts +0 -19
  24. package/dist/Logotype/Logotype.stories.svelte +0 -14
  25. package/dist/Logotype/Logotype.stories.svelte.d.ts +0 -19
  26. package/dist/Middot/Middot.stories.svelte +0 -14
  27. package/dist/Middot/Middot.stories.svelte.d.ts +0 -19
  28. package/dist/Note/Note.stories.svelte +0 -23
  29. package/dist/Note/Note.stories.svelte.d.ts +0 -27
  30. package/dist/Select/Select.stories.svelte +0 -202
  31. package/dist/Select/Select.stories.svelte.d.ts +0 -19
  32. package/dist/Select/SelectStoriesTemplate.svelte +0 -31
  33. package/dist/Select/SelectStoriesTemplate.svelte.d.ts +0 -15
  34. package/dist/Switcher/Switcher.stories.svelte +0 -44
  35. package/dist/Switcher/Switcher.stories.svelte.d.ts +0 -27
  36. package/dist/maplibre/AttributionControl/AttributionControl.stories.svelte +0 -27
  37. package/dist/maplibre/AttributionControl/AttributionControl.stories.svelte.d.ts +0 -19
  38. package/dist/maplibre/GeocoderControl/GeocoderControl.stories.svelte +0 -74
  39. package/dist/maplibre/GeocoderControl/GeocoderControl.stories.svelte.d.ts +0 -19
  40. package/dist/maplibre/Map/Map.stories.svelte +0 -113
  41. package/dist/maplibre/Map/Map.stories.svelte.d.ts +0 -19
  42. package/dist/maplibre/MapControl/MapControl.stories.svelte +0 -46
  43. package/dist/maplibre/MapControl/MapControl.stories.svelte.d.ts +0 -19
  44. package/dist/maplibre/MapStyle/SWRDataLabLight.stories.svelte +0 -39
  45. package/dist/maplibre/MapStyle/SWRDataLabLight.stories.svelte.d.ts +0 -18
  46. package/dist/maplibre/NavigationControl/NavigationControl.stories.svelte +0 -37
  47. package/dist/maplibre/NavigationControl/NavigationControl.stories.svelte.d.ts +0 -19
  48. package/dist/maplibre/ScaleControl/ScaleControl.stories.svelte +0 -68
  49. package/dist/maplibre/ScaleControl/ScaleControl.stories.svelte.d.ts +0 -19
  50. package/dist/maplibre/Source/MapSource.stories.svelte +0 -7
  51. package/dist/maplibre/Source/MapSource.stories.svelte.d.ts +0 -19
  52. package/dist/maplibre/Tooltip/Tooltip.stories.svelte +0 -186
  53. package/dist/maplibre/Tooltip/Tooltip.stories.svelte.d.ts +0 -19
  54. package/dist/maplibre/VectorLayer/VectorLayer.stories.svelte +0 -62
  55. package/dist/maplibre/VectorLayer/VectorLayer.stories.svelte.d.ts +0 -19
  56. package/dist/maplibre/VectorTileSource/VectorTileSource.stories.svelte +0 -44
  57. package/dist/maplibre/VectorTileSource/VectorTileSource.stories.svelte.d.ts +0 -19
  58. package/dist/maplibre/WithLinkLocation/WithLinkLocation.stories.svelte +0 -27
  59. package/dist/maplibre/WithLinkLocation/WithLinkLocation.stories.svelte.d.ts +0 -19
@@ -1,19 +0,0 @@
1
- import GeocoderControl from './GeocoderControl.svelte';
2
- 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> {
3
- new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
4
- $$bindings?: Bindings;
5
- } & Exports;
6
- (internal: unknown, props: {
7
- $$events?: Events;
8
- $$slots?: Slots;
9
- }): Exports & {
10
- $set?: any;
11
- $on?: any;
12
- };
13
- z_$$bindings?: Bindings;
14
- }
15
- declare const GeocoderControl: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
16
- [evt: string]: CustomEvent<any>;
17
- }, {}, {}, string>;
18
- type GeocoderControl = InstanceType<typeof GeocoderControl>;
19
- export default GeocoderControl;
@@ -1,113 +0,0 @@
1
- <script context="module" lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
2
- import { within, expect } from 'storybook/test';
3
- import Map from './Map.svelte';
4
- import ScaleControl from '../ScaleControl/ScaleControl.svelte';
5
- import NavigationControl from '../NavigationControl/NavigationControl.svelte';
6
- import DesignTokens from '../../DesignTokens/DesignTokens.svelte';
7
- import AttributionControl from '../AttributionControl/AttributionControl.svelte';
8
- import GeocoderControl from '../GeocoderControl/GeocoderControl.svelte';
9
- import { SWRDataLabLight } from '../MapStyle';
10
- import { eclipse } from '@versatiles/style';
11
- const alternateStyle = eclipse({
12
- language: 'de',
13
- baseUrl: 'https://tiles.versatiles.org',
14
- glyphs: 'https://static.datenhub.net/maps/fonts/{fontstack}/{range}.pbf'
15
- });
16
- const { Story } = defineMeta({
17
- title: 'Maplibre/Map',
18
- component: Map
19
- });
20
- </script>
21
-
22
- <Story
23
- asChild
24
- name="Default"
25
- play={async ({ canvasElement, step }) => {
26
- const canvas = within(canvasElement);
27
- const containerEl = canvas.getByTestId('map-container');
28
-
29
- await step('Map canvas renders', async () => {
30
- const mapEl = containerEl.querySelector('.maplibregl-canvas');
31
- expect(mapEl).toBeTruthy();
32
- });
33
- await step('Scale control renders', async () => {
34
- const el = containerEl.querySelector('.maplibregl-ctrl-scale');
35
- expect(el).toBeTruthy();
36
- });
37
- await step('Scale renders expected value', async () => {
38
- const el = containerEl.querySelector('.maplibregl-ctrl-scale');
39
- expect(el).toHaveTextContent('100 km');
40
- });
41
- await step('Navigation control renders', async () => {
42
- const zoomInEl = containerEl.querySelector('.maplibregl-ctrl-zoom-in');
43
- const zoomOutEl = containerEl.querySelector('.maplibregl-ctrl-zoom-out');
44
- expect(zoomInEl).toBeTruthy();
45
- expect(zoomInEl).toHaveRole('button');
46
- expect(zoomOutEl).toBeTruthy();
47
- expect(zoomOutEl).toHaveRole('button');
48
- });
49
-
50
- await step('Attribution control renders', async () => {
51
- const el = containerEl.querySelector('.maplibregl-ctrl-attrib');
52
- expect(el).toBeTruthy();
53
- });
54
-
55
- await step('Geocoder control renders', async () => {
56
- const el = containerEl.querySelector('.maplibregl-ctrl-geocoder');
57
- expect(el).toBeTruthy();
58
- });
59
- }}
60
- >
61
- <div class="container">
62
- <DesignTokens>
63
- <Map style={SWRDataLabLight}>
64
- <ScaleControl />
65
- <AttributionControl />
66
- <NavigationControl showCompass visualizePitch />
67
- <GeocoderControl languages="de" service="maptiler" key="V32kPHZjMa0Mkn6YvSzA" />
68
- </Map>
69
- </DesignTokens>
70
- </div>
71
- </Story>
72
-
73
- <Story asChild name="Globe Projection">
74
- <div class="container dark">
75
- <DesignTokens>
76
- <Map
77
- style={SWRDataLabLight}
78
- showDebug
79
- projection={{ type: 'globe' }}
80
- pitch={52}
81
- initialLocation={{ lat: 51.3, lng: 10.2, zoom: 3.5 }}
82
- >
83
- <ScaleControl />
84
- <AttributionControl />
85
- <NavigationControl showCompass visualizePitch />
86
- <GeocoderControl languages="de" service="maptiler" key="V32kPHZjMa0Mkn6YvSzA" />
87
- </Map>
88
- </DesignTokens>
89
- </div>
90
- </Story>
91
-
92
- <Story asChild name="Alternate Style">
93
- <div class="container dark">
94
- <DesignTokens>
95
- <Map style={alternateStyle}>
96
- <ScaleControl />
97
- <AttributionControl />
98
- <NavigationControl showCompass visualizePitch />
99
- <GeocoderControl languages="de" service="maptiler" key="V32kPHZjMa0Mkn6YvSzA" />
100
- </Map>
101
- </DesignTokens>
102
- </div>
103
- </Story>
104
-
105
- <style>
106
- .container {
107
- width: 100%;
108
- height: 600px;
109
- }
110
- .dark {
111
- color: rgb(230, 230, 230);
112
- }
113
- </style>
@@ -1,19 +0,0 @@
1
- import Map from './Map.svelte';
2
- 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> {
3
- new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
4
- $$bindings?: Bindings;
5
- } & Exports;
6
- (internal: unknown, props: {
7
- $$events?: Events;
8
- $$slots?: Slots;
9
- }): Exports & {
10
- $set?: any;
11
- $on?: any;
12
- };
13
- z_$$bindings?: Bindings;
14
- }
15
- declare const Map: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
16
- [evt: string]: CustomEvent<any>;
17
- }, {}, {}, string>;
18
- type Map = InstanceType<typeof Map>;
19
- export default Map;
@@ -1,46 +0,0 @@
1
- <script module lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
2
- import MapControl from './MapControl.svelte';
3
- import { SWRDataLabLight } from '../MapStyle';
4
- import DesignTokens from '../../DesignTokens/DesignTokens.svelte';
5
- import Switcher from '../../Switcher/Switcher.svelte';
6
- import Map from '../Map/Map.svelte';
7
- import { eclipse } from '@versatiles/style';
8
- const eclipseStyle = eclipse({
9
- language: 'de',
10
- baseUrl: 'https://tiles.versatiles.org',
11
- glyphs: 'https://static.datenhub.net/maps/fonts/{fontstack}/{range}.pbf'
12
- });
13
- const { Story } = defineMeta({
14
- title: 'Maplibre/Control/MapControl',
15
- component: MapControl
16
- });
17
- const themes = {
18
- 'SWRDL Light': SWRDataLabLight,
19
- Eclipse: eclipseStyle
20
- };
21
- let currentTheme = $state('SWRDL Light');
22
- </script>
23
-
24
- <Story asChild name="Custom HTML Control">
25
- <DesignTokens>
26
- <div class="container">
27
- <Map style={themes[currentTheme]} initialLocation={{ lat: 51, lng: 10, zoom: 20 }}>
28
- <MapControl position="top-left">
29
- <Switcher
30
- options={Object.keys(themes)}
31
- bind:value={currentTheme}
32
- label="Select theme"
33
- size="small"
34
- />
35
- </MapControl>
36
- </Map>
37
- </div>
38
- </DesignTokens>
39
- </Story>
40
-
41
- <style>
42
- .container {
43
- width: 500px;
44
- height: 300px;
45
- }
46
- </style>
@@ -1,19 +0,0 @@
1
- import MapControl from './MapControl.svelte';
2
- 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> {
3
- new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
4
- $$bindings?: Bindings;
5
- } & Exports;
6
- (internal: unknown, props: {
7
- $$events?: Events;
8
- $$slots?: Slots;
9
- }): Exports & {
10
- $set?: any;
11
- $on?: any;
12
- };
13
- z_$$bindings?: Bindings;
14
- }
15
- declare const MapControl: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
16
- [evt: string]: CustomEvent<any>;
17
- }, {}, {}, string>;
18
- type MapControl = InstanceType<typeof MapControl>;
19
- export default MapControl;
@@ -1,39 +0,0 @@
1
- <script context="module" lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
2
- import Map from '../Map/Map.svelte';
3
- import DesignTokens from '../../DesignTokens/DesignTokens.svelte';
4
- import AttributionControl from '../AttributionControl/AttributionControl.svelte';
5
- import GeocoderControl from '../GeocoderControl/GeocoderControl.svelte';
6
- import { SWRDataLabLight } from './index';
7
- const { Story } = defineMeta({
8
- title: 'Maplibre/Style/SWR Data Lab Light',
9
- component: Map
10
- });
11
- </script>
12
-
13
- <Story asChild name="Default">
14
- <DesignTokens>
15
- <div class="grid">
16
- <div class="container">
17
- <Map
18
- style={SWRDataLabLight}
19
- initialLocation={{ lng: 8.239451072800875, lat: 48.75692609731408, zoom: 14.99 }}
20
- >
21
- <GeocoderControl languages="de" service="maptiler" key="V32kPHZjMa0Mkn6YvSzA" />
22
- <AttributionControl position="bottom-left" />
23
- </Map>
24
- </div>
25
- </div>
26
- </DesignTokens>
27
- </Story>
28
-
29
- <style>
30
- .grid {
31
- display: grid;
32
- grid-template-columns: repeat(1, 1fr);
33
- grid-template-rows: auto;
34
- height: 700px;
35
- }
36
- .container {
37
- overflow: hidden;
38
- }
39
- </style>
@@ -1,18 +0,0 @@
1
- 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> {
2
- new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
3
- $$bindings?: Bindings;
4
- } & Exports;
5
- (internal: unknown, props: {
6
- $$events?: Events;
7
- $$slots?: Slots;
8
- }): Exports & {
9
- $set?: any;
10
- $on?: any;
11
- };
12
- z_$$bindings?: Bindings;
13
- }
14
- declare const SwrDataLabLight: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
15
- [evt: string]: CustomEvent<any>;
16
- }, {}, {}, string>;
17
- type SwrDataLabLight = InstanceType<typeof SwrDataLabLight>;
18
- export default SwrDataLabLight;
@@ -1,37 +0,0 @@
1
- <script context="module" lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
2
- import NavigationControl from './NavigationControl.svelte';
3
- import DesignTokens from '../../DesignTokens/DesignTokens.svelte';
4
- import { SWRDataLabLight } from '../MapStyle';
5
- import Map from '../Map/Map.svelte';
6
- const { Story } = defineMeta({
7
- title: 'Maplibre/Control/NavigationControl',
8
- component: NavigationControl
9
- });
10
- </script>
11
-
12
- <Story asChild name="Default">
13
- <DesignTokens>
14
- <div class="container">
15
- <Map style={SWRDataLabLight} initialLocation={{ lat: 51, lng: 10, zoom: 20 }}>
16
- <NavigationControl />
17
- </Map>
18
- </div>
19
- </DesignTokens>
20
- </Story>
21
-
22
- <Story asChild name="With compass">
23
- <DesignTokens>
24
- <div class="container">
25
- <Map style={SWRDataLabLight} initialLocation={{ lat: 51, lng: 10, zoom: 20 }}>
26
- <NavigationControl showCompass visualizePitch />
27
- </Map>
28
- </div>
29
- </DesignTokens>
30
- </Story>
31
-
32
- <style>
33
- .container {
34
- width: 500px;
35
- height: 200px;
36
- }
37
- </style>
@@ -1,19 +0,0 @@
1
- import NavigationControl from './NavigationControl.svelte';
2
- 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> {
3
- new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
4
- $$bindings?: Bindings;
5
- } & Exports;
6
- (internal: unknown, props: {
7
- $$events?: Events;
8
- $$slots?: Slots;
9
- }): Exports & {
10
- $set?: any;
11
- $on?: any;
12
- };
13
- z_$$bindings?: Bindings;
14
- }
15
- declare const NavigationControl: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
16
- [evt: string]: CustomEvent<any>;
17
- }, {}, {}, string>;
18
- type NavigationControl = InstanceType<typeof NavigationControl>;
19
- export default NavigationControl;
@@ -1,68 +0,0 @@
1
- <script context="module" lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
2
- import { within, expect } from 'storybook/test';
3
- import ScaleControl from './ScaleControl.svelte';
4
- import DesignTokens from '../../DesignTokens/DesignTokens.svelte';
5
- import Map from '../Map/Map.svelte';
6
- import { SWRDataLabLight } from '../MapStyle';
7
- const { Story } = defineMeta({
8
- title: 'Maplibre/Control/ScaleControl',
9
- component: ScaleControl
10
- });
11
- </script>
12
-
13
- <Story
14
- asChild
15
- name="Default"
16
- play={async ({ canvasElement, step }) => {
17
- const canvas = within(canvasElement);
18
- const containerEl = canvas.getByTestId('map-container');
19
- await step('Scale control renders', async () => {
20
- const el = containerEl.querySelector('.maplibregl-ctrl-scale');
21
- expect(el).toBeTruthy();
22
- });
23
- await step('Distance is rendered in metric units', async () => {
24
- const el = containerEl.querySelector('.maplibregl-ctrl-scale');
25
- expect(el).toHaveTextContent('100 m');
26
- });
27
- }}
28
- >
29
- <DesignTokens>
30
- <div class="container">
31
- <Map style={SWRDataLabLight} initialLocation={{ lat: 51, lng: 10, zoom: 20 }}>
32
- <ScaleControl />
33
- </Map>
34
- </div>
35
- </DesignTokens>
36
- </Story>
37
-
38
- <Story
39
- asChild
40
- name="Imperial units"
41
- play={async ({ canvasElement, step }) => {
42
- const canvas = within(canvasElement);
43
- const containerEl = canvas.getByTestId('map-container');
44
- await step('Scale control renders', async () => {
45
- const el = containerEl.querySelector('.maplibregl-ctrl-scale');
46
- expect(el).toBeTruthy();
47
- });
48
- await step('Distance is rendered in imperial units', async () => {
49
- const el = containerEl.querySelector('.maplibregl-ctrl-scale');
50
- expect(el).toHaveTextContent('300 ft');
51
- });
52
- }}
53
- >
54
- <DesignTokens>
55
- <div class="container">
56
- <Map style={SWRDataLabLight} initialLocation={{ lat: 51, lng: 10, zoom: 20 }}>
57
- <ScaleControl unit="imperial" />
58
- </Map>
59
- </div>
60
- </DesignTokens>
61
- </Story>
62
-
63
- <style>
64
- .container {
65
- width: 500px;
66
- height: 200px;
67
- }
68
- </style>
@@ -1,19 +0,0 @@
1
- import ScaleControl from './ScaleControl.svelte';
2
- 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> {
3
- new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
4
- $$bindings?: Bindings;
5
- } & Exports;
6
- (internal: unknown, props: {
7
- $$events?: Events;
8
- $$slots?: Slots;
9
- }): Exports & {
10
- $set?: any;
11
- $on?: any;
12
- };
13
- z_$$bindings?: Bindings;
14
- }
15
- declare const ScaleControl: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
16
- [evt: string]: CustomEvent<any>;
17
- }, {}, {}, string>;
18
- type ScaleControl = InstanceType<typeof ScaleControl>;
19
- export default ScaleControl;
@@ -1,7 +0,0 @@
1
- <script context="module" lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
2
- import MapSource from './MapSource.svelte';
3
- const { Story } = defineMeta({
4
- title: 'Maplibre/MapSource',
5
- component: MapSource
6
- });
7
- </script>
@@ -1,19 +0,0 @@
1
- import MapSource from './MapSource.svelte';
2
- 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> {
3
- new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
4
- $$bindings?: Bindings;
5
- } & Exports;
6
- (internal: unknown, props: {
7
- $$events?: Events;
8
- $$slots?: Slots;
9
- }): Exports & {
10
- $set?: any;
11
- $on?: any;
12
- };
13
- z_$$bindings?: Bindings;
14
- }
15
- declare const MapSource: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
16
- [evt: string]: CustomEvent<any>;
17
- }, {}, {}, string>;
18
- type MapSource = InstanceType<typeof MapSource>;
19
- export default MapSource;
@@ -1,186 +0,0 @@
1
- <script module lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
2
- import DesignTokens from '../../DesignTokens/DesignTokens.svelte';
3
- import Map from '../Map/Map.svelte';
4
- import VectorTileSource from '../VectorTileSource/VectorTileSource.svelte';
5
- import VectorLayer from '../VectorLayer/VectorLayer.svelte';
6
- import AttributionControl from '../AttributionControl/AttributionControl.svelte';
7
- import Tooltip from './Tooltip.svelte';
8
- import { SWRDataLabLight } from '../MapStyle';
9
- const { Story } = defineMeta({
10
- title: 'Maplibre/Extras/Tooltip',
11
- component: Tooltip
12
- });
13
- let hovered = $state();
14
- let hovered2 = $state();
15
- let hoverCoords = $state([0, 0]);
16
- let selected = $state();
17
- let selectCoords = $state([0, 0]);
18
- </script>
19
-
20
- <Story asChild name="Default">
21
- <DesignTokens>
22
- <div class="container">
23
- <Map
24
- style={SWRDataLabLight}
25
- initialLocation={{ lat: 51, lng: 10, zoom: 8 }}
26
- allowZoom={false}
27
- >
28
- <VectorTileSource
29
- id="ev-infra-source"
30
- url={`https://static.datenhub.net/data/p108_e_auto_check/ev_infra_merged.versatiles?tiles/{z}/{x}/{y}`}
31
- />
32
- <VectorLayer
33
- sourceId="ev-infra-source"
34
- type="fill"
35
- id="coverage-fill"
36
- sourceLayer="coverage"
37
- placeBelow="street-residential"
38
- onmousemove={(e) => {
39
- hovered = e.features?.[0];
40
- hoverCoords = e.lngLat;
41
- }}
42
- onmouseleave={() => (hovered = undefined)}
43
- paint={{
44
- 'fill-color': ['step', ['get', 'coverage_2025'], 'white', 1, '#ffcfcc', 1.3, '#FF4D20']
45
- }}
46
- />
47
- <VectorLayer
48
- {hovered}
49
- sourceId="ev-infra-source"
50
- sourceLayer="coverage"
51
- id="ev-infra-outline"
52
- placeBelow="label-place-city"
53
- type="line"
54
- layout={{
55
- 'line-join': 'round'
56
- }}
57
- paint={{
58
- 'line-width': [
59
- 'case',
60
- ['any', ['boolean', ['feature-state', 'hovered'], false]],
61
- 1.5,
62
- 0.5
63
- ],
64
- 'line-color': [
65
- 'case',
66
- ['any', ['boolean', ['feature-state', 'hovered'], false]],
67
- '#000',
68
- '#555'
69
- ],
70
- 'line-opacity': 1
71
- }}
72
- />
73
-
74
- {#if hovered}
75
- <Tooltip
76
- position={hoverCoords}
77
- mouseEvents={false}
78
- showCloseButton={false}
79
- closeOnClick={false}
80
- >
81
- <pre>{Object.entries(hovered.properties)
82
- .map(([key, val]) => `${key}: ${val}`)
83
- .join('\n')}</pre>
84
- </Tooltip>
85
- {/if}
86
- <AttributionControl position="bottom-left" />
87
- </Map>
88
- </div>
89
- </DesignTokens>
90
- </Story>
91
-
92
- <Story asChild name="Show on Click">
93
- <DesignTokens>
94
- <div class="container">
95
- <Map
96
- style={SWRDataLabLight}
97
- initialLocation={{ lat: 51, lng: 10, zoom: 8 }}
98
- allowZoom={false}
99
- >
100
- <VectorTileSource
101
- id="ev-infra-source"
102
- url={`https://static.datenhub.net/data/p108_e_auto_check/ev_infra_merged.versatiles?tiles/{z}/{x}/{y}`}
103
- />
104
- <VectorLayer
105
- sourceId="ev-infra-source"
106
- type="fill"
107
- id="coverage-fill"
108
- sourceLayer="coverage"
109
- placeBelow="street-residential"
110
- onmousemove={(e) => {
111
- hovered2 = e.features?.[0];
112
- }}
113
- onclick={(e) => {
114
- selected = e.features?.[0];
115
- selectCoords = e.lngLat;
116
- }}
117
- onmouseleave={() => (hovered2 = undefined)}
118
- paint={{
119
- 'fill-color': ['step', ['get', 'coverage_2025'], 'white', 1, '#CCDCFF', 1.3, '#6280E5']
120
- }}
121
- />
122
- <VectorLayer
123
- hovered={hovered2}
124
- {selected}
125
- sourceId="ev-infra-source"
126
- sourceLayer="coverage"
127
- id="ev-infra-outline"
128
- placeBelow="label-place-city"
129
- type="line"
130
- layout={{
131
- 'line-join': 'round'
132
- }}
133
- paint={{
134
- 'line-width': [
135
- 'case',
136
- [
137
- 'any',
138
- ['boolean', ['feature-state', 'hovered'], false],
139
- ['boolean', ['feature-state', 'selected'], false]
140
- ],
141
- 2,
142
- 0.5
143
- ],
144
- 'line-color': [
145
- 'case',
146
- [
147
- 'any',
148
- ['boolean', ['feature-state', 'hovered'], false],
149
- ['boolean', ['feature-state', 'selected'], false]
150
- ],
151
- '#000',
152
- '#555'
153
- ],
154
- 'line-opacity': 1
155
- }}
156
- />
157
- {#if selected}
158
- <Tooltip
159
- position={selectCoords}
160
- mouseEvents={true}
161
- showCloseButton={true}
162
- onClose={() => {
163
- selected = undefined;
164
- }}
165
- >
166
- <pre class="padRight">{Object.entries(selected.properties)
167
- .map(([key, val]) => `${key}: ${val}`)
168
- .join('\n')}</pre>
169
- </Tooltip>
170
- {/if}
171
- <AttributionControl position="bottom-left" />
172
- </Map>
173
- </div>
174
- </DesignTokens>
175
- </Story>
176
-
177
- <style>
178
- .container {
179
- width: 100%;
180
- height: 600px;
181
- }
182
-
183
- .padRight {
184
- padding-right: 2.5em;
185
- }
186
- </style>
@@ -1,19 +0,0 @@
1
- import Tooltip from './Tooltip.svelte';
2
- 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> {
3
- new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
4
- $$bindings?: Bindings;
5
- } & Exports;
6
- (internal: unknown, props: {
7
- $$events?: Events;
8
- $$slots?: Slots;
9
- }): Exports & {
10
- $set?: any;
11
- $on?: any;
12
- };
13
- z_$$bindings?: Bindings;
14
- }
15
- declare const Tooltip: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
16
- [evt: string]: CustomEvent<any>;
17
- }, {}, {}, string>;
18
- type Tooltip = InstanceType<typeof Tooltip>;
19
- export default Tooltip;