From 6fbd68f4c7f03abcb58677d7419670e5330e8165 Mon Sep 17 00:00:00 2001 From: Jacob Wartofsky Date: Wed, 3 Sep 2025 16:08:38 -0400 Subject: [PATCH 1/2] WIP: Add iframeWindow prop to Location Map Still trying to figure out how to get this integrated for all map types. --- .../src/components/map/map.tsx | 17 ++++++--- .../src/components/map/types.ts | 1 + .../pages-components/src/map/providerMap.ts | 1 + .../src/map/providers/mapbox.ts | 38 +++++++++++++------ 4 files changed, 39 insertions(+), 18 deletions(-) diff --git a/packages/pages-components/src/components/map/map.tsx b/packages/pages-components/src/components/map/map.tsx index e3eb2d2e..ca71299e 100644 --- a/packages/pages-components/src/components/map/map.tsx +++ b/packages/pages-components/src/components/map/map.tsx @@ -11,6 +11,7 @@ import { Map as MapType, MapOptions } from "../../map/map.js"; import { GeoBounds } from "../../map/geoBounds.js"; import { Coordinate } from "../../map/coordinate.js"; import type { MapProps, MapContextType } from "./types.js"; +import {MapProvider} from "../../map/mapProvider.js"; export const MapContext = createContext(null); @@ -40,6 +41,7 @@ export const Map = ({ provider = GoogleMaps, providerOptions = {}, singleZoom = 14, + iframeWindow, }: MapProps) => { const wrapper = useRef(null); @@ -107,12 +109,15 @@ export const Map = ({ return; } - provider - .load(apiKey, { - ...providerOptions, - ...(clientKey && { client: clientKey }), - }) - .then(() => setLoaded(true)); + if (provider instanceof MapProvider) { + provider + .load(apiKey, { + ...providerOptions, + iframeWindow: iframeWindow, + ...(clientKey && {client: clientKey}), + }) + .then(() => setLoaded(true)); + } }, []); return ( diff --git a/packages/pages-components/src/components/map/types.ts b/packages/pages-components/src/components/map/types.ts index 214e1835..ee55a640 100644 --- a/packages/pages-components/src/components/map/types.ts +++ b/packages/pages-components/src/components/map/types.ts @@ -39,6 +39,7 @@ export interface MapProps { provider?: MapProvider; providerOptions?: { [key: string]: any }; singleZoom?: number; + iframeWindow?: Window; } // Marker diff --git a/packages/pages-components/src/map/providerMap.ts b/packages/pages-components/src/map/providerMap.ts index 5f7e6455..e4740bf1 100644 --- a/packages/pages-components/src/map/providerMap.ts +++ b/packages/pages-components/src/map/providerMap.ts @@ -16,6 +16,7 @@ class ProviderMapOptions { panHandler: PanHandler; panStartHandler: PanStartHandler; providerOptions: { [key: string]: any }; + iframeWindow?: Window; constructor(provider: MapProvider, wrapper: HTMLElement | null) { assertInstance(provider, MapProvider); diff --git a/packages/pages-components/src/map/providers/mapbox.ts b/packages/pages-components/src/map/providers/mapbox.ts index dc05bb4d..5f92da47 100644 --- a/packages/pages-components/src/map/providers/mapbox.ts +++ b/packages/pages-components/src/map/providers/mapbox.ts @@ -1,21 +1,27 @@ -import { Coordinate } from "../coordinate.js"; -import { MapProviderOptions } from "../mapProvider.js"; -import { ProviderMap, ProviderMapOptions } from "../providerMap.js"; -import { HTMLProviderPin, ProviderPinOptions } from "../providerPin.js"; -import { Map } from "../map.js"; -import type { Map as MapType, Marker as MarkerType } from "mapbox-gl"; +import {Coordinate} from "../coordinate.js"; +import {MapProviderOptions} from "../mapProvider.js"; +import {ProviderMap, ProviderMapOptions} from "../providerMap.js"; +import {HTMLProviderPin, ProviderPinOptions} from "../providerPin.js"; +import {Map} from "../map.js"; +import type {Map as MapType, Marker as MarkerType} from "mapbox-gl"; +import mapboxgl from "mapbox-gl"; // GENERATOR TODO: call map resize method when hidden/shown (CoreBev, used to be done in Core.js) // Map Class class MapboxMap extends ProviderMap { + instance: mapboxgl; map?: MapType; constructor(options: ProviderMapOptions) { super(options); + this.instance = (options.iframeWindow as Window & { + mapboxgl?: typeof mapboxgl + })?.mapboxgl ?? mapboxgl; + if (options.wrapper) { - this.map = new mapboxgl.Map({ + this.map = new this.instance.Map({ container: options.wrapper, interactive: options.controlEnabled, style: "mapbox://styles/mapbox/streets-v9", @@ -25,7 +31,7 @@ class MapboxMap extends ProviderMap { // Add the zoom control if (options.controlEnabled) { - const zoomControl = new mapboxgl.NavigationControl({ + const zoomControl = new this.instance.NavigationControl({ showCompass: false, }); this.map?.addControl(zoomControl); @@ -55,7 +61,7 @@ class MapboxMap extends ProviderMap { * {@inheritDoc ProviderMap.setCenter} */ setCenter(coordinate: Coordinate, animated: boolean) { - const center = new mapboxgl.LngLat( + const center = new this.instance.LngLat( coordinate.longitude, coordinate.latitude ); @@ -80,7 +86,7 @@ class MapboxMap extends ProviderMap { * {@inheritDoc ProviderMap.zetZoomCenter} */ setZoomCenter(zoom: number, coordinate: Coordinate, animated: boolean) { - const center = new mapboxgl.LngLat( + const center = new this.instance.LngLat( coordinate.longitude, coordinate.latitude ); @@ -96,13 +102,18 @@ class MapboxMap extends ProviderMap { // Pin Class class MapboxPin extends HTMLProviderPin { + instance: mapboxgl; pin?: MarkerType; constructor(options: ProviderPinOptions) { super(options); + this.instance = (options?.iframeWindow as Window & { + mapboxgl?: typeof mapboxgl + })?.mapboxgl ?? mapboxgl; + if (this._wrapper) { this._wrapper.style.position = "relative"; - this.pin = new mapboxgl.Marker({ + this.pin = new this.instance.Marker({ anchor: "top-left", element: this._wrapper, }); @@ -149,10 +160,13 @@ function load( resolve: () => void, _: () => void, apiKey: string, + options: any, { version = "v1.13.0" } = {} ) { const baseUrl = `https://api.mapbox.com/mapbox-gl-js/${version}/mapbox-gl`; + const mapboxInstance = (options?.iframeWindow as Window & { mapboxgl?: typeof mapboxgl })?.mapboxgl ?? mapboxgl; + const mapStyle = document.createElement("link"); mapStyle.rel = "stylesheet"; mapStyle.href = baseUrl + ".css"; @@ -160,7 +174,7 @@ function load( const mapScript = document.createElement("script"); mapScript.src = baseUrl + ".js"; mapScript.onload = () => { - (mapboxgl as any).accessToken = apiKey; + mapboxInstance.accessToken = apiKey; resolve(); }; From 2e3e2f705b12bbd1d1597d60c255eaec6cbcbbd4 Mon Sep 17 00:00:00 2001 From: github-actions <41898282+github-actions[bot]@users.noreply.github.com> Date: Wed, 3 Sep 2025 20:10:31 +0000 Subject: [PATCH 2/2] Automated linting/prettier update --- packages/pages-components/CHANGELOG.md | 2 +- .../src/components/map/map.tsx | 14 ++++---- .../src/map/providers/mapbox.ts | 34 ++++++++++++------- 3 files changed, 29 insertions(+), 21 deletions(-) diff --git a/packages/pages-components/CHANGELOG.md b/packages/pages-components/CHANGELOG.md index e748b4b9..e4ee8031 100644 --- a/packages/pages-components/CHANGELOG.md +++ b/packages/pages-components/CHANGELOG.md @@ -2,7 +2,7 @@ ##### Bug Fixes -* **pages-components:** strip empty destinationUrl (#105) (fc95a5d5) +- **pages-components:** strip empty destinationUrl (#105) (fc95a5d5) #### 1.1.11 (2025-08-22) diff --git a/packages/pages-components/src/components/map/map.tsx b/packages/pages-components/src/components/map/map.tsx index ca71299e..37afe4fa 100644 --- a/packages/pages-components/src/components/map/map.tsx +++ b/packages/pages-components/src/components/map/map.tsx @@ -11,7 +11,7 @@ import { Map as MapType, MapOptions } from "../../map/map.js"; import { GeoBounds } from "../../map/geoBounds.js"; import { Coordinate } from "../../map/coordinate.js"; import type { MapProps, MapContextType } from "./types.js"; -import {MapProvider} from "../../map/mapProvider.js"; +import { MapProvider } from "../../map/mapProvider.js"; export const MapContext = createContext(null); @@ -111,12 +111,12 @@ export const Map = ({ if (provider instanceof MapProvider) { provider - .load(apiKey, { - ...providerOptions, - iframeWindow: iframeWindow, - ...(clientKey && {client: clientKey}), - }) - .then(() => setLoaded(true)); + .load(apiKey, { + ...providerOptions, + iframeWindow: iframeWindow, + ...(clientKey && { client: clientKey }), + }) + .then(() => setLoaded(true)); } }, []); diff --git a/packages/pages-components/src/map/providers/mapbox.ts b/packages/pages-components/src/map/providers/mapbox.ts index 5f92da47..12eda241 100644 --- a/packages/pages-components/src/map/providers/mapbox.ts +++ b/packages/pages-components/src/map/providers/mapbox.ts @@ -1,9 +1,9 @@ -import {Coordinate} from "../coordinate.js"; -import {MapProviderOptions} from "../mapProvider.js"; -import {ProviderMap, ProviderMapOptions} from "../providerMap.js"; -import {HTMLProviderPin, ProviderPinOptions} from "../providerPin.js"; -import {Map} from "../map.js"; -import type {Map as MapType, Marker as MarkerType} from "mapbox-gl"; +import { Coordinate } from "../coordinate.js"; +import { MapProviderOptions } from "../mapProvider.js"; +import { ProviderMap, ProviderMapOptions } from "../providerMap.js"; +import { HTMLProviderPin, ProviderPinOptions } from "../providerPin.js"; +import { Map } from "../map.js"; +import type { Map as MapType, Marker as MarkerType } from "mapbox-gl"; import mapboxgl from "mapbox-gl"; // GENERATOR TODO: call map resize method when hidden/shown (CoreBev, used to be done in Core.js) @@ -16,9 +16,12 @@ class MapboxMap extends ProviderMap { constructor(options: ProviderMapOptions) { super(options); - this.instance = (options.iframeWindow as Window & { - mapboxgl?: typeof mapboxgl - })?.mapboxgl ?? mapboxgl; + this.instance = + ( + options.iframeWindow as Window & { + mapboxgl?: typeof mapboxgl; + } + )?.mapboxgl ?? mapboxgl; if (options.wrapper) { this.map = new this.instance.Map({ @@ -107,9 +110,12 @@ class MapboxPin extends HTMLProviderPin { constructor(options: ProviderPinOptions) { super(options); - this.instance = (options?.iframeWindow as Window & { - mapboxgl?: typeof mapboxgl - })?.mapboxgl ?? mapboxgl; + this.instance = + ( + options?.iframeWindow as Window & { + mapboxgl?: typeof mapboxgl; + } + )?.mapboxgl ?? mapboxgl; if (this._wrapper) { this._wrapper.style.position = "relative"; @@ -165,7 +171,9 @@ function load( ) { const baseUrl = `https://api.mapbox.com/mapbox-gl-js/${version}/mapbox-gl`; - const mapboxInstance = (options?.iframeWindow as Window & { mapboxgl?: typeof mapboxgl })?.mapboxgl ?? mapboxgl; + const mapboxInstance = + (options?.iframeWindow as Window & { mapboxgl?: typeof mapboxgl }) + ?.mapboxgl ?? mapboxgl; const mapStyle = document.createElement("link"); mapStyle.rel = "stylesheet";