Check how we could implement a map component

[fengelniederhammer]

resolves #548

Summary

What I found out about the data itself: There are two widely used data formats:

• https://geojson.org/
• https://github.com/topojson/topojson (claims to be a more compact way of storing the data)
  • They offer a JS library to convert topojson to geojson
    Basically all visualization libraries that I found support geojson.

I found https://github.com/markmarkoh/datamaps/tree/master/src/js/data, which has map data for many countries (in the topojson format). The repo itself looks pretty unmaintained, but most countries don't change that often. Taking the map data should still be ok.

I've looked into https://www.npmjs.com/package/chartjs-chart-geo, but it wasn't really satisfying. I couldn't warp my head around how to properly configure the projections to make the maps look good (centered, proportions not distorted too much).

The current approach is based on https://leafletjs.com/. It seems quite powerful and very customizable.

The main open points to me are:

• Do we provide the maps? Do we offer a possibility to let users plug in the maps?
  • The maps are quite significant in size (at least in browser terms): Usually around
• How do we map the values from LAPIS to the states in the maps? We don't have control over the LAPIS instance -> we probably need a way to let the user provide a mapping between lapis field values and state names in the maps.

Screenshot

PR Checklist

• All necessary documentation has been adapted.
• The implemented feature is covered by an appropriate test.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
dashboard-components	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 29, 2024 2:20pm

[github-actions]

There is no change in the changelog. This PR will not produce a new releasable version.