@hpcc-js/map 3.6.1 → 3.6.3

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@hpcc-js/map",
-    "version": "3.6.1",
+    "version": "3.6.3",
     "description": "hpcc-js - Viz Map",
     "type": "module",
     "main": "./dist/index.umd.cjs",
@@ -41,15 +41,17 @@
         "update-major": "npx --yes npm-check-updates -u"
     },
     "dependencies": {
-        "@hpcc-js/api": "^3.5.1",
-        "@hpcc-js/common": "^3.8.1",
-        "@hpcc-js/graph": "^3.8.1",
-        "@hpcc-js/layout": "^3.6.1",
-        "@hpcc-js/other": "^3.6.1",
-        "@hpcc-js/util": "^3.6.1"
+        "@hpcc-js/api": "^3.5.3",
+        "@hpcc-js/common": "^3.8.3",
+        "@hpcc-js/graph": "^3.8.3",
+        "@hpcc-js/layout": "^3.6.3",
+        "@hpcc-js/other": "^3.6.3",
+        "@hpcc-js/util": "^3.6.3"
     },
     "devDependencies": {
-        "@hpcc-js/esbuild-plugins": "^1.9.1",
+        "@googlemaps/js-api-loader": "2.1.1",
+        "@hpcc-js/esbuild-plugins": "^1.9.3",
+        "@types/google.maps": "3.65.1",
         "@types/leaflet-draw": "1.0.13",
         "@types/leaflet.heat": "0.2.5",
         "@types/leaflet.markercluster": "1.5.6",
@@ -61,7 +63,6 @@
         "d3-request": "^1",
         "d3-selection": "^1",
         "d3-tile": "^1",
-        "google-maps": "4.3.3",
         "leaflet-draw": "1.0.4",
         "leaflet.heat": "0.2.0",
         "leaflet.markercluster": "1.5.3",
@@ -79,5 +80,5 @@
         "url": "https://github.com/hpcc-systems/Visualization/issues"
     },
     "homepage": "https://github.com/hpcc-systems/Visualization",
-    "gitHead": "0cfcae9b4ccbd0b3c9f21381f4581bf121392585"
+    "gitHead": "5ca0d9bcf343ba823fb0c9dc0d9273efb9f5ea83"
 }

package/src/GMap.ts

@@ -2,7 +2,7 @@ import { HTMLWidget } from "@hpcc-js/common";
 import { AbsoluteSurface } from "@hpcc-js/layout";
 import { promiseTimeout } from "@hpcc-js/util";
 import { map as d3Map } from "d3-collection";
-import { Loader } from "google-maps";
+import { importLibrary, setOptions } from "@googlemaps/js-api-loader";
 
 import "../src/GMap.css";
 
