@mwater/visualization 5.0.0

package/lib/maps/mapSymbols.js

@@ -0,0 +1,167 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.mapSymbols = void 0;
+const dot_circle_o_png_1 = __importDefault(require("./symbols/font-awesome/dot-circle-o.png"));
+const bullseye_png_1 = __importDefault(require("./symbols/font-awesome/bullseye.png"));
+const star_png_1 = __importDefault(require("./symbols/font-awesome/star.png"));
+const square_png_1 = __importDefault(require("./symbols/font-awesome/square.png"));
+const home_png_1 = __importDefault(require("./symbols/font-awesome/home.png"));
+const plus_png_1 = __importDefault(require("./symbols/font-awesome/plus.png"));
+const plus_circle_png_1 = __importDefault(require("./symbols/font-awesome/plus-circle.png"));
+const plus_square_png_1 = __importDefault(require("./symbols/font-awesome/plus-square.png"));
+const asterisk_png_1 = __importDefault(require("./symbols/font-awesome/asterisk.png"));
+const mobile_png_1 = __importDefault(require("./symbols/font-awesome/mobile.png"));
+const check_png_1 = __importDefault(require("./symbols/font-awesome/check.png"));
+const university_png_1 = __importDefault(require("./symbols/font-awesome/university.png"));
+const check_circle_png_1 = __importDefault(require("./symbols/font-awesome/check-circle.png"));
+const times_png_1 = __importDefault(require("./symbols/font-awesome/times.png"));
+const ban_png_1 = __importDefault(require("./symbols/font-awesome/ban.png"));
+const crosshairs_png_1 = __importDefault(require("./symbols/font-awesome/crosshairs.png"));
+const flask_png_1 = __importDefault(require("./symbols/font-awesome/flask.png"));
+const flag_png_1 = __importDefault(require("./symbols/font-awesome/flag.png"));
+const info_circle_png_1 = __importDefault(require("./symbols/font-awesome/info-circle.png"));
+const exclamation_circle_png_1 = __importDefault(require("./symbols/font-awesome/exclamation-circle.png"));
+const exclamation_triangle_png_1 = __importDefault(require("./symbols/font-awesome/exclamation-triangle.png"));
+const bell_png_1 = __importDefault(require("./symbols/font-awesome/bell.png"));
+const bolt_png_1 = __importDefault(require("./symbols/font-awesome/bolt.png"));
+const building_png_1 = __importDefault(require("./symbols/font-awesome/building.png"));
+const bus_png_1 = __importDefault(require("./symbols/font-awesome/bus.png"));
+const certificate_png_1 = __importDefault(require("./symbols/font-awesome/certificate.png"));
+const comment_png_1 = __importDefault(require("./symbols/font-awesome/comment.png"));
+const male_png_1 = __importDefault(require("./symbols/font-awesome/male.png"));
+const female_png_1 = __importDefault(require("./symbols/font-awesome/female.png"));
+const user_png_1 = __importDefault(require("./symbols/font-awesome/user.png"));
+const users_png_1 = __importDefault(require("./symbols/font-awesome/users.png"));
+const wheelchair_png_1 = __importDefault(require("./symbols/font-awesome/wheelchair.png"));
+const h_square_png_1 = __importDefault(require("./symbols/font-awesome/h-square.png"));
+const thumbs_up_png_1 = __importDefault(require("./symbols/font-awesome/thumbs-up.png"));
+const thumbs_down_png_1 = __importDefault(require("./symbols/font-awesome/thumbs-down.png"));
+const ticket_png_1 = __importDefault(require("./symbols/font-awesome/ticket.png"));
+const tint_png_1 = __importDefault(require("./symbols/font-awesome/tint.png"));
+const times_circle_png_1 = __importDefault(require("./symbols/font-awesome/times-circle.png"));
+const tree_png_1 = __importDefault(require("./symbols/font-awesome/tree.png"));
+const file_png_1 = __importDefault(require("./symbols/font-awesome/file.png"));
+const usd_png_1 = __importDefault(require("./symbols/font-awesome/usd.png"));
+const caret_up_png_1 = __importDefault(require("./symbols/font-awesome/caret-up.png"));
+const chevron_circle_up_png_1 = __importDefault(require("./symbols/font-awesome/chevron-circle-up.png"));
+const chevron_circle_down_png_1 = __importDefault(require("./symbols/font-awesome/chevron-circle-down.png"));
+const medkit_png_1 = __importDefault(require("./symbols/font-awesome/medkit.png"));
+const cloud_png_1 = __importDefault(require("./symbols/font-awesome/cloud.png"));
+const beer_png_1 = __importDefault(require("./symbols/font-awesome/beer.png"));
+/** Symbols used on the map */
+exports.mapSymbols = [
+    {
+        url: dot_circle_o_png_1.default,
+        value: "font-awesome/dot-circle-o",
+        label: "Dot circle"
+    },
+    { url: bullseye_png_1.default, value: "font-awesome/bullseye", label: "Bullseye" },
+    { url: star_png_1.default, value: "font-awesome/star", label: "Star" },
+    { url: square_png_1.default, value: "font-awesome/square", label: "Square" },
+    { url: home_png_1.default, value: "font-awesome/home", label: "Home" },
+    { url: plus_png_1.default, value: "font-awesome/plus", label: "Plus" },
+    {
+        url: plus_circle_png_1.default,
+        value: "font-awesome/plus-circle",
+        label: "Plus Circle"
+    },
+    {
+        url: plus_square_png_1.default,
+        value: "font-awesome/plus-square",
+        label: "Plus Square"
+    },
+    { url: asterisk_png_1.default, value: "font-awesome/asterisk", label: "Asterisk" },
+    { url: mobile_png_1.default, value: "font-awesome/mobile", label: "Mobile" },
+    { url: check_png_1.default, value: "font-awesome/check", label: "Check" },
+    {
+        url: university_png_1.default,
+        value: "font-awesome/university",
+        label: "Institution"
+    },
+    {
+        url: check_circle_png_1.default,
+        value: "font-awesome/check-circle",
+        label: "Check Circle"
+    },
+    { url: times_png_1.default, value: "font-awesome/times", label: "Removed" },
+    { url: ban_png_1.default, value: "font-awesome/ban", label: "Ban" },
+    {
+        url: crosshairs_png_1.default,
+        value: "font-awesome/crosshairs",
+        label: "Crosshairs"
+    },
+    { url: flask_png_1.default, value: "font-awesome/flask", label: "Flask" },
+    { url: flag_png_1.default, value: "font-awesome/flag", label: "Flag" },
+    {
+        url: info_circle_png_1.default,
+        value: "font-awesome/info-circle",
+        label: "Info Circle"
+    },
+    {
+        url: exclamation_circle_png_1.default,
+        value: "font-awesome/exclamation-circle",
+        label: "Exclamation Circle"
+    },
+    {
+        url: exclamation_triangle_png_1.default,
+        value: "font-awesome/exclamation-triangle",
+        label: "Exclamation Triangle"
+    },
+    { url: bell_png_1.default, value: "font-awesome/bell", label: "Bell" },
+    { url: bolt_png_1.default, value: "font-awesome/bolt", label: "Bolt" },
+    { url: building_png_1.default, value: "font-awesome/building", label: "Building" },
+    { url: bus_png_1.default, value: "font-awesome/bus", label: "Bus" },
+    {
+        url: certificate_png_1.default,
+        value: "font-awesome/certificate",
+        label: "Certificate"
+    },
+    { url: comment_png_1.default, value: "font-awesome/comment", label: "Comment" },
+    { url: male_png_1.default, value: "font-awesome/male", label: "Male" },
+    { url: female_png_1.default, value: "font-awesome/female", label: "Female" },
+    { url: user_png_1.default, value: "font-awesome/user", label: "Person" },
+    { url: users_png_1.default, value: "font-awesome/users", label: "Group" },
+    {
+        url: wheelchair_png_1.default,
+        value: "font-awesome/wheelchair",
+        label: "Wheelchair"
+    },
+    {
+        url: h_square_png_1.default,
+        value: "font-awesome/h-square",
+        label: "Hospital Symbol"
+    },
+    { url: thumbs_up_png_1.default, value: "font-awesome/thumbs-up", label: "Thumbs Up" },
+    {
+        url: thumbs_down_png_1.default,
+        value: "font-awesome/thumbs-down",
+        label: "Thumbs Down"
+    },
+    { url: ticket_png_1.default, value: "font-awesome/ticket", label: "Ticket" },
+    { url: tint_png_1.default, value: "font-awesome/tint", label: "Tint" },
+    {
+        url: times_circle_png_1.default,
+        value: "font-awesome/times-circle",
+        label: "Times Circle"
+    },
+    { url: tree_png_1.default, value: "font-awesome/tree", label: "Tree" },
+    { url: file_png_1.default, value: "font-awesome/file", label: "File" },
+    { url: usd_png_1.default, value: "font-awesome/usd", label: "USD" },
+    { url: caret_up_png_1.default, value: "font-awesome/caret-up", label: "Caret Up" },
+    {
+        url: chevron_circle_up_png_1.default,
+        value: "font-awesome/chevron-circle-up",
+        label: "Chevron Up"
+    },
+    {
+        url: chevron_circle_down_png_1.default,
+        value: "font-awesome/chevron-circle-down",
+        label: "Chevron Down"
+    },
+    { url: medkit_png_1.default, value: "font-awesome/medkit", label: "Medkit" },
+    { url: cloud_png_1.default, value: "font-awesome/cloud", label: "Cloud" },
+    { url: beer_png_1.default, value: "font-awesome/beer", label: "Cup" }
+];

