diff --git a/app/.env.development b/app/.env.development
index 639db9e7a..a29f1f3be 100644
--- a/app/.env.development
+++ b/app/.env.development
@@ -1,4 +1,5 @@
 DATABASE_URL=postgres://postgres:password@localhost:5432/visualization_tool
 SPARQL_ENDPOINT=https://lindas.admin.ch/query
+SPARQL_GEO_ENDPOINT=https://geo.ld.admin.ch/query
 SPARQL_EDITOR=https://lindas.admin.ch/sparql/
 GRAPHQL_ENDPOINT=/api/graphql
diff --git a/app/charts/chart-config-ui-options.ts b/app/charts/chart-config-ui-options.ts
index 14e7ee8cf..8bc4627cc 100644
--- a/app/charts/chart-config-ui-options.ts
+++ b/app/charts/chart-config-ui-options.ts
@@ -11,10 +11,14 @@ export type DimensionType =
   | "TemporalDimension"
   | "NominalDimension"
   | "OrdinalDimension"
+  | "GeoCoordinatesDimension"
+  | "GeoShapesDimension"
   | "Measure"
   | "Attribute";
 
-export type EncodingField = "x" | "y" | "segment";
+export type BaseEncodingField = "x" | "y" | "segment" | "settings";
+export type GeoEncodingField = "areaLayer" | "symbolLayer";
+export type EncodingField = BaseEncodingField | GeoEncodingField;
 export type EncodingOption =
   | "chartSubType"
   | "sorting"
@@ -228,7 +232,26 @@ export const chartConfigOptionsUISpec: ChartSpecs = {
   },
   map: {
     chartType: "map",
-    encodings: [],
+    encodings: [
+      {
+        field: "settings",
+        optional: true,
+        values: ["Attribute"], // FIXME: currently not used anywhere
+        filters: false,
+      },
+      {
+        field: "areaLayer",
+        optional: false,
+        values: ["Measure"],
+        filters: false,
+      },
+      {
+        field: "symbolLayer",
+        optional: true,
+        values: ["Measure"],
+        filters: false,
+      },
+    ],
     interactiveFilters: [],
   },
 };
diff --git a/app/charts/index.ts b/app/charts/index.ts
index a704a7482..288170e04 100644
--- a/app/charts/index.ts
+++ b/app/charts/index.ts
@@ -1,3 +1,4 @@
+import { groupBy } from "lodash";
 import {
   ChartConfig,
   ChartType,
@@ -5,7 +6,11 @@ import {
   TableColumn,
 } from "../configurator";
 import { mapColorsToComponentValuesIris } from "../configurator/components/ui-helpers";
-import { getCategoricalDimensions, getTimeDimensions } from "../domain/data";
+import {
+  getCategoricalDimensions,
+  getGeoDimensions,
+  getTimeDimensions,
+} from "../domain/data";
 import { DimensionMetaDataFragment } from "../graphql/query-hooks";
 import { DataCubeMetadata } from "../graphql/types";
 import { unreachableError } from "../lib/unreachable";
@@ -18,6 +23,7 @@ export const enabledChartTypes: ChartType[] = [
   "scatterplot",
   "pie",
   "table",
+  "map",
 ];
 
 /**
@@ -246,6 +252,11 @@ export const getInitialConfig = ({
         ),
       };
     case "map":
+      const {
+        GeoShapesDimension: geoShapes = [],
+        GeoCoordinatesDimension: geoCoordinates = [],
+      } = groupBy(getGeoDimensions(dimensions), (d) => d.__typename);
+
       return {
         chartType,
         filters: {},
@@ -262,32 +273,27 @@ export const getInitialConfig = ({
           },
         },
         fields: {
-          baseLayer: {
-            componentIri: dimensions[0].iri,
-            relief: true,
-            lakes: true,
-          },
           areaLayer: {
-            componentIri: measures[0].iri,
-            show: false,
-            label: { componentIri: dimensions[0].iri },
+            show: geoShapes.length > 0,
+            componentIri: geoShapes[0]?.iri || "",
+            measureIri: measures[0].iri,
+            hierarchyLevel: 1,
             palette: "oranges",
             nbClass: 5,
             paletteType: "continuous",
           },
           symbolLayer: {
-            show: false,
-            componentIri: measures[0].iri,
-          },
-          // FIXME: unused fields
-          x: { componentIri: dimensions[0].iri },
-          y: {
-            componentIri: measures[0].iri,
-          },
-          segment: {
-            componentIri: dimensions[0].iri,
+            show: geoShapes.length === 0,
+            componentIri: geoCoordinates[0]?.iri || geoShapes[0]?.iri || "",
+            measureIri: measures[0].iri,
+            hierarchyLevel: 1,
+            color: "#1f77b4",
           },
         },
+        settings: {
+          showRelief: true,
+          showLakes: true,
+        },
       };
 
     // This code *should* be unreachable! If it's not, it means we haven't checked all cases (and we should get a TS error).
@@ -297,21 +303,18 @@ export const getInitialConfig = ({
 };
 
 export const getPossibleChartType = ({
-  chartTypes = enabledChartTypes,
   meta,
 }: {
-  chartTypes?: ChartType[];
   meta: DataCubeMetadata;
 }): ChartType[] => {
   const { measures, dimensions } = meta;
 
   const hasZeroQ = measures.length === 0;
   const hasMultipleQ = measures.length > 1;
-  const hasTime = dimensions.some(
-    (dim) => dim.__typename === "TemporalDimension"
-  );
+  const hasGeo = getGeoDimensions(dimensions).length > 0;
+  const hasTime = getTimeDimensions(dimensions).length > 0;
 
-  // const geoBased: ChartType[] = ["map"];
+  const geoBased: ChartType[] = ["map"];
   const catBased: ChartType[] = ["bar", "column", "pie", "table"];
   const multipleQ: ChartType[] = ["scatterplot"];
   const timeBased: ChartType[] = ["line", "area"];
@@ -319,18 +322,22 @@ export const getPossibleChartType = ({
   let possibles: ChartType[] = [];
   if (hasZeroQ) {
     possibles = ["table"];
-  } else if (hasMultipleQ && hasTime) {
-    possibles = [...multipleQ, ...timeBased, ...catBased];
-  } else if (hasMultipleQ && !hasTime) {
-    possibles = [...multipleQ, ...catBased];
-  } else if (!hasMultipleQ && hasTime) {
-    possibles = [...catBased, ...timeBased];
-  } else if (!hasMultipleQ && !hasTime) {
-    possibles = [...catBased];
   } else {
-    // Tables should always be possible
-    possibles = ["table"];
+    possibles.push(...catBased);
+
+    if (hasMultipleQ) {
+      possibles.push(...multipleQ);
+    }
+
+    if (hasTime) {
+      possibles.push(...timeBased);
+    }
+
+    if (hasGeo) {
+      possibles.push(...geoBased);
+    }
   }
+
   return enabledChartTypes.filter((type) => possibles.includes(type));
 };
 
diff --git a/app/charts/map/chart-map-prototype.tsx b/app/charts/map/chart-map-prototype.tsx
deleted file mode 100644
index daa1b6900..000000000
--- a/app/charts/map/chart-map-prototype.tsx
+++ /dev/null
@@ -1,382 +0,0 @@
-import { t, Trans } from "@lingui/macro";
-import { geoCentroid } from "d3";
-import React, { memo, useEffect, useMemo, useState } from "react";
-import { Box, Flex } from "theme-ui";
-import {
-  feature as topojsonFeature,
-  mesh as topojsonMesh,
-} from "topojson-client";
-import { Select } from "../../components/form";
-import { HintBlue, LoadingOverlay, NoDataHint } from "../../components/hint";
-import { MapFields, PaletteType } from "../../configurator";
-import { ControlSection } from "../../configurator/components/chart-controls/section";
-import { Observation } from "../../domain/data";
-import { DimensionMetaDataFragment } from "../../graphql/query-hooks";
-import { ChartContainer } from "../shared/containers";
-import { MapComponent } from "./map";
-import { MapLegend } from "./map-legend";
-import { GeoData, MapChart } from "./map-state";
-import { MapTooltip } from "./map-tooltip";
-import { Tab } from "./prototype-components";
-import { PrototypeRightControls } from "./prototype-right-controls";
-
-type GeoDataState =
-  | {
-      state: "fetching";
-    }
-  | {
-      state: "error";
-    }
-  | (GeoData & { state: "loaded" });
-
-type DataState =
-  | {
-      state: "fetching";
-    }
-  | {
-      state: "error";
-    }
-  | {
-      state: "loaded";
-      ds: Observation[];
-    };
-
-export const ChartMapVisualization = () => {
-  const [geoData, setGeoData] = useState<GeoDataState>({ state: "fetching" });
-  const [dataset, loadDataset] = useState<DataState>({ state: "fetching" });
-
-  useEffect(() => {
-    const loadGeoData = async () => {
-      try {
-        const res = await fetch(`/topojson/ch-2020.json`);
-        const topo = await res.json();
-
-        const cantons = topojsonFeature(topo, topo.objects.cantons);
-        const cantonMesh = topojsonMesh(topo, topo.objects.cantons);
-        const lakes = topojsonFeature(topo, topo.objects.lakes);
-        const cantonCentroids = (cantons as $FixMe).features.map(
-          (c: $FixMe) => ({
-            id: c.id,
-            coordinates: geoCentroid(c),
-          })
-        );
-        setGeoData({
-          state: "loaded",
-          cantons,
-          cantonMesh,
-          cantonCentroids,
-          lakes,
-        });
-      } catch (e) {
-        setGeoData({ state: "error" });
-      }
-    };
-    loadGeoData();
-  }, []);
-
-  useEffect(() => {
-    const loadData = async () => {
-      try {
-        const res = await fetch(`/map-data/tidy/holzernte.json`);
-        const ds = await res.json();
-
-        loadDataset({
-          state: "loaded",
-          ds,
-        });
-      } catch (e) {
-        loadDataset({ state: "error" });
-      }
-    };
-    loadData();
-  }, []);
-
-  if (geoData.state === "fetching" || dataset.state === "fetching") {
-    return <LoadingOverlay />;
-  } else if (geoData.state === "error" || dataset.state === "error") {
-    return <NoDataHint />;
-  } else {
-    const dimensions = Object.keys(dataset.ds[0])
-      .filter((d) => d.startsWith("D_"))
-      .map((d) => ({
-        __typename: "NominalDimension",
-        iri: d,
-        label: d,
-        dimensionValues: [...new Set(dataset.ds.map((datum) => datum[d]))],
-      })) as Array<DimensionMetaDataFragment & { dimensionValues: string[] }>;
-    const measures = Object.keys(dataset.ds[0])
-      .filter((d) => d.startsWith("M_"))
-      .map((d) => ({
-        __typename: "Measure",
-        iri: d,
-        label: d,
-      })) as DimensionMetaDataFragment[];
-    const attributes = Object.keys(dataset.ds[0])
-      .filter((d) => d.startsWith("A_"))
-      .map((d) => ({
-        __typename: "NominalDimension",
-        iri: d,
-        label: d,
-      })) as DimensionMetaDataFragment[];
-
-    return (
-      <ChartMapPrototype
-        dataset={dataset.ds}
-        features={geoData}
-        dimensions={dimensions}
-        measures={measures}
-        attributes={attributes}
-      />
-    );
-  }
-};
-
-export type Control = "baseLayer" | "areaLayer" | "symbolLayer";
-export type ActiveLayer = {
-  relief: boolean;
-  lakes: boolean;
-  areaLayer: boolean;
-  symbolLayer: boolean;
-};
-export const ChartMapPrototype = ({
-  dataset,
-  features,
-  dimensions,
-  measures,
-  attributes,
-}: {
-  dataset: Observation[];
-  features: GeoData;
-  dimensions: Array<DimensionMetaDataFragment & { dimensionValues: string[] }>;
-  measures: DimensionMetaDataFragment[];
-  attributes: DimensionMetaDataFragment[];
-}) => {
-  const [activeLayers, setActiveLayers] = useState<ActiveLayer>({
-    relief: true,
-    lakes: true,
-    areaLayer: false,
-    symbolLayer: false,
-  });
-  const [activeControl, setActiveControl] = useState<Control>("baseLayer");
-  const [palette, setPalette] = useState("oranges");
-  const [nbClass, setNbClass] = useState(5);
-  const [paletteType, setPaletteType] = useState<PaletteType>("continuous");
-  const [measure, setMeasure] = useState(measures[0].iri);
-  const [symbolMeasure, setSymbolMeasure] = useState(measures[0].iri);
-  const [filters, setFilters] = useState<{ [x: string]: string }>(
-    dimensions.reduce(
-      (obj, dim, i) => ({ ...obj, [dim.iri]: dim.dimensionValues[0] }),
-      {}
-    )
-  );
-
-  const updateActiveLayers = (layerKey: keyof ActiveLayer) => {
-    setActiveLayers({
-      ...activeLayers,
-      ...{ [layerKey]: !activeLayers[layerKey] },
-    });
-  };
-  const updateFilters = (filterKey: string, filterValue: string) => {
-    setFilters({ ...filters, ...{ [filterKey]: filterValue } });
-  };
-
-  // Apply filters to data used on the map
-  const data = useMemo(() => {
-    const filterfunctions = Object.keys(filters).map(
-      (filterKey) => (x: Observation) => x[filterKey] === filters[filterKey]
-    );
-    return filterfunctions.reduce((d, f) => d.filter(f), dataset);
-  }, [dataset, filters]);
-
-  return (
-    <>
-      <Box
-        sx={{
-          bg: "monochrome100",
-          borderRight: "1px solid",
-          borderRightColor: "monochrome400",
-        }}
-      >
-        <ControlSection>
-          <Box sx={{ p: 4 }}>
-            <Box sx={{ mb: 4 }}>
-              <Trans id="chart.map.control.layers">Layers</Trans>
-            </Box>
-            <Tab
-              value="baseLayer"
-              onClick={(v) => setActiveControl(v)}
-              iconName="mapMaptype"
-              upperLabel={""}
-              lowerLabel={t({
-                id: "chart.map.layers.base",
-                message: "Base Layer",
-              })}
-              checked={activeControl === "baseLayer"}
-              disabled={false}
-            />
-            <Tab
-              value="areaLayer"
-              onClick={(v) => setActiveControl(v)}
-              iconName="mapRegions"
-              upperLabel={""}
-              lowerLabel={t({
-                id: "chart.map.layers.area",
-                message: "Area Layer",
-              })}
-              checked={activeControl === "areaLayer"}
-              disabled={false}
-            />
-            <Tab
-              value="symbolLayer"
-              onClick={(v) => setActiveControl(v)}
-              iconName="mapSymbols"
-              upperLabel={""}
-              lowerLabel={t({
-                id: "chart.map.layers.symbol",
-                message: "Symbol Layer",
-              })}
-              checked={activeControl === "symbolLayer"}
-              disabled={false}
-            />
-          </Box>
-        </ControlSection>
-        <ControlSection>
-          <Box sx={{ p: 4 }}>
-            <Box sx={{ mb: 3 }}>
-              <Trans id="chart.map.control.data.filters">Data Filters</Trans>
-            </Box>
-            <Flex sx={{ flexDirection: "column" }}>
-              {dimensions.map((dim) => (
-                <Box sx={{ mb: 2 }} key={dim.iri}>
-                  <Select
-                    label={dim.label.split("_")[1]}
-                    id={dim.label}
-                    name={dim.label}
-                    value={filters[dim.iri]}
-                    disabled={false}
-                    options={dim.dimensionValues.map((value) => ({
-                      value,
-                      label: value,
-                    }))}
-                    onChange={(e) =>
-                      updateFilters(dim.iri, e.currentTarget.value)
-                    }
-                  />
-                </Box>
-              ))}
-            </Flex>
-          </Box>
-        </ControlSection>
-      </Box>
-
-      <Box>
-        <HintBlue iconName="hintWarning">
-          <Trans id="chart.map.warning.prototype">
-            This is a prototype, dont use in production!
-          </Trans>
-        </HintBlue>
-        <Box
-          sx={{
-            m: 4,
-            bg: "#FFFFFF",
-            border: "1px solid",
-            borderColor: "monochrome400",
-          }}
-        >
-          {dimensions && measures && data && (
-            <ChartMap
-              observations={data}
-              features={features}
-              fields={{
-                baseLayer: {
-                  componentIri: "",
-                  relief: activeLayers.relief,
-                  lakes: activeLayers.lakes,
-                },
-                areaLayer: {
-                  componentIri: measure,
-                  show: activeLayers["areaLayer"],
-                  label: { componentIri: attributes[0].iri },
-                  palette,
-                  nbClass,
-                  paletteType,
-                },
-                symbolLayer: {
-                  show: activeLayers["symbolLayer"],
-                  componentIri: symbolMeasure,
-                },
-                x: { componentIri: "a" },
-                y: { componentIri: "b" },
-                segment: { componentIri: "c" },
-              }}
-              dimensions={dimensions}
-              measures={measures}
-              // Additional props (prototype only)
-              measure={measure.split("_")[1]}
-            />
-          )}
-        </Box>
-      </Box>
-
-      <Box
-        sx={{
-          bg: "monochrome100",
-          borderLeft: "1px solid",
-          borderLeftColor: "monochrome400",
-        }}
-      >
-        <PrototypeRightControls
-          activeControl={activeControl}
-          activeLayers={activeLayers}
-          updateActiveLayers={updateActiveLayers}
-          measures={measures}
-          measure={measure}
-          setMeasure={setMeasure}
-          palette={palette}
-          setPalette={setPalette}
-          paletteType={paletteType}
-          setPaletteType={setPaletteType}
-          nbClass={nbClass}
-          setNbClass={setNbClass}
-          symbolMeasure={symbolMeasure}
-          setSymbolMeasure={setSymbolMeasure}
-        />
-      </Box>
-    </>
-  );
-};
-
-export const ChartMap = memo(
-  ({
-    observations,
-    features,
-    dimensions,
-    measures,
-    fields,
-    measure,
-  }: {
-    features: GeoData;
-    observations: Observation[];
-    dimensions: DimensionMetaDataFragment[];
-    measures: DimensionMetaDataFragment[];
-    // Additional props (prototype only)
-    fields: MapFields;
-    measure: string;
-  }) => {
-    return (
-      <MapChart
-        data={observations}
-        features={features}
-        fields={fields}
-        dimensions={dimensions}
-        measures={measures}
-      >
-        <ChartContainer>
-          <MapComponent />
-          <MapTooltip />
-        </ChartContainer>
-        <MapLegend />
-      </MapChart>
-    );
-  }
-);
diff --git a/app/charts/map/chart-map.tsx b/app/charts/map/chart-map.tsx
new file mode 100644
index 000000000..168f6db86
--- /dev/null
+++ b/app/charts/map/chart-map.tsx
@@ -0,0 +1,235 @@
+import { geoCentroid } from "d3";
+import React, { memo, useEffect, useMemo, useState } from "react";
+import { Box } from "theme-ui";
+import {
+  feature as topojsonFeature,
+  mesh as topojsonMesh,
+} from "topojson-client";
+import { Loading, LoadingDataError, NoDataHint } from "../../components/hint";
+import { MapConfig, MapFields, MapSettings } from "../../configurator";
+import {
+  AreaLayer,
+  GeoData,
+  GeoFeature,
+  GeoPoint,
+  GeoShapes,
+  isGeoCoordinatesDimension,
+  isGeoShapesDimension,
+  Observation,
+  SymbolLayer,
+} from "../../domain/data";
+import {
+  DimensionMetaDataFragment,
+  useDataCubeObservationsQuery,
+} from "../../graphql/query-hooks";
+import { useLocale } from "../../locales/use-locale";
+import { GeoCoordinates } from "../../rdf/query-geo-coordinates";
+import { QueryFilters } from "../shared/chart-helpers";
+import { ChartContainer } from "../shared/containers";
+import { MapComponent } from "./map";
+import { MapLegend } from "./map-legend";
+import { MapChart } from "./map-state";
+import { MapTooltip } from "./map-tooltip";
+
+type GeoDataState =
+  | { state: "fetching" }
+  | { state: "error" }
+  | (GeoData & { state: "loaded" });
+
+export const ChartMapVisualization = ({
+  dataSetIri,
+  chartConfig,
+  queryFilters,
+}: {
+  dataSetIri: string;
+  chartConfig: MapConfig;
+  queryFilters: QueryFilters;
+}) => {
+  const [geoData, setGeoData] = useState<GeoDataState>({ state: "fetching" });
+  const locale = useLocale();
+
+  const areaDimensionIri = chartConfig.fields.areaLayer.componentIri;
+  const symbolDimensionIri = chartConfig.fields.symbolLayer.componentIri;
+
+  const [{ data, fetching, error }] = useDataCubeObservationsQuery({
+    variables: {
+      locale,
+      iri: dataSetIri,
+      measures: [areaDimensionIri, symbolDimensionIri],
+      filters: queryFilters,
+    },
+  });
+
+  const dimensions = data?.dataCubeByIri?.dimensions;
+  const measures = data?.dataCubeByIri?.measures;
+  const observations = data?.dataCubeByIri?.observations.data as
+    | Observation[]
+    | undefined;
+
+  const areaLayer: AreaLayer | undefined = useMemo(() => {
+    const dimension = dimensions?.find((d) => d.iri === areaDimensionIri);
+
+    if (isGeoShapesDimension(dimension) && observations) {
+      const { topology } = dimension.geoShapes as GeoShapes;
+
+      const topojson = topojsonFeature(
+        topology,
+        topology.objects.shapes
+      ) as AreaLayer["shapes"];
+
+      topojson.features.forEach((d: GeoFeature) => {
+        // Should we match by labels?
+        const observation = observations.find(
+          (o) => o[areaDimensionIri] === d.properties.label
+        );
+
+        d.properties = { ...d.properties, observation };
+      });
+
+      return {
+        shapes: topojson,
+        mesh: topojsonMesh(topology, topology.objects.shapes),
+      };
+    }
+  }, [areaDimensionIri, dimensions, observations]);
+
+  const symbolLayer: SymbolLayer | undefined = useMemo(() => {
+    const dimension = dimensions?.find((d) => d.iri === symbolDimensionIri);
+
+    if (isGeoCoordinatesDimension(dimension)) {
+      const points = (dimension.geoCoordinates as GeoCoordinates[]).map(
+        (d) =>
+          ({
+            coordinates: [d.longitude, d.latitude],
+            properties: {
+              iri: d.iri,
+              label: d.label,
+              observation: observations?.find(
+                (o) => o[symbolDimensionIri] === d.label
+              ),
+            },
+          } as GeoPoint)
+      );
+
+      return { points };
+    } else {
+      if (areaLayer) {
+        const points = areaLayer.shapes.features.map((d) => ({
+          ...d,
+          coordinates: geoCentroid(d),
+        }));
+
+        return { points };
+      }
+    }
+  }, [areaLayer, dimensions, observations, symbolDimensionIri]);
+
+  useEffect(() => {
+    const loadLakes = async () => {
+      try {
+        const res = await fetch(`/topojson/ch-2020.json`);
+        const topo = await res.json();
+        const lakes = topojsonFeature(
+          topo,
+          topo.objects.lakes
+        ) as any as GeoJSON.FeatureCollection;
+
+        setGeoData({ state: "loaded", lakes });
+      } catch (e) {
+        setGeoData({ state: "error" });
+      }
+    };
+
+    loadLakes();
+  }, []);
+
+  if (measures && dimensions && observations && geoData.state === "loaded") {
+    return (
+      <ChartMapPrototype
+        observations={observations}
+        features={{ ...geoData, areaLayer, symbolLayer }}
+        fields={chartConfig.fields}
+        measures={measures}
+        dimensions={dimensions}
+        settings={chartConfig.settings}
+      />
+    );
+  } else if (geoData.state === "fetching" || fetching) {
+    return <Loading />;
+  } else if (geoData.state === "error" || error) {
+    return <LoadingDataError />;
+  } else {
+    return <NoDataHint />;
+  }
+};
+
+export const ChartMapPrototype = ({
+  observations,
+  features,
+  fields,
+  measures,
+  dimensions,
+  settings,
+}: {
+  observations: Observation[];
+  features: GeoData;
+  fields: MapFields;
+  measures: DimensionMetaDataFragment[];
+  dimensions: DimensionMetaDataFragment[];
+  settings: MapSettings;
+}) => {
+  return (
+    <Box
+      sx={{
+        m: 4,
+        bg: "#fff",
+        border: "1px solid",
+        borderColor: "monochrome400",
+      }}
+    >
+      <ChartMap
+        observations={observations}
+        features={features}
+        fields={fields}
+        measures={measures}
+        dimensions={dimensions}
+        settings={settings}
+      />
+    </Box>
+  );
+};
+
+export const ChartMap = memo(
+  ({
+    observations,
+    features,
+    fields,
+    measures,
+    dimensions,
+    settings,
+  }: {
+    features: GeoData;
+    observations: Observation[];
+    measures: DimensionMetaDataFragment[];
+    dimensions: DimensionMetaDataFragment[];
+    fields: MapFields;
+    settings: MapSettings;
+  }) => {
+    return (
+      <MapChart
+        data={observations}
+        features={features}
+        fields={fields}
+        measures={measures}
+        dimensions={dimensions}
+        settings={settings}
+      >
+        <ChartContainer>
+          <MapComponent />
+          <MapTooltip />
+        </ChartContainer>
+        <MapLegend />
+      </MapChart>
+    );
+  }
+);
diff --git a/app/charts/map/map-legend.tsx b/app/charts/map/map-legend.tsx
index fdf76d801..979405f42 100644
--- a/app/charts/map/map-legend.tsx
+++ b/app/charts/map/map-legend.tsx
@@ -1,40 +1,76 @@
 import {
   axisBottom,
   interpolateOranges,
-  min,
-  max,
+  NumberValue,
   range,
   ScaleLinear,
   scaleLinear,
-  select,
-  Selection,
-  ScaleThreshold,
   ScaleQuantile,
   ScaleQuantize,
+  ScaleThreshold,
+  select,
+  Selection,
 } from "d3";
-
 import * as React from "react";
-import { useEffect, useRef } from "react";
+import { useEffect, useMemo, useRef } from "react";
 import { Box, Flex, Text } from "theme-ui";
 import {
   getColorInterpolator,
   useFormatInteger,
   useFormatNumber,
 } from "../../configurator/components/ui-helpers";
+import { Observation } from "../../domain/data";
 import { useChartState } from "../shared/use-chart-state";
 import { useChartTheme } from "../shared/use-chart-theme";
 import { useInteraction } from "../shared/use-interaction";
 import { useWidth } from "../shared/use-width";
 import { MapState } from "./map-state";
 
-const WIDTH = 256;
+const MAX_WIDTH = 204;
+const HEIGHT = 80;
 const COLOR_RAMP_HEIGHT = 10;
+const MARGIN = { top: 6, right: 4, bottom: 0, left: 4 };
+
+const useLegendWidth = () => Math.min(useWidth(), MAX_WIDTH);
+
+const makeAxis = (
+  g: Selection<SVGGElement, unknown, null, undefined>,
+  {
+    axisLabelColor,
+    fontFamily,
+    formatNumber,
+    labelColor,
+    legendFontSize,
+    scale,
+    thresholds,
+  }: {
+    axisLabelColor: string;
+    fontFamily: string;
+    formatNumber: (x: NumberValue | undefined | null) => string;
+    labelColor: string;
+    legendFontSize: number;
+    scale: ScaleLinear<number, number, number>;
+    thresholds: number[];
+  }
+) => {
+  g.call(
+    axisBottom(scale)
+      .tickValues(thresholds)
+      .tickSizeInner(-COLOR_RAMP_HEIGHT)
+      .tickFormat(formatNumber)
+  );
+  g.select("path.domain").remove();
+  g.selectAll(".tick line").attr("stroke", axisLabelColor);
+  g.selectAll(".tick text")
+    .attr("font-size", legendFontSize)
+    .attr("font-family", fontFamily)
+    .attr("fill", labelColor)
+    .attr("transform", "rotate(45)")
+    .attr("text-anchor", "start");
+};
 
 export const MapLegend = () => {
-  const {
-    areaLayer: { areaMeasureLabel, showAreaLayer, paletteType },
-    symbolLayer: { symbolMeasureLabel, showSymbolLayer },
-  } = useChartState() as MapState;
+  const { areaLayer, symbolLayer } = useChartState() as MapState;
 
   return (
     <Flex
@@ -45,28 +81,29 @@ export const MapLegend = () => {
         flexWrap: "wrap",
       }}
     >
-      {showAreaLayer && (
+      {areaLayer.show && (
         <Box sx={{ p: 4 }}>
-          {areaMeasureLabel && (
-            <Text as="div" variant="meta">
-              {areaMeasureLabel}
+          {areaLayer.measureLabel && (
+            <Text
+              as="div"
+              variant="meta"
+              sx={{ marginLeft: `${MARGIN.left}px` }}
+            >
+              {areaLayer.measureLabel}
             </Text>
           )}
-
-          {paletteType === "continuous" && <ContinuousColorLegend />}
-
-          {paletteType === "discrete" && <QuantizeColorLegend />}
-
-          {paletteType === "quantile" && <QuantileColorLegend />}
-
-          {paletteType === "jenks" && <JenksColorLegend />}
+          {areaLayer.paletteType === "continuous" && <ContinuousColorLegend />}
+          {areaLayer.paletteType === "discrete" && <QuantizeColorLegend />}
+          {areaLayer.paletteType === "quantile" && <QuantileColorLegend />}
+          {areaLayer.paletteType === "jenks" && <JenksColorLegend />}
         </Box>
       )}
-      {showSymbolLayer && (
+
+      {symbolLayer.show && (
         <Box sx={{ p: 4 }}>
-          {symbolMeasureLabel && (
+          {symbolLayer.measureLabel && (
             <Text as="div" variant="meta">
-              {symbolMeasureLabel}
+              {symbolLayer.measureLabel}
             </Text>
           )}
           <CircleLegend />
@@ -75,211 +112,204 @@ export const MapLegend = () => {
     </Flex>
   );
 };
+
+interface CircleProps {
+  value: string;
+  label: string;
+  fill?: string;
+  stroke: string;
+  radius: number;
+  maxRadius: number;
+  fontSize: number;
+  showLine?: boolean;
+}
+
+const Circle = (props: CircleProps) => {
+  const {
+    value,
+    label,
+    fill,
+    stroke,
+    radius,
+    maxRadius,
+    fontSize,
+    showLine = true,
+  } = props;
+
+  return (
+    <g transform={`translate(0, ${maxRadius - radius})`}>
+      <circle
+        cx={0}
+        cy={0}
+        r={radius}
+        fill={fill}
+        stroke={stroke}
+        fillOpacity={0.1}
+      />
+      {showLine && (
+        <>
+          <line
+            x1={0}
+            y1={-radius}
+            x2={maxRadius + 4}
+            y2={-radius}
+            stroke={stroke}
+          />
+          <text
+            x={maxRadius + 6}
+            y={-radius}
+            dy={5}
+            fill={stroke}
+            textAnchor="start"
+            fontSize={fontSize}
+          >
+            {value} {label}
+          </text>
+        </>
+      )}
+    </g>
+  );
+};
+
 const CircleLegend = () => {
-  const width = useWidth();
-  const [
-    {
-      interaction: { d, visible },
-    },
-  ] = useInteraction();
+  const width = useLegendWidth();
 
+  const [{ interaction }] = useInteraction();
   const { axisLabelColor, legendFontSize } = useChartTheme();
   const {
-    data,
-    getFeatureLabel,
-    symbolLayer: { getRadius, radiusScale, symbolColorScale },
+    symbolLayer: {
+      data,
+      color: symbolColor,
+      dataDomain,
+      getLabel,
+      getValue,
+      radiusScale,
+    },
   } = useChartState() as MapState;
   const formatNumber = useFormatInteger();
 
-  const legendWidth = Math.min(width, WIDTH);
-  const margins = {
-    top: 6,
-    right: 4,
-    bottom: 4,
-    left: 4,
-  };
-  const height = 60;
+  const maybeValue = interaction.d && getValue(interaction.d);
+  const value = typeof maybeValue === "number" ? maybeValue : undefined;
 
-  const [, maxRadius] = radiusScale.domain();
+  const radius = value && radiusScale(value);
+  const maxRadius = radiusScale.range()[1];
 
-  const hoveredRadius =
-    d && typeof getRadius(d) === "number" ? getRadius(d) : undefined;
+  const color = value ? symbolColor : undefined;
 
-  const hoveredColor =
-    d && typeof getRadius(d) === "number"
-      ? symbolColorScale(getRadius(d) as number)
-      : undefined;
+  const domainObservations = useMemo(
+    () => dataDomain.map((d) => data.find((x) => getValue(x) === d)),
+    [data, dataDomain, getValue]
+  ) as [Observation, Observation];
 
   return (
-    <svg
-      width={legendWidth + margins.left + margins.right}
-      height={height + margins.top + margins.bottom}
-    >
+    <svg width={width} height={HEIGHT}>
       <g
-        transform={`translate(${margins.left + radiusScale(maxRadius)}, ${
-          margins.top + radiusScale(maxRadius)
+        transform={`translate(${MARGIN.left + maxRadius}, ${
+          MARGIN.top + maxRadius
         })`}
       >
-        {radiusScale.domain().map((d) => {
-          // FIXME: Potentially a performance problem if a lot of data
-          const thisFeatureLabel = getFeatureLabel(
-            data.find((x) => getRadius(x) === d)
-          );
+        {dataDomain.map((d, i) => {
+          const observation = domainObservations[i];
+          const label = getLabel(observation);
+          const radius = radiusScale(d);
 
           return (
-            <>
-              {d !== 0 && (
-                <g
-                  transform={`translate(0, ${
-                    radiusScale(maxRadius) - radiusScale(d)
-                  })`}
-                >
-                  <circle
-                    cx={0}
-                    cy={0}
-                    r={radiusScale(d)}
+            observation && (
+              <>
+                {
+                  <Circle
+                    value={formatNumber(d)}
+                    label={label}
                     fill="none"
                     stroke={axisLabelColor}
+                    radius={radius}
+                    maxRadius={maxRadius}
+                    fontSize={legendFontSize}
+                    showLine={!interaction.visible}
                   />
-                  {!visible && (
-                    <>
-                      <line
-                        x1={0}
-                        y1={-radiusScale(d)}
-                        x2={radiusScale(maxRadius) + 4}
-                        y2={-radiusScale(d)}
-                        stroke={axisLabelColor}
-                      />
-                      <text
-                        x={radiusScale(maxRadius) + 6}
-                        y={-radiusScale(d)}
-                        dy={5}
-                        fill={axisLabelColor}
-                        textAnchor="start"
-                        fontSize={legendFontSize}
-                      >
-                        {formatNumber(d)} ({thisFeatureLabel})
-                      </text>
-                    </>
-                  )}
-                </g>
-              )}
-            </>
+                }
+              </>
+            )
           );
         })}
+
         {/* Hovered data point indicator */}
