@mwater/visualization 5.3.1 → 5.4.0

package/lib/maps/GridLayerDesigner.js

@@ -99,33 +99,33 @@ class GridLayerDesigner extends react_1.default.Component {
     };
     renderShape() {
         return (react_1.default.createElement("div", { className: "mb-3" },
-            react_1.default.createElement("label", { className: "text-muted" }, "Grid Type"),
+            react_1.default.createElement("label", { className: "text-muted" }, T `Grid Type`),
             react_1.default.createElement("div", { style: { marginLeft: 10 } },
                 react_1.default.createElement(ui.Toggle, { allowReset: false, value: this.props.design.shape, onChange: this.handleShapeChange, size: "sm", options: [
-                        { value: "hex", label: "Hexagonal" },
-                        { value: "square", label: "Square" }
+                        { value: "hex", label: T `Hexagonal` },
+                        { value: "square", label: T `Square` }
                     ] }))));
     }
     renderSize() {
         return (react_1.default.createElement("div", { className: "mb-3" },
-            react_1.default.createElement("label", { className: "text-muted" }, "Size"),
+            react_1.default.createElement("label", { className: "text-muted" }, T `Size`),
             react_1.default.createElement("div", { style: { marginLeft: 10 } },
                 react_1.default.createElement("div", { style: { display: "inline-block" } },
                     react_1.default.createElement(ui.NumberInput, { decimal: true, value: this.props.design.size, onChange: this.handleSizeChange })),
                 "\u00A0",
                 react_1.default.createElement("div", { style: { display: "inline-block" } },
                     react_1.default.createElement(ui.Toggle, { allowReset: false, value: this.props.design.sizeUnits, onChange: this.handleSizeUnitsChange, size: "sm", options: [
-                            { value: "pixels", label: "Pixels" },
-                            { value: "meters", label: "Meters (approximate)" }
+                            { value: "pixels", label: T `Pixels` },
+                            { value: "meters", label: T `Meters (approximate)` }
                         ] })),
                 "\u00A0",
-                react_1.default.createElement(PopoverHelpComponent_1.default, { placement: "bottom" }, "Pixel grids always appear to be the same size when zoomed. Meters are for a fixed-size grid and have limits on how far the user can zoom out."))));
+                react_1.default.createElement(PopoverHelpComponent_1.default, { placement: "bottom" }, T `Pixel grids always appear to be the same size when zoomed. Meters are for a fixed-size grid and have limits on how far the user can zoom out.`))));
     }
     renderTable() {
         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" }),
-                " Data Source"),
+                T ` Data Source`),
             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 })));
     }
     renderGeometryExpr() {
@@ -136,7 +136,7 @@ class GridLayerDesigner extends react_1.default.Component {
         return (react_1.default.createElement("div", { className: "mb-3" },
             react_1.default.createElement("label", { className: "text-muted" },
                 react_1.default.createElement("i", { className: "fas fa-map-marker-alt" }),
-                " Location"),
+                T ` Location`),
             react_1.default.createElement("div", { style: { marginLeft: 8 } },
                 react_1.default.createElement(expressions_ui_1.ExprComponent, { schema: this.props.schema, dataSource: this.props.dataSource, onChange: this.handleGeometryExprChange, table: this.props.design.table, types: ["geometry"], value: this.props.design.geometryExpr }))));
     }
@@ -154,7 +154,7 @@ class GridLayerDesigner extends react_1.default.Component {
             }
         }
         const table = this.props.design.table;
