@mwater/visualization 5.5.0 → 5.6.1

package/lib/maps/MarkersLayerDesignerComponent.js

@@ -28,10 +28,9 @@ 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 expressions_ui_1 = require("@mwater/expressions-ui");
 const expressions_1 = require("@mwater/expressions");
-const AxisComponent_1 = __importDefault(require("./../axes/AxisComponent"));
+const AxisComponent_1 = __importDefault(require("../axes/AxisComponent"));
 const ColorComponent_1 = __importDefault(require("../ColorComponent"));
 const expressions_ui_2 = require("@mwater/expressions-ui");
 const EditPopupComponent_1 = __importDefault(require("./EditPopupComponent"));
@@ -39,66 +38,88 @@ const ZoomLevelsComponent_1 = __importDefault(require("./ZoomLevelsComponent"));
 const MarkerSymbolSelectComponent_1 = __importDefault(require("./MarkerSymbolSelectComponent"));
 const PopupFilterJoinsUtils = __importStar(require("./PopupFilterJoinsUtils"));
 const ui = __importStar(require("@mwater/react-library/lib/bootstrap"));
-const EditHoverOver_1 = __importDefault(require("./EditHoverOver"));
+const EditHoverOver_1 = require("./EditHoverOver");
 const rc_slider_1 = __importDefault(require("rc-slider"));