@@ -29,9 +29,16 @@ export function requireGoogleMap(customGoogle?: any) {
                     console.warn("__hpcc_gmap_apikey does not contain a valid API key, reverting to developers key (expect limited performance)");
                 }
                 try {
-                    const loader = new Loader(window.__hpcc_gmap_apikey || "AIzaSyDwGn2i1i_pMZvnqYJN1BksD_tjYaCOWKg", { libraries: ["geometry", "drawing"] });
-                    loader.load().then(function (_google) {
-                        google = _google;
+                    setOptions({
+                        key: window.__hpcc_gmap_apikey || "AIzaSyDwGn2i1i_pMZvnqYJN1BksD_tjYaCOWKg",
+                        libraries: ["geometry", "drawing"]
+                    });
+                    Promise.all([
+                        importLibrary("maps"),
+                        importLibrary("geometry"),
+                        importLibrary("drawing")
+                    ]).then(function () {
+                        google = window.google;
                         resolve();
                     }).catch(function (e) {
                         console.warn(`Failed to initialize Google Map API:  ${e.message}`);
@@ -334,6 +341,7 @@ export class GMap extends HTMLWidget {
     _circleMap;
     _pinMap;
     _drawingManager;
+    _drawingWarningShown;
     _prevCenterAddress;
     _userShapeSelection;
 
@@ -471,17 +479,25 @@ export class GMap extends HTMLWidget {
             editable: true,
             clickable: true
         };
-        this._drawingManager = new google.maps.drawing.DrawingManager({
-            drawingMode: google.maps.drawing.OverlayType.MARKER,
-            drawingControl: true,
-            drawingControlOptions: {
-                position: google.maps.ControlPosition.TOP_CENTER,
-                drawingModes: ["polygon", "rectangle", "circle"]
-            },
-            rectangleOptions: defOptions,
-            circleOptions: defOptions,
-            polygonOptions: defOptions
-        });
+        this._drawingManager = null;
+        this._drawingWarningShown = false;
+        if (google?.maps?.drawing?.DrawingManager && google?.maps?.drawing?.OverlayType) {
+            try {
+                this._drawingManager = new google.maps.drawing.DrawingManager({
+                    drawingMode: google.maps.drawing.OverlayType.MARKER,
+                    drawingControl: true,
+                    drawingControlOptions: {
+                        position: google.maps.ControlPosition.TOP_CENTER,
+                        drawingModes: ["polygon", "rectangle", "circle"]
+                    },
+                    rectangleOptions: defOptions,
+                    circleOptions: defOptions,
+                    polygonOptions: defOptions
+                });
+            } catch (e) {
+                console.warn(`Google DrawingManager unavailable:  ${e.message}`);
+            }
+        }
 
         if (this.drawingState()) {
             this._userShapes.load(this.drawingState());
@@ -546,19 +562,24 @@ export class GMap extends HTMLWidget {
         }
 
         // Enable or disable drawing tools.
-        if (this.drawingTools()) {
-            this._drawingManager.setMap(this._googleMap);
-
-            // Add drawing complete listener to maintain array of drawingState.
-            google.maps.event.addListener(
-                this._drawingManager,
-                "overlaycomplete",
-                function () {
-                    GMap.prototype.onDrawingComplete.apply(context, arguments);
-                });
-        } else {
-            this._drawingManager.setMap(null);
-            google.maps.event.clearInstanceListeners(this._drawingManager);
+        if (this._drawingManager) {
+            if (this.drawingTools()) {
+                this._drawingManager.setMap(this._googleMap);
+
+                // Add drawing complete listener to maintain array of drawingState.
+                google.maps.event.addListener(
+                    this._drawingManager,
+                    "overlaycomplete",
+                    function () {
+                        GMap.prototype.onDrawingComplete.apply(context, arguments);
+                    });
+            } else {
+                this._drawingManager.setMap(null);
+                google.maps.event.clearInstanceListeners(this._drawingManager);
+            }
+        } else if (this.drawingTools() && !this._drawingWarningShown) {
+            this._drawingWarningShown = true;
+            console.warn("Google Drawing tools requested, but DrawingManager is unavailable.");
         }
     }
 
@@ -736,7 +757,9 @@ export class GMap extends HTMLWidget {
         if (!arguments.length) {
             return this._drawingManager;
         }
-        this._drawingManager.setOptions(_);
+        if (this._drawingManager) {
+            this._drawingManager.setOptions(_);
+        }
         return this;
     }
 
@@ -760,6 +783,9 @@ export class GMap extends HTMLWidget {
     }
 
     onDrawingComplete(event) {
+        if (!this._drawingManager || !google?.maps?.drawing?.OverlayType) {
+            return;
+        }
         if (event.type !== google.maps.drawing.OverlayType.MARKER) {
             this._drawingManager.setDrawingMode(null);
             const newShape = event.overlay;

package/src/leaflet/GMap.ts

@@ -1,5 +1,3 @@
-import * as _GoogleMapsLoader from "google-maps";
-
 import { GoogleMutant, Map } from "./leaflet-shim.ts";
 import { requireGoogleMap } from "../GMap.ts";
 import { TileLayer } from "./TileLayer.ts";

package/types/GMap.d.ts

@@ -20,6 +20,7 @@ export declare class GMap extends HTMLWidget {
     _circleMap: any;
     _pinMap: any;
     _drawingManager: any;
+    _drawingWarningShown: any;
     _prevCenterAddress: any;
     _userShapeSelection: any;
     constructor();