Merge branch 'develop' into add-bg-to-right-buttons

packages/geoview-core/src/api/event-processors/event-processor-children/app-event-processor.ts

@@ -113,7 +113,7 @@ export class AppEventProcessor extends AbstractEventProcessor {
    */
   static async setGuide(mapId: string): Promise<void> {
     const language = AppEventProcessor.getDisplayLanguage(mapId);
-    const guide = await createGuideObject(mapId, language);
+    const guide = await createGuideObject(mapId, language, this.getAppState(mapId).geoviewAssetsURL);
     if (guide !== undefined) this.getAppState(mapId).setterActions.setGuide(guide);
   }
 

packages/geoview-core/src/api/plugin/plugin.ts

@@ -4,7 +4,7 @@ import * as translate from 'react-i18next';
 import { useTheme } from '@mui/material/styles';
 import Ajv from 'ajv';
 
-import { whenThisThen } from '@/core/utils/utilities';
+import { whenThisThen, getScriptAndAssetURL } from '@/core/utils/utilities';
 import { api } from '@/app';
 import { TypeJsonObject, TypeJsonValue } from '@/core/types/global-types';
 import { logger } from '@/core/utils/logger';
@@ -35,25 +35,8 @@ export abstract class Plugin {
       const existingScript = document.getElementById(pluginId);
 
       if (!existingScript) {
-        // get all loaded js scripts on the page
-        const scripts = document.getElementsByTagName('script');
-        let scriptPath: string | null = null;
-
-        if (scripts && scripts.length) {
-          // go through all loaded scripts on the page
-          for (let scriptIndex = 0; scriptIndex < scripts.length; scriptIndex++) {
-            // search for the core script
-            if (scripts[scriptIndex].src.includes('cgpv-main')) {
-              // get the src of the core script
-              const { src } = scripts[scriptIndex];
-
-              // extract the host from the loaded core script
-              scriptPath = src.substring(0, src.lastIndexOf('/'));
-
-              break;
-            }
-          }
-        }
+        // Get the main script URL
+        const scriptPath = getScriptAndAssetURL();
 
         // create a script element
         const script = document.createElement('script');

packages/geoview-core/src/core/stores/store-interface-and-intial-values/app-state.ts

@@ -6,6 +6,7 @@ import { TypeSetStore, TypeGetStore } from '@/core/stores/geoview-store';
 import { NotificationDetailsType } from '@/core/components/notifications/notifications';
 import { TypeHTMLElement, TypeMapFeaturesConfig } from '@/core/types/global-types';
 import { logger } from '@/core/utils/logger';
+import { getScriptAndAssetURL } from '@/core/utils/utilities';
 
 // GV Important: See notes in header of MapEventProcessor file for information on the paradigm to apply when working with AppEventProcessor vs AppState
 
@@ -19,6 +20,7 @@ export interface IAppState {
   guide: TypeGuideObject | undefined;
   geolocatorServiceURL: string | undefined;
   geoviewHTMLElement: HTMLElement;
+  geoviewAssetsURL: string;
   isCircularProgressActive: boolean;
   isCrosshairsActive: boolean;
   isFullscreenActive: boolean;
@@ -61,6 +63,7 @@ export function initializeAppState(set: TypeSetStore, get: TypeGetStore): IAppSt
     guide: {},
     geolocatorServiceURL: '',
     geoviewHTMLElement: document.createElement('div'), // create an empty div before real one is assigned
+    geoviewAssetsURL: getScriptAndAssetURL(),
     isCircularProgressActive: false,
     isCrosshairsActive: false,
     isFullscreenActive: false,
@@ -263,6 +266,7 @@ export const useAppFullscreenActive = (): boolean => useStore(useGeoViewStore(),
 export const useAppGeolocatorServiceURL = (): string | undefined =>
   useStore(useGeoViewStore(), (state) => state.appState.geolocatorServiceURL);
 export const useAppGeoviewHTMLElement = (): HTMLElement => useStore(useGeoViewStore(), (state) => state.appState.geoviewHTMLElement);
+export const useAppGeoviewAssetsURL = (): string => useStore(useGeoViewStore(), (state) => state.appState.geoviewAssetsURL);
 export const useAppGuide = (): TypeGuideObject | undefined => useStore(useGeoViewStore(), (state) => state.appState.guide);
 export const useAppNotifications = (): NotificationDetailsType[] => useStore(useGeoViewStore(), (state) => state.appState.notifications);
 

packages/geoview-core/src/core/utils/utilities.ts

@@ -43,6 +43,34 @@ export function getLocalizedMessage(localizedKey: string, language: TypeDisplayL
   return trans(localizedKey);
 }
 
+/**
+ * Get the URL of main script cgpv-main so we can access the assets
+ * @returns {string} the URL of the main script
+ */
+export function getScriptAndAssetURL(): string {
+  // get all loaded js scripts on the page
+  const scripts = document.getElementsByTagName('script');
+  let scriptPath: string = '';
+
+  if (scripts && scripts.length) {
+    // go through all loaded scripts on the page
+    for (let scriptIndex = 0; scriptIndex < scripts.length; scriptIndex++) {
+      // search for the core script
+      if (scripts[scriptIndex].src.includes('cgpv-main')) {
+        // get the src of the core script
+        const { src } = scripts[scriptIndex];
+
+        // extract the host from the loaded core script
+        scriptPath = src.substring(0, src.lastIndexOf('/'));
+
+        break;
+      }
+    }
+  }
+
+  return scriptPath;
+}
+
 /**
  * Generate a unique id if an id was not provided
  * @param {string} id an id to return if it was already passed
@@ -416,13 +444,17 @@ function getSectionHeading(content: string): string {
  * @param {TypeDisplayLanguage} language - Language to use for guide.
  * @returns {Promise<TypeGuideObject | undefined>} The guide object
  */
-export async function createGuideObject(mapId: string, language: TypeDisplayLanguage): Promise<TypeGuideObject | undefined> {
+export async function createGuideObject(
+  mapId: string,
+  language: TypeDisplayLanguage,
+  assetsURL: string
+): Promise<TypeGuideObject | undefined> {
   try {
-    const response = await fetch(`./locales/${language}/guide.md`);
+    const response = await fetch(`${assetsURL}/locales/${language}/guide.md`);
     const content = await response.text();
 
-    // Split by first level sections (Split with =1!<key>=)
-    const sections = content.split(/=(?=1!)(.*?)=/);
+    // Split by first level sections (Split with =1!<key>=) AND set URL for images from the assetURL
+    const sections = content.replaceAll('{{assetsURL}}', assetsURL).split(/=(?=1!)(.*?)=/);
 
     if (!sections[0].trim()) {
       sections.shift();

packages/geoview-core/src/geo/layer/geometry/geometry.ts

@@ -9,7 +9,7 @@ import { asArray, asString } from 'ol/color';
 
 import { MapViewer } from '@/geo/map/map-viewer';
 import EventHelper, { EventDelegateBase } from '@/api/events/event-helper';
-import { generateId, setAlphaColor } from '@/core/utils/utilities';
+import { generateId, setAlphaColor, getScriptAndAssetURL } from '@/core/utils/utilities';
 import { TypeStyleGeometry } from '@/geo/map/map-schema-types';
 import { Projection } from '@/geo/utils/projection';
 import { MapEventProcessor } from '@/api/event-processors/event-processor-children/map-event-processor';
@@ -342,7 +342,7 @@ export class GeometryApi {
         scale: 0.1,
         anchorXUnits: 'fraction',
         anchorYUnits: 'pixels',
-        src: './img/Marker.png',
+        src: `${getScriptAndAssetURL()}/img/Marker.png`,
       },
     };