@mwater/visualization 5.3.1 → 5.4.0

package/lib/maps/MarkersLayerDesignerComponent.js

@@ -86,7 +86,7 @@ class MarkersLayerDesignerComponent extends react_1.default.Component {
         return this.update({ lineWidth });
     };
     renderTable() {
-        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, R("i", { className: "fa fa-database" }), " ", "Data Source"), R("div", { style: { marginLeft: 10 } }, R(expressions_ui_2.TableSelectComponent, {
+        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,
@@ -98,7 +98,7 @@ class MarkersLayerDesignerComponent extends react_1.default.Component {
         if (!this.props.design.table) {
             return;
         }
-        const title = R("span", null, R("span", { className: "fas fa-map-marker-alt" }), " Location");
+        const title = R("span", null, R("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);
@@ -131,11 +131,11 @@ class MarkersLayerDesignerComponent extends react_1.default.Component {
             }
         }
         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" }), "Color"), R("div", null, R(ColorComponent_1.default, {
+            ? 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" }), "Color By Data"), R(AxisComponent_1.default, {
+            : 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,
@@ -159,14 +159,14 @@ class MarkersLayerDesignerComponent extends react_1.default.Component {
         if (!this.props.design.axes.geometry) {
             return;
         }
-        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, "Marker Size"), R(ui.Select, {
+        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: "Extra small" },
-                { value: 8, label: "Small" },
-                { value: 10, label: "Normal" },
-                { value: 13, label: "Large" },
-                { value: 16, label: "Extra large" }
+                { 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
         }));
@@ -175,16 +175,16 @@ class MarkersLayerDesignerComponent extends react_1.default.Component {
         if (!this.props.design.axes.geometry) {
             return;
         }
-        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, "Line Width (for shapes)"), R(ui.Select, {
+        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: "None" },
-                { value: 1, label: "1 pixel" },
-                { value: 2, label: "2 pixels" },
-                { value: 3, label: "3 pixels" },
-                { value: 4, label: "4 pixels" },
-                { value: 5, label: "5 pixels" },
-                { value: 6, label: "6 pixels" }
+                { 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
         }));
@@ -193,7 +193,7 @@ class MarkersLayerDesignerComponent extends react_1.default.Component {
         if (!this.props.design.axes.geometry) {
             return;
         }
-        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, "Polygon border color (blank for same as fill color)"), R("div", null, R(ColorComponent_1.default, {
+        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
         })));
@@ -203,7 +203,7 @@ class MarkersLayerDesignerComponent extends react_1.default.Component {
             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, `Polygon Fill Opacity: ${Math.round(opacity * 100)}%`)), R("div", { style: { padding: "10px" } }, react_1.default.createElement(rc_slider_1.default, {
+        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,
@@ -217,7 +217,7 @@ class MarkersLayerDesignerComponent extends react_1.default.Component {
         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" }), " 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,
@@ -255,7 +255,7 @@ class MarkersLayerDesignerComponent extends react_1.default.Component {
     }
     render() {
         return R("div", null, this.renderTable(), this.renderGeometryAxis(), this.renderColor(), this.renderSymbol(), this.renderMarkerSize(), R(ui.CollapsibleSection, {
-            label: "Shape Options",
+            label: T `Shape Options`,
             labelMuted: true
         }, [
             this.renderLineWidth(),

package/lib/maps/PopupFilterJoinsEditComponent.js

@@ -48,7 +48,7 @@ class PopupFilterJoinsEditComponent extends react_1.default.Component {
     };
     render() {
         if (!this.state.expanded) {
-            return R("a", { className: "btn btn-link", onClick: () => this.setState({ expanded: true }) }, "Advanced Popup Options");
+            return R("a", { className: "btn btn-link", onClick: () => this.setState({ expanded: true }) }, T `Advanced Popup Options`);
         }
         // Get filterable tables of popup
         const popupDashboard = { items: this.props.popup.items, layout: "blocks" };
@@ -57,17 +57,17 @@ class PopupFilterJoinsEditComponent extends react_1.default.Component {
         filterableTables = [this.props.table].concat(lodash_1.default.without(filterableTables, this.props.table));
         // Get popupFilterJoins
         const popupFilterJoins = this.props.design || this.props.defaultPopupFilterJoins;
-        return R("div", null, R("div", { className: "text-muted" }, "Optional connections for other tables to filtering the popup"), R("table", { className: "table table-sm table-bordered" }, R("thead", null, R("tr", null, R("th", null, "Data Source"), R("th", null, "Connection"))), R("tbody", null, lodash_1.default.map(filterableTables, (filterableTable) => {
+        return R("div", null, R("div", { className: "text-muted" }, T `Optional connections for other tables to filtering the popup`), R("table", { className: "table table-sm table-bordered" }, R("thead", null, R("tr", null, R("th", null, T `Data Source`), R("th", null, T `Connection`))), R("tbody", null, lodash_1.default.map(filterableTables, (filterableTable) => {
             return R("tr", { key: filterableTable }, R("td", { style: { verticalAlign: "middle" } }, expressions_1.ExprUtils.localizeString(this.props.schema.getTable(filterableTable)?.name)), R("td", null, R(expressions_ui_1.ExprComponent, {
                 schema: this.props.schema,
                 dataSource: this.props.dataSource,
                 table: filterableTable,
                 value: popupFilterJoins[filterableTable],
                 onChange: this.handleExprChange.bind(null, filterableTable),
-                types: this.props.table === this.props.idTable ? ["id", "id[]"] : ["id"],
+                types: this.props.table === this.props.idTable ? ["id", "id[]"] : ["id"], // TODO support id[] some day for admin choropleth maps too
                 idTable: this.props.idTable,
                 preferLiteral: false,
-                placeholder: "None"
+                placeholder: T `None`
             })));
         }))));
     }

package/lib/maps/PopupFilterJoinsUtils.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.createDefaultPopupFilterJoins = exports.createPopupFilters = void 0;
+exports.createPopupFilters = createPopupFilters;
+exports.createDefaultPopupFilterJoins = createDefaultPopupFilterJoins;
 const expressions_1 = require("@mwater/expressions");
 const expressions_2 = require("@mwater/expressions");
 /**
@@ -80,7 +81,6 @@ function createPopupFilters(popupFilterJoins, schema, layerTable, rowId, useWith
     }
     return filters;
 }
-exports.createPopupFilters = createPopupFilters;
 // Create default popup filter joins where the join is just the id (not used for choropleth since that needs to join to admin_regions)
 function createDefaultPopupFilterJoins(table) {
     // Return id of row for a simple match
@@ -89,4 +89,3 @@ function createDefaultPopupFilterJoins(table) {
     };
     return popupFilterJoins;
 }
-exports.createDefaultPopupFilterJoins = createDefaultPopupFilterJoins;

package/lib/maps/RasterMapViewComponent.d.ts

@@ -55,12 +55,12 @@ export default class RasterMapViewComponent extends React.Component<RasterMapVie
         onShow: () => void;
     }, HiddenLegend> | React.FunctionComponentElement<{
         schema: Schema;
-        dataSource: DataSource;
         layerViews: import("./MapDesign").MapLayerView[];
-        zoom: number | null;
         filters: JsonQLFilter[];
-        locale: string;
+        dataSource: DataSource;
+        locale: any;
         onHide: () => void;
+        zoom: null;
     }>;
     renderPopup(): React.CElement<import("@mwater/react-library/lib/ModalPopupComponent").ModalPopupComponentProps, ModalPopupComponent> | null;
     render(): React.DetailedReactHTMLElement<{

package/lib/maps/RasterMapViewComponent.js

@@ -35,16 +35,16 @@ const ModalPopupComponent_1 = __importDefault(require("@mwater/react-library/lib
 const MapUtils = __importStar(require("./MapUtils"));
 const LayerSwitcherComponent_1 = require("./LayerSwitcherComponent");
 const LegendComponent_1 = __importDefault(require("./LegendComponent"));
-const contexts_1 = require("@mwater/expressions-ui/lib/contexts");
+const expressions_ui_1 = require("@mwater/expressions-ui");
 /** Component that displays just the map, using raster tile technology */
 class RasterMapViewComponent extends react_1.default.Component {
-    static contextType = contexts_1.LocaleContext;
+    static contextType = expressions_ui_1.LocaleContext;
     leafletMap;
     constructor(props) {
         super(props);
         const initialLegendDisplay = props.design.initialLegendDisplay || "open";
         this.state = {
-            popupContents: null,
+            popupContents: null, // Element in the popup
             legendHidden: initialLegendDisplay === "closed" || (props.width < 500 && initialLegendDisplay === "closedIfSmall")
         };
     }
@@ -170,7 +170,7 @@ class RasterMapViewComponent extends react_1.default.Component {
             size: "x-large"
         }, 
         // Render in fixed height div so that dashboard doesn't collapse to nothing
-        R("div", { style: { height: "80vh" } }, this.state.popupContents), R("div", { style: { textAlign: "right", marginTop: 10 } }, R("button", { className: "btn btn-secondary", onClick: () => this.setState({ popupContents: null }) }, "Close")));
+        R("div", { style: { height: "80vh" } }, this.state.popupContents), R("div", { style: { textAlign: "right", marginTop: 10 } }, R("button", { className: "btn btn-secondary", onClick: () => this.setState({ popupContents: null }) }, T `Close`)));
     }
     render() {
         let design, scopedCompiledFilters;

package/lib/maps/RegionSelectComponent.d.ts

@@ -1,5 +1,4 @@
 import React from "react";
-import { IdLiteralComponent } from "@mwater/expressions-ui";
 import { DataSource, Schema } from "@mwater/expressions";
 export interface RegionSelectComponentProps {
     schema: Schema;
@@ -16,9 +15,8 @@ export interface RegionSelectComponentProps {
 }
 export default class RegionSelectComponent extends React.Component<RegionSelectComponentProps> {
     static defaultProps: {
-        placeholder: string;
         regionsTable: string;
     };
     handleChange: (id: any) => void;
-    render(): React.CElement<import("@mwater/expressions-ui/lib/IdLiteralComponent").IdLiteralComponentProps, IdLiteralComponent>;
+    render(): React.FunctionComponentElement<import("@mwater/expressions-ui/lib/IdLiteralComponent").IdLiteralComponentProps & React.RefAttributes<unknown>>;
 }

package/lib/maps/RegionSelectComponent.js

@@ -9,7 +9,6 @@ const expressions_ui_1 = require("@mwater/expressions-ui");
 // Allows selecting of a single region
 class RegionSelectComponent extends react_1.default.Component {
     static defaultProps = {
-        placeholder: "All Countries",
         regionsTable: "admin_regions"
     };
     handleChange = (id) => {
@@ -52,7 +51,7 @@ class RegionSelectComponent extends react_1.default.Component {
             idTable: this.props.regionsTable,
             schema: this.props.schema,
             dataSource: this.props.dataSource,
-            placeholder: this.props.placeholder,
+            placeholder: this.props.placeholder || T `All Countries`,
             orderBy: [{ expr: { type: "field", tableAlias: "main", column: "level" }, direction: "asc" }],
             filter
         });

package/lib/maps/ScopeAndDetailLevelComponent.js

@@ -58,15 +58,15 @@ class ScopeAndDetailLevelComponent extends react_1.default.Component {
                 }
             }
         }
-        return R("div", null, R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, "Region to Map"), R(RegionSelectComponent_1.default, {
+        return R("div", null, R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, T `Region to Map`), R(RegionSelectComponent_1.default, {
             region: this.props.scope,
             onChange: this.handleScopeChange,
             schema: this.props.schema,
             dataSource: this.props.dataSource,
             regionsTable: this.props.regionsTable,
             maxLevel: maxLevel - 1,
-            placeholder: "All Regions"
-        })), R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, "Detail Level"), R(ui.Select, {
+            placeholder: T `All Regions`
+        })), R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, T `Detail Level`), R(ui.Select, {
             value: this.props.detailLevel,
             options: detailLevelOptions,
             onChange: this.handleDetailLevelChange

package/lib/maps/TileUrlLayer.d.ts

@@ -25,7 +25,7 @@ export default class TileUrlLayer extends Layer<TileUrlLayerDesign> {
     getLegend(design: TileUrlLayerDesign, schema: Schema, name: string, dataSource: DataSource, locale: string, filters: JsonQLFilter[]): React.JSX.Element | null;
     createDesignerElement(options: any): React.CElement<TileUrlLayerDesignerComponentProps, TileUrlLayerDesignerComponent>;
     cleanDesign(design: any, schema: Schema): any;
-    validateDesign(design: any, schema: Schema): "Missing Url" | null;
+    validateDesign(design: any, schema: Schema): string | null;
 }
 interface TileUrlLayerDesignerComponentProps {
     /** Design of the marker layer */

package/lib/maps/TileUrlLayer.js

@@ -69,7 +69,7 @@ class TileUrlLayer extends Layer_1.default {
     // Validates design. Null if ok, message otherwise
     validateDesign(design, schema) {
         if (!design.tileUrl) {
-            return "Missing Url";
+            return T `Missing Url`;
         }
         return null;
     }
@@ -88,9 +88,9 @@ class TileUrlLayerDesignerComponent extends react_1.default.Component {
             return null;
         }
         return react_1.default.createElement("div", { className: "mb-3" },
-            react_1.default.createElement(bootstrap_1.FormGroup, { label: "Url (containing {z}, {x} and {y})", labelMuted: true },
+            react_1.default.createElement(bootstrap_1.FormGroup, { label: T `Url (containing {z}, {x} and {y})`, labelMuted: true },
                 react_1.default.createElement(bootstrap_1.TextInput, { value: this.props.design.tileUrl, onChange: this.handleTileUrlChange })),
-            react_1.default.createElement(bootstrap_1.FormGroup, { label: "Optional URL of Legend", labelMuted: true },
+            react_1.default.createElement(bootstrap_1.FormGroup, { label: T `Optional URL of Legend`, labelMuted: true },
                 react_1.default.createElement(bootstrap_1.TextInput, { value: this.props.design.legendUrl || "", onChange: this.handleLegendUrlChange })));
     }
 }

package/lib/maps/VectorMapViewComponent.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.VectorMapViewComponent = void 0;
+exports.VectorMapViewComponent = VectorMapViewComponent;
 const lodash_1 = __importStar(require("lodash"));
 const react_1 = __importStar(require("react"));
 const react_2 = require("react");
@@ -296,12 +296,12 @@ function VectorMapViewComponent(props) {
     (0, react_1.useEffect)(() => {
         updateUserStyle();
     }, [
-        props.design.layerViews,
-        props.scope,
+        JSON.stringify(props.design.layerViews),
+        JSON.stringify(props.scope),
         layersCreatedAfter,
         JSON.stringify(props.extraFilters),
-        props.design.filters,
-        props.design.globalFilters,
+        JSON.stringify(props.design.filters),
+        JSON.stringify(props.design.globalFilters),
         props.refreshTrigger
     ]);
     // Style map
@@ -437,7 +437,7 @@ function VectorMapViewComponent(props) {
         return (react_1.default.createElement(ModalPopupComponent_1.default, { onClose: () => setPopupContents(null), showCloseX: true, size: "x-large" },
             react_1.default.createElement("div", { style: { height: "80vh" } }, popupContents),
             react_1.default.createElement("div", { style: { textAlign: "right", marginTop: 10 } },
-                react_1.default.createElement("button", { className: "btn btn-secondary", onClick: () => setPopupContents(null) }, "Close"))));
+                react_1.default.createElement("button", { className: "btn btn-secondary", onClick: () => setPopupContents(null) }, T `Close`))));
     }
     const [zoom, setZoom] = (0, react_1.useState)(map?.getZoom());
     (0, react_1.useEffect)(() => {
@@ -533,7 +533,6 @@ function VectorMapViewComponent(props) {
         react_1.default.createElement(vectorMaps_1.AttributionControl, { baseLayer: props.design.baseLayer, extraText: props.design.attribution }),
         react_1.default.createElement(vectorMaps_1.VectorMapLogo, { baseLayer: props.design.baseLayer })));
 }
-exports.VectorMapViewComponent = VectorMapViewComponent;
 /** Legend display tab at bottom right */
 function HiddenLegend(props) {
     const style = {

package/lib/maps/ZoomLevelsComponent.js

@@ -17,18 +17,18 @@ class ZoomLevelsComponent 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 }) }, "Zoom level options..."));
+            return R("div", null, R("a", { className: "btn btn-link btn-sm", onClick: () => this.setState({ expanded: true }) }, T `Zoom level options...`));
         }
-        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, "Zoom level options"), R("div", { key: "min" }, R("span", { className: "text-muted" }, "Minimum Zoom Level:"), " ", R(NumberInputComponent_1.default, {
+        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, T `Zoom level options`), R("div", { key: "min" }, R("span", { className: "text-muted" }, T `Minimum Zoom Level:`), " ", R(NumberInputComponent_1.default, {
             small: true,
             style: { display: "inline-block" },
-            placeholder: "None",
+            placeholder: T `None`,
             value: this.props.design.minZoom,
             onChange: (v) => this.props.onDesignChange(lodash_1.default.extend({}, this.props.design, { minZoom: v }))
-        })), R("div", { key: "max" }, R("span", { className: "text-muted" }, "Maximum Zoom Level: "), " ", R(NumberInputComponent_1.default, {
+        })), R("div", { key: "max" }, 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/mapSymbols.d.ts

@@ -1,5 +1,5 @@
 /** Symbols used on the map */
-export declare const mapSymbols: {
+export declare const getMapSymbols: () => {
     value: string;
     label: string;
     url: string;

package/lib/maps/mapSymbols.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.mapSymbols = void 0;
+exports.getMapSymbols = void 0;
 const dot_circle_o_png_1 = __importDefault(require("./symbols/font-awesome/dot-circle-o.png"));
 const bullseye_png_1 = __importDefault(require("./symbols/font-awesome/bullseye.png"));
 const star_png_1 = __importDefault(require("./symbols/font-awesome/star.png"));
@@ -53,117 +53,118 @@ const cloud_png_1 = __importDefault(require("./symbols/font-awesome/cloud.png"))
 const beer_png_1 = __importDefault(require("./symbols/font-awesome/beer.png"));
 const cloud_rain_png_1 = __importDefault(require("./symbols/font-awesome/cloud-rain.png"));
 /** Symbols used on the map */
-exports.mapSymbols = [
+const getMapSymbols = () => [
     {
         url: dot_circle_o_png_1.default,
         value: "font-awesome/dot-circle-o",
-        label: "Dot circle"
+        label: T `Dot circle`
     },
-    { url: bullseye_png_1.default, value: "font-awesome/bullseye", label: "Bullseye" },
-    { url: star_png_1.default, value: "font-awesome/star", label: "Star" },
-    { url: square_png_1.default, value: "font-awesome/square", label: "Square" },
-    { url: home_png_1.default, value: "font-awesome/home", label: "Home" },
-    { url: plus_png_1.default, value: "font-awesome/plus", label: "Plus" },
+    { url: bullseye_png_1.default, value: "font-awesome/bullseye", label: T `Bullseye` },
+    { url: star_png_1.default, value: "font-awesome/star", label: T `Star` },
+    { url: square_png_1.default, value: "font-awesome/square", label: T `Square` },
+    { url: home_png_1.default, value: "font-awesome/home", label: T `Home` },
+    { url: plus_png_1.default, value: "font-awesome/plus", label: T `Plus` },
     {
         url: plus_circle_png_1.default,
         value: "font-awesome/plus-circle",
-        label: "Plus Circle"
+        label: T `Plus Circle`
     },
     {
         url: plus_square_png_1.default,
         value: "font-awesome/plus-square",
-        label: "Plus Square"
+        label: T `Plus Square`
     },
-    { url: asterisk_png_1.default, value: "font-awesome/asterisk", label: "Asterisk" },
-    { url: mobile_png_1.default, value: "font-awesome/mobile", label: "Mobile" },
-    { url: check_png_1.default, value: "font-awesome/check", label: "Check" },
+    { url: asterisk_png_1.default, value: "font-awesome/asterisk", label: T `Asterisk` },
+    { url: mobile_png_1.default, value: "font-awesome/mobile", label: T `Mobile` },
+    { url: check_png_1.default, value: "font-awesome/check", label: T `Check` },
     {
         url: university_png_1.default,
         value: "font-awesome/university",
-        label: "Institution"
+        label: T `Institution`
     },
     {
         url: check_circle_png_1.default,
         value: "font-awesome/check-circle",
-        label: "Check Circle"
+        label: T `Check Circle`
     },
-    { url: times_png_1.default, value: "font-awesome/times", label: "Removed" },
-    { url: ban_png_1.default, value: "font-awesome/ban", label: "Ban" },
+    { url: times_png_1.default, value: "font-awesome/times", label: T `Removed` },
+    { url: ban_png_1.default, value: "font-awesome/ban", label: T `Ban` },
     {
         url: crosshairs_png_1.default,
         value: "font-awesome/crosshairs",
-        label: "Crosshairs"
+        label: T `Crosshairs`
     },
-    { url: flask_png_1.default, value: "font-awesome/flask", label: "Flask" },
-    { url: flag_png_1.default, value: "font-awesome/flag", label: "Flag" },
+    { url: flask_png_1.default, value: "font-awesome/flask", label: T `Flask` },
+    { url: flag_png_1.default, value: "font-awesome/flag", label: T `Flag` },
     {
         url: info_circle_png_1.default,
         value: "font-awesome/info-circle",
-        label: "Info Circle"
+        label: T `Info Circle`
     },
     {
         url: exclamation_circle_png_1.default,
         value: "font-awesome/exclamation-circle",
-        label: "Exclamation Circle"
+        label: T `Exclamation Circle`
     },
     {
         url: exclamation_triangle_png_1.default,
         value: "font-awesome/exclamation-triangle",
-        label: "Exclamation Triangle"
+        label: T `Exclamation Triangle`
     },
-    { url: bell_png_1.default, value: "font-awesome/bell", label: "Bell" },
-    { url: bolt_png_1.default, value: "font-awesome/bolt", label: "Bolt" },
-    { url: building_png_1.default, value: "font-awesome/building", label: "Building" },
-    { url: bus_png_1.default, value: "font-awesome/bus", label: "Bus" },
+    { url: bell_png_1.default, value: "font-awesome/bell", label: T `Bell` },
+    { url: bolt_png_1.default, value: "font-awesome/bolt", label: T `Bolt` },
+    { url: building_png_1.default, value: "font-awesome/building", label: T `Building` },
+    { url: bus_png_1.default, value: "font-awesome/bus", label: T `Bus` },
     {
         url: certificate_png_1.default,
         value: "font-awesome/certificate",
-        label: "Certificate"
+        label: T `Certificate`
     },
-    { url: comment_png_1.default, value: "font-awesome/comment", label: "Comment" },
-    { url: male_png_1.default, value: "font-awesome/male", label: "Male" },
-    { url: female_png_1.default, value: "font-awesome/female", label: "Female" },
-    { url: user_png_1.default, value: "font-awesome/user", label: "Person" },
-    { url: users_png_1.default, value: "font-awesome/users", label: "Group" },
+    { url: comment_png_1.default, value: "font-awesome/comment", label: T `Comment` },
+    { url: male_png_1.default, value: "font-awesome/male", label: T `Male` },
+    { url: female_png_1.default, value: "font-awesome/female", label: T `Female` },
+    { url: user_png_1.default, value: "font-awesome/user", label: T `Person` },
+    { url: users_png_1.default, value: "font-awesome/users", label: T `Group` },
     {
         url: wheelchair_png_1.default,
         value: "font-awesome/wheelchair",
-        label: "Wheelchair"
+        label: T `Wheelchair`
     },
     {
         url: h_square_png_1.default,
         value: "font-awesome/h-square",
-        label: "Hospital Symbol"
+        label: T `Hospital Symbol`
     },
-    { url: thumbs_up_png_1.default, value: "font-awesome/thumbs-up", label: "Thumbs Up" },
+    { url: thumbs_up_png_1.default, value: "font-awesome/thumbs-up", label: T `Thumbs Up` },
     {
         url: thumbs_down_png_1.default,
         value: "font-awesome/thumbs-down",
-        label: "Thumbs Down"
+        label: T `Thumbs Down`
     },
-    { url: ticket_png_1.default, value: "font-awesome/ticket", label: "Ticket" },
-    { url: tint_png_1.default, value: "font-awesome/tint", label: "Tint" },
+    { url: ticket_png_1.default, value: "font-awesome/ticket", label: T `Ticket` },
+    { url: tint_png_1.default, value: "font-awesome/tint", label: T `Tint` },
     {
         url: times_circle_png_1.default,
         value: "font-awesome/times-circle",
-        label: "Times Circle"
+        label: T `Times Circle`
     },
-    { url: tree_png_1.default, value: "font-awesome/tree", label: "Tree" },
-    { url: file_png_1.default, value: "font-awesome/file", label: "File" },
-    { url: usd_png_1.default, value: "font-awesome/usd", label: "USD" },
-    { url: caret_up_png_1.default, value: "font-awesome/caret-up", label: "Caret Up" },
+    { url: tree_png_1.default, value: "font-awesome/tree", label: T `Tree` },
+    { url: file_png_1.default, value: "font-awesome/file", label: T `File` },
+    { url: usd_png_1.default, value: "font-awesome/usd", label: T `USD` },
+    { url: caret_up_png_1.default, value: "font-awesome/caret-up", label: T `Caret Up` },
     {
         url: chevron_circle_up_png_1.default,
         value: "font-awesome/chevron-circle-up",
-        label: "Chevron Up"
+        label: T `Chevron Up`
     },
     {
         url: chevron_circle_down_png_1.default,
         value: "font-awesome/chevron-circle-down",
-        label: "Chevron Down"
+        label: T `Chevron Down`
     },
-    { url: medkit_png_1.default, value: "font-awesome/medkit", label: "Medkit" },
-    { url: cloud_png_1.default, value: "font-awesome/cloud", label: "Cloud" },
-    { url: cloud_rain_png_1.default, value: "font-awesome/cloud-rain", label: "Cloud Rain" },
-    { url: beer_png_1.default, value: "font-awesome/beer", label: "Cup" }
+    { url: medkit_png_1.default, value: "font-awesome/medkit", label: T `Medkit` },
+    { url: cloud_png_1.default, value: "font-awesome/cloud", label: T `Cloud` },
+    { url: cloud_rain_png_1.default, value: "font-awesome/cloud-rain", label: T `Cloud Rain` },
+    { url: beer_png_1.default, value: "font-awesome/beer", label: T `Cup` }
 ];
+exports.getMapSymbols = getMapSymbols;

package/lib/maps/mapboxUtils.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.compileColorToMapbox = exports.compileColorMapToMapbox = void 0;
+exports.compileColorMapToMapbox = compileColorMapToMapbox;
+exports.compileColorToMapbox = compileColorToMapbox;
 /** Compile a color mapped axis to mapbox format case statement */
 function compileColorMapToMapbox(axis, defaultColor) {
     let compiled;
@@ -27,7 +28,6 @@ function compileColorMapToMapbox(axis, defaultColor) {
     }
     return compiled;
 }
-exports.compileColorMapToMapbox = compileColorMapToMapbox;
 /** Compile a color that is transparent if excluded to mapbox format case statement */
 function compileColorToMapbox(color, excludedValues) {
     let compiled;
@@ -57,4 +57,3 @@ function compileColorToMapbox(color, excludedValues) {
     }
     return compiled;
 }
-exports.compileColorToMapbox = compileColorToMapbox;

package/lib/maps/maps.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { JsonQLQuery } from "@mwater/jsonql";
 import { Expr } from "@mwater/expressions";
 export interface LayerDefinition {