-        {d && visible && hoveredRadius && (
-          <g
-            transform={`translate(0, ${
-              radiusScale(maxRadius) - radiusScale(hoveredRadius)
-            })`}
-          >
-            <circle
-              cx={0}
-              cy={0}
-              r={radiusScale(hoveredRadius)}
-              fill={hoveredColor}
-              stroke={hoveredColor}
-              fillOpacity={0.1}
-            />
-            <line
-              x1={0}
-              y1={-radiusScale(hoveredRadius)}
-              x2={radiusScale(maxRadius) + 4}
-              y2={-radiusScale(hoveredRadius)}
-              stroke={hoveredColor}
-            />
-            <text
-              x={radiusScale(maxRadius) + 6}
-              y={-radiusScale(hoveredRadius)}
-              dy={5}
-              fill={hoveredColor}
-              textAnchor="start"
+        {interaction.d &&
+          interaction.visible &&
+          value !== undefined &&
+          radius !== undefined && (
+            <Circle
+              value={formatNumber(value)}
+              label={getLabel(interaction.d)}
+              fill={color}
+              stroke={axisLabelColor}
+              radius={radius}
+              maxRadius={maxRadius}
               fontSize={legendFontSize}
-            >
-              {formatNumber(getRadius(d) ?? NaN)} ({getFeatureLabel(d)})
-            </text>
-          </g>
-        )}
+            />
+          )}
       </g>
     </svg>
   );
 };
 
 const JenksColorLegend = () => {
+  const width = useLegendWidth();
   const legendAxisRef = useRef<SVGGElement>(null);
-  const {
-    axisLabelColor,
-    labelColor,
-    fontFamily,
-    legendFontSize,
-  } = useChartTheme();
+
+  const { axisLabelColor, labelColor, fontFamily, legendFontSize } =
+    useChartTheme();
   const {
     areaLayer: { dataDomain, colorScale },
   } = useChartState() as MapState;
   const formatNumber = useFormatInteger();
-  const width = useWidth();
-
-  const legendWidth = Math.min(width, WIDTH);
-  const margins = {
-    top: 6,
-    right: 4,
-    bottom: 64,
-    left: 4,
-  };
+  const thresholds = useMemo(
+    () => (colorScale.domain ? colorScale.domain() : []),
+    [colorScale]
+  );
 
-  const thresholds = colorScale.domain ? colorScale.domain() : [];
+  const [min, max] = dataDomain;
 
   // From color index to threshold value
   const thresholdsScale = scaleLinear()
     .domain(range(colorScale.range().length + 1))
-    .range([
-      min(dataDomain, (d) => d) || 0,
-      ...thresholds,
-      max(dataDomain, (d) => d) || 100,
-    ]);
+    .range([min || 0, ...thresholds, max || 100]);
 
   // From threshold value to pixel value
   const scale = scaleLinear()
-    .domain([
-      min(dataDomain, (d) => d) || 0,
-      max(dataDomain, (d) => d) || 10000,
-    ])
-    .range([0, legendWidth]);
-
-  const mkAxis = (g: Selection<SVGGElement, unknown, null, undefined>) => {
-    const tickValues = thresholds.splice(0, thresholds.length - 1);
-
-    g.call(
-      axisBottom(scale)
-        .tickValues(tickValues)
-        .tickSizeInner(-COLOR_RAMP_HEIGHT - 2)
-        .tickFormat(formatNumber)
-    );
-    g.select("path.domain").remove();
-    g.selectAll(".tick line").attr("stroke", axisLabelColor);
-    g.selectAll(".tick text")
-      .attr("font-size", legendFontSize)
-      .attr("font-family", fontFamily)
-      .attr("fill", labelColor)
-      .attr("transform", "rotate(45)")
-      .attr("text-anchor", "start");
-  };
-
-  useEffect(() => {
-    const g = select(legendAxisRef.current);
-    mkAxis(g as Selection<SVGGElement, unknown, null, undefined>);
-  });
+    .domain([min || 0, max || 10000])
+    .range([MARGIN.left, width - MARGIN.right]);
+
+  const tickValues = thresholds.splice(0, thresholds.length - 1);
+
+  useEffect(
+    () =>
+      makeAxis(select(legendAxisRef.current) as any, {
+        axisLabelColor,
+        fontFamily,
+        formatNumber,
+        labelColor,
+        legendFontSize,
+        scale,
+        thresholds: tickValues,
+      }),
+    [
+      axisLabelColor,
+      fontFamily,
+      formatNumber,
+      labelColor,
+      legendFontSize,
+      scale,
+      tickValues,
+    ]
+  );
 
   return (
-    <svg
-      width={legendWidth + margins.left + margins.right}
-      height={COLOR_RAMP_HEIGHT + margins.top + margins.bottom}
-    >
-      <g transform={`translate(${margins.left}, ${0})`}>
+    <svg width={width} height={HEIGHT}>
+      <g>
         <DataPointIndicator scale={scale} />
       </g>
-      <g transform={`translate(${margins.left}, ${margins.top})`}>
+      <g transform={`translate(0, ${MARGIN.top})`}>
         {(colorScale as ScaleThreshold<number, string>).range().map((c, i) => {
           return (
             <rect
@@ -288,7 +318,7 @@ const JenksColorLegend = () => {
               y={0}
               width={scale(thresholdsScale(i + 1)) - scale(thresholdsScale(i))}
               height={COLOR_RAMP_HEIGHT}
-              fill={`${c}`}
+              fill={c}
             />
           );
         })}
@@ -296,85 +326,69 @@ const JenksColorLegend = () => {
       <g
         ref={legendAxisRef}
         key="legend-axis"
-        transform={`translate(${margins.left}, ${
-          COLOR_RAMP_HEIGHT + margins.top + 2
-        })`}
+        transform={`translate(0, ${COLOR_RAMP_HEIGHT + MARGIN.top})`}
       />
     </svg>
   );
 };
+
 const QuantileColorLegend = () => {
+  const width = useLegendWidth();
   const legendAxisRef = useRef<SVGGElement>(null);
-  const {
-    axisLabelColor,
-    labelColor,
-    fontFamily,
-    legendFontSize,
-  } = useChartTheme();
+
+  const { axisLabelColor, labelColor, fontFamily, legendFontSize } =
+    useChartTheme();
   const {
     areaLayer: { dataDomain, colorScale },
   } = useChartState() as MapState;
   const formatNumber = useFormatInteger();
-  const width = useWidth();
-
-  const legendWidth = Math.min(width, WIDTH);
-  const margins = {
-    top: 6,
-    right: 4,
-    bottom: 64,
-    left: 4,
-  };
-  // @ts-ignore
-  const thresholds = colorScale.quantiles ? colorScale.quantiles() : [];
+
+  const thresholds = useMemo(
+    // @ts-ignore
+    () => (colorScale.quantiles ? colorScale.quantiles() : []),
+    [colorScale]
+  );
+
+  const [min, max] = dataDomain;
 
   // From color index to threshold value
   const thresholdsScale = scaleLinear()
     .domain(range(colorScale.range().length + 1))
-    .range([
-      min(dataDomain, (d) => d),
-      ...thresholds,
-      max(dataDomain, (d) => d),
-    ]);
+    .range([min, ...thresholds, max]);
 
   // From threshold value to pixel value
   const scale = scaleLinear()
-    .domain([
-      min(dataDomain, (d) => d) || 0,
-      max(dataDomain, (d) => d) || 10000,
-    ])
-    .range([0, legendWidth]);
-
-  const mkAxis = (g: Selection<SVGGElement, unknown, null, undefined>) => {
-    g.call(
-      axisBottom(scale)
-        .tickValues(thresholds)
-        .tickSizeInner(-COLOR_RAMP_HEIGHT - 2)
-        .tickFormat(formatNumber)
-    );
-    g.select("path.domain").remove();
-    g.selectAll(".tick line").attr("stroke", axisLabelColor);
-    g.selectAll(".tick text")
-      .attr("font-size", legendFontSize)
-      .attr("font-family", fontFamily)
-      .attr("fill", labelColor)
-      .attr("transform", "rotate(45)")
-      .attr("text-anchor", "start");
-  };
-
-  useEffect(() => {
-    const g = select(legendAxisRef.current);
-    mkAxis(g as Selection<SVGGElement, unknown, null, undefined>);
-  });
+    .domain([min || 0, max || 10000])
+    .range([MARGIN.left, width - MARGIN.right]);
+
+  useEffect(
+    () =>
+      makeAxis(select(legendAxisRef.current) as any, {
+        axisLabelColor,
+        fontFamily,
+        formatNumber,
+        labelColor,
+        legendFontSize,
+        scale,
+        thresholds,
+      }),
+    [
+      axisLabelColor,
+      fontFamily,
+      formatNumber,
+      labelColor,
+      legendFontSize,
+      scale,
+      thresholds,
+    ]
+  );
 
   return (
-    <svg
-      width={legendWidth + margins.left + margins.right}
-      height={COLOR_RAMP_HEIGHT + margins.top + margins.bottom}
-    >
-      <g transform={`translate(${margins.left}, ${0})`}>
+    <svg width={width} height={HEIGHT}>
+      <g>
         <DataPointIndicator scale={scale} />
       </g>
-      <g transform={`translate(${margins.left}, ${margins.top})`}>
+      <g transform={`translate(0, ${MARGIN.top})`}>
         {(colorScale as ScaleQuantile<string>).range().map((c, i) => {
           return (
             <rect
@@ -383,7 +397,7 @@ const QuantileColorLegend = () => {
               y={0}
               width={scale(thresholdsScale(i + 1)) - scale(thresholdsScale(i))}
               height={COLOR_RAMP_HEIGHT}
-              fill={`${c}`}
+              fill={c}
             />
           );
         })}
@@ -391,167 +405,135 @@ const QuantileColorLegend = () => {
       <g
         ref={legendAxisRef}
         key="legend-axis"
-        transform={`translate(${margins.left}, ${
-          COLOR_RAMP_HEIGHT + margins.top + 2
-        })`}
+        transform={`translate(0, ${COLOR_RAMP_HEIGHT + MARGIN.top})`}
       />
     </svg>
   );
 };
 
 const QuantizeColorLegend = () => {
+  const width = useLegendWidth();
   const legendAxisRef = useRef<SVGGElement>(null);
-  const {
-    axisLabelColor,
-    labelColor,
-    fontFamily,
-    legendFontSize,
-  } = useChartTheme();
+
+  const { axisLabelColor, labelColor, fontFamily, legendFontSize } =
+    useChartTheme();
   const {
     areaLayer: { dataDomain, colorScale },
   } = useChartState() as MapState;
   const formatNumber = useFormatInteger();
-  const width = useWidth();
-
-  const legendWidth = Math.min(width, WIDTH);
-  const margins = {
-    top: 6,
-    right: 4,
-    bottom: 64,
-    left: 4,
-  };
 
   const classesScale = scaleLinear()
     .domain([0, colorScale.range().length])
-    .range([0, legendWidth]);
-
-  const scale = scaleLinear().domain(dataDomain).range([0, legendWidth]);
-
-  // @ts-ignore
-  const thresholds = colorScale.thresholds ? colorScale.thresholds() : [];
-
-  const mkAxis = (g: Selection<SVGGElement, unknown, null, undefined>) => {
-    g.call(
-      axisBottom(scale)
-        .tickValues(thresholds)
-        .tickSizeInner(-COLOR_RAMP_HEIGHT - 2)
-        .tickFormat(formatNumber)
-    );
-    g.select("path.domain").remove();
-    g.selectAll(".tick line").attr("stroke", axisLabelColor);
-    g.selectAll(".tick text")
-      .attr("font-size", legendFontSize)
-      .attr("font-family", fontFamily)
-      .attr("fill", labelColor)
-      .attr("transform", "rotate(45)")
-      .attr("text-anchor", "start");
-  };
+    .range([MARGIN.left, width - MARGIN.right]);
 
-  useEffect(() => {
-    const g = select(legendAxisRef.current);
-    mkAxis(g as Selection<SVGGElement, unknown, null, undefined>);
-  });
+  const scale = scaleLinear()
+    .domain(dataDomain)
+    .range([MARGIN.left, width - MARGIN.right]);
+
+  const thresholds = useMemo(
+    // @ts-ignore
+    () => (colorScale.thresholds ? colorScale.thresholds() : []),
+    [colorScale]
+  );
+
+  useEffect(
+    () =>
+      makeAxis(select(legendAxisRef.current) as any, {
+        axisLabelColor,
+        fontFamily,
+        formatNumber,
+        labelColor,
+        legendFontSize,
+        scale,
+        thresholds,
+      }),
+    [
+      axisLabelColor,
+      fontFamily,
+      formatNumber,
+      labelColor,
+      legendFontSize,
+      scale,
+      thresholds,
+    ]
+  );
 
   return (
-    <svg
-      width={legendWidth + margins.left + margins.right}
-      height={COLOR_RAMP_HEIGHT + margins.top + margins.bottom}
-    >
-      <g transform={`translate(${margins.left}, ${0})`}>
+    <svg width={width} height={HEIGHT}>
+      <g>
         <DataPointIndicator scale={scale} />
       </g>
-      <g transform={`translate(${margins.left}, ${margins.top})`}>
+      <g transform={`translate(0, ${MARGIN.top})`}>
         {(colorScale as ScaleQuantize<string>).range().map((c, i) => (
           <rect
             key={i}
             x={classesScale(i)}
-            y={0}
-            width={legendWidth / colorScale.range().length}
+            width={
+              (width - MARGIN.left - MARGIN.right) / colorScale.range().length
+            }
             height={COLOR_RAMP_HEIGHT}
-            fill={`${c}`}
+            fill={c}
           />
         ))}
       </g>
       <g
         ref={legendAxisRef}
         key="legend-axis"
-        transform={`translate(${margins.left}, ${
-          COLOR_RAMP_HEIGHT + margins.top + 2
-        })`}
+        transform={`translate(0, ${COLOR_RAMP_HEIGHT + MARGIN.top})`}
       />
     </svg>
   );
 };
 
 const ContinuousColorLegend = () => {
+  const width = useLegendWidth();
+
   const {
     areaLayer: { palette, dataDomain },
   } = useChartState() as MapState;
   const { legendLabelColor, labelFontSize, fontFamily } = useChartTheme();
   const formatNumber = useFormatNumber();
-  const width = useWidth();
-
-  const legendWidth = Math.min(width, WIDTH);
-  const margins = {
-    top: 6,
-    right: 4,
-    bottom: 14,
-    left: 4,
-  };
-  const scale = scaleLinear().domain(dataDomain).range([0, legendWidth]);
+  const scale = scaleLinear()
+    .domain(dataDomain)
+    .range([MARGIN.left, width - MARGIN.right]);
 
   return (
-    <svg
-      width={legendWidth + margins.left + margins.right}
-      height={COLOR_RAMP_HEIGHT + margins.top + margins.bottom}
-    >
-      <g transform={`translate(${margins.left}, ${0})`}>
+    <svg width={width} height={HEIGHT}>
+      <g>
         <DataPointIndicator scale={scale} />
       </g>
-      <g transform={`translate(${margins.left}, ${margins.top})`}>
-        <foreignObject
-          x={0}
-          y={0}
-          width={legendWidth}
+      <foreignObject
+        x={MARGIN.left}
+        y={1} // needed to align with other legends, not sure why
+        width={width - MARGIN.left - MARGIN.right}
+        height={COLOR_RAMP_HEIGHT}
+      >
+        <ColorRamp
+          width={width - MARGIN.left - MARGIN.right}
           height={COLOR_RAMP_HEIGHT}
-        >
-          <ColorRamp
-            colorInterpolator={getColorInterpolator(palette)}
-            nbClass={legendWidth}
-            width={legendWidth}
-            height={COLOR_RAMP_HEIGHT}
-          />
-        </foreignObject>
-      </g>
+          colorInterpolator={getColorInterpolator(palette)}
+          nbClass={width}
+        />
+      </foreignObject>
       <g
-        transform={`translate(${margins.left}, ${
-          COLOR_RAMP_HEIGHT + margins.top + margins.bottom
+        transform={`translate(${MARGIN.left}, ${
+          MARGIN.top + COLOR_RAMP_HEIGHT + 14
         })`}
+        fontFamily={fontFamily}
+        fontSize={labelFontSize}
+        fill={legendLabelColor}
       >
-        <text
-          x={0}
-          y={0}
-          textAnchor="start"
-          fontSize={labelFontSize}
-          fontFamily={fontFamily}
-          fill={legendLabelColor}
-        >
+        <text textAnchor="start" fontSize={labelFontSize}>
           {formatNumber(dataDomain[0])}
         </text>
-        <text
-          x={legendWidth}
-          y={0}
-          textAnchor="end"
-          fontSize={labelFontSize}
-          fontFamily={fontFamily}
-          fill={legendLabelColor}
-        >
+        <text x={width - MARGIN.right - MARGIN.left} textAnchor="end">
           {formatNumber(dataDomain[1])}
         </text>
       </g>
     </svg>
   );
 };
+
 const DataPointIndicator = ({
   scale,
 }: {
@@ -562,6 +544,7 @@ const DataPointIndicator = ({
     areaLayer: { getValue },
   } = useChartState() as MapState;
   const { labelColor } = useChartTheme();
+
   return (
     <>
       {state.interaction.d &&
@@ -569,7 +552,7 @@ const DataPointIndicator = ({
         !isNaN(getValue(state.interaction.d) ?? NaN) && (
           <polygon
             fill={labelColor}
-            points="-4,0 4,0 0,5"
+            points="-4,0 4,0 0,4"
             transform={`translate(${scale(
               getValue(state.interaction.d) ?? 0
             )}, 0)`}
@@ -578,6 +561,7 @@ const DataPointIndicator = ({
     </>
   );
 };
+
 const ColorRamp = ({
   colorInterpolator = interpolateOranges,
   nbClass,
@@ -594,6 +578,7 @@ const ColorRamp = ({
   useEffect(() => {
     const canvas = canvasRef.current;
     const context = canvas && canvas.getContext("2d");
+
     if (canvas && context) {
       context.clearRect(0, 0, width, height);
       canvas.style.imageRendering = "-moz-crisp-edges";
@@ -606,5 +591,5 @@ const ColorRamp = ({
     }
   });
 
-  return <canvas ref={canvasRef} />;
+  return <canvas ref={canvasRef} width={width} height={height} />;
 };
diff --git a/app/charts/map/map-state.tsx b/app/charts/map/map-state.tsx
index c0522313b..5ce2bd43d 100644
--- a/app/charts/map/map-state.tsx
+++ b/app/charts/map/map-state.tsx
@@ -14,61 +14,71 @@ import {
   ScaleThreshold,
   scaleThreshold,
 } from "d3";
-import { ReactNode, useCallback } from "react";
+import { ReactNode, useCallback, useMemo } from "react";
 import { ckmeans } from "simple-statistics";
 import {
   getColorInterpolator,
   getSingleHueSequentialPalette,
 } from "../../configurator/components/ui-helpers";
 import {
-  MapBaseLayer,
   MapFields,
+  MapSettings,
   PaletteType,
 } from "../../configurator/config-types";
-import { Observation } from "../../domain/data";
+import {
+  GeoData,
+  GeoFeature,
+  isGeoShapesDimension,
+  Observation,
+} from "../../domain/data";
+import {
+  useOptionalNumericVariable,
+  useStringVariable,
+} from "../shared/chart-helpers";
 import { ChartContext, ChartProps } from "../shared/use-chart-state";
 import { InteractionProvider } from "../shared/use-interaction";
 import { Bounds, Observer, useWidth } from "../shared/use-width";
+import { MapTooltipProvider } from "./map-tooltip";
 
-export type GeoData = {
-  cantons: GeoJSON.FeatureCollection | GeoJSON.Feature;
-  municipalities?: GeoJSON.FeatureCollection | GeoJSON.Feature;
-  municipalityMesh?: GeoJSON.MultiLineString;
-  cantonCentroids: { id: number; coordinates: [number, number] }[];
-  cantonMesh: GeoJSON.MultiLineString;
-  lakes: GeoJSON.FeatureCollection | GeoJSON.Feature;
-};
 export interface MapState {
   chartType: "map";
   bounds: Bounds;
-  data: Observation[];
   features: GeoData;
-  getFeatureLabel: (d: Observation | undefined) => string;
-  baseLayer: MapBaseLayer;
+  showRelief: boolean;
+  showLakes: boolean;
+  identicalLayerComponentIris: boolean;
   areaLayer: {
-    showAreaLayer: boolean;
-    areaMeasureLabel: string;
-    getColor: (x: number | undefined) => number[];
+    data: Observation[];
+    hierarchyLevel: number;
+    show: boolean;
+    measureLabel: string;
+    getLabel: (d: Observation) => string;
     getValue: (d: Observation) => number | null;
-    paletteType: PaletteType;
-    palette: string;
-    nbClass: number;
-    dataDomain: [number, number];
+    getColor: (x: number | null) => number[];
     colorScale:
       | ScaleSequential<string>
       | ScaleQuantize<string>
       | ScaleQuantile<string>
       | ScaleLinear<string, string>
       | ScaleThreshold<number, string>;
+    paletteType: PaletteType;
+    palette: string;
+    nbClass: number;
+    dataDomain: [number, number];
   };
   symbolLayer: {
-    symbolMeasureLabel: string;
-    showSymbolLayer: boolean;
+    data: Observation[];
+    hierarchyLevel: number;
+    show: boolean;
+    measureLabel: string;
+    getLabel: (d: Observation) => string;
+    getValue: (d: Observation) => number | null;
+    color: string;
     radiusScale: ScalePower<number, number>;
-    getRadius: (d: Observation) => number | null;
-    symbolColorScale: (x: number) => string;
+    dataDomain: [number, number];
   };
 }
+
 const getColorScale = ({
   paletteType,
   palette,
@@ -115,122 +125,175 @@ const getColorScale = ({
         .range([paletteDomain[0], paletteDomain[paletteDomain.length - 1]]);
   }
 };
+
 const useMapState = ({
   data,
   features,
   fields,
-  dimensions,
   measures,
-}: Pick<ChartProps, "data" | "dimensions" | "measures"> & {
+  dimensions,
+  settings,
+}: Pick<ChartProps, "data" | "measures" | "dimensions"> & {
   features: GeoData;
   fields: MapFields;
+  settings: MapSettings;
 }): MapState => {
   const width = useWidth();
+  const { areaLayer, symbolLayer } = fields;
+  const { palette, nbClass, paletteType } = areaLayer;
 
-  const { palette, nbClass, paletteType } = fields["areaLayer"];
-  const getValue = useCallback(
-    (d: Observation): number | null => {
-      const v = d[fields.areaLayer.componentIri];
-      return v !== null && v !== "..." // FIXME: && v !== "..." -> only used for the prototype and mock data
-        ? +v
-        : null;
+  const getAreaLabel = useStringVariable(areaLayer.componentIri);
+  const getSymbolLabel = useStringVariable(symbolLayer.componentIri);
+
+  const getAreaValue = useOptionalNumericVariable(areaLayer.measureIri);
+  const getSymbolValue = useOptionalNumericVariable(symbolLayer.measureIri);
+
+  const getDataByHierarchyLevel = useCallback(
+    ({
+      geoDimensionIri,
+      hierarchyLevel,
+      getLabel,
+    }: {
+      geoDimensionIri: string;
+      hierarchyLevel: number;
+      getLabel: (d: Observation) => string;
+    }) => {
+      const dimension = dimensions.find((d) => d.iri === geoDimensionIri);
+
+      // Right now hierarchies are only created for geoShapes
+      if (isGeoShapesDimension(dimension)) {
+        const hierarchyLabels = (
+          (dimension.geoShapes as any).topology.objects.shapes
+            .geometries as GeoFeature[]
+        )
+          .filter((d) => d.properties.hierarchyLevel === hierarchyLevel)
+          .map((d) => d.properties.label);
+
+        return data.filter((d) => hierarchyLabels.includes(getLabel(d)));
+      }
+
+      return data;
     },
-    [fields.areaLayer.componentIri]
+    [data, dimensions]
   );
 
-  const getFeatureLabel = useCallback(
-    (d: Observation | undefined): string =>
-      d ? `${d[fields.areaLayer.label.componentIri]}` : "",
-    [fields.areaLayer.label.componentIri]
+  const areaData = useMemo(
+    () =>
+      getDataByHierarchyLevel({
+        geoDimensionIri: areaLayer.componentIri,
+        hierarchyLevel: areaLayer.hierarchyLevel,
+        getLabel: getAreaLabel,
+      }),
+    [
+      areaLayer.componentIri,
+      areaLayer.hierarchyLevel,
+      getAreaLabel,
+      getDataByHierarchyLevel,
+    ]
   );
-  const getRadius = useCallback(
-    (d: Observation): number | null => {
-      const v = d[fields.symbolLayer.componentIri];
-      return v !== null && v !== "..." // FIXME: && v !== "..." -> only used for the prototype and mock data
-        ? +v
-        : null;
-    },
-    [fields.symbolLayer.componentIri]
+
+  const symbolData = useMemo(
+    () =>
+      getDataByHierarchyLevel({
+        geoDimensionIri: symbolLayer.componentIri,
+        hierarchyLevel: symbolLayer.hierarchyLevel,
+        getLabel: getSymbolLabel,
+      }),
+    [
+      symbolLayer.componentIri,
+      symbolLayer.hierarchyLevel,
+      getSymbolLabel,
+      getDataByHierarchyLevel,
+    ]
+  );
+
+  const identicalLayerComponentIris =
+    areaLayer.componentIri === symbolLayer.componentIri;
+
+  const areaMeasureLabel = useMemo(
+    () => measures.find((m) => m.iri === areaLayer.measureIri)?.label || "",
+    [areaLayer.measureIri, measures]
+  );
+  const symbolMeasureLabel = useMemo(
+    () => measures.find((m) => m.iri === symbolLayer.measureIri)?.label || "",
+    [symbolLayer.measureIri, measures]
   );
 
-  const areaMeasureLabel =
-    measures
-      .find((m) => m.iri === fields["areaLayer"].componentIri)
-      ?.label.split("_")[1] || "";
-  const symbolMeasureLabel =
-    measures
-      .find((m) => m.iri === fields["symbolLayer"].componentIri)
-      ?.label.split("_")[1] || "";
-  const dataDomain = (extent(data, (d) => getValue(d)) || [0, 100]) as [
-    number,
-    number
-  ];
+  const areaDataDomain = (extent(areaData, (d) => getAreaValue(d)) || [
+    0, 100,
+  ]) as [number, number];
+  const symbolDataDomain = (extent(symbolData, (d) => getSymbolValue(d)) || [
+    0, 100,
+  ]) as [number, number];
 
-  const colorScale = getColorScale({
+  const areaColorScale = getColorScale({
     paletteType,
     palette,
-    getValue,
-    data,
-    dataDomain,
+    getValue: getAreaValue,
+    data: areaData,
+    dataDomain: areaDataDomain,
     nbClass,
   });
-  const getColor = (v: number | undefined) => {
-    if (v === undefined) {
-      return [0, 0, 0];
+
+  const getAreaColor = (v: number | null) => {
+    if (v === null) {
+      return [0, 0, 0, 255 * 0.1];
     }
-    const c = colorScale && colorScale(v);
+
+    const c = areaColorScale && areaColorScale(v);
     const rgb = c && color(`${c}`)?.rgb();
+
     return rgb ? [rgb.r, rgb.g, rgb.b] : [0, 0, 0];
   };
 
-  const radiusExtent = extent(data, (d) => getRadius(d));
-  const radiusRange = radiusExtent[0] === 0 ? [0, 23] : [0, 23];
-  const radiusScale = scaleSqrt()
-    .domain(radiusExtent as [number, number])
-    .range(radiusRange);
-  const symbolColorScale = (x: number) => "#006699";
+  const radiusDomain = [0, symbolDataDomain[1]];
+  const radiusRange = [0, 24];
+  const radiusScale = scaleSqrt().domain(radiusDomain).range(radiusRange);
 
-  // Dimensions
-  const margins = {
-    top: 0,
-    right: 0,
-    bottom: 0,
-    left: 0,
-  };
-  const chartWidth = width - margins.left - margins.right;
-  const chartHeight = chartWidth * 0.5;
   const bounds = {
     width,
-    height: chartHeight + margins.top + margins.bottom,
-    margins,
-    chartWidth,
-    chartHeight,
+    height: width * 0.5,
+    margins: {
+      top: 0,
+      right: 0,
+      bottom: 0,
+      left: 0,
+    },
+    chartWidth: width,
+    chartHeight: width * 0.5,
   };
 
   return {
     chartType: "map",
-    data,
     features,
     bounds,
-    getFeatureLabel,
-    baseLayer: fields["baseLayer"],
+    showRelief: settings.showRelief,
+    showLakes: settings.showLakes,
+    identicalLayerComponentIris,
     areaLayer: {
-      areaMeasureLabel,
-      showAreaLayer: fields.areaLayer.show,
-      getColor,
-      getValue,
+      data: areaData,
+      hierarchyLevel: areaLayer.hierarchyLevel,
+      show: fields.areaLayer.show,
+      measureLabel: areaMeasureLabel,
+      getLabel: getAreaLabel,
+      getValue: getAreaValue,
+      getColor: getAreaColor,
+      colorScale: areaColorScale,
       paletteType,
       palette,
       nbClass: nbClass,
-      dataDomain,
-      colorScale,
+      dataDomain: areaDataDomain,
     },
     symbolLayer: {
-      symbolMeasureLabel,
-      showSymbolLayer: fields.symbolLayer.show,
+      data: symbolData,
+      hierarchyLevel: symbolLayer.hierarchyLevel,
+      color: fields.symbolLayer.color,
+      measureLabel: symbolMeasureLabel,
+      show: fields.symbolLayer.show,
+      getLabel: getSymbolLabel,
       radiusScale,
-      getRadius,
-      symbolColorScale,
+      getValue: getSymbolValue,
+      dataDomain: symbolDataDomain,
     },
   };
 };
@@ -239,19 +302,23 @@ const MapChartProvider = ({
   data,
   features,
   fields,
-  dimensions,
   measures,
+  dimensions,
+  settings,
   children,
-}: Pick<
-  ChartProps,
-  "data" | "dimensions" | "measures" // "interactiveFiltersConfig"
-> & { features: GeoData; children: ReactNode; fields: MapFields }) => {
+}: Pick<ChartProps, "data" | "measures" | "dimensions"> & {
+  features: GeoData;
+  children: ReactNode;
+  fields: MapFields;
+  settings: MapSettings;
+}) => {
   const state = useMapState({
     data,
     features,
     fields,
-    dimensions,
     measures,
+    dimensions,
+    settings,
   });
   return (
     <ChartContext.Provider value={state}>{children}</ChartContext.Provider>
@@ -262,28 +329,31 @@ export const MapChart = ({
   data,
   features,
   fields,
-  dimensions,
   measures,
+  dimensions,
+  settings,
   children,
-}: Pick<ChartProps, "data" | "dimensions" | "measures"> & {
+}: Pick<ChartProps, "data" | "measures" | "dimensions"> & {
   features: GeoData;
-
   fields: MapFields;
+  settings: MapSettings;
   children: ReactNode;
 }) => {
   return (
     <Observer>
       <InteractionProvider>
-        <MapChartProvider
-          data={data}
-          features={features}
-          fields={fields}
-          dimensions={dimensions}
-          measures={measures}
-          // interactiveFiltersConfig={interactiveFiltersConfig}
-        >
-          {children}
-        </MapChartProvider>
+        <MapTooltipProvider>
+          <MapChartProvider
+            data={data}
+            features={features}
+            fields={fields}
+            measures={measures}
+            dimensions={dimensions}
+            settings={settings}
+          >
+            {children}
+          </MapChartProvider>
+        </MapTooltipProvider>
       </InteractionProvider>
     </Observer>
   );
diff --git a/app/charts/map/map-tooltip.tsx b/app/charts/map/map-tooltip.tsx
index 67eaf7dfb..4d23c1f63 100644
--- a/app/charts/map/map-tooltip.tsx
+++ b/app/charts/map/map-tooltip.tsx
@@ -1,5 +1,13 @@
 import { hcl } from "d3";
 import * as React from "react";
+import {
+  createContext,
+  Dispatch,
+  ReactNode,
+  useContext,
+  useMemo,
+  useState,
+} from "react";
 import { Box, Grid, Text } from "theme-ui";
 import { useFormatNumber } from "../../configurator/components/ui-helpers";
 import { TooltipBox } from "../shared/interaction/tooltip-box";
@@ -7,20 +15,56 @@ import { useChartState } from "../shared/use-chart-state";
 import { useInteraction } from "../shared/use-interaction";
 import { MapState } from "./map-state";
 
+type HoverObjectType = "area" | "symbol";
+
+const MapTooltipStateContext = createContext<
+  [HoverObjectType, Dispatch<HoverObjectType>] | undefined
+>(undefined);
+
+export const useMapTooltip = () => {
+  const ctx = useContext(MapTooltipStateContext);
+
+  if (ctx === undefined) {
+    throw Error(
+      "You need to wrap your component in <MapTooltipProvider /> to useMapTooltip()"
+    );
+  }
+
+  return ctx;
+};
+
+export const MapTooltipProvider = ({ children }: { children: ReactNode }) => {
+  const [state, dispatch] = useState<HoverObjectType>("area");
+
+  return (
+    <MapTooltipStateContext.Provider value={[state, dispatch]}>
+      {children}
+    </MapTooltipStateContext.Provider>
+  );
+};
+
 export const MapTooltip = () => {
+  const [hoverObjectType] = useMapTooltip();
   const [{ interaction }] = useInteraction();
-  const {
-    getFeatureLabel,
-    areaLayer: { showAreaLayer, areaMeasureLabel, getValue, colorScale },
-    symbolLayer: {
-      showSymbolLayer,
-      symbolMeasureLabel,
-      getRadius,
-      symbolColorScale,
-    },
-  } = useChartState() as MapState;
+  const { identicalLayerComponentIris, areaLayer, symbolLayer } =
+    useChartState() as MapState;
 
   const formatNumber = useFormatNumber();
+  const areaLayerValue = useMemo(() => {
+    if (interaction.d) {
+      return areaLayer.getValue(interaction.d);
+    } else {
+      return null;
+    }
+  }, [areaLayer, interaction.d]);
+  const symbolLayerValue = useMemo(() => {
+    if (interaction.d) {
+      return symbolLayer.getValue(interaction.d);
+    } else {
+      return null;
+    }
+  }, [symbolLayer, interaction.d]);
+
   return (
     <>
       {interaction.mouse && interaction.d && (
@@ -32,7 +76,9 @@ export const MapTooltip = () => {
         >
           <Box sx={{ minWidth: 200 }}>
             <Text as="div" variant="meta" sx={{ fontWeight: "bold" }}>
-              {getFeatureLabel(interaction.d)}
+              {hoverObjectType === "area"
+                ? areaLayer.getLabel(interaction.d)
+                : symbolLayer.getLabel(interaction.d)}
             </Text>
             <Grid
               sx={{
@@ -43,66 +89,69 @@ export const MapTooltip = () => {
                 alignItems: "center",
               }}
             >
-              {showAreaLayer && getValue(interaction.d) !== null && (
+              {
                 <>
-                  <Text as="div" variant="meta">
-                    {areaMeasureLabel}
-                  </Text>
-                  <Box
-                    sx={{
-                      borderRadius: "circle",
-                      px: 2,
-                      display: "inline-block",
-                      textAlign: "center",
-                    }}
-                    style={{
-                      background:
-                        getValue(interaction.d) !== null
-                          ? colorScale(getValue(interaction.d) as number)
-                          : "transparent",
-                      color:
-                        getValue(interaction.d) !== null &&
-                        hcl(colorScale(getValue(interaction.d) as number)).l <
-                          55
-                          ? "#fff"
-                          : "#000",
-                    }}
-                  >
-                    <Text as="div" variant="meta">
-                      {formatNumber(getValue(interaction.d))}
-                    </Text>
-                  </Box>
-                </>
-              )}
-              {showSymbolLayer && getRadius(interaction.d) !== null && (
-                <>
-                  <Text as="div" variant="meta">
-                    {symbolMeasureLabel}
-                  </Text>
-                  <Box
-                    sx={{
-                      borderRadius: "circle",
-                      px: 2,
-                      display: "inline-block",
-                      textAlign: "center",
-                    }}
-                    style={{
-                      background:
-                        typeof getValue(interaction.d) === "number"
-                          ? symbolColorScale(getValue(interaction.d) as number)
-                          : "transparent",
-                    }}
-                  >
-                    <Text
-                      as="div"
-                      variant="meta"
-                      sx={{ color: "monochrome100" }}
-                    >
-                      {formatNumber(getRadius(interaction.d))}
-                    </Text>
-                  </Box>
+                  {areaLayer.show &&
+                    areaLayerValue !== null &&
+                    (identicalLayerComponentIris ||
+                      hoverObjectType === "area") && (
+                      <>
+                        <Text as="div" variant="meta">
+                          {areaLayer.measureLabel}
+                        </Text>
+                        <Box
+                          sx={{
+                            borderRadius: "circle",
+                            px: 2,
+                            display: "inline-block",
+                            textAlign: "center",
+                          }}
+                          style={{
+                            background: areaLayer.colorScale(areaLayerValue),
+                            color:
+                              hcl(areaLayer.colorScale(areaLayerValue)).l < 55
+                                ? "#fff"
+                                : "#000",
+                          }}
+                        >
+                          <Text as="div" variant="meta">
+                            {formatNumber(areaLayerValue)}
+                          </Text>
+                        </Box>
+                      </>
+                    )}
+
+                  {symbolLayer.show &&
+                    symbolLayerValue !== null &&
+                    (identicalLayerComponentIris ||
+                      hoverObjectType === "symbol") && (
+                      <>
+                        <Text as="div" variant="meta">
+                          {symbolLayer.measureLabel}
+                        </Text>
+                        <Box
+                          sx={{
+                            borderRadius: "circle",
+                            px: 2,
+                            display: "inline-block",
+                            textAlign: "center",
+                          }}
+                          style={{
+                            background: symbolLayer.color,
+                          }}
+                        >
+                          <Text
+                            as="div"
+                            variant="meta"
+                            sx={{ color: "monochrome100" }}
+                          >
+                            {formatNumber(symbolLayerValue)}
+                          </Text>
+                        </Box>
+                      </>
+                    )}
                 </>
-              )}
+              }
             </Grid>
           </Box>
         </TooltipBox>
diff --git a/app/charts/map/map.tsx b/app/charts/map/map.tsx
index 543414f3f..ea626b1f7 100644
--- a/app/charts/map/map.tsx
+++ b/app/charts/map/map.tsx
@@ -1,15 +1,16 @@
-import { HoverObject, MapController, WebMercatorViewport } from "@deck.gl/core";
-import { FillStyleExtension } from "@deck.gl/extensions";
+import { MapController, WebMercatorViewport } from "@deck.gl/core";
 import { TileLayer } from "@deck.gl/geo-layers";
 import { BitmapLayer, GeoJsonLayer, ScatterplotLayer } from "@deck.gl/layers";
 import DeckGL from "@deck.gl/react";
-import React, { useCallback, useState } from "react";
+import React, { useCallback, useMemo, useState } from "react";
 import { Box, Button } from "theme-ui";
-import { Observation } from "../../domain/data";
+import { GeoFeature, GeoPoint } from "../../domain/data";
 import { Icon, IconName } from "../../icons";
+import { convertHexToRgbArray } from "../shared/colors";
 import { useChartState } from "../shared/use-chart-state";
 import { useInteraction } from "../shared/use-interaction";
 import { MapState } from "./map-state";
+import { useMapTooltip } from "./map-tooltip";
 
 type TileData = {
   z: number;
@@ -19,6 +20,7 @@ type TileData = {
   bbox: { west: number; north: number; east: number; south: number };
   signal: { aborted: boolean };
 };
+
 const INITIAL_VIEW_STATE = {
   latitude: 46.8182,
   longitude: 8.2275,
@@ -86,13 +88,15 @@ const constrainZoom = (
 
 export const MapComponent = () => {
   const {
-    data,
-    baseLayer,
+    showRelief,
+    showLakes,
     features,
-    areaLayer: { showAreaLayer, getColor, getValue },
-    symbolLayer: { showSymbolLayer, radiusScale, getRadius },
+    identicalLayerComponentIris,
+    areaLayer,
+    symbolLayer,
   } = useChartState() as MapState;
-  const [, dispatch] = useInteraction();
+  const [, dispatchInteraction] = useInteraction();
+  const [, setMapTooltipType] = useMapTooltip();
 
   const [viewState, setViewState] = useState(INITIAL_VIEW_STATE);
 
@@ -112,6 +116,7 @@ export const MapComponent = () => {
     },
     [setViewState]
   );
+
   const zoomIn = () => {
     const newViewState = {
       ...viewState,
@@ -119,6 +124,7 @@ export const MapComponent = () => {
     };
     setViewState(constrainZoom(newViewState, CH_BBOX));
   };
+
   const zoomOut = () => {
     const newViewState = {
       ...viewState,
@@ -127,6 +133,22 @@ export const MapComponent = () => {
     setViewState(constrainZoom(newViewState, CH_BBOX));
   };
 
+  const symbolColorRgbArray = useMemo(
+    () => convertHexToRgbArray(symbolLayer.color),
+    [symbolLayer.color]
+  );
+
+  const shapes = useMemo(
+    () => ({
+      ...features.areaLayer?.shapes,
+      features: features.areaLayer?.shapes?.features.filter(
+        ({ properties: { hierarchyLevel } }: GeoFeature) =>
+          hierarchyLevel === areaLayer.hierarchyLevel
+      ),
+    }),
+    [areaLayer.hierarchyLevel, features.areaLayer?.shapes]
+  );
+
   return (
     <Box>
       <Box
@@ -141,22 +163,22 @@ export const MapComponent = () => {
           flexDirection: "column",
         }}
       >
-        <ZoomButton label="+" iconName="add" handleClick={zoomIn} />
-        <ZoomButton label="-" iconName="minus" handleClick={zoomOut} />
+        <ZoomButton iconName="add" handleClick={zoomIn} />
+        <ZoomButton iconName="minus" handleClick={zoomOut} />
       </Box>
       <DeckGL
         viewState={viewState}
         onViewStateChange={onViewStateChange}
         onResize={onResize}
         controller={{ type: MapController }}
+        getCursor={() => "default"}
       >
-        {baseLayer.relief && (
+        {showRelief && (
           <TileLayer
             getTileData={({ z, x, y }: TileData) =>
               `https://wmts.geo.admin.ch/1.0.0/ch.swisstopo.leichte-basiskarte_reliefschattierung/default/current/3857/${z}/${x}/${y}.png`
             }
-            pickable={true}
-            highlightColor={[60, 60, 60, 40]}
+            pickable={false}
             minZoom={2}
             maxZoom={16}
             tileSize={256}
@@ -174,79 +196,72 @@ export const MapComponent = () => {
             }}
           />
         )}
-        {/* <MVTLayer
-          data="https://vectortiles.geo.admin.ch/tiles/ch.swisstopo.leichte-basiskarte.vt/v1.0.0/{z}/{x}/{y}.pbf"
-          getLineColor={[192, 192, 192]}
-          getFillColor={[140, 170, 180, 0.1]}
-          lineWidthMinPixels={1}
-        /> */}
 
-        {showAreaLayer && (
+        {areaLayer.show && (
           <>
             <GeoJsonLayer
-              id="cantons"
-              data={features.cantons}
+              id="shapes"
+              data={shapes}
               pickable={true}
-              stroked={true}
+              autoHighlight={true}
+              stroked={false}
               filled={true}
               extruded={false}
-              autoHighlight={true}
-              getFillColor={(d: $FixMe) => {
-                const obs = data.find((x: Observation) => x.id === d.id);
-                return obs
-                  ? getColor(getValue(obs) ?? undefined)
-                  : [204, 204, 204, 100];
-              }}
-              onHover={({ x, y, object }: HoverObject) => {
-                if (object && object.id) {
-                  dispatch({
+              onHover={({
+                x,
+                y,
+                object,
+              }: {
+                x: number;
+                y: number;
+                object: GeoFeature;
+              }) => {
+                if (object) {
+                  setMapTooltipType("area");
+                  dispatchInteraction({
                     type: "INTERACTION_UPDATE",
                     value: {
                       interaction: {
                         visible: true,
                         mouse: { x, y },
-                        d: data.find((x: Observation) => x.id === object.id),
+                        d: object.properties.observation,
                       },
                     },
                   });
                 } else {
-                  dispatch({
+                  dispatchInteraction({
                     type: "INTERACTION_HIDE",
                   });
                 }
               }}
-              extensions={[new FillStyleExtension({ pattern: true })]}
-              highlightColor={[0, 0, 0, 50]}
-              getRadius={100}
-              getLineWidth={1}
-              updateTriggers={{ getFillColor: getColor, getFillPattern: data }}
-              fillPatternMask={true}
-              fillPatternAtlas="/static/sprite/sprite.png"
-              fillPatternMapping="/static/sprite/pattern.json"
-              getFillPattern={(d: $FixMe) => {
-                const obs = data.find((x: Observation) => x.id === d.id);
-                return obs && getValue(obs) === null ? "hatch" : "fill";
+              updateTriggers={{
+                getFillColor: [areaLayer.getValue, areaLayer.getColor],
               }}
-              getFillPatternScale={150}
-              getFillPatternOffset={[0, 0]}
+              getFillColor={(d: GeoFeature) =>
+                d.properties.observation
+                  ? areaLayer.getColor(
+                      areaLayer.getValue(d.properties.observation)
+                    )
+                  : null
+              }
             />
             <GeoJsonLayer
-              id="cantons-mesh"
-              data={features.cantonMesh}
+              id="shapes-mesh"
+              data={features.areaLayer?.mesh}
               pickable={false}
               stroked={true}
               filled={false}
               extruded={false}
-              lineWidthMinPixels={1.2}
-              lineWidthMaxPixels={3.6}
-              getLineWidth={200}
+              lineWidthMinPixels={1}
+              lineWidthMaxPixels={2}
+              getLineWidth={100}
               lineMiterLimit={1}
               getLineColor={[255, 255, 255]}
             />
           </>
         )}
 
-        {baseLayer.lakes && (
+        {showLakes && (
           <GeoJsonLayer
             id="lakes"
             data={features.lakes}
@@ -261,45 +276,64 @@ export const MapComponent = () => {
             getLineColor={[255, 255, 255]}
           />
         )}
-        {showSymbolLayer && (
+
+        {symbolLayer.show && (
           <ScatterplotLayer
-            id="cantons-centroids"
-            data={features.cantonCentroids}
-            pickable={true}
+            id="symbols"
+            data={features.symbolLayer?.points}
+            pickable={identicalLayerComponentIris ? !areaLayer.show : true}
+            autoHighlight={true}
             opacity={0.7}
             stroked={false}
             filled={true}
-            radiusScale={1}
             radiusUnits={"pixels"}
-            radiusMinPixels={radiusScale.range()[0]}
-            radiusMaxPixels={radiusScale.range()[1]}
+            radiusMinPixels={symbolLayer.radiusScale.range()[0]}
+            radiusMaxPixels={symbolLayer.radiusScale.range()[1]}
             lineWidthMinPixels={1}
-            getPosition={(d: $FixMe) => d.coordinates}
-            getRadius={(d: $FixMe) => {
-              const obs = data.find((x: Observation) => x.id === d.id);
-              return obs ? radiusScale(getRadius(obs) ?? 0) : 0;
-            }}
-            getFillColor={(d: $FixMe) => [0, 102, 153]}
-            getLineColor={(d: $FixMe) => [255, 255, 255]}
-            onHover={({ x, y, object }: HoverObject) => {
-              if (object && object.id) {
-                dispatch({
+            getPosition={({ coordinates }: GeoPoint) => coordinates}
+            getRadius={({ properties: { observation } }: GeoPoint) =>
+              observation
+                ? symbolLayer.radiusScale(
+                    symbolLayer.getValue(observation) as number
+                  )
+                : 0
+            }
+            getFillColor={symbolColorRgbArray}
+            getLineColor={[255, 255, 255]}
+            onHover={({
+              x,
+              y,
+              object,
+            }: {
+              x: number;
+              y: number;
+              object: GeoPoint;
+            }) => {
+              if (object) {
+                setMapTooltipType("symbol");
+                dispatchInteraction({
                   type: "INTERACTION_UPDATE",
                   value: {
                     interaction: {
                       visible: true,
                       mouse: { x, y },
-                      d: data.find((x: Observation) => x.id === object.id),
+                      d: object.properties.observation,
                     },
                   },
                 });
               } else {
-                dispatch({
+                dispatchInteraction({
                   type: "INTERACTION_HIDE",
                 });
               }
             }}
-            updateTriggers={{ getRadius: [data, getRadius] }}
+            updateTriggers={{
+              getRadius: [
+                symbolLayer.data,
+                symbolLayer.getValue,
+                symbolLayer.radiusScale,
+              ],
+            }}
           />
         )}
       </DeckGL>
@@ -308,11 +342,9 @@ export const MapComponent = () => {
 };
 
 const ZoomButton = ({
-  label,
   iconName,
   handleClick,
 }: {
-  label: string;
   iconName: IconName;
   handleClick: () => void;
 }) => (
diff --git a/app/charts/map/prototype-components.tsx b/app/charts/map/prototype-components.tsx
deleted file mode 100644
index a6c92146d..000000000
--- a/app/charts/map/prototype-components.tsx
+++ /dev/null
@@ -1,78 +0,0 @@
-import React, { ReactNode } from "react";
-import { Box, Text } from "theme-ui";
-import {
-  ControlTabButton,
-  ControlTabButtonInner,
-} from "../../configurator/components/chart-controls/control-tab";
-import { getIconName } from "../../configurator/components/ui-helpers";
-import { FieldProps } from "../../configurator/config-form";
-import { IconName } from "../../icons";
-import { Control } from "./chart-map-prototype";
-
-export const Label = ({
-  label,
-  disabled,
-  smaller = false,
-  children,
-}: {
-  label?: string | ReactNode;
-  disabled?: boolean;
-  smaller?: boolean;
-  children?: ReactNode;
-}) => (
-  <Text
-    sx={{
-      width: "auto",
-      color: disabled ? "monochrome500" : "monochrome700",
-      fontSize: smaller ? [2, 2, 2] : [4, 4, 4],
-      pb: smaller ? 1 : 0,
-      mr: 4,
-      my: 1,
-      display: "flex",
-      alignItems: "center",
-    }}
-  >
-    {label}
-  </Text>
-);
-
-// Light version of ControlTab (only for prototype)
-export const Tab = ({
-  value,
-  onClick,
-  iconName,
-  upperLabel,
-  lowerLabel,
-  checked,
-  disabled,
-}: {
-  disabled?: boolean;
-  onClick: (x: Control) => void;
-  value: Control;
-  upperLabel: ReactNode;
-  lowerLabel: string | ReactNode;
-  iconName?: IconName;
-} & FieldProps) => (
-  <Box
-    sx={{
-      width: "100%",
-      borderRadius: "default",
-      my: "2px",
-      pointerEvents: disabled ? "none" : "unset",
-    }}
-  >
-    <ControlTabButton
-      checked={checked}
-      value={value}
-      onClick={() => onClick(value)}
-    >
-      <ControlTabButtonInner
-        iconName={iconName ?? getIconName(value)}
-        upperLabel={upperLabel}
-        lowerLabel={lowerLabel}
-        checked={checked}
-        optional={disabled}
-      />
-    </ControlTabButton>
-  </Box>
-);
diff --git a/app/charts/map/prototype-right-controls.tsx b/app/charts/map/prototype-right-controls.tsx
deleted file mode 100644
index 795829adf..000000000
--- a/app/charts/map/prototype-right-controls.tsx
+++ /dev/null
@@ -1,268 +0,0 @@
-import { t, Trans } from "@lingui/macro";
-import React from "react";
-import { Box } from "theme-ui";
-import { Checkbox, Radio, Select } from "../../components/form";
-import { PaletteType } from "../../configurator";
-import { ControlSection } from "../../configurator/components/chart-controls/section";
-import { DimensionMetaDataFragment } from "../../graphql/query-hooks";
-import { ActiveLayer, Control } from "./chart-map-prototype";
-import { Label } from "./prototype-components";
-
-export const PrototypeRightControls = ({
-  activeControl,
-  activeLayers,
-  updateActiveLayers,
-  measures,
-  measure,
-  setMeasure,
-  palette,
-  setPalette,
-  paletteType,
-  setPaletteType,
-  nbClass,
-  setNbClass,
-  symbolMeasure,
-  setSymbolMeasure,
-}: {
-  activeControl: Control;
-  activeLayers: ActiveLayer;
-  updateActiveLayers: (x: keyof ActiveLayer) => void;
-  measures: DimensionMetaDataFragment[];
-  measure: string;
-  setMeasure: (x: string) => void;
-  palette: string;
-  setPalette: (x: string) => void;
-  paletteType: string;
-  setPaletteType: (x: PaletteType) => void;
-  nbClass: number;
-  setNbClass: (x: number) => void;
-  symbolMeasure: string;
-  setSymbolMeasure: (x: string) => void;
-}) => {
-  if (activeControl === "baseLayer") {
-    return (
-      <>
-        <ControlSection>
-          <Box sx={{ p: 4 }}>
-            <Checkbox
-              label={t({
-                id: "chart.map.layers.base.relief",
-                message: "Relief",
-              })}
-              name={"relief"}
-              value={"relief"}
-              checked={activeLayers.relief}
-              disabled={false}
-              onChange={() => updateActiveLayers("relief")}
-            />
-            <Checkbox
-              label={t({ id: "chart.map.layers.base.lakes", message: "Lakes" })}
-              name={"lakes"}
-              value={"lakes"}
-              checked={activeLayers.lakes}
-              disabled={false}
-              onChange={() => updateActiveLayers("lakes")}
-            />
-          </Box>
-        </ControlSection>
-      </>
-    );
-  } else if (activeControl === "areaLayer") {
-    return (
-      <>
-        <ControlSection>
-          <Box sx={{ p: 4 }}>
-            <Checkbox
-              label={t({
-                id: "chart.map.layers.area.add.data",
-                message: "Map data",
-              })}
-              name={"areaLayer"}
-              value={"areaLayer"}
-              checked={activeLayers.areaLayer}
-              disabled={false}
-              onChange={() => updateActiveLayers("areaLayer")}
-            />
-          </Box>
-        </ControlSection>
-        <ControlSection>
-          <Box sx={{ p: 4 }}>
-            <Select
-              label={t({
-                id: "chart.map.layers.area.select.measure",
-                message: "Select a measure to map",
-              })}
-              id={"measure-select"}
-              name={"measure-select"}
-              value={measure}
-              disabled={!activeLayers.areaLayer}
-              options={measures.map((m) => ({
-                value: m.iri,
-                label: m.label.split("_")[1],
-              }))}
-              onChange={(e) => setMeasure(e.currentTarget.value)}
-            />
-          </Box>
-        </ControlSection>
-        <ControlSection>
-          <Box sx={{ p: 4 }}>
-            <Select
-              label={t({
-                id: "chart.map.layers.area.color.palette",
-                message: "Color palette",
-              })}
-              id={"palette"}
-              name={"palette"}
-              value={palette}
-              disabled={!activeLayers.areaLayer}
-              options={[
-                { value: "oranges", label: "oranges" },
-                { value: "reds", label: "reds" },
-                { value: "purples", label: "purples" },
-                { value: "greens", label: "greens" },
-                { value: "blues", label: "blues" },
-                { value: "greys", label: "greys" },
-              ]}
-              onChange={(e) => setPalette(e.currentTarget.value)}
-            ></Select>
-          </Box>
-        </ControlSection>
-        <ControlSection>
-          <Box sx={{ p: 4 }}>
-            <Label
-              label={t({
-                id: "chart.map.layers.area.discretization.continuous",
-                message: "Continuous",
-              })}
-              smaller
-            ></Label>
-            <Radio
-              label={t({
-                id: "chart.map.layers.area.discretization.linear",
-                message: "Linear interpolation",
-              })}
-              name={"continuous"}
-              value={"continuous"}
-              checked={paletteType === "continuous"}
-              disabled={!activeLayers.areaLayer}
-              onChange={(e) => {
-                setPaletteType(e.currentTarget.value as PaletteType);
-              }}
-            />
-            <Label
-              label={t({
-                id: "chart.map.layers.area.discretization.discrete",
-                message: "Discrete",
-              })}
-              smaller
-            ></Label>
-            <Radio
-              label={t({
-                id: "chart.map.layers.area.discretization.quantize",
-                message: "Quantize (equal intervals)",
-              })}
-              name={"discrete"}
-              value={"discrete"}
-              checked={paletteType === "discrete"}
-              disabled={!activeLayers.areaLayer}
-              onChange={(e) =>
-                setPaletteType(e.currentTarget.value as PaletteType)
-              }
-            />
-            <Radio
-              label={t({
-                id: "chart.map.layers.area.discretization.quantiles",
-                message: "Quantiles (equal frequency)",
-              })}
-              name={"quantile"}
-              value={"quantile"}
-              checked={paletteType === "quantile"}
-              disabled={!activeLayers.areaLayer}
-              onChange={(e) =>
-                setPaletteType(e.currentTarget.value as PaletteType)
-              }
-            />
-            <Radio
-              label={t({
-                id: "chart.map.layers.area.discretization.jenks",
-                message: "Jenks (natural breaks)",
-              })}
-              name={"jenks"}
-              value={"jenks"}
-              checked={paletteType === "jenks"}
-              disabled={!activeLayers.areaLayer}
-              onChange={(e) =>
-                setPaletteType(e.currentTarget.value as PaletteType)
-              }
-            />
-            <Select
-              label={t({
-                id: "chart.map.layers.area.discretization.number.class",
-                message: "Number of classes",
-              })}
-              id={"nbClass"}
-              name={"nbClass"}
-              value={`${nbClass}`}
-              disabled={!activeLayers.areaLayer || paletteType === "continuous"}
-              options={[
-                { value: "3", label: "3" },
-                { value: "4", label: "4" },
-                { value: "5", label: "5" },
-                { value: "6", label: "6" },
-                { value: "7", label: "7" },
-                { value: "8", label: "8" },
-                { value: "9", label: "9" },
-              ]}
-              onChange={(e) => setNbClass(+e.currentTarget.value)}
-            ></Select>
-          </Box>
-        </ControlSection>
-      </>
-    );
-  } else if (activeControl === "symbolLayer") {
-    return (
-      <>
-        <ControlSection>
-          <Box sx={{ p: 4 }}>
-            <Checkbox
-              label={t({
-                id: "chart.map.layers.symbol.add.symbols",
-                message: "Add proportional circles",
-              })}
-              name={"symbolLayer"}
-              value={"symbolLayer"}
-              checked={activeLayers.symbolLayer}
-              disabled={false}
-              onChange={() => updateActiveLayers("symbolLayer")}
-            />
-          </Box>
-        </ControlSection>
-        <ControlSection>
-          <Box sx={{ p: 4 }}>
-            <Select
-              label={t({
-                id: "chart.map.layers.symbol.select.measure",
-                message: "Select a measure",
-              })}
-              id={"symbol-measure-select"}
-              name={"symbol-measure-select"}
-              value={symbolMeasure}
-              disabled={!activeLayers.symbolLayer}
-              options={measures.map((m) => ({
-                value: m.iri,
-                label: m.label.split("_")[1],
-              }))}
-              onChange={(e) => setSymbolMeasure(e.currentTarget.value)}
-            />
-          </Box>
-        </ControlSection>
-      </>
-    );
-  } else {
-    return (
-      <Trans id="chart.map.layers.no.selected">
-        Select a layer to edit in the left panel.
-      </Trans>
-    );
-  }
-};
diff --git a/app/charts/shared/chart-helpers.tsx b/app/charts/shared/chart-helpers.tsx
index a4ae41eff..b0b03114d 100644
--- a/app/charts/shared/chart-helpers.tsx
+++ b/app/charts/shared/chart-helpers.tsx
@@ -160,15 +160,18 @@ export const useTemporalVariable = (
   return getVariable;
 };
 
+const getSegment =
+  (segmentKey: string | undefined) =>
+  (d: Observation): string =>
+    segmentKey ? `${d[segmentKey]}` : "segment";
+
 export const useSegment = (
   segmentKey: string | undefined
 ): ((d: Observation) => string) => {
-  const getSegment = useCallback(
-    (d: Observation): string => (segmentKey ? `${d[segmentKey]}` : "segment"),
+  return useCallback(
+    (d: Observation) => getSegment(segmentKey)(d),
     [segmentKey]
   );
-
-  return getSegment;
 };
 
 // Stacking helpers.
@@ -333,17 +336,22 @@ export const useImputationNeeded = ({
   chartConfig: ChartConfig;
   data?: Array<Observation>;
 }): boolean => {
-  const getSegment = useSegment(chartConfig.fields.segment?.componentIri);
   const imputationNeeded = useMemo(() => {
     if (isAreaConfig(chartConfig) && data) {
       return checkForMissingValuesInSegments(
         group(data, (d) => d[chartConfig.fields.x.componentIri] as string),
-        [...new Set(data.map((d) => getSegment(d)))]
+        [
+          ...new Set(
+            data.map((d) =>
+              getSegment(chartConfig.fields.segment?.componentIri)(d)
+            )
+          ),
+        ]
       );
     } else {
       return false;
     }
-  }, [chartConfig, data, getSegment]);
+  }, [chartConfig, data]);
 
   return imputationNeeded;
 };
diff --git a/app/charts/shared/colors.tsx b/app/charts/shared/colors.tsx
new file mode 100644
index 000000000..56a3a8dee
--- /dev/null
+++ b/app/charts/shared/colors.tsx
@@ -0,0 +1,7 @@
+import { color, RGBColor } from "d3";
+
+export const convertHexToRgbArray = (hex: string): [number, number, number] => {
+  const { r, g, b } = color(hex) as RGBColor;
+
+  return [r, g, b];
+};
diff --git a/app/charts/shared/use-sync-interactive-filters.tsx b/app/charts/shared/use-sync-interactive-filters.tsx
index 23d2e19a4..64693f9e6 100644
--- a/app/charts/shared/use-sync-interactive-filters.tsx
+++ b/app/charts/shared/use-sync-interactive-filters.tsx
@@ -1,5 +1,9 @@
-import { useEffect } from "react";
-import { ChartConfig, FilterValueSingle } from "../../configurator";
+import { useEffect, useMemo } from "react";
+import {
+  ChartConfig,
+  FilterValueSingle,
+  isSegmentInConfig,
+} from "../../configurator";
 import { parseDate } from "../../configurator/components/ui-helpers";
 import { FIELD_VALUE_NONE } from "../../configurator/constants";
 import useFilterChanges from "../../configurator/use-filter-changes";
@@ -81,13 +85,19 @@ const useSyncInteractiveFilters = (chartConfig: ChartConfig) => {
     }
   }, [changes, dispatch]);
 
+  // Maybe it should be more generic?
+  const interactiveCategoriesResetTrigger = useMemo(
+    () => (isSegmentInConfig(chartConfig) ? chartConfig.fields.segment : null),
+    [chartConfig]
+  );
+
   // Interactive legend
   // Reset categories to avoid categories with the same
   // name to persist as filters across different dimensions
   // i.e. Jura as forest zone != Jura as canton.
   useEffect(
     () => dispatch({ type: "RESET_INTERACTIVE_CATEGORIES" }),
-    [dispatch, chartConfig.fields.segment]
+    [dispatch, interactiveCategoriesResetTrigger]
   );
 };
 
diff --git a/app/components/chart-preview.tsx b/app/components/chart-preview.tsx
index 4993c72f6..9dfaaf786 100644
--- a/app/components/chart-preview.tsx
+++ b/app/components/chart-preview.tsx
@@ -5,6 +5,7 @@ import { ChartAreasVisualization } from "../charts/area/chart-area";
 import { ChartBarsVisualization } from "../charts/bar/chart-bar";
 import { ChartColumnsVisualization } from "../charts/column/chart-column";
 import { ChartLinesVisualization } from "../charts/line/chart-lines";
+import { ChartMapVisualization } from "../charts/map/chart-map";
 import { ChartPieVisualization } from "../charts/pie/chart-pie";
 import { ChartScatterplotVisualization } from "../charts/scatterplot/chart-scatterplot";
 import { ChartDataFilters } from "../charts/shared/chart-data-filters";
@@ -18,6 +19,7 @@ import {
   isBarConfig,
   isColumnConfig,
   isLineConfig,
+  isMapConfig,
   isPieConfig,
   isScatterPlotConfig,
   isTableConfig,
@@ -215,6 +217,13 @@ const Chart = ({
           chartConfig={chartConfig}
         />
       )}
+      {isMapConfig(chartConfig) && (
+        <ChartMapVisualization
+          dataSetIri={dataSet}
+          chartConfig={chartConfig}
+          queryFilters={queryFilters}
+        />
+      )}
     </>
   );
 };
diff --git a/app/components/chart-published.tsx b/app/components/chart-published.tsx
index ff58c058f..6a4e7693d 100644
--- a/app/components/chart-published.tsx
+++ b/app/components/chart-published.tsx
@@ -6,6 +6,7 @@ import { ChartAreasVisualization } from "../charts/area/chart-area";
 import { ChartBarsVisualization } from "../charts/bar/chart-bar";
 import { ChartColumnsVisualization } from "../charts/column/chart-column";
 import { ChartLinesVisualization } from "../charts/line/chart-lines";
+import { ChartMapVisualization } from "../charts/map/chart-map";
 import { ChartPieVisualization } from "../charts/pie/chart-pie";
 import { ChartScatterplotVisualization } from "../charts/scatterplot/chart-scatterplot";
 import { ChartDataFilters } from "../charts/shared/chart-data-filters";
@@ -144,6 +145,7 @@ const ChartWithInteractiveFilters = ({
     if (presetFrom && presetTo) {
       dispatch({ type: "ADD_TIME_FILTER", value: [presetFrom, presetTo] });
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [dispatch, presetFromStr, presetToStr]);
 
   return (
@@ -193,7 +195,7 @@ const getChart = ({
     case "table":
       return <ChartTableVisualization {...props} chartConfig={chartConfig} />;
     case "map":
-      return null;
+      return <ChartMapVisualization {...props} chartConfig={chartConfig} />;
     default:
       const _exhaustiveCheck: never = chartConfig;
       return _exhaustiveCheck;
diff --git a/app/configurator/components/chart-configurator.tsx b/app/configurator/components/chart-configurator.tsx
index 9a26c2a3c..811c024b3 100644
--- a/app/configurator/components/chart-configurator.tsx
+++ b/app/configurator/components/chart-configurator.tsx
@@ -1,8 +1,10 @@
 import { Trans } from "@lingui/macro";
 import * as React from "react";
+import { Box } from "theme-ui";
 import { ChartConfig, ConfiguratorStateConfiguringChart } from "..";
-import { chartConfigOptionsUISpec } from "../../charts/chart-config-ui-options";
 import { getFieldComponentIris } from "../../charts";
+import { chartConfigOptionsUISpec } from "../../charts/chart-config-ui-options";
+import { Loading } from "../../components/hint";
 import { useDataCubeMetadataWithComponentValuesQuery } from "../../graphql/query-hooks";
 import { DataCubeMetadata } from "../../graphql/types";
 import { useLocale } from "../../locales/use-locale";
@@ -12,12 +14,10 @@ import {
   SectionTitle,
 } from "./chart-controls/section";
 import {
-  DataFilterSelect,
   ControlTabField,
+  DataFilterSelect,
   DataFilterSelectTime,
 } from "./field";
-import { Loading } from "../../components/hint";
-import { Box } from "theme-ui";
 
 export const ChartConfigurator = ({
   state,
@@ -127,11 +127,10 @@ const ChartFields = ({
   chartConfig: ChartConfig;
   metaData: DataCubeMetadata;
 }) => {
+  const { chartType } = chartConfig;
   const { dimensions, measures } = metaData;
-
   const components = [...dimensions, ...measures];
 
-  const { chartType } = chartConfig;
   return (
     <>
       {chartConfigOptionsUISpec[chartType].encodings.map((encoding) => {
@@ -143,8 +142,7 @@ const ChartFields = ({
             component={components.find(
               (d) =>
                 d.iri ===
-                chartConfig.fields[encodingField as "y" | "segment"]
-                  ?.componentIri
+                (chartConfig.fields as any)[encodingField]?.componentIri
             )}
             value={encoding.field}
             labelId={`${chartConfig.chartType}.${encoding.field}`}
diff --git a/app/configurator/components/chart-controls/color-picker.tsx b/app/configurator/components/chart-controls/color-picker.tsx
index 2d44500c4..6f6c5c256 100644
--- a/app/configurator/components/chart-controls/color-picker.tsx
+++ b/app/configurator/components/chart-controls/color-picker.tsx
@@ -43,6 +43,7 @@ type Props = {
   selectedColor: string;
   colors: readonly string[];
   onChange?: (color: string) => void;
+  disabled?: boolean;
 };
 
 export const ColorPicker = ({ selectedColor, colors, onChange }: Props) => {
@@ -148,9 +149,11 @@ export const ColorPickerMenu = (props: Props) => {
           "> button[aria-expanded]": {
             borderColor: "primaryActive",
           },
+          opacity: props.disabled ? 0.5 : 1,
+          pointerEvents: props.disabled ? "none" : "auto",
         }}
       >
-        <MenuButton className="menu-button">
+        <MenuButton className="menu-button" disabled={props.disabled}>
           <VisuallyHidden>
             <Trans id="controls.colorpicker.open">Open Color Picker</Trans>
           </VisuallyHidden>
diff --git a/app/configurator/components/chart-options-selector.tsx b/app/configurator/components/chart-options-selector.tsx
index 6b216ae82..0115494f3 100644
--- a/app/configurator/components/chart-options-selector.tsx
+++ b/app/configurator/components/chart-options-selector.tsx
@@ -8,6 +8,7 @@ import {
   ImputationType,
   imputationTypes,
   isAreaConfig,
+  isMapConfig,
   isTableConfig,
   SortingType,
   useConfiguratorState,
@@ -29,6 +30,7 @@ import {
 } from "../../graphql/query-hooks";
 import { DataCubeMetadata } from "../../graphql/types";
 import { useLocale } from "../../locales/use-locale";
+import { MapColumnOptions } from "../map/map-chart-options";
 import { TableColumnOptions } from "../table/table-chart-options";
 import { ColorPalette } from "./chart-controls/color-palette";
 import {
@@ -87,6 +89,8 @@ export const ChartOptionsSelector = ({
         {state.activeField ? (
           isTableConfig(state.chartConfig) ? (
             <TableColumnOptions state={state} metaData={meta} />
+          ) : isMapConfig(state.chartConfig) ? (
+            <MapColumnOptions state={state} metaData={meta} />
           ) : (
             <ActiveFieldSwitch
               state={state}
@@ -169,10 +173,19 @@ const EncodingOptionsPanel = ({
   const getFieldLabelHint = {
     x: t({ id: "controls.select.dimension", message: "Select a dimension" }),
     y: t({ id: "controls.select.measure", message: "Select a measure" }),
+    areaLayer: t({
+      id: "controls.select.measure",
+      message: "Select a measure",
+    }),
+    symbolLayer: t({
+      id: "controls.select.measure",
+      message: "Select a measure",
+    }),
     segment: t({
       id: "controls.select.dimension",
       message: "Select a dimension",
     }),
+    settings: t({ id: "controls.settings", message: "Settings" }),
   };
 
   useEffect(() => {
@@ -182,13 +195,11 @@ const EncodingOptionsPanel = ({
   }, [field]);
 
   const { fields } = state.chartConfig;
-
-  type AnyField = "y";
   const otherFields = Object.keys(fields).filter(
-    (f) => fields[f as AnyField].hasOwnProperty("componentIri") && field !== f
+    (f) => (fields as any)[f].hasOwnProperty("componentIri") && field !== f
   );
   const otherFieldsIris = otherFields.map(
-    (f) => fields[f as AnyField].componentIri
+    (f) => (fields as any)[f].componentIri
   );
 
   return (
diff --git a/app/configurator/components/chart-type-selector.tsx b/app/configurator/components/chart-type-selector.tsx
index 412a4ae52..53444f72d 100644
--- a/app/configurator/components/chart-type-selector.tsx
+++ b/app/configurator/components/chart-type-selector.tsx
@@ -118,11 +118,7 @@ export const ChartTypeSelector = ({
 
   if (data?.dataCubeByIri) {
     const metaData = data.dataCubeByIri;
-
-    const possibleChartTypes = getPossibleChartType({
-      chartTypes: enabledChartTypes,
-      meta: metaData,
-    });
+    const possibleChartTypes = getPossibleChartType({ meta: metaData });
 
     return (
       <Box as="fieldset">
diff --git a/app/configurator/components/field.tsx b/app/configurator/components/field.tsx
index 0bba025b7..2b9632d96 100644
--- a/app/configurator/components/field.tsx
+++ b/app/configurator/components/field.tsx
@@ -447,10 +447,12 @@ export const ColorPickerField = ({
   field,
   path,
   label,
+  disabled,
 }: {
   field: string;
   path: string;
   label: ReactNode;
+  disabled?: boolean;
 }) => {
   const [state, dispatch] = useConfiguratorState();
 
@@ -483,11 +485,14 @@ export const ColorPickerField = ({
         width: "100%",
       }}
     >
-      <Label htmlFor="xyz">{label}</Label>
+      <Label htmlFor="xyz" disabled={disabled}>
+        {label}
+      </Label>
       <ColorPickerMenu
         colors={getPalette()}
         selectedColor={color}
         onChange={(c) => updateColor(c)}
+        disabled={disabled}
       />
     </Flex>
   );
diff --git a/app/configurator/components/ui-helpers.ts b/app/configurator/components/ui-helpers.ts
index b9000e1aa..24db782c3 100644
--- a/app/configurator/components/ui-helpers.ts
+++ b/app/configurator/components/ui-helpers.ts
@@ -396,6 +396,18 @@ const fieldLabels = {
     id: "controls.column.grouped",
     message: "Grouped",
   }),
+  "controls.map.settings": defineMessage({
+    id: "controls.map.settings",
+    message: "Base layers",
+  }),
+  "controls.map.layer.area": defineMessage({
+    id: "controls.map.layer.area",
+    message: "Area layer",
+  }),
+  "controls.map.layer.symbol": defineMessage({
+    id: "controls.map.layer.symbol",
+    message: "Symbol layer",
+  }),
   "controls.sorting.sortBy": defineMessage({
     id: "controls.sorting.sortBy",
     message: "Sort by",
@@ -526,6 +538,12 @@ export function getFieldLabel(field: string): string {
     case "pie.segment":
     case "segment":
       return i18n._(fieldLabels["controls.color"]);
+    case "map.settings":
+      return i18n._(fieldLabels["controls.map.settings"]);
+    case "map.areaLayer":
+      return i18n._(fieldLabels["controls.map.layer.area"]);
+    case "map.symbolLayer":
+      return i18n._(fieldLabels["controls.map.layer.symbol"]);
     case "title":
       return i18n._(fieldLabels["controls.title"]);
     case "description":
diff --git a/app/configurator/config-types.ts b/app/configurator/config-types.ts
index a6f9350f5..07fc40419 100644
--- a/app/configurator/config-types.ts
+++ b/app/configurator/config-types.ts
@@ -9,6 +9,8 @@ const ComponentType = t.union([
   t.literal("TemporalDimension"),
   t.literal("NominalDimension"),
   t.literal("OrdinalDimension"),
+  t.literal("GeoCoordinatesDimension"),
+  t.literal("GeoShapesDimension"),
 ]);
 
 export type ComponentType = t.TypeOf<typeof ComponentType>;
@@ -443,17 +445,11 @@ const PaletteType = t.union([
 ]);
 export type PaletteType = t.TypeOf<typeof PaletteType>;
 
-const MapBaseLayer = t.type({
-  componentIri: t.string, // FIXME: we don't need this
-  relief: t.boolean,
-  lakes: t.boolean,
-});
-export type MapBaseLayer = t.TypeOf<typeof MapBaseLayer>;
-
 const MapAreaLayer = t.type({
-  show: t.boolean,
-  label: GenericField,
   componentIri: t.string,
+  measureIri: t.string,
+  hierarchyLevel: t.number,
+  show: t.boolean,
   palette: t.string,
   paletteType: PaletteType,
   nbClass: t.number,
@@ -461,18 +457,22 @@ const MapAreaLayer = t.type({
 export type MapAreaLayer = t.TypeOf<typeof MapAreaLayer>;
 
 const MapSymbolLayer = t.type({
-  show: t.boolean,
   componentIri: t.string,
+  measureIri: t.string,
+  hierarchyLevel: t.number,
+  color: t.string,
+  show: t.boolean,
 });
 export type MapSymbolLayer = t.TypeOf<typeof MapSymbolLayer>;
 
+const MapSettings = t.type({
+  showRelief: t.boolean,
+  showLakes: t.boolean,
+});
+export type MapSettings = t.TypeOf<typeof MapSettings>;
 const MapFields = t.type({
-  baseLayer: MapBaseLayer,
   areaLayer: MapAreaLayer,
   symbolLayer: MapSymbolLayer,
-  x: GenericField,
-  y: GenericField,
-  segment: GenericField,
 });
 
 const MapConfig = t.type(
@@ -481,6 +481,7 @@ const MapConfig = t.type(
     interactiveFiltersConfig: InteractiveFiltersConfig,
     filters: Filters,
     fields: MapFields,
+    settings: MapSettings,
   },
   "MapConfig"
 );
@@ -575,6 +576,19 @@ export const isMapConfig = (
   return chartConfig.chartType === "map";
 };
 
+export const isSegmentInConfig = (
+  chartConfig: ChartConfig
+): chartConfig is
+  | AreaConfig
+  | BarConfig
+  | ColumnConfig
+  | LineConfig
+  | ScatterPlotConfig
+  | PieConfig
+  | TableConfig => {
+  return !isTableConfig(chartConfig) && !isMapConfig(chartConfig);
+};
+
 const Config = t.type(
   {
     dataSet: t.string,
diff --git a/app/configurator/configurator-state.tsx b/app/configurator/configurator-state.tsx
index 8def4e180..0935ca4e0 100644
--- a/app/configurator/configurator-state.tsx
+++ b/app/configurator/configurator-state.tsx
@@ -10,7 +10,12 @@ import {
 } from "react";
 import { Client, useClient } from "urql";
 import { Reducer, useImmerReducer } from "use-immer";
-import { ImputationType, isAreaConfig, isColumnConfig } from ".";
+import {
+  ImputationType,
+  isAreaConfig,
+  isColumnConfig,
+  isSegmentInConfig,
+} from ".";
 import { fetchChartConfig, saveChartConfig } from "../api";
 import {
   getFieldComponentIris,
@@ -555,18 +560,18 @@ const reducer: Reducer<ConfiguratorState, ConfiguratorStateAction> = (
               });
             // FIXME: This should be more chart specific
             // (no "stacked" for scatterplots for instance)
-            // Filter for table to make TS happy :/
-            // if (draft.chartConfig.chartType !== "table") {
-            draft.chartConfig.fields.segment = {
-              componentIri: action.value.componentIri,
-              palette: "category10",
-              type: "stacked",
-              sorting: {
-                sortingType: "byDimensionLabel",
-                sortingOrder: "asc",
-              },
-              colorMapping: colorMapping,
-            };
+            if (isSegmentInConfig(draft.chartConfig)) {
+              draft.chartConfig.fields.segment = {
+                componentIri: action.value.componentIri,
+                palette: "category10",
+                type: "stacked",
+                sorting: {
+                  sortingType: "byDimensionLabel",
+                  sortingOrder: "asc",
+                },
+                colorMapping: colorMapping,
+              };
+            }
 
             // Remove this component from the interactive filter, if it is there
             if (draft.chartConfig.interactiveFiltersConfig) {
diff --git a/app/configurator/map/map-chart-options.tsx b/app/configurator/map/map-chart-options.tsx
new file mode 100644
index 000000000..debc92794
--- /dev/null
+++ b/app/configurator/map/map-chart-options.tsx
@@ -0,0 +1,370 @@
+import { t, Trans } from "@lingui/macro";
+import React, { memo, useMemo } from "react";
+import { ConfiguratorStateConfiguringChart, MapConfig } from "..";
+import { FieldSetLegend } from "../../components/form";
+import {
+  GeoFeature,
+  getGeoDimensions,
+  getGeoShapesDimensions,
+} from "../../domain/data";
+import { GeoShapesDimension } from "../../graphql/query-hooks";
+import { DataCubeMetadata } from "../../graphql/types";
+import {
+  ControlSection,
+  ControlSectionContent,
+  SectionTitle,
+} from "../components/chart-controls/section";
+import {
+  ChartOptionCheckboxField,
+  ChartOptionRadioField,
+  ChartOptionSelectField,
+  ColorPickerField,
+} from "../components/field";
+
+const NUMBER_OF_CLASSES_OPTIONS = Array.from(
+  { length: 7 },
+  (_, i) => i + 3
+).map((d) => ({
+  value: d,
+  label: `${d}`,
+}));
+
+export const MapColumnOptions = ({
+  state,
+  metaData,
+}: {
+  state: ConfiguratorStateConfiguringChart;
+  metaData: DataCubeMetadata;
+}) => {
+  const chartConfig = state.chartConfig as MapConfig;
+  const { activeField } = state;
+
+  switch (activeField) {
+    case "settings":
+      return <BaseLayersSettings />;
+    case "areaLayer":
+      return (
+        <AreaLayerSettings
+          activeField={activeField}
+          chartConfig={chartConfig}
+          metaData={metaData}
+        />
+      );
+    case "symbolLayer":
+      return (
+        <SymbolLayerSettings
+          activeField={activeField}
+          chartConfig={chartConfig}
+          metaData={metaData}
+        ></SymbolLayerSettings>
+      );
+    default:
+      return null;
+  }
+};
+
+export const BaseLayersSettings = memo(() => {
+  return (
+    <ControlSection>
+      <SectionTitle iconName={"settings"}>
+        <Trans id="controls.section.mapSettings">Map Settings</Trans>
+      </SectionTitle>
+      <ControlSectionContent side="right">
+        <ChartOptionCheckboxField
+          label={t({
+            id: "controls.mapSettings.showRelief",
+            message: "Show relief",
+          })}
+          field={null}
+          path="settings.showRelief"
+        />
+        <ChartOptionCheckboxField
+          label={t({
+            id: "controls.mapSettings.showLakes",
+            message: "Show lakes",
+          })}
+          field={null}
+          path="settings.showLakes"
+        />
+      </ControlSectionContent>
+    </ControlSection>
+  );
+});
+
+export const AreaLayerSettings = memo(
+  ({
+    activeField,
+    chartConfig,
+    metaData,
+  }: {
+    activeField: string;
+    chartConfig: MapConfig;
+    metaData: DataCubeMetadata;
+  }) => {
+    const geoShapesDimensions = useMemo(
+      () => getGeoShapesDimensions(metaData.dimensions),
+      [metaData.dimensions]
+    );
+    const geoShapesDimensionsOptions = useMemo(
+      () =>
+        geoShapesDimensions.map((d) => ({
+          value: d.iri,
+          label: d.label,
+        })),
+      [geoShapesDimensions]
+    );
+    const dimension = geoShapesDimensions.find(
+      (d) => d.iri === chartConfig.fields.areaLayer.componentIri
+    ) as GeoShapesDimension;
+
+    const hierarchyLevelOptions = useMemo(
+      () =>
+        [
+          ...new Set(
+            (
+              (dimension?.geoShapes as any)?.topology?.objects?.shapes
+                ?.geometries as GeoFeature[]
+            )?.map((d) => d.properties.hierarchyLevel)
+          ),
+        ]?.map((d) => ({ value: d, label: `${d}` })),
+      [dimension?.geoShapes]
+    );
+
+    const measuresOptions = useMemo(
+      () =>
+        metaData.measures.map((d) => ({
+          value: d.iri,
+          label: d.label,
+        })),
+      [metaData.measures]
+    );
+
+    const disabled = !chartConfig.fields.areaLayer.show;
+
+    return (
+      <>
+        <ControlSection>
+          <SectionTitle iconName="settings">
+            <Trans id="controls.section.areaLayerSettings">
+              Area layer settings
+            </Trans>
+          </SectionTitle>
+          <ControlSectionContent side="right">
+            <ChartOptionCheckboxField
+              label={t({
+                id: "fields.areaLayer.show",
+                message: "Show layer",
+              })}
+              field="areaLayer"
+              path="show"
+              disabled={geoShapesDimensions.length === 0}
+            />
+          </ControlSectionContent>
+        </ControlSection>
+        <ControlSection>
+          <SectionTitle iconName="chartMap">
+            Geographical dimension
+          </SectionTitle>
+          <ControlSectionContent side="right">
+            <ChartOptionSelectField
+              id="areaLayer.componentIri"
+              label="Select a dimension"
+              field={activeField}
+              path="componentIri"
+              options={geoShapesDimensionsOptions}
+              disabled={disabled}
+            ></ChartOptionSelectField>
+          </ControlSectionContent>
+        </ControlSection>
+        <ControlSection>
+          <SectionTitle iconName="list">Hierarchy level</SectionTitle>
+          <ControlSectionContent side="right">
+            <ChartOptionSelectField<number>
+              id="areaLayer.hierarchyLevel"
+              label="Select a hierarchy level (1 - lowest)"
+              field={activeField}
+              path="hierarchyLevel"
+              options={hierarchyLevelOptions}
+              getValue={(d) => +d}
+              disabled={disabled}
+            ></ChartOptionSelectField>
+          </ControlSectionContent>
+        </ControlSection>
+        <ControlSection>
+          <SectionTitle iconName="chartBar">Measure</SectionTitle>
+          <ControlSectionContent side="right">
+            <ChartOptionSelectField
+              id="areaLayer.measureIri"
+              label="Select a measure"
+              field={activeField}
+              path="measureIri"
+              options={measuresOptions}
+              disabled={disabled}
+            ></ChartOptionSelectField>
+          </ControlSectionContent>
+        </ControlSection>
+        <ControlSection>
+          <SectionTitle iconName="segments">Color scale</SectionTitle>
+          <ControlSectionContent side="right">
+            <ChartOptionSelectField
+              id="areaLayer.palette"
+              label="Palette"
+              field={activeField}
+              path="palette"
+              options={[
+                "oranges",
+                "reds",
+                "purples",
+                "greens",
+                "blues",
+                "greys",
+              ].map((d) => ({
+                value: d,
+                label: d,
+              }))}
+              disabled={disabled}
+            ></ChartOptionSelectField>
+          </ControlSectionContent>
+          <ControlSectionContent side="right">
+            <FieldSetLegend legendTitle="Continuous"></FieldSetLegend>
+            <ChartOptionRadioField
+              label="Linear interpolation"
+              field={activeField}
+              path="paletteType"
+              value="continuous"
+              disabled={disabled}
+            ></ChartOptionRadioField>
+            <FieldSetLegend legendTitle="Discrete"></FieldSetLegend>
+            <ChartOptionRadioField
+              label="Quantize (equal intervals)"
+              field={activeField}
+              path="paletteType"
+              value="discrete"
+              disabled={disabled}
+            ></ChartOptionRadioField>
+            <ChartOptionRadioField
+              label="Quantiles (equal distribution of values)"
+              field={activeField}
+              path="paletteType"
+              value="quantile"
+              disabled={disabled}
+            ></ChartOptionRadioField>
+            <ChartOptionRadioField
+              label="Jenks (natural breaks)"
+              field={activeField}
+              path="paletteType"
+              value="jenks"
+              disabled={disabled}
+            ></ChartOptionRadioField>
+            <ChartOptionSelectField
+              id="areaLayer.nbClass"
+              label="Number of classes"
+              field={activeField}
+              path="nbClass"
+              options={NUMBER_OF_CLASSES_OPTIONS}
+              disabled={disabled}
+            ></ChartOptionSelectField>
+          </ControlSectionContent>
+        </ControlSection>
+      </>
+    );
+  }
+);
+
+export const SymbolLayerSettings = memo(
+  ({
+    activeField,
+    chartConfig,
+    metaData,
+  }: {
+    activeField: string;
+    chartConfig: MapConfig;
+    metaData: DataCubeMetadata;
+  }) => {
+    const geoDimensions = useMemo(
+      () => getGeoDimensions(metaData.dimensions),
+      [metaData.dimensions]
+    );
+    const geoDimensionsOptions = useMemo(
+      () =>
+        geoDimensions.map((d) => ({
+          value: d.iri,
+          label: d.label,
+        })),
+      [geoDimensions]
+    );
+
+    const measuresOptions = useMemo(
+      () =>
+        metaData.measures.map((d) => ({
+          value: d.iri,
+          label: d.label,
+        })),
+      [metaData.measures]
+    );
+
+    const disabled = !chartConfig.fields.symbolLayer.show;
+
+    return (
+      <>
+        <ControlSection>
+          <SectionTitle iconName="settings">
+            <Trans id="controls.section.symbolLayerSettings">
+              Symbol layer settings
+            </Trans>
+          </SectionTitle>
+          <ControlSectionContent side="right">
+            <ChartOptionCheckboxField
+              label={t({
+                id: "fields.symbolLayer.show",
+                message: "Show layer",
+              })}
+              field="symbolLayer"
+              path="show"
+              disabled={geoDimensions.length === 0}
+            />
+          </ControlSectionContent>
+        </ControlSection>
+        <ControlSection>
+          <SectionTitle iconName="mapSymbols">
+            Geographical dimension
+          </SectionTitle>
+          <ControlSectionContent side="right">
+            <ChartOptionSelectField
+              id="symbolLayer.componentIri"
+              label="Select a dimension"
+              field={activeField}
+              path="componentIri"
+              options={geoDimensionsOptions}
+              disabled={disabled}
+            ></ChartOptionSelectField>
+          </ControlSectionContent>
+        </ControlSection>
+        <ControlSection>
+          <SectionTitle iconName="chartBar">Measure</SectionTitle>
+          <ControlSectionContent side="right">
+            <ChartOptionSelectField
+              id="symbolLayer.measureIri"
+              label="Select a measure"
+              field={activeField}
+              path="measureIri"
+              options={measuresOptions}
+              disabled={disabled}
+            ></ChartOptionSelectField>
+          </ControlSectionContent>
+        </ControlSection>
+        <ControlSection>
+          <SectionTitle iconName="segments">Color</SectionTitle>
+          <ControlSectionContent side="right">
+            <ColorPickerField
+              label="Select a color"
+              field={activeField}
+              path="color"
+              disabled={disabled}
+            ></ColorPickerField>
+          </ControlSectionContent>
+        </ControlSection>
+      </>
+    );
+  }
+);
diff --git a/app/domain/data.ts b/app/domain/data.ts
index 3d4d77565..bebdaa5bf 100644
--- a/app/domain/data.ts
+++ b/app/domain/data.ts
@@ -1,6 +1,10 @@
 import { Literal, NamedNode } from "rdf-js";
-import { DimensionMetaDataFragment } from "../graphql/query-hooks";
 import { DimensionType } from "../charts/chart-config-ui-options";
+import {
+  DimensionMetaDataFragment,
+  GeoCoordinatesDimension,
+  GeoShapesDimension,
+} from "../graphql/query-hooks";
 
 export type RawObservationValue = Literal | NamedNode;
 
@@ -12,6 +16,46 @@ export type DimensionValue = { value: string | number; label: string };
 
 export type Observation = Record<string, ObservationValue>;
 
+export type GeoProperties = {
+  iri: string;
+  label: string;
+  hierarchyLevel: number;
+  observation?: Observation;
+};
+
+export type GeoShapes = {
+  topology: TopoJSON.Topology<TopoJSON.Objects<GeoProperties>>;
+};
+
+export type GeoFeature = {
+  type: "Feature";
+  properties: GeoProperties;
+  geometry: GeoJSON.MultiPolygon | GeoJSON.Polygon;
+};
+
+export type AreaLayer = {
+  shapes: GeoJSON.FeatureCollection<
+    GeoJSON.MultiPolygon | GeoJSON.Polygon,
+    GeoProperties
+  >;
+  mesh: GeoJSON.MultiLineString;
+};
+
+export type GeoPoint = {
+  coordinates: [number, number];
+  properties: GeoProperties;
+};
+
+export type SymbolLayer = {
+  points: GeoPoint[];
+};
+
+export type GeoData = {
+  lakes: GeoJSON.FeatureCollection;
+  areaLayer?: AreaLayer;
+  symbolLayer?: SymbolLayer;
+};
+
 const xmlSchema = "http://www.w3.org/2001/XMLSchema#";
 const parseRDFLiteral = (value: Literal): ObservationValue => {
   const v = value.value;
@@ -92,6 +136,19 @@ export const getCategoricalDimensions = (
       d.__typename === "NominalDimension" || d.__typename === "OrdinalDimension"
   );
 
+export const getGeoCoordinatesDimensions = (
+  dimensions: DimensionMetaDataFragment[]
+) => dimensions.filter((d) => d.__typename === "GeoCoordinatesDimension");
+
+export const getGeoShapesDimensions = (
+  dimensions: DimensionMetaDataFragment[]
+) => dimensions.filter((d) => d.__typename === "GeoShapesDimension");
+
+export const getGeoDimensions = (dimensions: DimensionMetaDataFragment[]) =>
+  dimensions.filter((d) =>
+    ["GeoCoordinatesDimension", "GeoShapesDimension"].includes(d.__typename)
+  );
+
 export const getDimensionsByDimensionType = ({
   dimensionTypes,
   dimensions,
@@ -104,3 +161,15 @@ export const getDimensionsByDimensionType = ({
   [...measures, ...dimensions].filter((component) =>
     dimensionTypes.includes(component.__typename)
   );
+
+export const isGeoCoordinatesDimension = (
+  dimension?: DimensionMetaDataFragment
+): dimension is GeoCoordinatesDimension => {
+  return dimension?.__typename === "GeoCoordinatesDimension";
+};
+
+export const isGeoShapesDimension = (
+  dimension?: DimensionMetaDataFragment
+): dimension is GeoShapesDimension => {
+  return dimension?.__typename === "GeoShapesDimension";
+};
diff --git a/app/domain/env.ts b/app/domain/env.ts
index 09ada1f6e..bafd1b375 100644
--- a/app/domain/env.ts
+++ b/app/domain/env.ts
@@ -23,7 +23,12 @@ export const PUBLIC_URL = (
 export const SPARQL_ENDPOINT =
   clientEnv?.SPARQL_ENDPOINT ??
   process.env.SPARQL_ENDPOINT ??
-  "https://lindas.admin.ch/query";
+  "https://int.lindas.admin.ch/query";
+
+export const SPARQL_GEO_ENDPOINT =
+  clientEnv?.SPARQL_GEO_ENDPOINT ??
+  process.env.SPARQL_GEO_ENDPOINT ??
+  "https://geo.ld.admin.ch/query";
 
 export const SPARQL_EDITOR =
   clientEnv?.SPARQL_EDITOR ?? process.env.SPARQL_EDITOR;
diff --git a/app/graphql/queries/data-cubes.graphql b/app/graphql/queries/data-cubes.graphql
index 620b2fe7f..55caa9820 100644
--- a/app/graphql/queries/data-cubes.graphql
+++ b/app/graphql/queries/data-cubes.graphql
@@ -38,6 +38,12 @@ fragment dimensionMetaData on Dimension {
   isKeyDimension
   values
   unit
+  ... on GeoCoordinatesDimension {
+    geoCoordinates
+  }
+  ... on GeoShapesDimension {
+    geoShapes
+  }
   ... on TemporalDimension {
     timeUnit
     timeFormat
diff --git a/app/graphql/query-hooks.ts b/app/graphql/query-hooks.ts
index cab9eca10..80a90e871 100644
--- a/app/graphql/query-hooks.ts
+++ b/app/graphql/query-hooks.ts
@@ -14,6 +14,8 @@ export type Scalars = {
   Float: number;
   DimensionValue: any;
   Filters: any;
+  GeoCoordinates: any;
+  GeoShapes: any;
   Observation: any;
   RawObservation: any;
 };
@@ -104,6 +106,30 @@ export type Dimension = {
 
 
 
+
+export type GeoCoordinatesDimension = Dimension & {
+  __typename: 'GeoCoordinatesDimension';
+  iri: Scalars['String'];
+  label: Scalars['String'];
+  unit?: Maybe<Scalars['String']>;
+  scaleType?: Maybe<Scalars['String']>;
+  isKeyDimension: Scalars['Boolean'];
+  values: Array<Scalars['DimensionValue']>;
+  geoCoordinates: Scalars['GeoCoordinates'];
+};
+
+
+export type GeoShapesDimension = Dimension & {
+  __typename: 'GeoShapesDimension';
+  iri: Scalars['String'];
+  label: Scalars['String'];
+  unit?: Maybe<Scalars['String']>;
+  scaleType?: Maybe<Scalars['String']>;
+  isKeyDimension: Scalars['Boolean'];
+  values: Array<Scalars['DimensionValue']>;
+  geoShapes: Scalars['GeoShapes'];
+};
+
 export type Measure = Dimension & {
   __typename: 'Measure';
   iri: Scalars['String'];
@@ -230,6 +256,10 @@ export type DataCubesQueryVariables = Exact<{
 
 export type DataCubesQuery = { __typename: 'Query', dataCubes: Array<{ __typename: 'DataCubeResult', highlightedTitle?: Maybe<string>, highlightedDescription?: Maybe<string>, dataCube: { __typename: 'DataCube', iri: string, title: string, description?: Maybe<string>, publicationStatus: DataCubePublicationStatus, datePublished?: Maybe<string>, creator?: Maybe<{ __typename: 'DataCubeOrganization', iri: string, label?: Maybe<string> }>, themes: Array<{ __typename: 'DataCubeTheme', iri: string, label?: Maybe<string> }> } }> };
 
+type DimensionMetaData_GeoCoordinatesDimension_Fragment = { __typename: 'GeoCoordinatesDimension', geoCoordinates: any, iri: string, label: string, isKeyDimension: boolean, values: Array<any>, unit?: Maybe<string> };
+
+type DimensionMetaData_GeoShapesDimension_Fragment = { __typename: 'GeoShapesDimension', geoShapes: any, iri: string, label: string, isKeyDimension: boolean, values: Array<any>, unit?: Maybe<string> };
+
 type DimensionMetaData_Measure_Fragment = { __typename: 'Measure', iri: string, label: string, isKeyDimension: boolean, values: Array<any>, unit?: Maybe<string> };
 
 type DimensionMetaData_NominalDimension_Fragment = { __typename: 'NominalDimension', iri: string, label: string, isKeyDimension: boolean, values: Array<any>, unit?: Maybe<string> };
@@ -238,7 +268,7 @@ type DimensionMetaData_OrdinalDimension_Fragment = { __typename: 'OrdinalDimensi
 
 type DimensionMetaData_TemporalDimension_Fragment = { __typename: 'TemporalDimension', timeUnit: TimeUnit, timeFormat: string, iri: string, label: string, isKeyDimension: boolean, values: Array<any>, unit?: Maybe<string> };
 
-export type DimensionMetaDataFragment = DimensionMetaData_Measure_Fragment | DimensionMetaData_NominalDimension_Fragment | DimensionMetaData_OrdinalDimension_Fragment | DimensionMetaData_TemporalDimension_Fragment;
+export type DimensionMetaDataFragment = DimensionMetaData_GeoCoordinatesDimension_Fragment | DimensionMetaData_GeoShapesDimension_Fragment | DimensionMetaData_Measure_Fragment | DimensionMetaData_NominalDimension_Fragment | DimensionMetaData_OrdinalDimension_Fragment | DimensionMetaData_TemporalDimension_Fragment;
 
 export type DataCubePreviewQueryVariables = Exact<{
   iri: Scalars['String'];
@@ -248,6 +278,12 @@ export type DataCubePreviewQueryVariables = Exact<{
 
 
 export type DataCubePreviewQuery = { __typename: 'Query', dataCubeByIri?: Maybe<{ __typename: 'DataCube', iri: string, title: string, description?: Maybe<string>, publicationStatus: DataCubePublicationStatus, dimensions: Array<(
+      { __typename: 'GeoCoordinatesDimension' }
+      & DimensionMetaData_GeoCoordinatesDimension_Fragment
+    ) | (
+      { __typename: 'GeoShapesDimension' }
+      & DimensionMetaData_GeoShapesDimension_Fragment
+    ) | (
       { __typename: 'Measure' }
       & DimensionMetaData_Measure_Fragment
     ) | (
@@ -291,6 +327,12 @@ export type DataCubeMetadataWithComponentValuesQueryVariables = Exact<{
 
 
 export type DataCubeMetadataWithComponentValuesQuery = { __typename: 'Query', dataCubeByIri?: Maybe<{ __typename: 'DataCube', iri: string, title: string, publisher?: Maybe<string>, dimensions: Array<(
+      { __typename: 'GeoCoordinatesDimension' }
+      & DimensionMetaData_GeoCoordinatesDimension_Fragment
+    ) | (
+      { __typename: 'GeoShapesDimension' }
+      & DimensionMetaData_GeoShapesDimension_Fragment
+    ) | (
       { __typename: 'Measure' }
       & DimensionMetaData_Measure_Fragment
     ) | (
@@ -316,6 +358,12 @@ export type DimensionValuesQueryVariables = Exact<{
 
 
 export type DimensionValuesQuery = { __typename: 'Query', dataCubeByIri?: Maybe<{ __typename: 'DataCube', dimensionByIri?: Maybe<(
+      { __typename: 'GeoCoordinatesDimension' }
+      & DimensionMetaData_GeoCoordinatesDimension_Fragment
+    ) | (
+      { __typename: 'GeoShapesDimension' }
+      & DimensionMetaData_GeoShapesDimension_Fragment
+    ) | (
       { __typename: 'Measure' }
       & DimensionMetaData_Measure_Fragment
     ) | (
@@ -337,7 +385,7 @@ export type TemporalDimensionValuesQueryVariables = Exact<{
 }>;
 
 
-export type TemporalDimensionValuesQuery = { __typename: 'Query', dataCubeByIri?: Maybe<{ __typename: 'DataCube', dimensionByIri?: Maybe<{ __typename: 'Measure' } | { __typename: 'NominalDimension' } | { __typename: 'OrdinalDimension' } | (
+export type TemporalDimensionValuesQuery = { __typename: 'Query', dataCubeByIri?: Maybe<{ __typename: 'DataCube', dimensionByIri?: Maybe<{ __typename: 'GeoCoordinatesDimension' } | { __typename: 'GeoShapesDimension' } | { __typename: 'Measure' } | { __typename: 'NominalDimension' } | { __typename: 'OrdinalDimension' } | (
       { __typename: 'TemporalDimension', timeUnit: TimeUnit, timeFormat: string }
       & DimensionMetaData_TemporalDimension_Fragment
     )> }> };
@@ -352,6 +400,12 @@ export type DataCubeObservationsQueryVariables = Exact<{
 
 
 export type DataCubeObservationsQuery = { __typename: 'Query', dataCubeByIri?: Maybe<{ __typename: 'DataCube', iri: string, title: string, description?: Maybe<string>, dimensions: Array<(
+      { __typename: 'GeoCoordinatesDimension' }
+      & DimensionMetaData_GeoCoordinatesDimension_Fragment
+    ) | (
+      { __typename: 'GeoShapesDimension' }
+      & DimensionMetaData_GeoShapesDimension_Fragment
+    ) | (
       { __typename: 'Measure' }
       & DimensionMetaData_Measure_Fragment
     ) | (
@@ -406,6 +460,12 @@ export const DimensionMetaDataFragmentDoc = gql`
   isKeyDimension
   values
   unit
+  ... on GeoCoordinatesDimension {
+    geoCoordinates
+  }
+  ... on GeoShapesDimension {
+    geoShapes
+  }
   ... on TemporalDimension {
     timeUnit
     timeFormat
diff --git a/app/graphql/resolver-types.ts b/app/graphql/resolver-types.ts
index 14e0b9c8f..5c2ec5980 100644
--- a/app/graphql/resolver-types.ts
+++ b/app/graphql/resolver-types.ts
@@ -19,6 +19,8 @@ export type Scalars = {
   Float: number;
   DimensionValue: DimensionValue;
   Filters: Filters;
+  GeoCoordinates: any;
+  GeoShapes: any;
   Observation: Observation;
   RawObservation: RawObservation;
 };
@@ -109,6 +111,30 @@ export type Dimension = {
 
 
 
+
+export type GeoCoordinatesDimension = Dimension & {
+  __typename?: 'GeoCoordinatesDimension';
+  iri: Scalars['String'];
+  label: Scalars['String'];
+  unit?: Maybe<Scalars['String']>;
+  scaleType?: Maybe<Scalars['String']>;
+  isKeyDimension: Scalars['Boolean'];
+  values: Array<Scalars['DimensionValue']>;
+  geoCoordinates: Scalars['GeoCoordinates'];
+};
+
+
+export type GeoShapesDimension = Dimension & {
+  __typename?: 'GeoShapesDimension';
+  iri: Scalars['String'];
+  label: Scalars['String'];
+  unit?: Maybe<Scalars['String']>;
+  scaleType?: Maybe<Scalars['String']>;
+  isKeyDimension: Scalars['Boolean'];
+  values: Array<Scalars['DimensionValue']>;
+  geoShapes: Scalars['GeoShapes'];
+};
+
 export type Measure = Dimension & {
   __typename?: 'Measure';
   iri: Scalars['String'];
@@ -305,6 +331,10 @@ export type ResolversTypes = ResolversObject<{
   Boolean: ResolverTypeWrapper<Scalars['Boolean']>;
   DimensionValue: ResolverTypeWrapper<Scalars['DimensionValue']>;
   Filters: ResolverTypeWrapper<Scalars['Filters']>;
+  GeoCoordinates: ResolverTypeWrapper<Scalars['GeoCoordinates']>;
+  GeoCoordinatesDimension: ResolverTypeWrapper<ResolvedDimension>;
+  GeoShapes: ResolverTypeWrapper<Scalars['GeoShapes']>;
+  GeoShapesDimension: ResolverTypeWrapper<ResolvedDimension>;
   Measure: ResolverTypeWrapper<ResolvedMeasure>;
   NominalDimension: ResolverTypeWrapper<ResolvedDimension>;
   Observation: ResolverTypeWrapper<Scalars['Observation']>;
@@ -331,6 +361,10 @@ export type ResolversParentTypes = ResolversObject<{
   Boolean: Scalars['Boolean'];
   DimensionValue: Scalars['DimensionValue'];
   Filters: Scalars['Filters'];
+  GeoCoordinates: Scalars['GeoCoordinates'];
+  GeoCoordinatesDimension: ResolvedDimension;
+  GeoShapes: Scalars['GeoShapes'];
+  GeoShapesDimension: ResolvedDimension;
   Measure: ResolvedMeasure;
   NominalDimension: ResolvedDimension;
   Observation: Scalars['Observation'];
@@ -389,7 +423,7 @@ export type DatasetCountResolvers<ContextType = any, ParentType extends Resolver
 }>;
 
 export type DimensionResolvers<ContextType = any, ParentType extends ResolversParentTypes['Dimension'] = ResolversParentTypes['Dimension']> = ResolversObject<{
-  __resolveType: TypeResolveFn<'Measure' | 'NominalDimension' | 'OrdinalDimension' | 'TemporalDimension', ParentType, ContextType>;
+  __resolveType: TypeResolveFn<'GeoCoordinatesDimension' | 'GeoShapesDimension' | 'Measure' | 'NominalDimension' | 'OrdinalDimension' | 'TemporalDimension', ParentType, ContextType>;
   iri?: Resolver<ResolversTypes['String'], ParentType, ContextType>;
   label?: Resolver<ResolversTypes['String'], ParentType, ContextType>;
   unit?: Resolver<Maybe<ResolversTypes['String']>, ParentType, ContextType>;
@@ -406,6 +440,36 @@ export interface FiltersScalarConfig extends GraphQLScalarTypeConfig<ResolversTy
   name: 'Filters';
 }
 
+export interface GeoCoordinatesScalarConfig extends GraphQLScalarTypeConfig<ResolversTypes['GeoCoordinates'], any> {
+  name: 'GeoCoordinates';
+}
+
+export type GeoCoordinatesDimensionResolvers<ContextType = any, ParentType extends ResolversParentTypes['GeoCoordinatesDimension'] = ResolversParentTypes['GeoCoordinatesDimension']> = ResolversObject<{
+  iri?: Resolver<ResolversTypes['String'], ParentType, ContextType>;
+  label?: Resolver<ResolversTypes['String'], ParentType, ContextType>;
+  unit?: Resolver<Maybe<ResolversTypes['String']>, ParentType, ContextType>;
+  scaleType?: Resolver<Maybe<ResolversTypes['String']>, ParentType, ContextType>;
+  isKeyDimension?: Resolver<ResolversTypes['Boolean'], ParentType, ContextType>;
+  values?: Resolver<Array<ResolversTypes['DimensionValue']>, ParentType, ContextType>;
+  geoCoordinates?: Resolver<ResolversTypes['GeoCoordinates'], ParentType, ContextType>;
+  __isTypeOf?: IsTypeOfResolverFn<ParentType, ContextType>;
+}>;
+
+export interface GeoShapesScalarConfig extends GraphQLScalarTypeConfig<ResolversTypes['GeoShapes'], any> {
+  name: 'GeoShapes';
+}
+
+export type GeoShapesDimensionResolvers<ContextType = any, ParentType extends ResolversParentTypes['GeoShapesDimension'] = ResolversParentTypes['GeoShapesDimension']> = ResolversObject<{
+  iri?: Resolver<ResolversTypes['String'], ParentType, ContextType>;
+  label?: Resolver<ResolversTypes['String'], ParentType, ContextType>;
+  unit?: Resolver<Maybe<ResolversTypes['String']>, ParentType, ContextType>;
+  scaleType?: Resolver<Maybe<ResolversTypes['String']>, ParentType, ContextType>;
+  isKeyDimension?: Resolver<ResolversTypes['Boolean'], ParentType, ContextType>;
+  values?: Resolver<Array<ResolversTypes['DimensionValue']>, ParentType, ContextType>;
+  geoShapes?: Resolver<ResolversTypes['GeoShapes'], ParentType, ContextType>;
+  __isTypeOf?: IsTypeOfResolverFn<ParentType, ContextType>;
+}>;
+
 export type MeasureResolvers<ContextType = any, ParentType extends ResolversParentTypes['Measure'] = ResolversParentTypes['Measure']> = ResolversObject<{
   iri?: Resolver<ResolversTypes['String'], ParentType, ContextType>;
   label?: Resolver<ResolversTypes['String'], ParentType, ContextType>;
@@ -482,6 +546,10 @@ export type Resolvers<ContextType = any> = ResolversObject<{
   Dimension?: DimensionResolvers<ContextType>;
   DimensionValue?: GraphQLScalarType;
   Filters?: GraphQLScalarType;
+  GeoCoordinates?: GraphQLScalarType;
+  GeoCoordinatesDimension?: GeoCoordinatesDimensionResolvers<ContextType>;
+  GeoShapes?: GraphQLScalarType;
+  GeoShapesDimension?: GeoShapesDimensionResolvers<ContextType>;
   Measure?: MeasureResolvers<ContextType>;
   NominalDimension?: NominalDimensionResolvers<ContextType>;
   Observation?: GraphQLScalarType;
diff --git a/app/graphql/resolvers.ts b/app/graphql/resolvers.ts
index fcfe7c13b..aea047c5c 100644
--- a/app/graphql/resolvers.ts
+++ b/app/graphql/resolvers.ts
@@ -1,7 +1,14 @@
 import { ascending, descending } from "d3";
 import fuzzaldrin from "fuzzaldrin-plus";
 import { GraphQLJSONObject } from "graphql-type-json";
-import { DimensionValue } from "../domain/data";
+import { topology } from "topojson-server";
+import { parse as parseWKT } from "wellknown";
+import {
+  DimensionValue,
+  GeoFeature,
+  GeoProperties,
+  GeoShapes,
+} from "../domain/data";
 import { parseLocaleString } from "../locales/locales";
 import {
   getCube,
@@ -18,6 +25,7 @@ import {
   queryDatasetCountBySubTheme,
   queryDatasetCountByTheme,
 } from "../rdf/query-cube-metadata";
+import { RawGeoShape } from "../rdf/query-geo-shapes";
 import truthy from "../utils/truthy";
 import {
   DataCubeResolvers,
@@ -291,13 +299,12 @@ export const resolvers: Resolvers = {
     __resolveType({ data: { dataKind, scaleType, dataType } }) {
       if (dataKind === "Time") {
         return "TemporalDimension";
+      } else if (dataKind === "GeoCoordinates") {
+        return "GeoCoordinatesDimension";
+      } else if (dataKind === "GeoShape") {
+        return "GeoShapesDimension";
       }
 
-      // TODO: GeoDimension
-      // if (dataKind === "https://schema.org/GeoShape") {
-      // return "GeoDimension"
-      // }
-
       return "NominalDimension";
     },
   },
@@ -309,8 +316,51 @@ export const resolvers: Resolvers = {
   },
   TemporalDimension: {
     ...dimensionResolvers,
-    timeUnit: ({ data: { timeUnit } }: ResolvedDimension) => timeUnit!,
-    timeFormat: ({ data: { timeFormat } }: ResolvedDimension) => timeFormat!,
+    timeUnit: ({ data: { timeUnit } }) => timeUnit!,
+    timeFormat: ({ data: { timeFormat } }) => timeFormat!,
+  },
+  GeoCoordinatesDimension: {
+    ...dimensionResolvers,
+    geoCoordinates: async (parent, _, { loaders }) => {
+      return await loaders.geoCoordinates.load(parent);
+    },
+  },
+  GeoShapesDimension: {
+    ...dimensionResolvers,
+    geoShapes: async (parent, _, { loaders }) => {
+      const dimValues = (await loaders.dimensionValues.load(
+        parent
+      )) as DimensionValue[];
+      const dimIris = dimValues.map((d) => `${d.value}`) as string[];
+      const shapes = (await loaders.geoShapes.loadMany(
+        dimIris
+      )) as RawGeoShape[];
+      const geoJSONFeatures = shapes
+        .filter(
+          (d): d is Exclude<RawGeoShape, "wktString"> & { wktString: string } =>
+            d.wktString !== undefined
+        )
+        .map((d) => ({
+          type: "Feature",
+          properties: {
+            iri: d.iri,
+            label: d.label,
+            hierarchyLevel: d.level,
+          },
+          geometry: parseWKT(d.wktString),
+        })) as GeoFeature[];
+
+      const resolved: GeoShapes = {
+        topology: topology({
+          shapes: {
+            type: "FeatureCollection",
+            features: geoJSONFeatures,
+          } as GeoJSON.FeatureCollection<GeoJSON.Geometry, GeoProperties>,
+        }) as GeoShapes["topology"],
+      };
+
+      return resolved;
+    },
   },
   Measure: {
     ...dimensionResolvers,
diff --git a/app/graphql/schema.graphql b/app/graphql/schema.graphql
index e5957cc50..4c2760789 100644
--- a/app/graphql/schema.graphql
+++ b/app/graphql/schema.graphql
@@ -2,6 +2,8 @@ scalar Observation
 scalar DimensionValue
 scalar RawObservation
 scalar Filters
+scalar GeoCoordinates
+scalar GeoShapes
 
 type ObservationsQuery {
   "Observations with their values parsed to native JS types"
@@ -52,6 +54,26 @@ interface Dimension {
   values: [DimensionValue!]!
 }
 
+type GeoCoordinatesDimension implements Dimension {
+  iri: String!
+  label: String!
+  unit: String
+  scaleType: String
+  isKeyDimension: Boolean!
+  values: [DimensionValue!]!
+  geoCoordinates: GeoCoordinates!
+}
+
+type GeoShapesDimension implements Dimension {
+  iri: String!
+  label: String!
+  unit: String
+  scaleType: String
+  isKeyDimension: Boolean!
+  values: [DimensionValue!]!
+  geoShapes: GeoShapes!
+}
+
 type NominalDimension implements Dimension {
   iri: String!
   label: String!
diff --git a/app/graphql/shared-types.ts b/app/graphql/shared-types.ts
index 39fe71c1a..fd64f29ec 100644
--- a/app/graphql/shared-types.ts
+++ b/app/graphql/shared-types.ts
@@ -2,9 +2,9 @@ import { Cube, CubeDimension } from "rdf-cube-view-query";
 import { Literal, NamedNode } from "rdf-js";
 import { Observation } from "../domain/data";
 import {
-  DataCubeTheme,
   DataCubeOrganization,
   DataCubePublicationStatus,
+  DataCubeTheme,
   TimeUnit,
 } from "./resolver-types";
 
@@ -48,11 +48,11 @@ export type ResolvedDimension = {
     hasUndefinedValues: boolean;
     unit?: string;
     dataType?: string;
+    name: string;
     dataKind?: "Time" | "GeoCoordinates" | "GeoShape";
     timeUnit?: TimeUnit;
     timeFormat?: string;
     scaleType?: "Nominal" | "Ordinal" | "Ratio" | "Interval";
-    name: string;
   };
 
   // dimension: RDF.Dimension;
diff --git a/app/locales/de/messages.po b/app/locales/de/messages.po
index 0a0517316..84e557562 100644
--- a/app/locales/de/messages.po
+++ b/app/locales/de/messages.po
@@ -25,11 +25,11 @@ msgstr "Kein ergebnis"
 msgid "Search “{0}”"
 msgstr "Suche “{0}”"
 
-#: app/components/chart-preview.tsx:95
+#: app/components/chart-preview.tsx:97
 msgid "annotation.add.description"
 msgstr "[ Ohne Beschreibung ]"
 
-#: app/components/chart-preview.tsx:79
+#: app/components/chart-preview.tsx:81
 msgid "annotation.add.title"
 msgstr "[ Ohne Titel ]"
 
@@ -99,88 +99,88 @@ msgid "button.share"
 msgstr "Teilen"
 
 #: app/charts/map/chart-map-prototype.tsx:246
-msgid "chart.map.control.data.filters"
-msgstr "Datenfilter"
+#~ msgid "chart.map.control.data.filters"
+#~ msgstr "Datenfilter"
 
 #: app/charts/map/chart-map-prototype.tsx:203
-msgid "chart.map.control.layers"
-msgstr "Ebenen"
+#~ msgid "chart.map.control.layers"
+#~ msgstr "Ebenen"
 
 #: app/charts/map/chart-map-prototype.tsx:222
-msgid "chart.map.layers.area"
-msgstr "Flächen"
+#~ msgid "chart.map.layers.area"
+#~ msgstr "Flächen"
 
 #: app/charts/map/prototype-right-controls.tsx:76
-msgid "chart.map.layers.area.add.data"
-msgstr "Flächen anzeigen"
+#~ msgid "chart.map.layers.area.add.data"
+#~ msgstr "Flächen anzeigen"
 
 #: app/charts/map/prototype-right-controls.tsx:110
-msgid "chart.map.layers.area.color.palette"
-msgstr "Farbpalette"
+#~ msgid "chart.map.layers.area.color.palette"
+#~ msgstr "Farbpalette"
 
 #: app/charts/map/prototype-right-controls.tsx:133
-msgid "chart.map.layers.area.discretization.continuous"
-msgstr "Kontinuierlich"
+#~ msgid "chart.map.layers.area.discretization.continuous"
+#~ msgstr "Kontinuierlich"
 
 #: app/charts/map/prototype-right-controls.tsx:153
-msgid "chart.map.layers.area.discretization.discrete"
-msgstr "Diskret"
+#~ msgid "chart.map.layers.area.discretization.discrete"
+#~ msgstr "Diskret"
 
 #: app/charts/map/prototype-right-controls.tsx:186
-msgid "chart.map.layers.area.discretization.jenks"
-msgstr "Jenks (Natural Breaks)"
+#~ msgid "chart.map.layers.area.discretization.jenks"
+#~ msgstr "Jenks (Natural Breaks)"
 
 #: app/charts/map/prototype-right-controls.tsx:140
-msgid "chart.map.layers.area.discretization.linear"
-msgstr "Linear"
+#~ msgid "chart.map.layers.area.discretization.linear"
+#~ msgstr "Linear"
 
 #: app/charts/map/prototype-right-controls.tsx:199
-msgid "chart.map.layers.area.discretization.number.class"
-msgstr "Anzahl Klassen"
+#~ msgid "chart.map.layers.area.discretization.number.class"
+#~ msgstr "Anzahl Klassen"
 
 #: app/charts/map/prototype-right-controls.tsx:173
-msgid "chart.map.layers.area.discretization.quantiles"
-msgstr "Quantile (gleiche Anzahl Werte)"
+#~ msgid "chart.map.layers.area.discretization.quantiles"
+#~ msgstr "Quantile (gleiche Anzahl Werte)"
 
 #: app/charts/map/prototype-right-controls.tsx:160
-msgid "chart.map.layers.area.discretization.quantize"
-msgstr "Quantisierung (gleiche Wertebereiche)"
+#~ msgid "chart.map.layers.area.discretization.quantize"
+#~ msgstr "Quantisierung (gleiche Wertebereiche)"
 
 #: app/charts/map/prototype-right-controls.tsx:91
-msgid "chart.map.layers.area.select.measure"
-msgstr "Messwert auswählen"
+#~ msgid "chart.map.layers.area.select.measure"
+#~ msgstr "Messwert auswählen"
 
 #: app/charts/map/chart-map-prototype.tsx:210
-msgid "chart.map.layers.base"
-msgstr "Basis-Ebene"
+#~ msgid "chart.map.layers.base"
+#~ msgstr "Basis-Ebene"
 
 #: app/charts/map/prototype-right-controls.tsx:59
-msgid "chart.map.layers.base.lakes"
-msgstr "Seen"
+#~ msgid "chart.map.layers.base.lakes"
+#~ msgstr "Seen"
 
 #: app/charts/map/prototype-right-controls.tsx:48
-msgid "chart.map.layers.base.relief"
-msgstr "Relief"
+#~ msgid "chart.map.layers.base.relief"
+#~ msgstr "Relief"
 
 #: app/charts/map/prototype-right-controls.tsx:263
-msgid "chart.map.layers.no.selected"
-msgstr "Wählen Sie einen Layer zum Bearbeiten aus."
+#~ msgid "chart.map.layers.no.selected"
+#~ msgstr "Wählen Sie einen Layer zum Bearbeiten aus."
 
 #: app/charts/map/chart-map-prototype.tsx:234
-msgid "chart.map.layers.symbol"
-msgstr "Symbole"
+#~ msgid "chart.map.layers.symbol"
+#~ msgstr "Symbole"
 
 #: app/charts/map/prototype-right-controls.tsx:228
-msgid "chart.map.layers.symbol.add.symbols"
-msgstr "Proportionale Symbole anzeigen"
+#~ msgid "chart.map.layers.symbol.add.symbols"
+#~ msgstr "Proportionale Symbole anzeigen"
 
 #: app/charts/map/prototype-right-controls.tsx:243
-msgid "chart.map.layers.symbol.select.measure"
-msgstr "Messwert auswählen"
+#~ msgid "chart.map.layers.symbol.select.measure"
+#~ msgstr "Messwert auswählen"
 
 #: app/charts/map/chart-map-prototype.tsx:274
-msgid "chart.map.warning.prototype"
-msgstr "Diese Karte ist ein Prototyp und kann nicht publiziert werden."
+#~ msgid "chart.map.warning.prototype"
+#~ msgstr "Diese Karte ist ein Prototyp und kann nicht publiziert werden."
 
 #: app/charts/table/table.tsx:260
 msgid "chart.published.toggle.mobile.view"
@@ -227,35 +227,35 @@ msgstr "Horizontale Achse"
 msgid "controls.axis.vertical"
 msgstr "Vertikale Achse"
 
-#: app/configurator/components/ui-helpers.ts:463
+#: app/configurator/components/ui-helpers.ts:475
 msgid "controls.chart.type.area"
 msgstr "Flächen"
 
-#: app/configurator/components/ui-helpers.ts:455
+#: app/configurator/components/ui-helpers.ts:467
 msgid "controls.chart.type.bar"
 msgstr "Balken"
 
-#: app/configurator/components/ui-helpers.ts:451
+#: app/configurator/components/ui-helpers.ts:463
 msgid "controls.chart.type.column"
 msgstr "Säulen"
 
-#: app/configurator/components/ui-helpers.ts:459
+#: app/configurator/components/ui-helpers.ts:471
 msgid "controls.chart.type.line"
 msgstr "Linien"
 
-#: app/configurator/components/ui-helpers.ts:479
+#: app/configurator/components/ui-helpers.ts:491
 msgid "controls.chart.type.map"
 msgstr "Karte"
 
-#: app/configurator/components/ui-helpers.ts:471
+#: app/configurator/components/ui-helpers.ts:483
 msgid "controls.chart.type.pie"
 msgstr "Kreis"
 
-#: app/configurator/components/ui-helpers.ts:467
+#: app/configurator/components/ui-helpers.ts:479
 msgid "controls.chart.type.scatterplot"
 msgstr "Scatterplot"
 
-#: app/configurator/components/ui-helpers.ts:475
+#: app/configurator/components/ui-helpers.ts:487
 msgid "controls.chart.type.table"
 msgstr "Tabelle"
 
@@ -326,7 +326,7 @@ msgstr "Bitte eine Designoption oder Datendimension auswählen, um diese zu bear
 msgid "controls.hint.describing.chart"
 msgstr "Bitte ein Beschreibungsfeld auswählen, um dieses zu bearbeiten."
 
-#: app/configurator/components/ui-helpers.ts:435
+#: app/configurator/components/ui-helpers.ts:447
 msgid "controls.imputation"
 msgstr "Imputationstyp"
 
@@ -366,22 +366,42 @@ msgstr "Keine Zeitdimension verfügbar!"
 msgid "controls.interactiveFilters.time.toggleTimeFilter"
 msgstr "Zeitfilter anzeigen"
 
-#: app/configurator/components/ui-helpers.ts:483
+#: app/configurator/components/ui-helpers.ts:495
 msgid "controls.language.english"
 msgstr "Englisch"
 
-#: app/configurator/components/ui-helpers.ts:491
+#: app/configurator/components/ui-helpers.ts:503
 msgid "controls.language.french"
 msgstr "Französisch"
 
-#: app/configurator/components/ui-helpers.ts:487
+#: app/configurator/components/ui-helpers.ts:499
 msgid "controls.language.german"
 msgstr "Deutsch"
 
-#: app/configurator/components/ui-helpers.ts:495
+#: app/configurator/components/ui-helpers.ts:507
 msgid "controls.language.italian"
 msgstr "Italienisch"
 
+#: app/configurator/components/ui-helpers.ts:403
+msgid "controls.map.layer.area"
+msgstr ""
+
+#: app/configurator/components/ui-helpers.ts:407
+msgid "controls.map.layer.symbol"
+msgstr ""
+
+#: app/configurator/components/ui-helpers.ts:399
+msgid "controls.map.settings"
+msgstr ""
+
+#: app/configurator/map/map-chart-options.tsx:77
+msgid "controls.mapSettings.showLakes"
+msgstr ""
+
+#: app/configurator/map/map-chart-options.tsx:69
+msgid "controls.mapSettings.showRelief"
+msgstr ""
+
 #: app/configurator/components/ui-helpers.ts:377
 msgid "controls.measure"
 msgstr "Messwert"
@@ -398,6 +418,10 @@ msgstr "Aus"
 msgid "controls.search.clear"
 msgstr "Suche zurücksetzen"
 
+#: app/configurator/map/map-chart-options.tsx:112
+msgid "controls.section.areaLayerSettings"
+msgstr ""
+
 #: app/configurator/components/chart-configurator.tsx:45
 msgid "controls.section.chart.options"
 msgstr "Diagramm-Einstellungen"
@@ -451,6 +475,10 @@ msgstr "Datenfilter"
 msgid "controls.section.sorting"
 msgstr "Sortieren"
 
+#: app/configurator/map/map-chart-options.tsx:253
+msgid "controls.section.symbolLayerSettings"
+msgstr ""
+
 #: app/configurator/table/table-chart-options.tsx:469
 msgid "controls.section.tableSettings"
 msgstr "Tabelleneinstellungen"
@@ -519,6 +547,10 @@ msgstr "Messwert auswählen"
 msgid "controls.select.optional"
 msgstr "optional"
 
+#: app/configurator/components/chart-options-selector.tsx:189
+msgid "controls.settings"
+msgstr ""
+
 #: app/configurator/table/table-chart-sorting-options.tsx:234
 msgid "controls.sorting.addDimension"
 msgstr "Dimension hinzufügen"
@@ -528,11 +560,11 @@ msgstr "Dimension hinzufügen"
 msgid "controls.sorting.byDimensionLabel"
 msgstr "Name"
 
-#: app/configurator/components/ui-helpers.ts:403
+#: app/configurator/components/ui-helpers.ts:415
 msgid "controls.sorting.byDimensionLabel.ascending"
 msgstr "A → Z"
 
-#: app/configurator/components/ui-helpers.ts:407
+#: app/configurator/components/ui-helpers.ts:419
 msgid "controls.sorting.byDimensionLabel.descending"
 msgstr "Z → A"
 
@@ -540,11 +572,11 @@ msgstr "Z → A"
 msgid "controls.sorting.byMeasure"
 msgstr "Messwert"
 
-#: app/configurator/components/ui-helpers.ts:427
+#: app/configurator/components/ui-helpers.ts:439
 msgid "controls.sorting.byMeasure.ascending"
 msgstr "1 → 9"
 
-#: app/configurator/components/ui-helpers.ts:431
+#: app/configurator/components/ui-helpers.ts:443
 msgid "controls.sorting.byMeasure.descending"
 msgstr "9 → 1"
 
@@ -552,19 +584,19 @@ msgstr "9 → 1"
 msgid "controls.sorting.byTotalSize"
 msgstr "Gesamtgrösse"
 
-#: app/configurator/components/ui-helpers.ts:411
+#: app/configurator/components/ui-helpers.ts:423
 msgid "controls.sorting.byTotalSize.ascending"
 msgstr "Kleinste zuerst"
 
-#: app/configurator/components/ui-helpers.ts:423
+#: app/configurator/components/ui-helpers.ts:435
 msgid "controls.sorting.byTotalSize.largestBottom"
 msgstr "Grösste unten"
 
-#: app/configurator/components/ui-helpers.ts:415
+#: app/configurator/components/ui-helpers.ts:427
 msgid "controls.sorting.byTotalSize.largestFirst"
 msgstr "Grösste zuerst"
 
-#: app/configurator/components/ui-helpers.ts:419
+#: app/configurator/components/ui-helpers.ts:431
 msgid "controls.sorting.byTotalSize.largestTop"
 msgstr "Kleinste unten"
 
@@ -576,7 +608,7 @@ msgstr "Sortierung entfernen"
 msgid "controls.sorting.selectDimension"
 msgstr "Wählen Sie eine Dimension aus …"
 
-#: app/configurator/components/ui-helpers.ts:399
+#: app/configurator/components/ui-helpers.ts:411
 #: app/configurator/table/table-chart-sorting-options.tsx:305
 msgid "controls.sorting.sortBy"
 msgstr "Sortieren nach"
@@ -613,7 +645,7 @@ msgstr "Zurück zu den Datensätzen"
 msgid "dataset-selector.choose-another-dataset"
 msgstr "Wählen Sie einen anderen Datensatz"
 
-#: app/components/chart-published.tsx:80
+#: app/components/chart-published.tsx:81
 msgid "dataset.hasImputedValues"
 msgstr "Einige Daten in diesem Datensatz fehlen und wurden interpoliert, um die Lücken zu füllen."
 
@@ -653,13 +685,13 @@ msgstr "Relevanz"
 msgid "dataset.order.title"
 msgstr "Titel"
 
-#: app/components/chart-preview.tsx:56
-#: app/components/chart-published.tsx:58
+#: app/components/chart-preview.tsx:58
+#: app/components/chart-published.tsx:59
 #: app/configurator/components/dataset-preview.tsx:36
 msgid "dataset.publicationStatus.draft.warning"
 msgstr "Achtung, dieser Datensatz ist im Entwurfs-Stadium.<0/><1>Diese Grafik nicht für Berichte verwenden.</1>"
 
-#: app/components/chart-published.tsx:69
+#: app/components/chart-published.tsx:70
 msgid "dataset.publicationStatus.expires.warning"
 msgstr "Achtung, dieser Datensatz ist abgelaufen.<0/><1>Diese Grafik nicht für Berichte verwenden.</1>"
 
@@ -683,6 +715,14 @@ msgstr "Luftzug"
 msgid "datatable.showing.first.rows"
 msgstr "Die ersten 10 Zeilen werden angezeigt"
 
+#: app/configurator/map/map-chart-options.tsx:118
+msgid "fields.areaLayer.show"
+msgstr ""
+
+#: app/configurator/map/map-chart-options.tsx:259
+msgid "fields.symbolLayer.show"
+msgstr ""
+
 #: app/components/footer.tsx:66
 msgid "footer.institution.name"
 msgstr "Bundesamt für Umwelt BAFU"
diff --git a/app/locales/en/messages.po b/app/locales/en/messages.po
index 93c1ff935..371eb6328 100644
--- a/app/locales/en/messages.po
+++ b/app/locales/en/messages.po
@@ -25,11 +25,11 @@ msgstr "No results"
 msgid "Search “{0}”"
 msgstr "Search “{0}”"
 
-#: app/components/chart-preview.tsx:95
+#: app/components/chart-preview.tsx:97
 msgid "annotation.add.description"
 msgstr "[ No Description ]"
 
-#: app/components/chart-preview.tsx:79
+#: app/components/chart-preview.tsx:81
 msgid "annotation.add.title"
 msgstr "[ No Title ]"
 
@@ -99,88 +99,88 @@ msgid "button.share"
 msgstr "Share"
 
 #: app/charts/map/chart-map-prototype.tsx:246
-msgid "chart.map.control.data.filters"
-msgstr "Data Filters"
+#~ msgid "chart.map.control.data.filters"
+#~ msgstr "Data Filters"
 
 #: app/charts/map/chart-map-prototype.tsx:203
-msgid "chart.map.control.layers"
-msgstr "Layers"
+#~ msgid "chart.map.control.layers"
+#~ msgstr "Layers"
 
 #: app/charts/map/chart-map-prototype.tsx:222
-msgid "chart.map.layers.area"
-msgstr "Areas"
+#~ msgid "chart.map.layers.area"
+#~ msgstr "Areas"
 
 #: app/charts/map/prototype-right-controls.tsx:76
-msgid "chart.map.layers.area.add.data"
-msgstr "Show data areas"
+#~ msgid "chart.map.layers.area.add.data"
+#~ msgstr "Show data areas"
 
 #: app/charts/map/prototype-right-controls.tsx:110
-msgid "chart.map.layers.area.color.palette"
-msgstr "Color palette"
+#~ msgid "chart.map.layers.area.color.palette"
+#~ msgstr "Color palette"
 
 #: app/charts/map/prototype-right-controls.tsx:133
-msgid "chart.map.layers.area.discretization.continuous"
-msgstr "Continuous"
+#~ msgid "chart.map.layers.area.discretization.continuous"
+#~ msgstr "Continuous"
 
 #: app/charts/map/prototype-right-controls.tsx:153
-msgid "chart.map.layers.area.discretization.discrete"
-msgstr "Discrete"
+#~ msgid "chart.map.layers.area.discretization.discrete"
+#~ msgstr "Discrete"
 
 #: app/charts/map/prototype-right-controls.tsx:186
-msgid "chart.map.layers.area.discretization.jenks"
-msgstr "Jenks (natural breaks)"
+#~ msgid "chart.map.layers.area.discretization.jenks"
+#~ msgstr "Jenks (natural breaks)"
 
 #: app/charts/map/prototype-right-controls.tsx:140
-msgid "chart.map.layers.area.discretization.linear"
-msgstr "Linear interpolation"
+#~ msgid "chart.map.layers.area.discretization.linear"
+#~ msgstr "Linear interpolation"
 
 #: app/charts/map/prototype-right-controls.tsx:199
-msgid "chart.map.layers.area.discretization.number.class"
-msgstr "Number of classes"
+#~ msgid "chart.map.layers.area.discretization.number.class"
+#~ msgstr "Number of classes"
 
 #: app/charts/map/prototype-right-controls.tsx:173
-msgid "chart.map.layers.area.discretization.quantiles"
-msgstr "Quantiles (equal distribution of values)"
+#~ msgid "chart.map.layers.area.discretization.quantiles"
+#~ msgstr "Quantiles (equal distribution of values)"
 
 #: app/charts/map/prototype-right-controls.tsx:160
-msgid "chart.map.layers.area.discretization.quantize"
-msgstr "Quantize (equal intervals)"
+#~ msgid "chart.map.layers.area.discretization.quantize"
+#~ msgstr "Quantize (equal intervals)"
 
 #: app/charts/map/prototype-right-controls.tsx:91
-msgid "chart.map.layers.area.select.measure"
-msgstr "Select a measure"
+#~ msgid "chart.map.layers.area.select.measure"
+#~ msgstr "Select a measure"
 
 #: app/charts/map/chart-map-prototype.tsx:210
-msgid "chart.map.layers.base"
-msgstr "Base Layer"
+#~ msgid "chart.map.layers.base"
+#~ msgstr "Base Layer"
 
 #: app/charts/map/prototype-right-controls.tsx:59
-msgid "chart.map.layers.base.lakes"
-msgstr "Lakes"
+#~ msgid "chart.map.layers.base.lakes"
+#~ msgstr "Lakes"
 
 #: app/charts/map/prototype-right-controls.tsx:48
-msgid "chart.map.layers.base.relief"
-msgstr "Relief"
+#~ msgid "chart.map.layers.base.relief"
+#~ msgstr "Relief"
 
 #: app/charts/map/prototype-right-controls.tsx:263
-msgid "chart.map.layers.no.selected"
-msgstr "Select a layer to edit in the left panel."
+#~ msgid "chart.map.layers.no.selected"
+#~ msgstr "Select a layer to edit in the left panel."
 
 #: app/charts/map/chart-map-prototype.tsx:234
-msgid "chart.map.layers.symbol"
-msgstr "Symbols"
+#~ msgid "chart.map.layers.symbol"
+#~ msgstr "Symbols"
 
 #: app/charts/map/prototype-right-controls.tsx:228
-msgid "chart.map.layers.symbol.add.symbols"
-msgstr "Show proportional symbols"
+#~ msgid "chart.map.layers.symbol.add.symbols"
+#~ msgstr "Show proportional symbols"
 
 #: app/charts/map/prototype-right-controls.tsx:243
-msgid "chart.map.layers.symbol.select.measure"
-msgstr "Select a measure"
+#~ msgid "chart.map.layers.symbol.select.measure"
+#~ msgstr "Select a measure"
 
 #: app/charts/map/chart-map-prototype.tsx:274
-msgid "chart.map.warning.prototype"
-msgstr "This map is a prototype and can't be published."
+#~ msgid "chart.map.warning.prototype"
+#~ msgstr "This map is a prototype and can't be published."
 
 #: app/charts/table/table.tsx:260
 msgid "chart.published.toggle.mobile.view"
@@ -227,35 +227,35 @@ msgstr "Horizontal Axis"
 msgid "controls.axis.vertical"
 msgstr "Vertical Axis"
 
-#: app/configurator/components/ui-helpers.ts:463
+#: app/configurator/components/ui-helpers.ts:475
 msgid "controls.chart.type.area"
 msgstr "Areas"
 
-#: app/configurator/components/ui-helpers.ts:455
+#: app/configurator/components/ui-helpers.ts:467
 msgid "controls.chart.type.bar"
 msgstr "Bars"
 
-#: app/configurator/components/ui-helpers.ts:451
+#: app/configurator/components/ui-helpers.ts:463
 msgid "controls.chart.type.column"
 msgstr "Columns"
 
-#: app/configurator/components/ui-helpers.ts:459
+#: app/configurator/components/ui-helpers.ts:471
 msgid "controls.chart.type.line"
 msgstr "Lines"
 
-#: app/configurator/components/ui-helpers.ts:479
+#: app/configurator/components/ui-helpers.ts:491
 msgid "controls.chart.type.map"
 msgstr "Map"
 
-#: app/configurator/components/ui-helpers.ts:471
+#: app/configurator/components/ui-helpers.ts:483
 msgid "controls.chart.type.pie"
 msgstr "Pie"
 
-#: app/configurator/components/ui-helpers.ts:467
+#: app/configurator/components/ui-helpers.ts:479
 msgid "controls.chart.type.scatterplot"
 msgstr "Scatterplot"
 
-#: app/configurator/components/ui-helpers.ts:475
+#: app/configurator/components/ui-helpers.ts:487
 msgid "controls.chart.type.table"
 msgstr "Table"
 
@@ -326,7 +326,7 @@ msgstr "Select a design element or a data dimension to modify its options."
 msgid "controls.hint.describing.chart"
 msgstr "Select an annotation field to modify its content."
 
-#: app/configurator/components/ui-helpers.ts:435
+#: app/configurator/components/ui-helpers.ts:447
 msgid "controls.imputation"
 msgstr "Imputation type"
 
@@ -366,22 +366,42 @@ msgstr "There is no time dimension!"
 msgid "controls.interactiveFilters.time.toggleTimeFilter"
 msgstr "Show time filter"
 
-#: app/configurator/components/ui-helpers.ts:483
+#: app/configurator/components/ui-helpers.ts:495
 msgid "controls.language.english"
 msgstr "English"
 
-#: app/configurator/components/ui-helpers.ts:491
+#: app/configurator/components/ui-helpers.ts:503
 msgid "controls.language.french"
 msgstr "French"
 
-#: app/configurator/components/ui-helpers.ts:487
+#: app/configurator/components/ui-helpers.ts:499
 msgid "controls.language.german"
 msgstr "German"
 
-#: app/configurator/components/ui-helpers.ts:495
+#: app/configurator/components/ui-helpers.ts:507
 msgid "controls.language.italian"
 msgstr "Italian"
 
+#: app/configurator/components/ui-helpers.ts:403
+msgid "controls.map.layer.area"
+msgstr "Area layer"
+
+#: app/configurator/components/ui-helpers.ts:407
+msgid "controls.map.layer.symbol"
+msgstr "Symbol layer"
+
+#: app/configurator/components/ui-helpers.ts:399
+msgid "controls.map.settings"
+msgstr "Base layers"
+
+#: app/configurator/map/map-chart-options.tsx:77
+msgid "controls.mapSettings.showLakes"
+msgstr "Show lakes"
+
+#: app/configurator/map/map-chart-options.tsx:69
+msgid "controls.mapSettings.showRelief"
+msgstr "Show relief"
+
 #: app/configurator/components/ui-helpers.ts:377
 msgid "controls.measure"
 msgstr "Measure"
@@ -398,6 +418,10 @@ msgstr "Off"
 msgid "controls.search.clear"
 msgstr "Clear search field"
 
+#: app/configurator/map/map-chart-options.tsx:112
+msgid "controls.section.areaLayerSettings"
+msgstr "Area layer settings"
+
 #: app/configurator/components/chart-configurator.tsx:45
 msgid "controls.section.chart.options"
 msgstr "Chart Options"
@@ -451,6 +475,10 @@ msgstr "Data Filters"
 msgid "controls.section.sorting"
 msgstr "Sort"
 
+#: app/configurator/map/map-chart-options.tsx:253
+msgid "controls.section.symbolLayerSettings"
+msgstr "Symbol layer settings"
+
 #: app/configurator/table/table-chart-options.tsx:469
 msgid "controls.section.tableSettings"
 msgstr "Table Settings"
@@ -519,6 +547,10 @@ msgstr "Select a measure"
 msgid "controls.select.optional"
 msgstr "optional"
 
+#: app/configurator/components/chart-options-selector.tsx:189
+msgid "controls.settings"
+msgstr "Settings"
+
 #: app/configurator/table/table-chart-sorting-options.tsx:234
 msgid "controls.sorting.addDimension"
 msgstr "Add dimension"
@@ -528,11 +560,11 @@ msgstr "Add dimension"
 msgid "controls.sorting.byDimensionLabel"
 msgstr "Name"
 
-#: app/configurator/components/ui-helpers.ts:403
+#: app/configurator/components/ui-helpers.ts:415
 msgid "controls.sorting.byDimensionLabel.ascending"
 msgstr "A → Z"
 
-#: app/configurator/components/ui-helpers.ts:407
+#: app/configurator/components/ui-helpers.ts:419
 msgid "controls.sorting.byDimensionLabel.descending"
 msgstr "Z → A"
 
@@ -540,11 +572,11 @@ msgstr "Z → A"
 msgid "controls.sorting.byMeasure"
 msgstr "Measure"
 
-#: app/configurator/components/ui-helpers.ts:427
+#: app/configurator/components/ui-helpers.ts:439
 msgid "controls.sorting.byMeasure.ascending"
 msgstr "1 → 9"
 
-#: app/configurator/components/ui-helpers.ts:431
+#: app/configurator/components/ui-helpers.ts:443
 msgid "controls.sorting.byMeasure.descending"
 msgstr "9 → 1"
 
@@ -552,19 +584,19 @@ msgstr "9 → 1"
 msgid "controls.sorting.byTotalSize"
 msgstr "Total size"
 
-#: app/configurator/components/ui-helpers.ts:411
+#: app/configurator/components/ui-helpers.ts:423
 msgid "controls.sorting.byTotalSize.ascending"
 msgstr "Largest last"
 
-#: app/configurator/components/ui-helpers.ts:423
+#: app/configurator/components/ui-helpers.ts:435
 msgid "controls.sorting.byTotalSize.largestBottom"
 msgstr "Largest bottom"
 
-#: app/configurator/components/ui-helpers.ts:415
+#: app/configurator/components/ui-helpers.ts:427
 msgid "controls.sorting.byTotalSize.largestFirst"
 msgstr "Largest first"
 
-#: app/configurator/components/ui-helpers.ts:419
+#: app/configurator/components/ui-helpers.ts:431
 msgid "controls.sorting.byTotalSize.largestTop"
 msgstr "Largest top"
 
@@ -576,7 +608,7 @@ msgstr "Remove sorting dimension"
 msgid "controls.sorting.selectDimension"
 msgstr "Select a dimension …"
 
-#: app/configurator/components/ui-helpers.ts:399
+#: app/configurator/components/ui-helpers.ts:411
 #: app/configurator/table/table-chart-sorting-options.tsx:305
 msgid "controls.sorting.sortBy"
 msgstr "Sort by"
@@ -613,7 +645,7 @@ msgstr "Back to the datasets"
 msgid "dataset-selector.choose-another-dataset"
 msgstr "Choose another dataset"
 
-#: app/components/chart-published.tsx:80
+#: app/components/chart-published.tsx:81
 msgid "dataset.hasImputedValues"
 msgstr "Some data in this dataset is missing and has been interpolated to fill the gaps."
 
@@ -653,13 +685,13 @@ msgstr "Relevance"
 msgid "dataset.order.title"
 msgstr "Title"
 
-#: app/components/chart-preview.tsx:56
-#: app/components/chart-published.tsx:58
+#: app/components/chart-preview.tsx:58
+#: app/components/chart-published.tsx:59
 #: app/configurator/components/dataset-preview.tsx:36
 msgid "dataset.publicationStatus.draft.warning"
 msgstr "Careful, this dataset is only a draft.<0/><1>Don't use for reporting!</1>"
 
-#: app/components/chart-published.tsx:69
+#: app/components/chart-published.tsx:70
 msgid "dataset.publicationStatus.expires.warning"
 msgstr "Careful, the data for this chart has expired.<0/><1>Don't use for reporting!</1>"
 
@@ -683,6 +715,14 @@ msgstr "Draft"
 msgid "datatable.showing.first.rows"
 msgstr "Showing first 10 rows"
 
+#: app/configurator/map/map-chart-options.tsx:118
+msgid "fields.areaLayer.show"
+msgstr "Show layer"
+
+#: app/configurator/map/map-chart-options.tsx:259
+msgid "fields.symbolLayer.show"
+msgstr "Show layer"
+
 #: app/components/footer.tsx:66
 msgid "footer.institution.name"
 msgstr "Federal Office for the Environment FOEN"
diff --git a/app/locales/fr/messages.po b/app/locales/fr/messages.po
index 533a1dbc1..9b762a1ca 100644
--- a/app/locales/fr/messages.po
+++ b/app/locales/fr/messages.po
@@ -25,11 +25,11 @@ msgstr "Aucun résultat"
 msgid "Search “{0}”"
 msgstr "Chercher “{0}”"
 
-#: app/components/chart-preview.tsx:95
+#: app/components/chart-preview.tsx:97
 msgid "annotation.add.description"
 msgstr "[ Pas de description ]"
 
-#: app/components/chart-preview.tsx:79
+#: app/components/chart-preview.tsx:81
 msgid "annotation.add.title"
 msgstr "[ Pas de titre ]"
 
@@ -99,88 +99,88 @@ msgid "button.share"
 msgstr "Partager"
 
 #: app/charts/map/chart-map-prototype.tsx:246
-msgid "chart.map.control.data.filters"
-msgstr "Filtres de données"
+#~ msgid "chart.map.control.data.filters"
+#~ msgstr "Filtres de données"
 
 #: app/charts/map/chart-map-prototype.tsx:203
-msgid "chart.map.control.layers"
-msgstr "Couches"
+#~ msgid "chart.map.control.layers"
+#~ msgstr "Couches"
 
 #: app/charts/map/chart-map-prototype.tsx:222
-msgid "chart.map.layers.area"
-msgstr "Aplats de couleur"
+#~ msgid "chart.map.layers.area"
+#~ msgstr "Aplats de couleur"
 
 #: app/charts/map/prototype-right-controls.tsx:76
-msgid "chart.map.layers.area.add.data"
-msgstr "Ajouter des données"
+#~ msgid "chart.map.layers.area.add.data"
+#~ msgstr "Ajouter des données"
 
 #: app/charts/map/prototype-right-controls.tsx:110
-msgid "chart.map.layers.area.color.palette"
-msgstr "Palette de couleurs"
+#~ msgid "chart.map.layers.area.color.palette"
+#~ msgstr "Palette de couleurs"
 
 #: app/charts/map/prototype-right-controls.tsx:133
-msgid "chart.map.layers.area.discretization.continuous"
-msgstr "Continue"
+#~ msgid "chart.map.layers.area.discretization.continuous"
+#~ msgstr "Continue"
 
 #: app/charts/map/prototype-right-controls.tsx:153
-msgid "chart.map.layers.area.discretization.discrete"
-msgstr "Discrète"
+#~ msgid "chart.map.layers.area.discretization.discrete"
+#~ msgstr "Discrète"
 
 #: app/charts/map/prototype-right-controls.tsx:186
-msgid "chart.map.layers.area.discretization.jenks"
-msgstr "Jenks (intervalles naturels)"
+#~ msgid "chart.map.layers.area.discretization.jenks"
+#~ msgstr "Jenks (intervalles naturels)"
 
 #: app/charts/map/prototype-right-controls.tsx:140
-msgid "chart.map.layers.area.discretization.linear"
-msgstr "Interpolation linéaire"
+#~ msgid "chart.map.layers.area.discretization.linear"
+#~ msgstr "Interpolation linéaire"
 
 #: app/charts/map/prototype-right-controls.tsx:199
-msgid "chart.map.layers.area.discretization.number.class"
-msgstr "Nombre de classes"
+#~ msgid "chart.map.layers.area.discretization.number.class"
+#~ msgstr "Nombre de classes"
 
 #: app/charts/map/prototype-right-controls.tsx:173
-msgid "chart.map.layers.area.discretization.quantiles"
-msgstr "Quantiles (distribution homogène des valeurs)"
+#~ msgid "chart.map.layers.area.discretization.quantiles"
+#~ msgstr "Quantiles (distribution homogène des valeurs)"
 
 #: app/charts/map/prototype-right-controls.tsx:160
-msgid "chart.map.layers.area.discretization.quantize"
-msgstr "Intervalles égaux"
+#~ msgid "chart.map.layers.area.discretization.quantize"
+#~ msgstr "Intervalles égaux"
 
 #: app/charts/map/prototype-right-controls.tsx:91
-msgid "chart.map.layers.area.select.measure"
-msgstr "Sélectionner une variable"
+#~ msgid "chart.map.layers.area.select.measure"
+#~ msgstr "Sélectionner une variable"
 
 #: app/charts/map/chart-map-prototype.tsx:210
-msgid "chart.map.layers.base"
-msgstr "Couche de base"
+#~ msgid "chart.map.layers.base"
+#~ msgstr "Couche de base"
 
 #: app/charts/map/prototype-right-controls.tsx:59
-msgid "chart.map.layers.base.lakes"
-msgstr "Lacs"
+#~ msgid "chart.map.layers.base.lakes"
+#~ msgstr "Lacs"
 
 #: app/charts/map/prototype-right-controls.tsx:48
-msgid "chart.map.layers.base.relief"
-msgstr "Relief"
+#~ msgid "chart.map.layers.base.relief"
+#~ msgstr "Relief"
 
 #: app/charts/map/prototype-right-controls.tsx:263
-msgid "chart.map.layers.no.selected"
-msgstr "Sélectionner une couche à modifier dans le panneau de gauche."
+#~ msgid "chart.map.layers.no.selected"
+#~ msgstr "Sélectionner une couche à modifier dans le panneau de gauche."
 
 #: app/charts/map/chart-map-prototype.tsx:234
-msgid "chart.map.layers.symbol"
-msgstr "Symboles proportionnels"
+#~ msgid "chart.map.layers.symbol"
+#~ msgstr "Symboles proportionnels"
 
 #: app/charts/map/prototype-right-controls.tsx:228
-msgid "chart.map.layers.symbol.add.symbols"
-msgstr "Ajouter des cercles proportionnels"
+#~ msgid "chart.map.layers.symbol.add.symbols"
+#~ msgstr "Ajouter des cercles proportionnels"
 
 #: app/charts/map/prototype-right-controls.tsx:243
-msgid "chart.map.layers.symbol.select.measure"
-msgstr "Sélectionner une variable"
+#~ msgid "chart.map.layers.symbol.select.measure"
+#~ msgstr "Sélectionner une variable"
 
 #: app/charts/map/chart-map-prototype.tsx:274
-msgid "chart.map.warning.prototype"
-msgstr "Il s'agit d'un prototype, il n'est pas encore possible de publier des cartes."
+#~ msgid "chart.map.warning.prototype"
+#~ msgstr "Il s'agit d'un prototype, il n'est pas encore possible de publier des cartes."
 
 #: app/charts/table/table.tsx:260
 msgid "chart.published.toggle.mobile.view"
@@ -227,35 +227,35 @@ msgstr "Axe horizontal"
 msgid "controls.axis.vertical"
 msgstr "Axe vertical"
 
-#: app/configurator/components/ui-helpers.ts:463
+#: app/configurator/components/ui-helpers.ts:475
 msgid "controls.chart.type.area"
 msgstr "Surfaces"
 
-#: app/configurator/components/ui-helpers.ts:455
+#: app/configurator/components/ui-helpers.ts:467
 msgid "controls.chart.type.bar"
 msgstr "Barres"
 
-#: app/configurator/components/ui-helpers.ts:451
+#: app/configurator/components/ui-helpers.ts:463
 msgid "controls.chart.type.column"
 msgstr "Colonnes"
 
-#: app/configurator/components/ui-helpers.ts:459
+#: app/configurator/components/ui-helpers.ts:471
 msgid "controls.chart.type.line"
 msgstr "Lignes"
 
-#: app/configurator/components/ui-helpers.ts:479
+#: app/configurator/components/ui-helpers.ts:491
 msgid "controls.chart.type.map"
 msgstr "Carte"
 
-#: app/configurator/components/ui-helpers.ts:471
+#: app/configurator/components/ui-helpers.ts:483
 msgid "controls.chart.type.pie"
 msgstr "Secteurs"
 
-#: app/configurator/components/ui-helpers.ts:467
+#: app/configurator/components/ui-helpers.ts:479
 msgid "controls.chart.type.scatterplot"
 msgstr "Nuage de points"
 
-#: app/configurator/components/ui-helpers.ts:475
+#: app/configurator/components/ui-helpers.ts:487
 msgid "controls.chart.type.table"
 msgstr "Tableau"
 
@@ -326,7 +326,7 @@ msgstr "Sélectionnez un élément de design ou une dimension du jeu de données
 msgid "controls.hint.describing.chart"
 msgstr "Sélectionnez une des annotations proposées pour la modifier."
 
-#: app/configurator/components/ui-helpers.ts:435
+#: app/configurator/components/ui-helpers.ts:447
 msgid "controls.imputation"
 msgstr "Type d'imputation"
 
@@ -366,22 +366,42 @@ msgstr "Il n'y a pas de dimension temporelle!"
 msgid "controls.interactiveFilters.time.toggleTimeFilter"
 msgstr "Afficher le filtre temporel"
 
-#: app/configurator/components/ui-helpers.ts:483
+#: app/configurator/components/ui-helpers.ts:495
 msgid "controls.language.english"
 msgstr "Anglais"
 
-#: app/configurator/components/ui-helpers.ts:491
+#: app/configurator/components/ui-helpers.ts:503
 msgid "controls.language.french"
 msgstr "Français"
 
-#: app/configurator/components/ui-helpers.ts:487
+#: app/configurator/components/ui-helpers.ts:499
 msgid "controls.language.german"
 msgstr "Allemand"
 
-#: app/configurator/components/ui-helpers.ts:495
+#: app/configurator/components/ui-helpers.ts:507
 msgid "controls.language.italian"
 msgstr "Italien"
 
+#: app/configurator/components/ui-helpers.ts:403
+msgid "controls.map.layer.area"
+msgstr ""
+
+#: app/configurator/components/ui-helpers.ts:407
+msgid "controls.map.layer.symbol"
+msgstr ""
+
+#: app/configurator/components/ui-helpers.ts:399
+msgid "controls.map.settings"
+msgstr ""
+
+#: app/configurator/map/map-chart-options.tsx:77
+msgid "controls.mapSettings.showLakes"
+msgstr ""
+
+#: app/configurator/map/map-chart-options.tsx:69
+msgid "controls.mapSettings.showRelief"
+msgstr ""
+
 #: app/configurator/components/ui-helpers.ts:377
 msgid "controls.measure"
 msgstr "Variable mesurée"
@@ -398,6 +418,10 @@ msgstr "Inactif"
 msgid "controls.search.clear"
 msgstr "Effacer la recherche"
 
+#: app/configurator/map/map-chart-options.tsx:112
+msgid "controls.section.areaLayerSettings"
+msgstr ""
+
 #: app/configurator/components/chart-configurator.tsx:45
 msgid "controls.section.chart.options"
 msgstr "Paramètres graphiques"
@@ -451,6 +475,10 @@ msgstr "Filtres de données"
 msgid "controls.section.sorting"
 msgstr "Trier"
 
+#: app/configurator/map/map-chart-options.tsx:253
+msgid "controls.section.symbolLayerSettings"
+msgstr ""
+
 #: app/configurator/table/table-chart-options.tsx:469
 msgid "controls.section.tableSettings"
 msgstr "Paramètres du tableau"
@@ -519,6 +547,10 @@ msgstr "Sélectionner une variable"
 msgid "controls.select.optional"
 msgstr "optionnel"
 
+#: app/configurator/components/chart-options-selector.tsx:189
+msgid "controls.settings"
+msgstr ""
+
 #: app/configurator/table/table-chart-sorting-options.tsx:234
 msgid "controls.sorting.addDimension"
 msgstr "Ajouter une dimension"
@@ -528,11 +560,11 @@ msgstr "Ajouter une dimension"
 msgid "controls.sorting.byDimensionLabel"
 msgstr "Nom"
 
-#: app/configurator/components/ui-helpers.ts:403
+#: app/configurator/components/ui-helpers.ts:415
 msgid "controls.sorting.byDimensionLabel.ascending"
 msgstr "A → Z"
 
-#: app/configurator/components/ui-helpers.ts:407
+#: app/configurator/components/ui-helpers.ts:419
 msgid "controls.sorting.byDimensionLabel.descending"
 msgstr "Z → A"
 
@@ -540,11 +572,11 @@ msgstr "Z → A"
 msgid "controls.sorting.byMeasure"
 msgstr "Mesure"
 
-#: app/configurator/components/ui-helpers.ts:427
+#: app/configurator/components/ui-helpers.ts:439
 msgid "controls.sorting.byMeasure.ascending"
 msgstr "1 → 9"
 
-#: app/configurator/components/ui-helpers.ts:431
+#: app/configurator/components/ui-helpers.ts:443
 msgid "controls.sorting.byMeasure.descending"
 msgstr "9 → 1"
 
@@ -552,19 +584,19 @@ msgstr "9 → 1"
 msgid "controls.sorting.byTotalSize"
 msgstr "Taille totale"
 
-#: app/configurator/components/ui-helpers.ts:411
+#: app/configurator/components/ui-helpers.ts:423
 msgid "controls.sorting.byTotalSize.ascending"
 msgstr "Croissant"
 
-#: app/configurator/components/ui-helpers.ts:423
+#: app/configurator/components/ui-helpers.ts:435
 msgid "controls.sorting.byTotalSize.largestBottom"
 msgstr "Décroissant de bas en haut"
 
-#: app/configurator/components/ui-helpers.ts:415
+#: app/configurator/components/ui-helpers.ts:427
 msgid "controls.sorting.byTotalSize.largestFirst"
 msgstr "Décroissant"
 
-#: app/configurator/components/ui-helpers.ts:419
+#: app/configurator/components/ui-helpers.ts:431
 msgid "controls.sorting.byTotalSize.largestTop"
 msgstr "Décroissant de haut en bas"
 
@@ -576,7 +608,7 @@ msgstr "Supprimer la dimension de tri"
 msgid "controls.sorting.selectDimension"
 msgstr "Sélectionner une dimension…"
 
-#: app/configurator/components/ui-helpers.ts:399
+#: app/configurator/components/ui-helpers.ts:411
 #: app/configurator/table/table-chart-sorting-options.tsx:305
 msgid "controls.sorting.sortBy"
 msgstr "Trier par"
@@ -613,7 +645,7 @@ msgstr "Revenir aux jeux de données"
 msgid "dataset-selector.choose-another-dataset"
 msgstr "Choisir un autre jeu de données"
 
-#: app/components/chart-published.tsx:80
+#: app/components/chart-published.tsx:81
 msgid "dataset.hasImputedValues"
 msgstr "Certaines données de cet ensemble de données sont manquantes et ont été interpolées pour combler les lacunes."
 
@@ -653,13 +685,13 @@ msgstr ""
 msgid "dataset.order.title"
 msgstr ""
 
-#: app/components/chart-preview.tsx:56
-#: app/components/chart-published.tsx:58
+#: app/components/chart-preview.tsx:58
+#: app/components/chart-published.tsx:59
 #: app/configurator/components/dataset-preview.tsx:36
 msgid "dataset.publicationStatus.draft.warning"
 msgstr "Attention, ce jeu de données est à l'état d'ébauche.<0/><1>Ne l'utilisez pas pour une publication!</1>"
 
-#: app/components/chart-published.tsx:69
+#: app/components/chart-published.tsx:70
 msgid "dataset.publicationStatus.expires.warning"
 msgstr "Attention, ce jeu de données est expiré.<0/><1>Ne l'utilisez pas pour une publication!</1>"
 
@@ -683,6 +715,14 @@ msgstr "Brouillon"
 msgid "datatable.showing.first.rows"
 msgstr "Seules les 10 premières lignes sont affichées"
 
+#: app/configurator/map/map-chart-options.tsx:118
+msgid "fields.areaLayer.show"
+msgstr ""
+
+#: app/configurator/map/map-chart-options.tsx:259
+msgid "fields.symbolLayer.show"
+msgstr ""
+
 #: app/components/footer.tsx:66
 msgid "footer.institution.name"
 msgstr "Office fédéral de l'environnement OFEV"
diff --git a/app/locales/it/messages.po b/app/locales/it/messages.po
index a7cbe6cc8..5fb7d5b55 100644
--- a/app/locales/it/messages.po
+++ b/app/locales/it/messages.po
@@ -25,11 +25,11 @@ msgstr "Nessun risultato"
 msgid "Search “{0}”"
 msgstr "Cerca “{0}”"
 
-#: app/components/chart-preview.tsx:95
+#: app/components/chart-preview.tsx:97
 msgid "annotation.add.description"
 msgstr "[ Nessuna descrizione ]"
 
-#: app/components/chart-preview.tsx:79
+#: app/components/chart-preview.tsx:81
 msgid "annotation.add.title"
 msgstr "[ Nessun titolo ]"
 
@@ -99,88 +99,88 @@ msgid "button.share"
 msgstr "Condividi"
 
 #: app/charts/map/chart-map-prototype.tsx:246
-msgid "chart.map.control.data.filters"
-msgstr "Filtri di dati"
+#~ msgid "chart.map.control.data.filters"
+#~ msgstr "Filtri di dati"
 
 #: app/charts/map/chart-map-prototype.tsx:203
-msgid "chart.map.control.layers"
-msgstr "Livelli"
+#~ msgid "chart.map.control.layers"
+#~ msgstr "Livelli"
 
 #: app/charts/map/chart-map-prototype.tsx:222
-msgid "chart.map.layers.area"
-msgstr "Aree"
+#~ msgid "chart.map.layers.area"
+#~ msgstr "Aree"
 
 #: app/charts/map/prototype-right-controls.tsx:76
-msgid "chart.map.layers.area.add.data"
-msgstr "Mostra le aree"
+#~ msgid "chart.map.layers.area.add.data"
+#~ msgstr "Mostra le aree"
 
 #: app/charts/map/prototype-right-controls.tsx:110
-msgid "chart.map.layers.area.color.palette"
-msgstr "Palette di colore"
+#~ msgid "chart.map.layers.area.color.palette"
+#~ msgstr "Palette di colore"
 
 #: app/charts/map/prototype-right-controls.tsx:133
-msgid "chart.map.layers.area.discretization.continuous"
-msgstr "Continuo"
+#~ msgid "chart.map.layers.area.discretization.continuous"
+#~ msgstr "Continuo"
 
 #: app/charts/map/prototype-right-controls.tsx:153
-msgid "chart.map.layers.area.discretization.discrete"
-msgstr "Discreto"
+#~ msgid "chart.map.layers.area.discretization.discrete"
+#~ msgstr "Discreto"
 
 #: app/charts/map/prototype-right-controls.tsx:186
-msgid "chart.map.layers.area.discretization.jenks"
-msgstr "Jenks (interruzioni naturali)"
+#~ msgid "chart.map.layers.area.discretization.jenks"
+#~ msgstr "Jenks (interruzioni naturali)"
 
 #: app/charts/map/prototype-right-controls.tsx:140
-msgid "chart.map.layers.area.discretization.linear"
-msgstr "Interpolazione lineare"
+#~ msgid "chart.map.layers.area.discretization.linear"
+#~ msgstr "Interpolazione lineare"
 
 #: app/charts/map/prototype-right-controls.tsx:199
-msgid "chart.map.layers.area.discretization.number.class"
-msgstr "Numero di classi"
+#~ msgid "chart.map.layers.area.discretization.number.class"
+#~ msgstr "Numero di classi"
 
 #: app/charts/map/prototype-right-controls.tsx:173
-msgid "chart.map.layers.area.discretization.quantiles"
-msgstr "Quantili (distribuzione omogenea dei valori)"
+#~ msgid "chart.map.layers.area.discretization.quantiles"
+#~ msgstr "Quantili (distribuzione omogenea dei valori)"
 
 #: app/charts/map/prototype-right-controls.tsx:160
-msgid "chart.map.layers.area.discretization.quantize"
-msgstr "Intervalli uguali"
+#~ msgid "chart.map.layers.area.discretization.quantize"
+#~ msgstr "Intervalli uguali"
 
 #: app/charts/map/prototype-right-controls.tsx:91
-msgid "chart.map.layers.area.select.measure"
-msgstr "Seleziona una variabile"
+#~ msgid "chart.map.layers.area.select.measure"
+#~ msgstr "Seleziona una variabile"
 
 #: app/charts/map/chart-map-prototype.tsx:210
-msgid "chart.map.layers.base"
-msgstr "Livello di base"
+#~ msgid "chart.map.layers.base"
+#~ msgstr "Livello di base"
 
 #: app/charts/map/prototype-right-controls.tsx:59
-msgid "chart.map.layers.base.lakes"
-msgstr "Laghi"
+#~ msgid "chart.map.layers.base.lakes"
+#~ msgstr "Laghi"
 
 #: app/charts/map/prototype-right-controls.tsx:48
-msgid "chart.map.layers.base.relief"
-msgstr "Rilievo"
+#~ msgid "chart.map.layers.base.relief"
+#~ msgstr "Rilievo"
 
 #: app/charts/map/prototype-right-controls.tsx:263
-msgid "chart.map.layers.no.selected"
-msgstr "Seleziona un livello da editare nel pannello di sinistra."
+#~ msgid "chart.map.layers.no.selected"
+#~ msgstr "Seleziona un livello da editare nel pannello di sinistra."
 
 #: app/charts/map/chart-map-prototype.tsx:234
-msgid "chart.map.layers.symbol"
-msgstr "Simboli"
+#~ msgid "chart.map.layers.symbol"
+#~ msgstr "Simboli"
 
 #: app/charts/map/prototype-right-controls.tsx:228
-msgid "chart.map.layers.symbol.add.symbols"
-msgstr "Mostra simboli proporzionali"
+#~ msgid "chart.map.layers.symbol.add.symbols"
+#~ msgstr "Mostra simboli proporzionali"
 
 #: app/charts/map/prototype-right-controls.tsx:243
-msgid "chart.map.layers.symbol.select.measure"
-msgstr "Seleziona una variabile"
+#~ msgid "chart.map.layers.symbol.select.measure"
+#~ msgstr "Seleziona una variabile"
 
 #: app/charts/map/chart-map-prototype.tsx:274
-msgid "chart.map.warning.prototype"
-msgstr "Questa mappa è un prototipo e non può essere pubblicata."
+#~ msgid "chart.map.warning.prototype"
+#~ msgstr "Questa mappa è un prototipo e non può essere pubblicata."
 
 #: app/charts/table/table.tsx:260
 msgid "chart.published.toggle.mobile.view"
@@ -227,35 +227,35 @@ msgstr "Asse orizzontale"
 msgid "controls.axis.vertical"
 msgstr "Asse verticale"
 
-#: app/configurator/components/ui-helpers.ts:463
+#: app/configurator/components/ui-helpers.ts:475
 msgid "controls.chart.type.area"
 msgstr "Aree"
 
-#: app/configurator/components/ui-helpers.ts:455
+#: app/configurator/components/ui-helpers.ts:467
 msgid "controls.chart.type.bar"
 msgstr "Barre"
 
-#: app/configurator/components/ui-helpers.ts:451
+#: app/configurator/components/ui-helpers.ts:463
 msgid "controls.chart.type.column"
 msgstr "Colonne"
 
-#: app/configurator/components/ui-helpers.ts:459
+#: app/configurator/components/ui-helpers.ts:471
 msgid "controls.chart.type.line"
 msgstr "Linee"
 
-#: app/configurator/components/ui-helpers.ts:479
+#: app/configurator/components/ui-helpers.ts:491
 msgid "controls.chart.type.map"
 msgstr "Mappa"
 
-#: app/configurator/components/ui-helpers.ts:471
+#: app/configurator/components/ui-helpers.ts:483
 msgid "controls.chart.type.pie"
 msgstr "Torta"
 
-#: app/configurator/components/ui-helpers.ts:467
+#: app/configurator/components/ui-helpers.ts:479
 msgid "controls.chart.type.scatterplot"
 msgstr "Scatterplot"
 
-#: app/configurator/components/ui-helpers.ts:475
+#: app/configurator/components/ui-helpers.ts:487
 msgid "controls.chart.type.table"
 msgstr "Tabella"
 
@@ -326,7 +326,7 @@ msgstr "Seleziona un elemento di design o una dimensione dei dati per modificarn
 msgid "controls.hint.describing.chart"
 msgstr "Seleziona una delle annotazioni proposte per modificarla."
 
-#: app/configurator/components/ui-helpers.ts:435
+#: app/configurator/components/ui-helpers.ts:447
 msgid "controls.imputation"
 msgstr "Tipo di imputazione"
 
@@ -366,22 +366,42 @@ msgstr "Nessuna dimensione temporale disponibile!"
 msgid "controls.interactiveFilters.time.toggleTimeFilter"
 msgstr "Mostra i filtri temporali"
 
-#: app/configurator/components/ui-helpers.ts:483
+#: app/configurator/components/ui-helpers.ts:495
 msgid "controls.language.english"
 msgstr "Inglese"
 
-#: app/configurator/components/ui-helpers.ts:491
+#: app/configurator/components/ui-helpers.ts:503
 msgid "controls.language.french"
 msgstr "Francese"
 
-#: app/configurator/components/ui-helpers.ts:487
+#: app/configurator/components/ui-helpers.ts:499
 msgid "controls.language.german"
 msgstr "Tedesco"
 
-#: app/configurator/components/ui-helpers.ts:495
+#: app/configurator/components/ui-helpers.ts:507
 msgid "controls.language.italian"
 msgstr "Italiano"
 
+#: app/configurator/components/ui-helpers.ts:403
+msgid "controls.map.layer.area"
+msgstr ""
+
+#: app/configurator/components/ui-helpers.ts:407
+msgid "controls.map.layer.symbol"
+msgstr ""
+
+#: app/configurator/components/ui-helpers.ts:399
+msgid "controls.map.settings"
+msgstr ""
+
+#: app/configurator/map/map-chart-options.tsx:77
+msgid "controls.mapSettings.showLakes"
+msgstr ""
+
+#: app/configurator/map/map-chart-options.tsx:69
+msgid "controls.mapSettings.showRelief"
+msgstr ""
+
 #: app/configurator/components/ui-helpers.ts:377
 msgid "controls.measure"
 msgstr "Misura"
@@ -398,6 +418,10 @@ msgstr "Inattivo"
 msgid "controls.search.clear"
 msgstr "Cancella la ricerca"
 
+#: app/configurator/map/map-chart-options.tsx:112
+msgid "controls.section.areaLayerSettings"
+msgstr ""
+
 #: app/configurator/components/chart-configurator.tsx:45
 msgid "controls.section.chart.options"
 msgstr "Opzioni del grafico"
@@ -451,6 +475,10 @@ msgstr "Filtri di dati"
 msgid "controls.section.sorting"
 msgstr "Ordina"
 
+#: app/configurator/map/map-chart-options.tsx:253
+msgid "controls.section.symbolLayerSettings"
+msgstr ""
+
 #: app/configurator/table/table-chart-options.tsx:469
 msgid "controls.section.tableSettings"
 msgstr "Impostazioni della tabella"
@@ -519,6 +547,10 @@ msgstr "Seleziona una misura"
 msgid "controls.select.optional"
 msgstr "facoltativo"
 
+#: app/configurator/components/chart-options-selector.tsx:189
+msgid "controls.settings"
+msgstr ""
+
 #: app/configurator/table/table-chart-sorting-options.tsx:234
 msgid "controls.sorting.addDimension"
 msgstr "Aggiungi una dimensione"
@@ -528,11 +560,11 @@ msgstr "Aggiungi una dimensione"
 msgid "controls.sorting.byDimensionLabel"
 msgstr "Nome"
 
-#: app/configurator/components/ui-helpers.ts:403
+#: app/configurator/components/ui-helpers.ts:415
 msgid "controls.sorting.byDimensionLabel.ascending"
 msgstr "A → Z"
 
-#: app/configurator/components/ui-helpers.ts:407
+#: app/configurator/components/ui-helpers.ts:419
 msgid "controls.sorting.byDimensionLabel.descending"
 msgstr "Z → A"
 
@@ -540,11 +572,11 @@ msgstr "Z → A"
 msgid "controls.sorting.byMeasure"
 msgstr "Misura"
 
-#: app/configurator/components/ui-helpers.ts:427
+#: app/configurator/components/ui-helpers.ts:439
 msgid "controls.sorting.byMeasure.ascending"
 msgstr "1 → 9"
 
-#: app/configurator/components/ui-helpers.ts:431
+#: app/configurator/components/ui-helpers.ts:443
 msgid "controls.sorting.byMeasure.descending"
 msgstr "9 → 1"
 
@@ -552,19 +584,19 @@ msgstr "9 → 1"
 msgid "controls.sorting.byTotalSize"
 msgstr "Grandezza totale"
 
-#: app/configurator/components/ui-helpers.ts:411
+#: app/configurator/components/ui-helpers.ts:423
 msgid "controls.sorting.byTotalSize.ascending"
 msgstr "Il più grande per ultimo"
 
-#: app/configurator/components/ui-helpers.ts:423
+#: app/configurator/components/ui-helpers.ts:435
 msgid "controls.sorting.byTotalSize.largestBottom"
 msgstr "Il più grande sotto"
 
-#: app/configurator/components/ui-helpers.ts:415
+#: app/configurator/components/ui-helpers.ts:427
 msgid "controls.sorting.byTotalSize.largestFirst"
 msgstr "Il più grande per primo"
 
-#: app/configurator/components/ui-helpers.ts:419
+#: app/configurator/components/ui-helpers.ts:431
 msgid "controls.sorting.byTotalSize.largestTop"
 msgstr "Il più grande sopra"
 
@@ -576,7 +608,7 @@ msgstr "Rimuovi l'ordinamento"
 msgid "controls.sorting.selectDimension"
 msgstr "Seleziona una dimensione ..."
 
-#: app/configurator/components/ui-helpers.ts:399
+#: app/configurator/components/ui-helpers.ts:411
 #: app/configurator/table/table-chart-sorting-options.tsx:305
 msgid "controls.sorting.sortBy"
 msgstr "Ordina per"
@@ -613,7 +645,7 @@ msgstr "Torna ai set di dati"
 msgid "dataset-selector.choose-another-dataset"
 msgstr "Scegli un altro set di dati"
 
-#: app/components/chart-published.tsx:80
+#: app/components/chart-published.tsx:81
 msgid "dataset.hasImputedValues"
 msgstr "In questo set di dati mancano alcuni dati. Questi sono stati interpolati per colmare le lacune.."
 
@@ -653,13 +685,13 @@ msgstr ""
 msgid "dataset.order.title"
 msgstr ""
 
-#: app/components/chart-preview.tsx:56
-#: app/components/chart-published.tsx:58
+#: app/components/chart-preview.tsx:58
+#: app/components/chart-published.tsx:59
 #: app/configurator/components/dataset-preview.tsx:36
 msgid "dataset.publicationStatus.draft.warning"
 msgstr "Attenzione, questo set di dati è una bozza.<0/><1>Non utilizzare questo grafico per un rapporto!</1>"
 
-#: app/components/chart-published.tsx:69
+#: app/components/chart-published.tsx:70
 msgid "dataset.publicationStatus.expires.warning"
 msgstr "Attenzione, questo set di dati è scaduto.<0/><1>Non utilizzare questo grafico per un rapporto!</1>"
 
@@ -683,6 +715,14 @@ msgstr ""
 msgid "datatable.showing.first.rows"
 msgstr "Sono mostrate soltanto le prime 10 righe"
 
+#: app/configurator/map/map-chart-options.tsx:118
+msgid "fields.areaLayer.show"
+msgstr ""
+
+#: app/configurator/map/map-chart-options.tsx:259
+msgid "fields.symbolLayer.show"
+msgstr ""
+
 #: app/components/footer.tsx:66
 msgid "footer.institution.name"
 msgstr "Ufficio federale dell'ambiente UFAM"
diff --git a/app/package.json b/app/package.json
index 37a091d26..40bc8c1bf 100644
--- a/app/package.json
+++ b/app/package.json
@@ -76,9 +76,11 @@
     "sparql-http-client": "^2.2.2",
     "theme-ui": "^0.10.0",
     "topojson-client": "^3.1.0",
+    "topojson-server": "^3.0.1",
     "urql": "^2.0.5",
     "use-debounce": "^7.0.0",
-    "use-immer": "^0.5.1"
+    "use-immer": "^0.5.1",
+    "wellknown": "^0.5.0"
   },
   "peerDependencies": {
     "@babel/runtime": "^7.8.4",
@@ -122,6 +124,8 @@
     "@types/react-table": "^7.0.25",
     "@types/react-window": "^1.8.2",
     "@types/sparql-http-client": "^2.2.5",
+    "@types/topojson-server": "^3.0.1",
+    "@types/wellknown": "^0.5.1",
     "babel-core": "^7.0.0-bridge.0",
     "jest": "^27.3.0",
     "react-inspector": "^5.1.1",
diff --git a/app/pages/api/client-env.ts b/app/pages/api/client-env.ts
index 6a3203c09..01b521dd4 100644
--- a/app/pages/api/client-env.ts
+++ b/app/pages/api/client-env.ts
@@ -16,6 +16,7 @@ export default async function clientEnvApi(
           GA_TRACKING_ID: process.env.GA_TRACKING_ID,
           SPARQL_EDITOR: process.env.SPARQL_EDITOR,
           SPARQL_ENDPOINT: process.env.SPARQL_ENDPOINT,
+          SPARQL_GEO_ENDPOINT: process.env.SPARQL_GEO_ENDPOINT,
           PUBLIC_URL: process.env.PUBLIC_URL,
           GRAPHQL_ENDPOINT: process.env.GRAPHQL_ENDPOINT,
         })}`;
diff --git a/app/pages/api/graphql.ts b/app/pages/api/graphql.ts
index 96ab756cd..ffbf60a4c 100644
--- a/app/pages/api/graphql.ts
+++ b/app/pages/api/graphql.ts
@@ -11,6 +11,10 @@ import {
   createOrganizationLoader,
   createThemeLoader,
 } from "../../rdf/query-cube-metadata";
+import { createGeoCoordinatesLoader } from "../../rdf/query-geo-coordinates";
+import { createGeoShapesLoader } from "../../rdf/query-geo-shapes";
+
+const MAX_BATCH_SIZE = 500;
 
 const cors = configureCors();
 
@@ -26,6 +30,16 @@ const server = new ApolloServer({
       dimensionValues: new DataLoader(createCubeDimensionValuesLoader(), {
         cacheKeyFn: (dim) => dim.dimension.path?.value,
       }),
+      geoCoordinates: new DataLoader(
+        createGeoCoordinatesLoader({ locale: req.headers["accept-language"] }),
+        {
+          maxBatchSize: MAX_BATCH_SIZE * 0.5,
+        }
+      ),
+      geoShapes: new DataLoader(
+        createGeoShapesLoader({ locale: req.headers["accept-language"] }),
+        { maxBatchSize: MAX_BATCH_SIZE }
+      ),
       themes: new DataLoader(
         createThemeLoader({ locale: req.headers["accept-language"] })
       ),
diff --git a/app/pages/experimental/map.tsx b/app/pages/experimental/map.tsx
deleted file mode 100644
index 1acef31ec..000000000
--- a/app/pages/experimental/map.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import * as React from "react";
-
-import { Box } from "theme-ui";
-import { ChartMapVisualization } from "../../charts/map/chart-map-prototype";
-import { AppLayout } from "../../components/layout";
-
-function Map() {
-  return (
-    <AppLayout>
-      <Box
-        sx={{
-          display: "grid",
-          gridTemplateColumns:
-            "minmax(12rem, 20rem) minmax(22rem, 1fr) minmax(12rem, 20rem)",
-
-          width: "100%",
-          position: "fixed",
-          // FIXME replace 96px with actual header size
-          top: "96px",
-          height: "calc(100vh - 96px)",
-        }}
-      >
-        <ChartMapVisualization />
-      </Box>
-    </AppLayout>
-  );
-}
-
-export default Map;
diff --git a/app/rdf/namespace.ts b/app/rdf/namespace.ts
index b2e7b7601..1d3d1cb8b 100644
--- a/app/rdf/namespace.ts
+++ b/app/rdf/namespace.ts
@@ -3,14 +3,16 @@ import namespace from "@rdfjs/namespace";
 export {
   dcat,
   dcterms,
+  geo,
   qudt,
   rdf,
   rdfs,
   schema,
-  vcard,
+  sh,
+  skos,
   time,
+  vcard,
   xsd,
-  sh,
 } from "@tpluscode/rdf-ns-builders";
 
 export const classifications = namespace(
diff --git a/app/rdf/parse.ts b/app/rdf/parse.ts
index 34ffec677..5bcd007c8 100644
--- a/app/rdf/parse.ts
+++ b/app/rdf/parse.ts
@@ -179,6 +179,7 @@ export const parseCubeDimension = ({
       isKeyDimension,
       isMeasureDimension,
       hasUndefinedValues,
+      unit: dimensionUnit,
       dataType: dataType?.value,
       name: dim.out(ns.schema.name, outOpts).value ?? dim.path?.value!,
       dataKind: dataKindTerm?.equals(ns.time.GeneralDateTimeDescription)
@@ -199,7 +200,6 @@ export const parseCubeDimension = ({
         : scaleTypeTerm?.equals(ns.qudt.IntervalScale)
         ? "Interval"
         : undefined,
-      unit: dimensionUnit,
     },
   };
 };
diff --git a/app/rdf/queries.ts b/app/rdf/queries.ts
index a7223e620..110630fe5 100644
--- a/app/rdf/queries.ts
+++ b/app/rdf/queries.ts
@@ -321,7 +321,7 @@ const groupLabelsPerValue = ({
   return [...grouped.values()];
 };
 
-const dimensionIsVersioned = (dimension: CubeDimension) =>
+export const dimensionIsVersioned = (dimension: CubeDimension) =>
   dimension.out(ns.schema.version)?.value ? true : false;
 
 const getCubeDimensionValuesWithLabels = async ({
diff --git a/app/rdf/query-geo-coordinates.ts b/app/rdf/query-geo-coordinates.ts
new file mode 100644
index 000000000..0adf4f4bd
--- /dev/null
+++ b/app/rdf/query-geo-coordinates.ts
@@ -0,0 +1,74 @@
+import { SELECT, sparql } from "@tpluscode/sparql-builder";
+import { ResolvedDimension } from "../graphql/shared-types";
+import * as ns from "./namespace";
+import { dimensionIsVersioned } from "./queries";
+import { sparqlClient } from "./sparql-client";
+
+export interface GeoCoordinates {
+  iri: string;
+  label: string;
+  latitude: number;
+  longitude: number;
+}
+
+/**
+ * Creates a GeoCoordinates loader.
+ */
+export const createGeoCoordinatesLoader =
+  ({ locale }: { locale: string }) =>
+  async (dimensions: readonly ResolvedDimension[]) => {
+    const result: GeoCoordinates[][] = [];
+
+    for (const dimension of dimensions) {
+      const isVersioned = dimensionIsVersioned(dimension.dimension);
+
+      const query = SELECT.DISTINCT`?dimension ?label ?latitude ?longitude`
+        .WHERE`
+        ${dimension.cube.term} ${ns.cube.observationSet} ?observationSet .
+        ?observationSet ${ns.cube.observation} ?observation .
+        ?observation ${dimension.dimension.path} ${
+        isVersioned
+          ? `?dimension_versioned . ?dimension_versioned ${sparql`${ns.schema.sameAs}`.toString(
+              { prologue: false }
+            )} ?dimension ;`
+          : `?dimension`
+      }
+          ${ns.schema.latitude} ?latitude ;
+          ${ns.schema.longitude} ?longitude .
+
+        OPTIONAL {
+          ${isVersioned ? "?dimension_versioned" : "?dimension"} ${
+        ns.schema.name
+      } ?label .
+          FILTER(LANG(?label) = '${locale}')
+        }
+
+        OPTIONAL {
+          ${isVersioned ? "?dimension_versioned" : "?dimension"} ${
+        ns.schema.name
+      } ?label .
+        }
+      `;
+
+      let fetchedGeoCoordinates: any[] = [];
+
+      try {
+        fetchedGeoCoordinates = await query.execute(sparqlClient.query, {
+          operation: "postUrlencoded",
+        });
+      } catch (e) {
+        console.error(e);
+      }
+
+      result.push(
+        fetchedGeoCoordinates.map((d) => ({
+          iri: d.dimension.value,
+          label: d.label.value,
+          latitude: +d.latitude.value,
+          longitude: +d.longitude.value,
+        }))
+      );
+    }
+
+    return result;
+  };
diff --git a/app/rdf/query-geo-shapes.ts b/app/rdf/query-geo-shapes.ts
new file mode 100644
index 000000000..b572630c6
--- /dev/null
+++ b/app/rdf/query-geo-shapes.ts
@@ -0,0 +1,208 @@
+import { SELECT } from "@tpluscode/sparql-builder";
+import { groupBy } from "lodash";
+import { SPARQL_GEO_ENDPOINT } from "../domain/env";
+import * as ns from "./namespace";
+import { sparqlClient } from "./sparql-client";
+
+export interface RawGeoShape {
+  iri: string;
+  label: string;
+  level: number;
+  wktString?: string;
+}
+
+interface NarrowerValue {
+  iri: string;
+  narrower: string | undefined;
+}
+
+/**
+ * Creates a GeoShapes loader.
+ *
+ * @param dimensionIris IRIs of a GeoShape dimension's values
+ */
+export const createGeoShapesLoader =
+  ({ locale }: { locale: string }) =>
+  async (dimensionIris?: readonly string[]): Promise<RawGeoShape[]> => {
+    if (dimensionIris) {
+      const preparedDimensionIris = dimensionIris.map((d) => `<${d}>`);
+
+      const labelsQuery = SELECT`?iri ?label`.WHERE`
+      VALUES ?iri {
+        ${preparedDimensionIris}
+      }
+
+      OPTIONAL {
+        ?iri ${ns.schema.name} ?label .
+        FILTER(LANG(?label) = '${locale}')
+      }
+
+      OPTIONAL {
+        ?iri ${ns.schema.name} ?label .
+      }
+    `;
+
+      let labels: any[] = [];
+
+      try {
+        labels = await labelsQuery.execute(sparqlClient.query, {
+          operation: "postUrlencoded",
+        });
+      } catch (e) {
+        console.error(e);
+      }
+
+      const groupedLabels = groupBy(
+        labels.map((d) => ({
+          iri: d.iri.value,
+          label: d.label.value,
+        })),
+        (d) => d.iri
+      );
+
+      const wktQuery = SELECT`?iri ?WKT`.WHERE`
+        VALUES ?iri {
+          ${preparedDimensionIris}
+        }
+
+        ?iri ${ns.geo.hasGeometry} ?geometry .
+
+        SERVICE <${SPARQL_GEO_ENDPOINT}> {
+          ?geometry ${ns.geo.asWKT} ?WKT
+        }
+      `;
+
+      let wktStrings: any[] = [];
+
+      try {
+        wktStrings = await wktQuery.execute(sparqlClient.query, {
+          operation: "postUrlencoded",
+        });
+      } catch (e) {
+        console.error(e);
+      }
+
+      const groupedWktStrings = groupBy(
+        wktStrings.map((d) => ({
+          iri: d.iri.value,
+          wktString: d.WKT.value,
+        })),
+        (d) => d.iri
+      );
+
+      const narrowerQuery = SELECT`?iri ?narrower`.WHERE`
+        VALUES ?iri {
+          ${preparedDimensionIris}
+        }
+
+        OPTIONAL {
+          ?iri ${ns.skos.narrower} ?narrower .
+          FILTER(?narrower IN (${preparedDimensionIris.join(",")}))
+        }
+    `;
+
+      let narrowerValues: any[] = [];
+
+      try {
+        narrowerValues = await narrowerQuery.execute(sparqlClient.query, {
+          operation: "postUrlencoded",
+        });
+      } catch (e) {
+        console.error(e);
+      }
+
+      const parsedNarrowerValues: NarrowerValue[] = narrowerValues.map((d) => ({
+        iri: d.iri.value,
+        narrower: d.narrower?.value,
+      }));
+
+      const groupedHierarchy = groupBy(
+        createHierarchy({
+          dimensionIris,
+          narrowerValues: parsedNarrowerValues,
+        }),
+        (d) => d.iri
+      );
+
+      const result = dimensionIris.map((iri) => ({
+        iri,
+        label: groupedLabels[iri][0].label || iri,
+        level: groupedHierarchy[iri][0].level,
+        // there might be iris without shapes
+        wktString: groupedWktStrings[iri]?.[0].wktString,
+      }));
+
+      return result;
+    } else {
+      return [];
+    }
+  };
+
+interface RawHierarchyLevel {
+  iri: string;
+  level: number;
+}
+
+export interface HierarchyLevel extends RawHierarchyLevel {
+  label: string;
+}
+
+/**
+ * Creates a hierarchy based on a geo dimension starting from lowest level
+ * (iris that do not contain skos:narrower) and ending when all the iris
+ * are added to the hierarchy.
+ *
+ * @param dimensionIris IRIs of a GeoShape dimension's values
+ * @param narrowerValues objects containing information on the hierarchy
+ */
+const createHierarchy = ({
+  dimensionIris,
+  narrowerValues,
+}: {
+  dimensionIris: readonly string[];
+  narrowerValues: NarrowerValue[];
+}) => {
+  const go = ({
+    tree,
+    level = 1,
+    iris,
+  }: {
+    tree: RawHierarchyLevel[];
+    level?: number;
+    iris: string[];
+  }): RawHierarchyLevel[] => {
+    if (!tree.length) {
+      tree.push(...iris.map((d) => ({ iri: d, level })));
+    }
+
+    if (tree.length === dimensionIris.length) {
+      return tree;
+    }
+
+    const parentValues = [] as RawHierarchyLevel[];
+    let parentIris = [] as string[];
+
+    const groupedNarrower = groupBy(narrowerValues, (d) => d.narrower);
+
+    for (const iri of iris) {
+      const parent = groupedNarrower[iri];
+      parentIris = parentValues.map((d) => d.iri);
+
+      if (parent && !parentIris.includes(parent[0].iri)) {
+        parentValues.push({ iri: parent[0].iri, level: level + 1 });
+      }
+    }
+
+    if (parentValues.length) {
+      tree.push(...parentValues);
+    }
+
+    return go({ tree, level: level + 1, iris: parentIris });
+  };
+
+  const lowestLevelIris = narrowerValues
+    .filter((d) => !d.narrower)
+    .map((d) => d.iri);
+
+  return go({ tree: [], iris: lowestLevelIris });
+};
diff --git a/codegen.yml b/codegen.yml
index 5c9018656..8f4e9d427 100644
--- a/codegen.yml
+++ b/codegen.yml
@@ -25,11 +25,14 @@ generates:
         DimensionValue: "../domain/data#DimensionValue"
         RawObservation: "../domain/data#RawObservation"
         Filters: "../configurator#Filters"
+        GeoShape: "../domain/data#GeoShape"
       mappers:
         DataCube: "./shared-types#ResolvedDataCube"
         ObservationsQuery: "./shared-types#ResolvedObservationsQuery"
         Measure: "./shared-types#ResolvedMeasure"
         Dimension: "./shared-types#ResolvedDimension"
+        GeoCoordinatesDimension: "./shared-types#ResolvedDimension"
+        GeoShapesDimension: "./shared-types#ResolvedDimension"
         NominalDimension: "./shared-types#ResolvedDimension"
         OrdinalDimension: "./shared-types#ResolvedDimension"
         TemporalDimension: "./shared-types#ResolvedDimension"
diff --git a/yarn.lock b/yarn.lock
index 9292a7974..ec99050ee 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -93,6 +93,13 @@
   dependencies:
     "@babel/highlight" "^7.16.0"
 
+"@babel/code-frame@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.16.7.tgz#44416b6bd7624b998f5b1af5d470856c40138789"
+  integrity sha512-iAXqUn8IIeBTNd72xsFlgaXHkMBMt6y4HJp1tIaK465CWLT/fG1aqB7ykr95gHHmlBdGbFeWWfyB4NJJ0nmeIg==
+  dependencies:
+    "@babel/highlight" "^7.16.7"
+
 "@babel/compat-data@^7.14.5", "@babel/compat-data@^7.15.0":
   version "7.15.0"
   resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.15.0.tgz#2dbaf8b85334796cafbb0f5793a90a2fc010b176"
@@ -103,20 +110,25 @@
   resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.16.0.tgz#ea269d7f78deb3a7826c39a4048eecda541ebdaa"
   integrity sha512-DGjt2QZse5SGd9nfOSqO4WLJ8NN/oHkijbXbPrxuoJO3oIPJL3TciZs9FX+cOHNiY9E9l0opL8g7BmLe3T+9ew==
 
+"@babel/compat-data@^7.16.4":
+  version "7.16.8"
+  resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.16.8.tgz#31560f9f29fdf1868de8cb55049538a1b9732a60"
+  integrity sha512-m7OkX0IdKLKPpBlJtF561YJal5y/jyI5fNfWbPxh2D/nbzzGI4qRyrD8xO2jB24u7l+5I2a43scCG2IrfjC50Q==
+
 "@babel/core@7.12.9", "@babel/core@^7.0.0", "@babel/core@^7.1.0", "@babel/core@^7.12.3", "@babel/core@^7.12.9", "@babel/core@^7.14.6", "@babel/core@^7.7.2", "@babel/core@^7.7.5", "@babel/core@^7.7.7":
-  version "7.16.0"
-  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.16.0.tgz#c4ff44046f5fe310525cc9eb4ef5147f0c5374d4"
-  integrity sha512-mYZEvshBRHGsIAiyH5PzCFTCfbWfoYbO/jcSdXQSUQu1/pW0xDZAUP7KEc32heqWTAfAHhV9j1vH8Sav7l+JNQ==
-  dependencies:
-    "@babel/code-frame" "^7.16.0"
-    "@babel/generator" "^7.16.0"
-    "@babel/helper-compilation-targets" "^7.16.0"
-    "@babel/helper-module-transforms" "^7.16.0"
-    "@babel/helpers" "^7.16.0"
-    "@babel/parser" "^7.16.0"
-    "@babel/template" "^7.16.0"
-    "@babel/traverse" "^7.16.0"
-    "@babel/types" "^7.16.0"
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.16.7.tgz#db990f931f6d40cb9b87a0dc7d2adc749f1dcbcf"
+  integrity sha512-aeLaqcqThRNZYmbMqtulsetOQZ/5gbR/dWruUCJcpas4Qoyy+QeagfDsPdMrqwsPRDNxJvBlRiZxxX7THO7qtA==
+  dependencies:
+    "@babel/code-frame" "^7.16.7"
+    "@babel/generator" "^7.16.7"
+    "@babel/helper-compilation-targets" "^7.16.7"
+    "@babel/helper-module-transforms" "^7.16.7"
+    "@babel/helpers" "^7.16.7"
+    "@babel/parser" "^7.16.7"
+    "@babel/template" "^7.16.7"
+    "@babel/traverse" "^7.16.7"
+    "@babel/types" "^7.16.7"
     convert-source-map "^1.7.0"
     debug "^4.1.0"
     gensync "^1.0.0-beta.2"
@@ -142,6 +154,15 @@
     jsesc "^2.5.1"
     source-map "^0.5.0"
 
+"@babel/generator@^7.16.7", "@babel/generator@^7.16.8":
+  version "7.16.8"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.16.8.tgz#359d44d966b8cd059d543250ce79596f792f2ebe"
+  integrity sha512-1ojZwE9+lOXzcWdWmO6TbUzDfqLD39CmEhN8+2cX9XkDo5yW1OpgfejfliysR2AWLpMamTiOiAp/mtroaymhpw==
+  dependencies:
+    "@babel/types" "^7.16.8"
+    jsesc "^2.5.1"
+    source-map "^0.5.0"
+
 "@babel/helper-annotate-as-pure@^7.14.5":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.14.5.tgz#7bf478ec3b71726d56a8ca5775b046fc29879e61"
@@ -169,6 +190,16 @@
     browserslist "^4.17.5"
     semver "^6.3.0"
 
+"@babel/helper-compilation-targets@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.16.7.tgz#06e66c5f299601e6c7da350049315e83209d551b"
+  integrity sha512-mGojBwIWcwGD6rfqgRXVlVYmPAv7eOpIemUG3dGnDdCY4Pae70ROij3XmfrH6Fa1h1aiDylpglbZyktfzyo/hA==
+  dependencies:
+    "@babel/compat-data" "^7.16.4"
+    "@babel/helper-validator-option" "^7.16.7"
+    browserslist "^4.17.5"
+    semver "^6.3.0"
+
 "@babel/helper-create-class-features-plugin@^7.14.5":
   version "7.14.6"
   resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.14.6.tgz#f114469b6c06f8b5c59c6c4e74621f5085362542"
@@ -181,6 +212,13 @@
     "@babel/helper-replace-supers" "^7.14.5"
     "@babel/helper-split-export-declaration" "^7.14.5"
 
+"@babel/helper-environment-visitor@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-environment-visitor/-/helper-environment-visitor-7.16.7.tgz#ff484094a839bde9d89cd63cba017d7aae80ecd7"
+  integrity sha512-SLLb0AAn6PkUeAfKJCCOl9e1R53pQlGAfc4y4XuMRZfqeMYLE0dM1LMhqbGAlGQY0lfw5/ohoYWAe9V1yibRag==
+  dependencies:
+    "@babel/types" "^7.16.7"
+
 "@babel/helper-function-name@^7.12.13", "@babel/helper-function-name@^7.14.5", "@babel/helper-function-name@^7.15.4":
   version "7.15.4"
   resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.15.4.tgz#845744dafc4381a4a5fb6afa6c3d36f98a787ebc"
@@ -199,6 +237,15 @@
     "@babel/template" "^7.16.0"
     "@babel/types" "^7.16.0"
 
+"@babel/helper-function-name@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.16.7.tgz#f1ec51551fb1c8956bc8dd95f38523b6cf375f8f"
+  integrity sha512-QfDfEnIUyyBSR3HtrtGECuZ6DAyCkYFp7GHl75vFtTnn6pjKeK0T1DB5lLkFvBea8MdaiUABx3osbgLyInoejA==
+  dependencies:
+    "@babel/helper-get-function-arity" "^7.16.7"
+    "@babel/template" "^7.16.7"
+    "@babel/types" "^7.16.7"
+
 "@babel/helper-get-function-arity@^7.15.4":
   version "7.15.4"
   resolved "https://registry.yarnpkg.com/@babel/helper-get-function-arity/-/helper-get-function-arity-7.15.4.tgz#098818934a137fce78b536a3e015864be1e2879b"
@@ -213,6 +260,13 @@
   dependencies:
     "@babel/types" "^7.16.0"
 
+"@babel/helper-get-function-arity@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-get-function-arity/-/helper-get-function-arity-7.16.7.tgz#ea08ac753117a669f1508ba06ebcc49156387419"
+  integrity sha512-flc+RLSOBXzNzVhcLu6ujeHUrD6tANAOU5ojrRx/as+tbzf8+stUCj7+IfRRoAbEZqj/ahXEMsjhOhgeZsrnTw==
+  dependencies:
+    "@babel/types" "^7.16.7"
+
 "@babel/helper-hoist-variables@^7.15.4":
   version "7.15.4"
   resolved "https://registry.yarnpkg.com/@babel/helper-hoist-variables/-/helper-hoist-variables-7.15.4.tgz#09993a3259c0e918f99d104261dfdfc033f178df"
@@ -227,6 +281,13 @@
   dependencies:
     "@babel/types" "^7.16.0"
 
+"@babel/helper-hoist-variables@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-hoist-variables/-/helper-hoist-variables-7.16.7.tgz#86bcb19a77a509c7b77d0e22323ef588fa58c246"
+  integrity sha512-m04d/0Op34H5v7pbZw6pSKP7weA6lsMvfiIAMeIvkY/R4xQtBSMFEigu9QTZ2qB/9l22vsxtM8a+Q8CzD255fg==
+  dependencies:
+    "@babel/types" "^7.16.7"
+
 "@babel/helper-member-expression-to-functions@^7.14.5", "@babel/helper-member-expression-to-functions@^7.15.4":
   version "7.15.4"
   resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.15.4.tgz#bfd34dc9bba9824a4658b0317ec2fd571a51e6ef"
@@ -255,6 +316,13 @@
   dependencies:
     "@babel/types" "^7.16.0"
 
+"@babel/helper-module-imports@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.16.7.tgz#25612a8091a999704461c8a222d0efec5d091437"
+  integrity sha512-LVtS6TqjJHFc+nYeITRo6VLXve70xmq7wPhWTqDJusJEgGmkAACWwMiTNrvfoQo6hEhFwAIixNkvB0jPXDL8Wg==
+  dependencies:
+    "@babel/types" "^7.16.7"
+
 "@babel/helper-module-transforms@^7.14.5":
   version "7.15.8"
   resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.15.8.tgz#d8c0e75a87a52e374a8f25f855174786a09498b2"
@@ -283,6 +351,20 @@
     "@babel/traverse" "^7.16.0"
     "@babel/types" "^7.16.0"
 
+"@babel/helper-module-transforms@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.16.7.tgz#7665faeb721a01ca5327ddc6bba15a5cb34b6a41"
+  integrity sha512-gaqtLDxJEFCeQbYp9aLAefjhkKdjKcdh6DB7jniIGU3Pz52WAmP268zK0VgPz9hUNkMSYeH976K2/Y6yPadpng==
+  dependencies:
+    "@babel/helper-environment-visitor" "^7.16.7"
+    "@babel/helper-module-imports" "^7.16.7"
+    "@babel/helper-simple-access" "^7.16.7"
+    "@babel/helper-split-export-declaration" "^7.16.7"
+    "@babel/helper-validator-identifier" "^7.16.7"
+    "@babel/template" "^7.16.7"
+    "@babel/traverse" "^7.16.7"
+    "@babel/types" "^7.16.7"
+
 "@babel/helper-optimise-call-expression@^7.14.5", "@babel/helper-optimise-call-expression@^7.15.4":
   version "7.15.4"
   resolved "https://registry.yarnpkg.com/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.15.4.tgz#f310a5121a3b9cc52d9ab19122bd729822dee171"
@@ -341,6 +423,13 @@
   dependencies:
     "@babel/types" "^7.16.0"
 
+"@babel/helper-simple-access@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.16.7.tgz#d656654b9ea08dbb9659b69d61063ccd343ff0f7"
+  integrity sha512-ZIzHVyoeLMvXMN/vok/a4LWRy8G2v205mNP0XOuf9XRLyX5/u9CnVulUtDgUTama3lT+bf/UqucuZjqiGuTS1g==
+  dependencies:
+    "@babel/types" "^7.16.7"
+
 "@babel/helper-skip-transparent-expression-wrappers@^7.14.5":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.14.5.tgz#96f486ac050ca9f44b009fbe5b7d394cab3a0ee4"
@@ -362,16 +451,33 @@
   dependencies:
     "@babel/types" "^7.16.0"
 
+"@babel/helper-split-export-declaration@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.16.7.tgz#0b648c0c42da9d3920d85ad585f2778620b8726b"
+  integrity sha512-xbWoy/PFoxSWazIToT9Sif+jJTlrMcndIsaOKvTA6u7QEo7ilkRZpjew18/W3c7nm8fXdUDXh02VXTbZ0pGDNw==
+  dependencies:
+    "@babel/types" "^7.16.7"
+
 "@babel/helper-validator-identifier@^7.12.11", "@babel/helper-validator-identifier@^7.14.5", "@babel/helper-validator-identifier@^7.14.9", "@babel/helper-validator-identifier@^7.15.7":
   version "7.15.7"
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.15.7.tgz#220df993bfe904a4a6b02ab4f3385a5ebf6e2389"
   integrity sha512-K4JvCtQqad9OY2+yTU8w+E82ywk/fe+ELNlt1G8z3bVGlZfn/hOcQQsUhGhW/N+tb3fxK800wLtKOE/aM0m72w==
 
+"@babel/helper-validator-identifier@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.16.7.tgz#e8c602438c4a8195751243da9031d1607d247cad"
+  integrity sha512-hsEnFemeiW4D08A5gUAZxLBTXpZ39P+a+DGDsHw1yxqyQ/jzFEnxf5uTEGp+3bzAbNOxU1paTgYS4ECU/IgfDw==
+
 "@babel/helper-validator-option@^7.14.5":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.14.5.tgz#6e72a1fff18d5dfcb878e1e62f1a021c4b72d5a3"
   integrity sha512-OX8D5eeX4XwcroVW45NMvoYaIuFI+GQpA2a8Gi+X/U/cDUIRsV37qQfF905F0htTRCREQIB4KqPeaveRJUl3Ow==
 
+"@babel/helper-validator-option@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.16.7.tgz#b203ce62ce5fe153899b617c08957de860de4d23"
+  integrity sha512-TRtenOuRUVo9oIQGPC5G9DgK4743cdxvtOw0weQNpZXaS16SCBi5MNjZF8vba3ETURjZpTbVn7Vvcf2eAwFozQ==
+
 "@babel/helpers@^7.16.0":
   version "7.16.3"
   resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.16.3.tgz#27fc64f40b996e7074dc73128c3e5c3e7f55c43c"
@@ -381,6 +487,15 @@
     "@babel/traverse" "^7.16.3"
     "@babel/types" "^7.16.0"
 
+"@babel/helpers@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.16.7.tgz#7e3504d708d50344112767c3542fc5e357fffefc"
+  integrity sha512-9ZDoqtfY7AuEOt3cxchfii6C7GDyyMBffktR5B2jvWv8u2+efwvpnVKXMWzNehqy68tKgAfSwfdw/lWpthS2bw==
+  dependencies:
+    "@babel/template" "^7.16.7"
+    "@babel/traverse" "^7.16.7"
+    "@babel/types" "^7.16.7"
+
 "@babel/highlight@^7.10.4", "@babel/highlight@^7.14.5":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.14.5.tgz#6861a52f03966405001f6aa534a01a24d99e8cd9"
@@ -399,10 +514,19 @@
     chalk "^2.0.0"
     js-tokens "^4.0.0"
 
-"@babel/parser@7.12.16", "@babel/parser@^7.0.0", "@babel/parser@^7.1.0", "@babel/parser@^7.11.5", "@babel/parser@^7.12.13", "@babel/parser@^7.14.6", "@babel/parser@^7.14.7", "@babel/parser@^7.15.4", "@babel/parser@^7.16.0", "@babel/parser@^7.16.3", "@babel/parser@^7.7.2":
-  version "7.16.4"
-  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.16.4.tgz#d5f92f57cf2c74ffe9b37981c0e72fee7311372e"
-  integrity sha512-6V0qdPUaiVHH3RtZeLIsc+6pDhbYzHR8ogA8w+f+Wc77DuXto19g2QUwveINoS34Uw+W8/hQDGJCx+i4n7xcng==
+"@babel/highlight@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.16.7.tgz#81a01d7d675046f0d96f82450d9d9578bdfd6b0b"
+  integrity sha512-aKpPMfLvGO3Q97V0qhw/V2SWNWlwfJknuwAunU7wZLSfrM4xTBvg7E5opUVi1kJTBKihE38CPg4nBiqX83PWYw==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.16.7"
+    chalk "^2.0.0"
+    js-tokens "^4.0.0"
+
+"@babel/parser@7.12.16", "@babel/parser@^7.0.0", "@babel/parser@^7.1.0", "@babel/parser@^7.11.5", "@babel/parser@^7.12.13", "@babel/parser@^7.14.6", "@babel/parser@^7.14.7", "@babel/parser@^7.15.4", "@babel/parser@^7.16.0", "@babel/parser@^7.16.3", "@babel/parser@^7.16.7", "@babel/parser@^7.16.8", "@babel/parser@^7.7.2":
+  version "7.16.8"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.16.8.tgz#61c243a3875f7d0b0962b0543a33ece6ff2f1f17"
+  integrity sha512-i7jDUfrVBWc+7OKcBzEe5n7fbv3i2fWtxKzzCvOjnzSxMfWMigAhtfJ7qzZNGFNMsCCd67+uz553dYKWXPvCKw==
 
 "@babel/plugin-proposal-class-properties@^7.0.0":
   version "7.14.5"
@@ -739,6 +863,15 @@
     "@babel/parser" "^7.16.0"
     "@babel/types" "^7.16.0"
 
+"@babel/template@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.16.7.tgz#8d126c8701fde4d66b264b3eba3d96f07666d155"
+  integrity sha512-I8j/x8kHUrbYRTUxXrrMbfCa7jxkE7tZre39x3kjr9hvI82cK1FfqLygotcWN5kdPGWcLdWMHpSBavse5tWw3w==
+  dependencies:
+    "@babel/code-frame" "^7.16.7"
+    "@babel/parser" "^7.16.7"
+    "@babel/types" "^7.16.7"
+
 "@babel/traverse@7.12.13":
   version "7.12.13"
   resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.12.13.tgz#689f0e4b4c08587ad26622832632735fb8c4e0c0"
@@ -784,6 +917,22 @@
     debug "^4.1.0"
     globals "^11.1.0"
 
+"@babel/traverse@^7.16.7":
+  version "7.16.8"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.16.8.tgz#bab2f2b09a5fe8a8d9cad22cbfe3ba1d126fef9c"
+  integrity sha512-xe+H7JlvKsDQwXRsBhSnq1/+9c+LlQcCK3Tn/l5sbx02HYns/cn7ibp9+RV1sIUqu7hKg91NWsgHurO9dowITQ==
+  dependencies:
+    "@babel/code-frame" "^7.16.7"
+    "@babel/generator" "^7.16.8"
+    "@babel/helper-environment-visitor" "^7.16.7"
+    "@babel/helper-function-name" "^7.16.7"
+    "@babel/helper-hoist-variables" "^7.16.7"
+    "@babel/helper-split-export-declaration" "^7.16.7"
+    "@babel/parser" "^7.16.8"
+    "@babel/types" "^7.16.8"
+    debug "^4.1.0"
+    globals "^11.1.0"
+
 "@babel/types@7.12.13":
   version "7.12.13"
   resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.12.13.tgz#8be1aa8f2c876da11a9cf650c0ecf656913ad611"
@@ -817,6 +966,14 @@
     "@babel/helper-validator-identifier" "^7.15.7"
     to-fast-properties "^2.0.0"
 
+"@babel/types@^7.16.7", "@babel/types@^7.16.8":
+  version "7.16.8"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.16.8.tgz#0ba5da91dd71e0a4e7781a30f22770831062e3c1"
+  integrity sha512-smN2DQc5s4M7fntyjGtyIPbRJv6wW4rU/94fmYJ7PKQuZkC0qGMHXJbg6sNGt12JmVr4k5YaptI/XtiLJBnmIg==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.16.7"
+    to-fast-properties "^2.0.0"
+
 "@bcoe/v8-coverage@^0.2.3":
   version "0.2.3"
   resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
@@ -4183,6 +4340,14 @@
     "@types/geojson" "*"
     "@types/topojson-specification" "*"
 
+"@types/topojson-server@^3.0.1":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/@types/topojson-server/-/topojson-server-3.0.1.tgz#35fe9dcc33f07742fb49864b77a780b9e6c8c24e"
+  integrity sha512-NxoC9O8lS/+a0M/FiyjIz7Wk6M03DKF5V1xp2vB9zmbMo66ZbaULg2rrosHAqgsU4BmHe4LE7A0JinPZuxGlBw==
+  dependencies:
+    "@types/geojson" "*"
+    "@types/topojson-specification" "*"
+
 "@types/topojson-specification@*":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@types/topojson-specification/-/topojson-specification-1.0.1.tgz#a80cb294290b79f2d674d3f5938c544ed2bd9d80"
@@ -4202,6 +4367,11 @@
   dependencies:
     "@types/node" "*"
 
+"@types/wellknown@^0.5.1":
+  version "0.5.1"
+  resolved "https://registry.yarnpkg.com/@types/wellknown/-/wellknown-0.5.1.tgz#4fdf9a9a21e78b640e7c60b7b6857165153d6a9d"
+  integrity sha512-Q654r/2cjmh4XdFcZbRUKrY9Z3KmJJhXGQ4snwjWJCNrDNsNCJRaKQZRd/KPJaNGC0gZUxcmAu7184JpDX2Sjw==
+
 "@types/ws@^7.0.0":
   version "7.4.4"
   resolved "https://registry.yarnpkg.com/@types/ws/-/ws-7.4.4.tgz#93e1e00824c1de2608c30e6de4303ab3b4c0c9bc"
@@ -5902,6 +6072,15 @@ concat-stream@^1.4.4, concat-stream@^1.6.0:
     readable-stream "^2.2.2"
     typedarray "^0.0.6"
 
+concat-stream@~1.5.0:
+  version "1.5.2"
+  resolved "https://registry.yarnpkg.com/concat-stream/-/concat-stream-1.5.2.tgz#708978624d856af41a5a741defdd261da752c266"
+  integrity sha1-cIl4Yk2FavQaWnQd790mHadSwmY=
+  dependencies:
+    inherits "~2.0.1"
+    readable-stream "~2.0.0"
+    typedarray "~0.0.5"
+
 console-browserify@^1.1.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/console-browserify/-/console-browserify-1.2.0.tgz#67063cef57ceb6cf4993a2ab3a55840ae8c49336"
@@ -10631,7 +10810,7 @@ minimist-options@4.1.0:
     is-plain-obj "^1.1.0"
     kind-of "^6.0.3"
 
-minimist@^1.2.0, minimist@^1.2.5:
+minimist@^1.2.0, minimist@^1.2.5, minimist@~1.2.0:
   version "1.2.5"
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.5.tgz#67d66014b66a6a8aaa0c083c5fd58df4e4e97602"
   integrity sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==
@@ -11740,6 +11919,11 @@ process-es6@^0.11.2:
   resolved "https://registry.yarnpkg.com/process-es6/-/process-es6-0.11.6.tgz#c6bb389f9a951f82bd4eb169600105bd2ff9c778"
   integrity sha1-xrs4n5qVH4K9TrFpYAEFvS/5x3g=
 
+process-nextick-args@~1.0.6:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-1.0.7.tgz#150e20b756590ad3f91093f25a4f2ad8bff30ba3"
+  integrity sha1-FQ4gt1ZZCtP5EJPyWk8q2L/zC6M=
+
 process-nextick-args@~2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-2.0.1.tgz#7820d9b16120cc55ca9ae7792680ae7dba6d7fe2"
@@ -12259,6 +12443,18 @@ readable-stream@~1.0.26, readable-stream@~1.0.26-4:
     isarray "0.0.1"
     string_decoder "~0.10.x"
 
+readable-stream@~2.0.0:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.0.6.tgz#8f90341e68a53ccc928788dacfcd11b36eb9b78e"
+  integrity sha1-j5A0HmilPMySh4jaz80Rs265t44=
+  dependencies:
+    core-util-is "~1.0.0"
+    inherits "~2.0.1"
+    isarray "~1.0.0"
+    process-nextick-args "~1.0.6"
+    string_decoder "~0.10.x"
+    util-deprecate "~1.0.1"
+
 readable-to-readable@^0.1.0:
   version "0.1.3"
   resolved "https://registry.yarnpkg.com/readable-to-readable/-/readable-to-readable-0.1.3.tgz#a799d497d5af12252d1999fc9bcb37302f704a1f"
@@ -13712,6 +13908,13 @@ topojson-client@^3.1.0:
   dependencies:
     commander "2"
 
+topojson-server@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/topojson-server/-/topojson-server-3.0.1.tgz#d2b3ec095b6732299be76a48406111b3201a34f5"
+  integrity sha512-/VS9j/ffKr2XAOjlZ9CgyyeLmgJ9dMwq6Y0YEON8O7p/tGGk+dCWnrE03zEdu7i4L7YsFZLEPZPzCvcB7lEEXw==
+  dependencies:
+    commander "2"
+
 totalist@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/totalist/-/totalist-1.1.0.tgz#a4d65a3e546517701e3e5c37a47a70ac97fe56df"
@@ -13960,7 +14163,7 @@ typedarray-to-buffer@~1.0.0:
   resolved "https://registry.yarnpkg.com/typedarray-to-buffer/-/typedarray-to-buffer-1.0.4.tgz#9bb8ba0e841fb3f4cf1fe7c245e9f3fa8a5fe99c"
   integrity sha1-m7i6DoQfs/TPH+fCRenz+opf6Zw=
 
-typedarray@^0.0.6:
+typedarray@^0.0.6, typedarray@~0.0.5:
   version "0.0.6"
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
   integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=
@@ -14425,6 +14628,14 @@ webpack-bundle-analyzer@4.3.0:
     sirv "^1.0.7"
     ws "^7.3.1"
 
+wellknown@^0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/wellknown/-/wellknown-0.5.0.tgz#09ae9871fa826cf0a6ec1537ef00c379d78d7101"
+  integrity sha1-Ca6YcfqCbPCm7BU37wDDedeNcQE=
+  dependencies:
+    concat-stream "~1.5.0"
+    minimist "~1.2.0"
+
 whatwg-encoding@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/whatwg-encoding/-/whatwg-encoding-1.0.5.tgz#5abacf777c32166a51d085d6b4f3e7d27113ddb0"