@mwater/visualization 5.0.0

package/lib/maps/AdminScopeAndDetailLevelComponent.js

@@ -0,0 +1,59 @@
+"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 RegionSelectComponent_1 = __importDefault(require("./RegionSelectComponent"));
+const DetailLevelSelectComponent_1 = __importDefault(require("./DetailLevelSelectComponent"));
+const react_select_1 = __importDefault(require("react-select"));
+// Scope and detail level setter for AdminChoropleth layers when using admin_regions
+class AdminScopeAndDetailLevelComponent extends react_1.default.Component {
+    handleScopeChange = (scope, scopeLevel) => {
+        if (scope) {
+            // Detail level will be set by DetailLevelSelectComponent
+            this.props.onScopeAndDetailLevelChange(scope, scopeLevel, null);
+        }
+        else {
+            this.props.onScopeAndDetailLevelChange(null, null, 0);
+        }
+    };
+    handleDetailLevelChange = (detailLevel) => {
+        this.props.onScopeAndDetailLevelChange(this.props.scope ?? null, this.props.scopeLevel ?? null, detailLevel);
+    };
+    render() {
+        const basicDetailLevelOptions = [
+            { value: 0, label: "Countries" },
+            { value: 1, label: "Level 1 (State/Province/District)" }
+        ];
+        return R("div", null, R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, "Region to Map"), R(RegionSelectComponent_1.default, {
+            region: this.props.scope,
+            onChange: this.handleScopeChange,
+            schema: this.props.schema,
+            dataSource: this.props.dataSource
+        })), (() => {
+            if (this.props.scope != null && this.props.detailLevel != null) {
+                return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, "Detail Level"), R(DetailLevelSelectComponent_1.default, {
+                    scope: this.props.scope,
+                    scopeLevel: this.props.scopeLevel,
+                    detailLevel: this.props.detailLevel,
+                    onChange: this.handleDetailLevelChange,
+                    schema: this.props.schema,
+                    dataSource: this.props.dataSource
+                }));
+            }
+            else if (this.props.scope == null && this.props.detailLevel != null) {
+                // Case of whole world. Allow selecting country or admin level 1
+                return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, "Detail Level"), R(react_select_1.default, {
+                    value: lodash_1.default.findWhere(basicDetailLevelOptions, { value: this.props.detailLevel }) || null,
+                    options: basicDetailLevelOptions,
+                    onChange: (opt) => this.handleDetailLevelChange(opt.value)
+                }));
+            }
+            return null;
+        })());
+    }
+}
+exports.default = AdminScopeAndDetailLevelComponent;

package/lib/maps/BaseLayerDesignerComponent.d.ts

@@ -0,0 +1,28 @@
+import React from "react";
+export interface BaseLayerDesignerComponentProps {
+    /** See Map Design.md */
+    design: any;
+    onDesignChange: any;
+}
+export default class BaseLayerDesignerComponent extends React.Component<BaseLayerDesignerComponentProps> {
+    updateDesign(changes: any): any;
+    handleBaseLayerChange: (baseLayer: any) => any;
+    renderBaseLayer(id: any, name: any): React.DetailedReactHTMLElement<{
+        key: any;
+        className: string;
+        style: {
+            display: "inline-block";
+        };
+        onClick: () => any;
+    }, HTMLElement>;
+    handleOpacityChange: (newValue: any) => any;
+    renderOpacityControl(): React.DetailedReactHTMLElement<{
+        className: string;
+        style: {
+            paddingTop: number;
+        };
+    }, HTMLElement>;
+    render(): React.DetailedReactHTMLElement<{
+        className: string;
+    }, HTMLElement>;
+}

package/lib/maps/BaseLayerDesignerComponent.js

