@swr-data-lab/components 1.15.2 → 2.0.0
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/dist/maplibre/Map/Map.svelte +12 -3
- package/dist/maplibre/MapStyle/SWRDataLabLight.d.ts +7 -1
- package/dist/maplibre/MapStyle/SWRDataLabLight.js +69 -45
- package/dist/maplibre/MapStyle/components/Buildings.js +36 -16
- package/dist/maplibre/MapStyle/tokens.d.ts +1 -0
- package/dist/maplibre/MapStyle/tokens.js +2 -1
- package/dist/maplibre/types.d.ts +3 -2
- package/package.json +1 -1
|
@@ -3,8 +3,17 @@ import { onMount, onDestroy, getContext, hasContext } from 'svelte';
|
|
|
3
3
|
import { createMapContext } from '../context.svelte.js';
|
|
4
4
|
import {} from '../types';
|
|
5
5
|
import FallbackStyle from './FallbackStyle';
|
|
6
|
-
let { children, options, style = FallbackStyle, minZoom = 0, maxZoom = 14.99, zoom = $bindable(), center = $bindable(), pitch = $bindable(0), bearing = $bindable(0), loading = $bindable(true), projection = { type: 'mercator' }, allowRotation = false, allowZoom = true, showDebug = false, initialLocation
|
|
6
|
+
let { children, options, style = FallbackStyle, minZoom = 0, maxZoom = 14.99, zoom = $bindable(), center = $bindable(), pitch = $bindable(0), bearing = $bindable(0), loading = $bindable(true), projection = { type: 'mercator' }, allowRotation = false, allowZoom = true, showDebug = false, initialLocation: receivedInitialLocation } = $props();
|
|
7
7
|
let container;
|
|
8
|
+
// Merge initial location with default object so individual
|
|
9
|
+
// properties (like pitch) can be omitted by the caller
|
|
10
|
+
let initialLocation = {
|
|
11
|
+
lat: 51.3,
|
|
12
|
+
lng: 10.2,
|
|
13
|
+
zoom: 5,
|
|
14
|
+
pitch: 0,
|
|
15
|
+
...receivedInitialLocation
|
|
16
|
+
};
|
|
8
17
|
const mapContext = createMapContext();
|
|
9
18
|
if (getContext('initialLocation') !== undefined && getContext('initialLocation') !== false) {
|
|
10
19
|
initialLocation = getContext('initialLocation');
|
|
@@ -15,11 +24,11 @@ onMount(() => {
|
|
|
15
24
|
style,
|
|
16
25
|
minZoom,
|
|
17
26
|
maxZoom,
|
|
18
|
-
pitch,
|
|
19
27
|
bearing,
|
|
20
28
|
attributionControl: false, // Added via component
|
|
21
29
|
center: [initialLocation.lng, initialLocation.lat],
|
|
22
30
|
zoom: initialLocation.zoom,
|
|
31
|
+
pitch: initialLocation.pitch,
|
|
23
32
|
...options
|
|
24
33
|
});
|
|
25
34
|
mapContext.map.on('load', () => {
|
|
@@ -66,7 +75,7 @@ $effect(() => {
|
|
|
66
75
|
{/if}
|
|
67
76
|
{#if showDebug}
|
|
68
77
|
<pre class="debug">
|
|
69
|
-
{Object.entries({ ...center, zoom, allowZoom, allowRotation })
|
|
78
|
+
{Object.entries({ ...center, zoom, pitch, allowZoom, allowRotation })
|
|
70
79
|
.map(([key, val]) => `${key}: ${val}`)
|
|
71
80
|
.join('\n')}</pre>
|
|
72
81
|
{/if}
|
|
@@ -1,3 +1,9 @@
|
|
|
1
1
|
import type { StyleSpecification } from 'maplibre-gl';
|
|
2
|
-
|
|
2
|
+
interface StyleOptions {
|
|
3
|
+
enableBuildingExtrusions?: boolean;
|
|
4
|
+
}
|
|
5
|
+
interface styleFunction {
|
|
6
|
+
(options?: StyleOptions): StyleSpecification;
|
|
7
|
+
}
|
|
8
|
+
declare const style: styleFunction;
|
|
3
9
|
export default style;
|
|
@@ -5,56 +5,80 @@ import makeTransit from './components/Transit';
|
|
|
5
5
|
import makePlaceLabels from './components/PlaceLabels';
|
|
6
6
|
import makeWalking from './components/Walking';
|
|
7
7
|
import makeRoads from './components/Roads';
|
|
8
|
-
const {
|
|
8
|
+
const { buildingFootprints, buildingExtrusions, structureExtrusions } = makeBuildings();
|
|
9
9
|
const { landuse } = makeLanduse();
|
|
10
10
|
const { placeLabels } = makePlaceLabels();
|
|
11
11
|
const { admin } = makeAdmin();
|
|
12
12
|
const { airports, transitBridges, transitSurface, transitTunnels } = makeTransit();
|
|
13
13
|
const { walkingLabels, walkingTunnels, walkingSurface, walkingBridges } = makeWalking();
|
|
14
14
|
const { roadLabels, roadBridges, roadSurface, roadTunnels } = makeRoads();
|
|
15
|
-
const style = {
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
15
|
+
const style = (opts) => {
|
|
16
|
+
const options = {
|
|
17
|
+
enableBuildingExtrusions: false,
|
|
18
|
+
...opts
|
|
19
|
+
};
|
|
20
|
+
return {
|
|
21
|
+
version: 8,
|
|
22
|
+
name: 'swr-datalab-light',
|
|
23
|
+
metadata: { license: 'https://creativecommons.org/publicdomain/zero/1.0/' },
|
|
24
|
+
glyphs: 'https://static.datenhub.net/maps/fonts/{fontstack}/{range}.pbf',
|
|
25
|
+
sources: {
|
|
26
|
+
'versatiles-osm': {
|
|
27
|
+
attribution: '<a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
|
|
28
|
+
tiles: ['https://tiles.versatiles.org/tiles/osm/{z}/{x}/{y}'],
|
|
29
|
+
bounds: [-180, -85.0511287798066, 180, 85.0511287798066],
|
|
30
|
+
type: 'vector',
|
|
31
|
+
scheme: 'xyz',
|
|
32
|
+
minzoom: 0,
|
|
33
|
+
maxzoom: 14
|
|
34
|
+
},
|
|
35
|
+
...(options.enableBuildingExtrusions && {
|
|
36
|
+
'basemap-de': {
|
|
37
|
+
attribution: 'GeoBasis-DE',
|
|
38
|
+
type: 'vector',
|
|
39
|
+
bounds: [5.8, 47.2, 15.1, 55.1],
|
|
40
|
+
maxzoom: 15,
|
|
41
|
+
minzoom: 0,
|
|
42
|
+
scheme: 'xyz',
|
|
43
|
+
tiles: [
|
|
44
|
+
'https://sgx.geodatenzentrum.de/gdz_basemapde_vektor/tiles/v2/bm_web_de_3857/{z}/{x}/{y}.pbf'
|
|
45
|
+
]
|
|
46
|
+
}
|
|
47
|
+
})
|
|
48
|
+
},
|
|
49
|
+
sky: {
|
|
50
|
+
'atmosphere-blend': ['interpolate', ['linear'], ['zoom'], 0, 0.1, 5, 0.1, 7, 0]
|
|
51
|
+
},
|
|
52
|
+
light: { anchor: 'viewport', color: 'white', intensity: 0.175 },
|
|
53
|
+
layers: [
|
|
54
|
+
// 1. Landuse
|
|
55
|
+
...landuse,
|
|
56
|
+
...airports,
|
|
57
|
+
// 2. Building footprints + Structures (ie. bridges)
|
|
58
|
+
...(!options.enableBuildingExtrusions ? [buildingFootprints] : []),
|
|
59
|
+
...(options.enableBuildingExtrusions ? [structureExtrusions] : []),
|
|
60
|
+
// 3. Tunnels
|
|
61
|
+
...walkingTunnels,
|
|
62
|
+
...roadTunnels,
|
|
63
|
+
...transitTunnels,
|
|
64
|
+
// 4. Surface ways
|
|
65
|
+
...walkingSurface,
|
|
66
|
+
...roadSurface,
|
|
67
|
+
...transitSurface,
|
|
68
|
+
// 5. Bridges ways
|
|
69
|
+
...walkingBridges,
|
|
70
|
+
...roadBridges,
|
|
71
|
+
...transitBridges,
|
|
72
|
+
// 6. Admin boundaries
|
|
73
|
+
...admin,
|
|
74
|
+
// 7. Labels
|
|
75
|
+
...walkingLabels,
|
|
76
|
+
...roadLabels,
|
|
77
|
+
// 8. Building extrusions
|
|
78
|
+
...(options.enableBuildingExtrusions ? [buildingExtrusions] : []),
|
|
79
|
+
// 8. Point labels
|
|
80
|
+
...placeLabels
|
|
81
|
+
]
|
|
82
|
+
};
|
|
59
83
|
};
|
|
60
84
|
export default style;
|
|
@@ -1,21 +1,41 @@
|
|
|
1
1
|
import {} from '../../types';
|
|
2
|
+
import tokens from '../tokens';
|
|
3
|
+
const extrusionLayer = {
|
|
4
|
+
source: 'basemap-de',
|
|
5
|
+
type: 'fill-extrusion',
|
|
6
|
+
minzoom: 14,
|
|
7
|
+
maxzoom: 20,
|
|
8
|
+
paint: {
|
|
9
|
+
'fill-extrusion-color': tokens.building,
|
|
10
|
+
'fill-extrusion-opacity': ['interpolate', ['linear'], ['zoom'], 14.5, 0, 15, 1],
|
|
11
|
+
'fill-extrusion-height': ['interpolate', ['linear'], ['zoom'], 14.5, 0, 15, ['get', 'hoehe']]
|
|
12
|
+
}
|
|
13
|
+
};
|
|
2
14
|
export default function makeBuildings() {
|
|
3
|
-
const
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
]
|
|
16
|
-
}
|
|
15
|
+
const buildingFootprints = {
|
|
16
|
+
id: 'building-footprints',
|
|
17
|
+
type: 'fill',
|
|
18
|
+
source: 'versatiles-osm',
|
|
19
|
+
'source-layer': 'buildings',
|
|
20
|
+
paint: {
|
|
21
|
+
'fill-color': tokens.building,
|
|
22
|
+
'fill-opacity': {
|
|
23
|
+
stops: [
|
|
24
|
+
[14, 0],
|
|
25
|
+
[15, 1]
|
|
26
|
+
]
|
|
17
27
|
}
|
|
18
28
|
}
|
|
19
|
-
|
|
20
|
-
|
|
29
|
+
};
|
|
30
|
+
const structureExtrusions = {
|
|
31
|
+
id: 'building-extrusions-structures',
|
|
32
|
+
'source-layer': 'Bauwerksflaeche',
|
|
33
|
+
...extrusionLayer
|
|
34
|
+
};
|
|
35
|
+
const buildingExtrusions = {
|
|
36
|
+
id: 'building-extrusions-buildings',
|
|
37
|
+
'source-layer': 'Gebaeudeflaeche',
|
|
38
|
+
...extrusionLayer
|
|
39
|
+
};
|
|
40
|
+
return { buildingFootprints, buildingExtrusions, structureExtrusions };
|
|
21
41
|
}
|
|
@@ -15,6 +15,7 @@ const tokens = {
|
|
|
15
15
|
street_tertiary: 'hsl(0, 0%, 95%)',
|
|
16
16
|
street_tertiary_outline: 'hsl(0, 0%, 50%)',
|
|
17
17
|
label_primary: 'rgb(10, 10, 11)',
|
|
18
|
-
label_secondary: 'hsl(240, 2%, 20%)'
|
|
18
|
+
label_secondary: 'hsl(240, 2%, 20%)',
|
|
19
|
+
building: '#f3f2f1'
|
|
19
20
|
};
|
|
20
21
|
export default tokens;
|
package/dist/maplibre/types.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import type { FillLayerSpecification, LineLayerSpecification } from 'maplibre-gl';
|
|
2
|
-
export type Layer = LineLayerSpecification | FillLayerSpecification;
|
|
1
|
+
import type { FillExtrusionLayerSpecification, FillLayerSpecification, LineLayerSpecification } from 'maplibre-gl';
|
|
2
|
+
export type Layer = LineLayerSpecification | FillLayerSpecification | FillExtrusionLayerSpecification;
|
|
3
3
|
export type GeocodingService = 'maptiler';
|
|
4
4
|
export type GeocodingCountry = 'de' | 'at';
|
|
5
5
|
export type GeocodingLanguage = 'de' | 'en';
|
|
@@ -7,4 +7,5 @@ export interface Location {
|
|
|
7
7
|
lat: number;
|
|
8
8
|
lng: number;
|
|
9
9
|
zoom: number;
|
|
10
|
+
pitch?: number;
|
|
10
11
|
}
|