package/lib/maps/mapboxUtils.d.ts

@@ -0,0 +1,6 @@
+import { DataDrivenPropertyValueSpecification } from "maplibre-gl";
+import { Axis } from "../axes/Axis";
+/** Compile a color mapped axis to mapbox format case statement */
+export declare function compileColorMapToMapbox(axis: Axis | null | undefined, defaultColor: string): DataDrivenPropertyValueSpecification<string> | string;
+/** Compile a color that is transparent if excluded to mapbox format case statement */
+export declare function compileColorToMapbox(color: string, excludedValues?: any[]): DataDrivenPropertyValueSpecification<string> | string;

package/lib/maps/mapboxUtils.js

@@ -0,0 +1,60 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.compileColorToMapbox = exports.compileColorMapToMapbox = void 0;
+/** Compile a color mapped axis to mapbox format case statement */
+function compileColorMapToMapbox(axis, defaultColor) {
+    let compiled;
+    if (axis && axis.colorMap && axis.colorMap.length > 0) {
+        const excludedValues = axis.excludedValues || [];
+        // Create match operator
+        compiled = ["case"];
+        for (let item of axis.colorMap) {
+            // If value is numeric, cast to number as ST_AsMVT makes numeric types into strings
+            // However, to-number makes null into 0, so check for that first
+            if (typeof item.value == "number") {
+                compiled.push(["all", ["has", "color"], ["==", ["to-number", ["get", "color"]], item.value]]);
+            }
+            else {
+                compiled.push(["==", ["get", "color"], item.value]);
+            }
+            compiled.push(excludedValues.includes(item.value) ? "transparent" : item.color);
+        }
+        // Else
+        compiled.push(defaultColor);
+    }
+    else {
+        compiled = defaultColor;
+    }
+    return compiled;
+}
+exports.compileColorMapToMapbox = compileColorMapToMapbox;
+/** Compile a color that is transparent if excluded to mapbox format case statement */
+function compileColorToMapbox(color, excludedValues) {
+    let compiled;
+    if (excludedValues) {
+        // Create match operator
+        compiled = ["case"];
+        for (let value of excludedValues) {
+            // If value is numeric, cast to number as ST_AsMVT makes numeric types into strings
+            // However, to-number makes null into 0, so check for that first
+            if (typeof value == "number") {
+                compiled.push(["all", ["has", "color"], ["==", ["to-number", ["get", "color"]], value]]);
+            }
+            else {
+                compiled.push(["==", ["get", "color"], value]);
+            }
+            compiled.push("transparent");
+        }
+        // Else
+        compiled.push(color);
+        // Handle simple case
+        if (compiled.length == 2) {
+            compiled = color;
+        }
+    }
+    else {
+        compiled = color;
+    }
+    return compiled;
+}
+exports.compileColorToMapbox = compileColorToMapbox;

