@mwater/visualization 5.2.0 → 5.3.0

package/lib/maps/BingLayer.js

@@ -67,34 +67,24 @@ module.exports = leaflet_1.default.TileLayer.extend({
     },
     loadMetadata: function () {
         var _this = this;
-        var cbid = "_bing_metadata_" + leaflet_1.default.Util.stamp(this);
-        window[cbid] = function (meta) {
+        var url = `https://dev.virtualearth.net/REST/v1/Imagery/Metadata/${this.options.type}?include=ImageryProviders&key=${this._key}&UriScheme=https`;
+        fetch(url)
+            .then(response => response.json())
+            .then(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);
+        })
+            .catch(error => console.error('Error loading Bing Maps metadata:', error));
     },
     initMetadata: function () {
         var r = this.meta.resourceSets[0].resources[0];
+        if (!r) {
+            console.error("Error loading Bing Maps metadata");
+            return;
+        }
         this.options.subdomains = r.imageUrlSubdomains;
         this._url = r.imageUrl;
         this._providers = [];

package/lib/maps/BufferLayer.js

@@ -36,6 +36,7 @@ const mapboxUtils_1 = require("./mapboxUtils");
 const LayerLegendComponent_1 = __importDefault(require("./LayerLegendComponent"));
 const PopupFilterJoinsUtils = __importStar(require("./PopupFilterJoinsUtils"));
 const HoverContent_1 = __importDefault(require("./HoverContent"));
+const layoutOptions_1 = require("../dashboards/layoutOptions");
 /*
 Layer which draws a buffer around geometries (i.e. a radius circle around points)
 
@@ -610,7 +611,7 @@ marker-fill: ` +
                 const WidgetFactory = require("../widgets/WidgetFactory").default;
                 results.popup = new BlocksLayoutManager().renderLayout({
                     items: clickOptions.design.popup.items,
-                    style: "popup",
+                    layoutOptions: (0, layoutOptions_1.getDefaultLayoutOptions)("default"),
                     renderWidget: (options) => {
                         const widget = WidgetFactory.createWidget(options.type);
                         const filters = clickOptions.filters.concat(popupFilters);

package/lib/maps/ChoroplethLayer.js

@@ -36,6 +36,7 @@ const mapboxUtils_1 = require("./mapboxUtils");
 const LayerLegendComponent_1 = __importDefault(require("./LayerLegendComponent"));
 const PopupFilterJoinsUtils = __importStar(require("./PopupFilterJoinsUtils"));
 const HoverContent_1 = __importDefault(require("./HoverContent"));
+const layoutOptions_1 = require("../dashboards/layoutOptions");
 class ChoroplethLayer extends Layer_1.default {
     /** Gets the type of layer definition */
     getLayerDefinitionType() {
@@ -1213,7 +1214,7 @@ class ChoroplethLayer extends Layer_1.default {
                 const WidgetFactory = require("../widgets/WidgetFactory").default;
                 results.popup = new BlocksLayoutManager().renderLayout({
                     items: clickOptions.design.popup.items,
-                    style: "popup",
+                    layoutOptions: (0, layoutOptions_1.getDefaultLayoutOptions)("default"),
                     renderWidget: (options) => {
                         const widget = WidgetFactory.createWidget(options.type);
                         // Create filters for single row

package/lib/maps/DirectMapDataSource.d.ts

@@ -4,7 +4,7 @@ import { MapDesign } from "./MapDesign";
 import { MapDataSource } from "./MapDataSource";
 import { VectorTileCTE, VectorTileSourceLayer } from "./Layer";
 import { MapLayerDataSource } from "./MapLayerDataSource";
-interface DirectMapDataSourceOptions {
+export interface DirectMapDataSourceOptions {
     /** schema to use */
     schema: Schema;
     /** general data source */
@@ -15,6 +15,8 @@ interface DirectMapDataSourceOptions {
     apiUrl: string;
     /** client id to use for talking to mWater server */
     client?: string;
+    /** Origin to which server time is recorded e.g. maps:232434... */
+    origin?: string;
 }
 export default class DirectMapDataSource implements MapDataSource {
     options: DirectMapDataSourceOptions;
@@ -49,6 +51,8 @@ export interface VectorTileDirectTokenRequest {
     minZoom?: number;
     /** Enforced maximum zoom level */
     maxZoom?: number;
+    /** Origin to which server time is recorded */
+    origin?: string;
 }
 /**
  * React hook to get a direct URL for a vector tile source.
@@ -65,4 +69,3 @@ export declare function useDirectVectorTileUrl(options: {
     /** Request to make for tiles */
     directTokenRequest: VectorTileDirectTokenRequest;
 }): string | null;
-export {};

package/lib/maps/DirectMapDataSource.js

@@ -152,7 +152,8 @@ class DirectLayerDataSource {
             maxZoom: vectorTile.maxZoom,
             createdAfter: createdAfter,
             // 12 hours
-            expiresAfter: new Date(Date.now() + 1000 * 3600 * 12).toISOString()
+            expiresAfter: new Date(Date.now() + 1000 * 3600 * 12).toISOString(),
+            origin: this.options.origin
         };
         const { url, expires } = await getVectorTileFromDirectRequest({
             apiUrl: this.options.apiUrl,

package/lib/maps/EditPopupComponent.js

@@ -11,6 +11,7 @@ const BlocksLayoutManager_1 = __importDefault(require("../layouts/blocks/BlocksL
 const WidgetFactory_1 = __importDefault(require("../widgets/WidgetFactory"));
 const DirectWidgetDataSource_1 = __importDefault(require("../widgets/DirectWidgetDataSource"));
 const PopupFilterJoinsEditComponent_1 = __importDefault(require("./PopupFilterJoinsEditComponent"));
+const layoutOptions_1 = require("../dashboards/layoutOptions");
 // Modal for editing design of popup
 class EditPopupComponent extends react_1.default.Component {
     constructor(props) {
@@ -44,7 +45,7 @@ class EditPopupComponent extends react_1.default.Component {
             : 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",
+                layoutOptions: (0, layoutOptions_1.getDefaultLayoutOptions)("default"),
                 onItemsChange: this.handleItemsChange,
                 disableMaps: true,
                 renderWidget: (options) => {

package/lib/maps/MapComponent.d.ts

@@ -1,4 +1,3 @@
-import PropTypes from "prop-types";
 import React, { ReactNode } from "react";
 import AutoSizeComponent from "@mwater/react-library/lib/AutoSizeComponent";
 import UndoStack from "../UndoStack";
@@ -40,9 +39,7 @@ interface MapComponentState {
 }
 /** Map with designer on right */
 export default class MapComponent extends React.Component<MapComponentProps, MapComponentState> {
-    static contextTypes: {
-        locale: PropTypes.Requireable<string>;
-    };
+    static contextType: React.Context<string>;
     constructor(props: MapComponentProps);
     componentDidUpdate(prevProps: MapComponentProps): void;
     handleUndo: () => void;

package/lib/maps/MapComponent.js

@@ -3,7 +3,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const prop_types_1 = __importDefault(require("prop-types"));
 const lodash_1 = __importDefault(require("lodash"));
 const react_1 = __importDefault(require("react"));
 const R = react_1.default.createElement;
@@ -16,9 +15,10 @@ const PopoverHelpComponent_1 = __importDefault(require("@mwater/react-library/li
 const QuickfilterCompiler_1 = __importDefault(require("../quickfilter/QuickfilterCompiler"));
 const QuickfiltersComponent_1 = __importDefault(require("../quickfilter/QuickfiltersComponent"));
 const MapUtils_1 = require("./MapUtils");
+const contexts_1 = require("@mwater/expressions-ui/lib/contexts");
 /** Map with designer on right */
 class MapComponent extends react_1.default.Component {
-    static contextTypes = { locale: prop_types_1.default.string };
+    static contextType = contexts_1.LocaleContext;
     constructor(props) {
         super(props);
         this.state = {
@@ -125,7 +125,7 @@ class MapComponent extends react_1.default.Component {
                 zoomLocked: this.state.zoomLocked,
                 onRowClick: this.props.onRowClick,
                 extraFilters: filters,
-                locale: this.context.locale,
+                locale: this.context,
                 width: size.width,
                 height: size.height
             });

package/lib/maps/MarkersLayer.js

@@ -37,6 +37,7 @@ const mapboxUtils_1 = require("./mapboxUtils");
 const LayerLegendComponent_1 = __importDefault(require("./LayerLegendComponent"));
 const PopupFilterJoinsUtils = __importStar(require("./PopupFilterJoinsUtils"));
 const HoverContent_1 = __importDefault(require("./HoverContent"));
+const layoutOptions_1 = require("../dashboards/layoutOptions");
 class MarkersLayer extends Layer_1.default {
     /** Gets the type of layer definition */
     getLayerDefinitionType() {
@@ -71,11 +72,7 @@ class MarkersLayer extends Layer_1.default {
                 "fill-color": color,
                 "fill-opacity": (design.polygonFillOpacity ?? 0.25) * opacity
             },
-            filter: addFilter([
-                "any",
-                ["==", ["geometry-type"], "Polygon"],
-                ["==", ["geometry-type"], "MultiPolygon"]
-            ])
+            filter: addFilter(["any", ["==", ["geometry-type"], "Polygon"], ["==", ["geometry-type"], "MultiPolygon"]])
         });
         // Add polygon outlines and lines
         mapLayers.push({
@@ -88,11 +85,7 @@ class MarkersLayer extends Layer_1.default {
                 "line-width": design.lineWidth != null ? design.lineWidth : 3,
                 "line-opacity": opacity
             },
-            filter: addFilter([
-                "any",
-                ["==", ["geometry-type"], "Polygon"],
-                ["==", ["geometry-type"], "MultiPolygon"]
-            ])
+            filter: addFilter(["any", ["==", ["geometry-type"], "Polygon"], ["==", ["geometry-type"], "MultiPolygon"]])
         });
         // Add lines
         mapLayers.push({
@@ -105,11 +98,7 @@ class MarkersLayer extends Layer_1.default {
                 "line-width": design.lineWidth != null ? design.lineWidth : 3,
                 "line-opacity": opacity
             },
-            filter: addFilter([
-                "any",
-                ["==", ["geometry-type"], "LineString"],
-                ["==", ["geometry-type"], "MultiLineString"]
-            ])
+            filter: addFilter(["any", ["==", ["geometry-type"], "LineString"], ["==", ["geometry-type"], "MultiLineString"]])
         });
         if (!design.symbol) {
             mapLayers.push({
@@ -165,7 +154,7 @@ class MarkersLayer extends Layer_1.default {
         const exprCompiler = new expressions_1.ExprCompiler(schema);
         // Compile geometry axis
         const geometryExpr = axisBuilder.compileAxis({ axis: design.axes.geometry, tableAlias: "basequery" });
-        // Select _id, location 
+        // Select _id, location
         const basequery = {
             type: "query",
             selects: [
@@ -174,7 +163,7 @@ class MarkersLayer extends Layer_1.default {
                     expr: { type: "field", tableAlias: "basequery", column: schema.getTable(design.table).primaryKey },
                     alias: "id"
                 },
-                { type: "select", expr: geometryExpr, alias: "the_geom_webmercator" }, // geometry as the_geom_webmercator
+                { type: "select", expr: geometryExpr, alias: "the_geom_webmercator" } // geometry as the_geom_webmercator
             ],
             from: exprCompiler.compileTable(design.table, "basequery")
         };
@@ -440,7 +429,7 @@ line-width: ` +
                             JSON.stringify(item.value) +
                             "][geometry_type='ST_Polygon'],#layer0[color=" +
                             JSON.stringify(item.value) +
-                            `][geometry_type='ST_MultiPolygon'] { 
+                            `][geometry_type='ST_MultiPolygon'] {
 polygon-fill: ` +
                             item.color +
                             `;\
@@ -459,15 +448,25 @@ ${design.polygonBorderColor ? "line-color: " + design.polygonBorderColor + ";" :
             const results = {};
             // Popup
             if (hoverOptions.design.hoverOver) {
-                // Create filter using popupFilterJoins
-                const popupFilterJoins = hoverOptions.design.popupFilterJoins || PopupFilterJoinsUtils.createDefaultPopupFilterJoins(table);
-                const popupFilters = PopupFilterJoinsUtils.createPopupFilters(popupFilterJoins, hoverOptions.schema, table, ev.data.id);
+                const exprCompiler = new expressions_1.ExprCompiler(hoverOptions.schema);
                 results.hoverOver = react_1.default.createElement(HoverContent_1.default, {
                     key: ev.data.id,
                     schema: hoverOptions.schema,
                     dataSource: hoverOptions.dataSource,
                     design: hoverOptions.design,
-                    filters: popupFilters
+                    filters: [
+                        {
+                            table,
+                            jsonql: {
+                                type: "op",
+                                op: "=",
+                                exprs: [
+                                    exprCompiler.compileExpr({ expr: { type: "id", table }, tableAlias: "{alias}" }),
+                                    { type: "literal", value: ev.data.id }
+                                ]
+                            }
+                        }
+                    ]
                 });
             }
             return results;
@@ -543,7 +542,7 @@ ${design.polygonBorderColor ? "line-color: " + design.polygonBorderColor + ";" :
                 const WidgetFactory = require("../widgets/WidgetFactory").default;
                 results.popup = new BlocksLayoutManager().renderLayout({
                     items: clickOptions.design.popup.items,
-                    style: "popup",
+                    layoutOptions: (0, layoutOptions_1.getDefaultLayoutOptions)("default"),
                     renderWidget: (options) => {
                         const widget = WidgetFactory.createWidget(options.type);
                         const filters = clickOptions.filters.concat(popupFilters);
@@ -806,7 +805,13 @@ function createMarkersVectorQuery(baseQuery) {
         }
     });
     // Bubble up selects that are not cluster or geometry to the outer query
-    const innerSelects = baseQuery.selects.filter(select => select.alias !== "the_geom_webmercator").map(select => ({ type: "select", expr: { type: "field", tableAlias: "innerquery", column: select.alias }, alias: select.alias }));
+    const innerSelects = baseQuery.selects
+        .filter(select => select.alias !== "the_geom_webmercator")
+        .map(select => ({
+        type: "select",
+        expr: { type: "field", tableAlias: "innerquery", column: select.alias },
+        alias: select.alias
+    }));
     // Create outer query which takes where r <= 3 to limit # of points in a cluster
     // Wrap geometry in ST_Force2D to avoid https://trac.osgeo.org/postgis/ticket/4690 (https://github.com/mWater/mwater-server/issues/495)
     const outerquery = {
@@ -828,7 +833,7 @@ function createMarkersVectorQuery(baseQuery) {
                     ]
                 },
                 alias: "the_geom_webmercator"
-            }, // innerquery.the_geom_webmercator as the_geom_webmercator
+            } // innerquery.the_geom_webmercator as the_geom_webmercator
         ],
         from: { type: "subquery", query: innerquery, alias: "innerquery" },
         where: { type: "op", op: "<=", exprs: [{ type: "field", tableAlias: "innerquery", column: "r" }, 3] }

package/lib/maps/RasterMapViewComponent.d.ts

@@ -1,4 +1,3 @@
-import PropTypes from "prop-types";
 import React, { ReactNode } from "react";
 import LeafletMapComponent from "./LeafletMapComponent";
 import { Schema, DataSource } from "@mwater/expressions";
@@ -43,9 +42,7 @@ export default class RasterMapViewComponent extends React.Component<RasterMapVie
     popupContents: ReactNode;
     legendHidden: boolean;
 }> {
-    static contextTypes: {
-        locale: PropTypes.Requireable<string>;
-    };
+    static contextType: React.Context<string>;
     leafletMap?: LeafletMapComponent | null;
     constructor(props: any);
     componentDidMount(): void;

package/lib/maps/RasterMapViewComponent.js

@@ -26,7 +26,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const prop_types_1 = __importDefault(require("prop-types"));
 const lodash_1 = __importDefault(require("lodash"));
 const react_1 = __importDefault(require("react"));
 const R = react_1.default.createElement;
@@ -36,9 +35,10 @@ const ModalPopupComponent_1 = __importDefault(require("@mwater/react-library/lib
 const MapUtils = __importStar(require("./MapUtils"));
 const LayerSwitcherComponent_1 = require("./LayerSwitcherComponent");
 const LegendComponent_1 = __importDefault(require("./LegendComponent"));
+const contexts_1 = require("@mwater/expressions-ui/lib/contexts");
 /** Component that displays just the map, using raster tile technology */
 class RasterMapViewComponent extends react_1.default.Component {
-    static contextTypes = { locale: prop_types_1.default.string };
+    static contextType = contexts_1.LocaleContext;
     leafletMap;
     constructor(props) {
         super(props);
@@ -154,7 +154,7 @@ class RasterMapViewComponent extends react_1.default.Component {
                 layerViews: this.props.design.layerViews,
                 filters: this.getCompiledFilters(),
                 dataSource: this.props.dataSource,
-                locale: this.context.locale,
+                locale: this.context,
                 onHide: () => this.setState({ legendHidden: true }),
                 zoom: null
             });

package/lib/maps/ServerMapDataSource.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="jquery" />
 import { DataSource, Expr, Schema } from "@mwater/expressions";
 import { JsonQLFilter } from "../JsonQLFilter";
 import { MapDesign, MapLayerView } from "./MapDesign";
@@ -66,7 +65,7 @@ interface ServerMapLayerPopupWidgetDataSourceOptions {
     /** map id to use on server */
     mapId: string;
     /** revision to use to allow caching */
-    rev: string;
+    rev: number;
     /** Layer id to use */
     layerId: string;
     /** Popup widget id to use */
@@ -75,7 +74,7 @@ interface ServerMapLayerPopupWidgetDataSourceOptions {
 declare class ServerMapLayerPopupWidgetDataSource implements WidgetDataSource {
     options: ServerMapLayerPopupWidgetDataSourceOptions;
     constructor(options: ServerMapLayerPopupWidgetDataSourceOptions);
-    getData(design: any, filters: JsonQLFilter[], callback: (error: any, data?: any) => void): JQuery.jqXHR<any>;
+    getData(design: any, filters: JsonQLFilter[], callback: (error: any, data?: any) => void): void;
     getImageUrl(imageId: string, height?: number): string;
 }
 declare class ServerQuickfilterDataSource implements QuickfiltersDataSource {

package/lib/maps/ServerMapDataSource.js

@@ -208,11 +208,11 @@ class ServerMapLayerPopupWidgetDataSource {
         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);
+        jquery_1.default.getJSON(url, (data) => {
+            callback(null, data);
         }).fail((xhr) => {
             console.log(xhr.responseText);
-            return callback(new Error(xhr.responseText));
+            callback(new Error(xhr.responseText));
         });
     }
     // Get the url to download an image (by id from an image or imagelist column)
@@ -263,11 +263,11 @@ class ServerQuickfilterDataSource {
             headers
         })
             .done((data) => {
-            return callback(null, data);
+            callback(null, data);
         })
             .fail((xhr) => {
             console.log(xhr.responseText);
-            return callback(new Error(xhr.responseText));
+            callback(new Error(xhr.responseText));
         });
     }
 }

package/lib/maps/VectorMapViewComponent.js

@@ -391,7 +391,7 @@ function VectorMapViewComponent(props) {
         props.mapDataSource.getBounds(props.design, getCompiledFilters(), (error, bounds) => {
             setBusy(b => b - 1);
             if (bounds) {
-                map.fitBounds([bounds.w, bounds.s, bounds.e, bounds.n], { padding: 20, duration: 2500 });
+                map.fitBounds([bounds.w, bounds.s, bounds.e, bounds.n], { padding: 30, duration: 2500 });
                 // Also record if editable as part of bounds
                 setBounds(bounds);
             }
@@ -420,6 +420,7 @@ function VectorMapViewComponent(props) {
                 props.design.bounds.s != boundsRef.current.s ||
                 props.design.bounds.w != boundsRef.current.w) {
                 map.fitBounds([props.design.bounds.w, props.design.bounds.s, props.design.bounds.e, props.design.bounds.n]);
+                boundsRef.current = props.design.bounds;
             }
         }
     }, [map, props.design.autoBounds, props.design.bounds]);

package/lib/maps/mapSymbols.js

@@ -51,6 +51,7 @@ const chevron_circle_down_png_1 = __importDefault(require("./symbols/font-awesom
 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"));
+const cloud_rain_png_1 = __importDefault(require("./symbols/font-awesome/cloud-rain.png"));
 /** Symbols used on the map */
 exports.mapSymbols = [
     {
@@ -163,5 +164,6 @@ exports.mapSymbols = [
     },
     { url: medkit_png_1.default, value: "font-awesome/medkit", label: "Medkit" },
     { url: cloud_png_1.default, value: "font-awesome/cloud", label: "Cloud" },
+    { url: cloud_rain_png_1.default, value: "font-awesome/cloud-rain", label: "Cloud Rain" },
     { url: beer_png_1.default, value: "font-awesome/beer", label: "Cup" }
 ];

package/lib/maps/vectorMaps.js

@@ -71,58 +71,64 @@ function useVectorMap(options) {
         if (!mapDivVisible || !divRef) {
             return;
         }
-        const m = new maplibre_gl_1.default.Map({
-            container: divRef,
-            bounds: bounds,
-            scrollZoom: scrollZoom === false ? false : true,
-            dragPan: dragPan === false ? false : true,
-            touchZoomRotate: touchZoomRotate === false ? false : true,
-            attributionControl: false,
-            boxZoom: false,
-            style: {
-                version: 8,
-                layers: [],
-                sources: {}
-            },
-            // Prevent scrolling outside of world bounds
-            maxBounds: [
-                [-179.9, -85],
-                [179.9, 85] // Northeast coordinates
-            ],
-            preserveDrawingBuffer: printingModeEnabled
-        });
-        setHasWebGLContext(true);
-        // Add listener for losing context
-        m.on("webglcontextlost", () => {
-            console.warn("Lost WebGL context");
-            setHasWebGLContext(false);
-        });
-        // Add zoom controls to the map.
-        m.addControl(new maplibre_gl_1.default.NavigationControl({}), "top-left");
-        // Add scale control
-        const scale = new maplibre_gl_1.default.ScaleControl({
-            unit: "metric"
-        });
-        m.addControl(scale);
-        // Speed up wheel scrolling
-        m.scrollZoom.setWheelZoomRate(1 / 250);
-        // Dynamically load symbols
-        m.on("styleimagemissing", function (ev) {
-            // Check if known
-            const mapSymbol = mapSymbols_1.mapSymbols.find((s) => s.value == ev.id);
-            if (mapSymbol) {
-                m.loadImage(mapSymbol.url, (err, image) => {
-                    if (image && !m.hasImage(mapSymbol.value)) {
-                        m.addImage(mapSymbol.value, image, { sdf: true });
-                    }
-                });
-            }
-        });
-        setMap(m);
-        return () => {
-            m.remove();
-            setHasWebGLContext(false);
-        };
+        try {
+            const m = new maplibre_gl_1.default.Map({
+                container: divRef,
+                bounds: bounds,
+                scrollZoom: scrollZoom === false ? false : true,
+                dragPan: dragPan === false ? false : true,
+                touchZoomRotate: touchZoomRotate === false ? false : true,
+                attributionControl: false,
+                boxZoom: false,
+                style: {
+                    version: 8,
+                    layers: [],
+                    sources: {}
+                },
+                // Prevent scrolling outside of world bounds
+                maxBounds: [
+                    [-179.9, -85],
+                    [179.9, 85] // Northeast coordinates
+                ],
+                preserveDrawingBuffer: printingModeEnabled
+            });
+            setHasWebGLContext(true);
+            // Add listener for losing context
+            m.on("webglcontextlost", () => {
+                console.warn("Lost WebGL context");
+                setHasWebGLContext(false);
+            });
+            // Add zoom controls to the map.
+            m.addControl(new maplibre_gl_1.default.NavigationControl({}), "top-left");
+            // Add scale control
+            const scale = new maplibre_gl_1.default.ScaleControl({
+                unit: "metric"
+            });
+            m.addControl(scale);
+            // Speed up wheel scrolling
+            m.scrollZoom.setWheelZoomRate(1 / 250);
+            // Dynamically load symbols
+            m.on("styleimagemissing", function (ev) {
+                // Check if known
+                const mapSymbol = mapSymbols_1.mapSymbols.find((s) => s.value == ev.id);
+                if (mapSymbol) {
+                    m.loadImage(mapSymbol.url, (err, image) => {
+                        if (image && !m.hasImage(mapSymbol.value)) {
+                            m.addImage(mapSymbol.value, image, { sdf: true });
+                        }
+                    });
+                }
+            });
+            setMap(m);
+            return () => {
+                m.remove();
+                setHasWebGLContext(false);
+            };
+        }
+        catch (e) {
+            console.error("Error loading map", e);
+            alert(T `Error loading map. Please check that your browser and drivers are updated.`);
+        }
     }, [mapReloadCount]);
     return map;
 }
@@ -191,13 +197,13 @@ function useBaseStyle(baseLayer) {
             });
         }
         if (baseLayer == "cartodb_positron") {
-            loadStyle(`https://api.maptiler.com/maps/positron/style.json?key=${mapTilerApiKey}`);
+            loadStyle(`https://api.maptiler.com/maps/5f972163-6078-4341-982a-5c8bc4447e68/style.json?key=${mapTilerApiKey}`);
         }
         else if (baseLayer == "cartodb_dark_matter") {
-            loadStyle(`https://api.maptiler.com/maps/darkmatter/style.json?key=${mapTilerApiKey}`);
+            loadStyle(`https://api.maptiler.com/maps/1d3e957b-c546-4791-b9de-dce203538429/style.json?key=${mapTilerApiKey}`);
         }
         else if (baseLayer == "bing_road") {
-            loadStyle(`https://api.maptiler.com/maps/streets/style.json?key=${mapTilerApiKey}`);
+            loadStyle(`https://api.maptiler.com/maps/streets-v2/style.json?key=${mapTilerApiKey}`);
         }
         else if (baseLayer == "bing_aerial") {
             // Switched to Bing for superior aerial imagery

package/lib/quickfilter/QuickfiltersComponent.d.ts

@@ -1,4 +1,3 @@
-import PropTypes from "prop-types";
 import React from "react";
 import { DataSource, LocalizedString, Schema } from "@mwater/expressions";
 import IdArrayQuickfilterComponent from "./IdArrayQuickfilterComponent";
@@ -52,9 +51,7 @@ interface EnumQuickfilterComponentProps {
 }
 /** Quickfilter for an enum */
 declare class EnumQuickfilterComponent extends React.Component<EnumQuickfilterComponentProps> {
-    static contextTypes: {
-        locale: PropTypes.Requireable<string>;
-    };
+    static contextType: React.Context<string>;
     handleSingleChange: (val: any) => any;
     handleMultiChange: (val: any) => any;
     renderSingleSelect(options: any[]): React.FunctionComponentElement<Omit<import("react-select/dist/declarations/src/Select").PublicBaseSelectProps<unknown, boolean, import("react-select").GroupBase<unknown>>, "value" | "onChange" | "inputValue" | "menuIsOpen" | "onInputChange" | "onMenuOpen" | "onMenuClose"> & Partial<import("react-select/dist/declarations/src/Select").PublicBaseSelectProps<unknown, boolean, import("react-select").GroupBase<unknown>>> & import("react-select/dist/declarations/src/useStateManager").StateManagerAdditionalProps<unknown> & React.RefAttributes<import("react-select/dist/declarations/src/Select").default<unknown, boolean, import("react-select").GroupBase<unknown>>>>;