-// Designer for a markers layer
+const immer_1 = require("immer");
+/** Designer for a markers layer */
 class MarkersLayerDesignerComponent extends react_1.default.Component {
-    // Apply updates to design
-    update(updates) {
-        return this.props.onDesignChange(lodash_1.default.extend({}, this.props.design, updates));
-    }
-    // Update axes with specified changes
-    updateAxes(changes) {
-        const axes = lodash_1.default.extend({}, this.props.design.axes, changes);
-        return this.update({ axes });
-    }
     handleTableChange = (table) => {
-        return this.update({ table });
+        this.props.onDesignChange((0, immer_1.produce)(this.props.design, draft => {
+            draft.table = table;
+        }));
     };
     handleGeometryAxisChange = (axis) => {
-        return this.updateAxes({ geometry: axis });
+        this.props.onDesignChange((0, immer_1.produce)(this.props.design, draft => {
+            draft.axes.geometry = axis;
+        }));
     };
     handleColorAxisChange = (axis) => {
-        return this.updateAxes({ color: axis });
+        this.props.onDesignChange((0, immer_1.produce)(this.props.design, draft => {
+            draft.axes.color = axis ?? undefined;
+        }));
     };
     handleFilterChange = (expr) => {
-        return this.update({ filter: expr });
+        this.props.onDesignChange((0, immer_1.produce)(this.props.design, draft => {
+            draft.filter = expr;
+        }));
     };
     handleColorChange = (color) => {
-        return this.update({ color });
+        this.props.onDesignChange((0, immer_1.produce)(this.props.design, draft => {
+            draft.color = color;
+        }));
     };
     handlePolygonBorderColorChange = (polygonBorderColor) => {
-        return this.update({ polygonBorderColor });
+        this.props.onDesignChange((0, immer_1.produce)(this.props.design, draft => {
+            draft.polygonBorderColor = polygonBorderColor;
+        }));
     };
     handlePolygonFillOpacityChange = (polygonFillOpacity) => {
-        return this.update({ polygonFillOpacity: polygonFillOpacity / 100 });
+        this.props.onDesignChange((0, immer_1.produce)(this.props.design, draft => {
+            draft.polygonFillOpacity = polygonFillOpacity / 100;
+        }));
     };
     handleSymbolChange = (symbol) => {
-        return this.update({ symbol });
-    };
-    handleNameChange = (e) => {
-        return this.update({ name: e.target.value });
+        this.props.onDesignChange((0, immer_1.produce)(this.props.design, draft => {
+            draft.symbol = symbol;
+        }));
     };
     handleMarkerSizeChange = (markerSize) => {
-        return this.update({ markerSize });
+        this.props.onDesignChange((0, immer_1.produce)(this.props.design, draft => {
+            draft.markerSize = markerSize;
+        }));
     };
     handleLineWidthChange = (lineWidth) => {
-        return this.update({ lineWidth });
+        this.props.onDesignChange((0, immer_1.produce)(this.props.design, draft => {
+            draft.lineWidth = lineWidth;
+        }));
+    };
+    handleLabelAxisChange = (axis) => {
+        this.props.onDesignChange((0, immer_1.produce)(this.props.design, draft => {
+            draft.axes.label = axis ?? undefined;
+        }));
+    };
+    handleLabelPositionChange = (labelPosition) => {
+        this.props.onDesignChange((0, immer_1.produce)(this.props.design, draft => {
+            draft.labelPosition = labelPosition;
+        }));
     };
     renderTable() {
-        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, R("i", { className: "fa fa-database" }), " ", T `Data Source`), R("div", { style: { marginLeft: 10 } }, R(expressions_ui_2.TableSelectComponent, {
-            schema: this.props.schema,
-            value: this.props.design.table,
-            onChange: this.handleTableChange,
-            filter: this.props.design.filter,
-            onFilterChange: this.handleFilterChange
-        })));
+        return (react_1.default.createElement("div", { className: "mb-3" },
+            react_1.default.createElement("label", { className: "text-muted" },
+                react_1.default.createElement("i", { className: "fa fa-database" }),
+                " ",
+                T `Data Source`),
+            react_1.default.createElement("div", { style: { marginLeft: 10 } },
+                react_1.default.createElement(expressions_ui_2.TableSelectComponent, { schema: this.props.schema, value: this.props.design.table, onChange: this.handleTableChange, filter: this.props.design.filter, onFilterChange: this.handleFilterChange }))));
     }
     renderGeometryAxis() {
         if (!this.props.design.table) {
             return;
         }
-        const title = R("span", null, R("span", { className: "fas fa-map-marker-alt" }), " ", T `Location`);
+        const title = react_1.default.createElement("span", null,
+            react_1.default.createElement("span", { className: "fas fa-map-marker-alt" }),
+            " ",
+            T `Location`);
         const filters = lodash_1.default.clone(this.props.filters) || [];
         if (this.props.design.filter != null) {
             const exprCompiler = new expressions_1.ExprCompiler(this.props.schema);
@@ -107,16 +128,10 @@ class MarkersLayerDesignerComponent extends react_1.default.Component {
                 filters.push({ table: this.props.design.filter.table, jsonql });
             }
         }
-        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, title), R("div", { style: { marginLeft: 10 } }, R(AxisComponent_1.default, {
-            schema: this.props.schema,
-            dataSource: this.props.dataSource,
-            table: this.props.design.table,
-            types: ["geometry"],
-            aggrNeed: "none",
-            value: this.props.design.axes.geometry,
-            onChange: this.handleGeometryAxisChange,
-            filters
-        })));
+        return (react_1.default.createElement("div", { className: "mb-3" },
+            react_1.default.createElement("label", { className: "text-muted" }, title),
+            react_1.default.createElement("div", { style: { marginLeft: 10 } },
+                react_1.default.createElement(AxisComponent_1.default, { schema: this.props.schema, dataSource: this.props.dataSource, table: this.props.design.table, types: ["geometry"], aggrNeed: "none", value: this.props.design.axes.geometry, onChange: this.handleGeometryAxisChange, filters: filters }))));
     }
     renderColor() {
         if (!this.props.design.axes.geometry) {
@@ -130,140 +145,149 @@ class MarkersLayerDesignerComponent extends react_1.default.Component {
                 filters.push({ table: this.props.design.filter.table, jsonql });
             }
         }
-        return R("div", null, !this.props.design.axes.color
-            ? R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, R("span", { className: "fas fa-tint" }), T `Color`), R("div", null, R(ColorComponent_1.default, {
-                color: this.props.design.color,
-                onChange: this.handleColorChange
-            })))
-            : undefined, R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, R("span", { className: "fas fa-tint" }), T `Color By Data`), R(AxisComponent_1.default, {
-            schema: this.props.schema,
-            dataSource: this.props.dataSource,
-            table: this.props.design.table,
-            types: ["text", "enum", "boolean", "date"],
-            aggrNeed: "none",
-            value: this.props.design.axes.color,
-            defaultColor: this.props.design.color,
-            showColorMap: true,
-            onChange: this.handleColorAxisChange,
-            allowExcludedValues: true,
-            filters
-        })));
+        return (react_1.default.createElement("div", null,
+            !this.props.design.axes.color ? (react_1.default.createElement("div", { className: "mb-3" },
+                react_1.default.createElement("label", { className: "text-muted" },
+                    react_1.default.createElement("span", { className: "fas fa-tint" }),
+                    T `Color`),
+                react_1.default.createElement("div", null,
+                    react_1.default.createElement(ColorComponent_1.default, { color: this.props.design.color, onChange: this.handleColorChange })))) : undefined,
+            react_1.default.createElement("div", { className: "mb-3" },
+                react_1.default.createElement("label", { className: "text-muted" },
+                    react_1.default.createElement("span", { className: "fas fa-tint" }),
+                    T `Color By Data`),
+                react_1.default.createElement(AxisComponent_1.default, { schema: this.props.schema, dataSource: this.props.dataSource, table: this.props.design.table, types: ["text", "enum", "boolean", "date"], aggrNeed: "none", value: this.props.design.axes.color, defaultColor: this.props.design.color, showColorMap: true, onChange: this.handleColorAxisChange, allowExcludedValues: true, filters: filters }))));
     }
     renderSymbol() {
         if (!this.props.design.axes.geometry) {
             return;
         }
-        return R(MarkerSymbolSelectComponent_1.default, { symbol: this.props.design.symbol, onChange: this.handleSymbolChange });
+        return react_1.default.createElement(MarkerSymbolSelectComponent_1.default, { symbol: this.props.design.symbol, onChange: this.handleSymbolChange });
     }
     renderMarkerSize() {
         if (!this.props.design.axes.geometry) {
             return;
         }
-        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, T `Marker Size`), R(ui.Select, {
-            value: this.props.design.markerSize || 10,
-            options: [
-                { value: 5, label: T `Extra small` },
-                { value: 8, label: T `Small` },
-                { value: 10, label: T `Normal` },
-                { value: 13, label: T `Large` },
-                { value: 16, label: T `Extra large` }
-            ],
-            onChange: this.handleMarkerSizeChange
-        }));
+        return (react_1.default.createElement("div", { className: "mb-3" },
+            react_1.default.createElement("label", { className: "text-muted" }, T `Marker Size`),
+            react_1.default.createElement(ui.Select, { value: this.props.design.markerSize || 10, options: [
+                    { value: 5, label: T `Extra small` },
+                    { value: 8, label: T `Small` },
+                    { value: 10, label: T `Normal` },
+                    { value: 13, label: T `Large` },
+                    { value: 16, label: T `Extra large` }
+                ], onChange: this.handleMarkerSizeChange })));
     }
     renderLineWidth() {
         if (!this.props.design.axes.geometry) {
             return;
         }
-        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, T `Line Width (for shapes)`), R(ui.Select, {
-            value: this.props.design.lineWidth != null ? this.props.design.lineWidth : 3,
-            options: [
-                { value: 0, label: T `None` },
-                { value: 1, label: T `1 pixel` },
-                { value: 2, label: T `2 pixels` },
-                { value: 3, label: T `3 pixels` },
-                { value: 4, label: T `4 pixels` },
-                { value: 5, label: T `5 pixels` },
-                { value: 6, label: T `6 pixels` }
-            ],
-            onChange: this.handleLineWidthChange
-        }));
+        return (react_1.default.createElement("div", { className: "mb-3" },
+            react_1.default.createElement("label", { className: "text-muted" }, T `Line Width (for shapes)`),
+            react_1.default.createElement(ui.Select, { value: this.props.design.lineWidth != null ? this.props.design.lineWidth : 3, options: [
+                    { value: 0, label: T `None` },
+                    { value: 1, label: T `1 pixel` },
+                    { value: 2, label: T `2 pixels` },
+                    { value: 3, label: T `3 pixels` },
+                    { value: 4, label: T `4 pixels` },
+                    { value: 5, label: T `5 pixels` },
+                    { value: 6, label: T `6 pixels` }
+                ], onChange: this.handleLineWidthChange })));
     }
     renderPolygonBorderColor() {
         if (!this.props.design.axes.geometry) {
             return;
         }
-        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, T `Polygon border color (blank for same as fill color)`), R("div", null, R(ColorComponent_1.default, {
-            color: this.props.design.polygonBorderColor,
-            onChange: this.handlePolygonBorderColorChange
-        })));
+        return (react_1.default.createElement("div", { className: "mb-3" },
+            react_1.default.createElement("label", { className: "text-muted" }, T `Polygon border color (blank for same as fill color)`),
+            react_1.default.createElement("div", null,
+                react_1.default.createElement(ColorComponent_1.default, { color: this.props.design.polygonBorderColor, onChange: this.handlePolygonBorderColorChange }))));
     }
     renderPolygonFillOpacity() {
         if (!this.props.design.axes.geometry) {
             return;
         }
         const opacity = this.props.design.polygonFillOpacity != null ? this.props.design.polygonFillOpacity : 0.25;
-        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, R("span", null, T `Polygon Fill Opacity: ${Math.round(opacity * 100)}%`)), R("div", { style: { padding: "10px" } }, react_1.default.createElement(rc_slider_1.default, {
-            min: 0,
-            max: 100,
-            step: 1,
-            tipTransitionName: "rc-slider-tooltip-zoom-down",
-            value: opacity * 100,
-            onChange: this.handlePolygonFillOpacityChange
-        })));
+        return (react_1.default.createElement("div", { className: "mb-3" },
+            react_1.default.createElement("label", { className: "text-muted" },
+                react_1.default.createElement("span", null, T `Polygon Fill Opacity: ${Math.round(opacity * 100)}%`)),
+            react_1.default.createElement("div", { style: { padding: "10px" } },
+                react_1.default.createElement(rc_slider_1.default, { min: 0, max: 100, step: 1, tipTransitionName: "rc-slider-tooltip-zoom-down", value: opacity * 100, onChange: this.handlePolygonFillOpacityChange }))));
     }
     renderFilter() {
         // If no data, hide
         if (!this.props.design.axes.geometry) {
             return null;
         }
-        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, R("span", { className: "fas fa-filter" }), T `Filters`), R("div", { style: { marginLeft: 8 } }, R(expressions_ui_1.FilterExprComponent, {
-            schema: this.props.schema,
-            dataSource: this.props.dataSource,
-            onChange: this.handleFilterChange,
-            table: this.props.design.table,
-            value: this.props.design.filter
-        })));
+        return (react_1.default.createElement("div", { className: "mb-3" },
+            react_1.default.createElement("label", { className: "text-muted" },
+                react_1.default.createElement("span", { className: "fas fa-filter" }),
+                T `Filters`),
+            react_1.default.createElement("div", { style: { marginLeft: 8 } },
+                react_1.default.createElement(expressions_ui_1.FilterExprComponent, { schema: this.props.schema, dataSource: this.props.dataSource, onChange: this.handleFilterChange, table: this.props.design.table, value: this.props.design.filter }))));
+    }
+    renderLabelAxis() {
+        if (!this.props.design.axes.geometry) {
+            return;
+        }
+        const filters = lodash_1.default.clone(this.props.filters) || [];
+        if (this.props.design.filter != null) {
+            const exprCompiler = new expressions_1.ExprCompiler(this.props.schema);
+            const jsonql = exprCompiler.compileExpr({ expr: this.props.design.filter, tableAlias: "{alias}" });
+            if (jsonql) {
+                filters.push({ table: this.props.design.filter.table, jsonql });
+            }
+        }
+        return (react_1.default.createElement("div", { className: "mb-3" },
+            react_1.default.createElement("label", { className: "text-muted" },
+                react_1.default.createElement("span", { className: "fas fa-tag" }),
+                " ",
+                T `Label (points only)`),
+            react_1.default.createElement(AxisComponent_1.default, { schema: this.props.schema, dataSource: this.props.dataSource, table: this.props.design.table, types: ["text", "number"], aggrNeed: "none", value: this.props.design.axes.label, onChange: this.handleLabelAxisChange, filters: filters })));
+    }
+    renderLabelPosition() {
+        // Only show if label axis is set
+        if (!this.props.design.axes.label) {
+            return;
+        }
+        return (react_1.default.createElement("div", { className: "mb-3" },
+            react_1.default.createElement("label", { className: "text-muted" }, T `Label Position`),
+            react_1.default.createElement(ui.Select, { value: this.props.design.labelPosition || "bottom", options: [
+                    { value: "top", label: T `Top` },
+                    { value: "bottom", label: T `Bottom` },
+                    { value: "left", label: T `Left` },
+                    { value: "right", label: T `Right` }
+                ], onChange: this.handleLabelPositionChange })));
     }
     renderPopup() {
         if (!this.props.design.table) {
             return null;
         }
-        return R(EditPopupComponent_1.default, {
-            design: this.props.design,
-            onDesignChange: this.props.onDesignChange,
-            schema: this.props.schema,
-            dataSource: this.props.dataSource,
-            table: this.props.design.table,
-            idTable: this.props.design.table,
-            defaultPopupFilterJoins: PopupFilterJoinsUtils.createDefaultPopupFilterJoins(this.props.design.table)
-        });
+        return (react_1.default.createElement(EditPopupComponent_1.default, { design: this.props.design, onDesignChange: this.props.onDesignChange, schema: this.props.schema, dataSource: this.props.dataSource, table: this.props.design.table, idTable: this.props.design.table, defaultPopupFilterJoins: PopupFilterJoinsUtils.createDefaultPopupFilterJoins(this.props.design.table) }));
     }
     renderHoverOver() {
         if (!this.props.design.table) {
             return null;
         }
-        return R(EditHoverOver_1.default, {
-            design: this.props.design,
-            onDesignChange: this.props.onDesignChange,
-            schema: this.props.schema,
-            dataSource: this.props.dataSource,
-            table: this.props.design.table,
-            idTable: this.props.design.table,
-            defaultPopupFilterJoins: PopupFilterJoinsUtils.createDefaultPopupFilterJoins(this.props.design.table)
-        });
+        return (react_1.default.createElement(EditHoverOver_1.EditHoverOver, { design: this.props.design, onDesignChange: this.props.onDesignChange, schema: this.props.schema, dataSource: this.props.dataSource, table: this.props.design.table, idTable: this.props.design.table, defaultPopupFilterJoins: PopupFilterJoinsUtils.createDefaultPopupFilterJoins(this.props.design.table), aggrStatuses: ["individual", "literal"] }));
     }
     render() {
-        return R("div", null, this.renderTable(), this.renderGeometryAxis(), this.renderColor(), this.renderSymbol(), this.renderMarkerSize(), R(ui.CollapsibleSection, {
-            label: T `Shape Options`,
-            labelMuted: true
-        }, [
-            this.renderLineWidth(),
-            this.renderPolygonBorderColor(),
-            this.renderPolygonFillOpacity(),
-        ]), this.renderFilter(), this.renderPopup(), this.renderHoverOver(), this.props.design.table
-            ? R(ZoomLevelsComponent_1.default, { design: this.props.design, onDesignChange: this.props.onDesignChange })
-            : undefined);
+        return (react_1.default.createElement("div", null,
+            this.renderTable(),
+            this.renderGeometryAxis(),
+            this.renderColor(),
+            this.renderSymbol(),
+            this.renderMarkerSize(),
+            this.renderLabelAxis(),
+            this.renderLabelPosition(),
+            react_1.default.createElement(ui.CollapsibleSection, { label: T `Shape Options`, labelMuted: true },
+                this.renderLineWidth(),
+                this.renderPolygonBorderColor(),
+                this.renderPolygonFillOpacity()),
+            this.renderFilter(),
+            this.renderPopup(),
+            this.renderHoverOver(),
+            this.props.design.table ? (react_1.default.createElement(ZoomLevelsComponent_1.default, { design: this.props.design, onDesignChange: this.props.onDesignChange })) : undefined));
     }
 }
 exports.default = MarkersLayerDesignerComponent;