package/lib/maps/maps.d.ts

@@ -0,0 +1,36 @@
+/// <reference types="react" />
+import { JsonQLQuery } from "@mwater/jsonql";
+import { Expr } from "@mwater/expressions";
+export interface LayerDefinition {
+    layers: Array<{
+        /** Layer id */
+        id: string;
+        /** jsonql that includes "the_webmercator_geom" as a column */
+        jsonql: JsonQLQuery;
+    }>;
+    /** carto css */
+    css: string;
+    interactivity?: {
+        /** id of layer */
+        layer: string;
+        /** array of field names */
+        fields: string[];
+    };
+}
+export type OnGridClickResults = {
+    scope?: any;
+    row?: {
+        tableId: string;
+        primaryKey: any;
+    };
+    popup?: React.ReactElement<{}>;
+} | null;
+export type OnGridHoverResults = {
+    scope?: any;
+    hoverOver?: React.ReactElement<{}>;
+} | null;
+export interface HoverOverItem {
+    id: string;
+    label: string;
+    value?: Expr;
+}

package/lib/maps/maps.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/maps/vectorMaps.d.ts

@@ -0,0 +1,42 @@
+import { Map, LngLatBoundsLike } from "maplibre-gl";
+import "maplibre-gl/dist/maplibre-gl.css";
+import "./VectorMapViewComponent.css";
+import React from "react";
+/** This must be called to set the appropriate key before use. If it is not set, vector maps will not function.
+ * Maps will fall back to leaflet if the key is not set or if set to ""
+ */
+export declare function setMapTilerApiKey(key: string): void;
+export declare function getMapTilerApiKey(): string;
+/** Check if vector maps are enabled by setting API key */
+export declare function areVectorMapsEnabled(): boolean;
+export type BaseLayer = "bing_road" | "bing_aerial" | "cartodb_positron" | "cartodb_dark_matter" | "blank";
+/** Loads a vector map, refreshing the WebGL context as needed */
+export declare function useVectorMap(options: {
+    divRef: HTMLDivElement | null;
+    bounds?: LngLatBoundsLike;
+    scrollZoom?: boolean;
+    dragPan?: boolean;
+    touchZoomRotate?: boolean;
+}): Map | undefined;
+/** Sets cursor as pointer when over any layers with the specified ids */
+export declare function useHoverCursor(map: maplibregl.Map | undefined, layerIds: string[]): void;
+/** Apply user style to a map with base style */
+export declare function useStyleMap(options: {
+    map: maplibregl.Map | undefined;
+    baseLayer: BaseLayer;
+    baseLayerOpacity?: number | null;
+    userStyle: maplibregl.StyleSpecification | null | undefined;
+}): void;
+/** Loads a base style for the map */
+export declare function useBaseStyle(baseLayer: BaseLayer): import("maplibre-gl").StyleSpecification | null;
+/** Combines a base style and a user style */
+export declare function mergeBaseAndUserStyle(baseStyle: maplibregl.StyleSpecification | null | undefined, userStyle: maplibregl.StyleSpecification | null | undefined, baseLayerOpacity?: number | null): import("maplibre-gl").StyleSpecification | null;
+export declare function AttributionControl(props: {
+    baseLayer: BaseLayer;
+    extraText?: string;
+}): React.JSX.Element;
+export declare function VectorMapLogo(props: {
+    baseLayer: BaseLayer;
+}): React.JSX.Element | null;
+/** Persists map bounds to local storage */
+export declare function usePersistedMapBounds(map: Map | undefined, localStorageKey: string): void;