pass iframe window instead of mapbox-specific instance

Author: briantstephan

packages/pages-components/src/components/map/map.tsx

@@ -84,9 +84,7 @@ export const Map = ({
 
     const iframeWindow = typeof document !== "undefined"
         ? (document.getElementById("preview-frame") as HTMLIFrameElement).contentWindow ?? undefined
-        : undefined
-    const mapboxInstance = (iframeWindow as Window & { mapboxgl?: typeof mapboxgl })?.mapboxgl ?? mapboxgl;
-    mapboxInstance.accessToken = apiKey ?? "";
+        : undefined;
 
     const newMap = new MapOptions()
       .withControlEnabled(controls)
@@ -99,7 +97,8 @@ export const Map = ({
       .withProviderOptions(providerOptions)
       .withSinglePinZoom(singleZoom)
       .withWrapper(wrapper.current)
-      .withInstance(mapboxInstance)
+      .withIframeWindow(iframeWindow)
+      .withApiKey(apiKey)
       .build();
 
     setMap(newMap);

packages/pages-components/src/map/map.ts

@@ -60,7 +60,8 @@ class MapOptions {
   providerOptions: ProviderMapOptions | object;
   singlePinZoom: number;
   wrapper: HTMLElement | null;
-  instance: typeof mapboxgl;
+  iframeWindow: Window | undefined;
+  apiKey: string | undefined;
   /**
    * Initialize with default options
    */
@@ -81,7 +82,6 @@ class MapOptions {
     this.providerOptions = {};
     this.singlePinZoom = 14;
     this.wrapper = null;
-    this.instance = mapboxgl;
   }
 
   /**
@@ -192,8 +192,20 @@ class MapOptions {
     return this;
   }
 
-  withInstance(instance: typeof mapboxgl): MapOptions {
-    this.instance = instance;
+  /**
+   * @param iframeWindow - The window of the iframe that the map will be rendered in.
+   *  This is only necessary if the map is being rendered in an iframe.
+   */
+  withIframeWindow(iframeWindow: Window | undefined): MapOptions {
+    this.iframeWindow = iframeWindow;
+    return this;
+  }
+
+  /**
+   * @param apiKey - The API key to use for the map provider, if required.
+   */
+  withApiKey(apiKey: string | undefined): MapOptions {
+    this.apiKey = apiKey;
     return this;
   }
 
@@ -230,7 +242,6 @@ class Map {
   _panHandler?: PanHandler;
   _panStartHandler?: PanStartHandler;
   _map: ProviderMap;
-  _instance: typeof mapboxgl;
 
   constructor(options: MapOptions) {
     assertInstance(options, MapOptions);
@@ -279,13 +290,12 @@ class Map {
       .withPanHandler(() => this.panHandler())
       .withPanStartHandler(() => this.panStartHandler())
       .withProviderOptions(options.providerOptions)
-      .withInstance(options.instance)
+      .withIframeWindow(options.iframeWindow)
+      .withApiKey(options.apiKey)
       .build();
 
     this.setZoomCenter(this._defaultZoom, this._defaultCenter);
     this._currentBounds = this.getBounds();
-
-    this._instance = options.instance;
   }
 
   /**
@@ -401,7 +411,7 @@ class Map {
    *   instance with the same provider as this map
    */
   newPinOptions(): MapPinOptions {
-    return new MapPinOptions().withProvider(this._provider).withInstance(this._instance);
+    return new MapPinOptions().withProvider(this._provider);
   }
 
   /**

packages/pages-components/src/map/mapPin.ts

@@ -24,7 +24,6 @@ class MapPinOptions {
   provider: MapProvider | null;
   type: string;
   hasPinUrl: boolean;
-  instance: typeof mapboxgl;
 
   constructor() {
     this.coordinate = new Coordinate(0, 0);
@@ -34,7 +33,6 @@ class MapPinOptions {
     this.provider = null;
     this.type = "";
     this.hasPinUrl = false;
-    this.instance = mapboxgl;
   }
 
   /**
@@ -97,14 +95,6 @@ class MapPinOptions {
     return this;
   }
 
-  /**
-   * @param instance - The mapboxgl instance to use, in case it's loaded in an iframe
-   */
-  withInstance(instance: typeof mapboxgl): MapPinOptions {
-    this.instance = instance;
-    return this;
-  }
-
   build(): MapPin {
     return new MapPin(this);
   }
@@ -130,7 +120,6 @@ class MapPin {
   _map: Map | null;
   _pin: ProviderPin;
   _status: object;
-  _instance: typeof mapboxgl;
 
   constructor(options: MapPinOptions) {
     assertInstance(options, MapPinOptions);
@@ -165,15 +154,12 @@ class MapPin {
       .withFocusHandler((focused: boolean) => this._focusHandler(focused))
       .withHoverHandler((hovered: boolean) => this._hoverHandler(hovered))
       .withHasPinUrl(options.hasPinUrl)
-      .withInstance(options.instance)
       .build();
 
     this._pin.setCoordinate(options.coordinate);
 
     this._status = {};
     this.setStatus(this._status);
-
-    this._instance = options.instance;
   }
 
   /**

packages/pages-components/src/map/providerMap.ts

@@ -16,7 +16,8 @@ class ProviderMapOptions {
   panHandler: PanHandler;
   panStartHandler: PanStartHandler;
   providerOptions: { [key: string]: any };
-  instance: typeof mapboxgl;
+  iframeWindow: Window | undefined;
+  apiKey: string | undefined;
 
   constructor(provider: MapProvider, wrapper: HTMLElement | null) {
     assertInstance(provider, MapProvider);
@@ -31,7 +32,6 @@ class ProviderMapOptions {
     this.panHandler = () => null;
     this.panStartHandler = () => null;
     this.providerOptions = {};
-    this.instance = mapboxgl;
   }
 
   /**
@@ -71,8 +71,20 @@ class ProviderMapOptions {
     return this;
   }
 
-  withInstance(instance: typeof mapboxgl): ProviderMapOptions {
-    this.instance = instance;
+  /**
+   * @param iframeWindow - The window of the iframe that the map will be rendered in.
+   *   This is only necessary if the map is being rendered in an iframe.
+   */
+  withIframeWindow(iframeWindow: Window | undefined): ProviderMapOptions {
+    this.iframeWindow = iframeWindow;
+    return this;
+  }
+
+  /**
+   * @param apiKey - The API key to use for the map provider, if required.
+   */
+  withApiKey(apiKey: string | undefined): ProviderMapOptions {
+    this.apiKey = apiKey;
     return this;
   }
 

packages/pages-components/src/map/providers/mapbox.ts

@@ -16,7 +16,9 @@ class MapboxMap extends ProviderMap {
   constructor(options: ProviderMapOptions) {
     super(options);
 
-    this.instance = options.instance;
+    const mapboxInstance = (options?.iframeWindow as Window & { mapboxgl?: typeof mapboxgl })?.mapboxgl ?? mapboxgl;
+    mapboxInstance.accessToken = options?.apiKey ?? "";
+    this.instance = mapboxInstance;
 
     if (options.wrapper) {
       this.map = new this.instance.Map({