@mwater/visualization 5.6.0 → 5.6.1

package/lib/maps/MapComponent.js

@@ -5,28 +5,37 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const lodash_1 = __importDefault(require("lodash"));
 const react_1 = __importDefault(require("react"));
-const R = react_1.default.createElement;
 const MapViewComponent_1 = require("./MapViewComponent");
 const MapDesignerComponent_1 = __importDefault(require("./MapDesignerComponent"));
 const MapControlComponent_1 = __importDefault(require("./MapControlComponent"));
 const AutoSizeComponent_1 = __importDefault(require("@mwater/react-library/lib/AutoSizeComponent"));
 const UndoStack_1 = __importDefault(require("../UndoStack"));
 const PopoverHelpComponent_1 = __importDefault(require("@mwater/react-library/lib/PopoverHelpComponent"));
+const __1 = require("..");
 const QuickfilterCompiler_1 = __importDefault(require("../quickfilter/QuickfilterCompiler"));
 const QuickfiltersComponent_1 = __importDefault(require("../quickfilter/QuickfiltersComponent"));
 const MapUtils_1 = require("./MapUtils");
-const expressions_ui_1 = require("@mwater/expressions-ui");
 /** Map with designer on right */
 class MapComponent extends react_1.default.Component {
-    static contextType = expressions_ui_1.LocaleContext;
     constructor(props) {
         super(props);
+        // Prefer the T.locale if available when loading the map
+        let initialLocale = props.design.locale || "en";
+        const otherLocales = props.design.otherLocales || [];
+        if (props.preferredLocale && otherLocales.includes(props.preferredLocale)) {
+            initialLocale = props.preferredLocale;
+        }
+        else if (otherLocales.includes(T.locale)) {
+            initialLocale = T.locale;
+        }
         this.state = {
             undoStack: new UndoStack_1.default().push(props.design),
             transientDesign: props.design, // Temporary design for read-only maps
             zoomLocked: true,
             quickfiltersValues: props.quickfiltersValues ?? null,
-            hideQuickfilters: false
+            hideQuickfilters: false,
+            locale: initialLocale,
+            previewLocale: null
         };
     }
     componentDidUpdate(prevProps) {
@@ -54,39 +63,93 @@ class MapComponent extends react_1.default.Component {
     handleZoomLockClick = () => {
         return this.setState({ zoomLocked: !this.state.zoomLocked });
     };
+    /** Handle locale selection from dropdown */
+    handleLocaleSelect = (locale) => {
+        const baseLocale = this.props.design.locale || "en";
+        const isEditing = this.props.onDesignChange != null;
+        if (isEditing) {
+            // In edit mode, selecting base language exits preview mode
+            // Selecting other language enters preview mode
+            if (locale === baseLocale) {
+                this.setState({ previewLocale: null });
+            }
+            else {
+                this.setState({ previewLocale: locale });
+            }
+        }
+        else {
+            // In readonly mode, just change the locale
+            this.setState({ locale: locale });
+        }
+    };
+    /** Render the language selector dropdown */
+    renderLanguageDropdown() {
+        const baseLocale = this.props.design.locale || "en";
+        const otherLocales = this.props.design.otherLocales || [];
+        const isEditing = this.props.onDesignChange != null;
+        const isPreviewMode = isEditing && this.state.previewLocale != null;
+        // Determine which locale to display in the dropdown button
+        let displayedLocale;
+        if (isEditing) {
+            displayedLocale = this.state.previewLocale || baseLocale;
+        }
+        else {
+            displayedLocale = this.state.locale;
+        }
+        return (react_1.default.createElement("div", { key: "translations", className: "dropdown d-inline-block" },
+            react_1.default.createElement("a", { className: `btn btn-link btn-sm dropdown-toggle ${isPreviewMode ? "text-info" : ""}`, "data-bs-toggle": "dropdown" },
+                react_1.default.createElement("span", { className: "fal fa-globe" }),
+                " ",
+                __1.languages.find(l => l.code === displayedLocale)?.name || displayedLocale,
+                isPreviewMode && react_1.default.createElement("span", { className: "badge bg-info ms-1" }, T `Preview`)),
+            react_1.default.createElement("ul", { className: "dropdown-menu dropdown-menu-end" },
+                react_1.default.createElement("li", { key: baseLocale },
+                    react_1.default.createElement("a", { className: `dropdown-item ${displayedLocale === baseLocale ? "active" : ""}`, onClick: () => this.handleLocaleSelect(baseLocale) }, __1.languages.find(l => l.code === baseLocale)?.name || baseLocale)),
+                isEditing && otherLocales.length > 0 && (react_1.default.createElement(react_1.default.Fragment, null,
+                    react_1.default.createElement("li", null,
+                        react_1.default.createElement("hr", { className: "dropdown-divider" })),
+                    react_1.default.createElement("li", null,
+                        react_1.default.createElement("span", { className: "dropdown-header" }, T `Preview translations:`)))),
+                otherLocales.filter(loc => loc !== baseLocale).map(locale => react_1.default.createElement("li", { key: locale },
+                    react_1.default.createElement("a", { className: `dropdown-item ${displayedLocale === locale ? "active" : ""}`, onClick: () => this.handleLocaleSelect(locale) }, __1.languages.find(l => l.code === locale)?.name || locale))))));
+    }
     renderActionLinks() {
-        return R("div", null, this.props.onDesignChange != null
-            ? [
-                R("a", { key: "lock", className: "btn btn-link btn-sm", onClick: this.handleZoomLockClick }, R("span", {
-                    className: `fa ${this.state.zoomLocked ? "fa-lock red" : "fa-unlock green"}`,
-                    style: { marginRight: 5 }
-                }), R(PopoverHelpComponent_1.default, { placement: "bottom" }, T `Changes to zoom level wont be saved in locked mode`)),
-                R("a", {
-                    key: "undo",
-                    className: `btn btn-link btn-sm ${!this.state.undoStack.canUndo() ? "disabled" : ""}`,
-                    onClick: this.handleUndo
-                }, R("span", { className: "fas fa-caret-left" }), R("span", { className: "hide-600px" }, " ", T `Undo`)),
+        return (react_1.default.createElement("div", null,
+            this.props.onDesignChange != null && [
+                react_1.default.createElement("a", { key: "lock", className: "btn btn-link btn-sm", onClick: this.handleZoomLockClick },
+                    react_1.default.createElement("span", { className: `fa ${this.state.zoomLocked ? "fa-lock red" : "fa-unlock green"}`, style: { marginRight: 5 } }),
+                    react_1.default.createElement(PopoverHelpComponent_1.default, { placement: "bottom" }, T `Changes to zoom level wont be saved in locked mode`)),
+                react_1.default.createElement("a", { key: "undo", className: `btn btn-link btn-sm ${!this.state.undoStack.canUndo() ? "disabled" : ""}`, onClick: this.handleUndo },
+                    react_1.default.createElement("span", { className: "fas fa-caret-left" }),
+                    react_1.default.createElement("span", { className: "hide-600px" },
+                        " ",
+                        T `Undo`)),
                 " ",
-                R("a", {
-                    key: "redo",
-                    className: `btn btn-link btn-sm ${!this.state.undoStack.canRedo() ? "disabled" : ""}`,
-                    onClick: this.handleRedo
-                }, R("span", { className: "fas fa-caret-right" }), R("span", { className: "hide-600px" }, " ", T `Redo`))
-            ]
-            : undefined, this.state.hideQuickfilters && this.props.design.quickfilters && this.props.design.quickfilters.length > 0
-            ? R("a", { key: "showQuickfilters", className: "btn btn-link btn-sm", onClick: this.handleShowQuickfilters }, R("span", { className: "fa fa-filter" }), R("span", { className: "hide-600px" }, " ", T `Show Quickfilters`))
-            : undefined, this.props.extraTitleButtonsElem, R("a", { key: "toggleDesign", className: "btn btn-link btn-sm", onClick: this.handleToggleDesignPanel, alt: T `Toggle design panel` }, this.getDesign().hideDesignPanel ?
-            R("span", { className: "fas fa-angle-double-left" })
-            : R("span", { className: "fas fa-angle-double-right" })));
+                react_1.default.createElement("a", { key: "redo", className: `btn btn-link btn-sm ${!this.state.undoStack.canRedo() ? "disabled" : ""}`, onClick: this.handleRedo },
+                    react_1.default.createElement("span", { className: "fas fa-caret-right" }),
+                    react_1.default.createElement("span", { className: "hide-600px" },
+                        " ",
+                        T `Redo`))
+            ],
+            this.props.design.otherLocales && this.props.design.otherLocales.length > 0
+                ? this.renderLanguageDropdown()
+                : undefined,
+            this.state.hideQuickfilters && this.props.design.quickfilters && this.props.design.quickfilters.length > 0 && (react_1.default.createElement("a", { key: "showQuickfilters", className: "btn btn-link btn-sm", onClick: this.handleShowQuickfilters },
+                react_1.default.createElement("span", { className: "fa fa-filter" }),
+                react_1.default.createElement("span", { className: "hide-600px" },
+                    " ",
+                    T `Show Quickfilters`))),
+            this.props.extraTitleButtonsElem,
+            react_1.default.createElement("a", { key: "toggleDesign", className: "btn btn-link btn-sm", onClick: this.handleToggleDesignPanel, title: T `Toggle design panel` }, this.getDesign().hideDesignPanel ? (react_1.default.createElement("span", { className: "fas fa-angle-double-left" })) : (react_1.default.createElement("span", { className: "fas fa-angle-double-right" })))));
     }
     renderHeader() {
-        return R("div", {
-            style: {
+        return (react_1.default.createElement("div", { style: {
                 padding: 4,
                 borderBottom: "solid 1px #e8e8e8",
                 gridArea: "header"
-            }
-        }, R("div", { style: { float: "right" } }, this.renderActionLinks()), this.props.titleElem);
+            } },
+            react_1.default.createElement("div", { style: { float: "right" } }, this.renderActionLinks()),
+            this.props.titleElem));
     }
     handleDesignChange = (design) => {
         if (this.props.onDesignChange) {
@@ -115,21 +178,19 @@ class MapComponent extends react_1.default.Component {
         let filters = this.props.extraFilters || [];
         // Compile quickfilters
         filters = filters.concat(new QuickfilterCompiler_1.default(this.props.schema).compile(this.props.design.quickfilters || [], this.state.quickfiltersValues, this.props.quickfilterLocks));
-        return react_1.default.createElement(AutoSizeComponent_1.default, { injectWidth: true, injectHeight: true }, (size) => {
-            return react_1.default.createElement(MapViewComponent_1.MapViewComponent, {
-                mapDataSource: this.props.mapDataSource,
-                schema: this.props.schema,
-                dataSource: this.props.dataSource,
-                design: this.getDesign(),
-                onDesignChange: this.handleDesignChange,
-                zoomLocked: this.state.zoomLocked,
-                onRowClick: this.props.onRowClick,
-                extraFilters: filters,
-                locale: this.context,
-                width: size.width,
-                height: size.height
-            });
-        });
+        const isPreviewMode = this.props.onDesignChange != null && this.state.previewLocale != null;
+        // Determine display locale:
+        // - In preview mode: use previewLocale
+        // - In edit mode (no preview): use design locale
+        // - In readonly mode: use state locale
+        const displayLocale = isPreviewMode
+            ? this.state.previewLocale
+            : (this.props.onDesignChange != null
+                ? this.props.design.locale || "en"
+                : this.state.locale);
+        return (react_1.default.createElement(AutoSizeComponent_1.default, { injectWidth: true, injectHeight: true }, (size) => {
+            return (react_1.default.createElement(MapViewComponent_1.MapViewComponent, { mapDataSource: this.props.mapDataSource, schema: this.props.schema, dataSource: this.props.dataSource, design: this.getDesign(), onDesignChange: isPreviewMode ? undefined : this.handleDesignChange, zoomLocked: this.state.zoomLocked, onRowClick: this.props.onRowClick, extraFilters: filters, locale: displayLocale, width: size.width, height: size.height }));
+        }));
     }
     // Get filters from props filters combined with maps filters
     getCompiledFilters() {
@@ -138,48 +199,46 @@ class MapComponent extends react_1.default.Component {
         return compiledFilters;
     }
     renderQuickfilter() {
-        return R("div", { style: { gridArea: "quickfilters", borderBottom: "solid 1px #e8e8e8" } }, R(QuickfiltersComponent_1.default, {
-            design: this.props.design.quickfilters || [],
-            schema: this.props.schema,
-            dataSource: this.props.dataSource,
-            quickfiltersDataSource: this.props.mapDataSource.getQuickfiltersDataSource(),
-            values: this.state.quickfiltersValues || undefined,
-            onValuesChange: (values) => this.setState({ quickfiltersValues: values }),
-            locks: this.props.quickfilterLocks,
-            filters: this.getCompiledFilters(),
-            hideTopBorder: this.props.hideTitleBar,
-            onHide: () => this.setState({ hideQuickfilters: true })
-        }));
+        return (react_1.default.createElement("div", { style: { gridArea: "quickfilters", borderBottom: "solid 1px #e8e8e8" } },
+            react_1.default.createElement(QuickfiltersComponent_1.default, { design: this.props.design.quickfilters || [], schema: this.props.schema, dataSource: this.props.dataSource, quickfiltersDataSource: this.props.mapDataSource.getQuickfiltersDataSource(), values: this.state.quickfiltersValues || undefined, onValuesChange: (values) => this.setState({ quickfiltersValues: values }), locks: this.props.quickfilterLocks, filters: this.getCompiledFilters(), hideTopBorder: this.props.hideTitleBar, onHide: () => this.setState({ hideQuickfilters: true }) })));
     }
+    /** Translate function to use for display based on current locale */
+    translate = (input) => {
+        const design = this.getDesign();
+        const designLocale = design.locale || "en";
+        const isPreviewMode = this.props.onDesignChange != null && this.state.previewLocale != null;
+        // Determine display locale:
+        // - In preview mode: use previewLocale
+        // - In edit mode (no preview): use design locale
+        // - In readonly mode: use state locale
+        const displayLocale = isPreviewMode
+            ? this.state.previewLocale
+            : (this.props.onDesignChange != null
+                ? designLocale
+                : this.state.locale);
+        if (designLocale === displayLocale) {
+            return input;
+        }
+        return design.translations?.[displayLocale]?.[input] ?? input;
+    };
     renderDesigner() {
-        return R("div", { style: { gridArea: "designer", borderLeft: "solid 2px #e8e8e8", overflowY: 'scroll' } }, this.props.onDesignChange ?
-            react_1.default.createElement(MapDesignerComponent_1.default, {
-                schema: this.props.schema,
-                dataSource: this.props.dataSource,
-                design: this.getDesign(),
-                onDesignChange: this.handleDesignChange,
-                enableQuickfilters: this.props.enableQuickfilters
-            })
-            :
-                react_1.default.createElement(MapControlComponent_1.default, {
-                    schema: this.props.schema,
-                    dataSource: this.props.dataSource,
-                    design: this.getDesign(),
-                    onDesignChange: this.handleDesignChange
-                }));
+        const isPreviewMode = this.props.onDesignChange != null && this.state.previewLocale != null;
+        return (react_1.default.createElement("div", { style: { gridArea: "designer", borderLeft: "solid 2px #e8e8e8", overflowY: 'scroll' } }, this.props.onDesignChange && !isPreviewMode ? (react_1.default.createElement(MapDesignerComponent_1.default, { schema: this.props.schema, dataSource: this.props.dataSource, design: this.getDesign(), onDesignChange: this.handleDesignChange, enableQuickfilters: this.props.enableQuickfilters })) : (react_1.default.createElement(MapControlComponent_1.default, { schema: this.props.schema, dataSource: this.props.dataSource, design: this.getDesign(), onDesignChange: this.handleDesignChange, translate: this.translate }))));
     }
     render() {
         const designerVisible = !this.getDesign().hideDesignPanel;
-        return R("div", {
-            style: {
+        return (react_1.default.createElement("div", { style: {
                 width: "100%",
                 height: "100%",
                 display: "grid",
                 gridTemplateColumns: designerVisible ? "70% 30%" : "100%",
                 gridTemplateRows: "auto auto 1fr",
                 gridTemplateAreas: `"header designer" "quickfilters designer" "view designer"`
-            }
-        }, this.props.hideTitleBar != true ? this.renderHeader() : null, this.state.hideQuickfilters ? null : this.renderQuickfilter(), R("div", { style: { width: "100%", height: "100%", gridArea: "view", overflow: "hidden" } }, this.renderView()), designerVisible ? this.renderDesigner() : null);
+            } },
+            this.props.hideTitleBar != true ? this.renderHeader() : null,
+            this.state.hideQuickfilters ? null : this.renderQuickfilter(),
+            react_1.default.createElement("div", { style: { width: "100%", height: "100%", gridArea: "view", overflow: "hidden" } }, this.renderView()),
+            designerVisible ? this.renderDesigner() : null));
     }
 }
 exports.default = MapComponent;

package/lib/maps/MapControlComponent.d.ts

@@ -7,11 +7,10 @@ export interface MapControlComponentProps {
     /** See Map Design.md */
     design: any;
     onDesignChange: any;
+    /** Translate function to use for display */
+    translate?: (input: string) => string;
 }
+/** Allows controlling readonly map */
 export default class MapControlComponent extends React.Component<MapControlComponentProps> {
-    render(): React.DetailedReactHTMLElement<{
-        style: {
-            padding: number;
-        };
-    }, HTMLElement>;
+    render(): React.JSX.Element;
 }

package/lib/maps/MapControlComponent.js

@@ -4,22 +4,15 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
-const R = react_1.default.createElement;
 const MapLayersDesignerComponent_1 = __importDefault(require("./MapLayersDesignerComponent"));
 const BaseLayerDesignerComponent_1 = __importDefault(require("./BaseLayerDesignerComponent"));
-// Allows controlling readonly map
+/** Allows controlling readonly map */
 class MapControlComponent extends react_1.default.Component {
     render() {
-        return R("div", { style: { padding: 5 } }, R(MapLayersDesignerComponent_1.default, {
-            schema: this.props.schema,
-            dataSource: this.props.dataSource,
-            design: this.props.design,
-            onDesignChange: this.props.onDesignChange,
-            allowEditingLayers: false
-        }), R("br"), R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, T `Map Style`), R(BaseLayerDesignerComponent_1.default, {
-            design: this.props.design,
-            onDesignChange: this.props.onDesignChange
-        })));
+        return (react_1.default.createElement("div", { style: { padding: 5 } },
+            react_1.default.createElement(MapLayersDesignerComponent_1.default, { schema: this.props.schema, dataSource: this.props.dataSource, design: this.props.design, onDesignChange: this.props.onDesignChange, allowEditingLayers: false, translate: this.props.translate }),
+            react_1.default.createElement("br", null),
+            react_1.default.createElement(BaseLayerDesignerComponent_1.default, { design: this.props.design, onDesignChange: this.props.onDesignChange })));
     }
 }
 exports.default = MapControlComponent;

package/lib/maps/MapDesign.d.ts

@@ -35,6 +35,14 @@ export interface MapDesign {
     initialLegendDisplay?: "open" | "closed" | "closedIfSmall";
     /** optional locale (e.g. "fr") to use for display */
     locale?: string;
+    /** Other locales that the map is available in. */
+    otherLocales?: string[];
+    /** Translation map for map. Maps locale to translation map. Does not include default locale. */
+    translations?: {
+        [locale: string]: {
+            [key: string]: string;
+        };
+    };
     /** True if design panel is hidden */
     hideDesignPanel?: boolean;
 }

package/lib/maps/MapDesignerComponent.d.ts

@@ -15,6 +15,8 @@ export interface MapDesignerComponentProps {
     filters?: JsonQLFilter[];
     /** True to enable quickfilters */
     enableQuickfilters?: boolean;
+    /** True to enable translations tab. Defaults to true. Set to false when map is embedded in a dashboard. */
+    enableTranslations?: boolean;
 }
 export default class MapDesignerComponent extends React.Component<MapDesignerComponentProps> {
     handleAttributionChange: (text: string | undefined) => void;

package/lib/maps/MapDesignerComponent.js

@@ -41,6 +41,7 @@ const ui = __importStar(require("@mwater/react-library/lib/bootstrap"));
 const QuickfiltersDesignComponent_1 = __importDefault(require("../quickfilter/QuickfiltersDesignComponent"));
 const immer_1 = __importDefault(require("immer"));
 const expressions_ui_1 = require("@mwater/expressions-ui");
+const MapTranslationsTab_1 = require("./MapTranslationsTab");
 class MapDesignerComponent extends react_1.default.Component {
     handleAttributionChange = (text) => {
         const design = { ...this.props.design, attribution: text };
@@ -69,7 +70,7 @@ class MapDesignerComponent extends react_1.default.Component {
         return this.props.onDesignChange(design);
     };
     renderOptionsTab() {
-        return (react_1.default.createElement("div", null,
+        return (react_1.default.createElement("div", { style: { marginBottom: 200 } },
             react_1.default.createElement(BaseLayerDesignerComponent_1.default, { design: this.props.design, onDesignChange: this.props.onDesignChange }),
             react_1.default.createElement(CheckboxComponent_1.default, { checked: this.props.design.autoBounds, onChange: this.handleAutoBoundsChange },
                 react_1.default.createElement("span", { className: "text-muted" },
@@ -94,7 +95,11 @@ class MapDesignerComponent extends react_1.default.Component {
                 react_1.default.createElement("a", { onClick: this.handleConvertToMarkersMap, className: "btn btn-link btn-sm" }, T `Convert to markers map`))) : undefined,
             react_1.default.createElement(AttributionComponent, { text: this.props.design.attribution, onTextChange: this.handleAttributionChange }),
             react_1.default.createElement("br", null),
-            react_1.default.createElement(AdvancedOptionsComponent, { design: this.props.design, onDesignChange: this.props.onDesignChange })));
+            react_1.default.createElement(AdvancedOptionsComponent, { design: this.props.design, onDesignChange: this.props.onDesignChange }),
+            this.props.enableTranslations !== false && (react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement("hr", null),
+                react_1.default.createElement("h5", null, T `Translations`),
+                react_1.default.createElement(MapTranslationsTab_1.MapTranslationsTab, { schema: this.props.schema, design: this.props.design, onDesignChange: this.props.onDesignChange })))));
     }
     render() {
         const filterableTables = MapUtils.getFilterableTables(this.props.design, this.props.schema);

package/lib/maps/MapLayerDataSource.d.ts

@@ -6,10 +6,6 @@ export interface MapLayerDataSource {
      * Called with (design, filters) where design is the design of the layer and filters are filters to apply. Returns URL
      * Only called on layers that are valid */
     getTileUrl(design: any, filters: JsonQLFilter[]): string | null;
-    /** Get the url for the interactivity tiles with the specified filters applied
-     * Called with (design, filters) where design is the design of the layer and filters are filters to apply. Returns URL
-     * Only called on layers that are valid */
-    getUtfGridUrl(design: any, filters: JsonQLFilter[]): string | null;
     /** Get the url for vector tile source with an expiry time. Only for layers of type "VectorTile"
      * @param createdAfter ISO 8601 timestamp requiring that tile source on server is created after specified datetime
      */

package/lib/maps/MapLayerViewDesignerComponent.d.ts

@@ -18,12 +18,14 @@ export interface MapLayerViewDesignerComponentProps {
     connectDropTarget?: any;
     allowEditingLayer: boolean;
     filters?: any;
+    /** Translate function to use for display */
+    translate?: (input: string) => string;
 }
 interface MapLayerViewDesignerComponentState {
     editing: any;
 }
 export default class MapLayerViewDesignerComponent extends React.Component<MapLayerViewDesignerComponentProps, MapLayerViewDesignerComponentState> {
-    constructor(props: any);
+    constructor(props: MapLayerViewDesignerComponentProps);
     update(updates: any): any;
     handleVisibleClick: () => any;
     handleHideLegend: (hideLegend: any) => any;

package/lib/maps/MapLayerViewDesignerComponent.js

@@ -97,7 +97,11 @@ class MapLayerViewDesignerComponent extends react_1.default.Component {
         }), R("div", null, R(PopoverHelpComponent_1.default, { placement: "top", key: "help" }, T `Layers in the same group can only be selected one at a time`)));
     }
     renderName() {
-        return R("span", { className: "hover-display-parent", onClick: this.handleRename, style: { cursor: "pointer" } }, this.props.layerView.name, " ", R("span", { className: "hover-display-child fas fa-pencil-alt text-muted" }));
+        // Translate the name if a translate function is provided
+        const displayName = this.props.translate
+            ? this.props.translate(this.props.layerView.name)
+            : this.props.layerView.name;
+        return R("span", { className: "hover-display-parent", onClick: this.handleRename, style: { cursor: "pointer" } }, displayName, " ", R("span", { className: "hover-display-child fas fa-pencil-alt text-muted" }));
     }
     renderEditor() {
         const layer = LayerFactory_1.default.createLayer(this.props.layerView.type);

package/lib/maps/MapLayersDesignerComponent.d.ts

@@ -12,6 +12,8 @@ export interface MapLayersDesignerComponentProps {
     /** True to allow editing layers */
     allowEditingLayers: boolean;
     filters?: any;
+    /** Translate function to use for display */
+    translate?: (input: string) => string;
 }
 export default class MapLayersDesignerComponent extends React.Component<MapLayersDesignerComponentProps> {
     updateDesign(changes: any): void;

package/lib/maps/MapLayersDesignerComponent.js

@@ -70,7 +70,8 @@ class MapLayersDesignerComponent extends react_1.default.Component {
             connectDragPreview,
             connectDropTarget,
             allowEditingLayer: this.props.allowEditingLayers,
-            filters: lodash_1.default.compact(filters)
+            filters: lodash_1.default.compact(filters),
+            translate: this.props.translate
         }));
     };
     render() {

package/lib/maps/MapTranslationsTab.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+import { Schema } from "@mwater/expressions";
+import { MapDesign } from "./MapDesign";
+export interface MapTranslationsTabProps {
+    /** Schema to use */
+    schema: Schema;
+    /** Map design */
+    design: MapDesign;
+    /** Called with new design */
+    onDesignChange: (design: MapDesign) => void;
+}
+/**
+ * Translations tab for map designer that wraps the reusable TranslationsTabComponent
+ */
+export declare function MapTranslationsTab(props: MapTranslationsTabProps): React.JSX.Element;

package/lib/maps/MapTranslationsTab.js

@@ -0,0 +1,47 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MapTranslationsTab = MapTranslationsTab;
+const react_1 = __importStar(require("react"));
+const TranslationsTabComponent_1 = require("../TranslationsTabComponent");
+const MapUtils = __importStar(require("./MapUtils"));
+const immer_1 = __importDefault(require("immer"));
+/**
+ * Translations tab for map designer that wraps the reusable TranslationsTabComponent
+ */
+function MapTranslationsTab(props) {
+    const { design, onDesignChange, schema } = props;
+    const translatableStrings = (0, react_1.useMemo)(() => MapUtils.getTranslatableStrings(design, schema), [design, schema]);
+    return (react_1.default.createElement(TranslationsTabComponent_1.TranslationsTabComponent, { locale: design.locale || "en", otherLocales: design.otherLocales || [], translations: design.translations || {}, translatableStrings: translatableStrings, onLocaleChange: (locale) => onDesignChange((0, immer_1.default)(design, draft => {
+            draft.locale = locale;
+        })), onOtherLocalesChange: (otherLocales) => onDesignChange((0, immer_1.default)(design, draft => {
+            draft.otherLocales = otherLocales;
+        })), onTranslationsChange: (translations) => onDesignChange((0, immer_1.default)(design, draft => {
+            draft.translations = translations;
+        })), downloadFilename: "Map Translations.xlsx", baseLanguageDescription: T `This is the language that the map is written in.` }));
+}

package/lib/maps/MapUtils.d.ts

@@ -3,6 +3,7 @@ import { DataSource, Schema } from "@mwater/expressions";
 import { JsonQLFilter } from "../JsonQLFilter";
 import { MapDesign } from "./MapDesign";
 import { HoverOverItem } from "./maps";
+import { Axis } from "../axes/Axis";
 export interface MapScope {
     name: string;
     filter: JsonQLFilter;
@@ -24,6 +25,16 @@ export declare function getCompiledFilters(design: MapDesign, schema: Schema, fi
  * Get a list of translatable strings in the map design
  */
 export declare function getTranslatableStrings(design: MapDesign, schema: Schema): string[];
+/**
+ * Get translatable strings from an axis's categoryLabels and nullLabel.
+ * Always includes "None" since it's the default label for null values in AxisBuilder.
+ */
+export declare function getTranslatableStringsFromAxis(axis: Axis | null | undefined): string[];
+/**
+ * Translate an axis's category labels and null label.
+ * If no nullLabel is set, translates the default "None" and sets it so AxisBuilder uses it.
+ */
+export declare function translateAxis(axis: Axis | null | undefined, translate: (input: string) => string): Axis | null | undefined;
 /**
  * Convenience function to get hover over data for a map given an id and a list of hover over items
  */

package/lib/maps/MapUtils.js

@@ -34,10 +34,13 @@ exports.convertToMarkersMap = convertToMarkersMap;
 exports.getFilterableTables = getFilterableTables;
 exports.getCompiledFilters = getCompiledFilters;
 exports.getTranslatableStrings = getTranslatableStrings;
+exports.getTranslatableStringsFromAxis = getTranslatableStringsFromAxis;
+exports.translateAxis = translateAxis;
 exports.getSimpleHoverOverData = getSimpleHoverOverData;
 const lodash_1 = __importStar(require("lodash"));
 const expressions_1 = require("@mwater/expressions");
 const LayerFactory_1 = __importDefault(require("./LayerFactory"));
+const immer_1 = require("immer");
 // Check if can convert to a cluster map. Only maps containing marker views can be
 function canConvertToClusterMap(design) {
     return lodash_1.default.any(design.layerViews, (lv) => lv.type === "Markers");
@@ -159,6 +162,50 @@ function getTranslatableStrings(design, schema) {
     // Remove duplicates
     return lodash_1.default.uniq(strings);
 }
+/**
+ * Get translatable strings from an axis's categoryLabels and nullLabel.
+ * Always includes "None" since it's the default label for null values in AxisBuilder.
+ */
+function getTranslatableStringsFromAxis(axis) {
+    const strings = [];
+    if (axis?.categoryLabels) {
+        strings.push(...Object.values(axis.categoryLabels));
+    }
+    if (axis?.nullLabel) {
+        strings.push(axis.nullLabel);
+    }
+    else {
+        // Always include "None" as it's the default nullLabel in AxisBuilder
+        strings.push("None");
+    }
+    return strings;
+}
+/**
+ * Translate an axis's category labels and null label.
+ * If no nullLabel is set, translates the default "None" and sets it so AxisBuilder uses it.
+ */
+function translateAxis(axis, translate) {
+    if (!axis)
+        return axis;
+    return (0, immer_1.produce)(axis, draft => {
+        if (draft.categoryLabels) {
+            for (const key in draft.categoryLabels) {
+                draft.categoryLabels[key] = translate(draft.categoryLabels[key]);
+            }
+        }
+        if (draft.nullLabel) {
+            draft.nullLabel = translate(draft.nullLabel);
+        }
+        else {
+            // Translate the default "None" and set it so AxisBuilder uses it
+            // instead of falling back to T`None` which uses the global locale
+            const translatedNone = translate("None");
+            if (translatedNone !== "None") {
+                draft.nullLabel = translatedNone;
+            }
+        }
+    });
+}
 /**
  * Convenience function to get hover over data for a map given an id and a list of hover over items
  */

package/lib/maps/MapViewComponent.d.ts

@@ -32,7 +32,7 @@ export interface MapViewComponentProps {
     zoomLocked?: boolean;
     /** Locale to use. Overrides map design locale */
     locale?: string;
-    /** Translate function to use for display. TODO: implement this */
+    /** Translate function to use for display */
     translate?: (input: string) => string;
     /** Increment to force refresh */
     refreshTrigger?: number;

package/lib/maps/MapViewComponent.js

@@ -6,14 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.MapViewComponent = MapViewComponent;
 const react_1 = __importDefault(require("react"));
 const VectorMapViewComponent_1 = require("./VectorMapViewComponent");
-const RasterMapViewComponent_1 = __importDefault(require("./RasterMapViewComponent"));
-const vectorMaps_1 = require("./vectorMaps");
 /** Component that displays just the map */
 function MapViewComponent(props) {
-    if ((0, vectorMaps_1.areVectorMapsEnabled)()) {
-        return react_1.default.createElement(VectorMapViewComponent_1.VectorMapViewComponent, { ...props });
-    }
-    else {
-        return react_1.default.createElement(RasterMapViewComponent_1.default, { ...props });
-    }
+    return react_1.default.createElement(VectorMapViewComponent_1.VectorMapViewComponent, { ...props });
 }