@@ -0,0 +1,57 @@
+"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 rc_slider_1 = __importDefault(require("rc-slider"));
+const PopoverHelpComponent_1 = __importDefault(require("@mwater/react-library/lib/PopoverHelpComponent"));
+// Designer for config
+class BaseLayerDesignerComponent extends react_1.default.Component {
+    // Updates design with the specified changes
+    updateDesign(changes) {
+        const design = lodash_1.default.extend({}, this.props.design, changes);
+        return this.props.onDesignChange(design);
+    }
+    handleBaseLayerChange = (baseLayer) => {
+        return this.updateDesign({ baseLayer });
+    };
+    renderBaseLayer(id, name) {
+        let className = "mwater-visualization-layer";
+        if (id === this.props.design.baseLayer) {
+            className += " checked";
+        }
+        return R("div", {
+            key: id,
+            className,
+            style: { display: "inline-block" },
+            onClick: this.handleBaseLayerChange.bind(null, id)
+        }, name);
+    }
+    handleOpacityChange = (newValue) => {
+        return this.updateDesign({ baseLayerOpacity: newValue / 100 });
+    };
+    renderOpacityControl() {
+        let opacity;
+        if (this.props.design.baseLayerOpacity != null) {
+            opacity = this.props.design.baseLayerOpacity;
+        }
+        else {
+            opacity = 1;
+        }
+        return R("div", { className: "mb-3", style: { paddingTop: 10 } }, R("label", { className: "text-muted" }, R("span", null, `Opacity: ${Math.round(opacity * 100)}%`)), R("div", { style: { padding: "10px" } }, react_1.default.createElement(rc_slider_1.default, {
+            min: 0,
+            max: 100,
+            step: 1,
+            tipTransitionName: "rc-slider-tooltip-zoom-down",
+            value: opacity * 100,
+            onChange: this.handleOpacityChange
+        })));
+    }
+    render() {
+        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, "Background Map"), R("div", { style: { marginLeft: 10 } }, R("div", null, this.renderBaseLayer("cartodb_positron", "Light"), this.renderBaseLayer("cartodb_dark_matter", "Dark"), this.renderBaseLayer("bing_road", "Roads"), this.renderBaseLayer("bing_aerial", "Satellite"), this.renderBaseLayer("blank", "Blank"), " ", R(PopoverHelpComponent_1.default, { placement: "bottom" }, "Blank map backgrounds work best with chloropleth map layers")), this.renderOpacityControl()));
+    }
+}
+exports.default = BaseLayerDesignerComponent;

package/lib/maps/BingLayer.d.ts

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

package/lib/maps/BingLayer.js

@@ -0,0 +1,151 @@
+"use strict";
+/*
+Copyright (c) 2011-2014, Pavel Shramov, Bruno Bergot
+All rights reserved.
+
+Redistribution and use in source and binary forms, with or without modification, are
+permitted provided that the following conditions are met:
+
+   1. Redistributions of source code must retain the above copyright notice, this list of
+      conditions and the following disclaimer.
+      
+   2. Redistributions in binary form must reproduce the above copyright notice, this list
+      of conditions and the following disclaimer in the documentation and/or other materials
+      provided with the distribution.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY
+EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
+MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
+EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION)
+HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR
+TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
+SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+*/
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const leaflet_1 = __importDefault(require("leaflet"));
+module.exports = leaflet_1.default.TileLayer.extend({
+    options: {
+        subdomains: [0, 1, 2, 3],
+        type: "Aerial",
+        attribution: "Bing",
+        culture: "",
+        maxZoom: 21,
+        maxNativeZoom: 19
+    },
+    initialize: function (key, options) {
+        leaflet_1.default.Util.setOptions(this, options);
+        this._key = key;
+        this._url = null;
+        this.meta = {};
+        this.loadMetadata();
+    },
+    tile2quad: function (x, y, z) {
+        var quad = "";
+        for (var i = z; i > 0; i--) {
+            var digit = 0;
+            var mask = 1 << (i - 1);
+            if ((x & mask) !== 0)
+                digit += 1;
+            if ((y & mask) !== 0)
+                digit += 2;
+            quad = quad + digit;
+        }
+        return quad;
+    },
+    getTileUrl: function (p, z) {
+        var zoom = this._getZoomForUrl();
+        var subdomains = this.options.subdomains, s = this.options.subdomains[Math.abs((p.x + p.y) % subdomains.length)];
+        return this._url
+            .replace("{subdomain}", s)
+            .replace("{quadkey}", this.tile2quad(p.x, p.y, zoom))
+            .replace("{culture}", this.options.culture);
+    },
+    loadMetadata: function () {
+        var _this = this;
+        var cbid = "_bing_metadata_" + leaflet_1.default.Util.stamp(this);
+        window[cbid] = function (meta) {
+            _this.meta = meta;
+            window[cbid] = undefined;
+            var e = document.getElementById(cbid);
+            e.parentNode.removeChild(e);
+            if (meta.errorDetails) {
+                return;
+            }
+            _this.initMetadata();
+        };
+        var url = document.location.protocol +
+            "//dev.virtualearth.net/REST/v1/Imagery/Metadata/" +
+            this.options.type +
+            "?include=ImageryProviders&jsonp=" +
+            cbid +
+            "&key=" +
+            this._key +
+            "&UriScheme=" +
+            document.location.protocol.slice(0, -1);
+        var script = document.createElement("script");
+        script.type = "text/javascript";
+        script.src = url;
+        script.id = cbid;
+        document.getElementsByTagName("head")[0].appendChild(script);
+    },
+    initMetadata: function () {
+        var r = this.meta.resourceSets[0].resources[0];
+        this.options.subdomains = r.imageUrlSubdomains;
+        this._url = r.imageUrl;
+        this._providers = [];
+        if (r.imageryProviders) {
+            for (var i = 0; i < r.imageryProviders.length; i++) {
+                var p = r.imageryProviders[i];
+                for (var j = 0; j < p.coverageAreas.length; j++) {
+                    var c = p.coverageAreas[j];
+                    var coverage = { zoomMin: c.zoomMin, zoomMax: c.zoomMax, active: false };
+                    var bounds = new leaflet_1.default.LatLngBounds(new leaflet_1.default.LatLng(c.bbox[0] + 0.01, c.bbox[1] + 0.01), new leaflet_1.default.LatLng(c.bbox[2] - 0.01, c.bbox[3] - 0.01));
+                    coverage.bounds = bounds;
+                    coverage.attrib = p.attribution;
+                    this._providers.push(coverage);
+                }
+            }
+        }
+        this._update();
+    },
+    _update: function () {
+        if (this._url === null || !this._map)
+            return;
+        this._update_attribution();
+        leaflet_1.default.TileLayer.prototype._update.apply(this, []);
+    },
+    _update_attribution: function () {
+        var bounds = this._map.getBounds();
+        var zoom = this._map.getZoom();
+        for (var i = 0; i < this._providers.length; i++) {
+            var p = this._providers[i];
+            if (zoom <= p.zoomMax && zoom >= p.zoomMin && bounds.intersects(p.bounds)) {
+                if (!p.active && this._map.attributionControl)
+                    this._map.attributionControl.addAttribution(p.attrib);
+                p.active = true;
+            }
+            else {
+                if (p.active && this._map.attributionControl)
+                    this._map.attributionControl.removeAttribution(p.attrib);
+                p.active = false;
+            }
+        }
+    },
+    onRemove: function (map) {
+        if (this._providers) {
+            for (var i = 0; i < this._providers.length; i++) {
+                var p = this._providers[i];
+                if (p.active && this._map.attributionControl) {
+                    this._map.attributionControl.removeAttribution(p.attrib);
+                    p.active = false;
+                }
+            }
+        }
+        leaflet_1.default.TileLayer.prototype.onRemove.apply(this, [map]);
+    }
+});

