Check how we could implement a map component

components/package.json

@@ -83,14 +83,17 @@
         "@lit/context": "^1.1.1",
         "@lit/reactive-element": "^2.0.4",
         "@lit/task": "^1.0.0",
-        "chart.js": "^4.4.2",
+        "@types/leaflet": "^1.9.14",
+        "chart.js": "^4.4.6",
         "chartjs-chart-error-bars": "^4.4.0",
         "chartjs-chart-venn": "^4.3.0",
         "dayjs": "^1.11.10",
         "flatpickr": "^4.6.13",
         "gridjs": "^6.2.0",
+        "leaflet": "^1.9.4",
         "lit": "^3.1.3",
         "preact": "^10.20.1",
+        "topojson-client": "^3.1.0",
         "zod": "^3.23.0"
     },
     "devDependencies": {
@@ -112,7 +115,10 @@
         "@storybook/web-components": "^8.0.9",
         "@storybook/web-components-vite": "^8.0.9",
         "@tailwindcss/container-queries": "^0.1.1",
+        "@types/geojson": "^7946.0.15",
         "@types/node": "^22.0.0",
+        "@types/topojson-client": "^3.1.5",
+        "@types/topojson-specification": "^1.0.5",
         "@typescript-eslint/eslint-plugin": "^8.2.0",
         "@typescript-eslint/parser": "^8.2.0",
         "autoprefixer": "^10.4.19",

components/src/preact/aggregatedData/aggregate.stories.tsx

@@ -5,7 +5,7 @@ import aggregatedData from './__mockData__/aggregated.json';
 import { Aggregate, type AggregateProps } from './aggregate';
 import { AGGREGATED_ENDPOINT, LAPIS_URL } from '../../constants';
 import { LapisUrlContext } from '../LapisUrlContext';
-import { expectInvalidAttributesErrorMessage } from '../shared/stories/expectInvalidAttributesErrorMessage';
+import { expectInvalidAttributesErrorMessage } from '../shared/stories/expectErrorMessage';
 
 const meta: Meta<AggregateProps> = {
     title: 'Visualization/Aggregate',

components/src/preact/dateRangeSelector/date-range-selector.stories.tsx

@@ -8,7 +8,7 @@ import { previewHandles } from '../../../.storybook/preview';
 import { LAPIS_URL } from '../../constants';
 import { LapisUrlContext } from '../LapisUrlContext';
 import { dateRangeOptionPresets } from './dateRangeOption';
-import { expectInvalidAttributesErrorMessage } from '../shared/stories/expectInvalidAttributesErrorMessage';
+import { expectInvalidAttributesErrorMessage } from '../shared/stories/expectErrorMessage';
 
 const earliestDate = '1970-01-01';
 

components/src/preact/lineageFilter/lineage-filter.stories.tsx

@@ -5,7 +5,7 @@ import { previewHandles } from '../../../.storybook/preview';
 import { AGGREGATED_ENDPOINT, LAPIS_URL } from '../../constants';
 import aggregatedData from '../../preact/lineageFilter/__mockData__/aggregated.json';
 import { LapisUrlContext } from '../LapisUrlContext';
-import { expectInvalidAttributesErrorMessage } from '../shared/stories/expectInvalidAttributesErrorMessage';
+import { expectInvalidAttributesErrorMessage } from '../shared/stories/expectErrorMessage';
 
 const meta: Meta = {
     title: 'Input/LineageFilter',

components/src/preact/locationFilter/location-filter.stories.tsx

@@ -5,7 +5,7 @@ import { LocationFilter, type LocationFilterProps } from './location-filter';
 import { previewHandles } from '../../../.storybook/preview';
 import { AGGREGATED_ENDPOINT, LAPIS_URL } from '../../constants';
 import { LapisUrlContext } from '../LapisUrlContext';
-import { expectInvalidAttributesErrorMessage } from '../shared/stories/expectInvalidAttributesErrorMessage';
+import { expectInvalidAttributesErrorMessage } from '../shared/stories/expectErrorMessage';
 
 const meta: Meta<LocationFilterProps> = {
     title: 'Input/LocationFilter',

components/src/preact/map/__mockData__/aggregatedGermany.json

@@ -0,0 +1,83 @@
+{
+    "data": [
+        {
+            "count": 1748,
+            "division": "Mecklenburg-Vorpommern"
+        },
+        {
+            "count": 10343,
+            "division": "Rheinland-Pfalz"
+        },
+        {
+            "count": 25459,
+            "division": "Saxony"
+        },
+        {
+            "count": 6198,
+            "division": "Niedersachsen"
+        },
+        {
+            "count": 3846,
+            "division": "Berlin"
+        },
+        {
+            "count": 7,
+            "division": "Germany"
+        },
+        {
+            "count": 3778,
+            "division": "Brandenburg"
+        },
+        {
+            "count": 1672,
+            "division": "Bremen"
+        },
+        {
+            "count": 4969,
+            "division": "Hesse"
+        },
+        {
+            "count": 3238,
+            "division": "Thuringia"
+        },
+        {
+            "count": 4747,
+            "division": "Saxony-Anhalt"
+        },
+        {
+            "count": 109800,
+            "division": null
+        },
+        {
+            "count": 4911,
+            "division": "Saarland"
+        },
+        {
+            "count": 50650,
+            "division": "Baden-Wuerttemberg"
+        },
+        {
+            "count": 50102,
+            "division": "North Rhine Westphalia"
+        },
+        {
+            "count": 9832,
+            "division": "Schleswig-Holstein"
+        },
+        {
+            "count": 28546,
+            "division": "Bavaria"
+        },
+        {
+            "count": 9633,
+            "division": "Hamburg"
+        }
+    ],
+    "info": {
+        "dataVersion": "1733676577",
+        "requestId": "7517dbd2-10ed-4a5a-8b2b-a6e08de55982",
+        "requestInfo": "sars_cov-2_nextstrain_open on lapis.cov-spectrum.org at 2024-12-09T16:14:08.190102574",
+        "reportTo": "Please report to https://github.com/GenSpectrum/LAPIS/issues in case you encounter any unexpected issues. Please include the request ID and the requestInfo in your report.",
+        "lapisVersion": "0.3.10"
+    }
+}