@mwater/visualization 5.6.0 → 5.6.1

package/lib/maps/MarkersLayer.d.ts

@@ -3,26 +3,13 @@ import Layer, { OnGridClickOptions, OnGridHoverOptions, VectorTileDef, LegendOpt
 import { Schema, DataSource } from "@mwater/expressions";
 import { OnGridClickResults, OnGridHoverResults } from "./maps";
 import { JsonQLFilter } from "../index";
-import { JsonQLQuery, JsonQLSelectQuery } from "@mwater/jsonql";
+import { JsonQLSelectQuery } from "@mwater/jsonql";
 import { MarkersLayerDesign } from "./MarkersLayerDesign";
 export default class MarkersLayer extends Layer<MarkersLayerDesign> {
     /** Gets the type of layer definition */
     getLayerDefinitionType(): "VectorTile";
     getVectorTile(design: MarkersLayerDesign, sourceId: string, schema: Schema, filters: JsonQLFilter[], opacity: number): VectorTileDef;
     createJsonQL(design: MarkersLayerDesign, schema: Schema, filters: JsonQLFilter[]): JsonQLSelectQuery;
-    getJsonQLCss(design: MarkersLayerDesign, schema: Schema, filters: JsonQLFilter[]): {
-        layers: {
-            id: string;
-            jsonql: JsonQLQuery;
-        }[];
-        css: string;
-        interactivity: {
-            layer: string;
-            fields: string[];
-        };
-    };
-    createMapnikJsonQL(design: MarkersLayerDesign, schema: Schema, filters: JsonQLFilter[]): JsonQLQuery;
-    createCss(design: MarkersLayerDesign): string;
     onGridHoverOver(ev: {
         data: any;
         event: any;

package/lib/maps/MarkersLayer.js

@@ -142,6 +142,51 @@ class MarkersLayer extends Layer_1.default {
                 filter: addFilter(["==", ["geometry-type"], "Point"])
             });
         }
+        // Add labels layer if label axis is defined (points only)
+        if (design.axes.label) {
+            // Determine text-anchor and text-offset based on labelPosition
+            let textAnchor;
+            let textOffset;
+            switch (design.labelPosition) {
+                case "top":
+                    textAnchor = "bottom";
+                    textOffset = [0, -0.8];
+                    break;
+                case "left":
+                    textAnchor = "right";
+                    textOffset = [-0.8, 0];
+                    break;
+                case "right":
+                    textAnchor = "left";
+                    textOffset = [0.8, 0];
+                    break;
+                case "bottom":
+                default:
+                    textAnchor = "top";
+                    textOffset = [0, 0.8];
+                    break;
+            }
+            mapLayers.push({
+                id: `${sourceId}:labels`,
+                type: "symbol",
+                source: sourceId,
+                "source-layer": "main",
+                layout: {
+                    "text-field": ["to-string", ["get", "label"]],
+                    "text-size": 10,
+                    "text-anchor": textAnchor,
+                    "text-offset": textOffset,
+                    "text-allow-overlap": false
+                },
+                paint: {
+                    "text-color": (0, mapboxUtils_1.compileColorToMapbox)("#000000", design.axes.color?.excludedValues),
+                    "text-halo-color": (0, mapboxUtils_1.compileColorToMapbox)("rgba(255, 255, 255, 0.8)", design.axes.color?.excludedValues),
+                    "text-halo-width": 1.5,
+                    "text-opacity": opacity
+                },
+                filter: addFilter(["==", ["geometry-type"], "Point"])
+            });
+        }
         return {
             sourceLayers: [{ id: "main", jsonql }],
             ctes: [],
@@ -179,6 +224,11 @@ class MarkersLayer extends Layer_1.default {
             const colorExpr = axisBuilder.compileAxis({ axis: design.axes.color, tableAlias: "basequery" });
             basequery.selects.push({ type: "select", expr: colorExpr, alias: "color" });
         }
+        // Add label select if label axis
+        if (design.axes.label) {
+            const labelExpr = axisBuilder.compileAxis({ axis: design.axes.label, tableAlias: "basequery" });
+            basequery.selects.push({ type: "select", expr: labelExpr, alias: "label" });
+        }
         // Create filters
         let whereClauses = [];
         // Add filters baked into layer
@@ -202,252 +252,6 @@ class MarkersLayer extends Layer_1.default {
         const markersQuery = createMarkersVectorQuery(basequery);
         return markersQuery;
     }
-    // Gets the layer definition as JsonQL + CSS in format:
-    //   {
-    //     layers: array of { id: layer id, jsonql: jsonql that includes "the_webmercator_geom" as a column }
-    //     css: carto css
-    //     interactivity: (optional) { layer: id of layer, fields: array of field names }
-    //   }
-    // arguments:
-    //   design: design of layer
-    //   schema: schema to use
-    //   filters: array of filters to apply. Each is { table: table id, jsonql: jsonql condition with {alias} for tableAlias. Use injectAlias to put in table alias
-    getJsonQLCss(design, schema, filters) {
-        // Create design
-        const layerDef = {
-            layers: [
-                {
-                    id: "layer0",
-                    jsonql: this.createMapnikJsonQL(design, schema, filters)
-                }
-            ],
-            css: this.createCss(design),
-            interactivity: {
-                layer: "layer0",
-                fields: ["id"]
-            }
-        };
-        return layerDef;
-    }
-    createMapnikJsonQL(design, schema, filters) {
-        const axisBuilder = new AxisBuilder_1.default({ schema });
-        const exprCompiler = new expressions_1.ExprCompiler(schema);
-        // Compile geometry axis
-        let geometryExpr = axisBuilder.compileAxis({ axis: design.axes.geometry, tableAlias: "innerquery" });
-        // row_number() over (partition by round(ST_XMin(location)/!(pixel_width!*5)), round(ST_YMin(location)/(!pixel_height!*5))) AS r
-        const cluster = {
-            type: "select",
-            expr: {
-                type: "op",
-                op: "row_number",
-                exprs: [],
-                over: {
-                    partitionBy: [
-                        {
-                            type: "op",
-                            op: "round",
-                            exprs: [
-                                {
-                                    type: "op",
-                                    op: "/",
-                                    exprs: [
-                                        { type: "op", op: "ST_XMin", exprs: [geometryExpr] },
-                                        { type: "op", op: "*", exprs: [{ type: "token", token: "!pixel_width!" }, 5] }
-                                    ]
-                                }
-                            ]
-                        },
-                        {
-                            type: "op",
-                            op: "round",
-                            exprs: [
-                                {
-                                    type: "op",
-                                    op: "/",
-                                    exprs: [
-                                        { type: "op", op: "ST_YMin", exprs: [geometryExpr] },
-                                        { type: "op", op: "*", exprs: [{ type: "token", token: "!pixel_height!" }, 5] }
-                                    ]
-                                }
-                            ]
-                        }
-                    ]
-                }
-            },
-            alias: "r"
-        };
-        // Select _id, location and clustered row number
-        const innerquery = {
-            type: "query",
-            selects: [
-                {
-                    type: "select",
-                    expr: { type: "field", tableAlias: "innerquery", 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
-                cluster
-            ],
-            from: exprCompiler.compileTable(design.table, "innerquery")
-        };
-        // Add color select if color axis
-        if (design.axes.color) {
-            const colorExpr = axisBuilder.compileAxis({ axis: design.axes.color, tableAlias: "innerquery" });
-            innerquery.selects.push({ type: "select", expr: colorExpr, alias: "color" });
-        }
-        // Create filters. First limit to bounding box
-        let whereClauses = [
-            {
-                type: "op",
-                op: "&&",
-                exprs: [geometryExpr, { type: "token", token: "!bbox!" }]
-            }
-        ];
-        // Then add filters baked into layer
-        if (design.filter) {
-            whereClauses.push(exprCompiler.compileExpr({ expr: design.filter, tableAlias: "innerquery" }));
-        }
-        // Then add extra filters passed in, if relevant
-        // Get relevant filters
-        const relevantFilters = lodash_1.default.where(filters, { table: design.table });
-        for (let filter of relevantFilters) {
-            whereClauses.push((0, expressions_1.injectTableAlias)(filter.jsonql, "innerquery"));
-        }
-        whereClauses = lodash_1.default.compact(whereClauses);
-        // Wrap if multiple
-        if (whereClauses.length > 1) {
-            innerquery.where = { type: "op", op: "and", exprs: whereClauses };
-        }
-        else {
-            innerquery.where = whereClauses[0];
-        }
-        // Create outer query which takes where r <= 3 to limit # of points in a cluster
-        const outerquery = {
-            type: "query",
-            selects: [
-                {
-                    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: {
-                        type: "op",
-                        op: "ST_GeometryType",
-                        exprs: [{ type: "field", tableAlias: "innerquery", column: "the_geom_webmercator" }]
-                    },
-                    alias: "geometry_type"
-                } // ST_GeometryType(innerquery.the_geom_webmercator) as geometry_type
-            ],
-            from: { type: "subquery", query: innerquery, alias: "innerquery" },
-            where: { type: "op", op: "<=", exprs: [{ type: "field", tableAlias: "innerquery", column: "r" }, 3] }
-        };
-        // Add color select if color axis
-        if (design.axes.color) {
-            outerquery.selects.push({
-                type: "select",
-                expr: { type: "field", tableAlias: "innerquery", column: "color" },
-                alias: "color"
-            }); // innerquery.color as color
-        }
-        return outerquery;
-    }
-    // Creates CartoCSS
-    createCss(design) {
-        let stroke, symbol;
-        let css = "";
-        if (design.symbol) {
-            symbol = `marker-file: url(${design.symbol});`;
-            stroke = "marker-line-width: 60;";
-        }
-        else {
-            symbol = "marker-type: ellipse;";
-            stroke = "marker-line-width: 1;";
-        }
-        // Should only display markers when it is a point geometry
-        css +=
-            `\
-#layer0[geometry_type='ST_Point'] {
-  marker-fill: ` +
-                (design.color || "#666666") +
-                `;
-marker-width: ` +
-                (design.markerSize || 10) +
-                `;
-marker-line-color: white;\
-` +
-                stroke +
-                `\
-marker-line-opacity: 0.6;
-marker-placement: point;\
-` +
-                symbol +
-                `\
-  marker-allow-overlap: true;
-}
-#layer0 {
-  line-color: ` +
-                (design.color || "#666666") +
-                `;
-line-width: ` +
-                (design.lineWidth != null ? design.lineWidth : "3") +
-                `;
-}
-#layer0[geometry_type='ST_Polygon'],#layer0[geometry_type='ST_MultiPolygon'] {
-  polygon-fill: ` +
-                (design.color || "#666666") +
-                `;
-  polygon-opacity: ${design.polygonFillOpacity ?? 0.25};
-}
-\
-`;
-        // If color axes, add color conditions
-        if (design.axes.color && design.axes.color.colorMap) {
-            for (let item of design.axes.color.colorMap) {
-                // If invisible
-                if (lodash_1.default.includes(design.axes.color.excludedValues || [], item.value)) {
-                    css +=
-                        `\
-#layer0[color=` +
-                            JSON.stringify(item.value) +
-                            `] { line-opacity: 0; marker-line-opacity: 0; marker-fill-opacity: 0; polygon-opacity: 0; }\
-`;
-                }
-                else {
-                    css +=
-                        `\
-#layer0[color=` +
-                            JSON.stringify(item.value) +
-                            "] { line-color: " +
-                            item.color +
-                            ` }
-#layer0[color=` +
-                            JSON.stringify(item.value) +
-                            "][geometry_type='ST_Point'] { marker-fill: " +
-                            item.color +
-                            ` }
-#layer0[color=` +
-                            JSON.stringify(item.value) +
-                            "][geometry_type='ST_Polygon'],#layer0[color=" +
-                            JSON.stringify(item.value) +
-                            `][geometry_type='ST_MultiPolygon'] {
-polygon-fill: ` +
-                            item.color +
-                            `;\
-${design.polygonBorderColor ? "line-color: " + design.polygonBorderColor + ";" : ""}\
-}\
-`;
-                }
-            }
-        }
-        return css;
-    }
     // same as onGridClick but handles hover over
     onGridHoverOver(ev, hoverOptions) {
         if (ev.data && ev.data.id && hoverOptions.design.hoverOver && hoverOptions.design.hoverOver.items.length > 0) {
@@ -591,6 +395,13 @@ ${design.polygonBorderColor ? "line-color: " + design.polygonBorderColor + ";" :
             }
         }
         const axisBuilder = new AxisBuilder_1.default({ schema });
+        // Clean and translate axis
+        const axis = (0, MapUtils_1.translateAxis)(axisBuilder.cleanAxis({
+            axis: design.axes.color || null,
+            table: design.table,
+            types: ["enum", "text", "boolean", "date"],
+            aggrNeed: "none"
+        }), translate);
         return react_1.default.createElement(LayerLegendComponent_1.default, {
             schema,
             defaultColor: design.color,
@@ -598,12 +409,7 @@ ${design.polygonBorderColor ? "line-color: " + design.polygonBorderColor + ";" :
             markerSize: design.markerSize,
             name: translate(name),
             filters: lodash_1.default.compact(_filters),
-            axis: axisBuilder.cleanAxis({
-                axis: design.axes.color || null,
-                table: design.table,
-                types: ["enum", "text", "boolean", "date"],
-                aggrNeed: "none"
-            }),
+            axis,
             locale
         });
     }
@@ -665,6 +471,12 @@ ${design.polygonBorderColor ? "line-color: " + design.polygonBorderColor + ";" :
                 types: ["enum", "text", "boolean", "date"],
                 aggrNeed: "none"
             });
+            draft.axes.label = axisBuilder.cleanAxis({
+                axis: draft.axes.label ? (0, immer_1.original)(draft.axes.label) || null : null,
+                table: design.table,
+                types: ["text", "number"],
+                aggrNeed: "none"
+            }) || undefined;
             draft.filter = exprCleaner.cleanExpr(design.filter || null, { table: draft.table });
             // Clean hover over expressions 
             if (design.table && design.hoverOver && design.hoverOver.items) {
@@ -700,6 +512,11 @@ ${design.polygonBorderColor ? "line-color: " + design.polygonBorderColor + ";" :
         if (error) {
             return error;
         }
+        // Validate label
+        error = axisBuilder.validateAxis({ axis: design.axes.label || null });
+        if (error) {
+            return error;
+        }
         // Check that doesn't compile to null (persistent bug that haven't been able to track down)
         if (!axisBuilder.compileAxis({ axis: design.axes.geometry, tableAlias: "innerquery" })) {
             return "Null geometry axis";
@@ -714,6 +531,8 @@ ${design.polygonBorderColor ? "line-color: " + design.polygonBorderColor + ";" :
     /** Get strings to be translated */
     getTranslatableStrings(design, schema) {
         const strings = [];
+        // Add strings from axis category labels and null labels
+        strings.push(...(0, MapUtils_1.getTranslatableStringsFromAxis)(design.axes.color));
         // Add strings from hoverOver items
         if (design.hoverOver && design.hoverOver.items) {
             for (const item of design.hoverOver.items) {

package/lib/maps/MarkersLayerDesign.d.ts

@@ -13,7 +13,11 @@ export interface MarkersLayerDesign {
         geometry: Axis;
         /** Color axis (to split into series based on a color) */
         color?: Axis;
+        /** Label expression to display on/near markers (points only) */
+        label?: Axis;
     };
+    /** Position of label relative to marker. Default "bottom" */
+    labelPosition?: "top" | "bottom" | "left" | "right";
     /** Optional logical expression to filter by */
     filter?: Expr;
     /** Color of layer (e.g. #FF8800). Color axis overrides */

package/lib/maps/MarkersLayerDesignerComponent.d.ts

@@ -1,6 +1,8 @@
 import React from "react";
-import { DataSource, Schema } from "@mwater/expressions";
+import { DataSource, Expr, Schema } from "@mwater/expressions";
 import { MarkersLayerDesign } from "./MarkersLayerDesign";
+import { Axis } from "../axes/Axis";
+import { JsonQLFilter } from "../JsonQLFilter";
 export interface MarkersLayerDesignerComponentProps {
     /** Schema to use */
     schema: Schema;
@@ -8,23 +10,23 @@ export interface MarkersLayerDesignerComponentProps {
     /** Design of the marker layer */
     design: MarkersLayerDesign;
     /** Called with new design */
-    onDesignChange: any;
-    filters?: any;
+    onDesignChange: (design: MarkersLayerDesign) => void;
+    filters?: JsonQLFilter[];
 }
+/** Designer for a markers layer */
 export default class MarkersLayerDesignerComponent extends React.Component<MarkersLayerDesignerComponentProps> {
-    update(updates: any): any;
-    updateAxes(changes: any): any;
-    handleTableChange: (table: any) => any;
-    handleGeometryAxisChange: (axis: any) => any;
-    handleColorAxisChange: (axis: any) => any;
-    handleFilterChange: (expr: any) => any;
-    handleColorChange: (color: any) => any;
-    handlePolygonBorderColorChange: (polygonBorderColor: any) => any;
-    handlePolygonFillOpacityChange: (polygonFillOpacity: any) => any;
-    handleSymbolChange: (symbol: any) => any;
-    handleNameChange: (e: any) => any;
-    handleMarkerSizeChange: (markerSize: any) => any;
-    handleLineWidthChange: (lineWidth: any) => any;
+    handleTableChange: (table: string) => void;
+    handleGeometryAxisChange: (axis: Axis) => void;
+    handleColorAxisChange: (axis: Axis | null) => void;
+    handleFilterChange: (expr: Expr) => void;
+    handleColorChange: (color: string) => void;
+    handlePolygonBorderColorChange: (polygonBorderColor: string) => void;
+    handlePolygonFillOpacityChange: (polygonFillOpacity: number) => void;
+    handleSymbolChange: (symbol: string) => void;
+    handleMarkerSizeChange: (markerSize: number) => void;
+    handleLineWidthChange: (lineWidth: number) => void;
+    handleLabelAxisChange: (axis: Axis | null) => void;
+    handleLabelPositionChange: (labelPosition: "top" | "bottom" | "left" | "right") => void;
     renderTable(): React.JSX.Element;
     renderGeometryAxis(): React.JSX.Element | undefined;
     renderColor(): React.JSX.Element | undefined;
@@ -34,6 +36,8 @@ export default class MarkersLayerDesignerComponent extends React.Component<Marke
     renderPolygonBorderColor(): React.JSX.Element | undefined;
     renderPolygonFillOpacity(): React.JSX.Element | undefined;
     renderFilter(): React.JSX.Element | null;
+    renderLabelAxis(): React.JSX.Element | undefined;
+    renderLabelPosition(): React.JSX.Element | undefined;
     renderPopup(): React.JSX.Element | null;
     renderHoverOver(): React.JSX.Element | null;
     render(): React.JSX.Element;

package/lib/maps/MarkersLayerDesignerComponent.js

@@ -40,49 +40,68 @@ const PopupFilterJoinsUtils = __importStar(require("./PopupFilterJoinsUtils"));
 const ui = __importStar(require("@mwater/react-library/lib/bootstrap"));
 const EditHoverOver_1 = require("./EditHoverOver");
 const rc_slider_1 = __importDefault(require("rc-slider"));
-// Designer for a markers layer
+const immer_1 = require("immer");
+/** Designer for a markers layer */
 class MarkersLayerDesignerComponent extends react_1.default.Component {
-    // Apply updates to design
-    update(updates) {
-        return this.props.onDesignChange(lodash_1.default.extend({}, this.props.design, updates));
-    }
-    // Update axes with specified changes
-    updateAxes(changes) {
-        const axes = lodash_1.default.extend({}, this.props.design.axes, changes);
-        return this.update({ axes });
-    }
     handleTableChange = (table) => {
-        return this.update({ table });
+        this.props.onDesignChange((0, immer_1.produce)(this.props.design, draft => {
+            draft.table = table;
+        }));
     };
     handleGeometryAxisChange = (axis) => {
-        return this.updateAxes({ geometry: axis });
+        this.props.onDesignChange((0, immer_1.produce)(this.props.design, draft => {
+            draft.axes.geometry = axis;
+        }));
     };
     handleColorAxisChange = (axis) => {
-        return this.updateAxes({ color: axis });
+        this.props.onDesignChange((0, immer_1.produce)(this.props.design, draft => {
+            draft.axes.color = axis ?? undefined;
+        }));
     };
     handleFilterChange = (expr) => {
-        return this.update({ filter: expr });
+        this.props.onDesignChange((0, immer_1.produce)(this.props.design, draft => {
+            draft.filter = expr;
+        }));
     };
     handleColorChange = (color) => {
-        return this.update({ color });
+        this.props.onDesignChange((0, immer_1.produce)(this.props.design, draft => {
+            draft.color = color;
+        }));
     };
     handlePolygonBorderColorChange = (polygonBorderColor) => {
-        return this.update({ polygonBorderColor });
+        this.props.onDesignChange((0, immer_1.produce)(this.props.design, draft => {
+            draft.polygonBorderColor = polygonBorderColor;
+        }));
     };
     handlePolygonFillOpacityChange = (polygonFillOpacity) => {
-        return this.update({ polygonFillOpacity: polygonFillOpacity / 100 });
+        this.props.onDesignChange((0, immer_1.produce)(this.props.design, draft => {
+            draft.polygonFillOpacity = polygonFillOpacity / 100;
+        }));
     };
     handleSymbolChange = (symbol) => {
-        return this.update({ symbol });
-    };
-    handleNameChange = (e) => {
-        return this.update({ name: e.target.value });
+        this.props.onDesignChange((0, immer_1.produce)(this.props.design, draft => {
+            draft.symbol = symbol;
+        }));
     };
     handleMarkerSizeChange = (markerSize) => {
-        return this.update({ markerSize });
+        this.props.onDesignChange((0, immer_1.produce)(this.props.design, draft => {
+            draft.markerSize = markerSize;
+        }));
     };
     handleLineWidthChange = (lineWidth) => {
-        return this.update({ lineWidth });
+        this.props.onDesignChange((0, immer_1.produce)(this.props.design, draft => {
+            draft.lineWidth = lineWidth;
+        }));
+    };
+    handleLabelAxisChange = (axis) => {
+        this.props.onDesignChange((0, immer_1.produce)(this.props.design, draft => {
+            draft.axes.label = axis ?? undefined;
+        }));
+    };
+    handleLabelPositionChange = (labelPosition) => {
+        this.props.onDesignChange((0, immer_1.produce)(this.props.design, draft => {
+            draft.labelPosition = labelPosition;
+        }));
     };
     renderTable() {
         return (react_1.default.createElement("div", { className: "mb-3" },
@@ -207,6 +226,39 @@ class MarkersLayerDesignerComponent extends react_1.default.Component {
             react_1.default.createElement("div", { style: { marginLeft: 8 } },
                 react_1.default.createElement(expressions_ui_1.FilterExprComponent, { schema: this.props.schema, dataSource: this.props.dataSource, onChange: this.handleFilterChange, table: this.props.design.table, value: this.props.design.filter }))));
     }
+    renderLabelAxis() {
+        if (!this.props.design.axes.geometry) {
+            return;
+        }
+        const filters = lodash_1.default.clone(this.props.filters) || [];
+        if (this.props.design.filter != null) {
+            const exprCompiler = new expressions_1.ExprCompiler(this.props.schema);
+            const jsonql = exprCompiler.compileExpr({ expr: this.props.design.filter, tableAlias: "{alias}" });
+            if (jsonql) {
+                filters.push({ table: this.props.design.filter.table, jsonql });
+            }
+        }
+        return (react_1.default.createElement("div", { className: "mb-3" },
+            react_1.default.createElement("label", { className: "text-muted" },
+                react_1.default.createElement("span", { className: "fas fa-tag" }),
+                " ",
+                T `Label (points only)`),
+            react_1.default.createElement(AxisComponent_1.default, { schema: this.props.schema, dataSource: this.props.dataSource, table: this.props.design.table, types: ["text", "number"], aggrNeed: "none", value: this.props.design.axes.label, onChange: this.handleLabelAxisChange, filters: filters })));
+    }
+    renderLabelPosition() {
+        // Only show if label axis is set
+        if (!this.props.design.axes.label) {
+            return;
+        }
+        return (react_1.default.createElement("div", { className: "mb-3" },
+            react_1.default.createElement("label", { className: "text-muted" }, T `Label Position`),
+            react_1.default.createElement(ui.Select, { value: this.props.design.labelPosition || "bottom", options: [
+                    { value: "top", label: T `Top` },
+                    { value: "bottom", label: T `Bottom` },
+                    { value: "left", label: T `Left` },
+                    { value: "right", label: T `Right` }
+                ], onChange: this.handleLabelPositionChange })));
+    }
     renderPopup() {
         if (!this.props.design.table) {
             return null;
@@ -226,6 +278,8 @@ class MarkersLayerDesignerComponent extends react_1.default.Component {
             this.renderColor(),
             this.renderSymbol(),
             this.renderMarkerSize(),
+            this.renderLabelAxis(),
+            this.renderLabelPosition(),
             react_1.default.createElement(ui.CollapsibleSection, { label: T `Shape Options`, labelMuted: true },
                 this.renderLineWidth(),
                 this.renderPolygonBorderColor(),

package/lib/maps/ServerMapDataSource.d.ts

@@ -43,7 +43,6 @@ declare class ServerLayerDataSource implements MapLayerDataSource {
     options: ServerMapLayerDataSourceOptions;
     constructor(options: ServerMapLayerDataSourceOptions);
     getTileUrl(design: any, filters: JsonQLFilter[]): any;
-    getUtfGridUrl(design: any, filters: JsonQLFilter[]): string | null;
     /** Get the url for vector tile source with an expiry time. Only for layers of type "VectorTile"
      * @param createdAfter ISO 8601 timestamp requiring that tile source on server is created after specified datetime
      */

package/lib/maps/ServerMapDataSource.js

@@ -76,21 +76,6 @@ class ServerLayerDataSource {
         }
         return this.createUrl(filters, "png");
     }
-    // Get the url for the interactivity tiles with the specified filters applied
-    // Called with (design, filters) where design is the design of the layer and filters are filters to apply. Returns URL
-    getUtfGridUrl(design, filters) {
-        // Handle special cases
-        if (this.options.layerView.type === "MWaterServer") {
-            return this.createLegacyUrl(design, "grid.json", filters);
-        }
-        // Create layer
-        const layer = LayerFactory_1.default.createLayer(this.options.layerView.type);
-        // If layer has tiles url directly available
-        if (layer.getLayerDefinitionType() === "TileUrl") {
-            return layer.getUtfGridUrl(this.options.layerView.design, filters);
-        }
-        return this.createUrl(filters, "grid.json");
-    }
     /** Get the url for vector tile source with an expiry time. Only for layers of type "VectorTile"
      * @param createdAfter ISO 8601 timestamp requiring that tile source on server is created after specified datetime
      */

package/lib/maps/SwitchableTileUrlLayer.d.ts

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