feat(SWRDataLabLight): Support symbol layer, add basic map icons

.github/workflows/deploy-map-icon-sprite.yml

@@ -0,0 +1,23 @@
+name: 'Build and deploy map icons'
+on:
+  workflow_dispatch:
+
+jobs:
+  build-deploy:
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: ./components/src/maplibre
+    steps:
+      - uses: actions/checkout@v4
+      - run: cargo install spreet
+      - run: sh make_sprite.sh
+      - uses: google-github-actions/auth@v2
+        with:
+          credentials_json: ${{ secrets.GCP_SERVICE_ACCOUNT_KEY }}
+      - name: 'Upload files to GCP'
+        uses: 'google-github-actions/upload-cloud-storage@v2'
+        with:
+          path: 'sprite'
+          parent: false
+          destination: 'datenhub-net-static/maps/styles/swr-datalab-light/sprite'

components/.gitignore

@@ -19,4 +19,4 @@ Thumbs.db
 vite.config.js.timestamp-*
 vite.config.ts.timestamp-*
 .cache
-storybook-static
+storybook-static

components/src/maplibre/MapStyle/SWRDataLabLight.mdx

@@ -1,6 +1,19 @@
-import { Story, Meta, Primary, Controls, Stories, Source } from '@storybook/addon-docs/blocks';
+import {
+	Story,
+	Meta,
+	Primary,
+	Controls,
+	Stories,
+	Source,
+	IconGallery,
+	IconItem
+} from '@storybook/addon-docs/blocks';
 import Mermaid from '../../../.storybook/blocks/Mermaid';
 import SWRDataLabLight from './SWRDataLabLight';
+import SpriteImage from './SpriteImage.jsx';
+
+import SpriteData from './sprite/sprite.json';
+
 import * as MapStyleStories from './SWRDataLabLight.stories.svelte';
 
 <Meta of={MapStyleStories} />
@@ -28,13 +41,18 @@ Light-themed general-purpose basemap using SWR colours and typefaces based on
     <tr>
     	<td>Building footprints + heights</td>
     	<td>[basemap-de](https://basemap.de/produkte-und-dienste/web-vektor/) vector tiles served from `sgx.geodatenzentrum.de`</td>
-    	<td>[License](https://sgx.geodatenzentrum.de/web_public/gdz/lizenz/deu/Nutzungsbedingungen_basemapde.pdf)</td>
+    	<td>[CC BY 4.0](https://sgx.geodatenzentrum.de/web_public/gdz/lizenz/deu/Nutzungsbedingungen_basemapde.pdf)</td>
     </tr>
     <tr>
     	<td>SWR Sans Typeface</td>
     	<td>served from `https://static.datenhub.net/maps/fonts`</td>
     	<td>n/a</td>
     </tr>
+    <tr>
+    	<td>Icons</td>
+    	<td>[Osmic](https://github.com/gmgeo/osmic) + own work ([Figma](https://www.figma.com/design/2MbVC3SYyyahO2UPuy3z0S/Map-Icons?node-id=0-1&t=IJuwwIj86FGIjRGa-1))</td>
+    	<td>[CC0](https://github.com/gmgeo/osmic?tab=CC0-1.0-1-ov-file)</td>
+    </tr>
 
 </table>
 
@@ -67,6 +85,56 @@ interface StyleOptions {
 }
 ```
 
+## Icons
+
+SWRDataLabLight includes [Osmic](https://github.com/gmgeo/osmic), a public-domain set of map icons, and some custom icons ({Object.keys(SpriteData).length} overall). Custom icons live in [this Figma file](https://www.figma.com/design/2MbVC3SYyyahO2UPuy3z0S/Map-Icons?node-id=0-1&t=IJuwwIj86FGIjRGa-1). See `VectorLayer` for usage.
+
+export const customIcons = ['pin-14'];
+
+### Osmic
+
+<IconGallery>
+	{Object.entries(SpriteData)
+		.filter((row) => {
+			return !customIcons.includes(row[0]);
+		})
+		.map(([key, value]) => {
+			return (
+				<IconItem name={key}>
+					<SpriteImage
+						data={SpriteData}
+						width={value.width}
+						height={value.height}
+						x={value.x}
+						y={value.y}
+					/>
+				</IconItem>
+			);
+		})}
+</IconGallery>
+
+### Custom icons
+
+<IconGallery>
+	{Object.entries(SpriteData)
+		.filter((row) => {
+			return customIcons.includes(row[0]);
+		})
+		.map(([key, value]) => {
+			return (
+				<IconItem name={key}>
+					<SpriteImage
+						data={SpriteData}
+						width={value.width}
+						height={value.height}
+						x={value.x}
+						y={value.y}
+					/>
+				</IconItem>
+			);
+		})}
+</IconGallery>
+
 ## Design Notes
 
 ### Semantic groups -> physical layers

components/src/maplibre/MapStyle/SWRDataLabLight.ts

@@ -35,6 +35,7 @@ const style: styleFunction = (opts) => {
 		name: 'swr-datalab-light',
 		metadata: { license: 'https://creativecommons.org/publicdomain/zero/1.0/' },
 		glyphs: 'https://static.datenhub.net/maps/fonts/{fontstack}/{range}.pbf',
+		sprite: 'https://static.datenhub.net/maps/styles/swr-datalab-light/sprite/sprite',
 		sources: {
 			'versatiles-osm': {
 				attribution:

components/src/maplibre/MapStyle/SpriteImage.jsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import img from './sprite/sprite.png';
+
+export default function SpriteImage({ x, y, width, height, data }) {
+	let w = 0;
+	Object.values(data).forEach((d) => {
+		if (d.x + d.width > w) {
+			w = d.x + d.width;
+		}
+	});
+
+	return (
+		<div
+			style={{
+				backgroundImage: `url(${img})`,
+				width: `${width}px`,
+				height: `${height}px`,
+				backgroundSize: `${w}px auto`,
+				backgroundPosition: `${-x}px ${-y}px`
+			}}
+		></div>
+	);
+}