@mwater/visualization 5.0.0

package/lib/maps/ServerMapDataSource.d.ts

@@ -0,0 +1,86 @@
+/// <reference types="jquery" />
+import { DataSource, Expr, Schema } from "@mwater/expressions";
+import { JsonQLFilter } from "../JsonQLFilter";
+import { MapDesign, MapLayerView } from "./MapDesign";
+import { MapDataSource } from "./MapDataSource";
+import { MapLayerDataSource } from "./MapLayerDataSource";
+import { WidgetDataSource } from "../widgets/WidgetDataSource";
+import { QuickfiltersDataSource } from "../quickfilter/QuickfiltersDataSource";
+interface ServerMapDataSourceOptions {
+    /** schema to use */
+    schema: Schema;
+    /** data source to use */
+    dataSource: DataSource;
+    /** design of entire map */
+    design: MapDesign;
+    /** share id to use for talking to mWater server */
+    share?: string;
+    /** API url to use for talking to mWater server */
+    apiUrl: string;
+    /** client id to use for talking to mWater server */
+    client?: string;
+    /** map id to use on server */
+    mapId: string;
+    /** revision to use to allow caching */
+    rev: string;
+}
+interface ServerMapLayerDataSourceOptions extends ServerMapDataSourceOptions {
+    layerView: MapLayerView;
+}
+/** Get map urls for map stored on server */
+export default class ServerMapDataSource implements MapDataSource {
+    options: ServerMapDataSourceOptions;
+    constructor(options: ServerMapDataSourceOptions);
+    getLayerDataSource(layerId: string): ServerLayerDataSource;
+    getBounds(design: MapDesign, filters: JsonQLFilter[], callback: (error: any, bounds?: {
+        w: number;
+        n: number;
+        e: number;
+        s: number;
+    } | null) => void): void;
+    getQuickfiltersDataSource(): ServerQuickfilterDataSource;
+}
+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
+     */
+    getVectorTileUrl(layerDesign: any, filters: JsonQLFilter[], createdAfter: string): Promise<{
+        url: string;
+        expires: string;
+    }>;
+    getPopupWidgetDataSource(design: any, widgetId: string): ServerMapLayerPopupWidgetDataSource;
+    createUrl(filters: JsonQLFilter[], extension: string): string;
+    createLegacyUrl(design: any, extension: string, filters: JsonQLFilter[]): string;
+}
+interface ServerMapLayerPopupWidgetDataSourceOptions {
+    /** API url to use for talking to mWater server */
+    apiUrl: string;
+    /** client id to use for talking to mWater server */
+    client?: string;
+    /** share id to use for talking to mWater server */
+    share?: string;
+    /** map id to use on server */
+    mapId: string;
+    /** revision to use to allow caching */
+    rev: string;
+    /** Layer id to use */
+    layerId: string;
+    /** Popup widget id to use */
+    popupWidgetId: string;
+}
+declare class ServerMapLayerPopupWidgetDataSource implements WidgetDataSource {
+    options: ServerMapLayerPopupWidgetDataSourceOptions;
+    constructor(options: ServerMapLayerPopupWidgetDataSourceOptions);
+    getData(design: any, filters: JsonQLFilter[], callback: (error: any, data?: any) => void): JQuery.jqXHR<any>;
+    getImageUrl(imageId: string, height?: number): string;
+}
+declare class ServerQuickfilterDataSource implements QuickfiltersDataSource {
+    options: ServerMapDataSourceOptions;
+    constructor(options: ServerMapDataSourceOptions);
+    getValues(index: number, expr: Expr, filters: JsonQLFilter[], offset: number, limit: number, callback: (error: any, values?: any[]) => void): void;
+}
+export {};

package/lib/maps/ServerMapDataSource.js