package/lib/maps/ServerMapDataSource.d.ts

@@ -43,7 +43,6 @@ declare class ServerLayerDataSource implements MapLayerDataSource {
     options: ServerMapLayerDataSourceOptions;
     constructor(options: ServerMapLayerDataSourceOptions);
     getTileUrl(design: any, filters: JsonQLFilter[]): any;
-    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/ServerMapDataSource.js

@@ -76,21 +76,6 @@ class ServerLayerDataSource {
         }
         return this.createUrl(filters, "png");
     }
-    // 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
-    getUtfGridUrl(design, filters) {
-        // Handle special cases
-        if (this.options.layerView.type === "MWaterServer") {
-            return this.createLegacyUrl(design, "grid.json", filters);
-        }
-        // Create layer
-        const layer = LayerFactory_1.default.createLayer(this.options.layerView.type);
-        // If layer has tiles url directly available
-        if (layer.getLayerDefinitionType() === "TileUrl") {
-            return layer.getUtfGridUrl(this.options.layerView.design, filters);
-        }
-        return this.createUrl(filters, "grid.json");
-    }
     /** 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
      */
@@ -144,22 +129,12 @@ class ServerLayerDataSource {
             rev: this.options.rev
         };
         let url = `${this.options.apiUrl}maps/tiles/{z}/{x}/{y}.${extension}?` + querystring_1.default.stringify(query);