-        return R("div", null, R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, R("span", { className: "fas fa-tint" }), "Color By Data"), R(AxisComponent_1.default, {
+        return R("div", null, 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,
@@ -168,7 +168,7 @@ class GridLayerDesigner extends react_1.default.Component {
         })));
     }
     renderFillOpacity() {
-        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, "Fill Opacity (%)"), ": ", R(rc_slider_1.default, {
+        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, T `Fill Opacity (%)`), ": ", R(rc_slider_1.default, {
             min: 0,
             max: 100,
             step: 1,
@@ -179,11 +179,11 @@ class GridLayerDesigner extends react_1.default.Component {
     }
     renderBorderStyle() {
         return (react_1.default.createElement("div", { className: "mb-3" },
-            react_1.default.createElement("label", { className: "text-muted" }, "Border Style"),
+            react_1.default.createElement("label", { className: "text-muted" }, T `Border Style`),
             react_1.default.createElement("div", { style: { marginLeft: 10 } },
                 react_1.default.createElement(ui.Toggle, { allowReset: false, value: this.props.design.borderStyle, onChange: this.handleBorderStyleChange, size: "sm", options: [
-                        { value: "none", label: "None" },
-                        { value: "color", label: "Line" }
+                        { value: "none", label: T `None` },
+                        { value: "color", label: T `Line` }
                     ] }))));
     }
     renderFilter() {
@@ -191,7 +191,7 @@ class GridLayerDesigner extends react_1.default.Component {
         if (!this.props.design.table) {
             return null;
         }
-        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, R("span", { className: "fas fa-filter" }), " Filters"), R("div", { style: { marginLeft: 8 } }, R(expressions_ui_1.FilterExprComponent, {
+        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,

package/lib/maps/LayerSwitcherComponent.js

@@ -26,7 +26,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.LayerSwitcherComponent = void 0;
+exports.LayerSwitcherComponent = LayerSwitcherComponent;
 const immer_1 = __importDefault(require("immer"));
 const react_1 = __importStar(require("react"));
 /** Component to switch layers on a map */
@@ -74,7 +74,6 @@ function LayerSwitcherComponent(props) {
             react_1.default.createElement("i", { className: "fas fa-layer-group fa-fw" })),
         dropdownOpen ? (react_1.default.createElement("div", { style: { backgroundColor: "white", padding: 5, textAlign: "left" } }, props.design.layerViews.map(renderLayerView))) : null));
 }
-exports.LayerSwitcherComponent = LayerSwitcherComponent;
 /** Hook for click outside catching */
 function useClickOutside(onClickOut) {
     const node = (0, react_1.useRef)(null);

package/lib/maps/LeafletMapComponent.d.ts

@@ -132,7 +132,7 @@ export default class LeafletMapComponent extends Component<Props> {
     componentDidMount(): any;
     componentDidUpdate(prevProps: any): any;
     componentWillUnmount(): L.Map;
-    openPopup(options: any): Element;
+    openPopup(options: any): any;
     updateMap(prevProps?: Props): any;
     render(): React.DetailedReactHTMLElement<{
         className: string | undefined;

package/lib/maps/LeafletMapComponent.js

@@ -141,7 +141,7 @@ class LeafletMapComponent extends react_1.Component {
             dragging: this.props.dragging,
             touchZoom: this.props.touchZoom,
             scrollWheelZoom: this.props.scrollWheelZoom,
-            minZoom: 1,
+            minZoom: 1, // Bing doesn't allow going to zero
             keyboard: this.props.keyboard
         };
         // Must not be null, or will not zoom

package/lib/maps/LegendComponent.js

@@ -3,6 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = LegendComponent;
 const lodash_1 = __importDefault(require("lodash"));
 const react_1 = __importDefault(require("react"));
 const LayerFactory_1 = __importDefault(require("./LayerFactory"));
@@ -71,4 +72,3 @@ function LegendComponent(props) {
         react_1.default.createElement("div", { key: "hide", style: hideStyle, onClick: props.onHide },
             react_1.default.createElement("i", { className: "fa fa-angle-double-right" }))));
 }
-exports.default = LegendComponent;

package/lib/maps/MWaterServerLayer.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="jquery" />
 import Layer from "./Layer";
 import React from "react";
 import { Schema } from "@mwater/expressions";

package/lib/maps/MWaterServerLayer.js

@@ -78,7 +78,7 @@ exports.default = MWaterServerLayer;
 class LoadingLegend extends react_1.default.Component {
     constructor(props) {
         super(props);
-        this.state = { html: "Loading..." };
+        this.state = { html: T `Loading...` };
     }
     componentDidMount() {
         return jquery_1.default.get(this.props.url).done((data) => {

package/lib/maps/MapComponent.js

@@ -15,15 +15,15 @@ const PopoverHelpComponent_1 = __importDefault(require("@mwater/react-library/li
 const QuickfilterCompiler_1 = __importDefault(require("../quickfilter/QuickfilterCompiler"));
 const QuickfiltersComponent_1 = __importDefault(require("../quickfilter/QuickfiltersComponent"));
 const MapUtils_1 = require("./MapUtils");
-const contexts_1 = require("@mwater/expressions-ui/lib/contexts");
+const expressions_ui_1 = require("@mwater/expressions-ui");
 /** Map with designer on right */
 class MapComponent extends react_1.default.Component {
-    static contextType = contexts_1.LocaleContext;
+    static contextType = expressions_ui_1.LocaleContext;
     constructor(props) {
         super(props);
         this.state = {
             undoStack: new UndoStack_1.default().push(props.design),
-            transientDesign: props.design,
+            transientDesign: props.design, // Temporary design for read-only maps
             zoomLocked: true,
             quickfiltersValues: props.quickfiltersValues ?? null,
             hideQuickfilters: false
@@ -60,22 +60,22 @@ class MapComponent extends react_1.default.Component {
                 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" }, "Changes to zoom level wont be saved in locked mode")),
+                }), 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" }, " Undo")),
+                }, R("span", { className: "fas fa-caret-left" }), R("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" }, " Redo"))
+                }, 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" }, " Show Quickfilters"))
-            : undefined, this.props.extraTitleButtonsElem, R("a", { key: "toggleDesign", className: "btn btn-link btn-sm", onClick: this.handleToggleDesignPanel, alt: "Toggle design panel" }, this.getDesign().hideDesignPanel ?
+            ? 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" })));
     }

package/lib/maps/MapControlComponent.js

@@ -16,7 +16,7 @@ class MapControlComponent extends react_1.default.Component {
             design: this.props.design,
             onDesignChange: this.props.onDesignChange,
             allowEditingLayers: false
-        }), R("br"), R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, "Map Style"), R(BaseLayerDesignerComponent_1.default, {
+        }), 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
         })));

package/lib/maps/MapDesignerComponent.js

@@ -72,22 +72,22 @@ class MapDesignerComponent extends react_1.default.Component {
         }), R(CheckboxComponent_1.default, {
             checked: this.props.design.autoBounds,
             onChange: this.handleAutoBoundsChange
-        }, R("span", { className: "text-muted" }, "Automatic zoom ", R(PopoverHelpComponent_1.default, { placement: "left" }, "Automatically zoom to the complete data whenever the map is loaded or the filters change"))), R(CheckboxComponent_1.default, {
+        }, R("span", { className: "text-muted" }, T `Automatic zoom `, R(PopoverHelpComponent_1.default, { placement: "left" }, T `Automatically zoom to the complete data whenever the map is loaded or the filters change`))), R(CheckboxComponent_1.default, {
             checked: this.props.design.showLayerSwitcher,
             onChange: this.handleShowLayerSwitcherChange
-        }, R("span", { className: "text-muted" }, "Show Layer Switcher ", R(PopoverHelpComponent_1.default, { placement: "left" }, "Show a control in the map allowing switching layers"))), R(ui.FormGroup, { label: "Initial Legend Display", labelMuted: true }, R(ui.Select, {
+        }, R("span", { className: "text-muted" }, T `Show Layer Switcher `, R(PopoverHelpComponent_1.default, { placement: "left" }, T `Show a control in the map allowing switching layers`))), R(ui.FormGroup, { label: T `Initial Legend Display`, labelMuted: true }, R(ui.Select, {
             value: this.props.design.initialLegendDisplay || "open",
             onChange: this.handleInitialLegendDisplayChange,
             options: [
-                { value: "open", label: "Open" },
-                { value: "closed", label: "Closed" },
-                { value: "closedIfSmall", label: "Open if wide enough" }
+                { value: "open", label: T `Open` },
+                { value: "closed", label: T `Closed` },
+                { value: "closedIfSmall", label: T `Open if wide enough` }
             ],
             style: { width: "auto" }
         })), MapUtils.canConvertToClusterMap(this.props.design)
-            ? R("div", { key: "tocluster" }, R("a", { onClick: this.handleConvertToClusterMap, className: "btn btn-link btn-sm" }, "Convert to cluster map"))
+            ? R("div", { key: "tocluster" }, R("a", { onClick: this.handleConvertToClusterMap, className: "btn btn-link btn-sm" }, T `Convert to cluster map`))
             : undefined, MapUtils.canConvertToMarkersMap(this.props.design)
-            ? R("div", { key: "toMarker" }, R("a", { onClick: this.handleConvertToMarkersMap, className: "btn btn-link btn-sm" }, "Convert to markers map"))
+            ? R("div", { key: "toMarker" }, R("a", { onClick: this.handleConvertToMarkersMap, className: "btn btn-link btn-sm" }, T `Convert to markers map`))
             : undefined, R(AttributionComponent, {
             text: this.props.design.attribution,
             onTextChange: this.handleAttributionChange
@@ -102,7 +102,7 @@ class MapDesignerComponent extends react_1.default.Component {
         const tabs = [
             {
                 id: "layers",
-                label: [R("i", { className: "fa fa-bars" }), " Layers"],
+                label: [R("i", { className: "fa fa-bars" }), T ` Layers`],
                 elem: R(MapLayersDesignerComponent_1.default, {
                     schema: this.props.schema,
                     dataSource: this.props.dataSource,
@@ -114,7 +114,7 @@ class MapDesignerComponent extends react_1.default.Component {
             },
             {
                 id: "filters",
-                label: [R("i", { className: "fa fa-filter" }), " Filters"],
+                label: [R("i", { className: "fa fa-filter" }), T ` Filters`],
                 elem: R(MapFiltersDesignerComponent_1.default, {
                     schema: this.props.schema,
                     dataSource: this.props.dataSource,
@@ -124,14 +124,14 @@ class MapDesignerComponent extends react_1.default.Component {
             },
             {
                 id: "options",
-                label: [R("i", { className: "fa fa-cog" }), " Options"],
+                label: [R("i", { className: "fa fa-cog" }), T ` Options`],
                 elem: this.renderOptionsTab()
             }
         ];
         if (this.props.enableQuickfilters) {
             tabs.splice(2, 0, {
                 id: "quickfilters",
-                label: [R("i", { className: "fa fa-bolt" }), " ", T("Quickfilters")],
+                label: [R("i", { className: "fa fa-bolt" }), " ", T `Quickfilters`],
                 elem: R("div", { style: { marginBottom: 200 } }, R(QuickfiltersDesignComponent_1.default, {
                     design: this.props.design.quickfilters || [],
                     onDesignChange: (qfDesign) => {
@@ -178,9 +178,9 @@ class AttributionComponent extends react_1.default.Component {
             ? this.renderEditor()
             : this.props.text
                 ? R("span", { onClick: this.handleTextClick, style: { cursor: "pointer" } }, this.props.text)
-                : R("a", { onClick: this.handleTextClick, className: "btn btn-link btn-sm" }, "+ Add attribution"));
+                : R("a", { onClick: this.handleTextClick, className: "btn btn-link btn-sm" }, T `+ Add attribution`));
         if (this.props.text || this.state.editing) {
-            elem = R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, "Attribution"), elem);
+            elem = R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, T `Attribution`), elem);
         }
         return elem;
     }
@@ -195,12 +195,12 @@ class AdvancedOptionsComponent extends react_1.default.Component {
     }
     render() {
         if (!this.state.expanded) {
-            return R("div", null, R("a", { className: "btn btn-link btn-sm", onClick: () => this.setState({ expanded: true }) }, "Advanced options..."));
+            return R("div", null, R("a", { className: "btn btn-link btn-sm", onClick: () => this.setState({ expanded: true }) }, T `Advanced options...`));
         }
-        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, "Advanced"), R("div", null, R("span", { className: "text-muted" }, "Maximum Zoom Level: "), " ", R(NumberInputComponent_1.default, {
+        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, T `Advanced`), R("div", null, R("span", { className: "text-muted" }, T `Maximum Zoom Level: `), " ", R(NumberInputComponent_1.default, {
             small: true,
             style: { display: "inline-block" },
-            placeholder: "None",
+            placeholder: T `None`,
             value: this.props.design.maxZoom,
             onChange: (v) => this.props.onDesignChange(lodash_1.default.extend({}, this.props.design, { maxZoom: v }))
         })));

package/lib/maps/MapFiltersDesignerComponent.js

@@ -49,14 +49,14 @@ class MapFiltersDesignerComponent extends react_1.default.Component {
         if (filterableTables.length === 0) {
             return null;
         }
-        return R("div", null, R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, "Filters ", R(PopoverHelpComponent_1.default, { placement: "left" }, "Filters all layers in the map. Individual layers can be filtered by clicking on Customize...")), R("div", { style: { margin: 5 } }, R(FiltersDesignerComponent_1.default, {
+        return R("div", null, R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, T `Filters `, R(PopoverHelpComponent_1.default, { placement: "left" }, T `Filters all layers in the map. Individual layers can be filtered by clicking on Customize...`)), R("div", { style: { margin: 5 } }, R(FiltersDesignerComponent_1.default, {
             schema: this.props.schema,
             dataSource: this.props.dataSource,
             filters: this.props.design.filters,
             onFiltersChange: this.handleFiltersChange,
             filterableTables
         }))), react_1.default.createElement(MWaterContextComponent_1.GlobalFiltersElementFactoryContext.Consumer, null, globalFiltersElementFactory => globalFiltersElementFactory
-            ? R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, "Global Filters "), R("div", { style: { margin: 5 } }, globalFiltersElementFactory({
+            ? R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, T `Global Filters `), R("div", { style: { margin: 5 } }, globalFiltersElementFactory({
                 schema: this.props.schema,
                 dataSource: this.props.dataSource,
                 filterableTables,

package/lib/maps/MapLayerViewDesignerComponent.js

@@ -62,7 +62,7 @@ class MapLayerViewDesignerComponent extends react_1.default.Component {
     };
     handleRename = () => {
         if (this.props.allowEditingLayer) {
-            const name = prompt("Enter new name", this.props.layerView.name);
+            const name = prompt(T `Enter new name`, this.props.layerView.name);
             if (name) {
                 return this.update({ name });
             }
@@ -88,13 +88,13 @@ class MapLayerViewDesignerComponent extends react_1.default.Component {
         return R("div", {
             key: "advanced",
             style: { display: "grid", gridTemplateColumns: "50% auto auto 1fr", alignItems: "center", columnGap: 5 }
-        }, R(ui.Checkbox, { value: this.props.layerView.hideLegend, onChange: this.handleHideLegend, inline: true }, "Hide Legend"), R("label", { className: "text-muted", key: "label" }, "Group:"), R(ui.TextInput, {
+        }, R(ui.Checkbox, { value: this.props.layerView.hideLegend, onChange: this.handleHideLegend, inline: true }, T `Hide Legend`), R("label", { className: "text-muted", key: "label" }, T `Group:`), R(ui.TextInput, {
             key: "input",
             value: this.props.layerView.group,
             onChange: this.handleGroupChange,
             style: { width: "5em" },
-            placeholder: "None"
-        }), R("div", null, R(PopoverHelpComponent_1.default, { placement: "top", key: "help" }, "Layers in the same group can only be selected one at a time")));
+            placeholder: T `None`
+        }), 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" }));
@@ -111,19 +111,19 @@ class MapLayerViewDesignerComponent extends react_1.default.Component {
     }
     renderLayerEditToggle() {
         return R("div", { key: "edit", style: { marginBottom: this.state.editing ? 10 : undefined } }, R("a", { className: "link-plain", onClick: this.handleToggleEditing, style: { fontSize: 12 } }, this.state.editing
-            ? [R("i", { className: "fa fa-caret-up" }), " Close"]
-            : [R("i", { className: "fa fa-cog" }), " Customize..."]));
+            ? [R("i", { className: "fa fa-caret-up" }), T ` Close`]
+            : [R("i", { className: "fa fa-cog" }), T ` Customize...`]));
     }
     handleOpacityChange = (newValue) => {
         return this.update({ opacity: newValue / 100 });
     };
     handleRemove = () => {
-        if (confirm("Delete layer?")) {
+        if (confirm(T `Delete layer?`)) {
             return this.props.onRemove();
         }
     };
     renderOpacityControl() {
-        return R("div", { className: "mb-3", style: { paddingTop: 10 } }, R("label", { className: "text-muted" }, R("span", null, `Opacity: ${Math.round(this.props.layerView.opacity * 100)}%`)), R("div", { style: { padding: "10px" } }, react_1.default.createElement(rc_slider_1.default, {
+        return R("div", { className: "mb-3", style: { paddingTop: 10 } }, R("label", { className: "text-muted" }, R("span", null, T `Opacity: ${Math.round(this.props.layerView.opacity * 100)}%`)), R("div", { style: { padding: "10px" } }, react_1.default.createElement(rc_slider_1.default, {
             min: 0,
             max: 100,
             step: 1,

package/lib/maps/MapUtils.js

@@ -4,7 +4,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getCompiledFilters = exports.getFilterableTables = exports.convertToMarkersMap = exports.convertToClusterMap = exports.canConvertToMarkersMap = exports.canConvertToClusterMap = void 0;
+exports.canConvertToClusterMap = canConvertToClusterMap;
+exports.canConvertToMarkersMap = canConvertToMarkersMap;
+exports.convertToClusterMap = convertToClusterMap;
+exports.convertToMarkersMap = convertToMarkersMap;
+exports.getFilterableTables = getFilterableTables;
+exports.getCompiledFilters = getCompiledFilters;
 const lodash_1 = __importDefault(require("lodash"));
 const expressions_1 = require("@mwater/expressions");
 const LayerFactory_1 = __importDefault(require("./LayerFactory"));
@@ -12,12 +17,10 @@ const LayerFactory_1 = __importDefault(require("./LayerFactory"));
 function canConvertToClusterMap(design) {
     return lodash_1.default.any(design.layerViews, (lv) => lv.type === "Markers");
 }
-exports.canConvertToClusterMap = canConvertToClusterMap;
 // Check if can convert to a markers map. Only maps containing cluster views can be
 function canConvertToMarkersMap(design) {
     return lodash_1.default.any(design.layerViews, (lv) => lv.type === "Cluster");
 }
-exports.canConvertToMarkersMap = canConvertToMarkersMap;
 // Convert to a cluster map
 function convertToClusterMap(design) {
     const layerViews = lodash_1.default.map(design.layerViews, (lv) => {
@@ -39,7 +42,6 @@ function convertToClusterMap(design) {
     });
     return lodash_1.default.extend({}, design, { layerViews });
 }
-exports.convertToClusterMap = convertToClusterMap;
 // Convert to a markers map
 function convertToMarkersMap(design) {
     const layerViews = lodash_1.default.map(design.layerViews, (lv) => {
@@ -61,7 +63,6 @@ function convertToMarkersMap(design) {
     });
     return lodash_1.default.extend({}, design, { layerViews });
 }
-exports.convertToMarkersMap = convertToMarkersMap;
 // Get ids of filterable tables
 function getFilterableTables(design, schema) {
     let filterableTables = [];
@@ -75,7 +76,6 @@ function getFilterableTables(design, schema) {
     filterableTables = lodash_1.default.filter(filterableTables, (table) => schema.getTable(table));
     return filterableTables;
 }
-exports.getFilterableTables = getFilterableTables;
 // Compile map filters with global filters
 function getCompiledFilters(design, schema, filterableTables) {
     const exprCompiler = new expressions_1.ExprCompiler(schema);
@@ -116,4 +116,3 @@ function getCompiledFilters(design, schema, filterableTables) {
     }
     return compiledFilters;
 }
-exports.getCompiledFilters = getCompiledFilters;

package/lib/maps/MapViewComponent.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.MapViewComponent = void 0;
+exports.MapViewComponent = MapViewComponent;
 const react_1 = __importDefault(require("react"));
 const VectorMapViewComponent_1 = require("./VectorMapViewComponent");
 const RasterMapViewComponent_1 = __importDefault(require("./RasterMapViewComponent"));
@@ -17,4 +17,3 @@ function MapViewComponent(props) {
         return react_1.default.createElement(RasterMapViewComponent_1.default, { ...props });
     }
 }
-exports.MapViewComponent = MapViewComponent;

package/lib/maps/MarkerSymbolSelectComponent.js

@@ -12,11 +12,11 @@ const mapSymbols_1 = require("./mapSymbols");
 class MarkerSymbolSelectComponent extends react_1.default.Component {
     render() {
         // Create options
-        const options = mapSymbols_1.mapSymbols;
+        const options = (0, mapSymbols_1.getMapSymbols)();
         const optionRenderer = (option) => R("span", null, R("i", { className: `fa fa-${option.value.substr(13)}` }), // Trim "font-awesome/"
         ` ${option.label}`);
-        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, R("span", { className: "fa fa-star" }), " ", "Symbol"), R(react_select_1.default, {
-            placeholder: "Circle",
+        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, R("span", { className: "fa fa-star" }), " ", T `Symbol`), R(react_select_1.default, {
+            placeholder: T `Circle`,
             value: lodash_1.default.findWhere(options, { value: this.props.symbol }) || null,
             options,
             formatOptionLabel: optionRenderer,

package/lib/maps/MarkersLayer.js

@@ -26,7 +26,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.createMarkersVectorQuery = void 0;
+exports.createMarkersVectorQuery = createMarkersVectorQuery;
 const lodash_1 = __importDefault(require("lodash"));
 const react_1 = __importDefault(require("react"));
 const immer_1 = require("immer");
@@ -162,7 +162,7 @@ class MarkersLayer extends Layer_1.default {
                     type: "select",
                     expr: { type: "field", tableAlias: "basequery", column: schema.getTable(design.table).primaryKey },
                     alias: "id"
-                },
+                }, // main primary key as id
                 { type: "select", expr: geometryExpr, alias: "the_geom_webmercator" } // geometry as the_geom_webmercator
             ],
             from: exprCompiler.compileTable(design.table, "basequery")
@@ -277,8 +277,8 @@ class MarkersLayer extends Layer_1.default {
                     type: "select",
                     expr: { type: "field", tableAlias: "innerquery", column: schema.getTable(design.table).primaryKey },
                     alias: "id"
-                },
-                { type: "select", expr: geometryExpr, alias: "the_geom_webmercator" },
+                }, // main primary key as id
+                { type: "select", expr: geometryExpr, alias: "the_geom_webmercator" }, // geometry as the_geom_webmercator
                 cluster
             ],
             from: exprCompiler.compileTable(design.table, "innerquery")
@@ -322,12 +322,12 @@ class MarkersLayer extends Layer_1.default {
                     type: "select",
                     expr: { type: "field", tableAlias: "innerquery", column: "id" },
                     alias: "id"
-                },
+                }, // innerquery._id as id
                 {
                     type: "select",
                     expr: { type: "field", tableAlias: "innerquery", column: "the_geom_webmercator" },
                     alias: "the_geom_webmercator"
-                },
+                }, // innerquery.the_geom_webmercator as the_geom_webmercator
                 {
                     type: "select",
                     expr: {
@@ -840,4 +840,3 @@ function createMarkersVectorQuery(baseQuery) {
     };
     return outerquery;
 }
-exports.createMarkersVectorQuery = createMarkersVectorQuery;