@mwater/visualization 5.4.5 → 5.5.0

package/lib/maps/EditHoverOver.js

@@ -27,64 +27,93 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const lodash_1 = require("lodash");
+const expressions_1 = require("@mwater/expressions");
 const expressions_ui_1 = require("@mwater/expressions-ui");
 const react_1 = __importStar(require("react"));
-const ModalWindowComponent_1 = __importDefault(require("@mwater/react-library/lib/ModalWindowComponent"));
+const ActionCancelModalComponent_1 = __importDefault(require("@mwater/react-library/lib/ActionCancelModalComponent"));
 const ui = __importStar(require("@mwater/react-library/lib/bootstrap"));
 const uuid_1 = __importDefault(require("uuid"));
-const EditHoverOver = props => {
+const valueFormatter_1 = require("../valueFormatter");
+const valueFormatter_2 = require("../valueFormatter");
+function EditHoverOver(props) {
+    const { schema, dataSource, design, onDesignChange, table } = props;
     const [editing, setEditing] = (0, react_1.useState)(false);
+    const [draftItems, setDraftItems] = (0, react_1.useState)(undefined);
     const handleRemovePopup = () => {
-        const design = (0, lodash_1.omit)(props.design, "hoverOver");
-        props.onDesignChange(design);
-    };
-    const handleDesignChange = (items) => {
-        const hoverOver = { ...(props.design.hoverOver ?? {}), items };
-        const design = { ...props.design, hoverOver };
-        return props.onDesignChange(design);
+        const newDesign = (0, lodash_1.omit)(design, "hoverOver");
+        onDesignChange(newDesign);
     };
     const handleItemChange = (item) => {
-        const items = (props.design.hoverOver?.items ?? []).map((i) => (item.id === i.id ? item : i));
-        const design = { ...props.design, hoverOver: { ...props.design.hoverOver, items } };
-        return props.onDesignChange(design);
+        setDraftItems(draftItems?.map((i) => (item.id === i.id ? item : i)));
     };
     const handleItemDelete = (item) => {
-        const items = (props.design.hoverOver?.items ?? []).filter((i) => item.id !== i.id);
-        const design = { ...props.design, hoverOver: { ...props.design.hoverOver, items } };
-        return props.onDesignChange(design);
+        setDraftItems(draftItems?.filter((i) => item.id !== i.id));
+    };
+    const handleAddItem = () => {
+        setDraftItems([...(draftItems ?? []), { id: (0, uuid_1.default)().replace(/-/g, ""), label: "" }]);
+    };
+    const handleSave = () => {
+        const hoverOver = { ...(design.hoverOver ?? {}), items: draftItems ?? [] };
+        const newDesign = { ...design, hoverOver };
+        onDesignChange(newDesign);
+        setEditing(false);
+        setDraftItems(undefined);
+    };
+    const handleCancel = () => {
+        setEditing(false);
+        setDraftItems(undefined);
+    };
+    const handleOpen = () => {
+        setDraftItems(design.hoverOver?.items ?? []);
+        setEditing(true);
     };
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement("button", { className: "btn btn-link", onClick: () => setEditing(true) },
+        react_1.default.createElement("button", { className: "btn btn-link", onClick: handleOpen },
             react_1.default.createElement("span", { className: "fa fa-pencil" }),
             " ",
             T `Customize Hoverover`),
-        props.design.hoverOver && (react_1.default.createElement("button", { className: "btn btn-link", onClick: handleRemovePopup },
+        design.hoverOver && (react_1.default.createElement("button", { className: "btn btn-link", onClick: handleRemovePopup },
             react_1.default.createElement("span", { className: "fa fa-times" }),
             " ",
             T `Remove Hover over`)),
-        editing && (react_1.default.createElement(ModalWindowComponent_1.default, { isOpen: true, onRequestClose: () => setEditing(false) },
-            (props.design.hoverOver?.items ?? []).length > 0 && (react_1.default.createElement("table", { className: "table" },
+        editing && (react_1.default.createElement(ActionCancelModalComponent_1.default, { onAction: handleSave, onCancel: handleCancel, actionLabel: T `Save`, title: T `Customize Hoverover`, size: "x-large" },
+            (draftItems ?? []).length > 0 && (react_1.default.createElement("table", { className: "table" },
                 react_1.default.createElement("thead", null,
                     react_1.default.createElement("tr", null,
                         react_1.default.createElement("th", null, T `Label`),
                         react_1.default.createElement("th", null, T `Value`),
-                        react_1.default.createElement("th", null))),
-                react_1.default.createElement("tbody", null, props.design.hoverOver?.items.map((item) => (react_1.default.createElement(HoverOverItemEditor, { schema: props.schema, dataSource: props.dataSource, table: props.design.table, onItemChange: handleItemChange, onItemDelete: handleItemDelete, item: item })))))),
-            (props.design.hoverOver?.items ?? []).length < 3 && (react_1.default.createElement("button", { className: "btn btn-link", onClick: () => handleDesignChange([
-                    ...(props.design.hoverOver?.items ?? []),
-                    { id: (0, uuid_1.default)().replace(/-/g, ""), label: "" }
-                ]) },
-                react_1.default.createElement("span", { className: "fa fa-plus" }),
-                T `Add item`))))));
-};
-const HoverOverItemEditor = ({ schema, dataSource, table, item, onItemChange, onItemDelete }) => {
+                        react_1.default.createElement("th", { style: { width: "1%", whiteSpace: "nowrap" } }, T `Format`),
+                        react_1.default.createElement("th", { style: { width: "1%", whiteSpace: "nowrap" } }))),
+                react_1.default.createElement("tbody", null, draftItems?.map((item) => (react_1.default.createElement(HoverOverItemEditor, { key: item.id, schema: schema, dataSource: dataSource, table: table, onItemChange: handleItemChange, onItemDelete: handleItemDelete, item: item })))))),
+            react_1.default.createElement("button", { className: "btn btn-link", onClick: handleAddItem },
+                react_1.default.createElement("span", { className: "fas fa-plus me-1" }),
+                T `Add Item`)))));
+}
+function HoverOverItemEditor(props) {
+    const { schema, dataSource, table, item, onItemChange, onItemDelete } = props;
+    function renderFormat() {
+        const exprUtils = new expressions_1.ExprUtils(schema);
+        const exprType = exprUtils.getExprType(item.value ?? null);
+        if (!exprType) {
+            return null;
+        }
+        if (!(0, valueFormatter_1.canFormatType)(exprType)) {
+            return null;
+        }
+        const formats = (0, valueFormatter_2.getFormatOptions)(exprType);
+        if (!formats) {
+            return null;
+        }
+        return (react_1.default.createElement(ui.Select, { options: formats.map(f => ({ value: f.value, label: f.label })), value: item.format ?? (0, valueFormatter_1.getDefaultFormat)(exprType), onChange: value => onItemChange({ ...item, format: value ?? undefined }), style: { width: "auto", display: "inline-block" } }));
+    }
     return (react_1.default.createElement("tr", null,
-        react_1.default.createElement("td", null,
+        react_1.default.createElement("td", { className: "align-middle" },
             react_1.default.createElement(ui.TextInput, { value: item.label, onChange: value => onItemChange({ ...item, label: value }) })),
-        react_1.default.createElement("td", null,
+        react_1.default.createElement("td", { className: "align-middle" },
             react_1.default.createElement(expressions_ui_1.ExprComponent, { schema: schema, dataSource: dataSource, table: table, types: ["text", "number", "enum", "boolean", "date", "datetime", "id"], onChange: expr => onItemChange({ ...item, value: expr }), value: item.value ?? null, aggrStatuses: ["individual", "literal", "aggregate"] })),
-        react_1.default.createElement("td", null,
+        react_1.default.createElement("td", { className: "align-middle", style: { width: "1%", whiteSpace: "nowrap" } }, renderFormat()),
+        react_1.default.createElement("td", { className: "align-middle", style: { width: "1%", whiteSpace: "nowrap" } },
             react_1.default.createElement("button", { className: "btn btn-link", onClick: () => onItemDelete(item) },
                 react_1.default.createElement("span", { className: "fa fa-close" })))));
-};
+}
 exports.default = EditHoverOver;

package/lib/maps/HoverContent.d.ts

@@ -1,14 +1,19 @@
 import React from "react";
-import { DataSource, Schema } from "@mwater/expressions";
+import { Schema } from "@mwater/expressions";
 import { JsonQLFilter } from "..";
 import { HoverOverItem } from "./maps";
+import { MapLayerDataSource } from "./MapLayerDataSource";
 export interface HoverContentProps {
     /** Schema to use */
     schema: Schema;
-    dataSource: DataSource;
-    filters?: JsonQLFilter[];
-    /** Table that hover over is for */
-    table: string;
+    /** Map data source */
+    mapLayerDataSource: MapLayerDataSource;
+    /** Design of the layer */
+    design: any;
+    /** Data of the current item being hovered over. e.g. { id: 123 } */
+    data: any;
+    /** Additional filters to apply to the hover over data */
+    filters: JsonQLFilter[];
     /** Hover over items */
     items: HoverOverItem[];
     /** Locale to use */

package/lib/maps/HoverContent.js

@@ -25,7 +25,6 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importStar(require("react"));
 const expressions_1 = require("@mwater/expressions");
-const lodash_1 = require("lodash");
 const valueFormatter_1 = require("../valueFormatter");
 const valueFormatter_2 = require("../valueFormatter");
 /** Component that displays hover over content */
@@ -37,42 +36,14 @@ const HoverContent = (props) => {
         let mounted = true;
         const items = props.items;
         if (items.length > 0) {
-            const exprCompiler = new expressions_1.ExprCompiler(props.schema);
-            const query = {
-                type: "query",
-                selects: [],
-                from: exprCompiler.compileTable(props.table, "main"),
-                limit: 1
-            };
-            items.forEach((item) => {
-                if (item.value) {
-                    query.selects.push({
-                        type: "select",
-                        expr: exprCompiler.compileExpr({ expr: item.value, tableAlias: "main" }),
-                        alias: item.id
-                    });
+            props.mapLayerDataSource.getHoverOverData(props.design, props.data, props.filters).then((data) => {
+                if (mounted) {
+                    setValues(data);
                 }
-            });
-            if (props.filters) {
-                let whereClauses = props.filters.map(f => (0, expressions_1.injectTableAlias)(f.jsonql, "main"));
-                whereClauses = (0, lodash_1.compact)(whereClauses);
-                // Wrap if multiple
-                if (whereClauses.length > 1) {
-                    query.where = { type: "op", op: "and", exprs: whereClauses };
-                }
-                else {
-                    query.where = whereClauses[0];
-                }
-            }
-            props.dataSource.performQuery(query, (error, data) => {
-                if (!mounted) {
-                    return;
-                }
-                if (error) {
-                    setError(props.translate("Error loading hover data"));
-                    return;
+            }).catch((error) => {
+                if (mounted) {
+                    setError(error.message);
                 }
-                setValues(data?.[0] ?? {});
             });
         }
         return () => {

package/lib/maps/Layer.d.ts

@@ -130,6 +130,25 @@ export default class Layer<LayerDesign> {
         data: any;
         event: any;
     }, options: OnGridClickOptions<LayerDesign>): OnGridClickResults;
+    /**
+     * Called when the interactivity grid is hovered over.
+     * arguments:
+     *   ev: { data: interactivty data e.g. `{ id: 123 }` }
+     *   options:
+     *     design: design of layer
+     *     schema: schema to use
+     *     dataSource: data source to use
+     *     layerDataSource: layer data source
+     *     scopeData: current scope data if layer is scoping
+     *     filters: compiled filters to apply to the popup
+     *
+     * Returns:
+     *   null
+     *   or
+     *   {
+     *     hoverOver: React element to put into a hover over
+     *   }
+     */
     onGridHoverOver(ev: {
         data: any;
         event: any;
@@ -172,6 +191,24 @@ export default class Layer<LayerDesign> {
     } | null) => void): void;
     /** Get strings to be translated */
     getTranslatableStrings(design: LayerDesign, schema: Schema): string[];
+    /** Gets hover over data for hover over items. This should be implemented by layers that have hover over items.
+     * It will be called on the server side if using a server map data source, or on the client side if using a direct
+     * map data source.
+     */
+    getHoverOverData(options: {
+        /** Design of the layer */
+        design: LayerDesign;
+        /** Data of the current item being hovered over. e.g. { id: 123 } */
+        data: any;
+        /** Filters to apply to the hover over data, not including filtering down to the current item */
+        filters: JsonQLFilter[];
+        /** Schema to use */
+        schema: Schema;
+        /** Data source to use */
+        dataSource: DataSource;
+    }): Promise<{
+        [key: string]: any;
+    }>;
 }
 export interface LegendOptions<LayerDesign> {
     design: LayerDesign;

package/lib/maps/Layer.js

@@ -56,6 +56,25 @@ class Layer {
     onGridClick(ev, options) {
         return null;
     }
+    /**
+     * Called when the interactivity grid is hovered over.
+     * arguments:
+     *   ev: { data: interactivty data e.g. `{ id: 123 }` }
+     *   options:
+     *     design: design of layer
+     *     schema: schema to use
+     *     dataSource: data source to use
+     *     layerDataSource: layer data source
+     *     scopeData: current scope data if layer is scoping
+     *     filters: compiled filters to apply to the popup
+     *
+     * Returns:
+     *   null
+     *   or
+     *   {
+     *     hoverOver: React element to put into a hover over
+     *   }
+     */
     onGridHoverOver(ev, options) {
         return null;
     }
@@ -168,10 +187,10 @@ class Layer {
                     const [w, s, e, n] = (0, bbox_1.default)(results[0].bounds);
                     // Pad bounds to prevent too small box (100m)
                     bounds = {
-                        w: w - 0.001,
-                        s: s - 0.001,
-                        e: e + 0.001,
-                        n: n + 0.001
+                        w: Math.max(w - 0.001, -180),
+                        s: Math.max(s - 0.001, -90),
+                        e: Math.min(e + 0.001, 180),
+                        n: Math.min(n + 0.001, 90)
                     };
                 }
                 return callback(null, bounds);
@@ -182,5 +201,12 @@ class Layer {
     getTranslatableStrings(design, schema) {
         return [];
     }
+    /** Gets hover over data for hover over items. This should be implemented by layers that have hover over items.
+     * It will be called on the server side if using a server map data source, or on the client side if using a direct
+     * map data source.
+     */
+    getHoverOverData(options) {
+        return Promise.resolve({});
+    }
 }
 exports.default = Layer;

package/lib/maps/MWaterServerLayer.d.ts

@@ -24,8 +24,8 @@ interface LoadingLegendState {
 }
 declare class LoadingLegend extends React.Component<LoadingLegendProps, LoadingLegendState> {
     constructor(props: any);
-    componentDidMount(): JQuery.jqXHR<any>;
-    componentWillReceiveProps(nextProps: any): JQuery.jqXHR<any> | undefined;
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: any): void;
     render(): React.DetailedReactHTMLElement<{
         style: {
             font: "14px/16px Arial, Helvetica, sans-serif";

package/lib/maps/MWaterServerLayer.js

@@ -81,14 +81,14 @@ class LoadingLegend extends react_1.default.Component {
         this.state = { html: T `Loading...` };
     }
     componentDidMount() {
-        return jquery_1.default.get(this.props.url).done((data) => {
-            return this.setState({ html: data });
+        jquery_1.default.get(this.props.url).done((data) => {
+            this.setState({ html: data });
         });
     }
-    componentWillReceiveProps(nextProps) {
-        if (nextProps.url !== this.props.url) {
-            return jquery_1.default.get(nextProps.url).done((data) => {
-                return this.setState({ html: data });
+    componentDidUpdate(prevProps) {
+        if (prevProps.url !== this.props.url) {
+            jquery_1.default.get(this.props.url).done((data) => {
+                this.setState({ html: data });
             });
         }
     }

package/lib/maps/MapLayerDataSource.d.ts

@@ -19,4 +19,13 @@ export interface MapLayerDataSource {
     }>;
     /** Gets widget data source for a popup widget */
     getPopupWidgetDataSource(design: any, widgetId: string): WidgetDataSource;
+    /** Gets hover over data for hover over items
+     * @param design The design of the layer
+     * @param data The data of the current item being hovered over. e.g. { id: 123 }
+     * @param filters The filters to apply to the layer does not include filters that narrow down to a specific item
+     * @returns A promise that resolves to the hover over data, indexed by the id of the hover over item
+     */
+    getHoverOverData(design: any, data: any, filters: JsonQLFilter[]): Promise<{
+        [key: string]: any;
+    }>;
 }

package/lib/maps/MapUtils.d.ts

@@ -1,7 +1,8 @@
 import { JsonQLExpr } from "@mwater/jsonql";
-import { Schema } from "@mwater/expressions";
+import { DataSource, Schema } from "@mwater/expressions";
 import { JsonQLFilter } from "../JsonQLFilter";
 import { MapDesign } from "./MapDesign";
+import { HoverOverItem } from "./maps";
 export interface MapScope {
     name: string;
     filter: JsonQLFilter;
@@ -23,3 +24,20 @@ export declare function getCompiledFilters(design: MapDesign, schema: Schema, fi
  * Get a list of translatable strings in the map design
  */
 export declare function getTranslatableStrings(design: MapDesign, schema: Schema): string[];
+/**
+ * Convenience function to get hover over data for a map given an id and a list of hover over items
+ */
+export declare function getSimpleHoverOverData(options: {
+    /** Id of the item to get hover over data for. If null, will not filter by id */
+    id: any;
+    /** Table of the item to get hover over data for */
+    table: string;
+    /** Extra filters to apply to the hover over data, not including filtering down to the current item */
+    filters: JsonQLFilter[];
+    /** Schema to use */
+    schema: Schema;
+    /** Data source to use */
+    dataSource: DataSource;
+    /** Hover over items */
+    hoverOverItems: HoverOverItem[];
+}): Promise<import("@mwater/expressions").Row>;

package/lib/maps/MapUtils.js

@@ -1,5 +1,28 @@
 "use strict";
 // General utilities for a map
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -11,7 +34,8 @@ exports.convertToMarkersMap = convertToMarkersMap;
 exports.getFilterableTables = getFilterableTables;
 exports.getCompiledFilters = getCompiledFilters;
 exports.getTranslatableStrings = getTranslatableStrings;
-const lodash_1 = __importDefault(require("lodash"));
+exports.getSimpleHoverOverData = getSimpleHoverOverData;
+const lodash_1 = __importStar(require("lodash"));
 const expressions_1 = require("@mwater/expressions");
 const LayerFactory_1 = __importDefault(require("./LayerFactory"));
 // Check if can convert to a cluster map. Only maps containing marker views can be
@@ -135,3 +159,49 @@ function getTranslatableStrings(design, schema) {
     // Remove duplicates
     return lodash_1.default.uniq(strings);
 }
+/**
+ * Convenience function to get hover over data for a map given an id and a list of hover over items
+ */
+async function getSimpleHoverOverData(options) {
+    const { id, table, filters, schema, dataSource, hoverOverItems } = options;
+    const exprCompiler = new expressions_1.ExprCompiler(schema);
+    const query = {
+        type: "query",
+        selects: [],
+        from: exprCompiler.compileTable(table, "main"),
+        limit: 1
+    };
+    for (const item of hoverOverItems) {
+        if (item.value) {
+            query.selects.push({
+                type: "select",
+                expr: exprCompiler.compileExpr({ expr: item.value, tableAlias: "main" }),
+                alias: item.id
+            });
+        }
+    }
+    if (filters) {
+        let whereClauses = filters.filter(f => f.table === table).map(f => (0, expressions_1.injectTableAlias)(f.jsonql, "main"));
+        // Add id filter
+        if (id != null) {
+            whereClauses.push({
+                type: "op",
+                op: "=",
+                exprs: [
+                    exprCompiler.compileExpr({ expr: { type: "id", table }, tableAlias: "main" }),
+                    { type: "literal", value: id }
+                ]
+            });
+        }
+        whereClauses = (0, lodash_1.compact)(whereClauses);
+        // Wrap if multiple
+        if (whereClauses.length > 1) {
+            query.where = { type: "op", op: "and", exprs: whereClauses };
+        }
+        else {
+            query.where = whereClauses[0];
+        }
+    }
+    const rows = await dataSource.performQuery(query);
+    return rows?.[0] ?? {};
+}

package/lib/maps/MarkersLayer.d.ts

@@ -48,6 +48,24 @@ export default class MarkersLayer extends Layer<MarkersLayerDesign> {
     validateDesign(design: MarkersLayerDesign, schema: Schema): string | null;
     /** Get strings to be translated */
     getTranslatableStrings(design: MarkersLayerDesign, schema: Schema): string[];
+    /** Gets hover over data for hover over items. This should be implemented by layers that have hover over items.
+     * It will be called on the server side if using a server map data source, or on the client side if using a direct
+     * map data source.
+     */
+    getHoverOverData(options: {
+        /** Design of the layer */
+        design: MarkersLayerDesign;
+        /** Data of the current item being hovered over. e.g. { id: 123 } */
+        data: any;
+        /** Filters to apply to the hover over data, not including filtering down to the current item */
+        filters: JsonQLFilter[];
+        /** Schema to use */
+        schema: Schema;
+        /** Data source to use */
+        dataSource: DataSource;
+    }): Promise<{
+        [key: string]: any;
+    }>;
 }
 /**
  * Takes a base query that has any number of selects and where conditions. It must have a geometry

package/lib/maps/MarkersLayer.js

@@ -40,6 +40,7 @@ const HoverContent_1 = __importDefault(require("./HoverContent"));
 const layoutOptions_1 = require("../dashboards/layoutOptions");
 const BlocksLayoutManager_1 = __importDefault(require("../layouts/blocks/BlocksLayoutManager"));
 const DashboardUtils_1 = require("../dashboards/DashboardUtils");
+const MapUtils_1 = require("./MapUtils");
 class MarkersLayer extends Layer_1.default {
     /** Gets the type of layer definition */
     getLayerDefinitionType() {
@@ -445,35 +446,20 @@ ${design.polygonBorderColor ? "line-color: " + design.polygonBorderColor + ";" :
     }
     // same as onGridClick but handles hover over
     onGridHoverOver(ev, hoverOptions) {
-        if (ev.data && ev.data.id) {
-            const { table } = hoverOptions.design;
-            const results = {};
-            // Popup
-            if (hoverOptions.design.hoverOver) {
-                const exprCompiler = new expressions_1.ExprCompiler(hoverOptions.schema);
-                results.hoverOver = react_1.default.createElement(HoverContent_1.default, {
+        if (ev.data && ev.data.id && hoverOptions.design.hoverOver && hoverOptions.design.hoverOver.items.length > 0) {
+            const results = {
+                hoverOver: react_1.default.createElement(HoverContent_1.default, {
                     key: ev.data.id,
                     schema: hoverOptions.schema,
-                    dataSource: hoverOptions.dataSource,
-                    table,
+                    mapLayerDataSource: hoverOptions.layerDataSource,
                     items: hoverOptions.design.hoverOver.items,
-                    filters: [
-                        {
-                            table,
-                            jsonql: {
-                                type: "op",
-                                op: "=",
-                                exprs: [
-                                    exprCompiler.compileExpr({ expr: { type: "id", table }, tableAlias: "{alias}" }),
-                                    { type: "literal", value: ev.data.id }
-                                ]
-                            }
-                        }
-                    ],
+                    design: hoverOptions.design,
+                    data: ev.data,
+                    filters: hoverOptions.filters,
                     locale: hoverOptions.locale,
                     translate: hoverOptions.translate
-                });
-            }
+                })
+            };
             return results;
         }
         else {
@@ -729,6 +715,20 @@ ${design.polygonBorderColor ? "line-color: " + design.polygonBorderColor + ";" :
         // Remove duplicates
         return lodash_1.default.uniq(strings);
     }
+    /** Gets hover over data for hover over items. This should be implemented by layers that have hover over items.
+     * It will be called on the server side if using a server map data source, or on the client side if using a direct
+     * map data source.
+     */
+    getHoverOverData(options) {
+        return (0, MapUtils_1.getSimpleHoverOverData)({
+            id: options.data.id,
+            table: options.design.table,
+            filters: options.filters,
+            schema: options.schema,
+            dataSource: options.dataSource,
+            hoverOverItems: options.design.hoverOver.items,
+        });
+    }
 }
 exports.default = MarkersLayer;
 /**

package/lib/maps/MarkersLayerDesignerComponent.d.ts

@@ -51,6 +51,19 @@ export default class MarkersLayerDesignerComponent extends React.Component<Marke
         className: string;
     }, HTMLElement> | null;
     renderPopup(): React.CElement<any, EditPopupComponent> | null;
-    renderHoverOver(): React.FunctionComponentElement<import("./EditHoverOver").EditHoverOverProps> | null;
+    renderHoverOver(): React.FunctionComponentElement<{
+        design: MarkersLayerDesign;
+        onDesignChange: any;
+        schema: Schema;
+        dataSource: DataSource;
+        table: string;
+        idTable: string;
+        defaultPopupFilterJoins: {
+            [x: number]: {
+                table: any;
+                type: string;
+            };
+        };
+    }> | null;
     render(): React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement>;
 }

package/lib/maps/RasterMapViewComponent.js

@@ -158,7 +158,7 @@ class RasterMapViewComponent extends react_1.default.Component {
                 filters: this.getCompiledFilters(),
                 dataSource: this.props.dataSource,
                 locale: this.context,
-                translate: this.props.translate ?? (() => ""),
+                translate: this.props.translate ?? ((input) => input),
                 onHide: () => this.setState({ legendHidden: true }),
                 zoom: null
             });

package/lib/maps/ServerMapDataSource.d.ts

@@ -54,6 +54,15 @@ declare class ServerLayerDataSource implements MapLayerDataSource {
     getPopupWidgetDataSource(design: any, widgetId: string): ServerMapLayerPopupWidgetDataSource;
     createUrl(filters: JsonQLFilter[], extension: string): string;
     createLegacyUrl(design: any, extension: string, filters: JsonQLFilter[]): string;
+    /** Gets hover over data for hover over items
+     * @param design The design of the layer
+     * @param data The data of the current item being hovered over. e.g. { id: 123 }
+     * @param filters The filters to apply to the layer does not include filters that narrow down to a specific item
+     * @returns A promise that resolves to the hover over data, indexed by the id of the hover over item
+     */
+    getHoverOverData(design: any, data: any, filters: JsonQLFilter[]): Promise<{
+        [key: string]: any;
+    }>;
 }
 interface ServerMapLayerPopupWidgetDataSourceOptions {
     /** API url to use for talking to mWater server */