package/lib/maps/BufferLayer.d.ts

@@ -0,0 +1,51 @@
+import { JsonQLQuery } from "@mwater/jsonql";
+import { DataSource, Schema } from "@mwater/expressions";
+import React from "react";
+import { JsonQLFilter } from "../JsonQLFilter";
+import { BufferLayerDesign } from "./BufferLayerDesign";
+import Layer, { OnGridClickOptions, OnGridHoverOptions, VectorTileDef } from "./Layer";
+import { OnGridClickResults, OnGridHoverResults } from "./maps";
+import LayerLegendComponent from "./LayerLegendComponent";
+export default class BufferLayer extends Layer<BufferLayerDesign> {
+    /** Gets the type of layer definition */
+    getLayerDefinitionType(): "VectorTile";
+    getVectorTile(design: BufferLayerDesign, sourceId: string, schema: Schema, filters: JsonQLFilter[], opacity: number): VectorTileDef;
+    createJsonQL(design: BufferLayerDesign, schema: Schema, filters: JsonQLFilter[]): JsonQLQuery;
+    getJsonQLCss(design: BufferLayerDesign, schema: Schema, filters: JsonQLFilter[]): {
+        layers: {
+            id: string;
+            jsonql: import("@mwater/jsonql").JsonQLSelectQuery;
+        }[];
+        css: string;
+        interactivity: {
+            layer: string;
+            fields: string[];
+        };
+    };
+    createMapnikJsonQL(design: BufferLayerDesign, schema: Schema, filters: JsonQLFilter[]): import("@mwater/jsonql").JsonQLSelectQuery;
+    createCss(design: BufferLayerDesign, schema: Schema): string;
+    onGridClick(ev: {
+        data: any;
+        event: any;
+    }, clickOptions: OnGridClickOptions<BufferLayerDesign>): OnGridClickResults;
+    onGridHoverOver(ev: {
+        data: any;
+        event: any;
+    }, hoverOptions: OnGridHoverOptions<BufferLayerDesign>): OnGridHoverResults;
+    getBounds(design: BufferLayerDesign, schema: Schema, dataSource: DataSource, filters: JsonQLFilter[], callback: any): void;
+    getMinZoom(design: BufferLayerDesign): number | undefined;
+    getMaxZoom(design: BufferLayerDesign): number;
+    getLegend(design: BufferLayerDesign, schema: Schema, name: string, dataSource: DataSource, locale: string, filters: JsonQLFilter[]): React.CElement<import("./LayerLegendComponent").LayerLegendComponentProps, LayerLegendComponent>;
+    getFilterableTables(design: BufferLayerDesign, schema: Schema): string[];
+    isEditable(): boolean;
+    isIncomplete(design: BufferLayerDesign, schema: Schema): boolean;
+    createDesignerElement(options: {
+        design: BufferLayerDesign;
+        schema: Schema;
+        dataSource: DataSource;
+        onDesignChange: (design: BufferLayerDesign) => void;
+        filters: JsonQLFilter[];
+    }): React.ReactElement<{}>;
+    cleanDesign(design: BufferLayerDesign, schema: Schema): BufferLayerDesign;
+    validateDesign(design: BufferLayerDesign, schema: Schema): string | null;
+}