diff --git a/app/charts/chart-config-ui-options.ts b/app/charts/chart-config-ui-options.ts
index 8bc4627cc..3deb1eb6a 100644
--- a/app/charts/chart-config-ui-options.ts
+++ b/app/charts/chart-config-ui-options.ts
@@ -16,8 +16,8 @@ export type DimensionType =
| "Measure"
| "Attribute";
-export type BaseEncodingField = "x" | "y" | "segment" | "settings";
-export type GeoEncodingField = "areaLayer" | "symbolLayer";
+export type BaseEncodingField = "x" | "y" | "segment";
+export type GeoEncodingField = "baseLayer" | "areaLayer" | "symbolLayer";
export type EncodingField = BaseEncodingField | GeoEncodingField;
export type EncodingOption =
| "chartSubType"
@@ -234,9 +234,9 @@ export const chartConfigOptionsUISpec: ChartSpecs = {
chartType: "map",
encodings: [
{
- field: "settings",
+ field: "baseLayer",
optional: true,
- values: ["Attribute"], // FIXME: currently not used anywhere
+ values: [],
filters: false,
},
{
diff --git a/app/charts/index.ts b/app/charts/index.ts
index 288170e04..b9370de60 100644
--- a/app/charts/index.ts
+++ b/app/charts/index.ts
@@ -290,7 +290,7 @@ export const getInitialConfig = ({
color: "#1f77b4",
},
},
- settings: {
+ baseLayer: {
showRelief: true,
showLakes: true,
},
diff --git a/app/charts/map/chart-map.tsx b/app/charts/map/chart-map.tsx
index 168f6db86..94bc3cb19 100644
--- a/app/charts/map/chart-map.tsx
+++ b/app/charts/map/chart-map.tsx
@@ -6,7 +6,7 @@ import {
mesh as topojsonMesh,
} from "topojson-client";
import { Loading, LoadingDataError, NoDataHint } from "../../components/hint";
-import { MapConfig, MapFields, MapSettings } from "../../configurator";
+import { BaseLayer, MapConfig, MapFields } from "../../configurator";
import {
AreaLayer,
GeoData,
@@ -151,7 +151,7 @@ export const ChartMapVisualization = ({
fields={chartConfig.fields}
measures={measures}
dimensions={dimensions}
- settings={chartConfig.settings}
+ baseLayer={chartConfig.baseLayer}
/>
);
} else if (geoData.state === "fetching" || fetching) {
@@ -169,14 +169,14 @@ export const ChartMapPrototype = ({
fields,
measures,
dimensions,
- settings,
+ baseLayer,
}: {
observations: Observation[];
features: GeoData;
fields: MapFields;
measures: DimensionMetaDataFragment[];
dimensions: DimensionMetaDataFragment[];
- settings: MapSettings;
+ baseLayer: BaseLayer;
}) => {
return (
);
@@ -206,14 +206,14 @@ export const ChartMap = memo(
fields,
measures,
dimensions,
- settings,
+ baseLayer,
}: {
features: GeoData;
observations: Observation[];
measures: DimensionMetaDataFragment[];
dimensions: DimensionMetaDataFragment[];
fields: MapFields;
- settings: MapSettings;
+ baseLayer: BaseLayer;
}) => {
return (
diff --git a/app/charts/map/map-state.tsx b/app/charts/map/map-state.tsx
index 5ce2bd43d..257398a64 100644
--- a/app/charts/map/map-state.tsx
+++ b/app/charts/map/map-state.tsx
@@ -21,8 +21,8 @@ import {
getSingleHueSequentialPalette,
} from "../../configurator/components/ui-helpers";
import {
+ BaseLayer,
MapFields,
- MapSettings,
PaletteType,
} from "../../configurator/config-types";
import {
@@ -132,11 +132,11 @@ const useMapState = ({
fields,
measures,
dimensions,
- settings,
+ baseLayer,
}: Pick & {
features: GeoData;
fields: MapFields;
- settings: MapSettings;
+ baseLayer: BaseLayer;
}): MapState => {
const width = useWidth();
const { areaLayer, symbolLayer } = fields;
@@ -267,8 +267,8 @@ const useMapState = ({
chartType: "map",
features,
bounds,
- showRelief: settings.showRelief,
- showLakes: settings.showLakes,
+ showRelief: baseLayer.showRelief,
+ showLakes: baseLayer.showLakes,
identicalLayerComponentIris,
areaLayer: {
data: areaData,
@@ -304,13 +304,13 @@ const MapChartProvider = ({
fields,
measures,
dimensions,
- settings,
+ baseLayer,
children,
}: Pick & {
features: GeoData;
children: ReactNode;
fields: MapFields;
- settings: MapSettings;
+ baseLayer: BaseLayer;
}) => {
const state = useMapState({
data,
@@ -318,7 +318,7 @@ const MapChartProvider = ({
fields,
measures,
dimensions,
- settings,
+ baseLayer,
});
return (
{children}
@@ -331,12 +331,12 @@ export const MapChart = ({
fields,
measures,
dimensions,
- settings,
+ baseLayer,
children,
}: Pick & {
features: GeoData;
fields: MapFields;
- settings: MapSettings;
+ baseLayer: BaseLayer;
children: ReactNode;
}) => {
return (
@@ -349,7 +349,7 @@ export const MapChart = ({
fields={fields}
measures={measures}
dimensions={dimensions}
- settings={settings}
+ baseLayer={baseLayer}
>
{children}
diff --git a/app/configurator/components/chart-options-selector.tsx b/app/configurator/components/chart-options-selector.tsx
index 0115494f3..05cf1a956 100644
--- a/app/configurator/components/chart-options-selector.tsx
+++ b/app/configurator/components/chart-options-selector.tsx
@@ -173,6 +173,7 @@ const EncodingOptionsPanel = ({
const getFieldLabelHint = {
x: t({ id: "controls.select.dimension", message: "Select a dimension" }),
y: t({ id: "controls.select.measure", message: "Select a measure" }),
+ baseLayer: t({ id: "controls.map.baseLayer", message: "Base layer" }),
areaLayer: t({
id: "controls.select.measure",
message: "Select a measure",
@@ -185,7 +186,6 @@ const EncodingOptionsPanel = ({
id: "controls.select.dimension",
message: "Select a dimension",
}),
- settings: t({ id: "controls.settings", message: "Settings" }),
};
useEffect(() => {
diff --git a/app/configurator/components/ui-helpers.ts b/app/configurator/components/ui-helpers.ts
index 24db782c3..b92d0559d 100644
--- a/app/configurator/components/ui-helpers.ts
+++ b/app/configurator/components/ui-helpers.ts
@@ -339,6 +339,12 @@ export const getIconName = (name: string): IconName => {
return "chartPie";
case "map":
return "chartMap";
+ case "baseLayer":
+ return "mapMaptype";
+ case "areaLayer":
+ return "mapRegions";
+ case "symbolLayer":
+ return "mapSymbols";
case "text":
return "text";
case "title":
@@ -396,16 +402,16 @@ const fieldLabels = {
id: "controls.column.grouped",
message: "Grouped",
}),
- "controls.map.settings": defineMessage({
- id: "controls.map.settings",
- message: "Base layers",
+ "controls.map.baseLayer": defineMessage({
+ id: "controls.map.baseLayer",
+ message: "Base layer",
}),
- "controls.map.layer.area": defineMessage({
- id: "controls.map.layer.area",
+ "controls.map.areaLayer": defineMessage({
+ id: "controls.map.areaLayer",
message: "Area layer",
}),
- "controls.map.layer.symbol": defineMessage({
- id: "controls.map.layer.symbol",
+ "controls.map.symbolLayer": defineMessage({
+ id: "controls.map.symbolLayer",
message: "Symbol layer",
}),
"controls.sorting.sortBy": defineMessage({
@@ -538,12 +544,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.baseLayer":
+ return i18n._(fieldLabels["controls.map.baseLayer"]);
case "map.areaLayer":
- return i18n._(fieldLabels["controls.map.layer.area"]);
+ return i18n._(fieldLabels["controls.map.areaLayer"]);
case "map.symbolLayer":
- return i18n._(fieldLabels["controls.map.layer.symbol"]);
+ return i18n._(fieldLabels["controls.map.symbolLayer"]);
case "title":
return i18n._(fieldLabels["controls.title"]);
case "description":
diff --git a/app/configurator/config-types.ts b/app/configurator/config-types.ts
index 07fc40419..67b0eda49 100644
--- a/app/configurator/config-types.ts
+++ b/app/configurator/config-types.ts
@@ -465,11 +465,11 @@ const MapSymbolLayer = t.type({
});
export type MapSymbolLayer = t.TypeOf;
-const MapSettings = t.type({
+const BaseLayer = t.type({
showRelief: t.boolean,
showLakes: t.boolean,
});
-export type MapSettings = t.TypeOf;
+export type BaseLayer = t.TypeOf;
const MapFields = t.type({
areaLayer: MapAreaLayer,
symbolLayer: MapSymbolLayer,
@@ -481,7 +481,7 @@ const MapConfig = t.type(
interactiveFiltersConfig: InteractiveFiltersConfig,
filters: Filters,
fields: MapFields,
- settings: MapSettings,
+ baseLayer: BaseLayer,
},
"MapConfig"
);
diff --git a/app/configurator/map/map-chart-options.tsx b/app/configurator/map/map-chart-options.tsx
index debc92794..d2425d774 100644
--- a/app/configurator/map/map-chart-options.tsx
+++ b/app/configurator/map/map-chart-options.tsx
@@ -40,7 +40,7 @@ export const MapColumnOptions = ({
const { activeField } = state;
switch (activeField) {
- case "settings":
+ case "baseLayer":
return ;
case "areaLayer":
return (
@@ -66,25 +66,25 @@ export const MapColumnOptions = ({
export const BaseLayersSettings = memo(() => {
return (
-
- Map Settings
+
+ Settings
@@ -145,9 +145,7 @@ export const AreaLayerSettings = memo(
<>
-
- Area layer settings
-
+ Settings
-
+
Geographical dimension
@@ -309,9 +307,7 @@ export const SymbolLayerSettings = memo(
<>
-
- Symbol layer settings
-
+ Settings