I work with Svelte, MapLibre and MapTiler. I want to build a fast choropleth-map of Germany. Problem is: I want to create a map with every german municipality, that's more than 11,000. For performance reasons I dont want to send a topoJSON to the client and let him add a source to the map.
So I uploaded a file with polygons of every municipality to Maptiler. I can build the raw map with every polygon like this:
let map = new maplibre.Map({
container: "map",
style: \https://api.maptiler.com/path/to/style.json?key=${apiKey}`,
});`
Now i want to color the polygons based on a csv-file I load into the svelte app. So in fact I need to merge the polygons of the tileJSON with the data in the csv-file based on an ID.
I tried something like this:
const dataLookup = new Map();
data.forEach((d) => {dataLookup.set(d["gkz"], d);});
map.on("sourcedata", "gemeinden_polygon", (e) => {
e.features.forEach((item) => {
const gkz = item.properties.gkz;
Object.assign(item.properties, dataLookup.get(gkz));
const colorKey = item.properties["2022"];
const col = color(colorKey) || "lightgrey";
item.properties.color = col;
});
});
where color() is a d3-color-scale.
that is actually working, but only inside this event. when I now try something like this, an error occurs:
map.on("load", () => {
map.setPaintProperty("gemeinden_polygon","fill-color",["get", "color",]);
});
I also tried this, what is also not working:
map.on("load", "gemeinden_polygon", (e) => {
e.features.forEach((item) => {
const gkz = item.properties.gkz;
Object.assign(item.properties, dataLookup.get(gkz));
const colorKey = item.properties["2022"];
const col = color(colorKey) || "lightgrey";
item.properties.color = col;
});
map.setPaintProperty("gemeinden_polygon","fill-color",["get", "color",]);
});
What am I doing wrong? Is it even possible to color the polygons like this? Or do i need to upload the complete data to maptiler?
Thanks in advance!