@mwater/visualization 5.0.0

package/lib/maps/DirectMapDataSource.js

@@ -0,0 +1,265 @@
+"use strict";
+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 };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDirectVectorTileUrl = void 0;
+const lodash_1 = __importDefault(require("lodash"));
+const expressions_1 = require("@mwater/expressions");
+const BlocksLayoutManager_1 = __importDefault(require("../layouts/blocks/BlocksLayoutManager"));
+const WidgetFactory_1 = __importDefault(require("../widgets/WidgetFactory"));
+const LayerFactory_1 = __importDefault(require("./LayerFactory"));
+const MapBoundsCalculator_1 = __importDefault(require("./MapBoundsCalculator"));
+const DirectWidgetDataSource_1 = __importDefault(require("../widgets/DirectWidgetDataSource"));
+const compressJson_1 = __importDefault(require("../compressJson"));
+const querystring_1 = __importDefault(require("querystring"));
+const QuickfilterUtils = __importStar(require("../quickfilter/QuickfilterUtils"));
+const react_1 = require("react");
+const useStableCallback_1 = require("@mwater/react-library/lib/useStableCallback");
+class DirectMapDataSource {
+    options;
+    // Create map url source that uses direct jsonql maps
+    constructor(options) {
+        this.options = options;
+    }
+    // Gets the data source for a layer
+    getLayerDataSource(layerId) {
+        // Get layerView
+        const layerView = lodash_1.default.findWhere(this.options.design.layerViews, { id: layerId });
+        if (!layerView) {
+            throw new Error(`Layer ${layerId} not found`);
+        }
+        return new DirectLayerDataSource({ ...this.options, layerView });
+    }
+    // Gets the bounds for the map. Null for whole world. Callback as { n:, s:, w:, e: }
+    getBounds(design, filters, callback) {
+        return new MapBoundsCalculator_1.default(this.options.schema, this.options.dataSource).getBounds(design, filters, callback);
+    }
+    /** Gets the quickfilters data source */
+    getQuickfiltersDataSource() {
+        return {
+            getValues: (index, expr, filters, offset, limit, callback) => {
+                // Perform query
+                return QuickfilterUtils.findExprValues(expr, this.options.schema, this.options.dataSource, filters, offset, limit, callback);
+            }
+        };
+    }
+}
+exports.default = DirectMapDataSource;
+/**
+ * Fetches the URL for a vector tile source with an expiry time. For direct token access.
+ */
+async function getVectorTileFromDirectRequest(options) {
+    const { apiUrl, client, directTokenRequest } = options;
+    const response = await fetch(apiUrl + "vector_tiles/create_token/direct?client=" + (client || ""), {
+        method: "POST",
+        body: JSON.stringify(directTokenRequest),
+        headers: {
+            Accept: "application/json",
+            "Content-Type": "application/json"
+        }
+    });
+    if (!response.ok) {
+        throw new Error("Error getting tiles");
+    }
+    const { token, expires } = await response.json();
+    return { url: apiUrl + `vector_tiles/tiles/{z}/{x}/{y}?token=${token}`, expires };
+}
+/**
+ * React hook to get a direct URL for a vector tile source.
+ * The URL is fetched asynchronously and the hook returns the current URL.
+ * The URL is refreshed automatically when it expires.
+ * @param options The options for fetching the vector tile source.
+ * @returns The URL of the vector tile source, or null if it has not been fetched yet.
+ */
+function useDirectVectorTileUrl(options) {
+    const { apiUrl, client, directTokenRequest } = options;
+    const [url, setUrl] = (0, react_1.useState)(null);
+    const [expires, setExpires] = (0, react_1.useState)(null);
+    const fetchUrl = (0, useStableCallback_1.useStableCallback)(async () => {
+        const { url, expires } = await getVectorTileFromDirectRequest({
+            apiUrl,
+            client,
+            directTokenRequest,
+        });
+        setUrl(url);
+        setExpires(expires);
+    });
+    (0, react_1.useEffect)(() => {
+        fetchUrl();
+    }, [apiUrl, client, JSON.stringify(directTokenRequest)]);
+    // Refresh when expires
+    (0, react_1.useEffect)(() => {
+        if (expires) {
+            const expiryDate = new Date(expires).getTime();
+            const now = new Date().getTime();
+            const delay = expiryDate - now;
+            const timer = setTimeout(fetchUrl, delay);
+            return () => clearTimeout(timer);
+        }
+        return;
+    }, [expires]);
+    return url;
+}
+exports.useDirectVectorTileUrl = useDirectVectorTileUrl;
+class DirectLayerDataSource {
+    options;
+    // Create map url source that uses direct jsonql maps
+    // options:
+    //   schema: schema to use
+    //   dataSource: general data source
+    //   layerView: layerView to display
+    //   apiUrl: API url to use for talking to mWater server
+    //   client: client id to use for talking to mWater server
+    constructor(options) {
+        this.options = options;
+    }
+    /** 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 soruce on server is created after specified datetime
+     */
+    async getVectorTileUrl(layerDesign, filters, createdAfter) {
+        // Create layer
+        const layer = LayerFactory_1.default.createLayer(this.options.layerView.type);
+        // Put in opacity of 1 as it doesn't affect source data
+        const vectorTile = layer.getVectorTile(layerDesign, this.options.layerView.id, this.options.schema, filters, 1);
+        const directTokenRequest = {
+            layers: vectorTile.sourceLayers,
+            ctes: vectorTile.ctes,
+            minZoom: vectorTile.minZoom,
+            maxZoom: vectorTile.maxZoom,
+            createdAfter: createdAfter,
+            // 12 hours
+            expiresAfter: new Date(Date.now() + 1000 * 3600 * 12).toISOString()
+        };
+        const { url, expires } = await getVectorTileFromDirectRequest({
+            apiUrl: this.options.apiUrl,
+            client: this.options.client,
+            directTokenRequest,
+            createdAfter
+        });
+        return { url, expires };
+    }
+    // Get the url for the image 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
+    getTileUrl(design, filters) {
+        // Create layer
+        const layer = LayerFactory_1.default.createLayer(this.options.layerView.type);
+        // Handle special cases
+        if (this.options.layerView.type === "MWaterServer") {
+            return this.createLegacyUrl(design, "png", filters);
+        }
+        // If layer has tiles url directly available
+        if (layer.getLayerDefinitionType() === "TileUrl") {
+            return layer.getTileUrl(design, filters);
+        }
+        // Get JsonQLCss
+        const jsonqlCss = layer.getJsonQLCss(design, this.options.schema, filters);
+        return this.createUrl("png", jsonqlCss);
+    }
+    // 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) {
+        // Create layer
+        const layer = LayerFactory_1.default.createLayer(this.options.layerView.type);
+        // Handle special cases
+        if (this.options.layerView.type === "MWaterServer") {
+            return this.createLegacyUrl(design, "grid.json", filters);
+        }
+        // If layer has tiles url directly available
+        if (layer.getLayerDefinitionType() === "TileUrl") {
+            return layer.getUtfGridUrl(design, filters);
+        }
+        // Get JsonQLCss
+        const jsonqlCss = layer.getJsonQLCss(design, this.options.schema, filters);
+        return this.createUrl("grid.json", jsonqlCss);
+    }
+    // Gets widget data source for a popup widget
+    getPopupWidgetDataSource(design, widgetId) {
+        // Create layer
+        let type;
+        const layer = LayerFactory_1.default.createLayer(this.options.layerView.type);
+        ({ type, design } = new BlocksLayoutManager_1.default().getWidgetTypeAndDesign(design.popup.items, widgetId));
+        // Create widget
+        const widget = WidgetFactory_1.default.createWidget(type);
+        return new DirectWidgetDataSource_1.default({
+            widget,
+            schema: this.options.schema,
+            dataSource: this.options.dataSource,
+            apiUrl: this.options.apiUrl,
+            client: this.options.client
+        });
+    }
+    // Create query string
+    createUrl(extension, jsonqlCss) {
+        const query = {
+            type: "jsonql",
+            design: (0, compressJson_1.default)(jsonqlCss)
+        };
+        if (this.options.client) {
+            query.client = this.options.client;
+        }
+        // Make URL change when cache expired
+        const cacheExpiry = this.options.dataSource.getCacheExpiry();
+        if (cacheExpiry) {
+            query.cacheExpiry = cacheExpiry;
+        }
+        let url = `${this.options.apiUrl}maps/tiles/{z}/{x}/{y}.${extension}?` + querystring_1.default.stringify(query);
+        // Add subdomains: {s} will be substituted with "a", "b" or "c" in leaflet for api.mwater.co only.
+        // Used to speed queries
+        if (url.match(/^https:\/\/api\.mwater\.co\//)) {
+            url = url.replace(/^https:\/\/api\.mwater\.co\//, "https://{s}-api.mwater.co/");
+        }
+        return url;
+    }
+    // Create query string
+    createLegacyUrl(design, extension, filters) {
+        let where;
+        let url = `${this.options.apiUrl}maps/tiles/{z}/{x}/{y}.${extension}?type=${design.type}&radius=1000`;
+        // Add subdomains: {s} will be substituted with "a", "b" or "c" in leaflet for api.mwater.co only.
+        // Used to speed queries
+        if (url.match(/^https:\/\/api\.mwater\.co\//)) {
+            url = url.replace(/^https:\/\/api\.mwater\.co\//, "https://{s}-api.mwater.co/");
+        }
+        if (this.options.client) {
+            url += `&client=${this.options.client}`;
+        }
+        // Add where for any relevant filters
+        const relevantFilters = lodash_1.default.where(filters, { table: design.table });
+        // If any, create and
+        const whereClauses = lodash_1.default.map(relevantFilters, (f) => (0, expressions_1.injectTableAlias)(f.jsonql, "main"));
+        // Wrap if multiple
+        if (whereClauses.length > 1) {
+            where = { type: "op", op: "and", exprs: whereClauses };
+        }
+        else {
+            where = whereClauses[0];
+        }
+        if (where) {
+            url += "&where=" + encodeURIComponent((0, compressJson_1.default)(where));
+        }
+        return url;
+    }
+}

package/lib/maps/EditHoverOver.d.ts

@@ -0,0 +1,18 @@
+import { DataSource, Schema } from "@mwater/expressions";
+import React from "react";
+export interface EditHoverOverProps {
+    /** Schema to use */
+    schema: Schema;
+    dataSource: DataSource;
+    /** Design of the marker layer */
+    design: any;
+    /** Called with new design */
+    onDesignChange: any;
+    /** Table that popup is for */
+    table: string;
+    /** Table of the row that join is to. Usually same as table except for choropleth maps */
+    idTable: string;
+    defaultPopupFilterJoins: any;
+}
+declare const EditHoverOver: React.FC<EditHoverOverProps>;
+export default EditHoverOver;

package/lib/maps/EditHoverOver.js

@@ -0,0 +1,88 @@
+"use strict";
+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 };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const lodash_1 = require("lodash");
+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 ui = __importStar(require("@mwater/react-library/lib/bootstrap"));
+const uuid_1 = __importDefault(require("uuid"));
+const EditHoverOver = props => {
+    const [editing, setEditing] = (0, react_1.useState)(false);
+    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 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);
+    };
+    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);
+    };
+    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("span", { className: "fa fa-pencil" }),
+            " Customize Hoverover"),
+        props.design.hoverOver && (react_1.default.createElement("button", { className: "btn btn-link", onClick: handleRemovePopup },
+            react_1.default.createElement("span", { className: "fa fa-times" }),
+            " 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" },
+                react_1.default.createElement("thead", null,
+                    react_1.default.createElement("tr", null,
+                        react_1.default.createElement("th", null, "Label"),
+                        react_1.default.createElement("th", null, "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" }),
+                "Add item"))))));
+};
+const HoverOverItemEditor = ({ schema, dataSource, table, item, onItemChange, onItemDelete }) => {
+    return (react_1.default.createElement("tr", null,
+        react_1.default.createElement("td", null,
+            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(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("button", { className: "btn btn-link", onClick: () => onItemDelete(item) },
+                react_1.default.createElement("span", { className: "fa fa-close" })))));
+};
+exports.default = EditHoverOver;

package/lib/maps/EditPopupComponent.d.ts

@@ -0,0 +1,26 @@
+import React from "react";
+import { DataSource, Schema } from "@mwater/expressions";
+export interface EditPopupComponentProps {
+    /** Schema to use */
+    schema: Schema;
+    dataSource: DataSource;
+    /** Design of the marker layer */
+    design: any;
+    /** Called with new design */
+    onDesignChange: any;
+    /** Table that popup is for */
+    table: string;
+    /** Table of the row that join is to. Usually same as table except for choropleth maps */
+    idTable: string;
+    defaultPopupFilterJoins: any;
+}
+interface EditPopupComponentState {
+    editing: any;
+}
+export default class EditPopupComponent extends React.Component<EditPopupComponentProps, EditPopupComponentState> {
+    constructor(props: any);
+    handleItemsChange: (items: any) => any;
+    handleRemovePopup: () => any;
+    render(): React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+}
+export {};

package/lib/maps/EditPopupComponent.js

@@ -0,0 +1,75 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const lodash_1 = __importDefault(require("lodash"));
+const react_1 = __importDefault(require("react"));
+const R = react_1.default.createElement;
+const ModalWindowComponent_1 = __importDefault(require("@mwater/react-library/lib/ModalWindowComponent"));
+const BlocksLayoutManager_1 = __importDefault(require("../layouts/blocks/BlocksLayoutManager"));
+const WidgetFactory_1 = __importDefault(require("../widgets/WidgetFactory"));
+const DirectWidgetDataSource_1 = __importDefault(require("../widgets/DirectWidgetDataSource"));
+const PopupFilterJoinsEditComponent_1 = __importDefault(require("./PopupFilterJoinsEditComponent"));
+// Modal for editing design of popup
+class EditPopupComponent extends react_1.default.Component {
+    constructor(props) {
+        super(props);
+        this.state = { editing: false };
+    }
+    handleItemsChange = (items) => {
+        let popup = this.props.design.popup || {};
+        popup = lodash_1.default.extend({}, popup, { items });
+        const design = lodash_1.default.extend({}, this.props.design, { popup });
+        return this.props.onDesignChange(design);
+    };
+    handleRemovePopup = () => {
+        const design = lodash_1.default.omit(this.props.design, "popup");
+        return this.props.onDesignChange(design);
+    };
+    render() {
+        return R("div", null, R("a", { className: "btn btn-link", onClick: () => this.setState({ editing: true }) }, R("i", { className: "fa fa-pencil" }), " Customize Popup"), this.props.design.popup
+            ? R("a", { className: "btn btn-link", onClick: this.handleRemovePopup }, R("i", { className: "fa fa-times" }), " Remove Popup")
+            : undefined, this.props.design.popup
+            ? R(PopupFilterJoinsEditComponent_1.default, {
+                schema: this.props.schema,
+                dataSource: this.props.dataSource,
+                table: this.props.table,
+                idTable: this.props.idTable,
+                defaultPopupFilterJoins: this.props.defaultPopupFilterJoins,
+                popup: this.props.design.popup,
+                design: this.props.design.popupFilterJoins,
+                onDesignChange: (popupFilterJoins) => this.props.onDesignChange(lodash_1.default.extend({}, this.props.design, { popupFilterJoins }))
+            })
+            : undefined, this.state.editing
+            ? R(ModalWindowComponent_1.default, { isOpen: true, onRequestClose: () => this.setState({ editing: false }) }, new BlocksLayoutManager_1.default().renderLayout({
+                items: this.props.design.popup?.items,
+                style: "popup",
+                onItemsChange: this.handleItemsChange,
+                disableMaps: true,
+                renderWidget: (options) => {
+                    const widget = WidgetFactory_1.default.createWidget(options.type);
+                    const widgetDataSource = new DirectWidgetDataSource_1.default({
+                        widget,
+                        schema: this.props.schema,
+                        dataSource: this.props.dataSource
+                    });
+                    return widget.createViewElement({
+                        schema: this.props.schema,
+                        dataSource: this.props.dataSource,
+                        widgetDataSource,
+                        design: options.design,
+                        scope: null,
+                        filters: [],
+                        onScopeChange: () => { },
+                        onDesignChange: options.onDesignChange,
+                        width: options.width,
+                        height: options.height,
+                        singleRowTable: this.props.table
+                    });
+                }
+            }))
+            : undefined);
+    }
+}
+exports.default = EditPopupComponent;

package/lib/maps/Grid Functions.sql

@@ -0,0 +1,167 @@
+/* Set of functions in PostgreSQL to convert from hex/square coordinates to xy and to make hexagons/squares */
+
+/* Convert a column (q) and row (r) of hex coordinates to the center point. Size is distance from center to point */
+create or replace function mwater_hex_qr_to_xy (q integer, r integer, size numeric) 
+   returns table(x double precision, y double precision)
+as $$
+begin
+   return query select (size * 3.0/2 * q)::double precision as x, (size * sqrt(3) * (r + 0.5 * (mod(q,2))))::double precision as y;
+end; $$ 
+language 'plpgsql';
+
+/* Convert a column (q) and row (r) of square grid coordinates to the center point. Size is distance from center to center */
+create or replace function mwater_square_qr_to_xy (q integer, r integer, size numeric) 
+   returns table(x double precision, y double precision)
+as $$
+begin
+   return query select (size * q)::double precision as x, (size * r)::double precision as y;
+end; $$ 
+language 'plpgsql';
+
+/* Convert an x, y point to hex row (r) and column (q) https://www.redblobgames.com/grids/hexagons/#rounding */
+create or replace function mwater_hex_xy_to_qr (x double precision, y double precision, size numeric) 
+  returns table(q integer, r integer)
+as $$
+declare 
+  q double precision;
+  r double precision;
+  cx double precision;
+  cy double precision;
+  cz double precision;
+  rx integer;
+  ry integer;
+  rz integer;
+  x_diff double precision;
+  y_diff double precision;
+  z_diff double precision;
+begin
+  q := (2.0/3 * x)/size;
+  /* r := (-1.0/3 * x + sqrt(3)/3 * y)/size; */
+  r := (-1.0/3 * x + 0.577350269 * y)/size;
+
+  cx := q;
+  cy := -q-r;
+  cz := r;
+
+  rx := round(cx);
+  ry := round(cy);
+  rz := round(cz);
+
+  x_diff := abs(rx - cx);
+  y_diff := abs(ry - cy);
+  z_diff := abs(rz - cz);
+
+  if x_diff > y_diff and x_diff > z_diff then
+    rx := -ry-rz;
+  elsif y_diff > z_diff then
+    ry := -rx-rz;
+  else
+    rz := -rx-ry;
+  end if;
+
+  return query select rx as q, rz + (rx - mod(rx, 2)) / 2 as r;
+end; $$ 
+language 'plpgsql';
+
+/* Convert an x, y point to square row (r) and column (q)*/
+create or replace function mwater_square_xy_to_qr (x double precision, y double precision, size numeric) 
+  returns table(q integer, r integer)
+as $$
+begin
+  return query select round(x/size)::integer as q, round(y/size)::integer as r;
+end; $$ 
+language 'plpgsql';
+
+/* Make a hexagon at column q and row r */
+create or replace function mwater_hex_make (q integer, r integer, size decimal) 
+  returns geometry
+as $$
+declare 
+  xy record;
+  p1 geometry;
+  p2 geometry;
+  p3 geometry;
+  p4 geometry;
+  p5 geometry;
+  p6 geometry;
+begin
+  /* Find center point */
+  xy := mwater_hex_qr_to_xy(q, r, size);
+
+  /* Make points of corners */
+  p1 := ST_SetSRID(ST_MakePoint(xy.x + size * 1, xy.y + size * 0), 3857);
+  p2 := ST_SetSRID(ST_MakePoint(xy.x + size * 0.5, xy.y + size * 0.866025403784439), 3857);
+  p3 := ST_SetSRID(ST_MakePoint(xy.x + size * -0.5, xy.y + size * 0.866025403784439), 3857);
+  p4 := ST_SetSRID(ST_MakePoint(xy.x + size * -1, xy.y + size * 0), 3857);
+  p5 := ST_SetSRID(ST_MakePoint(xy.x + size * -0.5, xy.y + size * -0.866025403784438), 3857);
+  p6 := ST_SetSRID(ST_MakePoint(xy.x + size * 0.5, xy.y + size * -0.866025403784439), 3857);
+
+  /* Convert to polygon */
+  return ST_MakePolygon(ST_MakeLine(ARRAY[p1, p2, p3, p4, p5, p6, p1]));
+end; $$ 
+language 'plpgsql';
+
+/* Make a square at column q and row r */
+create or replace function mwater_square_make (q integer, r integer, size decimal) 
+  returns geometry
+as $$
+declare 
+  xy record;
+  p1 geometry;
+  p2 geometry;
+  p3 geometry;
+  p4 geometry;
+begin
+  /* Find center point */
+  xy := mwater_square_qr_to_xy(q, r, size);
+
+  /* Make points of corners */
+  p1 := ST_SetSRID(ST_MakePoint(xy.x + size * 0.5, xy.y + size * 0.5), 3857);
+  p2 := ST_SetSRID(ST_MakePoint(xy.x + size * 0.5, xy.y - size * 0.5), 3857);
+  p3 := ST_SetSRID(ST_MakePoint(xy.x - size * 0.5, xy.y - size * 0.5), 3857);
+  p4 := ST_SetSRID(ST_MakePoint(xy.x - size * 0.5, xy.y + size * 0.5), 3857);
+
+  /* Convert to polygon */
+  return ST_MakePolygon(ST_MakeLine(ARRAY[p1, p2, p3, p4, p1]));
+end; $$ 
+language 'plpgsql';
+
+/* Create a grid of hexagons that fill the extent (and a bit more) */
+create or replace function mwater_hex_grid (extent geometry, size decimal) 
+   returns table (
+      q int,
+      r int
+   ) 
+as $$
+declare 
+  minqr record;
+  maxqr record;
+begin
+  /* Get top left corner q and r */
+  minqr := mwater_hex_xy_to_qr(st_xmin(extent), st_ymin(extent), size);
+  maxqr := mwater_hex_xy_to_qr(st_xmax(extent), st_ymax(extent), size);
+
+  /* Generate grid (with padding) */
+  return query select qseries as q, rseries as r from generate_series(minqr.q - 2, maxqr.q + 2) as qseries, generate_series(minqr.r - 2, maxqr.r + 2) as rseries;
+end; $$ 
+language 'plpgsql';
+
+/* Create a grid of squares that fill the extent (and a bit more) */
+create or replace function mwater_square_grid (extent geometry, size decimal) 
+   returns table (
+      q int,
+      r int
+   ) 
+as $$
+declare 
+  minqr record;
+  maxqr record;
+begin
+  /* Get top left corner q and r */
+  minqr := mwater_square_xy_to_qr(st_xmin(extent), st_ymin(extent), size);
+  maxqr := mwater_square_xy_to_qr(st_xmax(extent), st_ymax(extent), size);
+
+  /* Generate grid (with padding) */
+  return query select qseries as q, rseries as r from generate_series(minqr.q - 1, maxqr.q + 1) as qseries, generate_series(minqr.r - 1, maxqr.r + 1) as rseries;
+end; $$ 
+language 'plpgsql';