-        // Add subdomains: {s} will be substituted with "a", "b" or "c" in leaflet for api.mwater.co only.
-        // Used to speed queries
-        if (url.match(/^https:\/\/api\.mwater\.co\//)) {
-            url = url.replace(/^https:\/\/api\.mwater\.co\//, "https://{s}-api.mwater.co/");
-        }
         return url;
     }
     // Create query string
     createLegacyUrl(design, extension, filters) {
         let where;
         let url = `${this.options.apiUrl}maps/tiles/{z}/{x}/{y}.${extension}?type=${design.type}&radius=1000`;
-        // Add subdomains: {s} will be substituted with "a", "b" or "c" in leaflet for api.mwater.co only.
-        // Used to speed queries
-        if (url.match(/^https:\/\/api\.mwater\.co\//)) {
-            url = url.replace(/^https:\/\/api\.mwater\.co\//, "https://{s}-api.mwater.co/");
-        }
         if (this.options.client) {
             url += `&client=${this.options.client}`;
         }

package/lib/maps/SwitchableTileUrlLayer.d.ts

@@ -37,8 +37,6 @@ export default class SwitchableTileUrlLayer extends Layer<SwitchableTileUrlLayer
     getMaxZoom(design: SwitchableTileUrlLayerDesign): number;
     /** Gets the tile url for definition type "TileUrl" */
     getTileUrl(design: SwitchableTileUrlLayerDesign, filters: JsonQLFilter[]): string | null;
-    /** Gets the utf grid url for definition type "TileUrl" */
-    getUtfGridUrl(design: SwitchableTileUrlLayerDesign, filters: JsonQLFilter[]): string | null;
     getLegend(options: LegendOptions<SwitchableTileUrlLayerDesign>): ReactNode;
     /** True if layer can be edited */
     isEditable(): boolean;

package/lib/maps/SwitchableTileUrlLayer.js

@@ -26,15 +26,6 @@ class SwitchableTileUrlLayer extends Layer_1.default {
         }
         return option.tileUrl || null;
     }
-    /** Gets the utf grid url for definition type "TileUrl" */
-    getUtfGridUrl(design, filters) {
-        // Find active option
-        const option = design.options.find((d) => d.id === design.activeOption);
-        if (!option) {
-            return null;
-        }
-        return option.utfGridUrl || null;
-    }
     getLegend(options) {
         const { design, name } = options;
         // Find active option

package/lib/maps/TileUrlLayer.d.ts

@@ -16,7 +16,6 @@ export interface TileUrlLayerDesign {
 export default class TileUrlLayer extends Layer<TileUrlLayerDesign> {
     getLayerDefinitionType(): "TileUrl";
     getTileUrl(design: any, filters: any): any;
-    getUtfGridUrl(design: any, filters: any): null;
     getMinZoom(design: any): any;
     getMaxZoom(design: any): any;
     isEditable(): boolean;

package/lib/maps/TileUrlLayer.js

@@ -18,7 +18,6 @@ Design is:
   legendUrl:
 */
 class TileUrlLayer extends Layer_1.default {
-    // Gets the type of layer definition ("JsonQLCss"/"TileUrl")
     getLayerDefinitionType() {
         return "TileUrl";
     }
@@ -26,10 +25,6 @@ class TileUrlLayer extends Layer_1.default {
     getTileUrl(design, filters) {
         return design.tileUrl;
     }
-    // Gets the utf grid url for definition type "TileUrl"
-    getUtfGridUrl(design, filters) {
-        return null;
-    }
     // Get min and max zoom levels
     getMinZoom(design) {
         return design.minZoom;

package/lib/maps/VectorMapViewComponent.js

@@ -67,7 +67,18 @@ function VectorMapViewComponent(props) {
     // Locale to use
     const locale = props.locale || props.design.locale || "en";
     // Translate function to use 
-    const translate = props.translate || ((input) => input);
+    const translate = (0, react_1.useCallback)((input) => {
+        // Use passed in translate function if present
+        if (props.translate) {
+            return props.translate(input);
+        }
+        // If locale is the same as the design locale, don't translate
+        if (locale === props.design.locale) {
+            return input;
+        }
+        // Otherwise, use translation from design
+        return props.design.translations?.[locale]?.[input] ?? input;
+    }, [props.translate, props.design.translations, props.design.locale, locale]);
     // Last feature that mouse entered
     const lastFeature = (0, react_2.useRef)();
     // Load map
@@ -230,17 +241,9 @@ function VectorMapViewComponent(props) {
             else {
                 const tileUrl = props.mapDataSource.getLayerDataSource(layerView.id).getTileUrl(design, []);
                 if (tileUrl) {
-                    // Replace "{s}" with "a", "b", "c"
-                    let tiles = [];
-                    if (tileUrl.includes("{s}")) {
-                        tiles = [tileUrl.replace("{s}", "a"), tileUrl.replace("{s}", "b"), tileUrl.replace("{s}", "c")];
-                    }
-                    else {
-                        tiles = [tileUrl];
-                    }
                     newSources[layerView.id] = {
                         type: "raster",
-                        tiles,
+                        tiles: [tileUrl],
                         tileSize: 256
                     };
                     newLayers.push({