@@ -0,0 +1,273 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const expressions_1 = require("@mwater/expressions");
+const compressJson_1 = __importDefault(require("../compressJson"));
+const querystring_1 = __importDefault(require("querystring"));
+const jquery_1 = __importDefault(require("jquery"));
+const lodash_1 = __importDefault(require("lodash"));
+const LayerFactory_1 = __importDefault(require("./LayerFactory"));
+/** Get map urls for map stored on server */
+class ServerMapDataSource {
+    options;
+    // Create map url source that uses map design stored on server
+    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 not found");
+        }
+        return new ServerLayerDataSource({ ...this.options, layerView });
+    }
+    // Gets the bounds for the map. Null for no opinion. Callback as { n:, s:, w:, e: }
+    getBounds(design, filters, callback) {
+        const query = {
+            client: this.options.client,
+            share: this.options.share,
+            filters: (0, compressJson_1.default)(filters),
+            rev: this.options.rev
+        };
+        const url = this.options.apiUrl + `maps/${this.options.mapId}/bounds?` + querystring_1.default.stringify(query);
+        jquery_1.default.getJSON(url, (data) => {
+            return callback(null, data);
+        }).fail((xhr) => {
+            console.log(xhr.responseText);
+            return callback(new Error(xhr.responseText));
+        });
+    }
+    getQuickfiltersDataSource() {
+        return new ServerQuickfilterDataSource(this.options);
+    }
+}
+exports.default = ServerMapDataSource;
+class ServerLayerDataSource {
+    options;
+    // Create map url source that uses map design stored on server
+    // options:
+    //   apiUrl: API url to use for talking to mWater server
+    //   client: client id to use for talking to mWater server
+    //   design: design of entire map
+    //   schema: schema to use
+    //   share: share id to use for talking to mWater server
+    //   mapId: map id to use on server
+    //   rev: revision to use to allow caching
+    //   layerView: layer view
+    constructor(options) {
+        this.options = options;
+    }
+    // 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) {
+        // Handle special cases
+        if (this.options.layerView.type === "MWaterServer") {
+            return this.createLegacyUrl(design, "png", 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.getTileUrl(this.options.layerView.design, filters);
+        }
+        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
+     */
+    async getVectorTileUrl(layerDesign, filters, createdAfter) {
+        const qs = querystring_1.default.stringify({
+            client: this.options.client,
+            share: this.options.share
+        });
+        const url = `${this.options.apiUrl}vector_tiles/create_token/maps/${this.options.mapId}/layers/${this.options.layerView.id}?${qs}`;
+        const request = {
+            createdAfter: createdAfter,
+            // 12 hours
+            expiresAfter: new Date(Date.now() + 1000 * 3600 * 12).toISOString(),
+            filters: (0, compressJson_1.default)(filters || [])
+        };
+        const response = await fetch(url, {
+            method: "POST",
+            body: JSON.stringify(request),
+            headers: {
+                Accept: "application/json",
+                "Content-Type": "application/json"
+            }
+        });
+        if (!response.ok) {
+            throw new Error("Error getting tiles token");
+        }
+        const { token, expires } = await response.json();
+        return { url: this.options.apiUrl + `vector_tiles/tiles/{z}/{x}/{y}?token=${token}`, expires };
+    }
+    // Gets widget data source for a popup widget
+    getPopupWidgetDataSource(design, widgetId) {
+        return new ServerMapLayerPopupWidgetDataSource({
+            apiUrl: this.options.apiUrl,
+            client: this.options.client,
+            share: this.options.share,
+            mapId: this.options.mapId,
+            rev: this.options.rev,
+            layerId: this.options.layerView.id,
+            popupWidgetId: widgetId
+        });
+    }
+    createUrl(filters, extension) {
+        const query = {
+            type: "maps",
+            client: this.options.client,
+            share: this.options.share,
+            map: this.options.mapId,
+            layer: this.options.layerView.id,
+            filters: (0, compressJson_1.default)(filters || []),
+            rev: this.options.rev
+        };
+        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}`;
+        }
+        if (this.options.share) {
+            url += `&share=${this.options.share}`;
+        }
+        // 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;
+    }
+}
+class ServerMapLayerPopupWidgetDataSource {
+    options;
+    // options:
+    //   apiUrl: API url to use for talking to mWater server
+    //   client: client id to use for talking to mWater server
+    //   share: share id to use for talking to mWater server
+    //   mapId: map id to use on server
+    //   rev: revision to use to allow caching
+    //   layerId: layer id to use
+    //   popupWidgetId: id of popup widget
+    constructor(options) {
+        this.options = options;
+    }
+    // Get the data that the widget needs. The widget should implement getData method (see above) to get the actual data on the server
+    //  filters: array of filters to apply. Each is { table: table id, jsonql: jsonql condition with {alias} for tableAlias. Use injectAlias to correct
+    //  callback: (error, data)
+    getData(design, filters, callback) {
+        const query = {
+            client: this.options.client,
+            share: this.options.share,
+            filters: (0, compressJson_1.default)(filters),
+            rev: this.options.rev
+        };
+        const url = this.options.apiUrl +
+            `maps/${this.options.mapId}/layers/${this.options.layerId}/widgets/${this.options.popupWidgetId}/data?` +
+            querystring_1.default.stringify(query);
+        return jquery_1.default.getJSON(url, (data) => {
+            return callback(null, data);
+        }).fail((xhr) => {
+            console.log(xhr.responseText);
+            return callback(new Error(xhr.responseText));
+        });
+    }
+    // Get the url to download an image (by id from an image or imagelist column)
+    // Height, if specified, is minimum height needed. May return larger image
+    getImageUrl(imageId, height) {
+        let url = this.options.apiUrl + `images/${imageId}`;
+        if (height) {
+            url += `?h=${height}`;
+        }
+        return url;
+    }
+}
+class ServerQuickfilterDataSource {
+    options;
+    // options:
+    //   apiUrl: API url to use for talking to mWater server
+    //   client: client id to use for talking to mWater server
+    //   share: share id to use for talking to mWater server
+    //   dashboardId: dashboard id to use on server
+    //   dataSource: data source that is used for determining cache expiry
+    //   rev: revision to use to allow caching
+    constructor(options) {
+        this.options = options;
+    }
+    // Gets the values of the quickfilter at index
+    getValues(index, expr, filters, offset, limit, callback) {
+        const query = {
+            client: this.options.client,
+            share: this.options.share,
+            filters: (0, compressJson_1.default)(filters),
+            offset,
+            limit,
+            rev: this.options.rev
+        };
+        const url = this.options.apiUrl +
+            `maps/${this.options.mapId}/quickfilters/${index}/values?` +
+            querystring_1.default.stringify(query);
+        const headers = {};
+        const cacheExpiry = this.options.dataSource.getCacheExpiry();
+        if (cacheExpiry) {
+            const seconds = Math.floor((new Date().getTime() - cacheExpiry) / 1000);
+            headers["Cache-Control"] = `max-age=${seconds}`;
+        }
+        jquery_1.default.ajax({
+            dataType: "json",
+            method: "GET",
+            url,
+            headers
+        })
+            .done((data) => {
+            return callback(null, data);
+        })
+            .fail((xhr) => {
+            console.log(xhr.responseText);
+            return callback(new Error(xhr.responseText));
+        });
+    }
+}

package/lib/maps/SwitchableTileUrlLayer.d.ts

@@ -0,0 +1,53 @@
+import Layer from "./Layer";
+import { Schema, DataSource } from "@mwater/expressions";
+import { JsonQLFilter } from "../index";
+import React from "react";
+/**
+ * Layer that is composed of multiple tile urls that can be switched between
+ * Loads legend from the server as well
+ */
+export interface SwitchableTileUrlLayerDesign {
+    options: SwitchableOption[];
+    /** id of active option */
+    activeOption: string;
+    /** Minimum zoom level allowed */
+    minZoom?: number;
+    /** Maximum zoom level allowed */
+    maxZoom?: number;
+    /** Optional note to display */
+    note?: string;
+}
+/** One option that can be selected with its own urls */
+interface SwitchableOption {
+    /** Unique id of the option */
+    id: string;
+    /** Name of the option */
+    name: string;
+    /** Url with {z}, {x}, {y} included to get tiles */
+    tileUrl?: string;
+    /** Url with {z}, {x}, {y} included to get utf grid tiles */
+    utfGridUrl?: string;
+    /** Url to get legend html from. {name} will be replaced with url-encoded name of layer */
+    legendUrl?: string;
+}
+/** Layer that has multiple tile urls that it can display. Switchable but not editable */
+export default class SwitchableTileUrlLayer extends Layer<SwitchableTileUrlLayerDesign> {
+    getLayerDefinitionType(): "TileUrl";
+    getMinZoom(design: SwitchableTileUrlLayerDesign): number | null;
+    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(design: SwitchableTileUrlLayerDesign, schema: Schema, name: string, dataSource: DataSource, locale: string, filters: JsonQLFilter[]): React.JSX.Element | null;
+    /** True if layer can be edited */
+    isEditable(): boolean;
+    createDesignerElement(options: {
+        design: SwitchableTileUrlLayerDesign;
+        schema: Schema;
+        dataSource: DataSource;
+        onDesignChange: (design: SwitchableTileUrlLayerDesign) => void;
+        filters: JsonQLFilter[];
+    }): React.ReactElement<{}>;
+}
+export {};

package/lib/maps/SwitchableTileUrlLayer.js

@@ -0,0 +1,69 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const Layer_1 = __importDefault(require("./Layer"));
+const react_1 = __importDefault(require("react"));
+const HtmlUrlLegend_1 = require("./HtmlUrlLegend");
+/** Layer that has multiple tile urls that it can display. Switchable but not editable */
+class SwitchableTileUrlLayer extends Layer_1.default {
+    getLayerDefinitionType() {
+        return "TileUrl";
+    }
+    getMinZoom(design) {
+        return design.minZoom || null;
+    }
+    getMaxZoom(design) {
+        return design.maxZoom || 21;
+    }
+    /** Gets the tile url for definition type "TileUrl" */
+    getTileUrl(design, filters) {
+        // Find active option
+        const option = design.options.find((d) => d.id === design.activeOption);
+        if (!option) {
+            return null;
+        }
+        return option.tileUrl || null;
+    }
+    /** Gets the utf grid url for definition type "TileUrl" */
+    getUtfGridUrl(design, filters) {
+        // Find active option
+        const option = design.options.find((d) => d.id === design.activeOption);
+        if (!option) {
+            return null;
+        }
+        return option.utfGridUrl || null;
+    }
+    getLegend(design, schema, name, dataSource, locale, filters) {
+        // Find active option
+        const option = design.options.find((d) => d.id === design.activeOption);
+        if (!option || !option.legendUrl) {
+            return null;
+        }
+        const url = option.legendUrl.replace(/\{name\}/, encodeURIComponent(name));
+        return react_1.default.createElement(HtmlUrlLegend_1.HtmlUrlLegend, { url: url });
+    }
+    /** True if layer can be edited */
+    isEditable() {
+        return true;
+    }
+    // Creates a design element with specified options
+    // options:
+    //   design: design of layer
+    //   schema: schema to use
+    //   dataSource: data source to use
+    //   onDesignChange: function called when design changes
+    //   filters: array of filters
+    createDesignerElement(options) {
+        // Require here to prevent server require problems
+        const SwitchableTileUrlLayerDesigner = require("./SwitchableTileUrlLayerDesigner").default;
+        return react_1.default.createElement(SwitchableTileUrlLayerDesigner, {
+            design: options.design,
+            onDesignChange: (design) => {
+                return options.onDesignChange(design);
+            }
+        });
+    }
+}
+exports.default = SwitchableTileUrlLayer;

package/lib/maps/SwitchableTileUrlLayerDesigner.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+import { JsonQLFilter } from "../index";
+import { SwitchableTileUrlLayerDesign } from "./SwitchableTileUrlLayer";
+/** Designer for a switchable tile url layer */
+export default class SwitchableTileUrlLayerDesigner extends React.Component<{
+    design: SwitchableTileUrlLayerDesign;
+    onDesignChange: (design: SwitchableTileUrlLayerDesign) => void;
+    /** array of filters to apply. Each is { table: table id, jsonql: jsonql condition with {alias} for tableAlias. Use injectAlias to correct */
+    filters: JsonQLFilter[];
+}> {
+    update(mutation: (d: SwitchableTileUrlLayerDesign) => void): void;
+    handleChange: (activeOption: string) => void;
+    render(): React.JSX.Element;
+}

package/lib/maps/SwitchableTileUrlLayerDesigner.js

@@ -0,0 +1,26 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const R = react_1.default.createElement;
+const immer_1 = require("immer");
+const bootstrap_1 = require("@mwater/react-library/lib/bootstrap");
+/** Designer for a switchable tile url layer */
+class SwitchableTileUrlLayerDesigner extends react_1.default.Component {
+    update(mutation) {
+        this.props.onDesignChange((0, immer_1.produce)(this.props.design, mutation));
+    }
+    handleChange = (activeOption) => {
+        this.props.onDesignChange({ ...this.props.design, activeOption: activeOption });
+    };
+    render() {
+        return (react_1.default.createElement("div", null,
+            react_1.default.createElement("div", { className: "text-muted", style: { paddingBottom: 5 } }, this.props.design.note),
+            this.props.design.options.map((opt) => {
+                return (react_1.default.createElement(bootstrap_1.Radio, { key: opt.id, value: this.props.design.activeOption, radioValue: opt.id, onChange: this.handleChange, inline: false }, opt.name));
+            })));
+    }
+}
+exports.default = SwitchableTileUrlLayerDesigner;

package/lib/maps/TileUrlLayer.d.ts

@@ -0,0 +1,40 @@
+import React from "react";
+import Layer from "./Layer";
+import { DataSource, Schema } from "@mwater/expressions";
+import { JsonQLFilter } from "../JsonQLFilter";
+export interface TileUrlLayerDesign {
+    /** Url with {s}, {z}, {x}, {y} */
+    tileUrl: string;
+    /** optional min zoom level */
+    minZoom?: number;
+    /** optional max zoom level */
+    maxZoom?: number;
+    /** if true, hides url and prevents editing */
+    readonly?: boolean;
+    /** Url to get legend html from. */
+    legendUrl?: string;
+}
+export default class TileUrlLayer extends Layer<TileUrlLayerDesign> {
+    getLayerDefinitionType(): "TileUrl";
+    getTileUrl(design: any, filters: any): any;
+    getUtfGridUrl(design: any, filters: any): null;
+    getMinZoom(design: any): any;
+    getMaxZoom(design: any): any;
+    isEditable(): boolean;
+    isIncomplete(design: any, schema: Schema): boolean;
+    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;
+}
+interface TileUrlLayerDesignerComponentProps {
+    /** Design of the marker layer */
+    design: TileUrlLayerDesign;
+    onDesignChange: (design: TileUrlLayerDesign) => void;
+}
+declare class TileUrlLayerDesignerComponent extends React.Component<TileUrlLayerDesignerComponentProps> {
+    handleTileUrlChange: (tileUrl: string) => void;
+    handleLegendUrlChange: (legendUrl: string) => void;
+    render(): React.JSX.Element | null;
+}
+export {};

package/lib/maps/TileUrlLayer.js

@@ -0,0 +1,96 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const R = react_1.default.createElement;
+const Layer_1 = __importDefault(require("./Layer"));
+const HtmlUrlLegend_1 = require("./HtmlUrlLegend");
+const bootstrap_1 = require("@mwater/react-library/lib/bootstrap");
+/*
+Layer that is a custom Leaflet-style url tile layer
+Design is:
+  tileUrl:
+  minZoom:
+  maxZoom: optional max zoom level
+  readonly:
+  legendUrl:
+*/
+class TileUrlLayer extends Layer_1.default {
+    // Gets the type of layer definition ("JsonQLCss"/"TileUrl")
+    getLayerDefinitionType() {
+        return "TileUrl";
+    }
+    // Gets the tile url for definition type "TileUrl"
+    getTileUrl(design, filters) {
+        return design.tileUrl;
+    }
+    // Gets the utf grid url for definition type "TileUrl"
+    getUtfGridUrl(design, filters) {
+        return null;
+    }
+    // Get min and max zoom levels
+    getMinZoom(design) {
+        return design.minZoom;
+    }
+    getMaxZoom(design) {
+        return design.maxZoom;
+    }
+    // True if layer can be edited
+    isEditable() {
+        return true;
+    }
+    // True if layer is incomplete (e.g. brand new) and should be editable immediately
+    isIncomplete(design, schema) {
+        return this.validateDesign(this.cleanDesign(design, schema), schema) != null;
+    }
+    getLegend(design, schema, name, dataSource, locale, filters) {
+        // Find active option
+        if (!design.legendUrl) {
+            return null;
+        }
+        return react_1.default.createElement(HtmlUrlLegend_1.HtmlUrlLegend, { url: design.legendUrl });
+    }
+    // Creates a design element with specified options.
+    // Design should be cleaned on the way in and on way out.
+    // options:
+    //   design: design of layer
+    //   schema: schema to use
+    //   dataSource: data source to use
+    //   onDesignChange: function called when design changes
+    createDesignerElement(options) {
+        return R(TileUrlLayerDesignerComponent, { design: options.design, onDesignChange: options.onDesignChange });
+    }
+    // Returns a cleaned design
+    cleanDesign(design, schema) {
+        return design;
+    }
+    // Validates design. Null if ok, message otherwise
+    validateDesign(design, schema) {
+        if (!design.tileUrl) {
+            return "Missing Url";
+        }
+        return null;
+    }
+}
+exports.default = TileUrlLayer;
+class TileUrlLayerDesignerComponent extends react_1.default.Component {
+    handleTileUrlChange = (tileUrl) => {
+        return this.props.onDesignChange({ ...this.props.design, tileUrl });
+    };
+    handleLegendUrlChange = (legendUrl) => {
+        return this.props.onDesignChange({ ...this.props.design, legendUrl });
+    };
+    render() {
+        // Readonly is non-editable and shows only description
+        if (this.props.design.readonly) {
+            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.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.TextInput, { value: this.props.design.legendUrl || "", onChange: this.handleLegendUrlChange })));
+    }
+}

package/lib/maps/UtfGridLayer.d.ts

@@ -0,0 +1 @@
+export {};