Added new configuration for API domain

src/pages/column/@id.page.server.ts

@@ -1,7 +1,7 @@
 import fetch from "node-fetch";
-import { SETTINGS } from "~/settings";
+import { apiV2Prefix } from "~/settings";
 
-const apiAddress = SETTINGS.apiDomain + "/api/v2/units";
+const apiAddress = apiV2Prefix + "/units";
 
 export async function onBeforeRender(pageContext) {
   // `.page.server.js` files always run in Node.js; we could use SQL/ORM queries here.

src/pages/map/map-interface/app-state/handlers/fetch.ts

@@ -1,10 +1,10 @@
 import axios from "axios";
 import { joinURL } from "~/pages/map/map-interface/utils";
-import { SETTINGS } from "~/settings";
+import { SETTINGS, apiV2Prefix } from "~/settings";
 import { ColumnGeoJSONRecord } from "../reducers";
 import { UPDATE_FILTERED_COLUMNS } from "../reducers/filtered-columns";
 
-export const base = `${SETTINGS.apiDomain}/api/v2`;
+export const base = apiV2Prefix;
 const basev1 = `${SETTINGS.gddDomain}/api/v1`;
 const pbdbURL = `${SETTINGS.pbdbDomain}/data1.2/colls/list.json`;
 const pbdbURLOccs = `${SETTINGS.pbdbDomain}/data1.2/occs/list.json`;

src/pages/map/map-interface/app-state/handlers/filters.ts

@@ -1,7 +1,7 @@
 import axios from "axios";
-import { SETTINGS } from "~/settings";
+import { apiV2Prefix } from "~/settings";
 
-export const base = `${SETTINGS.apiDomain}/api/v2`;
+export const base = apiV2Prefix;
 
 export type AddFilter = { type: "add-filter"; filter: FilterData };
 

src/pages/map/map-interface/components/elevation-chart/index.ts

@@ -1,20 +1,20 @@
-import React, { useRef, useEffect } from "react";
+import { Button, Spinner } from "@blueprintjs/core";
+import hyper from "@macrostrat/hyper";
+import { LocationFocusButton } from "@macrostrat/mapbox-react";
+import { useAPIResult } from "@macrostrat/ui-components";
+import { bisector, extent, max, min } from "d3-array";
+import { axisBottom, axisLeft } from "d3-axis";
+import { scaleLinear } from "d3-scale";
+import { mouse, select } from "d3-selection";
+import { area, line } from "d3-shape";
+import React, { useEffect, useRef } from "react";
 import {
   useAppActions,
   useAppState,
 } from "~/pages/map/map-interface/app-state";
-import hyper from "@macrostrat/hyper";
-import { Button, Spinner } from "@blueprintjs/core";
-import { select, mouse } from "d3-selection";
-import { scaleLinear } from "d3-scale";
-import { axisBottom, axisLeft } from "d3-axis";
-import { line, area } from "d3-shape";
-import { min, max, extent, bisector } from "d3-array";
-import { useAPIResult } from "@macrostrat/ui-components";
-import { LocationFocusButton } from "@macrostrat/mapbox-react";
 
+import { apiV2Prefix } from "~/settings";
 import styles from "./main.module.styl";
-import { SETTINGS } from "~/settings";
 const h = hyper.styled(styles);
 
 function drawElevationChart(
@@ -214,15 +214,12 @@ function ElevationChart({ elevationData = [] }) {
 }
 
 function ElevationChartPanel({ startPos, endPos }) {
-  const elevation: any = useAPIResult(
-    SETTINGS.apiDomain + "/api/v2/elevation",
-    {
-      start_lng: startPos[0],
-      start_lat: startPos[1],
-      end_lng: endPos[0],
-      end_lat: endPos[1],
-    }
-  );
+  const elevation: any = useAPIResult(apiV2Prefix + "/elevation", {
+    start_lng: startPos[0],
+    start_lat: startPos[1],
+    end_lng: endPos[0],
+    end_lat: endPos[1],
+  });
   const elevationData = elevation?.success?.data;
   if (elevationData == null) return h(Spinner);
   return h(

src/pages/map/map-interface/map-page/map-styles/map-sources.ts

@@ -1,8 +1,7 @@
-import { useEffect } from "react";
 import { useMapElement } from "@macrostrat/mapbox-react";
 import { useAPIResult } from "@macrostrat/ui-components";
-import { SETTINGS } from "~/settings";
-import { features } from "process";
+import { useEffect } from "react";
+import { apiV2Prefix } from "~/settings";
 
 const sourceMapStyle = {
   version: 8,
@@ -73,10 +72,10 @@ function removeStyle(map, style) {
 
 export function MapSourcesLayer() {
   const map = useMapElement();
-  const featureData: any = useAPIResult(
-    SETTINGS.apiDomain + "/api/v2/defs/sources",
-    { all: true, format: "geojson_bare" }
-  );
+  const featureData: any = useAPIResult(apiV2Prefix + "/defs/sources", {
+    all: true,
+    format: "geojson_bare",
+  });
   useEffect(() => {
     if (!map || !featureData) return;
 

src/pages/map/map-interface/map-page/map-styles/overlay.ts

@@ -1,4 +1,4 @@
-import { SETTINGS } from "~/settings";
+import { apiV2Prefix } from "~/settings";
 
 export const overlayStyle = {
   version: 8,
@@ -46,7 +46,7 @@ export const overlayStyle = {
     columns: {
       type: "geojson",
       generateId: true,
-      data: `${SETTINGS.apiDomain}/api/v2/columns?all&format=geojson_bare`,
+      data: `${apiV2Prefix}/columns?all&format=geojson_bare`,
     },
     filteredColumns: {
       type: "geojson",

src/pages/maps/@id/edit/index.page.ts

@@ -1,9 +1,9 @@
-import { PageContextBuiltInServer } from "vike/types";
-import { SETTINGS } from "~/settings";
 import h from "@macrostrat/hyper";
+import { PageContextBuiltInServer } from "vike/types";
 import { ClientOnly } from "~/renderer/client-only";
+import { apiV2Prefix } from "~/settings";
 
-const apiAddress = SETTINGS.apiDomain + "/api/v2/defs/sources";
+const apiAddress = apiV2Prefix + "/defs/sources";
 
 export async function onBeforeRender(pageContext: PageContextBuiltInServer) {
   const { id } = pageContext.routeParams;

src/pages/maps/@id/index.page.ts

@@ -1,10 +1,10 @@
-import { PageContextBuiltInServer } from "vike/types";
-import { SETTINGS } from "~/settings";
 import h from "@macrostrat/hyper";
+import { PageContextBuiltInServer } from "vike/types";
 import { ClientOnly } from "~/renderer/client-only";
+import { apiV2Prefix } from "~/settings";
 const MapInterface = () => import("./map-interface");
 
-const apiAddress = SETTINGS.apiDomain + "/api/v2/defs/sources";
+const apiAddress = apiV2Prefix + "/defs/sources";
 
 export async function onBeforeRender(pageContext: PageContextBuiltInServer) {
   const { id } = pageContext.routeParams;

src/pages/maps/@id/map-interface.ts

@@ -1,36 +1,35 @@
+import {
+  Collapse,
+  NonIdealState,
+  Radio,
+  RadioGroup,
+  Spinner,
+} from "@blueprintjs/core";
 import hyper from "@macrostrat/hyper";
 import {
+  DetailPanelStyle,
+  InfoDrawerContainer,
   MapAreaContainer,
+  MapMarker,
   MapView,
   PanelCard,
 } from "@macrostrat/map-interface";
-import {
-  Spinner,
-  Radio,
-  RadioGroup,
-  NonIdealState,
-  Collapse,
-  Switch,
-} from "@blueprintjs/core";
-import { SETTINGS } from "~/settings";
-import { useEffect } from "react";
-import styles from "./main.module.sass";
-import { useMemo, useState } from "react";
-import "~/styles/global.styl";
-import boundingBox from "@turf/bbox";
-import { LngLatBoundsLike } from "mapbox-gl";
 import { buildMacrostratStyle } from "@macrostrat/mapbox-styles";
 import { getMapboxStyle, mergeStyles } from "@macrostrat/mapbox-utils";
-import { useDarkMode, useAPIResult, JSONView } from "@macrostrat/ui-components";
 import {
-  InfoDrawerContainer,
-  ExpansionPanel,
-  DetailPanelStyle,
-} from "@macrostrat/map-interface";
-import { MapMarker } from "@macrostrat/map-interface";
+  JSONView,
+  NullableSlider,
+  useAPIResult,
+  useDarkMode,
+} from "@macrostrat/ui-components";
+import boundingBox from "@turf/bbox";
+import { LngLatBoundsLike } from "mapbox-gl";
+import { useEffect, useMemo, useState } from "react";
 import { MapNavbar } from "~/components/map-navbar";
-import { NullableSlider } from "@macrostrat/ui-components";
-import { tempImageIndex, s3Address } from "../raster-images";
+import { SETTINGS, apiV2Prefix } from "~/settings";
+import "~/styles/global.styl";
+import { s3Address, tempImageIndex } from "../raster-images";
+import styles from "./main.module.sass";
 
 const h = hyper.styled(styles);
 
@@ -345,10 +344,9 @@ function MapLegendPanel(params) {
 }
 
 function MapLegendData({ source_id }) {
-  const mapLegend = useAPIResult(
-    SETTINGS.apiDomain + "/api/v2/geologic_units/map/legend",
-    { source_id }
-  );
+  const mapLegend = useAPIResult(apiV2Prefix + "/geologic_units/map/legend", {
+    source_id,
+  });
   if (mapLegend == null) return h(Spinner);
   const legendData = mapLegend?.success?.data;
   if (legendData == null) return h(NonIdealState, { icon: "error" });

src/pages/maps/index.page.server.ts

@@ -1,7 +1,7 @@
 import fetch from "node-fetch";
-import { SETTINGS } from "~/settings";
+import { apiV2Prefix } from "~/settings";
 
-const apiAddress = SETTINGS.apiDomain + "/api/v2/defs/sources";
+const apiAddress = apiV2Prefix + "/defs/sources";
 
 export async function onBeforeRender(pageContext) {
   // `.page.server.js` files always run in Node.js; we could use SQL/ORM queries here.

src/settings.ts

@@ -25,6 +25,9 @@ export const SETTINGS = {
   mapboxAccessToken: import.meta.env.VITE_MAPBOX_API_TOKEN,
 };
 
+export const apiV2Prefix =
+  import.meta.env.VITE_MACROSTRAT_API_V2 ?? SETTINGS.apiDomain + "/api/v2";
+
 export const mapPagePrefix = "/map";
 
 export const routerBasename = import.meta.env.BASE_URL + "map";