0

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!

piet23
  • 61
  • 3

0 Answers0