From 28d4e9bbe7c6fd5375927d81bc9c888c2031083c Mon Sep 17 00:00:00 2001
From: Spencer Rose <spencerrose@uvic.ca>
Date: Sat, 9 Mar 2024 12:46:17 -0800
Subject: [PATCH 1/8] Map feature module for v2.1

---
 _init/files.init.sql                          |   3 +-
 _init/global.init.sql                         |   1 +
 _init/update.30112023.sql                     | 112 ++++++
 _init/users.init.sql                          |   6 +
 .../toolkit.js => alignment/alignment.js}     |  22 +-
 .../canvas/default.canvas.alignment.js}       |   4 +-
 .../canvas/grid.canvas.alignment.js}          |   2 +-
 .../canvas/magnifier.canvas.alignment.js}     |   6 +-
 .../canvas/overlay.canvas.alignment.js}       |   2 +-
 .../dialog.alignment.js}                      |  18 +-
 .../menu.alignment.js}                        |   8 +-
 .../panel/controller.panel.alignment.js}      |   4 +-
 .../panel/info.panel.alignment.js}            |   6 +-
 .../panel/init.panel.alignment.js}            |   3 +-
 .../panel/menu.panel.alignment.js}            |   6 +-
 .../panel/panel.alignment.js}                 |  38 +-
 .../panel/placeholder.panel.alignment.js}     |   4 +-
 .../tools/comparator.alignment.js}            |  16 +-
 .../tools/cropper.alignment.js}               |   6 +-
 .../tools/downloader.alignment.js}            |   4 +-
 .../tools/importer.alignment.js}              |  13 +-
 .../tools/loader.alignment.js}                |  14 +-
 .../tools/opener.alignment.js}                |   8 +-
 .../tools/pointer.alignment.js}               |   4 +-
 .../tools/register.alignment.js}              |  10 +-
 .../tools/resizer.alignment.js}               |   4 +-
 .../tools/scaler.alignment.js}                |   2 +-
 .../tools/uploader.alignment.js}              |   8 +-
 .../utils/align.utils.alignment.js}           |   2 +-
 .../utils/loader.utils.alignment.js}          |  14 +-
 .../utils/tiff.utils.alignment.js}            |   2 +-
 client/src/_components/common/form.js         |  87 ++--
 client/src/_components/common/icon.js         |  17 +-
 client/src/_components/common/message.js      |   2 +-
 client/src/_components/common/singleselect.js |  62 +++
 client/src/_components/common/slider.js       |   4 +-
 client/src/_components/common/table.js        | 117 +++---
 client/src/_components/common/tree.js         | 316 +++++++++++++++
 .../{toolkit.help.js => alignment.help.js}    |  50 +--
 client/src/_components/content/editor.help.js |  25 +-
 .../src/_components/content/explorer.help.js  |  16 +-
 client/src/_components/content/map.help.js    | 299 ++++++++++++++
 .../_components/editors/attached.editor.js    |   3 +-
 .../src/_components/editors/default.editor.js |  18 +-
 .../_components/editors/dependents.editor.js  |  10 +-
 client/src/_components/editors/map.editor.js  | 315 +++++++++++++++
 .../src/_components/editors/options.editor.js |   2 +-
 .../kml/Stn_1_Sanseverino_2016.kmz            | Bin 730 -> 0 bytes
 client/src/_components/kml/example-2.kml      |  85 ----
 client/src/_components/menus/editor.menu.js   |  47 ++-
 client/src/_components/menus/header.menu.js   |   1 +
 client/src/_components/menus/viewer.menu.js   |   9 +-
 .../_components/navigator/filter.navigator.js |  13 +-
 .../_components/navigator/map.navigator.js    | 166 ++++++--
 .../src/_components/navigator/map/base.map.js | 161 ++++++++
 .../_components/navigator/tree.navigator.js   |  10 +-
 .../_components/selectors/dialog.selector.js  |  52 ++-
 .../_components/selectors/file.selector.js    |   3 +-
 .../_components/selectors/input.selector.js   |  76 ++--
 .../src/_components/selectors/map.selector.js | 374 ++++++++++++++++++
 .../_components/selectors/static.selector.js  |   2 +-
 .../_components/styles/mapfeatures.module.css |  14 +
 client/src/_components/styles/tree.module.css |  18 +
 .../src/_components/tools/download.tools.js   |   3 +-
 client/src/_components/tools/map.tools.js     | 255 +++++++++---
 client/src/_components/views/attached.view.js |  76 ++--
 client/src/_components/views/capture.view.js  |  22 +-
 client/src/_components/views/editor.view.js   |   1 -
 client/src/_components/views/files.view.js    |   5 +-
 client/src/_components/views/help.view.js     |  35 +-
 client/src/_components/views/metadata.view.js |  25 +-
 ...client.js => alignment.provider.client.js} |  20 +-
 client/src/_providers/app.provider.client.js  |   2 +-
 client/src/_providers/auth.provider.client.js |  27 +-
 client/src/_providers/data.provider.client.js |   5 +-
 client/src/_providers/nav.provider.client.js  | 108 +++--
 .../src/_providers/router.provider.client.js  |  26 +-
 client/src/_services/api.services.client.js   |  26 +-
 client/src/_utils/data.utils.client.js        |  28 +-
 client/src/_utils/validator.utils.client.js   |  23 ++
 client/src/schema.js                          | 227 ++++++++++-
 package.json                                  |   9 +-
 src/controllers/files.controller.js           |  62 ++-
 src/controllers/maps.controller.js            | 194 +++++++++
 src/controllers/metadata.controller.js        |   3 +
 src/controllers/model.controller.js           |   6 +-
 src/controllers/nodes.controller.js           |  18 +-
 src/lib/data.utils.js                         |   3 +
 src/lib/{date.js => date.utils.js}            |   2 +-
 src/lib/file.utils.js                         |  10 +
 src/queries/comparisons.queries.js            |  13 +-
 src/queries/files.queries.js                  |  87 +++-
 src/queries/index.queries.js                  |   5 +-
 src/queries/maps.queries.js                   | 146 +++++++
 src/queries/schema.queries.js                 |   2 +-
 src/routes/files.routes.js                    |  19 +-
 src/routes/index.routes.js                    |  22 +-
 src/routes/main.routes.js                     |   4 +-
 src/routes/maps.routes.js                     |  61 +++
 src/routes/metadata.routes.js                 |  12 +-
 src/routes/model.routes.js                    |   2 +-
 src/services/files.services.js                |  83 +++-
 src/services/maps.services.js                 | 212 ++++++++++
 src/services/metadata.services.js             |  30 +-
 src/services/model.services.js                |   1 +
 src/services/nodes.services.js                |   3 +-
 src/services/schema.services.js               |  16 +-
 107 files changed, 3913 insertions(+), 752 deletions(-)
 create mode 100644 _init/update.30112023.sql
 rename client/src/_components/{toolkit/toolkit.js => alignment/alignment.js} (68%)
 rename client/src/_components/{toolkit/canvas/default.canvas.toolkit.js => alignment/canvas/default.canvas.alignment.js} (98%)
 rename client/src/_components/{toolkit/canvas/grid.canvas.toolkit.js => alignment/canvas/grid.canvas.alignment.js} (98%)
 rename client/src/_components/{toolkit/canvas/magnifier.canvas.toolkit.js => alignment/canvas/magnifier.canvas.alignment.js} (98%)
 rename client/src/_components/{toolkit/canvas/overlay.canvas.toolkit.js => alignment/canvas/overlay.canvas.alignment.js} (98%)
 rename client/src/_components/{toolkit/dialog.toolkit.js => alignment/dialog.alignment.js} (92%)
 rename client/src/_components/{toolkit/menu.toolkit.js => alignment/menu.alignment.js} (96%)
 rename client/src/_components/{toolkit/panel/controller.panel.toolkit.js => alignment/panel/controller.panel.alignment.js} (97%)
 rename client/src/_components/{toolkit/panel/info.panel.toolkit.js => alignment/panel/info.panel.alignment.js} (97%)
 rename client/src/_components/{toolkit/panel/init.panel.toolkit.js => alignment/panel/init.panel.alignment.js} (99%)
 rename client/src/_components/{toolkit/panel/menu.panel.toolkit.js => alignment/panel/menu.panel.alignment.js} (97%)
 rename client/src/_components/{toolkit/panel/panel.toolkit.js => alignment/panel/panel.alignment.js} (97%)
 rename client/src/_components/{toolkit/panel/placeholder.panel.toolkit.js => alignment/panel/placeholder.panel.alignment.js} (94%)
 rename client/src/_components/{toolkit/tools/comparator.toolkit.js => alignment/tools/comparator.alignment.js} (98%)
 rename client/src/_components/{toolkit/tools/cropper.toolkit.js => alignment/tools/cropper.alignment.js} (98%)
 rename client/src/_components/{toolkit/tools/downloader.toolkit.js => alignment/tools/downloader.alignment.js} (95%)
 rename client/src/_components/{toolkit/tools/importer.toolkit.js => alignment/tools/importer.alignment.js} (97%)
 rename client/src/_components/{toolkit/tools/loader.toolkit.js => alignment/tools/loader.alignment.js} (72%)
 rename client/src/_components/{toolkit/tools/opener.toolkit.js => alignment/tools/opener.alignment.js} (96%)
 rename client/src/_components/{toolkit/tools/pointer.toolkit.js => alignment/tools/pointer.alignment.js} (98%)
 rename client/src/_components/{toolkit/tools/register.toolkit.js => alignment/tools/register.alignment.js} (97%)
 rename client/src/_components/{toolkit/tools/resizer.toolkit.js => alignment/tools/resizer.alignment.js} (99%)
 rename client/src/_components/{toolkit/tools/scaler.toolkit.js => alignment/tools/scaler.alignment.js} (98%)
 rename client/src/_components/{toolkit/tools/uploader.toolkit.js => alignment/tools/uploader.alignment.js} (95%)
 rename client/src/_components/{toolkit/utils/align.utils.toolkit.js => alignment/utils/align.utils.alignment.js} (99%)
 rename client/src/_components/{toolkit/utils/loader.utils.toolkit.js => alignment/utils/loader.utils.alignment.js} (95%)
 rename client/src/_components/{toolkit/utils/tiff.utils.toolkit.js => alignment/utils/tiff.utils.alignment.js} (99%)
 create mode 100644 client/src/_components/common/singleselect.js
 create mode 100644 client/src/_components/common/tree.js
 rename client/src/_components/content/{toolkit.help.js => alignment.help.js} (93%)
 create mode 100644 client/src/_components/content/map.help.js
 create mode 100644 client/src/_components/editors/map.editor.js
 delete mode 100644 client/src/_components/kml/Stn_1_Sanseverino_2016.kmz
 delete mode 100644 client/src/_components/kml/example-2.kml
 create mode 100644 client/src/_components/navigator/map/base.map.js
 create mode 100644 client/src/_components/selectors/map.selector.js
 create mode 100644 client/src/_components/styles/mapfeatures.module.css
 create mode 100644 client/src/_components/styles/tree.module.css
 rename client/src/_providers/{toolkit.provider.client.js => alignment.provider.client.js} (95%)
 create mode 100644 src/controllers/maps.controller.js
 rename src/lib/{date.js => date.utils.js} (99%)
 create mode 100644 src/queries/maps.queries.js
 create mode 100644 src/routes/maps.routes.js
 create mode 100644 src/services/maps.services.js

diff --git a/_init/files.init.sql b/_init/files.init.sql
index 36be795b..3b06233e 100644
--- a/_init/files.init.sql
+++ b/_init/files.init.sql
@@ -500,7 +500,8 @@ create TABLE "public"."metadata_file_types"
 
 insert into "public"."metadata_file_types" (name, label)
 values ('ancillary', 'Ancillary Metadata'),
-       ('field_notes', 'Field Notes');
+       ('field_notes', 'Field Notes'),
+       ('geographic_data', 'Geographic Map Data');
 
 -- -------------------------------------------------------------
 --    Metadata Files
diff --git a/_init/global.init.sql b/_init/global.init.sql
index 0d241093..630381ee 100644
--- a/_init/global.init.sql
+++ b/_init/global.init.sql
@@ -83,6 +83,7 @@ $$
             'search',
             'tree',
             'map',
+            'overlay',
             'refresh',
             'logout',
             'register',
diff --git a/_init/update.30112023.sql b/_init/update.30112023.sql
new file mode 100644
index 00000000..971be918
--- /dev/null
+++ b/_init/update.30112023.sql
@@ -0,0 +1,112 @@
+
+-- -------------------------------------------------------------
+--    DB update to allow
+-- -------------------------------------------------------------
+
+--    Create new overlay view for nodes controller
+
+-- ALTER TYPE views ADD VALUE 'overlay';
+--
+-- --    Update user role permissions for new overlay view
+--
+-- INSERT INTO user_permissions (view, role, created_at, updated_at)
+-- VALUES ('overlay', 'visitor', now(), now()),
+--         ('overlay', 'registered', now(), now()),
+--         ('overlay', 'editor', now(), now()),
+--         ('overlay', 'administrator', now(), now()),
+--         ('overlay', 'super_administrator', now(), now());
+
+--    Add new node type and relations for map objects/features data
+
+insert into "public"."node_types" (name, label)
+values ('map_objects', 'Map Objects'),
+        ('map_features', 'Map Features');
+
+insert into "node_relations" (dependent_type, owner_type)
+values ('map_objects', null), ('map_features', 'map_objects');
+
+--    Add metadata file relations for map node
+
+insert into "file_relations" (dependent_type, owner_type)
+values ('metadata_files', 'map_objects');
+
+-- insert into "file_relations" (dependent_type, owner_type)
+-- values ('metadata_files', 'surveys'),
+--        ('metadata_files', 'survey_seasons');
+
+--    Add new metadata file type for KML geographic data
+
+insert into "public"."metadata_file_types" (name, label)
+values ('geographic_data', 'Geographic Map Data');
+
+--    Add map object types table
+
+create TABLE "public"."map_object_types"
+(
+    id    serial PRIMARY KEY,
+    name  VARCHAR(40) UNIQUE NOT NULL,
+    label VARCHAR(40) UNIQUE NOT NULL
+);
+
+insert into "public"."map_object_types" (name, label)
+values ('nts', 'NTS Maps'),
+       ('boundary', 'Boundaries'),
+       ('other', 'Other Map Objects');
+
+--    Add map feature types table
+
+create TABLE "public"."map_feature_types"
+(
+    id    serial PRIMARY KEY,
+    name  VARCHAR(40) UNIQUE NOT NULL,
+    label VARCHAR(40) UNIQUE NOT NULL
+);
+
+insert into "public"."map_feature_types" (name, label)
+values ('mapsheet', 'NTS Mapsheet'),
+       ('boundary', 'Boundaries'),
+       ('marker', 'Marker'),
+       ('other', 'Other Map Feature');
+
+--    Add map objects node table for geographic objects
+
+CREATE TABLE "public"."map_objects" (
+         "nodes_id" integer primary key,
+         "name" character varying(255) NOT NULL,
+         "type" character varying(255) NOT NULL,
+         "description" text,
+         UNIQUE (name),
+         CONSTRAINT fk_nodes_id FOREIGN KEY (nodes_id)
+             REFERENCES nodes (id) ON DELETE CASCADE,
+         CONSTRAINT fk_map_object_types_id FOREIGN KEY (type)
+             REFERENCES map_object_types (name) ON DELETE SET NULL);
+
+--    Add map features node table as map object dependents
+
+CREATE TABLE "public"."map_features" (
+         "nodes_id" integer primary key,
+         "owner_id" integer NOT NULL,
+         "name" character varying(255) NOT NULL,
+         "type" character varying(255),
+         "description" text,
+         "geometry" json,
+         UNIQUE (name),
+         CONSTRAINT fk_nodes_id FOREIGN KEY (nodes_id)
+             REFERENCES nodes (id) ON DELETE CASCADE,
+         CONSTRAINT fk_owner_id FOREIGN KEY (owner_id)
+             REFERENCES nodes (id) ON DELETE CASCADE,
+         CONSTRAINT fk_map_feature_types_id FOREIGN KEY (type)
+             REFERENCES map_feature_types (name) ON DELETE SET NULL);
+
+--    Add map objects type to metadata types
+
+insert into "public"."metadata_types" (name, label)
+values ('map_object_types', 'Map Object Types');
+
+--    Add map objects reference to maps table
+
+ALTER TABLE maps ADD COLUMN IF NOT EXISTS map_features_id integer;
+
+ALTER TABLE maps
+    ADD CONSTRAINT fk_map_features_id FOREIGN KEY (map_features_id)
+    REFERENCES map_features (nodes_id) ON UPDATE CASCADE ON DELETE SET NULL;
\ No newline at end of file
diff --git a/_init/users.init.sql b/_init/users.init.sql
index afe8b0b5..009a9b7d 100644
--- a/_init/users.init.sql
+++ b/_init/users.init.sql
@@ -110,6 +110,12 @@ VALUES  ('show', 'visitor', now(), now()),
         ('map', 'administrator', now(), now()),
         ('map', 'super_administrator', now(), now()),
 
+        ('overlay', 'visitor', now(), now()),
+        ('overlay', 'registered', now(), now()),
+        ('overlay', 'editor', now(), now()),
+        ('overlay', 'administrator', now(), now()),
+        ('overlay', 'super_administrator', now(), now()),
+
         ('download', 'visitor', now(), now()),
         ('download', 'editor', now(), now()),
         ('download', 'administrator', now(), now()),
diff --git a/client/src/_components/toolkit/toolkit.js b/client/src/_components/alignment/alignment.js
similarity index 68%
rename from client/src/_components/toolkit/toolkit.js
rename to client/src/_components/alignment/alignment.js
index 3455ccd4..043589d2 100644
--- a/client/src/_components/toolkit/toolkit.js
+++ b/client/src/_components/alignment/alignment.js
@@ -1,6 +1,6 @@
 /*!
- * MLE.Client.Toolkit
- * File: toolkit.js
+ * MLE.Client.Alignment
+ * File: alignment.js
  * Copyright(c) 2023 Runtime Software Development Inc.
  * Version 2.0
  * MIT Licensed
@@ -8,7 +8,7 @@
  * ----------
  * Description
  *
- * Main Alignment Tool component. The toolkit makes extensive use of the Canvas API
+ * Main Alignment Tool component. The alignment makes extensive use of the Canvas API
  * for image rendering and markup. Image transformations use the OpenCV.js
  * JavaScript libraries.
  *
@@ -19,10 +19,10 @@
  */
 
 import {memo} from 'react';
-import PanelIat from './panel/panel.toolkit';
-import {MenuToolkit} from './menu.toolkit';
-import {DialogToolkit} from "./dialog.toolkit";
-import {useIat} from "../../_providers/toolkit.provider.client";
+import PanelIat from './panel/panel.alignment';
+import {MenuAlignment} from './menu.alignment';
+import {DialogAlignment} from "./dialog.alignment";
+import {useIat} from "../../_providers/alignment.provider.client";
 import {UserMessage} from "../common/message";
 import {useNav} from "../../_providers/nav.provider.client";
 
@@ -33,7 +33,7 @@ import {useNav} from "../../_providers/nav.provider.client";
  * @public
  */
 
-const Toolkit = () => {
+const Alignment = () => {
 
     const iat = useIat();
     const nav = useNav();
@@ -44,16 +44,16 @@ const Toolkit = () => {
     }
 
     return <div onClick={_closeNav} >
-            <DialogToolkit />
+            <DialogAlignment />
             <UserMessage className={'canvas-message'} message={iat.message} onClose={()=>{iat.setMessage(null)}} />
             <div className={'canvas-board'}>
                 <PanelIat id={'panel1'} />
-                <MenuToolkit />
+                <MenuAlignment />
                 <PanelIat id={'panel2'} />
             </div>
         </div>;
 };
 
-export default memo(Toolkit);
+export default memo(Alignment);
 
 
diff --git a/client/src/_components/toolkit/canvas/default.canvas.toolkit.js b/client/src/_components/alignment/canvas/default.canvas.alignment.js
similarity index 98%
rename from client/src/_components/toolkit/canvas/default.canvas.toolkit.js
rename to client/src/_components/alignment/canvas/default.canvas.alignment.js
index 16f8fb24..49c5bd34 100644
--- a/client/src/_components/toolkit/canvas/default.canvas.toolkit.js
+++ b/client/src/_components/alignment/canvas/default.canvas.alignment.js
@@ -1,6 +1,6 @@
 /*!
  * MLE.Client.Tools.Toolkit.Canvas
- * File: default.canvas.toolkit.js
+ * File: default.canvas.alignment.js
  * Copyright(c) 2022 Runtime Software Development Inc.
  * Version 2.0
  * MIT Licensed
@@ -17,7 +17,7 @@
  */
 
 import React, {forwardRef, useRef, useImperativeHandle, useEffect} from 'react';
-import {CanvasToTIFF} from "../utils/tiff.utils.toolkit";
+import {CanvasToTIFF} from "../utils/tiff.utils.alignment";
 
 /**
  * Image Analysis Toolkit: Canvas component
diff --git a/client/src/_components/toolkit/canvas/grid.canvas.toolkit.js b/client/src/_components/alignment/canvas/grid.canvas.alignment.js
similarity index 98%
rename from client/src/_components/toolkit/canvas/grid.canvas.toolkit.js
rename to client/src/_components/alignment/canvas/grid.canvas.alignment.js
index b5dfb06a..b5eac357 100644
--- a/client/src/_components/toolkit/canvas/grid.canvas.toolkit.js
+++ b/client/src/_components/alignment/canvas/grid.canvas.alignment.js
@@ -1,6 +1,6 @@
 /*!
  * MLE.Client.Tools.Toolkit.Grid
- * File: grid.canvas.toolkit.js
+ * File: grid.canvas.alignment.js
  * Copyright(c) 2022 Runtime Software Development Inc.
  * Version 2.0
  * MIT Licensed
diff --git a/client/src/_components/toolkit/canvas/magnifier.canvas.toolkit.js b/client/src/_components/alignment/canvas/magnifier.canvas.alignment.js
similarity index 98%
rename from client/src/_components/toolkit/canvas/magnifier.canvas.toolkit.js
rename to client/src/_components/alignment/canvas/magnifier.canvas.alignment.js
index 9f4066a6..8aefee27 100644
--- a/client/src/_components/toolkit/canvas/magnifier.canvas.toolkit.js
+++ b/client/src/_components/alignment/canvas/magnifier.canvas.alignment.js
@@ -1,14 +1,14 @@
 /*!
  * MLE.Client.Tools.Toolkit.Magnifier
- * File: magnifier.canvas.toolkit.js
+ * File: magnifier.canvas.alignment.js
  * Copyright(c) 2023 Runtime Software Development Inc.
  * Version 2.0
  * MIT Licensed
  */
 
 import React, {forwardRef, useRef, useImperativeHandle } from 'react';
-import {getScale, inRange, scalePoint} from "../tools/scaler.toolkit";
-import {useIat} from "../../../_providers/toolkit.provider.client";
+import {getScale, inRange, scalePoint} from "../tools/scaler.alignment";
+import {useIat} from "../../../_providers/alignment.provider.client";
 
 /**
  * Image Analysis Toolkit: Magnifier component
diff --git a/client/src/_components/toolkit/canvas/overlay.canvas.toolkit.js b/client/src/_components/alignment/canvas/overlay.canvas.alignment.js
similarity index 98%
rename from client/src/_components/toolkit/canvas/overlay.canvas.toolkit.js
rename to client/src/_components/alignment/canvas/overlay.canvas.alignment.js
index eba11658..b0970c4f 100644
--- a/client/src/_components/toolkit/canvas/overlay.canvas.toolkit.js
+++ b/client/src/_components/alignment/canvas/overlay.canvas.alignment.js
@@ -1,6 +1,6 @@
 /*!
  * MLE.Client.Tools.Toolkit.Overlay
- * File: overlay.canvas.toolkit.js
+ * File: overlay.canvas.alignment.js
  * Copyright(c) 2022 Runtime Software Development Inc.
  * Version 2.0
  * MIT Licensed
diff --git a/client/src/_components/toolkit/dialog.toolkit.js b/client/src/_components/alignment/dialog.alignment.js
similarity index 92%
rename from client/src/_components/toolkit/dialog.toolkit.js
rename to client/src/_components/alignment/dialog.alignment.js
index 44672be7..6c0caae7 100644
--- a/client/src/_components/toolkit/dialog.toolkit.js
+++ b/client/src/_components/alignment/dialog.alignment.js
@@ -1,6 +1,6 @@
 /*!
- * MLE.Client.Components.Toolkit.Dialog
- * File: dialog.toolkit.js
+ * MLE.Client.Components.Lignment.Dialog
+ * File: dialog.alignment.js
  * Copyright(c) 2022 Runtime Software Development Inc.
  * Version 2.0
  * MIT Licensed
@@ -8,7 +8,7 @@
  * ----------
  * Description
  *
- * Dialog modal component customized for image toolkit.
+ * Dialog modal component customized for image alignment.
  *
  * ------
  * States
@@ -20,13 +20,13 @@
 
 import React from 'react';
 import Dialog from '../common/dialog';
-import { ImageOpener } from './tools/opener.toolkit';
-import { SaveAs } from './tools/downloader.toolkit';
-import Resizer from './tools/resizer.toolkit';
+import { ImageOpener } from './tools/opener.alignment';
+import { SaveAs } from './tools/downloader.alignment';
+import Resizer from './tools/resizer.alignment';
 import MetadataView from '../views/metadata.view';
-import { useIat } from '../../_providers/toolkit.provider.client';
+import { useIat } from '../../_providers/alignment.provider.client';
 import {genID} from "../../_utils/data.utils.client";
-import {ComparatorTool} from "./tools/comparator.toolkit";
+import {ComparatorTool} from "./tools/comparator.alignment";
 import Button from "../common/button";
 
 /**
@@ -43,7 +43,7 @@ const noop = () => {
  * @return {JSX.Element}
  */
 
-export const DialogToolkit = () => {
+export const DialogAlignment = () => {
 
     // generate unique ID value for canvas inputs
     const menuID = genID();
diff --git a/client/src/_components/toolkit/menu.toolkit.js b/client/src/_components/alignment/menu.alignment.js
similarity index 96%
rename from client/src/_components/toolkit/menu.toolkit.js
rename to client/src/_components/alignment/menu.alignment.js
index 093f1357..4526c1f3 100644
--- a/client/src/_components/toolkit/menu.toolkit.js
+++ b/client/src/_components/alignment/menu.alignment.js
@@ -1,6 +1,6 @@
 /*!
  * MLE.Client.Components.Toolkit.Menu
- * File: menu.toolkit.js
+ * File: menu.alignment.js
  * Copyright(c) 2023 Runtime Software Development Inc.
  * Version 2.0
  * MIT Licensed
@@ -8,9 +8,9 @@
 
 import React from 'react';
 import Button from '../common/button';
-import { useIat } from '../../_providers/toolkit.provider.client';
+import { useIat } from '../../_providers/alignment.provider.client';
 import Badge from "../common/badge";
-import {getTooltip} from "../content/toolkit.help";
+import {getTooltip} from "../content/alignment.help";
 import {useUser} from "../../_providers/user.provider.client";
 import {useNav} from "../../_providers/nav.provider.client";
 import {useDialog} from "../../_providers/dialog.provider.client";
@@ -22,7 +22,7 @@ import {useDialog} from "../../_providers/dialog.provider.client";
  * @return {JSX.Element}
  */
 
-export const MenuToolkit = () => {
+export const MenuAlignment = () => {
 
     const iat = useIat();
     const user = useUser();
diff --git a/client/src/_components/toolkit/panel/controller.panel.toolkit.js b/client/src/_components/alignment/panel/controller.panel.alignment.js
similarity index 97%
rename from client/src/_components/toolkit/panel/controller.panel.toolkit.js
rename to client/src/_components/alignment/panel/controller.panel.alignment.js
index 6c173001..2a9a0f4f 100644
--- a/client/src/_components/toolkit/panel/controller.panel.toolkit.js
+++ b/client/src/_components/alignment/panel/controller.panel.alignment.js
@@ -1,6 +1,6 @@
 /*!
  * MLE.Client.Components.Toolkit.Panel.Controller
- * File: panel.controller.toolkit.js
+ * File: panel.controller.alignment.js
  * Copyright(c) 2023 Runtime Software Development Inc.
  * Version 2.0
  * MIT Licensed
@@ -17,7 +17,7 @@
  * - 09-07-2023   Major upgrade to Toolkit incl. UI and workflow improvements and OpenCV integration
  */
 
-import {useIat} from "../../../_providers/toolkit.provider.client";
+import {useIat} from "../../../_providers/alignment.provider.client";
 
 /**
  * Image Analysis Toolkit: Canvas contol event hook
diff --git a/client/src/_components/toolkit/panel/info.panel.toolkit.js b/client/src/_components/alignment/panel/info.panel.alignment.js
similarity index 97%
rename from client/src/_components/toolkit/panel/info.panel.toolkit.js
rename to client/src/_components/alignment/panel/info.panel.alignment.js
index 05242ca2..0c5b054a 100644
--- a/client/src/_components/toolkit/panel/info.panel.toolkit.js
+++ b/client/src/_components/alignment/panel/info.panel.alignment.js
@@ -1,6 +1,6 @@
 /*!
  * MLE.Client.Components.Toolkit.Panel.Info
- * File: panel.info.toolkit.js
+ * File: panel.info.alignment.js
  * Copyright(c) 2023 Runtime Software Development Inc.
  * Version 2.0
  * MIT Licensed
@@ -20,9 +20,9 @@ import { getModelLabel } from '../../../_services/schema.services.client';
 import Button from '../../common/button';
 import { sanitize } from '../../../_utils/data.utils.client';
 import {useEffect, useState} from 'react';
-import { getScale, scalePoint } from '../tools/scaler.toolkit';
+import { getScale, scalePoint } from '../tools/scaler.alignment';
 import { createNodeRoute } from '../../../_utils/paths.utils.client';
-import {useIat} from "../../../_providers/toolkit.provider.client";
+import {useIat} from "../../../_providers/alignment.provider.client";
 import Accordion from "../../common/accordion";
 import Icon from "../../common/icon";
 
diff --git a/client/src/_components/toolkit/panel/init.panel.toolkit.js b/client/src/_components/alignment/panel/init.panel.alignment.js
similarity index 99%
rename from client/src/_components/toolkit/panel/init.panel.toolkit.js
rename to client/src/_components/alignment/panel/init.panel.alignment.js
index 5d9db3d5..1c45aeaf 100644
--- a/client/src/_components/toolkit/panel/init.panel.toolkit.js
+++ b/client/src/_components/alignment/panel/init.panel.alignment.js
@@ -1,6 +1,6 @@
 /*!
  * MLE.Client.Toolkit.Initialization
- * File: init.toolkit.js
+ * File: init.alignment.js
  * Copyright(c) 2023 Runtime Software Development Inc.
  * Version 2.0
  * MIT Licensed
@@ -40,7 +40,6 @@ const openCvPath = `https://docs.opencv.org/${openCvVersion}/opencv.js`;
  */
 
 export const initPanel = (panelID, panelLabel = '', inputData = null, user=null) => {
-
     // Destructure input data
     const {
         file = {},
diff --git a/client/src/_components/toolkit/panel/menu.panel.toolkit.js b/client/src/_components/alignment/panel/menu.panel.alignment.js
similarity index 97%
rename from client/src/_components/toolkit/panel/menu.panel.toolkit.js
rename to client/src/_components/alignment/panel/menu.panel.alignment.js
index 43ff699a..d0896eda 100644
--- a/client/src/_components/toolkit/panel/menu.panel.toolkit.js
+++ b/client/src/_components/alignment/panel/menu.panel.alignment.js
@@ -1,6 +1,6 @@
 /*!
  * MLE.Client.Components.Toolkit.Panel.Menu
- * File: menu.panel.toolkit.js
+ * File: menu.panel.alignment.js
  * Copyright(c) 2023 Runtime Software Development Inc.
  * Version 2.0
  * MIT Licensed
@@ -8,11 +8,11 @@
 
 import React, {memo} from 'react';
 import Button from '../../common/button';
-import {useIat} from "../../../_providers/toolkit.provider.client";
+import {useIat} from "../../../_providers/alignment.provider.client";
 import {useUser} from "../../../_providers/user.provider.client";
 import {useNav} from "../../../_providers/nav.provider.client";
 import {useDialog} from "../../../_providers/dialog.provider.client";
-import {getTooltip} from "../../content/toolkit.help";
+import {getTooltip} from "../../content/alignment.help";
 
 /**
  * Control menu for IAT panel.
diff --git a/client/src/_components/toolkit/panel/panel.toolkit.js b/client/src/_components/alignment/panel/panel.alignment.js
similarity index 97%
rename from client/src/_components/toolkit/panel/panel.toolkit.js
rename to client/src/_components/alignment/panel/panel.alignment.js
index 256e6bfe..e592547a 100644
--- a/client/src/_components/toolkit/panel/panel.toolkit.js
+++ b/client/src/_components/alignment/panel/panel.alignment.js
@@ -1,6 +1,6 @@
 /*!
  * MLE.Client.Components.Toolkit.Panel
- * File: panel.toolkit.js
+ * File: panel.alignment.js
  * Copyright(c) 2023 Runtime Software Development Inc.
  * Version 2.0
  * MIT Licensed
@@ -9,7 +9,7 @@
  * Description
  *
  * Toolkit panel component is the main container for the canvas stack and integrates referenced DOM
- * elements with panel state changes and user mouse and key events. The toolkit makes extensive
+ * elements with panel state changes and user mouse and key events. The alignment makes extensive
  * use of the Canvas API for image rendering and markup. Image transformations use the OpenCV.js
  * JavaScript libraries.
  *
@@ -31,25 +31,25 @@
 
 import {memo, useEffect, useRef, useState} from 'react';
 import saveAs from 'file-saver';
-import PanelMenu from './menu.panel.toolkit';
-import PanelInfo from './info.panel.toolkit';
-import Register from '../tools/register.toolkit';
-import MagnifierTool from '../canvas/magnifier.canvas.toolkit';
+import PanelMenu from './menu.panel.alignment';
+import PanelInfo from './info.panel.alignment';
+import Register from '../tools/register.alignment';
+import MagnifierTool from '../canvas/magnifier.canvas.alignment';
 import baseGrid from '../../svg/grid.svg';
-import CropTool, {cropImage} from '../tools/cropper.toolkit';
-import {useIat} from "../../../_providers/toolkit.provider.client";
-import Canvas from "../canvas/default.canvas.toolkit";
-import {getScale, inRange, scalePoint, scaleToFit} from "../tools/scaler.toolkit";
-import {loadImage} from "../utils/loader.utils.toolkit";
-import LoadButton from "./placeholder.panel.toolkit";
-import {useController} from "./controller.panel.toolkit";
-import Grid from "../canvas/grid.canvas.toolkit";
+import CropTool, {cropImage} from '../tools/cropper.alignment';
+import {useIat} from "../../../_providers/alignment.provider.client";
+import Canvas from "../canvas/default.canvas.alignment";
+import {getScale, inRange, scalePoint, scaleToFit} from "../tools/scaler.alignment";
+import {loadImage} from "../utils/loader.utils.alignment";
+import LoadButton from "./placeholder.panel.alignment";
+import {useController} from "./controller.panel.alignment";
+import Grid from "../canvas/grid.canvas.alignment";
 import {UserMessage} from "../../common/message";
-import Overlay from "../canvas/overlay.canvas.toolkit";
+import Overlay from "../canvas/overlay.canvas.alignment";
 import {getError} from "../../../_services/schema.services.client";
-import {getPos} from "../tools/pointer.toolkit";
+import {getPos} from "../tools/pointer.alignment";
 import {useWindowSize} from "../../../_utils/events.utils.client";
-import {alignImages} from "../utils/align.utils.toolkit";
+import {alignImages} from "../utils/align.utils.alignment";
 
 /**
  * IAT panel component.
@@ -61,7 +61,7 @@ import {alignImages} from "../utils/align.utils.toolkit";
  * @public
  */
 
-const PanelToolkit = ({id = null}) => {
+const PanelAlignment = ({id = null}) => {
 
     const iat = useIat();
     const panel = iat[id];
@@ -1219,4 +1219,4 @@ const PanelToolkit = ({id = null}) => {
     </div>;
 };
 
-export default memo(PanelToolkit);
+export default memo(PanelAlignment);
diff --git a/client/src/_components/toolkit/panel/placeholder.panel.toolkit.js b/client/src/_components/alignment/panel/placeholder.panel.alignment.js
similarity index 94%
rename from client/src/_components/toolkit/panel/placeholder.panel.toolkit.js
rename to client/src/_components/alignment/panel/placeholder.panel.alignment.js
index 5c547f70..5f8a07dc 100644
--- a/client/src/_components/toolkit/panel/placeholder.panel.toolkit.js
+++ b/client/src/_components/alignment/panel/placeholder.panel.alignment.js
@@ -1,13 +1,13 @@
 /*!
  * MLE.Client.Components.Toolkit.LoadButton
- * File: load_button.toolkit.js
+ * File: load_button.alignment.js
  * Copyright(c) 2023 Runtime Software Development Inc.
  * Version 2.0
  * MIT Licensed
  */
 
 import {memo} from 'react';
-import {useIat} from "../../../_providers/toolkit.provider.client";
+import {useIat} from "../../../_providers/alignment.provider.client";
 import Button from "../../common/button";
 
 /**
diff --git a/client/src/_components/toolkit/tools/comparator.toolkit.js b/client/src/_components/alignment/tools/comparator.alignment.js
similarity index 98%
rename from client/src/_components/toolkit/tools/comparator.toolkit.js
rename to client/src/_components/alignment/tools/comparator.alignment.js
index 2f3b76b2..fb609dd7 100644
--- a/client/src/_components/toolkit/tools/comparator.toolkit.js
+++ b/client/src/_components/alignment/tools/comparator.alignment.js
@@ -1,6 +1,6 @@
 /*!
  * MLE.Client.Tools.Toolkit.Comparator
- * File: comparator.toolkit.js
+ * File: comparator.alignment.js
  * Copyright(c) 2023 Runtime Software Development Inc.
  * Version 2.0
  * MIT Licensed
@@ -18,16 +18,16 @@
 
 import React, {useEffect, useLayoutEffect, useRef, useState} from 'react';
 import InputSelector from '../../selectors/input.selector';
-import {useIat} from "../../../_providers/toolkit.provider.client";
-import Canvas from "../canvas/default.canvas.toolkit";
-import {getScale, scalePoint, scaleToFit} from "./scaler.toolkit";
-import {getPos, usePointer} from "./pointer.toolkit";
+import {useIat} from "../../../_providers/alignment.provider.client";
+import Canvas from "../canvas/default.canvas.alignment";
+import {getScale, scalePoint, scaleToFit} from "./scaler.alignment";
+import {getPos, usePointer} from "./pointer.alignment";
 import Button from "../../common/button";
 import baseGrid from "../../svg/grid.svg";
-import Grid from "../canvas/grid.canvas.toolkit";
-import CropTool, {cropImage} from "./cropper.toolkit";
+import Grid from "../canvas/grid.canvas.alignment";
+import CropTool, {cropImage} from "./cropper.alignment";
 import Badge from "../../common/badge";
-import Overlay from "../canvas/overlay.canvas.toolkit";
+import Overlay from "../canvas/overlay.canvas.alignment";
 
 /**
  * Comparator component for comparing and overlaying Alignment Tool panel images
diff --git a/client/src/_components/toolkit/tools/cropper.toolkit.js b/client/src/_components/alignment/tools/cropper.alignment.js
similarity index 98%
rename from client/src/_components/toolkit/tools/cropper.toolkit.js
rename to client/src/_components/alignment/tools/cropper.alignment.js
index c78b91ae..0f05dc22 100644
--- a/client/src/_components/toolkit/tools/cropper.toolkit.js
+++ b/client/src/_components/alignment/tools/cropper.alignment.js
@@ -1,6 +1,6 @@
 /*!
  * MLE.Client.Components.Toolkit.Cropper
- * File: cropper.toolkit.js
+ * File: cropper.alignment.js
  * Copyright(c) 2023 Runtime Software Development Inc.
  * Version 2.0
  * MIT Licensed
@@ -18,8 +18,8 @@
 import React from 'react';
 import InputSelector from '../../selectors/input.selector';
 import Button from '../../common/button';
-import {getScale} from './scaler.toolkit';
-import {useIat} from "../../../_providers/toolkit.provider.client";
+import {getScale} from './scaler.alignment';
+import {useIat} from "../../../_providers/alignment.provider.client";
 
 /**
  * Creates cropper control panel component.
diff --git a/client/src/_components/toolkit/tools/downloader.toolkit.js b/client/src/_components/alignment/tools/downloader.alignment.js
similarity index 95%
rename from client/src/_components/toolkit/tools/downloader.toolkit.js
rename to client/src/_components/alignment/tools/downloader.alignment.js
index 1fae10c9..a78a758d 100644
--- a/client/src/_components/toolkit/tools/downloader.toolkit.js
+++ b/client/src/_components/alignment/tools/downloader.alignment.js
@@ -1,6 +1,6 @@
 /*!
  * MLE.Client.Toolkit.Loaders.Downloader
- * File: downloader.toolkit.js
+ * File: downloader.alignment.js
  * Copyright(c) 2022 Runtime Software Development Inc.
  * Version 2.0
  * MIT Licensed
@@ -9,7 +9,7 @@
 import React from 'react';
 import Button from '../../common/button';
 import InputSelector from '../../selectors/input.selector';
-import { useIat } from "../../../_providers/toolkit.provider.client";
+import { useIat } from "../../../_providers/alignment.provider.client";
 
 /**
  * Defines download local file button. Expects callback to retrieve data
diff --git a/client/src/_components/toolkit/tools/importer.toolkit.js b/client/src/_components/alignment/tools/importer.alignment.js
similarity index 97%
rename from client/src/_components/toolkit/tools/importer.toolkit.js
rename to client/src/_components/alignment/tools/importer.alignment.js
index f212c774..d8563c18 100644
--- a/client/src/_components/toolkit/tools/importer.toolkit.js
+++ b/client/src/_components/alignment/tools/importer.alignment.js
@@ -1,6 +1,6 @@
 /*!
  * MLE.Client.Components.Toolkit.Importer
- * File: importer.toolkit.js
+ * File: importer.alignment.js
  * Copyright(c) 2023 Runtime Software Development Inc.
  * Version 2.0
  * MIT Licensed
@@ -9,7 +9,7 @@
 import React from 'react';
 import {createRoute, redirect} from '../../../_utils/paths.utils.client';
 import {useUser} from '../../../_providers/user.provider.client';
-import {useIat} from "../../../_providers/toolkit.provider.client";
+import {useIat} from "../../../_providers/alignment.provider.client";
 import InputSelector from "../../selectors/input.selector";
 import {UserMessage} from "../../common/message";
 import {useRouter} from "../../../_providers/router.provider.client";
@@ -31,7 +31,7 @@ import Table from "../../common/table";
  * @param callback
  */
 
-export const ImporterToolkit = ({ id = null, callback = () => {}, cancel = () => {} }) => {
+export const ImporterAlignment = ({ id = null, callback = () => {}, cancel = () => {} }) => {
 
     const router = useRouter();
     const nav = useNav();
@@ -114,14 +114,17 @@ export const ImporterToolkit = ({ id = null, callback = () => {}, cancel = () =>
     const _handleSubmit = () => {
         const {file_type = '', id = ''} = selectedImage || {};
         const params = selectedPanel === 'panel1' ? {file1: id, type1: file_type} : {file2: id, type2: file_type};
-        callback();
+
+        console.log(params)
 
         // load image in Explorer Toolkit
-        // - if in toolkit mode, load directly to canvas
+        // - if in alignment mode, load directly to canvas
         // - otherwise, redirect with query params
         window.location.pathname === '/toolkit'
             ? iat.setInputParams(params)
             : redirect(createRoute('/toolkit', params));
+
+        callback();
     };
 
     // update selected image file for canvas loading
diff --git a/client/src/_components/toolkit/tools/loader.toolkit.js b/client/src/_components/alignment/tools/loader.alignment.js
similarity index 72%
rename from client/src/_components/toolkit/tools/loader.toolkit.js
rename to client/src/_components/alignment/tools/loader.alignment.js
index 2d7bba3f..c80ca6d5 100644
--- a/client/src/_components/toolkit/tools/loader.toolkit.js
+++ b/client/src/_components/alignment/tools/loader.alignment.js
@@ -1,6 +1,6 @@
 /*!
  * MLE.Client.Components.Selectors.IAT
- * File: loader.toolkit.js
+ * File: loader.alignment.js
  * Copyright(c) 2023 Runtime Software Development Inc.
  * Version 2.0
  * MIT Licensed
@@ -8,8 +8,8 @@
 
 import React from 'react';
 import Tabs from "../../common/tabs";
-import {UploaderToolkit} from "./uploader.toolkit";
-import {ImporterToolkit} from "./importer.toolkit";
+import {UploaderAlignment} from "./uploader.alignment";
+import {ImporterAlignment} from "./importer.alignment";
 import {useUser} from "../../../_providers/user.provider.client";
 
 /**
@@ -33,14 +33,14 @@ export const LoaderTool = ({id=null, model=null, callback = ()=>{}, cancel=()=>{
 
     const user = useUser();
     const _tabs = [{
-        label: `Load in Toolkit`,
-        data: <ImporterToolkit id={id} callback={callback} cancel={cancel}/>,
+        label: `Load in Alignment Tool`,
+        data: <ImporterAlignment id={id} callback={callback} cancel={cancel}/>,
     }];
 
     // Upload restricted to admin users
     if (user) _tabs.push({
-        label: `Upload to Library`,
-        data: <UploaderToolkit id={id} model={model} callback={callback} cancel={cancel} />,
+        label: `Upload Image to Library`,
+        data: <UploaderAlignment id={id} model={model} callback={callback} cancel={cancel} />,
     });
 
     return <>
diff --git a/client/src/_components/toolkit/tools/opener.toolkit.js b/client/src/_components/alignment/tools/opener.alignment.js
similarity index 96%
rename from client/src/_components/toolkit/tools/opener.toolkit.js
rename to client/src/_components/alignment/tools/opener.alignment.js
index 20f89372..46d03025 100644
--- a/client/src/_components/toolkit/tools/opener.toolkit.js
+++ b/client/src/_components/alignment/tools/opener.alignment.js
@@ -1,6 +1,6 @@
 /*!
  * MLE.Client.Components.Toolkit.Opener
- * File: opener.toolkit.js
+ * File: opener.alignment.js
  * Copyright(c) 2023 Runtime Software Development Inc.
  * Version 2.0
  * MIT Licensed
@@ -22,11 +22,11 @@ import Accordion from '../../common/accordion';
 import Button from '../../common/button';
 import InputSelector from '../../selectors/input.selector';
 import { UserMessage } from '../../common/message';
-import {useIat} from "../../../_providers/toolkit.provider.client";
-import {initPanel} from "../panel/init.panel.toolkit";
+import {useIat} from "../../../_providers/alignment.provider.client";
+import {initPanel} from "../panel/init.panel.alignment";
 import {useDialog} from "../../../_providers/dialog.provider.client";
 import {useNav} from "../../../_providers/nav.provider.client";
-import {getTooltip} from "../../content/toolkit.help";
+import {getTooltip} from "../../content/alignment.help";
 import {useUser} from "../../../_providers/user.provider.client";
 
 /**
diff --git a/client/src/_components/toolkit/tools/pointer.toolkit.js b/client/src/_components/alignment/tools/pointer.alignment.js
similarity index 98%
rename from client/src/_components/toolkit/tools/pointer.toolkit.js
rename to client/src/_components/alignment/tools/pointer.alignment.js
index 160c70ac..b593ac59 100644
--- a/client/src/_components/toolkit/tools/pointer.toolkit.js
+++ b/client/src/_components/alignment/tools/pointer.alignment.js
@@ -1,6 +1,6 @@
 /*!
  * MLE.Client.Components.Toolkit.Pointer
- * File: pointer.toolkit.js
+ * File: pointer.alignment.js
  * Copyright(c) 2023 Runtime Software Development Inc.
  * Version 2.0
  * MIT Licensed
@@ -24,7 +24,7 @@
  */
 
 import {useState} from 'react';
-import {scalePoint} from "./scaler.toolkit";
+import {scalePoint} from "./scaler.alignment";
 
 /**
  * Compute local mouse position on canvas.
diff --git a/client/src/_components/toolkit/tools/register.toolkit.js b/client/src/_components/alignment/tools/register.alignment.js
similarity index 97%
rename from client/src/_components/toolkit/tools/register.toolkit.js
rename to client/src/_components/alignment/tools/register.alignment.js
index c2de92a1..06378e23 100644
--- a/client/src/_components/toolkit/tools/register.toolkit.js
+++ b/client/src/_components/alignment/tools/register.alignment.js
@@ -1,6 +1,6 @@
 /*!
  * MLE.Client.Components.Toolkit.Register
- * File: register.toolkit.js
+ * File: register.alignment.js
  * Copyright(c) 2023 Runtime Software Development Inc.
  * Version 2.0
  * MIT Licensed
@@ -9,7 +9,7 @@
  * Description
  *
  * Toolkit panel component is the main container for the canvas stack and integrates referenced DOM
- * elements with panel state changes and user mouse and key events. The toolkit makes extensive
+ * elements with panel state changes and user mouse and key events. The alignment makes extensive
  * use of the Canvas API for image rendering and markup. Image transformations use the OpenCV.js
  * JavaScript libraries.
  *
@@ -33,10 +33,10 @@
 import Button from '../../common/button';
 import React, {useState} from 'react';
 import Badge from '../../common/badge';
-import {useIat} from "../../../_providers/toolkit.provider.client";
+import {useIat} from "../../../_providers/alignment.provider.client";
 import InputSelector from "../../selectors/input.selector";
-import {correlation} from "../utils/align.utils.toolkit";
-import {scalePoint} from "./scaler.toolkit";
+import {correlation} from "../utils/align.utils.alignment";
+import {scalePoint} from "./scaler.alignment";
 
 /**
  * Show selected control points for image alignment/registration. Allows for editing and deletion of points.
diff --git a/client/src/_components/toolkit/tools/resizer.toolkit.js b/client/src/_components/alignment/tools/resizer.alignment.js
similarity index 99%
rename from client/src/_components/toolkit/tools/resizer.toolkit.js
rename to client/src/_components/alignment/tools/resizer.alignment.js
index 42162be3..dd80be4a 100644
--- a/client/src/_components/toolkit/tools/resizer.toolkit.js
+++ b/client/src/_components/alignment/tools/resizer.alignment.js
@@ -1,6 +1,6 @@
 /*!
  * MLE.Client.Tools.Toolkit.Resizer
- * File: resizer.toolkit.js
+ * File: resizer.alignment.js
  * Copyright(c) 2022 Runtime Software Development Inc.
  * Version 2.0
  * MIT Licensed
@@ -10,7 +10,7 @@ import React from 'react';
 import Button from '../../common/button';
 import { UserMessage } from '../../common/message';
 import InputSelector from '../../selectors/input.selector';
-import {useIat} from "../../../_providers/toolkit.provider.client";
+import {useIat} from "../../../_providers/alignment.provider.client";
 
 /**
  * Adjustments to layer dimensions.
diff --git a/client/src/_components/toolkit/tools/scaler.toolkit.js b/client/src/_components/alignment/tools/scaler.alignment.js
similarity index 98%
rename from client/src/_components/toolkit/tools/scaler.toolkit.js
rename to client/src/_components/alignment/tools/scaler.alignment.js
index 30615186..82af860b 100644
--- a/client/src/_components/toolkit/tools/scaler.toolkit.js
+++ b/client/src/_components/alignment/tools/scaler.alignment.js
@@ -1,6 +1,6 @@
 /*!
  * MLE.Client.Toolkit.Transform
- * File: scaler.toolkit.js
+ * File: scaler.alignment.js
  * Copyright(c) 2023 Runtime Software Development Inc.
  * Version 2.0
  * MIT Licensed
diff --git a/client/src/_components/toolkit/tools/uploader.toolkit.js b/client/src/_components/alignment/tools/uploader.alignment.js
similarity index 95%
rename from client/src/_components/toolkit/tools/uploader.toolkit.js
rename to client/src/_components/alignment/tools/uploader.alignment.js
index 8d9af7be..17048f9f 100644
--- a/client/src/_components/toolkit/tools/uploader.toolkit.js
+++ b/client/src/_components/alignment/tools/uploader.alignment.js
@@ -1,6 +1,6 @@
 /*!
  * MLE.Client.Components.Toolkit.Uploader
- * File: uploader.toolkit.js
+ * File: uploader.alignment.js
  * Copyright(c) 2023 Runtime Software Development Inc.
  * Version 2.0
  * MIT Licensed
@@ -21,10 +21,10 @@ import Editor from '../../editors/default.editor';
 import {genSchema} from '../../../_services/schema.services.client';
 import {createNodeRoute} from '../../../_utils/paths.utils.client';
 import { useUser } from '../../../_providers/user.provider.client';
-import {useIat} from "../../../_providers/toolkit.provider.client";
+import {useIat} from "../../../_providers/alignment.provider.client";
 import InputSelector from "../../selectors/input.selector";
 import {UserMessage} from "../../common/message";
-import Canvas from "../canvas/default.canvas.toolkit";
+import Canvas from "../canvas/default.canvas.alignment";
 
 /**
  * Upload images from IAT canvas to MLP library.
@@ -32,7 +32,7 @@ import Canvas from "../canvas/default.canvas.toolkit";
  * @public
  */
 
-export const UploaderToolkit = ({ id=null, model=null, callback = () => {}, cancel = () => {} }) => {
+export const UploaderAlignment = ({ id=null, model=null, callback = () => {}, cancel = () => {} }) => {
 
     const user = useUser();
     const iat = useIat();
diff --git a/client/src/_components/toolkit/utils/align.utils.toolkit.js b/client/src/_components/alignment/utils/align.utils.alignment.js
similarity index 99%
rename from client/src/_components/toolkit/utils/align.utils.toolkit.js
rename to client/src/_components/alignment/utils/align.utils.alignment.js
index 0ef6142a..45060d40 100644
--- a/client/src/_components/toolkit/utils/align.utils.toolkit.js
+++ b/client/src/_components/alignment/utils/align.utils.alignment.js
@@ -222,7 +222,7 @@ export const alignImages = (cv = null, srcPanel, dstPanel, canvas, targetImage,
 
 /*!
  * MLE.Client.Toolkit.Utilities.Align
- * File: align.utils.toolkit.js
+ * File: align.utils.alignment.js
  * Copyright(c) 2023 Runtime Software Development Inc.
  * Version 2.0
  * MIT Licensed
diff --git a/client/src/_components/toolkit/utils/loader.utils.toolkit.js b/client/src/_components/alignment/utils/loader.utils.alignment.js
similarity index 95%
rename from client/src/_components/toolkit/utils/loader.utils.toolkit.js
rename to client/src/_components/alignment/utils/loader.utils.alignment.js
index b645f771..2ed130ca 100644
--- a/client/src/_components/toolkit/utils/loader.utils.toolkit.js
+++ b/client/src/_components/alignment/utils/loader.utils.alignment.js
@@ -1,6 +1,6 @@
 /*!
  * MLE.Client.Toolkit.Utilities.Loader
- * File: loader.utils.toolkit.js
+ * File: loader.utils.alignment.js
  * Copyright(c) 2023 Runtime Software Development Inc.
  * Version 2.0
  * MIT Licensed
@@ -93,6 +93,8 @@ export const loadImage = async (properties, callback) => {
 
         api: (id, selectRaw) => {
 
+            console.log(id, selectRaw)
+
             /**
              * Update progress data. Progress data is updated until
              * uploading has completed.
@@ -112,16 +114,16 @@ export const loadImage = async (properties, callback) => {
                     // - converted to MB
                     const { loaded = 0, total = 0 } = e || {};
 
-                    // const completedBytes = (loaded / 1000000).toFixed(2);
-                    // const totalBytes = (total / 1000000).toFixed(2);
-                    // const percent = (100 * (completedBytes / totalBytes)).toFixed(0);
-                    // const notProgressive = total === 0;
+                    const completedBytes = (loaded / 1000000).toFixed(2);
+                    const totalBytes = (total / 1000000).toFixed(2);
+                    const percent = (100 * (completedBytes / totalBytes)).toFixed(0);
+                    const notProgressive = total === 0;
                     const done = (total > 0 && loaded > 0 && total === loaded);
 
                     // update progress state
                     // if (!notProgressive) setMessage({msg: `${percent}%`, type: 'info'});
                     // else setMessage({msg: `${completedBytes}MB`, type: 'info'});
-                    //console.log(e, {msg: `${percent}%`, type: 'info'});
+                    console.log(e, {msg: `${percent}%`, type: 'info'});
 
                     // end loading
                     if (done) {
diff --git a/client/src/_components/toolkit/utils/tiff.utils.toolkit.js b/client/src/_components/alignment/utils/tiff.utils.alignment.js
similarity index 99%
rename from client/src/_components/toolkit/utils/tiff.utils.toolkit.js
rename to client/src/_components/alignment/utils/tiff.utils.alignment.js
index 5d84efc0..1e61f051 100644
--- a/client/src/_components/toolkit/utils/tiff.utils.toolkit.js
+++ b/client/src/_components/alignment/utils/tiff.utils.alignment.js
@@ -1,6 +1,6 @@
 /*!
  * MLE.Client.Toolkit.Utilities.Align
- * File: align.utils.toolkit.js
+ * File: align.utils.alignment.js
  * Copyright(c) 2023 Runtime Software Development Inc.
  * Version 2.0
  * MIT Licensed
diff --git a/client/src/_components/common/form.js b/client/src/_components/common/form.js
index df813709..0bcc89cc 100644
--- a/client/src/_components/common/form.js
+++ b/client/src/_components/common/form.js
@@ -18,7 +18,7 @@
  *
  * ---------
  * Revisions
- *
+ * - 30-11-2023   Fixed form reset to nullify form data in-component
  *
  */
 
@@ -36,6 +36,9 @@ import {getError} from "../../_services/schema.services.client";
 // default form error
 const defaultError = {msg: getError(), type: 'error'};
 
+// default noop
+const noop = async ()=>{};
+
 /**
  * Defines general form component.
  *
@@ -57,12 +60,12 @@ const defaultError = {msg: getError(), type: 'error'};
 const Form = ({
                   model,
                   schema,
-                  loader = null,
+                  loader = noop,
                   callback,
                   messages={},
                   onChange = () => {},
                   onCancel = () => {},
-                  onReset = null,
+                  onReset = () => {},
                   opts = null,
                   allowEmpty = false,
                   disabledInputs = {},
@@ -75,15 +78,15 @@ const Form = ({
 
     // generate unique ID value for form inputs
     const formID = `_form_${model}_${view}_`;
-    const _isMounted = React.useRef(false);
 
     // initialize state for input parameters
     // const [data, setData] = React.useState({});
     const [data, setData] = React.useState({});
     const [loaded, setLoaded] = React.useState(false);
+    const [loading, setLoading] = React.useState(true);
     const [fieldsetSchema, setFieldsetSchema] = React.useState([]);
     const [modified, setModified] = React.useState(false);
-    const [isDisabled, setDisabled] = React.useState(false);
+    const [isDisabled, setDisabled] = React.useState(true);
 
     // create input error states / message state
     const [errors, setErrors] = React.useState({});
@@ -94,57 +97,42 @@ const Form = ({
     // initialize fieldset schema on navigation change
     // - set fieldset schema to initial schema if not modified in form editor
     React.useEffect(() => {
-        _isMounted.current = true;
-        if (_isMounted.current) {
-            setLoaded(false);
-            if (fieldsets.length !== 0) {
-                // ensure fieldsets are initialized
-                setFieldsetSchema(fieldsets);
-            }
+        // setLoaded(false);
+        if (fieldsets.length !== 0) {
+            // ensure fieldsets are initialized
+            setFieldsetSchema(fieldsets);
         }
-        return () => {
-            _isMounted.current = false;
-        };
     }, [fieldsets, nav]);
 
     // initialize fieldset schema
     // - set fieldset schema to initial schema if not modified in form editor
     React.useEffect(() => {
-        _isMounted.current = true;
-        if (_isMounted.current && !modified && fieldsets.length !== 0) {
+        if (!modified && fieldsets.length !== 0 && !loading) {
             // ensure fieldsets are initialized
             setFieldsetSchema(fieldsets);
         }
-        return () => {
-            _isMounted.current = false;
-        };
-    }, [fieldsets, modified]);
+    }, [fieldsets, modified, loading]);
+
+
+    const _loadFormData = () => {
+        // load form data
+        loader()
+            .then(data => {
+                // set metadata in external state
+                setData(data);
+                setLoaded(true);
+            })
+            .catch(err => {
+                console.error(err);
+                setMessage(data => ({ ...data, '0': defaultError}));
+            })
+            .finally(() => {setLoading(false)});
+        setLoading(false);
+        setDisabled(false);
+    }
 
     // update form data on dialog change
-    React.useEffect( () => {
-        _isMounted.current = true;
-        if (_isMounted.current && !loaded && loader) {
-                loader()
-                    .then(data => {
-                        if (_isMounted.current) {
-                            // set metadata in external state
-                            // console.log('Loader:', data)
-                            setData(data);
-                            setLoaded(true);
-                        }
-                    })
-                    .catch(err => {
-                        if (_isMounted.current) {
-                            console.error(err);
-                            setMessage(data => ({ ...data, '0': defaultError}));
-                        }
-                    });
-        }
-        else if (_isMounted.current) setLoaded(true);
-        return () => {
-            _isMounted.current = false;
-        };
-    }, [loader, loaded]);
+    React.useEffect( _loadFormData, []);
 
     // update form data state
     const _handleChange = (name, value) => {
@@ -158,6 +146,12 @@ const Form = ({
         onCancel();
     }
 
+    // handle form reset
+    const _handleReset = () => {
+        setData({});
+        onReset();
+    }
+
     /**
      * Generate form data validation handlers.
      *
@@ -298,6 +292,7 @@ const Form = ({
             return callback(formData)
                 .finally(() => {
                     setDisabled(false);
+                    _loadFormData();
                 });
         } catch (err) {
             console.error(callback, err);
@@ -467,7 +462,7 @@ const Form = ({
                             disabled={isDisabled}
                             onSubmit={submit}
                             onCancel={_handleCancel}
-                            onReset={onReset}
+                            onReset={_handleReset}
                         />
                     </form>
                     {
diff --git a/client/src/_components/common/icon.js b/client/src/_components/common/icon.js
index 1c043725..0dc65a75 100644
--- a/client/src/_components/common/icon.js
+++ b/client/src/_components/common/icon.js
@@ -10,6 +10,10 @@ import React from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { library } from '@fortawesome/fontawesome-svg-core';
 import {
+
+    faMapMarker,
+    faVectorSquare,
+    faLayerGroup,
     faPaperclip,
     faLocationArrow,
     faChartBar,
@@ -113,7 +117,6 @@ import {
  * @public
  */
 
-
 export const facSurveyor = {
     prefix: 'fas',
     iconName: 'surveyor',
@@ -137,6 +140,9 @@ export const facMLPWordmark = {
  */
 
 library.add(
+    faMapMarker,
+    faVectorSquare,
+    faLayerGroup,
     faLocationArrow,
     faArrowsAltH,
     faChartBar,
@@ -277,13 +283,17 @@ const getIconClass = (iconType) => {
         delete: 'trash-alt',
         import: 'file-import',
         export: 'file-export',
+        extract: 'file-export',
         attach: 'paperclip',
         scroll: 'location-arrow',
         externalLink: 'external-link-square-alt',
         align: 'crosshairs',
-        overlay: 'columns',
+        overlay: 'layer-group',
+        clustered: 'map-marker',
+        boundaries: 'vector-square',
         filter: 'filter',
         filterNavigation: 'filter',
+        list: 'list-alt',
         search: 'search',
         undo: 'undo',
         reset: 'undo',
@@ -349,6 +359,8 @@ const getIconClass = (iconType) => {
         supplemental_images: 'image',
         locations: 'compass',
         glass_plate_listings: 'archive',
+        map_objects: 'map',
+        map_features: 'vector-square',
         maps: 'map',
         participants: 'users',
         participant_groups: 'users',
@@ -365,6 +377,7 @@ const getIconClass = (iconType) => {
         raw: 'file-image',
         pdf: 'file-pdf',
         rtf: 'file-alt',
+        zip: 'file-archive',
         default: 'star',
         mlp: 'mlp_logo',
         wordmark: 'mlp_wordmark',
diff --git a/client/src/_components/common/message.js b/client/src/_components/common/message.js
index a15b93a3..e70a68dc 100644
--- a/client/src/_components/common/message.js
+++ b/client/src/_components/common/message.js
@@ -24,7 +24,7 @@ import Icon from './icon';
 
 const Message = ({
                      closeable=true,
-                     message='',
+                     message=null,
                      icon='info',
                      timeout=false,
                      className='',
diff --git a/client/src/_components/common/singleselect.js b/client/src/_components/common/singleselect.js
new file mode 100644
index 00000000..8cb0014e
--- /dev/null
+++ b/client/src/_components/common/singleselect.js
@@ -0,0 +1,62 @@
+/*!
+ * MLE.Client.Components.Common.SingleSelect
+ * File: singleselect.js
+ * Copyright(c) 2023 Runtime Software Development Inc.
+ * Version 2.0
+ * MIT Licensed
+ */
+
+import React from 'react';
+import { sorter } from '../../_utils/data.utils.client';
+
+/**
+ * Build multiselect widget.
+ *
+ * @public
+ * @param id
+ * @param name
+ * @param label
+ * @param value
+ * @param disabled
+ * @param required
+ * @param disabled
+ * @param options
+ * @param onChange
+ * @param onSelect
+ */
+
+const SingleSelect = ({ id, name, label, value, disabled, required, options, onChange, onSelect }) => {
+    // prepare options data for select input
+    const opts = options
+        .sort(sorter)
+        .map((opt, index) => {
+            const {value = '', label = ''} = opt || {};
+            return <option
+                key={`${id}_${name}_${value}_${index}`}
+                id={`${id}_${name}_${value}`}
+                name={`${name}_${value}`}
+                value={value || ''}>{label}</option>;
+        });
+
+    return <select
+        id={id}
+        name={name}
+        disabled={disabled || options.length === 0}
+        onChange={onChange}
+        onSelect={onSelect}
+        value={value || ''}
+        required={required}
+    >
+        <option
+            key={`default_${id}_${name}`}
+            id={`default_${id}_${name}`}
+            name={`default_${id}_${name}`}
+            value={''}
+        >
+            {label} ...
+        </option>
+        {opts}
+    </select>;
+};
+
+export default SingleSelect;
\ No newline at end of file
diff --git a/client/src/_components/common/slider.js b/client/src/_components/common/slider.js
index d771a9ed..5fedef27 100644
--- a/client/src/_components/common/slider.js
+++ b/client/src/_components/common/slider.js
@@ -19,9 +19,9 @@ import React, {useLayoutEffect, useRef, useState} from 'react';
 import { schema } from '../../schema';
 import Loading from './loading';
 import { UserMessage } from './message';
-import {scaleToFit} from '../toolkit/tools/scaler.toolkit';
+import {scaleToFit} from '../alignment/tools/scaler.alignment';
 import InputSelector from "../selectors/input.selector";
-import Canvas from "../toolkit/canvas/default.canvas.toolkit";
+import Canvas from "../alignment/canvas/default.canvas.alignment";
 import styles from '../styles/slider.module.css';
 import {useWindowSize} from "../../_utils/events.utils.client";
 
diff --git a/client/src/_components/common/table.js b/client/src/_components/common/table.js
index e704de09..49fd509e 100644
--- a/client/src/_components/common/table.js
+++ b/client/src/_components/common/table.js
@@ -8,31 +8,7 @@
 
 import React from 'react';
 import Loading from './loading';
-
-/**
- * Render table header.
- *
- * @public
- * @param tableID
- * @param { rows }
- * @return {JSX.Element}
- */
-
-const TableHeader = ({ tableID, cols }) => {
-    return  <thead>
-                <tr>
-                    {
-                        cols.map((col, index) =>
-                            <th
-                                key={`${tableID}_col_${index}`}
-                                className={col.className}
-                            >
-                                {col.label}
-                            </th>)
-                    }
-                </tr>
-            </thead>
-}
+import Icon from "./icon";
 
 /**
  * Render table body. Filters item values not defined in
@@ -48,23 +24,23 @@ const TableHeader = ({ tableID, cols }) => {
 const TableBody = ({tableID, rows, cols}) => {
     const noop = ()=>{};
     return <tbody>{
-            rows.map((row, index) => {
-                return (
-                    <tr key={`${tableID}_row_${index}`} onClick={row.onClick || noop}>
-                        {
-                            cols
-                                .filter(col => row.hasOwnProperty(col.name))
-                                .map(col =>
-                                    <td
-                                        key={`td_${index}_${col.name}`}
-                                        className={row.className}>
-                                        {row[col.name]}
-                                    </td>
-                                )
-                        }
-                    </tr>
-                );
-            })
+        rows.map((row, index) => {
+            return (
+                <tr key={`${tableID}_row_${index}`} onClick={row.onClick || noop}>
+                    {
+                        cols
+                            .filter(col => row.hasOwnProperty(col.name))
+                            .map(col =>
+                                <td
+                                    key={`td_${index}_${col.name}`}
+                                    className={row.className}>
+                                    {row[col.name]}
+                                </td>
+                            )
+                    }
+                </tr>
+            );
+        })
     }</tbody>
 }
 
@@ -87,15 +63,62 @@ const Table = ({ rows, cols, className=''}) => {
     // generate unique ID value for table
     const tableID = Math.random().toString(16).substring(2);
 
+    // determine default sort field
+    const defaultSort = cols.filter(({defaultSort}) => !!defaultSort).map(({name}) => name).join();
+    const [sortBy, setSortBy] = React.useState(defaultSort);
+    const [order, setOrder] = React.useState(1);
+
+    function _selectSort(col) {
+        console.log(col)
+        setSortBy(col);
+        setOrder(-order);
+    }
+
+    function _compareFn(a, b) {
+        // ensure field value can be sorted by selected column name
+        if (!a.hasOwnProperty(sortBy) || !a.hasOwnProperty(sortBy)) return 0;
+        const nameA = String(a[sortBy]).toLowerCase(); // ignore upper and lowercase
+        const nameB = String(b[sortBy]).toLowerCase(); // ignore upper and lowercase
+        if (nameA < nameB) {
+            return -order;
+        }
+        if (nameA > nameB) {
+            return order;
+        }
+
+        // names must be equal
+        return 0;
+    }
+
     // ensure data has been retrieved
     return Array.isArray(rows) && Array.isArray(cols)
         ?
-            <table className={className}>
-                <TableHeader tableID={tableID} cols={cols} />
-                <TableBody tableID={tableID} rows={rows} cols={cols} />
-            </table>
+        <table className={className}>
+            <thead>
+            <tr>
+                {
+                    cols.map((col, index) =>
+                        <th
+                            key={`${tableID}_col_${index}`}
+                            className={col.className}
+                            onClick={() => {_selectSort(col.name)}}
+                        >
+                            <div className={'h-menu'} style={{cursor: 'pointer'}}>
+                                <ul>
+                                    <li>{col.label}</li>
+                                    <li className={'push'} style={{visibility: `${col.name === sortBy ? 'visible' : 'hidden'}`}}>
+                                        <Icon type={order === 1 ? 'up' : 'down'}/>
+                                    </li>
+                                </ul>
+                            </div>
+                        </th>)
+                }
+            </tr>
+            </thead>
+            <TableBody tableID={tableID} rows={rows.sort(_compareFn)} cols={cols} />
+        </table>
         :
-            <Loading/>
+        <Loading/>
 }
 
 export default Table
diff --git a/client/src/_components/common/tree.js b/client/src/_components/common/tree.js
new file mode 100644
index 00000000..1f26d188
--- /dev/null
+++ b/client/src/_components/common/tree.js
@@ -0,0 +1,316 @@
+/*!
+ * MLE.Client.Components.Common.Tree
+ * File: tree.js
+ * Copyright(c) 2023 Runtime Software Development Inc.
+ * Version 2.0
+ * MIT Licensed
+ *
+ * ----------
+ * Description
+ *
+ * Node tree (list) component. Expandable node tree menu.
+ *
+ * ---------
+ * Revisions
+ */
+
+import React from 'react'
+import {useRouter} from '../../_providers/router.provider.client';
+import {useData} from '../../_providers/data.provider.client';
+import {createNodeRoute} from '../../_utils/paths.utils.client';
+import {getModelLabel, getNodeOrder } from '../../_services/schema.services.client';
+import Button from '../common/button';
+import {sorter} from '../../_utils/data.utils.client';
+import Loading from '../common/loading';
+import Accordion from "../common/accordion";
+import {useNav} from "../../_providers/nav.provider.client";
+import {useWindowSize} from "../../_utils/events.utils.client";
+import styles from '../styles/tree.module.css';
+
+/**
+ * Navigation tree node component.
+ *
+ * @public
+ * @param {Object} item
+ */
+
+const TreeNode = ({data, depth, maxdepth, callback=()=>{}}) => {
+
+    // destructure node data
+    const {
+        type='',
+        id='',
+        label='',
+        hasDependents=false
+    } = data || {};
+
+    // create dynamic data states
+    const [toggle, setToggle] = React.useState(false);
+    const [selected, setSelected] = React.useState(false);
+    const [loadedData, setLoadedData] = React.useState(null);
+    const [error, setError] = React.useState(null);
+    const treeNode = React.createRef();
+    const _isMounted = React.useRef(true);
+
+    // initialization
+    const router = useRouter();
+    const api = useData();
+
+    // get full model label
+    const modelLabel = getModelLabel(type);
+
+    // handle toggle events
+    const _handleToggle = () => {
+        // open collapsible
+        setToggle(!toggle);
+    }
+
+    // handle select events
+    const _handleSelect = () => {
+        callback(type, id);
+        setSelected(!selected);
+    }
+
+    // toggle button classnames
+    const classnames = [
+        'tree-node',
+        hasDependents ? 'toggle' : 'leaf'
+    ];
+
+    // API call to retrieve node data (if not yet loaded)
+    React.useEffect(() => {
+        _isMounted.current = true;
+
+        // load tree node data
+        if (!error && hasDependents && toggle && !loadedData) {
+            const route = createNodeRoute('nodes', 'show', id);
+            router.get(route)
+                .then(res => {
+                    // update state with response data
+                    if (_isMounted.current) {
+
+                        if (res.error) return setError(res.error);
+
+                        // destructure any available dependent nodes
+                        const {response = {}} = res || {};
+                        let {data = {}} = response || {};
+                        const {dependents = []} = data || {};
+
+                        // separate sorted from unsorted captures or non-capture nodes
+                        const unsorted = dependents.filter(item => {
+                            const { node = {}, status = '' } = item || {};
+                            const {type = ''} = node || {};
+                            return ( type === 'historic_captures' || type === 'modern_captures' ) && (status === 'unsorted')
+                        });
+                        const sorted = dependents.filter(item => {
+                            const { node = {}, status = '' } = item || {};
+                            const {type = ''} = node || {};
+                            return ( type !== 'historic_captures' && type !== 'modern_captures' ) || status !== 'unsorted'
+                        });
+
+                        // store separate properties to accommodate sorted/unsorted captures
+                        setLoadedData({
+                            sorted: sorted,
+                            unsorted: unsorted
+                        });
+                    }
+                })
+                .catch(err => console.error(err)
+                );
+        }
+        return () => {
+            _isMounted.current = false;
+        };
+    }, [
+        api,
+        router,
+        id,
+        hasDependents,
+        toggle,
+        treeNode,
+        loadedData,
+        setLoadedData,
+        error
+    ]);
+
+    return (
+        <>
+            <div id={`treenode_${id}`} ref={treeNode} className={`tree-node ${selected ? styles.active : styles.inactive}`}>
+                <div className={'h-menu'}>
+                    <ul>
+                        <li>
+                            <Button
+                                icon={hasDependents ? (toggle ? 'collapse' : 'expand') : 'empty'}
+                                className={classnames.join(' ')}
+                                title={`Expand ${label}.`}
+                                onClick={hasDependents ? _handleToggle : () => {}}
+                            />
+                        </li>
+                        <li>
+                            <Button icon={type} size={'lg'} className={'tree-node-icon'} />
+                        </li>
+                        <li>
+                            <Button
+                                label={label}
+                                size={'sm'}
+                                className={`tree-node-label`}
+                                title={`View ${modelLabel}: ${label}`}
+                                onClick={_handleSelect}
+                            />
+                        </li>
+                    </ul>
+                </div>
+                {
+                    // toggle dependent nodes list
+                    toggle && hasDependents
+                        ? error
+                            ? <Button className={'msg error'} label={'An error occurred'} icon={'error'}/>
+                            : loadedData
+                                ?   <>
+                                    <TreeNodeList depth={depth} maxdepth={maxdepth} items={loadedData.sorted} />
+                                    {
+                                        loadedData.unsorted.length > 0 &&
+                                        <ul>
+                                            <li>
+                                                <Accordion
+                                                    className={'tree-node-unsorted unsorted'}
+                                                    type={'historic_captures'}
+                                                    label={'Unsorted Captures'}
+                                                >
+                                                    <TreeNodeList depth={depth} maxdepth={maxdepth} items={loadedData.unsorted} />
+                                                </Accordion>
+                                            </li>
+                                        </ul>
+                                    }
+                                </>
+                                : <Loading/>
+                        : <></>
+                }
+            </div>
+        </>
+    );
+}
+
+/**
+ * Navigation tree node list component.
+ * - Discovers appropriate menu label text using schema
+ * - Sorts node items: (1) Node order; (2) Alphabetically by label
+ *
+ * @public
+ */
+
+const TreeNodeList = ({items, maxdepth, depth, callback}) => {
+    depth += 1;
+    return maxdepth > depth && <ul>
+        {
+            // return sorted nodes
+            items
+                .map(item => {
+                    const {
+                        node = {},
+                        file = {},
+                        hasDependents = false,
+                        status = '',
+                        label = '',
+                        metadata = {},
+                        refImage = {},
+                        attached = {}
+                    } = item || {};
+                    const {id = '', type = '', owner_id = '', owner_type = ''} = node || {};
+                    const {file_size = 0, mimetype = '', filename = ''} = file || {};
+                    const {url = ''} = refImage || {};
+                    let itemMetadata = metadata || {};
+                    // include file metadata in details
+                    itemMetadata.filename = filename;
+                    itemMetadata.file_size = file_size;
+                    itemMetadata.mimetype = mimetype;
+                    return {
+                        type: type,
+                        id: id,
+                        label: label,
+                        node: node,
+                        order: getNodeOrder(type || '') || 0,
+                        hasDependents: hasDependents,
+                        status: status,
+                        metadata: itemMetadata,
+                        url: url,
+                        attached: attached,
+                        owner: {type: owner_type, id: owner_id}
+                    }
+                })
+                // sort alphabetically / numerically
+                .sort(sorter)
+                // sort by node order
+                .sort(function (a, b) {
+                    return a.order - b.order;
+                })
+                .map(item => {
+                    return (
+                        <li key={`tree_node_${item.id}`}>
+                            <TreeNode depth={depth} maxdepth={maxdepth} data={item} callback={callback} />
+                        </li>
+                    )
+                })
+        }
+    </ul>;
+}
+
+/**
+ * Node Tree component.
+ *
+ * @public
+ *
+ * @return
+ */
+
+const Tree = ({hidden, depth=1, callback=()=>{}}) => {
+
+    const nav = useNav();
+    const treeRef = React.useRef();
+
+    // window dimensions
+    const [, winHeight] = useWindowSize();
+
+    console.log('Tree data:', nav.tree)
+
+    return <>
+        {
+            nav.tree && Object.keys(nav.tree).length > 0
+                ? <div
+                    ref={treeRef}
+                    className={'tree'}
+                    style={{
+                        display: hidden ? ' none' : ' block',
+                        height: (winHeight - 140) + 'px'
+                    }}
+                >
+                    <div className={'root'}>
+                        {
+                            Object.keys(nav.tree)
+                                .map((key, index) => {
+                                    return (
+                                        <Accordion
+                                            key={`nav_tree_item__${key}_${index}`}
+                                            type={key}
+                                            label={getModelLabel(key, 'label')}
+                                            open={true}
+                                        >
+                                            <TreeNodeList
+                                                depth={0}
+                                                maxdepth={depth}
+                                                items={nav.tree[key]}
+                                                filter={nav.filter}
+                                                callback={callback}
+                                            />
+                                        </Accordion>
+                                    )
+                                })
+                        }
+                    </div>
+                </div>
+                : <Loading overlay={true}/>
+        }
+    </>
+}
+
+export default React.memo(Tree)
\ No newline at end of file
diff --git a/client/src/_components/content/toolkit.help.js b/client/src/_components/content/alignment.help.js
similarity index 93%
rename from client/src/_components/content/toolkit.help.js
rename to client/src/_components/content/alignment.help.js
index a95b5156..ce6ccf9c 100644
--- a/client/src/_components/content/toolkit.help.js
+++ b/client/src/_components/content/alignment.help.js
@@ -1,6 +1,6 @@
 /*!
- * MLE.Client.Content.Help.Toolkit
- * File: toolkit.help.js
+ * MLE.Client.Content.Help.Alignment
+ * File: alignment.help.js
  * Copyright(c) 2023 Runtime Software Development Inc.
  * Version 2.0
  * MIT Licensed
@@ -8,11 +8,11 @@
  * ----------
  * Description
  *
- * Help pages for the Image Toolkit component.
+ * Help pages for the Image Alignment component.
  *
  * ---------
  * Revisions
- * - 09-07-2023   Updated instructions for upgraded Toolkit workflows and features.
+ * - 09-07-2023   Updated instructions for upgraded alignment workflows and features.
  */
 
 import React from 'react';
@@ -40,10 +40,10 @@ const tooltips = {
         <p>To load an image from the MLP Library to the Alignment Tool:</p>
         <ol className={'list'}>
             <li>Locate the capture image in the navigator tree</li>
-            <li>Click the <Icon type={'iat'}/> icon to open the Toolkit loader dialog</li>
-            <li>Select which Toolkit panel you want to load the image</li>
+            <li>Click the <Icon type={'iat'}/> icon to open the Alignment loader dialog</li>
+            <li>Select which Alignment panel you want to load the image</li>
             <li>Select the image version you want to load</li>
-            <li>Click the green 'Load Image in Toolkit' button</li>
+            <li>Click the green 'Load Image in Alignment' button</li>
         </ol>
     </div>,
     loadLocalImage: <div>
@@ -61,8 +61,8 @@ const tooltips = {
         <p>To upload an image to the MLP Library from the Alignment Tool:</p>
         <ol className={'list'}>
             <li>Locate the capture image in the navigator tree</li>
-            <li>Click the <Icon type={'iat'}/> icon to open the Toolkit Loader tool</li>
-            <li>Select which Toolkit panel you want to load the image</li>
+            <li>Click the <Icon type={'iat'}/> icon to open the Alignment Loader tool</li>
+            <li>Select which Alignment panel you want to load the image</li>
             <li>Select the image format for the uploaded image</li>
             <li>Select the image version you want to upload</li>
             <li>Click the green 'Upload Image to MLP Library' button</li>
@@ -145,7 +145,7 @@ const tooltips = {
  * @public
  */
 
-const toolkitHelp = (gotoPage) => {
+const alignmentHelp = (gotoPage) => {
 
 
     const gettingStarted = <>
@@ -454,9 +454,9 @@ const toolkitHelp = (gotoPage) => {
      * @public
      */
 
-    const toolkitModes = <>
+    const alignmentModes = <>
         <h4>Alignment Tool Modes</h4>
-        <p>Toolkit operations are available in four modes:</p>
+        <p>Alignment operations are available in four modes:</p>
 
         <table className={'help'}>
             <tbody>
@@ -532,20 +532,6 @@ const toolkitHelp = (gotoPage) => {
 
     </>;
 
-    const masteredImages = <>
-        <h4>Image Mastering in MLE</h4>
-        <p>For aligned and registered images classified as 'mastered' to be uploaded to the MLP library, they must meet the following preconditions:</p>
-        <ol className={'list'}>
-            <li><b>Capture images are aligned</b> Both capture image must be aligned Follow the instructions
-                in <Button icon={'help'} label={'Image Registration'} onClick={() => {gotoPage(2, 2)}} /> to
-                align the images.</li>
-            <li><b>Capture images are sorted</b> The historic and modern capture images must be attached to a
-                historic visit and location (modern visit) respectively, which are associated
-                with a common station node.
-            </li>
-        </ol></>
-
-
     return [
         {
             label: 'Getting Started',
@@ -564,19 +550,15 @@ const toolkitHelp = (gotoPage) => {
             data: panelControls,
         },
         {
-            label: 'Toolkit Modes',
-            data: toolkitModes,
+            label: 'Alignment Modes',
+            data: alignmentModes,
         },
         {
             label: 'Image Registration',
             data: alignmentIATHelp,
-        },
-        {
-            label: 'Mastered Images in MLE',
-            data: masteredImages,
-        },
+        }
     ];
 }
 
-export default toolkitHelp;
+export default alignmentHelp;
 
diff --git a/client/src/_components/content/editor.help.js b/client/src/_components/content/editor.help.js
index 27e5b4e6..80a0243d 100644
--- a/client/src/_components/content/editor.help.js
+++ b/client/src/_components/content/editor.help.js
@@ -125,8 +125,7 @@ const explorerHelp = (gotoPage) => {
             </tbody>
         </table>
         <p><small>* All users have access to high-resolution versions of the images and metadata files. However, only
-            authenticated users
-            have access to the original image uploads.</small></p>
+            authenticated users have access to the original image uploads.</small></p>
     </>;
 
     /**
@@ -582,6 +581,24 @@ const explorerHelp = (gotoPage) => {
         </table>
     </>;
 
+    const masteredImages = <>
+        <h4>Mastered Captures</h4>
+        <p>Historic and modern capture images must be classified as <b>Mastered</b> (the selected image state) to be used
+            in image comparison pairs. Since captures contain multiple images versions - including multiple mastered images -
+            the <b>particular image used in historic and modern comparisons is the last updated mastered image</b>.
+        To select an image as the selected mastered image, open the editor dialog for that image and click update.</p>
+            <p>Mastered images must also meet the following preconditions:</p>
+        <ol className={'list'}>
+            <li><b>Capture images must be aligned</b> Both capture image must be properly aligned and registered using
+                an image editing software application or other tool. Explorer has a built-in Alignment tool that allows users
+                to align two images using homographic transformations. Refer to instructions
+                in the <Button icon={'help'} label={'Alignment Tool'} onClick={() => {gotoPage(2, 0)}} /> tab for details.</li>
+            <li><b>Capture images must be sorted</b> The historic and modern capture images must be attached to a
+                historic visit and location (modern visit) respectively, which are associated
+                with a common station node.
+            </li>
+        </ol></>;
+
     // index of editor help content
     return [
         {
@@ -596,6 +613,10 @@ const explorerHelp = (gotoPage) => {
             label: 'Handling Images',
             data: editorImagesHelp,
         },
+        {
+            label: 'Mastered Captures',
+            data: masteredImages,
+        },
         {
             label: 'Metadata Files',
             data: editorMetadataHelp,
diff --git a/client/src/_components/content/explorer.help.js b/client/src/_components/content/explorer.help.js
index 024c1c0e..928a135b 100644
--- a/client/src/_components/content/explorer.help.js
+++ b/client/src/_components/content/explorer.help.js
@@ -81,8 +81,8 @@ const explorerHelp = (gotoPage) => {
             Search and filter results are also loaded in the viewer.</p>
         <p>The viewer is where <Button icon={'help'} label={'Capture Images'} onClick={() => {gotoPage(0, 2)}} />
             and <Button icon={'help'} label={'Metadata'} onClick={() => {gotoPage(0, 1)}} /> are
-            loaded for an indepth look at things. For example, navigate to surveyor
-            <a href={"http://localhost:3000/surveyors/show/5"} target={'_blank'} rel={"noreferrer"}>Morrison Parsons Bridgland</a> to see
+            loaded for an indepth look at things. For example, navigate to
+            surveyor <a href={"/surveyors/show/5"} target={'_blank'} rel={"noreferrer"}>Morrison Parsons Bridgland</a> to see
             an extensive list of surveys undertaken in the last century. Each survey in the list can be expanded to
             show metadata for that item, as well as any attached dependent items -- in this case, survey seasons.
             You can also click on the item label to go to open the page for that item.</p>
@@ -443,13 +443,13 @@ const explorerHelp = (gotoPage) => {
                 <th><Icon type={'map'} /></th>
                 <th>Map</th>
                 <td>
-                    <p>The map navigator marks the geographical locations of survey Stations on
-                        a geographical map. Multiple Stations are clustered in markers that
-                        show the cluster size.</p>
-                    <p>Click on the marker to view the list of Stations in the
-                        cluster. Double click on the marker to also zoom and center the map on the cluster.</p>
+                    <p>The map navigator shows the geographical locations survey stations and other features on
+                        a map. Multiple Stations are clustered in markers that show the cluster size.</p>
+                    <p>Click on the cluster or station marker to view details in the view panel. Double click on the
+                        marker to also zoom and center the map on the cluster.</p>
                     <p>Pan by dragging the map; zoom by double clicking the map area, or use the zoom controls at top
-                        left. You can also view different layers by clicking the layers icon at top right.</p>
+                        left. You can also view different base layers by clicking the layers icon at top right.</p>
+                    <p>More information is provided in the <Button icon={'map'} label={'Map Tool Guide'} onClick={() => {gotoPage(1, 0)}} />.</p>
                 </td>
             </tr>
             <tr>
diff --git a/client/src/_components/content/map.help.js b/client/src/_components/content/map.help.js
new file mode 100644
index 00000000..3050809d
--- /dev/null
+++ b/client/src/_components/content/map.help.js
@@ -0,0 +1,299 @@
+/*!
+ * MLE.Client.Content.Help.Map
+ * File: map.help.js
+ * Copyright(c) 2024 Runtime Software Development Inc.
+ * Version 2.0
+ * MIT Licensed
+ *
+ * ----------
+ * Description
+ *
+ * Help pages for the Map Navigator component.
+ *
+ * ---------
+ * Revisions
+ * - 11-02-2024   Updated instructions for map navigation usage and features.
+ */
+
+import React from 'react';
+import Icon from '../common/icon';
+import Button from "../common/button";
+
+/**
+ * Alignment Tool tooltip selector
+ *
+ * @public
+ */
+
+export const getTooltip = (key) => {
+    return tooltips.hasOwnProperty(key) ? tooltips[key] : null;
+}
+
+/**
+ * Alignment Tool instructions
+ *
+ * @public
+ */
+
+const tooltips = {
+    selectMapFeatures: <div>
+        <p>To load an image from the MLP Library to the Alignment Tool:</p>
+        <ol className={'list'}>
+            <li>Locate the capture image in the navigator tree</li>
+            <li>Click the <Icon type={'iat'}/> icon to open the Alignment loader dialog</li>
+            <li>Select which Alignment panel you want to load the image</li>
+            <li>Select the image version you want to load</li>
+            <li>Click the green 'Load Image in Alignment' button</li>
+        </ol>
+    </div>,
+    viewStationMarkers: <div>
+        <div>To load an image from a local directory to the Alignment Tool:</div>
+        <ol className={'list'}>
+            <li>Click the <Icon type={'load'} /> open file button in the panel controls, or
+                click 'Click to load' button on the centre of the panel.
+            </li>
+            <li>Select "Open Local Image File" or drag and drop a file into the import box and click
+                "Open Image".
+            </li>
+        </ol>
+    </div>,
+    clusterStationMarkers: <div>
+        <p>To upload an image to the MLP Library from the Alignment Tool:</p>
+        <ol className={'list'}>
+            <li>Locate the capture image in the navigator tree</li>
+            <li>Click the <Icon type={'iat'}/> icon to open the Alignment Loader tool</li>
+            <li>Select which Alignment panel you want to load the image</li>
+            <li>Select the image format for the uploaded image</li>
+            <li>Select the image version you want to upload</li>
+            <li>Click the green 'Upload Image to MLP Library' button</li>
+        </ol>
+    </div>,
+    cropImage: <div>
+        <p>To crop an image to a smaller region:</p>
+        <ol className={'list'}>
+            <li>Select 'Crop' mode. This displays the crop tool below panels with
+                loaded images.</li>
+            <li>Click and drag on the image to outline the region of interest. The (X, Y) offset and (W, H) dimensions of the
+                selected area are shown in the crop tool. Note that these values are scaled by the rendered image scale.
+            </li>
+            <li>Adjust the dimensions and position of the selected area from the crop panel or by
+                dragging the selection box to a new location in the region. Using the 'Match' function you can also match
+                the selected area to match the dimensions of the opposite panel image (if loaded). The selected area
+                can be cleared using the <b>erase</b> control button, or by resetting, resizing or changing
+                the view scale of the image.
+            </li>
+            <li>
+                To apply the crop, click the green <Icon type={'crop'} /> <b>Crop</b> button in the lower crop panel.
+            </li>
+        </ol></div>,
+    resizeImage: <div>
+        <p>To resize an image:</p>
+        <ol className={'list'}>
+            <li>Click the 'resize' button above the image to open the Resizer tool</li>
+            <li>In the Resizer tool, update the dimensions of the image (or canvas). You can match image width or height
+                to the opposite panel image dimensions.
+            </li>
+            <li>Alternatively, you can scale the image by a factor. The aspect ratio of the image is maintained by default.
+            </li>
+            <li>
+                Click the 'Update' button to resize the image. Note that it is necessary to also save the image state to
+                update the source image.
+            </li>
+        </ol>
+    </div>,
+    alignImages: <div>
+        <p>To align and master two images in the Alignment Tool:</p>
+        <ol className={'list'}>
+            <li>Load images into the left and right panels</li>
+            <li>Correct differences in image size by resizing an image such that the largest height/width
+                matches that of the opposite image. Use the Resizer tool 'Match' function to match the height or width of
+                the corresponding image.</li>
+            <li>Click the <Icon type={'crosshairs'} /> <b>Align</b> button from the centre menu OR hit
+                the <code>shift</code> key to switch to control point selection.
+                The mouse cursor will appear as a crosshair. Click on a visual feature in the image to select each point.
+                Four corresponding control points selected from each image are required for alignment.
+            </li>
+            <li>Identify four corresponding features in the image. Use these guidelines for selection: (1) The control
+                points should be pixels that you can identify in both images that haven’t varied over time. (2) The
+                control points need to be spread in a box shape around the image; (3) Select points that reduce
+                the collinearity coefficient as close to zero as possible. (4) To select more precise control points,
+                use pan and zoom into the region of interest, or use the image magnifier by holding down the <code>ctrl</code> key .
+            </li>
+            <li>Selected control points will appear on the image as cross-shaped markers numbered in the order they were created.
+                The coordinates of control points are shown in the Align tool below the canvas. Click
+                "Overlay" to view both sets of control points on the same image.</li>
+            <li>You can adjust the coordinates or delete control point by clicking the marker icon in the Control
+                Points tool.</li>
+            <li>Once four control point pairs have been selected, from the panel of the 'target' image to be transformed,
+                click the green "Align" button on the Align tool. The image will be transformed
+                using perspective transformation
+                (See <a target={'_blank'} rel={"noreferrer"} href={'https://docs.opencv.org/4.x/da/d54/group__imgproc__transform.html'}>OpenCV documentation</a>).
+            </li>
+            <li>To validate the alignment, click the <Icon type={'images'} /> <b>Compare</b> button in the centre menu to
+                load the images into the <b>Compare Tool</b>. The images will appear superimposed. Use the opacity slider to compare
+                alignment of the selected features. If the two images are of different shapes, you can crop both images to the
+                same size in the Compare Tool (follow the same instructions as for panel cropping). Once a crop has been applied,
+                click "Save" to replace the panel images with the cropped versions.
+                .</li>
+        </ol>
+    </div>
+}
+
+/**
+ * Map Navigation Tool help pages.
+ *
+ * @public
+ */
+
+const mapHelp = (gotoPage) => {
+
+    /**
+     * Map Navigation Tool "Getting Started" help page.
+     *
+     * @public
+     */
+
+    const gettingStarted = <>
+        <h4>Map Navigator Tool: Getting Started</h4>
+        <p>
+            Use the Map Navigator Tool to view the geographical locations of surveys and stations in the Mountain Legacy
+            collection.
+        </p>
+        <ol className={'list'}>
+            <li><b>Basic Features:</b> Panning, zooming, and filtering of stations and other map features.</li>
+            <li><b>View Map Features:</b> View mapsheets and other markers and boundaries using the "Features" tool.</li>
+            <li><b>Metadata:</b> View metadata associated with each map feature.</li>
+        </ol>
+
+
+    </>;
+
+
+    /**
+     * Map controls help page.
+     *
+     * @public
+     */
+
+    const mapControls = <>
+        <h4>Map Controls</h4>
+        <p>Map controls allow you to move around the map and filter features and information.</p>
+        <p>Multiple Stations are clustered in markers that show the cluster size.</p>
+        <p>Click on the marker to view the list of Stations in the cluster. Double click on the
+            marker to also zoom and center the map on the cluster.</p>
+        <p>Pan by dragging the map; zoom by double clicking the map area, or use the zoom
+            controls at top left. You can also view different layers by clicking the layers icon at top right.</p>
+
+        <table className={'help'}>
+            <tbody>
+            <tr>
+                <th><Icon type={'add'} /></th>
+                <th>Zoom In</th>
+                <td>
+                    <p>Zoom into the map. </p>
+                </td>
+            </tr>
+            <tr>
+                <th><Icon type={'minus'} /></th>
+                <th>Zoom Out</th>
+                <td>
+                    <p>Zoom out of the map.</p>
+                </td>
+            </tr>
+            <tr>
+                <th><Icon type={'move'} /></th>
+                <th>Pan</th>
+                <td>
+                    <p>Click and drag the map to pan to a different view.</p>
+                </td>
+            </tr>
+            <tr>
+                <th><Icon type={'overlay'} /></th>
+                <th>Layers</th>
+                <td>
+                    <p>Select the map base layer (for example, satellite imagery or street map)</p>
+                </td>
+            </tr>
+            <tr>
+                <th><Icon type={'stations'} /></th>
+                <th>View Stations</th>
+                <td>
+                    <p>Toggle view of station markers on the map.</p>
+                </td>
+            </tr>
+            <tr>
+                <th><Icon type={'clustered'} /></th>
+                <th>Cluster Stations</th>
+                <td>
+                    <p>Toggle clustered or individuated view of station markers.</p>
+                </td>
+            </tr>
+            <tr>
+                <th><Icon type={'map_features'} /></th>
+                <th>Features</th>
+                <td>
+                    <p>Opens a dialog to select map features to view on the map.</p>
+                </td>
+            </tr>
+            </tbody>
+        </table>
+    </>
+
+    /**
+     * Map features help page.
+     *
+     * @public
+     */
+
+    const mapFeatures = <>
+        <h4>Map Features</h4>
+        <p>Map features are artifacts such as location markers or map boundaries that can be shown on the map.</p>
+        <p>You can select specific map features from the 'Features' dialog opened from the map controls. Map features
+        are also listed in the <Button icon={'help'} label={'Tree Navigator'} onClick={() => {gotoPage(0, 3)}} /> grouped
+          under  'Map Feature Groups'. </p>
+        <h5>Map Feature Types</h5>
+        <table className={'help'}>
+            <tbody>
+            <tr>
+                <th>NTS Map sheets</th>
+                <td>
+                    <p>National Topographic System (NTS) map sheets refer to indexed map areas covering locations in Canada.
+                        Map sheets are identified by a combination of numbers and letters, from A through P (e.g. 13C).
+                        They are available in two standard scales: 1:50 000 and 1:250 000. The 1:250 000 blocks are
+                        divided into 16 segments (1 to 16), forming blocks used for 1:50 000 scale mapping. </p>
+                </td>
+            </tr>
+            <tr>
+                <th>Boundaries</th>
+                <td>
+                    <p>Boundaries are regions that correspond to MLP historic metadata such as survey or park boundaries.</p>
+                </td>
+            </tr>
+            </tbody>
+        </table>
+        <h5>Displaying Map Feature</h5>
+        <p>To view map features on the map navigator tool, such as NTS mapsheets, open the map display dialog by clicking
+            the <Icon type={'map_features'} /> Features button. Here you can select to display all or some of the available map features.
+            Use the <Icon type={'filter'} /> filter inputs at the top of the dialog to filter by name or by map feature group. Click the submit button
+            at the bottom.</p>
+    </>
+
+
+    return [
+        {
+            label: 'Getting Started',
+            data: gettingStarted,
+        },
+        {
+            label: 'Map Controls',
+            data: mapControls,
+        },
+        {
+            label: 'Map Features',
+            data: mapFeatures,
+        }
+    ];
+}
+
+export default mapHelp;
+
diff --git a/client/src/_components/editors/attached.editor.js b/client/src/_components/editors/attached.editor.js
index 310338e1..b37a9e39 100644
--- a/client/src/_components/editors/attached.editor.js
+++ b/client/src/_components/editors/attached.editor.js
@@ -61,8 +61,7 @@ export const AttachedMetadataEditor = ({owner}) => {
         _isMounted.current = true;
         const {type = '', id = ''} = owner || {};
 
-        // request captures for comparison
-        if (id && !error && owner) {
+        if (id && !error && !loaded && owner) {
             router.get(createNodeRoute(type, 'show', id))
                 .then(res => {
                     if (_isMounted.current) {
diff --git a/client/src/_components/editors/default.editor.js b/client/src/_components/editors/default.editor.js
index 084cd501..443343d3 100644
--- a/client/src/_components/editors/default.editor.js
+++ b/client/src/_components/editors/default.editor.js
@@ -16,8 +16,7 @@ import Dialog from "../common/dialog";
 import {UserMessage} from "../common/message";
 import Button from "../common/button";
 import Badge from "../common/badge";
-import {createNodeRoute, redirect} from "../../_utils/paths.utils.client";
-import {useUser} from "../../_providers/user.provider.client";
+import {createNodeRoute} from "../../_utils/paths.utils.client";
 import {useDialog} from "../../_providers/dialog.provider.client";
 
 /**
@@ -57,18 +56,15 @@ const Editor = ({
                     callback=()=>{}
                 }) => {
 
-    const user = useUser();
     const router = useRouter();
     const api = useData();
-
+    
     const [progress, setProgress] = React.useState({});
     const [response, setResponse] = React.useState({});
     const [messages, setMessages] = React.useState({});
     const [error, setError] = React.useState(false);
     const [xhr, setXHR] = React.useState(null);
 
-    const _isMounted = React.useRef(false);
-
     // determine if confirmation is required for form submission
     // - 'edit' views update but without closing the dialog
     const skipConfirmation = view === 'edit';
@@ -98,16 +94,6 @@ const Editor = ({
         return {};
     }
 
-
-    // redirect if user is not authenticated
-    React.useEffect(() => {
-        _isMounted.current = true;
-        if (!user && _isMounted.current) {redirect('/')}
-        return () => {
-            _isMounted.current = false;
-        };
-    }, [user]);
-
     /**
      * Handle processing error
      *
diff --git a/client/src/_components/editors/dependents.editor.js b/client/src/_components/editors/dependents.editor.js
index c19378bd..ac46b32e 100644
--- a/client/src/_components/editors/dependents.editor.js
+++ b/client/src/_components/editors/dependents.editor.js
@@ -80,7 +80,7 @@ export const DependentsEditor = ({owner}) => {
 
     React.useEffect(() => {
         _isMounted.current = true;
-        // request captures for comparison
+        // request dependents
         if (_isMounted.current && !loaded && !error && owner) {
             router.get(createNodeRoute(owner.type, 'show', owner.id))
                 .then(res => {
@@ -134,6 +134,10 @@ export const DependentsEditor = ({owner}) => {
         {
             message && <UserMessage closeable={false} message={message}/>
         }
+        {
+            // handle attached metadata editor
+            user && <AttachedMetadataEditor owner={owner} />
+        }
         {
             // handle dependent metadata editor
             user && loaded ?
@@ -201,9 +205,5 @@ export const DependentsEditor = ({owner}) => {
             // handle files metadata editor
             user && loaded && <FilesEditor files={currentFiles} owner={owner} callback={_handleCancel}/>
         }
-        {
-            // handle attached metadata editor
-            user && <AttachedMetadataEditor owner={owner} />
-        }
     </>;
 };
\ No newline at end of file
diff --git a/client/src/_components/editors/map.editor.js b/client/src/_components/editors/map.editor.js
new file mode 100644
index 00000000..c51141fa
--- /dev/null
+++ b/client/src/_components/editors/map.editor.js
@@ -0,0 +1,315 @@
+/*!
+ * MLE.Client.Components.Editors.MapFeatures
+ * File: map.editor.js
+ * Copyright(c) 2024 Runtime Software Development Inc.
+ * Version 2.0
+ * MIT Licensed
+ */
+
+import React from 'react';
+import InputSelector from "../selectors/input.selector";
+import {UserMessage} from "../common/message";
+import {useData} from "../../_providers/data.provider.client";
+import {useRouter} from "../../_providers/router.provider.client";
+import styles from "../styles/mapfeatures.module.css";
+import Icon from "../common/icon";
+import Button from "../common/button";
+import Table from "../common/table";
+import Badge from "../common/badge";
+import {useDialog} from "../../_providers/dialog.provider.client";
+
+
+/**
+ * Map feature selector and editor widget. Used to edit dependent features in map.
+ *
+ * @public
+ * @param {integer} id
+ * @return {JSX.Element}
+ */
+
+export const MapEditor = ({id}) => {
+
+    const api = useData();
+    const router = useRouter();
+    const dialog = useDialog();
+
+    const _isMounted = React.useRef(true);
+
+    // create dynamic data states
+    const [selectedFile, setSelectedFile] = React.useState(null);
+    const [selectedFeatures, setSelectedFeatures] = React.useState([]);
+    const [message, setMessage] = React.useState(null);
+
+    // map features data
+    const [loadedData, setLoadedData] = React.useState(null);
+
+    // prepare image table columns
+    const cols = [
+        {name: 'check', label: ''},
+        {name: 'name', label: 'Name'},
+        {name: 'typeLabel', label: 'Type'},
+        {name: 'map_object', label: 'Map Object'},
+        {name: 'description', label: 'Description'}
+    ];
+
+    // update selected image file for canvas loading
+    const _handleChange = (e) => {
+
+        // reset error message
+        setMessage(null);
+
+        // reject empty file list
+        if (!e.target) return;
+
+        // Get requested target data
+        const { target = {} } = e || {};
+
+        // include local file for upload
+        setSelectedFile(target.value)
+    };
+
+    /**
+     * Flatten feature array to collect feature node IDs
+     * @param features
+     * @private
+     */
+    const _getFeatureIDs = (features) => {
+        return [].concat.apply([], features).map(({nodes_id}) => {return nodes_id});
+    }
+
+    /**
+     * Flatten map features array for selection
+     * @param features
+     * @private
+     */
+    const _getFeatureList = (features) => {
+        return [].concat.apply([], features)
+            .map(feature => {
+                const {nodes_id, owner, name, type, description, geometry} = feature || {};
+                // select map feature type label (if available)
+                const {map_feature_types = []} = api.options || {};
+                // select image state label for value (if available)
+                const mapFeatureType = map_feature_types.find(opt => opt.value === type) || {};
+                return {
+                    className: selectedFeatures.includes(nodes_id) ? styles.active : styles.inactive,
+                    onClick: () => {_handleSelect(nodes_id)},
+                    id: nodes_id,
+                    check: <Icon type={selectedFeatures.includes(nodes_id) ? 'success' : 'cancel'} />,
+                    name: name,
+                    map_object: owner.name || '',
+                    type: type || '',
+                    typeLabel: mapFeatureType.label || '',
+                    description: description,
+                    geometry: geometry
+                }
+            });
+    }
+
+    // convert map features data to selectable options
+    const featureOptions = {
+        features: _getFeatureList(loadedData),
+        data: _getFeatureIDs(loadedData) || [],
+    }
+
+    const _handleClose = () => {
+
+        dialog.clear();
+    }
+
+    const _handleExtract = () => {
+
+        return router.get(`/files/map/features/${selectedFile}`)
+            .then(res => {
+                // update state with response data
+                if (_isMounted.current) {
+                    if (res.error) return setMessage(res.error);
+                    const { response = {} } = res || {};
+                    const { data = {} } = response || {};
+                    setLoadedData(data);
+                }
+            })
+            .catch(err => console.error(err),
+            );
+    }
+
+    // handle submit of filtered map features
+    const _handleSubmit = () => {
+
+        const features = (selectedFeatures || []).map((selectedID) => {
+            const feature = featureOptions.features.find(feature => feature.id === selectedID);
+            const {name, description, type, geometry} = feature || {};
+            return {name, geometry, type, description};
+        });
+
+        router.post(`/files/map/features/${id}`, features, true)
+            .then(res => {
+                // update state with response data
+                if (_isMounted.current) {
+                    if (res.error) return setMessage(res.error);
+                    const { response = {} } = res || {};
+                    const { message = {} } = response || {};
+                    setMessage(message)
+                }
+            })
+            .catch(err => console.error(err),
+            );
+    }
+
+    /**
+     * Handler to reset map objects selection
+     * @private
+     */
+    const _handleResetFile = () => {
+        setSelectedFile('');
+    };
+
+    /**
+     * Handler to reset map objects selection
+     * @private
+     */
+    const _handleReset = () => {
+        setSelectedFeatures([]);
+    };
+
+    /**
+     * Handler for image download selection
+     *
+     * @param id
+     * @private
+     */
+    const _handleSelect = (id) => {
+        // toggle inclusion of selected id
+        selectedFeatures.includes(id)
+            ? setSelectedFeatures(data => {return data.filter(o => o !== id)})
+            : setSelectedFeatures(data => ([ ...data, id ]));
+    };
+
+    /**
+     * Handler for image download selection
+     *
+     * @private
+     */
+    const _handleSelectAll = () => {
+        setSelectedFeatures(featureOptions.data);
+    };
+
+    const {files} = api.data || {};
+    const {metadata_files} = files || {};
+    const fileList = (metadata_files || []).map(metadata_file => {
+        const {file, label} = metadata_file || {};
+        const {id} = file || {};
+        return {
+            value: id,
+            label: `${label}`
+        }
+    });
+
+    return <>
+        {
+            fileList.length === 0 && <UserMessage
+                message={{ msg: 'No Metadata Files Found', type: 'warning' }}
+                closeable={false}
+            />
+        }
+        <InputSelector
+            id={'file_selection'}
+            name={'file_selection'}
+            value={selectedFile}
+            type={'select'}
+            options={fileList}
+            label={'KMZ Metadata File'}
+            onChange={_handleChange}
+        />
+        {
+            <div className={'h-menu'}>
+                <ul>
+                    {
+                        selectedFile && <>
+                            <li>
+                                <Button
+                                    icon={'extract'}
+                                    className={'submit'}
+                                    label={'Extract Map Features'}
+                                    onClick={_handleExtract}
+                                />
+                            </li>
+
+                            <li>
+                                <Button
+                                    icon={'reset'}
+                                    className={'submit'}
+                                    label={'Reset'}
+                                    onClick={_handleResetFile}
+                                />
+                            </li>
+                        </>
+                    }
+                    <li>
+                        <Button
+                            icon={'close'}
+                            label={'Close'}
+                            className={'submit'}
+                            onClick={_handleClose}
+                        />
+                    </li>
+
+                </ul>
+            </div>
+        }
+        {
+            loadedData &&
+            <fieldset className={'submit'}>
+                <div>
+                    <div className={'h-menu'}>
+                        <ul>
+                            <li>
+                                <Button
+                                    icon={'list'}
+                                    label={'Select All'}
+                                    onClick={_handleSelectAll}
+                                />
+                            </li>
+                            <li>
+                                <Button
+                                    icon={'close'}
+                                    label={'Deselect All'}
+                                    onClick={_handleReset}
+                                />
+                            </li>
+                        </ul>
+                    </div>
+                    <Table rows={featureOptions.features} cols={cols} className={`files`} />
+                    <Badge
+                        className={'active'}
+                        label={selectedFeatures.length === 1 ?`${selectedFeatures.length} map object selected.` : `${selectedFeatures.length} map objects selected.`}
+                        icon={'map_objects'}
+                    />
+                    <div className={'h-menu'}>
+                        <UserMessage message={message} closeable={true} />
+                        <ul>
+                            <li>
+                                {
+                                    Array.isArray(selectedFeatures) && selectedFeatures.length > 0 &&
+                                    <>
+                                        <Button
+                                            icon={'import'}
+                                            label={'Extract'}
+                                            className={'submit'}
+                                            onClick={_handleSubmit}
+                                        />
+                                        <Button
+                                            icon={'close'}
+                                            label={'Close'}
+                                            className={'submit'}
+                                            onClick={_handleClose}
+                                        />
+                                    </>
+                                }
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+            </fieldset>
+        }
+    </>
+}
\ No newline at end of file
diff --git a/client/src/_components/editors/options.editor.js b/client/src/_components/editors/options.editor.js
index 5e19399e..3fc1080b 100644
--- a/client/src/_components/editors/options.editor.js
+++ b/client/src/_components/editors/options.editor.js
@@ -33,7 +33,7 @@ const OptionsEditor = ({type='options', onCancel=()=>{}}) => {
     const [options, setOptions] = React.useState({});
     const [selectedIDs, setSelectedIDs] = React.useState({});
     const [optionData, setOptionData] = React.useState({});
-    const excludedOpts = ['image_states', 'surveyors', 'surveys', 'survey_seasons'];
+    const excludedOpts = ['image_states', 'surveyors', 'surveys', 'survey_seasons', 'statuses', 'map_objects'];
     const [loaded, setLoaded] = React.useState(false);
 
     // generate unique ID value for form inputs
diff --git a/client/src/_components/kml/Stn_1_Sanseverino_2016.kmz b/client/src/_components/kml/Stn_1_Sanseverino_2016.kmz
deleted file mode 100644
index 8a9ed4d39ffd93dd723c124fdd14196bfd740654..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 730
zcmWIWW@Zs#U|`??Vg`oW8$2duF)=XwWo2Ms2l7+$ll8K5bFNMa%%5!_aD4t{|Hd2H
z$<opsA$*}rS6*5Y+CAml&P^TM8pqron4Glx%O@;!EAwWYIOo$hzkk;6`+W1yzX0v`
zvD;!(zg*%M_-MPbc=O7VjbGyD$v^L`pMUp*Zh*t9yqD9jnUzbt|6ZLUwX%Dab5s-$
z%d(DN%w^#+b`x3+TPJClZ)JXZ&@XYuukhGJ-@lD_jZ<zh1v@GIVepeL`+fDv?x?KU
zchBq)+j{0&Sasuev0alVWH0S?_Y_#1`*(6OJHw7`?yB=$9*53e8oyueYTdmzyEd&f
z@i>=Oqq=IFd0LHj|4g%7U6JE^->U7d`{})Ulm6Wj-Q(%*`c3Xr{fkmVr*PT*E<bub
z=&$3H$A<02c6u}4eNWl<)Xn;Vh?aN)n+8K_`mURDMb~<!udO-l7rNf{vM;~LvHYo%
z=31``7P0B<kcusMBQi(F?)9fjH%gP&u%C5W__^-`JNw?tQ(N7#S2c&oo~e_0toS^W
zZTXS)DZH+`XIcDyFC4Eq@pROdX!qEczlx8a|52X2jlb;1M5BVIZ}OBkS2{>0nI!2%
zOwizSe$mxk-q0%Rme_Pi!}D;<B@4eu8AhvLGMZOBlonhv@ndG%Um{pk^Nm+^;-dP}
zO_tq(GcKtlB+4ucWRjMP?b|$c)6J#@6E>)LM7Vee88zJ5qa3x6duCt)2ZxJcug8Q7
zEsqaAobjl@ysh47Lu=T#-*wZ^r|BMDY_#m@597zD>Q~-;(sV6+-Jeq-x8^nHMQ!|l
zF)w8{tKNasHytue&Z`cc%Cl*oaHK>~C&TCETJ7&jiG>VXQv!wV3iU0|ZhQVfL~xCF
xa6wI_XyyHlH_z$^cryZ%AMOMRN~DY+0t}$ZGr*gb4a8>zLQ^2!4>W>-0RW|$KGgsK

diff --git a/client/src/_components/kml/example-2.kml b/client/src/_components/kml/example-2.kml
deleted file mode 100644
index 56afabe3..00000000
--- a/client/src/_components/kml/example-2.kml
+++ /dev/null
@@ -1,85 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<kml xmlns="http://www.opengis.net/kml/2.2" xmlns:gx="http://www.google.com/kml/ext/2.2" xmlns:kml="http://www.opengis.net/kml/2.2" xmlns:atom="http://www.w3.org/2005/Atom">
-<Document>
-	<name>Untitled Project</name>
-	<gx:CascadingStyle kml:id="__managed_style_2E9041D96122D7EECF31">
-		<styleUrl>https://earth.google.com/balloon_components/base/1.0.23.0/card_template.kml#main</styleUrl>
-		<Style>
-			<IconStyle>
-				<scale>1.2</scale>
-				<Icon>
-					<href>https://earth.google.com/earth/rpc/cc/icon?color=1976d2&amp;id=2000&amp;scale=4</href>
-				</Icon>
-				<hotSpot x="64" y="128" xunits="pixels" yunits="insetPixels"/>
-			</IconStyle>
-			<LabelStyle>
-			</LabelStyle>
-			<LineStyle>
-				<color>ff9aa626</color>
-				<width>3</width>
-			</LineStyle>
-			<PolyStyle>
-				<color>40ffffff</color>
-			</PolyStyle>
-			<BalloonStyle>
-			</BalloonStyle>
-		</Style>
-	</gx:CascadingStyle>
-	<gx:CascadingStyle kml:id="__managed_style_1619ACC94B22D7EECF31">
-		<styleUrl>https://earth.google.com/balloon_components/base/1.0.23.0/card_template.kml#main</styleUrl>
-		<Style>
-			<IconStyle>
-				<Icon>
-					<href>https://earth.google.com/earth/rpc/cc/icon?color=1976d2&amp;id=2000&amp;scale=4</href>
-				</Icon>
-				<hotSpot x="64" y="128" xunits="pixels" yunits="insetPixels"/>
-			</IconStyle>
-			<LabelStyle>
-			</LabelStyle>
-			<LineStyle>
-				<color>ff9aa626</color>
-				<width>2</width>
-			</LineStyle>
-			<PolyStyle>
-				<color>40ffffff</color>
-			</PolyStyle>
-			<BalloonStyle>
-			</BalloonStyle>
-		</Style>
-	</gx:CascadingStyle>
-	<StyleMap id="__managed_style_0618FF8D4622D7EECF31">
-		<Pair>
-			<key>normal</key>
-			<styleUrl>#__managed_style_1619ACC94B22D7EECF31</styleUrl>
-		</Pair>
-		<Pair>
-			<key>highlight</key>
-			<styleUrl>#__managed_style_2E9041D96122D7EECF31</styleUrl>
-		</Pair>
-	</StyleMap>
-	<Placemark id="02F7A8FA7822D7EE0A2C">
-		<name>Example Area</name>
-		<description><![CDATA[<div>Example Area<i></i></div>]]></description>
-		<LookAt>
-			<longitude>-123.260724910576</longitude>
-			<latitude>49.99873614610491</latitude>
-			<altitude>1719.58595224931</altitude>
-			<heading>-4.512370726392674</heading>
-			<tilt>0.5203993399117726</tilt>
-			<gx:fovy>35</gx:fovy>
-			<range>240479.2719009519</range>
-			<altitudeMode>absolute</altitudeMode>
-		</LookAt>
-		<styleUrl>#__managed_style_0618FF8D4622D7EECF31</styleUrl>
-		<Polygon>
-			<outerBoundaryIs>
-				<LinearRing>
-					<coordinates>
-						-123.0500165453177,50.0903690722585,1030.048414414258 -123.1594324964716,49.89771658426939,436.9553872345922 -122.9041292507114,49.80075169552649,1480.937952077607 -122.5461382289756,49.87532573804571,1659.053332724201 -122.4457621615127,50.04974996754733,1005.115929721128 -122.6927977143789,50.15674705672059,1790.237375595104 -123.0500165453177,50.0903690722585,1030.048414414258 
-					</coordinates>
-				</LinearRing>
-			</outerBoundaryIs>
-		</Polygon>
-	</Placemark>
-</Document>
-</kml>
diff --git a/client/src/_components/menus/editor.menu.js b/client/src/_components/menus/editor.menu.js
index 0abde11f..ef9a4502 100644
--- a/client/src/_components/menus/editor.menu.js
+++ b/client/src/_components/menus/editor.menu.js
@@ -21,7 +21,7 @@ import {getDependentTypes, getModelLabel, isImageType, isCaptureType} from '../.
 import Button from '../common/button';
 import Dropdown from "../common/dropdown";
 import {useUser} from "../../_providers/user.provider.client";
-import {genID} from "../../_utils/data.utils.client";
+import {genID, sanitize} from "../../_utils/data.utils.client";
 import {createNodeRoute, redirect} from "../../_utils/paths.utils.client";
 import Download from "../common/download";
 import {useDialog} from "../../_providers/dialog.provider.client";
@@ -62,10 +62,21 @@ const EditorMenu = ({
                                attached={},
                                files={},
                                size= 'lg',
-                               visible=['show', 'edit', 'remove', 'new', 'attach', 'download'],
+                               visible=[
+                                   'show',
+                                   'edit',
+                                   'remove',
+                                   'new',
+                                   'attach',
+                                   'download',
+                                   'extract_map_features',
+                                   'view_map_features'
+                               ],
                                callback=()=>{},
                                className=''
                            }) => {
+
+
     // dialog provider
     const dialog = useDialog();
 
@@ -131,8 +142,6 @@ const EditorMenu = ({
         ])
         .filter(item => !!item);
 
-    if (String(id) === '81234') console.log('>>>', id, metadata, visible)
-
     return <div className={`h-menu ${className}`}>
         <ul>
             {
@@ -259,6 +268,36 @@ const EditorMenu = ({
                     />
                 </li>
             }
+            {
+                // Extract map features from uploaded KMZ file
+                isAdmin && model === 'map_objects' && id && visible.includes('extract_map_features') &&
+                <li key={`${menuID}_node_menuitem_extract_map`}>
+                    <Button
+                        label={!compact && 'Extract Map'}
+                        size={size}
+                        icon={'import'}
+                        title={`Extract map features from KMZ file.`}
+                        onClick={() => { _handleDialog('extract_map_features') }}
+                    />
+                </li>
+            }
+            {
+                // View map features for node
+                model === 'survey_seasons' && id && visible.includes('view_map_features')
+                && (attached || {}).maps?.some(map => map.data.map_features_id) &&
+                <li key={`${menuID}_node_menuitem_view_map_features`}>
+                    <Button
+                        icon={'map'}
+                        name={'map_view'}
+                        label={!compact && 'View Maps'}
+                        title={'View linked maps on navigator.'}
+                        onClick={() => nav.addToOverlay(
+                            (attached || {}).maps
+                                .map(({data}) => data.map_features_id) || {}
+                        )}
+                    />
+                </li>
+            }
             {
                 // Remove node
                 isAdmin && id && metadata && visible.includes('remove') &&
diff --git a/client/src/_components/menus/header.menu.js b/client/src/_components/menus/header.menu.js
index a2db157b..70e01e4e 100644
--- a/client/src/_components/menus/header.menu.js
+++ b/client/src/_components/menus/header.menu.js
@@ -60,6 +60,7 @@ const HeaderMenu = () => {
     // generate heading text
     const headingText = genHeading();
 
+
     // expand node metadata to pass to menu
     const { file_size=0, mimetype='', filename='' } = api.file || {};
     let itemMetadata = api.metadata || {};
diff --git a/client/src/_components/menus/viewer.menu.js b/client/src/_components/menus/viewer.menu.js
index 38a9e855..bc6c1035 100644
--- a/client/src/_components/menus/viewer.menu.js
+++ b/client/src/_components/menus/viewer.menu.js
@@ -11,7 +11,8 @@
  *
  * ---------
  * Revisions
- * - 22-07-2023 Added new download selection button.
+ * - 22-07-2023    Added new download selection button.
+ * - 23-12-2023    Added new Map Object dialog for KMZ data files
  */
 
 import React from 'react';
@@ -85,6 +86,12 @@ const ViewerPanelMenu = () => {
                                 type: 'projects',
                                 label: `Add new ${getModelLabel('projects')}`,
                                 callback: () => {dialog.setCurrent({dialogID: 'new_project'})}
+                            },
+                            {
+                                icon: 'maps',
+                                type: 'map_objects',
+                                label: `Add new ${getModelLabel('map_objects')}`,
+                                callback: () => {dialog.setCurrent({dialogID: 'new_map_object'})}
                             }]} />
                     </li>
                 }
diff --git a/client/src/_components/navigator/filter.navigator.js b/client/src/_components/navigator/filter.navigator.js
index b40ff739..b2acd8af 100644
--- a/client/src/_components/navigator/filter.navigator.js
+++ b/client/src/_components/navigator/filter.navigator.js
@@ -1,9 +1,18 @@
 /*!
  * MLE.Client.Components.Navigator.Filter
  * File: filter.navigator.js
- * Copyright(c) 2022 Runtime Software Development Inc.
+ * Copyright(c) 2023 Runtime Software Development Inc.
  * Version 2.0
  * MIT Licensed
+ *
+ * ----------
+ * Description
+ *
+ * Filter navigator component. Sets filtered stations to appear on map tool.
+ *
+ * ---------
+ * Revisions
+
  */
 
 import React from 'react';
@@ -88,7 +97,7 @@ function FilterNavigator() {
         loader={_loader}
         schema={genSchema({ view:'filterNavigation', model:'stations'})}
         onReset={()=>{
-            setFilterData({})
+            setFilterData({});
         }}
         onCancel={() => {dialog.cancel()}}
         onChange={onChange}
diff --git a/client/src/_components/navigator/map.navigator.js b/client/src/_components/navigator/map.navigator.js
index d4fcd3d2..49fcf289 100644
--- a/client/src/_components/navigator/map.navigator.js
+++ b/client/src/_components/navigator/map.navigator.js
@@ -13,7 +13,7 @@
  *
  * ---------
  * Revisions
- * - 16-09-2023   Converted log/lat display to DMS.
+
  */
 
 import React from 'react';
@@ -26,10 +26,23 @@ import {debounce, useWindowSize} from '../../_utils/events.utils.client';
 import Loading from "../common/loading";
 import {getPref, setPref} from "../../_services/session.services.client";
 import {useNav} from "../../_providers/nav.provider.client";
-import { getMarker, baseLayers } from "../tools/map.tools";
+import {getMarker, getBaseLayers, setFeaturePopup} from "../tools/map.tools";
 import Button from "../common/button";
 import 'leaflet-kml/L.KML.js';
 import {convertCoordDMS} from "../../_utils/data.utils.client";
+import {useDialog} from "../../_providers/dialog.provider.client";
+
+
+// change default marker icon
+delete L.Icon.Default.prototype._getIconUrl;
+const iconSVG = getMarker(1);
+
+L.Icon.Default.mergeOptions({
+    iconRetinaUrl: 'data:image/svg+xml;base64,' + btoa(iconSVG),
+    iconUrl: 'data:image/svg+xml;base64,' + btoa(iconSVG),
+    shadowUrl: null,
+    shadowSize:  [0, 0]
+});
 
 /**
  * Page height offset
@@ -62,6 +75,7 @@ function MapNavigator({ filter, hidden }) {
     const router = useRouter();
     const api = useData();
     const nav = useNav();
+    const dialog = useDialog();
 
     // mounted component flag
     const _isMounted = React.useRef(false);
@@ -79,19 +93,22 @@ function MapNavigator({ filter, hidden }) {
     const [center, setCenter] = React.useState([lat, lng]);
     const [zoom, setZoom] = React.useState(4);
     const [clustered, setClustered] = React.useState(true);
+    const [showMarkers, setShowMarkers] = React.useState(true);
     const [stale, setStale] = React.useState(true);
 
     // window dimensions
     const [winWidth, winHeight] = useWindowSize();
 
-    // leaflet map object
+    // leaflet map objects (references)
     const mapPane = React.useRef(null);
     const mapObj = React.useRef(null);
-    const layerGrp = React.useRef(null);
+    const stationMarkers = React.useRef(null);
+    const mapFeatures = React.useRef(null);
 
-    // refresh navigator data
+    // refresh map tiles and  data
     const _handleRefresh = () => {
-        nav.refresh();
+        const baseLayers = getBaseLayers(L);
+        baseLayers[selectedBaseLayer].addTo(mapObj.current);
         setStale(true);
     };
 
@@ -100,19 +117,40 @@ function MapNavigator({ filter, hidden }) {
         setClustered(!clustered)
     };
 
+    // toggle markers display
+    const _handleMarkers = () => {
+        setShowMarkers(!showMarkers)
+    };
+
+    // select map features overlay
+    const _handleMapFeatures = () => {
+        dialog.setCurrent({
+            dialogID: 'map_features',
+            callback: (data) => {
+                nav.setOverlay(data)
+                dialog.cancel();
+            }
+        });
+    };
+
     // request station(s) view in selected cluster
     // - if single station, go to that station info page
     // - for multiple station, go to filter page for ids
-    const loadView = React.useCallback((ids = []) => {
+    const loadStations = React.useCallback((ids = []) => {
         ids.length === 1
             ? router.update(createNodeRoute('stations', 'show', ids[0]))
             : router.update(createRoute('/filter', { ids: ids }));
     }, [router]);
 
+    // show metadata for item in view panel
+    const loadViewPane = React.useCallback((id, model) => {
+        router.update(createNodeRoute(model, 'show', id));
+    }, [router]);
+
     // cluster station locations for n > 1
     const getClusterMarkers = React.useCallback((currentIDs) => {
 
-        if (!currentIDs) return;
+        if (!currentIDs || !showMarkers) return;
 
         // apply user-defined filter
         const _applyFilter = (station) => {
@@ -254,7 +292,7 @@ function MapNavigator({ filter, hidden }) {
                     .on('click', () => {
                         // clicking on marker loads filter results in data pane
                         debounce(() => {
-                            loadView(
+                            loadStations(
                                 cluster.stations.map(station => {return station.nodes_id})
                             );
                             // recenter map
@@ -270,11 +308,11 @@ function MapNavigator({ filter, hidden }) {
                     .on('mouseover', function () {
                         // show station name and location on clusters where n < 15
                         this.bindTooltip(`${
-                            n <= 15 
+                            n <= 15
                                 ? cluster.stations.map(station => {
                                     // convert DMS to degrees / minutes / seconds
                                     return `<strong>${station.name}</strong> [${convertCoordDMS(station.lat)}, ${convertCoordDMS(station.lng)}]`
-                                    }).join('<br>') 
+                                }).join('<br>')
                                 : `<strong>Cluster (n = ${n})</strong><br />
                                     Lat: ${convertCoordDMS(centroid[0])}<br />
                                     Lng: ${convertCoordDMS(centroid[1])}`
@@ -289,7 +327,7 @@ function MapNavigator({ filter, hidden }) {
             }, o);
             return o;
         }, []);
-    }, [nav, mapObj, loadView, zoom, clustered]);
+    }, [nav, mapObj, loadStations, zoom, clustered, showMarkers]);
 
     /**
      * Reset map view to new center coordinate and zoom level.
@@ -301,7 +339,7 @@ function MapNavigator({ filter, hidden }) {
      */
 
     const reset = React.useCallback((coord, zoomLevel) => {
-        if (coord && zoomLevel && layerGrp.current) {
+        if (coord && zoomLevel && stationMarkers.current) {
             setCenter(coord);
             setZoom(zoomLevel);
         }
@@ -310,12 +348,60 @@ function MapNavigator({ filter, hidden }) {
     // assign selected nodes on map
     React.useEffect(() => {
         _isMounted.current = true;
-        if (_isMounted.current && mapObj.current && layerGrp.current) {
-            layerGrp.current.clearLayers();
-            layerGrp.current = L.layerGroup(getClusterMarkers(currentFilter)).addTo(mapObj.current);
+        if (_isMounted.current && mapObj.current && stationMarkers.current) {
+            stationMarkers.current.clearLayers();
+            stationMarkers.current = L.layerGroup(getClusterMarkers(currentFilter)).addTo(mapObj.current);
+        }
+        return () => {_isMounted.current = false;}
+    }, [getClusterMarkers, currentFilter, filter, showMarkers, zoom, center])
+
+    // assign selected nodes on map
+    React.useEffect(() => {
+
+        const geojsonMarkerOptions = {
+            radius: 8,
+            fillColor: "skyblue",
+            color: "#FFF",
+            weight: 2,
+            opacity: 1,
+            fillOpacity: 0.5
+        };
+
+        _isMounted.current = true;
+
+        if (_isMounted.current && mapObj.current && mapFeatures.current) {
+            // clear current map features
+            mapFeatures.current.clearLayers();
+            // include selected map features as layers added to group (geoJSON)
+            if (Array.isArray(nav.overlay) && nav.overlay.length > 0) {
+                nav.overlay.forEach(({id, geoJSON, selected}) => {
+                    let selectedLayer;
+                    const featureLayer = L.geoJSON(geoJSON, {
+                        onEachFeature: (feature, layer)=>{
+                            selectedLayer = layer;
+                            setFeaturePopup(id, feature, layer, loadViewPane);
+                        },
+                        pointToLayer: function (feature, latlng) {
+                            return L.circleMarker(latlng, geojsonMarkerOptions);
+                        }
+                    });
+                    mapFeatures.current.addLayer(featureLayer);
+                    // show pop-up of selected feature
+                    if (!!selected) {
+                        selectedLayer.openPopup();
+                        const bounds = featureLayer.getBounds();
+                        mapObj.current.fitBounds(bounds);
+                    }
+                });
+                // For multiple selected map features: adjust map bounds to show group
+                if (nav.overlay.length > 1) {
+                    const bounds = mapFeatures.current.getBounds();
+                    mapObj.current.fitBounds(bounds);
+                }
+            }
         }
         return () => {_isMounted.current = false;}
-    }, [getClusterMarkers, currentFilter, filter, zoom, center])
+    }, [nav.overlay, loadViewPane])
 
     // API data change detected: recenter map to selected coordinate (if available)
     // - if on station info page, center and zoom to location on the map
@@ -333,7 +419,7 @@ function MapNavigator({ filter, hidden }) {
             }
         }
         return () => {_isMounted.current = false;}
-    }, [api, setClustered])
+    }, [api.location, setClustered])
 
     // Redraw map if container was resized.
     React.useEffect(() => {
@@ -372,6 +458,9 @@ function MapNavigator({ filter, hidden }) {
                 ? center
                 : [center.lat || '', center.lng || ''];
 
+            // retrieve base tile layers
+            const baseLayers = getBaseLayers(L);
+
             // initialize map with DOM container and initial coordinates
             mapObj.current = L.map(domNode, {
                 center: [lat, lng],
@@ -385,14 +474,11 @@ function MapNavigator({ filter, hidden }) {
             // reset saved map centre coordinate / zoom level
             reset(center, zoom);
 
-            // add marker layer to map
-            layerGrp.current = L.layerGroup(getClusterMarkers(currentFilter)).addTo(mapObj.current);
+            // add station marker layer group to map
+            stationMarkers.current = L.layerGroup(getClusterMarkers(currentFilter)).addTo(mapObj.current);
 
-            // Include any kml overlay
-            // if (nav.overlay) {
-            //     const track = new L.KML(nav.overlay);
-            //     mapObj.current.addLayer(track);
-            // }
+            // add map features layer group to map
+            mapFeatures.current = new L.FeatureGroup().addTo(mapObj.current);
 
             // add layers to leaflet tools
             L.control.layers(baseLayers).addTo(mapObj.current);
@@ -422,7 +508,7 @@ function MapNavigator({ filter, hidden }) {
         }
 
     }, [
-        api,
+        api.loaded,
         nav,
         currentFilter,
         center,
@@ -467,17 +553,33 @@ function MapNavigator({ filter, hidden }) {
                 }}
             />
             {nav.toggle && <div className={'map-menu'}>
+                {/*<Button*/}
+                {/*    icon={'sync'}*/}
+                {/*    size={'lg'}*/}
+                {/*    onClick={_handleRefresh}*/}
+                {/*/>*/}
                 <Button
-                    icon={'sync'}
+                    icon={'stations'}
                     size={'lg'}
-                    onClick={_handleRefresh}
+                    label={'Stations'}
+                    className={showMarkers ? 'activated' : ''}
+                    onClick={_handleMarkers}
                 />
+                {
+                    showMarkers && <Button
+                        icon={'clustered'}
+                        size={'lg'}
+                        label={'Cluster'}
+                        className={clustered ? 'activated' : ''}
+                        onClick={_handleCluster}
+                    />
+                }
                 <Button
-                    icon={'stations'}
+                    icon={'boundaries'}
                     size={'lg'}
-                    label={clustered ? 'cluster on' : 'cluster off'}
-                    className={clustered ? 'activated' : ''}
-                    onClick={_handleCluster}
+                    label={'Features'}
+                    className={(nav.overlay || []).length > 0 ? 'activated' : ''}
+                    onClick={_handleMapFeatures}
                 />
             </div>}
         </div>
diff --git a/client/src/_components/navigator/map/base.map.js b/client/src/_components/navigator/map/base.map.js
new file mode 100644
index 00000000..f07c6f95
--- /dev/null
+++ b/client/src/_components/navigator/map/base.map.js
@@ -0,0 +1,161 @@
+/*!
+ * MLE.Client.Components.Navigator.Map.Base
+ * File: default.canvas.alignment.js
+ * Copyright(c) 2023 Runtime Software Development Inc.
+ * Version 2.0
+ * MIT Licensed
+ *
+ * ----------
+ * Description
+ *
+ * Base Leaflet map component forMap Navigator.
+ *
+ * ---------
+ * Revisions
+ * -
+ */
+
+import React, {forwardRef, useRef, useImperativeHandle, useEffect} from 'react';
+
+/**
+ * Leaflet Map Component
+ */
+
+const LeafletMap = forwardRef(function Map(props, ref) {
+
+    const mapRef = useRef(null);
+    const {onKeyDown, onKeyUp} = props || {};
+
+    // add event listener for key events
+    useEffect(()=>{
+        if (onKeyDown && onKeyDown) {
+            document.addEventListener('keydown', onKeyDown);
+            document.addEventListener('keyup', onKeyUp);
+            return () => {
+                document.removeEventListener("keydown", onKeyDown);
+                document.removeEventListener("keyup", onKeyUp);
+            };
+        }
+    }, [onKeyDown, onKeyUp])
+
+    useImperativeHandle(ref, () => {
+        const context = mapRef.current.getContext('2d', { willReadFrequently: true });
+        return {
+            load: (image) => {
+
+                if (!image) return;
+
+                // load image data to image canvas
+                mapRef.current.width = image.width;
+                mapRef.current.height = image.height;
+
+                // draw image to canvas
+                if (image instanceof HTMLImageElement)
+                    context.drawImage(image, 0, 0, image.width, image.height);
+                else context.putImageData(image, 0, 0);
+            },
+            putImageData: (imageData, dims) => {
+
+                /**
+                 * Loads image data to canvas
+                 * Note: Image size sets new data canvas dimensions
+                 *
+                 * @public
+                 */
+
+                // destructure dimensions
+                const {x, y, w, h} = dims || {};
+
+                // put image to canvas
+                context.putImageData(imageData, x || 0, y || 0, 0, 0, w || imageData.width, h || imageData.height);
+            },
+            draw: (image, dims) => {
+
+                /**
+                 * Redraws image data to canvas
+                 * Note: Scale sets new data canvas dimensions
+                 * - dx
+                 *   The x-axis coordinate in the destination canvas at which to place the top-left
+                 *   corner of the source image.
+                 * - dy
+                 *   The y-axis coordinate in the destination canvas at which to place the top-left
+                 *   corner of the source image.
+                 * - dWidth
+                 *   The width to draw the image in the destination canvas. This allows scaling of the
+                 *   drawn image. If not specified, the image is not scaled in width when drawn.
+                 * - dHeight
+                 *   The height to draw the image in the destination canvas. This allows scaling of
+                 *   the drawn image. If not specified, the image is not scaled in height when drawn.
+                 *
+                 * @public
+                 */
+
+                if (!image) return;
+
+                // clear, resize and render image data to canvas
+                const {source, view} = dims || {};
+                context.clearRect(0, 0, mapRef.current.width, mapRef.current.height);
+                // set canvas dimensions
+                // canvasRef.current.width = view && view.w || canvasRef.current.width;
+                // canvasRef.current.height = view && view.h || canvasRef.current.height;
+                // draw source image to canvas
+                context.drawImage(
+                    image,
+                    source && source.x || 0,
+                    source && source.y || 0,
+                    source && source.w || image.width,
+                    source && source.h || image.height,
+                    view && view.x || 0,
+                    view && view.y || 0,
+                    view && view.w,
+                    view && view.h
+                );
+            },
+            canvas: () => {
+                return mapRef.current;
+            },
+            context: () => {
+                return context;
+            },
+            clear: () => {
+                context.clearRect(0, 0, mapRef.current.width, mapRef.current.height);
+            },
+            dims: () => {
+                return {w: mapRef.current.width, h: mapRef.current.height};
+            },
+            bounds: () => {
+                const rect = mapRef.current.getBoundingClientRect();
+                return {
+                    top: rect.top,
+                    left: rect.left,
+                    width: rect.width,
+                    height: rect.height
+                }
+            },
+            data: () => {
+                return mapRef.current.toDataURL('image/jpeg', 1.0);
+            },
+            getImageData: () => {
+                return context.getImageData(0, 0, mapRef.current.width, mapRef.current.height);
+            },
+            blob: (image, type, quality, callback) => {
+                // if image data is provided, load to canvas and convert to blob
+                if (image) {
+                    if (image instanceof HTMLImageElement)
+                        context.drawImage(image, 0, 0, image.width, image.height);
+                    else context.putImageData(image, 0, 0);
+                }
+
+            },
+            alpha: (alpha) => {
+                // set canvas opacity
+                mapRef.current.style.opacity = alpha;
+            }
+        };
+    }, []);
+
+    return <div {...props} ref={mapRef} style={{height: (winHeight - heightOffset) + 'px'}} />;
+
+});
+
+export default LeafletMap;
diff --git a/client/src/_components/navigator/tree.navigator.js b/client/src/_components/navigator/tree.navigator.js
index 1974e787..616da6df 100644
--- a/client/src/_components/navigator/tree.navigator.js
+++ b/client/src/_components/navigator/tree.navigator.js
@@ -1,9 +1,17 @@
 /*!
  * MLE.Client.Components.Navigator.Tree
  * File: tree.navigator.js
- * Copyright(c) 2022 Runtime Software Development Inc.
+ * Copyright(c) 2023 Runtime Software Development Inc.
  * Version 2.0
  * MIT Licensed
+ *
+ * ----------
+ * Description
+ *
+ * Tree (list) navigator component. Expandable node tree menu.
+ *
+ * ---------
+ * Revisions
  */
 
 import React from 'react'
diff --git a/client/src/_components/selectors/dialog.selector.js b/client/src/_components/selectors/dialog.selector.js
index e97778c0..2e0ea097 100644
--- a/client/src/_components/selectors/dialog.selector.js
+++ b/client/src/_components/selectors/dialog.selector.js
@@ -12,7 +12,8 @@
  *
  * ---------
  * Revisions
- * - 22-07-2023 Include basic node data to include create and last modified dates.
+ * - 22-07-2023    Include basic node data to include create and last modified dates.
+ * - 23-12-2023    Added new Map Object dialog for KMZ data files
  */
 
 import React from 'react';
@@ -33,9 +34,11 @@ import Button from "../common/button";
 import {useDialog} from "../../_providers/dialog.provider.client";
 import {useData} from "../../_providers/data.provider.client";
 import {useNav} from "../../_providers/nav.provider.client";
-import {LoaderTool} from "../toolkit/tools/loader.toolkit";
+import {LoaderTool} from "../alignment/tools/loader.alignment";
 import Accordion from "../common/accordion";
 import Image from "../common/image";
+import MapSelector from "./map.selector";
+import {MapEditor} from "../editors/map.editor";
 
 /**
  * Dialog view for selecting forms/content to display in dialog popup components.
@@ -80,8 +83,8 @@ const DialogSelector = () => {
         const {group_type = '' } = metadata || {};
 
         // handle callback and data refresh
-        const _handleCallback = () => {
-            if (callback) callback();
+        const _handleCallback = (data) => {
+            if (callback) callback(data);
             dialog.clear();
         }
 
@@ -207,6 +210,9 @@ const DialogSelector = () => {
             filter: <Dialog key={_key} title={`Filter Map Stations`} callback={_handleDialogClose}>
                 <FilterNavigator/>
             </Dialog>,
+            map_features: <Dialog key={_key} title={`View Map Features`} callback={_handleDialogClose}>
+                <MapSelector callback={_handleCallback} />
+            </Dialog>,
             move: <Dialog key={_key} title={`Move Item to New Container (Owner)`} callback={_handleDialogClose}>
                 <Mover callback={_handleCallback} />
             </Dialog>,
@@ -308,6 +314,7 @@ const DialogSelector = () => {
                     route={createNodeRoute('surveyors', 'new')}
                     schema={genSchema({view: 'new', model: 'surveyors', user: user})}
                     onRefresh={_handleRefresh}
+                    onCancel={_handleCancel}
                     callback={(error, model, id) => {
                         error ? _handleCallback() : redirect(createNodeRoute(model, 'show', id));
                     }}
@@ -325,11 +332,46 @@ const DialogSelector = () => {
                     route={createNodeRoute('projects', 'new')}
                     schema={genSchema({view: 'new', model: 'projects', user: user})}
                     onRefresh={_handleRefresh}
+                    onCancel={_handleCancel}
+                    callback={(error, model, id) => {
+                        error ? _handleCallback() : redirect(createNodeRoute(model, 'show', id));
+                    }}
+                />
+            </Dialog>,
+            new_map_object: <Dialog
+                key={_key}
+                title={'Upload New Map Data File'}
+                callback={_handleDialogClose}
+                className={index > 0 ? 'hidden' : ''}
+            >
+                <Editor
+                    view={'new'}
+                    model={'map_objects'}
+                    route={createNodeRoute('map_objects', 'new')}
+                    schema={genSchema({view: 'new', model: 'map_objects', user: user})}
+                    onRefresh={_handleRefresh}
+                    onCancel={_handleCancel}
                     callback={(error, model, id) => {
                         error ? _handleCallback() : redirect(createNodeRoute(model, 'show', id));
                     }}
                 />
             </Dialog>,
+            extract_map_features: <Dialog
+                key={_key}
+                title={`Extract Map Features from File`}
+                callback={_handleDialogClose}
+                className={index > 0 ? 'hidden' : ''}
+            >
+                <p>
+                    Use this form to extract map features from a KMZ file.
+                </p>
+                <MapEditor
+                    id={id}
+                    onRefresh={_handleRefresh}
+                    onCancel={_handleCancel}
+                    callback={_handleCallback}
+                />
+            </Dialog>,
             image: <Dialog className={'wide'} key={_key} title={`Image: ${label}`} callback={_handleDialogClose}>
                 <Image url={url} title={label} scale={scale} />
                 <div className={'centred'}>
@@ -340,7 +382,7 @@ const DialogSelector = () => {
                         onClick={_handleCancel}
                     />
                 </div>
-            </Dialog>,
+            </Dialog>
         };
 
         // create add new dependents dialog popups for requested model
diff --git a/client/src/_components/selectors/file.selector.js b/client/src/_components/selectors/file.selector.js
index 2f0e9adf..80baece4 100644
--- a/client/src/_components/selectors/file.selector.js
+++ b/client/src/_components/selectors/file.selector.js
@@ -28,7 +28,7 @@ const FileSelector = ({ data, scale='thumb' }) => {
 
     // destructure file data
     const {label='', file={}, url={}, metadata={} } = data || {};
-    const {id='', owner_id='', file_type='', filename='', file_size='', mimetype='' } = file || {};
+    const {id='', file_type='', filename='', file_size='', mimetype='' } = file || {};
     let itemMetadata = metadata
     // include file metadata in details
     itemMetadata.filename = filename;
@@ -61,7 +61,6 @@ const FileSelector = ({ data, scale='thumb' }) => {
      * handle download response
      * - sets image metadata in provider to load in dialog view
      *
-     * @param {Event} e
      */
     const _handleDownload = () => {}
 
diff --git a/client/src/_components/selectors/input.selector.js b/client/src/_components/selectors/input.selector.js
index 15136335..b4023554 100644
--- a/client/src/_components/selectors/input.selector.js
+++ b/client/src/_components/selectors/input.selector.js
@@ -18,7 +18,6 @@
 
 import React from 'react';
 import 'flatpickr/dist/themes/material_green.css';
-import {sorter} from '../../_utils/data.utils.client';
 import Icon from '../common/icon';
 import Message, {UserMessage} from '../common/message';
 import MultiSelect from '../common/multiselect';
@@ -27,6 +26,8 @@ import {AttachedMetadataEditor} from "../editors/attached.editor";
 import {DependentsEditor} from "../editors/dependents.editor";
 import {ComparisonEditor} from "../editors/comparison.editor";
 import Coord from "../common/coord";
+import SingleSelect from "../common/singleselect";
+import MapSelector from "./map.selector";
 
 /**
  * No operation.
@@ -85,7 +86,14 @@ export const InputSelector = ({
     const [highlight, setHighlight] = React.useState(false);
 
     // define label-less inputs
-    const noLabel = [ 'hidden', 'file', 'dependentEditor', 'compareSelector', 'attachedMetadataEditor'];
+    const noLabel = [
+        'hidden',
+        'file',
+        'dependentEditor',
+        'compareSelector',
+        'attachedMetadataEditor',
+        'generateMapFeatures'
+    ];
 
     // append unique ID value for input
     id = `${name}_${id}`;
@@ -149,6 +157,20 @@ export const InputSelector = ({
             />;
         },
 
+        json: () => {
+            return <textarea
+                id={id}
+                name={name}
+                readOnly={readonly}
+                value={typeof value === 'string' ? value : JSON.stringify(value, undefined, 4) || ''}
+                required={required}
+                onChange={(e)=>{
+                    onChange(e);
+                }}
+                aria-label={ariaLabel}
+            />;
+        },
+
         checkbox: () => {
             const isChecked = (value && value === true);
             return <input
@@ -301,37 +323,33 @@ export const InputSelector = ({
         },
 
         select: () => {
-            // prepare options data for select input
-            const opts = options
-                .sort(sorter)
-                .map((opt, index) => {
-                    const {value = '', label = ''} = opt || {};
-                    return <option
-                        key={`${id}_${name}_${value}_${index}`}
-                        id={`${id}_${name}_${value}`}
-                        name={`${name}_${value}`}
-                        value={value || ''}>{label}</option>;
-                });
-
-            return <select
+            return <SingleSelect
                 id={id}
+                readOnly={readonly}
                 name={name}
-                disabled={disabled || options.length === 0}
+                value={value || ''}
+                label={label}
+                required={required}
+                disabled={disabled}
+                options={options}
                 onChange={onChange}
                 onSelect={onSelect}
+            />;
+        },
+
+        reference: () => {
+            return <SingleSelect
+                id={id}
+                readOnly={readonly}
+                name={name}
                 value={value || ''}
+                label={label}
                 required={required}
-            >
-                <option
-                    key={`default_${id}_${name}`}
-                    id={`default_${id}_${name}`}
-                    name={`default_${id}_${name}`}
-                    value={''}
-                >
-                    {label} ...
-                </option>
-                {opts}
-            </select>;
+                disabled={disabled}
+                options={options}
+                onChange={onChange}
+                onSelect={onSelect}
+            />
         },
 
         multiselect: () => {
@@ -385,6 +403,10 @@ export const InputSelector = ({
             />;
         },
 
+        mapFeature: () => {
+            return <MapSelector callback={onChange} single={true} value={value || ''} />;
+        },
+
         file: () => {
 
             /**
diff --git a/client/src/_components/selectors/map.selector.js b/client/src/_components/selectors/map.selector.js
new file mode 100644
index 00000000..4947e67e
--- /dev/null
+++ b/client/src/_components/selectors/map.selector.js
@@ -0,0 +1,374 @@
+/*!
+ * MLE.Client.Components.Navigator.MapFeatures
+ * File: mapfeatures.navigator.js
+ * Copyright(c) 2023 Runtime Software Development Inc.
+ * Version 2.0
+ * MIT Licensed
+ *
+ * ----------
+ * Description
+ *
+ * Map features navigator component. Enables map features to overlay on map navigator tool.
+ *
+ * ---------
+ * Revisions
+
+ */
+
+import React from 'react';
+import { useNav } from "../../_providers/nav.provider.client";
+import {useData} from "../../_providers/data.provider.client";
+import {useDialog} from "../../_providers/dialog.provider.client";
+import {useRouter} from "../../_providers/router.provider.client";
+import styles from '../styles/mapfeatures.module.css';
+import Table from "../common/table";
+import Button from "../common/button";
+import Badge from "../common/badge";
+import Icon from "../common/icon";
+import InputSelector from "./input.selector";
+import Accordion from "../common/accordion";
+
+/**
+ * Navigator map overlay component.
+ *
+ * @public
+ * @return {JSX.Element}
+ */
+
+function MapSelector({callback, single=false, value}) {
+
+    const nav = useNav();
+    const api = useData();
+    const router = useRouter();
+    const dialog = useDialog();
+
+    const _isMounted = React.useRef(true);
+
+    // create dynamic data states
+    const [selected, setSelected] = React.useState((nav.overlay || []).map(({id}) => {return id}));
+
+    // map features data
+    const [loadedData, setLoadedData] = React.useState(null);
+    const [keywordFilter, setKeywordFilter] = React.useState('');
+    const [groupFilter, setGroupFilter] = React.useState([]);
+    // convert map features data to selectable options
+    const [filteredFeatures, setFilteredFeatures] = React.useState([]);
+    const [filteredIDs, setFilteredIDs] = React.useState([]);
+
+    // init error state
+    const [error, setError] = React.useState(null);
+
+    // prepare image table columns
+    const cols = [
+        {name: 'check', label: '', sort: true, defaultSort: true},
+        {name: 'name', label: 'Name', sort: true},
+        {name: 'type', label: 'Type', sort: true},
+        {name: 'map_object', label: 'Group (Map Object)', sort: true},
+    ];
+
+    // get map objects options
+    const { map_objects=[] } = api.options || {};
+
+    /**
+     * Handler for multiple map features selection
+     *
+     * @param id
+     * @private
+     */
+    const _handleSelect = (id) => {
+        // toggle inclusion of selected id
+        selected.includes(id)
+            ? setSelected(data => {return data.filter(o => o !== id)})
+            : setSelected(data => ([ ...data, id ]));
+    };
+
+
+    /**
+     * Reformat features array for selection table
+     * @private
+     */
+    const _getFeatureList = () => {
+        return [].concat.apply([], filteredFeatures)
+            .map(feature => {
+                const {nodes_id, owner_id, name, type, description, geometry, dependents} = feature || {};
+                const {map_feature_types = []} = api.options || {};
+                // select image state label for value (if available)
+                const mapFeatureType = map_feature_types.find(opt => opt.value === type) || {};
+                const mapObject = map_objects.find(opt => opt.value === owner_id) || {};
+                return {
+                    className: selected.includes(nodes_id) ? styles.active : styles.inactive,
+                    onClick: () => {
+                        _handleSelect(nodes_id)
+                    },
+                    id: nodes_id,
+                    check: <Icon type={selected.includes(nodes_id) ? 'success' : 'close'} />,
+                    name: name,
+                    value: nodes_id,
+                    label: name,
+                    map_object: mapObject.label || '',
+                    map_object_id: mapObject.value || '',
+                    type: mapFeatureType.label || '',
+                    description: description,
+                    geometry: geometry,
+                    dependents: dependents
+                }
+            });
+    }
+
+    /**
+     * Flatten feature array to collect feature node IDs
+     * @param features
+     * @private
+     */
+    const _getFeatureIDs = (features) => {
+        return [].concat.apply([], features).map(({nodes_id}) => nodes_id);
+    }
+
+    // retrieve map features
+    // API call to retrieve map features data (if not yet loaded)
+    React.useEffect(() => {
+
+        _isMounted.current = true;
+
+        // API call for page data
+        // if ID value passed, use file extraction route
+        if (!error && !loadedData) {
+            router.get('/map/features')
+                .then(res => {
+                    // update state with response data
+                    if (_isMounted.current) {
+                        if (res.error) return setError(res.error);
+                        const { response = {} } = res || {};
+                        const { data = {} } = response || {};
+                        setLoadedData(data);
+                        setFilteredFeatures(data);
+                        setFilteredIDs(_getFeatureIDs(data));
+                    }
+                })
+                .catch(err => console.error(err),
+                );
+        }
+    }, [error, loadedData, setLoadedData, router, selected, setSelected, _getFeatureIDs]);
+
+
+    // handle submit of filtered map features
+    const _handleSubmit = () => {
+        const selectedFeatures = (selected || []).map((selectedID) => {
+            const feature = filteredFeatures.find(feature => feature.nodes_id === selectedID);
+            const {owner_id, name, type, description, geometry, dependents} = feature || {};
+            const mapObject = map_objects.find(opt => opt.value === owner_id) || {};
+            return {
+                id: selectedID,
+                selected: (selected || []).length === 1,
+                geoJSON: geometry.map(featureGeometry => {
+                    return {
+                        type: 'Feature',
+                        geometry: featureGeometry,
+                        properties: {
+                            name: name,
+                            description: description,
+                            type: type,
+                            owner: mapObject.label || '-',
+                            owner_id: owner_id,
+                            dependents: dependents
+                        }
+                    }
+                })
+            };
+        });
+        callback(selectedFeatures);
+    }
+
+    /**
+     * Handler for cancel operation
+     * @private
+     */
+    const _handleCancel = () => {
+        dialog.cancel();
+    }
+
+    /**
+     * Handler to reset map objects selection
+     * @private
+     */
+    const _handleReset = () => {
+        setSelected([]);
+    };
+
+    /**
+     * Handler to reset map objects selection
+     * @private
+     */
+    const _handleClear = () => {
+        setSelected([]);
+        nav.setOverlay([]);
+        dialog.cancel();
+    };
+
+    /**
+     * Handler for image download selection
+     *
+     * @private
+     */
+    const _handleSelectAll = () => {
+        setSelected(_getFeatureIDs(filteredFeatures));
+    };
+
+    // retrieve map features
+    // API call to retrieve map features data (if not yet loaded)
+    React.useEffect(() => {
+
+        // split search string into array of terms (remove empty strings)
+        const keywords = String(keywordFilter).trim().split(' ').filter(n => n);
+        // map feature groups (map objects) into array of node IDs
+        const groupIDs = groupFilter.map(({value}) => parseInt(value));
+
+        /**
+         * Handler for filtering map feature by keyword in name
+         *
+         * @private
+         * @return Boolean
+         * @param {Object} feature
+         */
+        const _filterByKeyword = (feature) => {
+            const {name} = feature || {};
+            // create regular expression to test terms in keyword string
+            const re = new RegExp((keywords || []).join('|'), "i");
+            // test terms against name string
+            return (keywords || []).length === 0 || re.test(String(name).toLowerCase());
+        };
+
+        /**
+         * Handler for filtering map feature by map object
+         *
+         * @private
+         * @return Boolean
+         * @param {Object} feature
+         */
+        const _filterByGroup = (feature) => {
+            const {owner_id} = feature || {};
+            return (groupIDs || []).length === 0 || (groupIDs || []).includes(parseInt(owner_id));
+        };
+
+        // apply user input filters to loaded map feature data
+        const filtered = (loadedData || [])
+            .filter(_filterByKeyword)
+            .filter(_filterByGroup);
+
+        // update filtered data in state
+        setFilteredFeatures(filtered);
+        setFilteredIDs(filtered.map(({id}) => id));
+
+    }, [loadedData, keywordFilter, groupFilter, setFilteredFeatures, setFilteredIDs]);
+
+    /**
+     * Set keyword filter as string; reset selected IDs array
+     * @private
+     * @param e
+     */
+    const _handleNameFilter = (e) => {
+        const {value} = e.target || {};
+        setKeywordFilter(value);
+        setSelected([]);
+    }
+
+    /**
+     * Set selected map objects filter as array; reset selected IDs array
+     * @private
+     * @param name
+     * @param options
+     */
+    const _handleGroupFilter = (name, options) => {
+        setGroupFilter(options);
+        setSelected([]);
+    }
+
+    return <fieldset className={'submit'}>
+        <div>
+            <Accordion type={'filter'} label={'Filter Map Features'}>
+                <InputSelector
+                    id={'map_features_filter'}
+                    name={'map_features_filter'}
+                    value={keywordFilter}
+                    type={'text'}
+                    label={'Filter Name By Keyword'}
+                    onChange={_handleNameFilter}
+                    onSelect={()=>{}}
+                />
+                <InputSelector
+                    key={'filter_map_object'}
+                    id={'filter_map_object'}
+                    name={'filter_map_object'}
+                    type={'multiselect'}
+                    value={groupFilter || ''}
+                    selected={value || ''}
+                    label={'Filter By Feature Group'}
+                    options={api.options.map_objects}
+                    onMultiselect={_handleGroupFilter}
+                />
+            </Accordion>
+            {
+                single ?
+                    <InputSelector
+                        id={'map_features_id'}
+                        name={'map_features_id'}
+                        value={value}
+                        type={'select'}
+                        options={_getFeatureList()}
+                        label={'Select a linked Map Feature'}
+                        onChange={callback}
+                        onSelect={()=>{}}
+                    /> :
+                    <>
+
+                        <div className={'h-menu'}>
+                            <ul>
+                                <li>
+                                    <Button
+                                        icon={'list'}
+                                        label={'Select All'}
+                                        onClick={_handleSelectAll}
+                                    />
+                                </li>
+                                <li>
+                                    <Button
+                                        icon={'close'}
+                                        label={'Deselect All'}
+                                        onClick={_handleReset}
+                                    />
+                                </li>
+                            </ul>
+                        </div>
+                        <Table rows={_getFeatureList()} cols={cols} className={`files`} />
+                        <Badge
+                            className={'active'}
+                            label={selected.length === 1 ?`${selected.length} map object selected.` : `${selected.length} map objects selected.`}
+                            icon={'map_objects'}
+                        />
+                        <div className={'h-menu'}>
+                            <ul>
+                                <li>
+                                    <Button
+                                        icon={Array.isArray(selected) && selected.length > 0 ? 'success' : 'cancel'}
+                                        label={Array.isArray(selected) && selected.length > 0 ? 'Select' : 'Clear Selection'}
+                                        className={'submit'}
+                                        onClick={Array.isArray(selected) && selected.length > 0 ? _handleSubmit : _handleClear}
+                                    />
+                                </li>
+                                <li>
+                                    <Button
+                                        icon={'cancel'}
+                                        label={'Cancel'}
+                                        className={'cancel'}
+                                        onClick={_handleCancel}
+                                    />
+                                </li>
+                            </ul>
+
+                        </div>
+                    </>
+            }
+        </div>
+    </fieldset>;
+}
+export default MapSelector;
\ No newline at end of file
diff --git a/client/src/_components/selectors/static.selector.js b/client/src/_components/selectors/static.selector.js
index 7c1179f5..cafe3511 100644
--- a/client/src/_components/selectors/static.selector.js
+++ b/client/src/_components/selectors/static.selector.js
@@ -14,7 +14,7 @@ import ServerError from '../error/server.error';
 import Loading from '../common/loading';
 import Image from '../common/image';
 import { useRouter } from '../../_providers/router.provider.client';
-import Iat from "../toolkit/toolkit";
+import Iat from "../alignment/alignment";
 import AdminView from "../views/admin.view";
 
 /**
diff --git a/client/src/_components/styles/mapfeatures.module.css b/client/src/_components/styles/mapfeatures.module.css
new file mode 100644
index 00000000..11fa5526
--- /dev/null
+++ b/client/src/_components/styles/mapfeatures.module.css
@@ -0,0 +1,14 @@
+
+/* Selected download image */
+.active {
+    background-color: #00A652;
+    border-bottom: 1px solid #444 !important;
+    cursor: pointer;
+}
+
+.inactive {
+    cursor: pointer;
+    background-color: #222222;
+    border-bottom: 1px solid #444 !important;
+}
+
diff --git a/client/src/_components/styles/tree.module.css b/client/src/_components/styles/tree.module.css
new file mode 100644
index 00000000..b8036305
--- /dev/null
+++ b/client/src/_components/styles/tree.module.css
@@ -0,0 +1,18 @@
+
+/* Selected download image */
+.active {
+    background-color: #00A652;
+    border: 2px solid #222222;
+    cursor: pointer;
+}
+
+.inactive {
+    cursor: pointer;
+    background-color: #222222;
+    border: 2px solid #222222;
+}
+
+.thumbnail {
+    display: inline-block;
+    vertical-align: middle;
+}
diff --git a/client/src/_components/tools/download.tools.js b/client/src/_components/tools/download.tools.js
index 6bf3ba5d..42e8e27b 100644
--- a/client/src/_components/tools/download.tools.js
+++ b/client/src/_components/tools/download.tools.js
@@ -179,8 +179,7 @@ const Downloader = ({id}) => {
                     size: sanitize(file_size, 'filesize') || 'n/a',
                     details: <div>
                         <div>{humanize(image_type || image_state)} Image</div>
-                        <div>Updated: {sanitize(updated_at, 'datetime')}</div>
-                        <div>Created: {sanitize(created_at, 'datetime')}</div>
+                        <div>Uploaded: {sanitize(created_at, 'datetime')}</div>
                     </div>
                 }
             });
diff --git a/client/src/_components/tools/map.tools.js b/client/src/_components/tools/map.tools.js
index c94110b5..05767c09 100644
--- a/client/src/_components/tools/map.tools.js
+++ b/client/src/_components/tools/map.tools.js
@@ -1,12 +1,20 @@
 /*!
  * MLE.Client.Components.Tools.Map
  * File: selector.tools.js
- * Copyright(c) 2022 Runtime Software Development Inc.
+ * Copyright(c) 2023 Runtime Software Development Inc.
  * Version 2.0
  * MIT Licensed
+ *
+ * ----------
+ * Description
+ *
+ * Support utilities for the map navigation tool (Leaflet).
+ *
+ * ---------
+ * Revisions
+
  */
 
-import L from "leaflet";
 
 /**
  * Create base tile layers for Leaflet map
@@ -19,71 +27,74 @@ import L from "leaflet";
  * @return object
  */
 
-export const baseLayers = {
-    'Street Map': L.tileLayer(
-        'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
-        {
-            maxZoom: 17,
-            minZoom: 4,
-            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
-            keepBuffer: 3,
-        }),
-    'World Map': L.tileLayer(
-        'https://services.arcgisonline.com/ArcGIS/rest/services/NatGeo_World_Map/MapServer/tile/{z}/{y}/{x}',
-        {
-            maxZoom: 17,
-            minZoom: 4,
-            attribution: '&copy; <a href="https://www.arcgisonline.com/copyright">ARCGIS</a> contributors',
-            keepBuffer: 3,
-        }),
-    'Satellite Imagery': L.tileLayer(
-        'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
-        {
-            maxZoom: 17,
-            minZoom: 4,
-            attribution: '&copy; <a href="https://www.arcgisonline.com/copyright">ARCGIS</a> contributors',
-            keepBuffer: 3,
-        }),
-    'Topological 1': L.tileLayer(
-        'https://services.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}',
-        {
-            maxZoom: 17,
-            minZoom: 4,
-            attribution: '&copy; <a href="https://www.arcgisonline.com/copyright">ARCGIS</a> contributors',
-            keepBuffer: 3,
-        }),
-    'Topological 2': L.tileLayer(
-        'https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png',
-        {
-            maxZoom: 17,
-            minZoom: 4,
-            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
-            keepBuffer: 3,
-        }),
-    'Terrain Base': L.tileLayer(
-        'https://services.arcgisonline.com/ArcGIS/rest/services/World_Terrain_Base/MapServer/tile/{z}/{y}/{x}',
-        {
-            maxZoom: 17,
-            minZoom: 4,
-            attribution: '&copy; <a href="https://www.arcgisonline.com/copyright">ARCGIS</a> contributors',
-            keepBuffer: 3,
-        }),
-    'Shaded Relief': L.tileLayer(
-        'https://services.arcgisonline.com/ArcGIS/rest/services/World_Shaded_Relief/MapServer/tile/{z}/{y}/{x}',
-        {
-            maxZoom: 17,
-            minZoom: 4,
-            attribution: '&copy; <a href="https://www.arcgisonline.com/copyright">ARCGIS</a> contributors',
-            keepBuffer: 3,
-        })
+export const getBaseLayers = (L) => {
+    return {
+        'Street Map': L.tileLayer(
+            'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
+            {
+                maxZoom: 17,
+                minZoom: 4,
+                attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
+                keepBuffer: 3,
+            }),
+        'World Map': L.tileLayer(
+            'https://services.arcgisonline.com/ArcGIS/rest/services/NatGeo_World_Map/MapServer/tile/{z}/{y}/{x}',
+            {
+                maxZoom: 17,
+                minZoom: 4,
+                attribution: '&copy; <a href="https://www.arcgisonline.com/copyright">ARCGIS</a> contributors',
+                keepBuffer: 3,
+            }),
+        'Satellite Imagery': L.tileLayer(
+            'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
+            {
+                maxZoom: 17,
+                minZoom: 4,
+                attribution: '&copy; <a href="https://www.arcgisonline.com/copyright">ARCGIS</a> contributors',
+                keepBuffer: 3,
+            }),
+        'Topological 1': L.tileLayer(
+            'https://services.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}',
+            {
+                maxZoom: 17,
+                minZoom: 4,
+                attribution: '&copy; <a href="https://www.arcgisonline.com/copyright">ARCGIS</a> contributors',
+                keepBuffer: 3,
+            }),
+        'Topological 2': L.tileLayer(
+            'https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png',
+            {
+                maxZoom: 17,
+                minZoom: 4,
+                attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
+                keepBuffer: 3,
+            }),
+        'Terrain Base': L.tileLayer(
+            'https://services.arcgisonline.com/ArcGIS/rest/services/World_Terrain_Base/MapServer/tile/{z}/{y}/{x}',
+            {
+                maxZoom: 17,
+                minZoom: 4,
+                attribution: '&copy; <a href="https://www.arcgisonline.com/copyright">ARCGIS</a> contributors',
+                keepBuffer: 3,
+            }),
+        'Shaded Relief': L.tileLayer(
+            'https://services.arcgisonline.com/ArcGIS/rest/services/World_Shaded_Relief/MapServer/tile/{z}/{y}/{x}',
+            {
+                maxZoom: 17,
+                minZoom: 4,
+                attribution: '&copy; <a href="https://www.arcgisonline.com/copyright">ARCGIS</a> contributors',
+                keepBuffer: 3,
+            })
+    }
 
 };
 
+
 /**
  * Generate map marker SVG.
  *
  * @public
- * @param {int} count,
+ * @param count
  * @param {Object} cluster
  * @return string
  */
@@ -165,3 +176,127 @@ export const getMarker = (count=0, cluster=false) => {
 
     return count === 1 ? markers.single : markers.cluster;
 };
+
+/**
+ * Parse XML data into DOM object.
+ *
+ * @public
+ *
+ * @param {String} xmlString
+ * @return {Document}
+ */
+
+export const parseMapSheetKML = (xmlString) => {
+
+    const parser = new DOMParser();
+    const xsltProcessor = new XSLTProcessor();
+
+    const xslString = `
+    <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
+      <xsl:output method="xml" indent="yes"/>
+    
+      <!-- Match the root element and copy it to the output -->
+      <xsl:template match="/">
+        <xsl:copy>
+          <xsl:apply-templates/>
+        </xsl:copy>
+      </xsl:template>
+    
+      <!-- Match any element with a "Style" or "StyleMap" name and skip it -->
+<!--      <xsl:template match="*[local-name()='Style' or local-name()='StyleMap' or local-name()='styleUrl' or local-name()='Point']"/>-->
+    
+      <!-- Match any other element and copy it to the output -->
+      <xsl:template match="*">
+        <xsl:copy>
+          <xsl:apply-templates/>
+        </xsl:copy>
+      </xsl:template>
+
+    </xsl:stylesheet>
+    `
+
+    // Parse XSLT string
+    const xsltDoc = parser.parseFromString(xslString, "text/xml");
+    xsltProcessor.importStylesheet(xsltDoc);
+
+    // Parse XML string
+    const xmlDoc = parser.parseFromString(xmlString, 'text/xml');
+
+    return xsltProcessor.transformToDocument(xmlDoc);
+};
+
+/**
+ * Generate feature popup HTML.
+ *
+ * @public
+ * @return string
+ * @param id
+ * @param feature
+ * @param layer
+ * @param callback
+ */
+
+export const setFeaturePopup = (id, feature, layer, callback) => {
+    // does this feature have a property named popupContent?
+    const {properties} = feature || {}
+    const {name, type, description, owner, owner_id, dependents} = properties || {};
+    const popup = document.createElement('div');
+
+    // map object link
+    const mapObjectLink = document.createElement('div');
+    mapObjectLink.innerHTML = `<span style="color: #888; font-weight: bold; cursor: pointer">${owner || ''}</span>`;
+    mapObjectLink.addEventListener("click", () => {
+        callback(owner_id || '', 'map_objects');
+    });
+    // featureLink.removeEventListener("click", () => {
+    //     console.log(feature)
+    // });
+    // map feature link
+    const mapFeatureLink = document.createElement('div');
+    mapFeatureLink.innerHTML = `<span style="color: #008896; font-weight: bold; cursor: pointer; font-size: larger">${name}</span>`;
+    mapFeatureLink.addEventListener("click", () => {
+        callback(id, 'map_features');
+    });
+    mapFeatureLink.removeEventListener("click", () => {
+        callback(id, 'map_features')
+    });
+    const featureDetails = document.createElement('div');
+    featureDetails.innerHTML = `
+        <div>${(type || '').toUpperCase()}</div>
+        <div>${description || ''}</div>`;
+
+    // Include linked survey seasons maps
+    const surveySeasonsDetails = document.createElement('div');
+    // add elements for each dependent
+    (dependents || []).forEach(dependent => {
+        const {surveyor, surveyor_id, survey, survey_id, survey_season, survey_season_id} = dependent || {};
+        const surveySeasonLink = document.createElement('div');
+        surveySeasonLink.setAttribute('style', 'border-top: 1px solid #444');
+        surveySeasonLink.innerHTML = `<span style="color: #B65179; font-weight: bold; cursor: pointer">Survey Season ${survey_season}</span>`;
+        surveySeasonLink.addEventListener("click", () => {
+            callback(survey_season_id, 'survey_seasons');
+        });
+        const surveyLink = document.createElement('div');
+        surveyLink.innerHTML = `<span style="color: #888; font-weight: bold; cursor: pointer">${survey}</span>`;
+        surveyLink.addEventListener("click", () => {
+            callback(survey_id, 'surveys');
+        });
+        const surveyorLink = document.createElement('div');
+        surveyorLink.innerHTML = `<span style="color: #888; font-weight: bold; cursor: pointer">${surveyor}</span>`;
+        surveyorLink.addEventListener("click", () => {
+            callback(surveyor_id, 'surveyors');
+        });
+        surveySeasonsDetails.append(surveySeasonLink, surveyLink, surveyorLink);
+    });
+
+    // compose popup HTML
+    popup.appendChild(mapFeatureLink);
+    popup.appendChild(featureDetails);
+    popup.appendChild(surveySeasonsDetails);
+    // popup.appendChild(mapObjectLink);
+    // add popup to map layer
+    layer.bindPopup(popup, {
+        closeOnClick: true,
+        autoClose: true
+    });
+}
\ No newline at end of file
diff --git a/client/src/_components/views/attached.view.js b/client/src/_components/views/attached.view.js
index 8b356c34..f5543c03 100644
--- a/client/src/_components/views/attached.view.js
+++ b/client/src/_components/views/attached.view.js
@@ -38,45 +38,39 @@ const keyID = genID();
 export const AttachedMetadataView = ({owner, attached}) => {
 
     // iterate over attached data types
-    return Object.keys(attached || {}).map(attachedModel => {
-        // Participants component
-        if (attachedModel === 'participant_groups' && Object.keys(attached[attachedModel]).length > 0) {
-            return <ParticipantsView
-                key={`attached_${keyID}_${attachedModel}`}
-                owner={owner}
-                metadata={attached[attachedModel]}
-                editor={false}
-            />
+    return Object.keys(attached || {}).map((attachedModel, idx_attached) => {
+            return <div key={`${keyID}_attached_${attachedModel}_${idx_attached}`}>
+                {
+                    // participant node attachments
+                    attachedModel === 'participant_groups' && Object.keys(attached[attachedModel]).length > 0 &&
+                     <ParticipantsView owner={owner} metadata={attached[attachedModel]} editor={false }/>
+                }
+                {
+                    // other node attachments
+                    attachedModel !== 'comparisons' && Array.isArray(attached[attachedModel]) && attached[attachedModel].length > 0 &&
+                    <Accordion
+                        type={attachedModel}
+                        label={`${getModelLabel(attachedModel, 'label')}`}
+                        className={attachedModel}
+                        open={true}
+                    >
+                        <div className={attachedModel}>
+                            {
+                                attached[attachedModel].map((attachedItem, index) => {
+                                    const {label = '', data = {}} = attachedItem || {};
+                                    return <MetadataView
+                                            key={`${keyID}_attached_${attachedModel}_${index}`}
+                                            model={attachedModel}
+                                            node={attachedItem}
+                                            owner={owner}
+                                            label={label}
+                                            metadata={data}
+                                        />
+                                })
+                            }
+                        </div>
+                    </Accordion>
+                }
+            </div>
         }
-        // Comparisons Editor component
-        else if (attachedModel === 'comparisons') {
-            return null;
-        }
-        // Attached Metadata Editor component
-        else if (Array.isArray(attached[attachedModel]) && attached[attachedModel].length > 0) {
-            return <Accordion
-                key={`${keyID}_${attachedModel}`}
-                type={attachedModel}
-                label={`${getModelLabel(attachedModel, 'label')}`}
-                className={attachedModel}
-                open={true}
-            >
-                <div className={`${attachedModel}`}>
-                    {
-                        attached[attachedModel].map((attachedItem, index) => {
-                            const {label = '', data = {}} = attachedItem || {};
-                            return <MetadataView
-                                key={`${keyID}_attached_${attachedModel}_${index}`}
-                                model={attachedModel}
-                                node={attachedItem}
-                                owner={owner}
-                                label={label}
-                                metadata={data}
-                            />
-                        })
-                    }
-                </div>
-            </Accordion>
-        }
-    });
-};
\ No newline at end of file
+    )};
\ No newline at end of file
diff --git a/client/src/_components/views/capture.view.js b/client/src/_components/views/capture.view.js
index 157686fe..faecb7dd 100644
--- a/client/src/_components/views/capture.view.js
+++ b/client/src/_components/views/capture.view.js
@@ -18,6 +18,7 @@ import { useData } from '../../_providers/data.provider.client';
 import Tabs from '../common/tabs';
 import Comparator from "../common/comparator";
 import EditorMenu from "../menus/editor.menu";
+import Badge from "../common/badge";
 
 /**
  * View available versions of capture images.
@@ -28,12 +29,12 @@ import EditorMenu from "../menus/editor.menu";
  * @param {String} type
  * @param {Object} owner
  * @param {Array} files
+ * @param {Object} refImage
  * @param callback
- * @param menu
  * @return {JSX.Element}
  */
 
-export const CaptureImagesTable = ({type, owner, files=[], callback=()=>{}}) => {
+export const CaptureImagesTable = ({type, owner, files=[], refImage=null, callback=()=>{}}) => {
 
     const router = useRouter();
     const api = useData();
@@ -45,11 +46,11 @@ export const CaptureImagesTable = ({type, owner, files=[], callback=()=>{}}) =>
         { name: 'width', label: 'Width'},
         { name: 'height', label: 'Height'},
         { name: 'file_size', label: 'File Size'},
-        { name: 'uploaded', label: 'Uploaded'},
+        { name: 'uploaded', label: 'Uploaded/Updated'},
     ];
 
     // include editor menu for logged-in users
-    cols.push({ name: 'menu', label: '' })
+    cols.push({ name: 'menu', label: '' });
 
     // prepare capture image data rows
     const rows = files.map(fileData => {
@@ -62,6 +63,9 @@ export const CaptureImagesTable = ({type, owner, files=[], callback=()=>{}}) =>
         const imageState = image_states
             .find(opt => opt.value === metadata.image_state) || { label: metadata.image_state };
 
+        // mark referenced master image
+        const isReferencedMaster = refImage ? id === refImage.file.id || '' : false;
+
         // create table row data
         const row = {
             thumbnail: <Image
@@ -76,12 +80,16 @@ export const CaptureImagesTable = ({type, owner, files=[], callback=()=>{}}) =>
             details: <>
                 <div>{(metadata.mimetype || getExtension(filename)).toUpperCase()}</div>
                 <div>{imageState && imageState.hasOwnProperty('label') ? imageState.label : 'n/a'}</div>
+                { isReferencedMaster && <Badge className={'modern_captures'} label={'Compared'} /> }
             </>,
             width: sanitize(metadata.x_dim, 'imgsize'),
             height: sanitize(metadata.y_dim, 'imgsize'),
-            uploaded: sanitize(file.created_at, 'datetime'),
+            uploaded: <>
+                <div>{sanitize(file.created_at, 'datetime')}</div>
+                <div>{sanitize(file.updated_at, 'datetime')}</div>
+            </>,
             file_size: sanitize(file.file_size, 'filesize')
-    };
+        };
 
         // include select file metadata
         metadata.filename = file.filename;
@@ -128,6 +136,7 @@ const CaptureView = ({model, data, fileType}) => {
         files={},
         metadata={},
         node={},
+        refImage = {},
         attached={} } = api.destructure(data);
 
     // get capture status
@@ -182,6 +191,7 @@ const CaptureView = ({model, data, fileType}) => {
                 type={fileType}
                 owner={{ id: id, type: model, sorted: status !== 'unsorted' }}
                 files={captureImages}
+                refImage={refImage}
             />,
         },
         {
diff --git a/client/src/_components/views/editor.view.js b/client/src/_components/views/editor.view.js
index 0467689a..0155a67d 100644
--- a/client/src/_components/views/editor.view.js
+++ b/client/src/_components/views/editor.view.js
@@ -14,7 +14,6 @@ import { useRouter } from '../../_providers/router.provider.client';
 import HeaderMenu from '../menus/header.menu';
 import {useWindowSize} from "../../_utils/events.utils.client";
 import Footer from "../content/footer";
-import AdminView from "./admin.view";
 
 /**
  * Render editor panel component (authenticated users).
diff --git a/client/src/_components/views/files.view.js b/client/src/_components/views/files.view.js
index e478454f..92d4289a 100644
--- a/client/src/_components/views/files.view.js
+++ b/client/src/_components/views/files.view.js
@@ -36,8 +36,7 @@ export const
             {name: 'mime_type', label: 'Format'},
             {name: 'details', label: 'Details'},
             {name: 'file_size', label: 'File Size'},
-            {name: 'updated_at', label: 'Updated'},
-            {name: 'created_at', label: 'Created'},
+            {name: 'created_at', label: 'Uploaded'},
             {name: 'menu', label: ''},
         ];
 
@@ -69,7 +68,7 @@ export const
             // return files row
             return {
                 download: <FileSelector data={fileData} scale={'medium'} />,
-                filename: String(filename).substring(0, 12) || 'n/a',
+                filename: <span title={filename}>{String(filename).substring(0, 12) || 'n/a'}</span>,
                 mime_type: mimetype || ext,
                 details: metadata_type && metadata_type.hasOwnProperty('label')
                     ? metadata_type.label
diff --git a/client/src/_components/views/help.view.js b/client/src/_components/views/help.view.js
index 99f3f883..a5a4b966 100644
--- a/client/src/_components/views/help.view.js
+++ b/client/src/_components/views/help.view.js
@@ -8,9 +8,11 @@
 
 import React from 'react';
 import explorerHelpContent from '../content/explorer.help';
-import iatHelpContent from '../content/toolkit.help';
+import iatHelpContent from '../content/alignment.help';
 import editorHelpContent from '../content/editor.help';
+import mapHelpContent from '../content/map.help';
 import Button from '../common/button';
+import mapHelp from "../content/map.help";
 
 /**
  * Tab layout for help pages.
@@ -69,9 +71,7 @@ const HelpTabs = ({
                 </li>
                 <li className={`tab-data ${orientation}`}>
                     {
-                        items.hasOwnProperty(selectedTab)
-                            ? items[selectedTab].data || ''
-                            : ''
+                        items.hasOwnProperty(selectedTab) ? items[selectedTab].data || '' : ''
                     }
                 </li>
             </ul>
@@ -89,6 +89,7 @@ const HelpView = ({ section = 0, page = 0 }) => {
 
     const [sectionSelected, setSectionSelected] = React.useState(section);
     const [explorerPageSelected, setExplorerPageSelected] = React.useState(page);
+    const [mapPageSelected, setMapPageSelected] = React.useState(page);
     const [editorPageSelected, setEditorPageSelected] = React.useState(page);
     const [iatPageSelected, setIATPageSelected] = React.useState(page);
 
@@ -101,8 +102,9 @@ const HelpView = ({ section = 0, page = 0 }) => {
 
         const pageSelector = [
             setExplorerPageSelected,
+            setMapPageSelected,
+            setIATPageSelected,
             setEditorPageSelected,
-            setIATPageSelected
         ]
 
         // set selected page
@@ -114,11 +116,12 @@ const HelpView = ({ section = 0, page = 0 }) => {
     const exploreHelp = explorerHelpContent(gotoPage);
     const editorHelp = editorHelpContent(gotoPage);
     const iatHelp = iatHelpContent(gotoPage);
+    const mapHelp = mapHelpContent(gotoPage)
 
     // index of help sections
     const _sections = [
         {
-            label: 'MLE Explorer',
+            label: 'Explorer Guide',
             data: <HelpTabs
                 orientation={'vertical'}
                 items={exploreHelp}
@@ -128,17 +131,17 @@ const HelpView = ({ section = 0, page = 0 }) => {
             />,
         },
         {
-            label: 'MLE Editor',
+            label: 'Map Tool Guide',
             data: <HelpTabs
                 orientation={'vertical'}
-                items={editorHelp}
-                selectedTab={editorPageSelected}
-                setSelectedTab={setEditorPageSelected}
+                items={mapHelp}
+                selectedTab={mapPageSelected}
+                setSelectedTab={setMapPageSelected}
                 className={'help'}
             />,
         },
         {
-            label: 'Alignment Tool',
+            label: 'Alignment Tool Guide',
             data: <HelpTabs
                 orientation={'vertical'}
                 items={iatHelp}
@@ -147,6 +150,16 @@ const HelpView = ({ section = 0, page = 0 }) => {
                 className={'help'}
             />,
         },
+        {
+            label: 'Editor Guide',
+            data: <HelpTabs
+                orientation={'vertical'}
+                items={editorHelp}
+                selectedTab={editorPageSelected}
+                setSelectedTab={setEditorPageSelected}
+                className={'help'}
+            />,
+        },
     ];
 
     return <HelpTabs
diff --git a/client/src/_components/views/metadata.view.js b/client/src/_components/views/metadata.view.js
index d0f41c10..46186251 100644
--- a/client/src/_components/views/metadata.view.js
+++ b/client/src/_components/views/metadata.view.js
@@ -22,6 +22,8 @@ import {useData} from '../../_providers/data.provider.client';
 import {useUser} from '../../_providers/user.provider.client';
 import FilesView from "./files.view";
 import {AttachedMetadataView} from "./attached.view";
+import Button from "../common/button";
+import {useNav} from "../../_providers/nav.provider.client";
 
 // generate random key
 const keyID = genID();
@@ -50,6 +52,7 @@ const MetadataView = ({
 
     const api = useData();
     const user = useUser();
+    const nav = useNav();
 
     // generate the model schema
     const { fieldsets = [] } = genSchema({
@@ -80,12 +83,28 @@ const MetadataView = ({
                             ? node[fieldKey]
                             : '';
 
-                // select options for value (if available)
+                // select option label for display (if found for given value)
                 if (render === 'select' && api.options.hasOwnProperty(reference)) {
-                    const selected = api.options[reference].find(opt => opt.value === value);
+                    const selected = api.options[reference].find(opt => String(opt.value) === String(value))
                     value = selected ? selected.label : value;
                 }
 
+                // select option label for display (if found for given value)
+                if (render === 'mapFeature' && value) {
+                    const {map_features_id} = metadata || {};
+                    return {
+                        value: <Button
+                                    icon={'map'}
+                                    className={'submit'}
+                                    name={'map_view'}
+                                    label={'View on Map'}
+                                    title={'View on Map'}
+                                    onClick={() => nav.addToOverlay([map_features_id])}
+                                 />,
+                        label: 'Map Feature'
+                    }
+                }
+
                 // multiselect list of values (if available)
                 if (render === 'multiselect' && metadata.hasOwnProperty(fieldKey) && Array.isArray(metadata[fieldKey].data)) {
                     return {
@@ -94,7 +113,7 @@ const MetadataView = ({
                                 metadata[fieldKey].data.map((item, index) => {
                                     const { label = '', created_at='', updated_at='' } = item || {};
                                     return <li
-                                        key={`${keyID}_${model}_${index}`}
+                                        key={`${keyID}_metadata_${genID()}_${model}_${index}`}
                                         title={`Created: ${sanitize(created_at, 'timestamp')}
                                         Last Modified: ${sanitize(updated_at, 'timestamp')}`}
                                     >{sanitize(label)}</li>;
diff --git a/client/src/_providers/toolkit.provider.client.js b/client/src/_providers/alignment.provider.client.js
similarity index 95%
rename from client/src/_providers/toolkit.provider.client.js
rename to client/src/_providers/alignment.provider.client.js
index b5dd6709..60ba9c54 100644
--- a/client/src/_providers/toolkit.provider.client.js
+++ b/client/src/_providers/alignment.provider.client.js
@@ -1,6 +1,6 @@
 /*!
  * MLE.Client.Provider.Toolkit
- * File: toolkit.provider.client.js
+ * File: alignment.provider.client.js
  * Copyright(c) 2023 Runtime Software Development Inc.
  * Version 2.0
  * MIT Licensed
@@ -26,8 +26,8 @@
 import * as React from 'react'
 import {createNodeRoute, getQuery} from "../_utils/paths.utils.client";
 import {useRouter} from "./router.provider.client";
-import {usePointer} from "../_components/toolkit/tools/pointer.toolkit";
-import {initOptions, initPanel, initOpenCV} from "../_components/toolkit/panel/init.panel.toolkit.js";
+import {usePointer} from "../_components/alignment/tools/pointer.alignment";
+import {initOptions, initPanel, initOpenCV} from "../_components/alignment/panel/init.panel.alignment.js";
 import {useUser} from "./user.provider.client";
 
 /**
@@ -71,8 +71,8 @@ export const IatProvider = (props) => {
     const [options, setOptions] = React.useState(initOptions());
 
     // panel properties
-    const [panel1Metadata, setPanel1Metadata] = React.useState(initPanel(panel1ID, panel1Label, input1));
-    const [panel2Metadata, setPanel2Metadata] = React.useState(initPanel(panel2ID, panel2Label, input2));
+    const [panel1Metadata, setPanel1Metadata] = React.useState(initPanel(panel1ID, panel1Label, input1, user));
+    const [panel2Metadata, setPanel2Metadata] = React.useState(initPanel(panel2ID, panel2Label, input2, user));
 
     // renderable image data state
     const [img1Data, setImg1Data] = React.useState(null);
@@ -145,10 +145,12 @@ export const IatProvider = (props) => {
 
                         // load metadata to panel data state
                         setPanelData(initPanel(panelID, panelLabel, data, user));
-                        // signal new image load
                         setSignal('load');
                     }
-                }).catch(console.error);
+                })
+                .catch(console.error)
+                .finally(() => {
+                });
         }
 
         // Initialize IAT from input parameters
@@ -200,7 +202,7 @@ export const IatProvider = (props) => {
                         );
                     },
                     reset: () => {
-                        setPanel1Metadata(initPanel(panel1ID, panel1Label));
+                        setPanel1Metadata(initPanel(panel1ID, panel1Label, null, user));
                         setSource1(null);
                         setImg1Data(null);
                         setRendered1Data(null);
@@ -230,7 +232,7 @@ export const IatProvider = (props) => {
                         );
                     },
                     reset: () => {
-                        setPanel2Metadata(initPanel(panel2ID, panel2Label));
+                        setPanel2Metadata(initPanel(panel2ID, panel2Label, null, user));
                         setSource2(null);
                         setImg2Data(null);
                         setRendered2Data(null);
diff --git a/client/src/_providers/app.provider.client.js b/client/src/_providers/app.provider.client.js
index 5b8d6050..a81ae7ed 100644
--- a/client/src/_providers/app.provider.client.js
+++ b/client/src/_providers/app.provider.client.js
@@ -13,7 +13,7 @@ import { UserProvider } from './user.provider.client';
 import { DataProvider } from './data.provider.client';
 import { NavProvider } from "./nav.provider.client";
 import { DialogProvider } from "./dialog.provider.client";
-import { IatProvider } from "./toolkit.provider.client";
+import { IatProvider } from "./alignment.provider.client";
 import {getStaticView} from "../_services/schema.services.client";
 import {filterPath} from "../_utils/paths.utils.client";
 
diff --git a/client/src/_providers/auth.provider.client.js b/client/src/_providers/auth.provider.client.js
index a2836fb9..daad8005 100644
--- a/client/src/_providers/auth.provider.client.js
+++ b/client/src/_providers/auth.provider.client.js
@@ -72,6 +72,30 @@ function AuthProvider(props) {
         setProcessing(false);
     }
 
+    /**
+     * User login request.
+     *
+     * @public
+     *
+     */
+
+    const authorize = async () => {
+        // request new token
+        router.post('/refresh', null, true)
+            .then(res => {
+                const { response={} } = res || {};
+                const { user = null } = response || {};
+
+                // include role nesting
+                if (user && user.hasOwnProperty('role')) {
+                    const {role = ['']} = user || {};
+                    user.isEditor = role[0] === 'editor' || role[0] === 'administrator' || role[0] === 'super_administrator';
+                    user.isAdmin = role[0] === 'administrator' || role[0] === 'super_administrator';
+                }
+                return user;
+            });
+    }
+
     /**
      * Post-Render: Refresh access token with API.
      *
@@ -116,7 +140,8 @@ function AuthProvider(props) {
             data,
             processing,
             login,
-            logout
+            logout,
+            authorize
         }} {...props} />
     )
 
diff --git a/client/src/_providers/data.provider.client.js b/client/src/_providers/data.provider.client.js
index c1d58ead..cb9135d3 100644
--- a/client/src/_providers/data.provider.client.js
+++ b/client/src/_providers/data.provider.client.js
@@ -139,7 +139,7 @@ function DataProvider(props) {
                 const {response = {}} = res || {};
 
                 // DEBUG
-                console.log('\n<<< Response >>>\n', res)
+                console.log('\n<<< API Data Check >>>\n', res)
 
                 // destructure API data for settings
                 const {
@@ -190,7 +190,8 @@ function DataProvider(props) {
                 // update states with response data
                 if (message.type === 'error') setSessionMsg(message);
                 setOptions(data);
-                console.log('Loaded Global Options');
+                // DEBUG
+                console.log('<<< Loaded Global Options >>>', data);
             })
             .catch(err => console.error(err));
     }, [router, setOptions, setError]);
diff --git a/client/src/_providers/nav.provider.client.js b/client/src/_providers/nav.provider.client.js
index 6e9641a7..92ddbe1f 100644
--- a/client/src/_providers/nav.provider.client.js
+++ b/client/src/_providers/nav.provider.client.js
@@ -9,7 +9,7 @@
  * Navigation provider is a React Context used to store and share data for the navigator.
  *
  * Revisions
- *
+ * - 30-11-2023   Add map features overlay filter data to map navigation provider
  */
 
 import * as React from 'react'
@@ -22,7 +22,6 @@ import {
     getNavView,
     removeDownload
 } from "../_services/session.services.client";
-import kmlData from '../_components/kml/example-2.kml';
 
 /**
  * Global navigation data provider.
@@ -47,9 +46,14 @@ function NavProvider(props) {
     // tree and map data states
     const [nodeData, setNodeData] = React.useState({});
     const [statsData, setStatsData] = React.useState([]);
+    // map data
     const [mapData, setMapData] = React.useState({});
-    const [mapOverlayData, setMapOverlayData] = React.useState(null);
+    // filter data for map station pins
     const [filterData, setFilterData] = React.useState({});
+    // data for map boundary overlays
+    const [mapOverlayData, setMapOverlayData] = React.useState(null);
+    // filter data for map station pins
+    // const [filterOverlayData, setFilterOverlayData] = React.useState({});
     const [selectedNode, setSelectedNode] = React.useState({});
     const [scrollToView, setScrollToView] = React.useState(false);
     const [compact, setCompact] = React.useState(false);
@@ -105,6 +109,59 @@ function NavProvider(props) {
         return checkDownload(id);
     }
 
+    // set features to map overlay (map feature node IDs)
+    const _setMapOverlay = (data) => {
+        setMapOverlayData(data);
+    }
+
+    // add a feature to map overlay (map feature node IDs)
+    const _addToMapOverlay = (ids) => {
+
+        // check if map feature already added
+        if ((mapOverlayData || []).some(feature => ids.includes(feature.id))) {
+            setMapOverlayData((mapOverlayData || []).concat([]));
+        }
+
+        // get filtered map features
+        const _filterFeatures = (data) => {
+            return (data || []).map((data) => {
+                const {nodes_id, owner_id, name, description, type, geometry, map_object_name, dependents} = data || {};
+                return {
+                    id: nodes_id,
+                    selected: (ids || []).length === 1,
+                    geoJSON: geometry.map(featureGeometry => {
+                        return {
+                            type: 'Feature',
+                            geometry: featureGeometry,
+                            properties: {
+                                name: name,
+                                description: description,
+                                type: type,
+                                owner: map_object_name,
+                                owner_id: owner_id,
+                                dependents: dependents
+                            }
+                        };
+                    })
+                };
+            });
+        }
+
+        // API call to retrieve map features data
+        router.get('/map/features?ids=' + ids.join('+'))
+            .then(res => {
+                // update state with response data
+                if (_isMounted.current) {
+                    if (res.error) return setError(res.error);
+                    const { response = {} } = res || {};
+                    const { data = {} } = response || {};
+                    const filteredFeatures = _filterFeatures(data);
+                    setMapOverlayData(filteredFeatures);
+                }
+            })
+            .catch(console.error);
+    }
+
     /**
      * Update download selection state.
      *
@@ -117,7 +174,6 @@ function NavProvider(props) {
 
     /**
      * Load API global node tree data.
-     * - uses current Window location path as default endpoint.
      *
      * @public
      */
@@ -130,7 +186,7 @@ function NavProvider(props) {
         // - navigator route is defined
         // - node data not yet loaded
         if (!error && (!nodeData || Object.keys(nodeData).length === 0)) {
-            console.log('Load Nav Tree...')
+            console.log('Loading Nav Tree...')
             // load API data
             router.get('/nodes/tree')
                 .then(res => {
@@ -144,7 +200,7 @@ function NavProvider(props) {
                         const { nodes={}, stats=[] } = data || {};
 
                         // [DEBUG]
-                        // console.log('\n<<< Nav [Tree] >>>\n', res)
+                        console.log('\n<<< Nav [Tree] >>>\n', res)
 
                         // check if response data is empty (set error flag if true)
                         if ( Object.keys(nodes).length === 0 ) {
@@ -161,7 +217,12 @@ function NavProvider(props) {
         return () => {_isMounted.current = false;};
     }, [router, nodeData, setNodeData, error, setError]);
 
-    // API call to retrieve map data
+    /**
+     * Load API global station pin map data.
+     *
+     * @public
+     */
+
     React.useEffect(() => {
         _isMounted.current = true;
 
@@ -200,37 +261,6 @@ function NavProvider(props) {
         return () => {_isMounted.current = false;};
     }, [router, mapData, setMapData, error, setError]);
 
-    // API call to retrieve map KML data
-    React.useEffect(() => {
-        _isMounted.current = true;
-        // proceed if:
-        // - no error found (e.g. empty response)
-        // - navigator route is defined
-        // - KML overlay data not yet loaded
-
-        if (!error && (!mapOverlayData && kmlData)) {
-
-            // load KML map overlay data
-            router.getXML(kmlData)
-                .then(res => {
-
-                    if (_isMounted.current) {
-
-                        // destructure map data
-                        if (res.error) return setError(res.error);
-
-                        // DEBUG
-                        // console.log('\n<<< Nav [KML] >>>\n', res)
-
-                        // load node data to provider
-                        setMapOverlayData(res);
-                    }
-                })
-                .catch(err => console.error(err));
-        }
-        return () => {_isMounted.current = false;};
-    }, [router, mapOverlayData, setMapOverlayData, error, setError]);
-
     return (
         <NavContext.Provider value={
             {
@@ -245,6 +275,8 @@ function NavProvider(props) {
                 setSelected: setSelectedNode,
                 filter: filterData,
                 overlay: mapOverlayData,
+                setOverlay: _setMapOverlay,
+                addToOverlay: _addToMapOverlay,
                 setFilter: setFilterData,
                 hasFilter: Object.keys(filterData).length > 0,
                 mode: navView,
diff --git a/client/src/_providers/router.provider.client.js b/client/src/_providers/router.provider.client.js
index 2a9ebe3b..870827a2 100644
--- a/client/src/_providers/router.provider.client.js
+++ b/client/src/_providers/router.provider.client.js
@@ -7,7 +7,7 @@
  */
 
 import * as React from 'react'
-import {loadXML, makeRequest} from '../_services/api.services.client';
+import {makeRequest} from '../_services/api.services.client';
 import {createNodeRoute, filterPath, reroute, getRoot, createAPIURL } from '../_utils/paths.utils.client';
 import { getStaticView } from '../_services/schema.services.client';
 import { popSessionMsg } from '../_services/session.services.client';
@@ -113,8 +113,8 @@ function RouterProvider(props) {
      *
      * @public
      * @param {String} route
-     *
-     * @param params
+     * @param {Object} params
+     * @return {Promise} response data
      */
 
     const get = async (route, params=null) => {
@@ -133,21 +133,7 @@ function RouterProvider(props) {
         return handleResponse(res);
     };
 
-    /**
-     * Data request method to fetch data from API.
-     *
-     * @public
-     * @param {String} route
-     *
-     * @param params
-     */
-
-    const getXML = async (route, params=null) => {
 
-        // reject null paths or when API is offline
-        if (!route || !online ) return null;
-        return await loadXML(route);
-    };
 
     /**
      * Request method to post data from API.
@@ -156,15 +142,16 @@ function RouterProvider(props) {
      *
      * @param {String} route
      * @param {Object} formData
+     * @param {Boolean} json
      */
 
-    const post = async (route, formData= null) => {
+    const post = async (route, formData= null, json=false) => {
 
         // reject null paths or when API is offline
         if (!route || !online ) return null;
 
         // parse form data
-        const parsedData = formData ? Object.fromEntries(formData) : {};
+        const parsedData = formData && !json ? Object.fromEntries(formData) : formData && json ? formData : {};
 
         let res = await makeRequest({
             url: createAPIURL(route),
@@ -213,7 +200,6 @@ function RouterProvider(props) {
                 setFilter,
                 staticView,
                 get,
-                getXML,
                 post,
                 remove,
                 online,
diff --git a/client/src/_services/api.services.client.js b/client/src/_services/api.services.client.js
index 8f7a6e8a..fc3fa449 100644
--- a/client/src/_services/api.services.client.js
+++ b/client/src/_services/api.services.client.js
@@ -122,9 +122,9 @@ export const upload = async (route, formData, callback=()=>{}, online=true) => {
     if (!route || !online ) return null;
 
     // DEBUG: Display the key/value pairs of form data
-    for(let pair of formData.entries()) {
-        console.log(pair[0]+ ', '+ pair[1]);
-    }
+    // for(let pair of formData.entries()) {
+    //     console.log(pair[0]+ ', '+ pair[1]);
+    // }
 
     try {
 
@@ -282,25 +282,6 @@ export const download = async (route, callback=()=>{}, filename, online=true, sa
     }
 };
 
-// export const download = async (route, format, online=true) => {
-//
-//     // reject null paths or when API is offline
-//     if (!route || !online ) return null;
-//
-//     return await makeRequest({
-//         url: createAPIURL(route),
-//         method:'GET',
-//         download: format
-//     })
-//         .then(res => {
-//             if (!res || !res.success) { return { error: res.statusText, data: null } }
-//             const {error=null} = res || {};
-//             // return { error: error, data: new Blob([res.response]) }
-//             return { error: error, data: res.response }
-//         })
-//         .catch(console.error);
-// }
-
 /**
  * Get KML metadata as parsed XML string.
  *
@@ -318,6 +299,7 @@ export const loadXML = async (route) => {
     return await fetch(route)
         .then(res => res.text())
         .then(xmlString => {
+
             // Parse XML string
             const parser = new DOMParser();
             return parser.parseFromString(xmlString, 'text/xml');
diff --git a/client/src/_utils/data.utils.client.js b/client/src/_utils/data.utils.client.js
index 09ffd1d0..bc19dfeb 100644
--- a/client/src/_utils/data.utils.client.js
+++ b/client/src/_utils/data.utils.client.js
@@ -6,17 +6,6 @@
  * MIT Licensed
  */
 
-export const genHash = function(str) {
-    let hash = 0, i, chr;
-    if (str.length === 0) return hash;
-    for (i = 0; i < str.length; i++) {
-        chr   = str.charCodeAt(i);
-        hash  = ((hash << 5) - hash) + chr;
-        hash |= 0; // Convert to 32bit integer
-    }
-    return hash * hash;
-};
-
 /**
  * Capitalize first letter of string.
  *
@@ -152,7 +141,7 @@ export function groupBy(arr, key) {
 }
 
 /**
- * Natural sort items by alpha-numerical values in label strings.
+ * Natural sort items by alphanumerical values in label strings.
  *
  * @param {Object} a
  * @param {Object} b
@@ -178,7 +167,7 @@ export function sorter(a, b) {
  * @param value
  * @param render
  * @param href
- * @param title
+ * @param label
  * @param prefix
  * @param suffix
  */
@@ -187,7 +176,7 @@ export const sanitize = (
     value,
     render='',
     href='',
-    title='',
+    label='',
     prefix='',
     suffix=''
 ) => {
@@ -254,6 +243,12 @@ export const sanitize = (
         imgsize: ({ value }) => {
             return value != null ? parseInt(value) + ' px' : '-';
         },
+        reference: ({ value, href }) => {
+            return value != null && href != null ? 'Node Reference' : '-';
+        },
+        json: ({ value }) => {
+            return value != null ? <pre aria-label="JSON Object">{JSON.stringify(value, null, 2)}</pre> : '';
+        },
         default: ({ value }) => {
             return value != null ? String(value) : '-';
         }
@@ -261,7 +256,7 @@ export const sanitize = (
 
     // render data component
     return render && _dataElements.hasOwnProperty(render)
-        ? _dataElements[render]({ value, href, title })
+        ? _dataElements[render]({ value, href, label })
         : _dataElements.default({ value });
 }
 
@@ -289,4 +284,5 @@ export const getRootNode = (path=null) => {
 
 export const genID = () => {
     return Math.random().toString(16).substring(2);
-}
\ No newline at end of file
+}
+
diff --git a/client/src/_utils/validator.utils.client.js b/client/src/_utils/validator.utils.client.js
index add9ca3b..70217291 100644
--- a/client/src/_utils/validator.utils.client.js
+++ b/client/src/_utils/validator.utils.client.js
@@ -123,6 +123,29 @@ const _inputValidations =
             return !!(value < 360 && value >= 0);
         },
 
+        /**
+         * Validate JSON value.
+         * Reference: https://stackoverflow.com/questions/3710204/how-to-check-if-a-string-is-a-valid-json-string
+         * Retrieved: 06-01-2024
+         */
+
+        isJSON: (value) => {
+            try {
+                const o = JSON.parse(value);
+
+                // Handle non-exception-throwing cases:
+                // Neither JSON.parse(false) or JSON.parse(1234) throw errors, hence the type-checking,
+                // but... JSON.parse(null) returns null, and typeof null === "object",
+                // so we must check for that, too. Thankfully, null is falsey, so this suffices:
+                if (o && typeof o === "object") {
+                    return o;
+                }
+            }
+            catch (e) { }
+
+            return false;
+        },
+
         /**
          * Validate email address.
          */
diff --git a/client/src/schema.js b/client/src/schema.js
index b7e89c94..91fa4b2b 100644
--- a/client/src/schema.js
+++ b/client/src/schema.js
@@ -4,13 +4,55 @@
  * Copyright(c) 2023 Runtime Software Development Inc.
  * Version 2.0
  * MIT Licensed
+ *
+ * ----------
+ * Description
+ *
+ * MLP data model schema
+ * Description: This is a configuration document for defining rendering, labelling, routing,
+ * input validation, node/file relations and other settings for the client-side web application.
+ *
+ * Schema Structure
+ * - app: Global settings
+ * - routes: list of static router endpoints
+        <ROUTEURI>: {
+            name: <ROUTENAME>,
+            label: <Route label>
+        }
+ * - errors
+ * - messages
+ * - views
+ * - captures
+ * - imageTypes: defined image data model types
+ * - excluded: file types to be excluded from
+ * - models:
+ *      <MODELNAME>: {
+            attributes: {
+                order: <Order of appearances in lists - Not Used>,
+                label: <Model label (plural)>,
+                singular: <Model label (singular)>
+            },
+            fieldsets: [
+                {
+                    legend: <fieldset legend text>,
+                    restrict: [<list of applicable views>],
+                    users: [<list of authorized user roles>],
+                    <FIELDNAME>: {
+                        label: <field label>,
+                        render: <field format>,
+                        validate: [<list of validation checks>]
+                    },
+ * ...
+                },
+ *
+ * ---------
+ * Revisions
+ * - 02-12-2023   Include KMZ metadata files for surveys and survey seasons
+ * - 23-12-2023   Added new 'map_objects' file type with schema.
  */
 
 /**
- * MLP Application Schema
- * Description: This is a configuration document for defining rendering,
- *              labelling, routing, input validation, node/file relations
- *              and other settings for the client-side web application.
+ *
  * @private
  */
 
@@ -71,6 +113,7 @@ export const schema = {
             isEmail: 'Not a valid email address.',
             isPassword: 'Passwords must have a minimum eight and maximum 20 characters, at least one uppercase letter, one lowercase letter, one number and one special character',
             isValidForm: 'Form not valid.',
+            isJSON: 'Not valid JSON',
             isRepeatPassword: 'Passwords do not match.'
         },
         authentication: {
@@ -151,6 +194,12 @@ export const schema = {
             submit: 'Filter',
             render: 'form'
         },
+        filterBoundaries: {
+            label: 'Filter Survey Boundaries',
+            legend: 'Filter',
+            submit: 'Filter',
+            render: 'form'
+        },
         filter: {
             label: 'Filter',
             legend: 'Filter',
@@ -168,7 +217,14 @@ export const schema = {
             legend: 'Download',
             submit: 'Download',
             render: 'download'
-        }
+        },
+        extract: {
+            label: 'Extract Map Features',
+            legend: 'Extract Map Features',
+            submit: 'Extract',
+            method: 'POST',
+            render: 'import'
+        },
     },
     captures: {
         types: ['historic_captures', 'modern_captures'],
@@ -197,6 +253,101 @@ export const schema = {
                 }
             ]
         },
+        map_objects: {
+            attributes: {
+                order: 30,
+                label: "Map Feature Groups",
+                singular: "Map Feature Group",
+                dependents: [
+                    'map_features',
+                    'metadata_files'
+                ],
+                files: [
+                    'metadata_files'
+                ]
+            },
+            fieldsets: [
+                {
+                    restrict: ['edit', 'delete'],
+                    nodes_id: {
+                        render: 'hidden',
+                    }
+                },
+                {
+                    legend: 'Map Object Details',
+                    name: {
+                        label: 'Name'
+                    },
+                    type: {
+                        render: 'select',
+                        reference: 'map_object_types',
+                        label: 'Map Object Type'
+                    },
+                    description: {
+                        label: 'Description'
+                    }
+                },
+                {
+                    legend: 'Dependent Nodes',
+                    render: 'component',
+                    restrict: ['edit'],
+                    dependents: {
+                        label: 'Edit Dependents Metadata/Files',
+                        render: 'dependentsEditor',
+                        reference: 'node',
+                    }
+                }
+            ]
+        },
+        map_features: {
+            attributes: {
+                order: 30,
+                label: "Map Features",
+                singular: "Map Feature"
+            },
+            fieldsets: [
+                {
+                    restrict: ['edit', 'delete'],
+                    nodes_id: {
+                        render: 'hidden',
+                    },
+                    owner_id: {
+                        render: 'hidden',
+                    }
+                },
+                {
+                    legend: 'Extract Map Features',
+                    restrict: ['extract'],
+                    users: ['administrator', 'super_administrator'],
+                    kmz_file: {
+                        label: 'KMZ Metadata File',
+                        render: 'file',
+                        multiple: false,
+                        validate: ['filesSelected']
+                    }
+                },
+                {
+                    legend: 'Map Feature Details',
+                    restrict: ['show', 'new', 'edit'],
+                    name: {
+                        label: 'Name'
+                    },
+                    type: {
+                        render: 'select',
+                        reference: 'map_feature_types',
+                        label: 'Map Feature Type'
+                    },
+                    description: {
+                        label: 'Description'
+                    },
+                    geometry: {
+                        label: 'Geometry (GeoJSON)',
+                        render: 'json',
+                        validate: ['isJSON']
+                    }
+                }
+            ]
+        },
         projects: {
             attributes: {
                 order: 1,
@@ -219,7 +370,8 @@ export const schema = {
                 {
                     legend: 'Project Details',
                     name: {
-                        label: 'Name'
+                        label: 'Name',
+                        validate: ['isRequired'],
                     },
                     description: {
                         label: 'Description'
@@ -258,7 +410,8 @@ export const schema = {
                         label: 'Given Names'
                     },
                     last_name: {
-                        label: 'Last Name'
+                        label: 'Last Name',
+                        validate: ['isRequired']
                     },
                     short_name: {
                         label: 'Short Name'
@@ -277,10 +430,12 @@ export const schema = {
                     'survey_seasons',
                     'historic_captures',
                     'modern_captures',
-                    'supplemental_images'
+                    'supplemental_images',
+                    'metadata_files'
                 ],
                 files: [
-                    'supplemental_images'
+                    'supplemental_images',
+                    'metadata_files'
                 ]
             },
             fieldsets: [
@@ -323,15 +478,17 @@ export const schema = {
                 label: "Survey Seasons",
                 singular: "Survey Season",
                 dependents: [
-                    'stations',
-                    'historic_captures',
-                    'modern_captures',
                     'glass_plate_listings',
                     'maps',
-                    'supplemental_images'
+                    'supplemental_images',
+                    'metadata_files',
+                    'stations',
+                    'historic_captures',
+                    'modern_captures'
                 ],
                 files: [
-                    'supplemental_images'
+                    'supplemental_images',
+                    'metadata_files'
                 ]
             },
             fieldsets: [
@@ -1777,7 +1934,11 @@ export const schema = {
                         label: 'Historic Map'
                     },
                     links: {
-                        label: 'Links'
+                        label: 'Links to Maps'
+                    },
+                    map_features_id: {
+                        render: 'mapFeature',
+                        label: 'Map Features'
                     }
                 }]
         },
@@ -1836,6 +1997,42 @@ export const schema = {
                     },
                 }]
         },
+        map_object_types: {
+            attributes: {
+                label: 'Map Object Types',
+                singular: 'Map Object Type'
+            },
+            fieldsets: [
+                {
+                    legend: 'Map Object Type Settings',
+                    users: ['administrator', 'super_administrator'],
+                    name: {
+                        label: 'Name',
+                        validate: ['isRequired']
+                    },
+                    label: {
+                        label: 'Label'
+                    },
+                }]
+        },
+        map_feature_types: {
+            attributes: {
+                label: 'Map Feature Types',
+                singular: 'Map Feature Type'
+            },
+            fieldsets: [
+                {
+                    legend: 'Map Feature Type Settings',
+                    users: ['administrator', 'super_administrator'],
+                    name: {
+                        label: 'Name',
+                        validate: ['isRequired']
+                    },
+                    label: {
+                        label: 'Label'
+                    },
+                }]
+        },
         participant_group_types: {
             attributes: {
                 label: 'Group Types',
diff --git a/package.json b/package.json
index 4d5ded4d..7cdb6fad 100644
--- a/package.json
+++ b/package.json
@@ -28,6 +28,7 @@
     "@fortawesome/free-regular-svg-icons": "^5.15.3",
     "@fortawesome/free-solid-svg-icons": "^5.15.2",
     "@fortawesome/react-fontawesome": "^0.1.14",
+    "@mapbox/togeojson": "^0.16.2",
     "adm-zip": "^0.5.9",
     "amqplib": "^0.8.0",
     "busboy": "^0.3.1",
@@ -36,9 +37,12 @@
     "dcraw": "^1.0.3",
     "dotenv": "^8.2.0",
     "express": "^4.18.2",
+    "geojson": "^0.5.0",
     "helmet": "^4.6.0",
     "jsonwebtoken": "^9.0.2",
-    "leaflet": "^1.7.1",
+    "jszip": "^3.10.1",
+    "jszip-utils": "^0.1.0",
+    "leaflet": "^1.9.4",
     "mathjs": "^9.4.2",
     "morgan": "^1.10.0",
     "nanoid": "^3.3.4",
@@ -49,7 +53,8 @@
     "react": "^17.0.2",
     "redis": "^3.1.2",
     "sharp": "^0.30.5",
-    "uid-safe": "^2.1.5"
+    "uid-safe": "^2.1.5",
+    "xmldom": "^0.6.0"
   },
   "devDependencies": {
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
diff --git a/src/controllers/files.controller.js b/src/controllers/files.controller.js
index e22533ff..06ca4921 100644
--- a/src/controllers/files.controller.js
+++ b/src/controllers/files.controller.js
@@ -1,8 +1,18 @@
 /*!
  * MLP.API.Controllers.Files
  * File: files.controller.js
- * Copyright(c) 2021 Runtime Software Development Inc.
+ * Copyright(c) 2023 Runtime Software Development Inc.
+ * Version 2.0
  * MIT Licensed
+ *
+ * ----------
+ * Description
+ *
+ * Controller for file services routes.
+ *
+ * ---------
+ * Revisions
+ * - 18-11-2023    Added file directory list controller.
  */
 
 /**
@@ -13,14 +23,13 @@
 import * as db from '../services/index.services.js';
 import ModelServices from '../services/model.services.js';
 import * as fserve from '../services/files.services.js';
+import {getFilePath} from '../services/files.services.js';
 import * as nserve from '../services/nodes.services.js';
 import * as cserve from "../services/construct.services.js";
-import { prepare } from '../lib/api.utils.js';
+import {prepare} from '../lib/api.utils.js';
 import pool from '../services/db.services.js';
-import { sanitize } from '../lib/data.utils.js';
+import {humanize, sanitize} from '../lib/data.utils.js';
 import * as importer from '../services/import.services.js';
-import { humanize } from '../lib/data.utils.js';
-import {getFilePath} from "../services/files.services.js";
 import {getImageURL} from "../services/images.services.js";
 
 /**
@@ -212,7 +221,7 @@ export default function FilesController(modelType) {
                     // include image urls
                     rs.url = getImageURL(file_type, rs);
                     return rs;
-            }))
+            }));
 
             res.status(200).json(
                 prepare({
@@ -459,15 +468,15 @@ export default function FilesController(modelType) {
         const client = await pool.connect();
 
         try {
-
             // get requested file ID
             const {id} = req.params || {};
 
-            // get owner node; check that node exists in database
-            // and corresponds to requested owner type.
+            // get file path (images require secure token)
             const fileData = await fserve.get(id, client);
-            const { file={} } = fileData || {};
+            const { file={}, metadata={} } = fileData || {};
             const { filename='', mime_type='' } = file || {};
+            const { secure_token='' } = metadata || {};
+            file.secure_token = secure_token;
             const filePath = getFilePath(file);
 
             // file does not exist
@@ -532,5 +541,38 @@ export default function FilesController(modelType) {
         }
     };
 
+    /**
+     * Lists files in directory by file path.
+     *
+     * @param req
+     * @param res
+     * @param next
+     * @src public
+     */
+
+    this.directory = async (req, res, next) => {
+        try {
+
+            // get query parameters
+            const { path='/'} = req.query || {};
+
+            // get directory listing results
+            fserve.listFiles(path, (err, resultData) => {
+                if (err) return next(new Error('invalidRequest'));
+                res.status(200).json(
+                    prepare({
+                        view: 'filter',
+                        data: resultData
+                    }));
+            });
+
+        } catch (err) {
+            console.error(err)
+            return next(err);
+        }
+    };
+
 }
 
+
+
diff --git a/src/controllers/maps.controller.js b/src/controllers/maps.controller.js
new file mode 100644
index 00000000..ecfa1c22
--- /dev/null
+++ b/src/controllers/maps.controller.js
@@ -0,0 +1,194 @@
+/*!
+ * MLP.API.Controllers.Maps
+ * File: maps.controller.js
+ * Copyright(c) 2023 Runtime Software Development Inc.
+ * Version 2.0
+ * MIT Licensed
+ *
+ * ----------
+ * Description
+ *
+ * Maps data controller.
+ *
+ * ---------
+ * Revisions
+
+ */
+
+import * as fserve from '../services/files.services.js';
+import * as nserve from '../services/nodes.services.js';
+import {prepare} from '../lib/api.utils.js';
+import pool from '../services/db.services.js';
+import {
+    extractMapFeaturesFromFile,
+    insertMapFeatures,
+    getMapFeaturesById,
+    getMapFeatureById
+} from "../services/maps.services.js";
+import {sanitize} from "../lib/data.utils.js";
+
+/**
+ * Controller initialization.
+ *
+ * @src public
+ */
+
+export const init = async () => {
+};
+
+/**
+ * Request showcase capture data (frontpage image carousel)
+ *
+ * @param req
+ * @param res
+ * @param next
+ * @src public
+ */
+
+
+
+/**
+ * Extract map features from KMZ files request controller.
+ *
+ * @param req
+ * @param res
+ * @param next
+ * @src public
+ */
+
+export const extractMapFeatures = async (req, res, next) => {
+    // NOTE: client undefined if connection fails.
+    const client = await pool.connect();
+
+    try {
+
+        // get file ID from parameters
+        const { id = null } = req.params || {};
+
+        // get owner metadata record
+        const {file} = await fserve.get(id, client) || {};
+        const {owner_id} = file || {};
+        const owner = await nserve.get(owner_id, 'map_objects', client);
+
+        // check that id exists
+        if (!owner) {
+            return next(new Error('invalidRequest'));
+        }
+
+        // get filtered results
+        const resultData = await extractMapFeaturesFromFile(file, owner);
+
+        res.status(200).json(
+            prepare({
+                view: 'extract',
+                model: 'map_features',
+                data: resultData,
+                message: {
+                    msg: `Map features extracted successfully!`,
+                    type: 'success'
+                }
+            }));
+
+    } catch (err) {
+        console.error(err)
+        return next(err);
+    } finally {
+        await client.release(true);
+    }
+};
+
+/**
+ * Generate map features from KMZ files request controller.
+ *
+ * @param req
+ * @param res
+ * @param next
+ * @src public
+ */
+
+export const createMapFeatures = async (req, res, next) => {
+    // NOTE: client undefined if connection fails.
+    const client = await pool.connect();
+
+    try {
+
+        // get owner ID from parameters
+        const { id = null } = req.params || {};
+
+        const featuresData = req.body || [];
+
+        // get owner metadata record
+        const owner = await nserve.get(id, 'map_objects', client);
+
+        // check if request data exists and is valid
+        if (!owner) return next(new Error('notFound'));
+        if (!Array.isArray(featuresData) || featuresData.length === 0) return next(new Error('invalidRequest'));
+
+        // insert map features as map object dependents
+        // NOTE: duplicates will throw error message
+        const results = await insertMapFeatures(featuresData, owner);
+
+        // compose response message
+        const message = 'Map Features Generated: ' + (featuresData || []).map(({name}) => {
+                const match = results.some(item => item.hasOwnProperty('name') && item.name === name);
+                return match ? `${name} added` : `${name} not added (duplicate)`
+            }).join(', ');
+
+        res.status(200).json(
+            prepare({
+                view: 'extract',
+                model: 'map_features',
+                data: results,
+                message: {
+                    msg: message,
+                    type: 'success'
+                }
+            }));
+
+    } catch (err) {
+        console.error(err)
+        return next(err);
+    } finally {
+        await client.release(true);
+    }
+};
+
+/**
+ * Get all map features.
+ *
+ * @param req
+ * @param res
+ * @param next
+ * @src public
+ */
+
+export const getMapFeatures = async (req, res, next) => {
+
+    // get query parameters
+    const { ids=''} = req.query || {};
+
+    // sanitize + convert query string to node id array
+    const mapFeatureIDs = ids
+        .split(' ')
+        .map(id => {
+            return sanitize(id, 'integer');
+        })
+        .filter(Number);
+
+    const client = await pool.connect();
+    try {
+        res.status(200).json(
+            prepare({
+                view: 'map_features',
+                model: 'map_features',
+                data: await getMapFeaturesById(mapFeatureIDs, client)
+            }));
+
+    } catch (err) {
+        console.error(err)
+        return next(err);
+    } finally {
+        await client.release(true);
+    }
+};
+
diff --git a/src/controllers/metadata.controller.js b/src/controllers/metadata.controller.js
index 913e1351..fd096a3d 100644
--- a/src/controllers/metadata.controller.js
+++ b/src/controllers/metadata.controller.js
@@ -198,6 +198,8 @@ export default function MetadataController(metadataType) {
             const ownerID = this.getOwnerId(req);
             let ownerType = null;
 
+            console.log(req.body)
+
             // get owner ID from parameters
             if (ownerID) {
                 // get owner metadata record (if exists)
@@ -530,4 +532,5 @@ export default function MetadataController(metadataType) {
         }
     };
 
+
 }
\ No newline at end of file
diff --git a/src/controllers/model.controller.js b/src/controllers/model.controller.js
index f091760d..2449dcb2 100644
--- a/src/controllers/model.controller.js
+++ b/src/controllers/model.controller.js
@@ -394,9 +394,13 @@ export default function ModelController(nodeType) {
             // - confirm capture does not have comparisons.
             const comparisons = await getComparisonsMetadata(node, client);
             const isMoveable = await isRelatable(id, owner_id, client);
+
             if (Array.isArray(comparisons) && comparisons.length > 0)
                 return next(new Error('restrictedByComparisons'));
-            if (!isMoveable || (status !== 'unsorted' && status !== 'sorted' && status !== 'missing')) {
+            if (!isMoveable) {
+                return next(new Error('invalidMove'));
+            }
+            if (status !== 'unsorted' && status !== 'sorted' && status !== 'missing') {
                 return next(new Error('invalidMove'));
             }
 
diff --git a/src/controllers/nodes.controller.js b/src/controllers/nodes.controller.js
index 0fbccb8e..3a7216ef 100644
--- a/src/controllers/nodes.controller.js
+++ b/src/controllers/nodes.controller.js
@@ -1,8 +1,21 @@
 /*!
  * MLP.API.Controllers.Nodes
  * File: nodes.controller.js
- * Copyright(c) 2021 Runtime Software Development Inc.
+ * Copyright(c) 2023 Runtime Software Development Inc.
+ * Version 2.0
  * MIT Licensed
+ *
+ * Description
+ * Node route controller. Responsible for control of data transmission between aggregate node data and API response.
+ * Maps user action into model updates.
+ * - Show: Returns node data by ID
+ * - Map: Returns node data for map navigator component
+ * - Tree: Returns node data for tree navigator component
+ * - Exporter: Exports node data to different formats
+ * - Search: Returns search results for full-text queries
+ *
+ * Revisions
+ * - 31-12-2023   Added map objects to navigation tree data
  */
 
 import {prepare} from '../lib/api.utils.js';
@@ -76,7 +89,8 @@ export const tree = async (req, res, next) => {
                 data: {
                     nodes: {
                         surveyors: await nserve.getTree('surveyors'),
-                        projects: await nserve.getTree('projects')
+                        projects: await nserve.getTree('projects'),
+                        map_objects: await nserve.getTree('map_objects')
                     },
                     stats: {
                         summary: await statserve.summary()
diff --git a/src/lib/data.utils.js b/src/lib/data.utils.js
index 8dc80923..7d7d0c3b 100644
--- a/src/lib/data.utils.js
+++ b/src/lib/data.utils.js
@@ -81,6 +81,9 @@ export function sanitize(data, datatype) {
         'float': function() {
             return isNaN(parseFloat(data)) ? null : parseFloat(data);
         },
+        'json': function() {
+            return JSON.stringify(data);
+        },
         'USER-DEFINED': function() {
             return !Array.isArray(data) ? null : `(${data.join(',')})`;
         },
diff --git a/src/lib/date.js b/src/lib/date.utils.js
similarity index 99%
rename from src/lib/date.js
rename to src/lib/date.utils.js
index 45570f87..b473cb9e 100644
--- a/src/lib/date.js
+++ b/src/lib/date.utils.js
@@ -1,6 +1,6 @@
 /*!
  * MLP.API.Utilities.Date
- * File: /lib/date.js
+ * File: /lib/date.utils.js
  * Copyright(c) 2021 Runtime Software Development Inc.
  * MIT Licensed
  */
diff --git a/src/lib/file.utils.js b/src/lib/file.utils.js
index 3a07d291..67478223 100644
--- a/src/lib/file.utils.js
+++ b/src/lib/file.utils.js
@@ -2,7 +2,17 @@
  * MLP.API.Utilities.Files
  * File: files.utils.js
  * Copyright(c) 2023 Runtime Software Development Inc.
+ * Version 2.0
  * MIT Licensed
+ *
+ * ----------
+ * Description
+ *
+ * File utilities.
+ *
+ * ---------
+ * Revisions
+
  */
 
 'use strict';
diff --git a/src/queries/comparisons.queries.js b/src/queries/comparisons.queries.js
index 7f237dae..7192db49 100644
--- a/src/queries/comparisons.queries.js
+++ b/src/queries/comparisons.queries.js
@@ -148,12 +148,14 @@ export function getComparisonsByStationID(id) {
                                 ON hv_id = historic_captures.owner_id
             GROUP BY historic_captures.nodes_id
         )
-        SELECT comparison_indices.modern_captures,
+        SELECT comparison_indices.id,
+               comparison_indices.modern_captures,
                comparison_indices.historic_captures
         FROM comparison_indices
                  INNER JOIN hc
                             ON hc.nodes_id = comparison_indices.historic_captures
         GROUP BY hc.nodes_id,
+                 comparison_indices.id,
                  comparison_indices.modern_captures,
                  comparison_indices.historic_captures;
     `;
@@ -176,7 +178,8 @@ export function getComparisonsByLocationID(id) {
             SELECT *
             FROM modern_captures
             WHERE modern_captures.owner_id = $1::integer)
-        SELECT comparison_indices.modern_captures, 
+        SELECT comparison_indices.id,
+               comparison_indices.modern_captures, 
                comparison_indices.historic_captures
         FROM comparison_indices
                  INNER JOIN mc
@@ -205,7 +208,8 @@ export function getComparisonsByHistoricVisitID(id) {
             SELECT *
             FROM historic_captures
             WHERE historic_captures.owner_id = $1::integer)
-        SELECT comparison_indices.modern_captures,
+        SELECT comparison_indices.id,
+               comparison_indices.modern_captures,
                comparison_indices.historic_captures
         FROM comparison_indices
                  INNER JOIN hc
@@ -239,7 +243,8 @@ export function getComparisonsByModernVisitID(id) {
                 WHERE locations.owner_id = $1::integer) as locs
                                 ON locs.nodes_id = modern_captures.owner_id
         )
-        SELECT comparison_indices.modern_captures, 
+        SELECT comparison_indices.id,
+               comparison_indices.modern_captures, 
                comparison_indices.historic_captures
         FROM comparison_indices
                  INNER JOIN mc
diff --git a/src/queries/files.queries.js b/src/queries/files.queries.js
index 00a48233..31c84492 100644
--- a/src/queries/files.queries.js
+++ b/src/queries/files.queries.js
@@ -233,11 +233,77 @@ export function selectByOwner(owner_id) {
     return {
         sql: `SELECT *
                  FROM files
-                 WHERE owner_id = $1::integer`,
+                 WHERE owner_id = $1::integer
+                 ORDER BY updated_at DESC`,
         data: [owner_id],
     };
 }
 
+/**
+ * Generate query: Retrieve file and metadata for requested map objects
+ *
+ * @param {integer} id
+ * @return {Object} query
+ * @public
+ */
+
+export function getMapObjectFilesById(id) {
+
+    // convert id array to SQL array string
+    // const idArray =  ids.map((_, index) => {return `$${++index}::integer`}).join(', ');
+    return {
+        sql: `SELECT map_objects.nodes_id as nodes_id, 
+                    map_objects.name as name,
+                    map_objects.type as map_objects_type,
+                    map_objects.description as description,
+                    files.fs_path as fs_path
+                    FROM map_objects
+                    INNER JOIN nodes ON nodes.id = map_objects.nodes_id
+                    INNER JOIN metadata_files ON metadata_files.owner_id = map_objects.nodes_id
+                    INNER JOIN files ON files.id = metadata_files.files_id
+                    WHERE metadata_files.type = 'geographic_data' AND map_objects.nodes_id = $1::integer
+                    GROUP BY map_objects.nodes_id,
+                    map_objects.name,
+                    map_objects.type,
+                    map_objects.description,
+                    files.fs_path;`,
+        data: [id],
+    };
+}
+
+/**
+ * Generate query: Retrieve file and metadata for requested map objects
+ *
+ * @param {Array} ids
+ * @return {Object} query
+ * @public
+ */
+
+export function getMapObjectAttachedMetadata(ids) {
+
+    // convert id array to SQL array string
+    const idArray =  ids.map((_, index) => {return `$${++index}::integer`}).join(', ');
+    return {
+        sql: `SELECT map_objects.nodes_id as nodes_id, 
+                    map_objects.name as name,
+                    map_objects.type as map_objects_type,
+                    map_objects.description as description,
+                    files.fs_path as fs_path
+                    FROM map_objects
+                    INNER JOIN nodes ON nodes.id = map_objects.nodes_id
+                    INNER JOIN metadata_files ON metadata_files.owner_id = map_objects.nodes_id
+                    INNER JOIN files ON files.id = metadata_files.files_id
+                    WHERE metadata_files.type = 'geographic_data' AND map_objects.nodes_id IN (${idArray})
+                    GROUP BY map_objects.nodes_id,
+                    map_objects.name,
+                    map_objects.type,
+                    map_objects.description,
+                    files.fs_path;`,
+        data: ids,
+    };
+}
+
+
 /**
  * Generate query: Insert file entry for given item
  *
@@ -264,6 +330,25 @@ export function update(file) {
     return fn(file);
 }
 
+/**
+ * Pseudo-touch query: Update file node last modified date.
+ *
+ * @return {Object} query
+ * @public
+ * @param file
+ */
+
+export function touch(file) {
+    return {
+        sql: `UPDATE files
+                SET updated_at = NOW() 
+                WHERE id = $1::integer
+                RETURNING *;
+              `,
+        data: [file.id],
+    };
+}
+
 /**
  * Generate query: Delete file entry for given item
  * - cascade deletes the metadata record for filetype
diff --git a/src/queries/index.queries.js b/src/queries/index.queries.js
index fecc23f5..7488f1fc 100644
--- a/src/queries/index.queries.js
+++ b/src/queries/index.queries.js
@@ -23,7 +23,7 @@ import * as exporter from './export.queries.js';
 import * as users from './users.queries.js';
 import * as stats from './stats.queries.js';
 import * as other from './other.queries.js';
-
+import * as maps from './maps.queries.js';
 
 /**
  * Index of module exports.
@@ -41,5 +41,6 @@ export default {
     export: exporter,
     users: users,
     stats: stats,
-    other: other
+    other: other,
+    maps: maps
 };
diff --git a/src/queries/maps.queries.js b/src/queries/maps.queries.js
new file mode 100644
index 00000000..c785e82c
--- /dev/null
+++ b/src/queries/maps.queries.js
@@ -0,0 +1,146 @@
+/*!
+ * MLP.API.Services.Queries.Maps
+ * File: maps.queries.js
+ * Copyright(c) 2024 Runtime Software Development Inc.
+ * MIT Licensed
+ */
+
+'use strict';
+
+/**
+ * Generate query: Get all map features
+ *
+ * @return {Object} query
+ * @public
+ */
+
+
+export function findFeatures(ids=[]) {
+    // build id filter statement
+    // - convert id array to SQL array string
+    const idArray =  ids.map((_, index) => {return `$${++index}::integer`}).join(', ');
+    // create json map feature query
+    return {
+        sql: `SELECT row_to_json(expanded_map_features)
+              FROM (
+                    SELECT
+                map_features.*,
+                map_objects.nodes_id as map_object_id,
+                map_objects.name as map_object_name,
+                map_objects.description as map_object_description,
+                map_objects.type as map_objects_type,
+                    (
+                        SELECT jsonb_agg(nested_maps)
+                FROM (
+                    SELECT 
+                        maps.*, 
+                        survey_seasons.year AS survey_season,
+                        survey_seasons.nodes_id AS survey_season_id,
+                        surveys.name AS survey,
+                        surveys.nodes_id AS survey_id,
+                        CONCAT(surveyors.given_names, ' ', surveyors.last_name, ' ', surveyors.short_name, ' ', surveyors.affiliation) AS surveyor,
+                        surveyors.nodes_id AS surveyor_id
+                    FROM maps
+                    JOIN survey_seasons ON survey_seasons.nodes_id = maps.owner_id
+                    JOIN surveys ON surveys.nodes_id = survey_seasons.owner_id
+                    JOIN surveyors ON surveyors.nodes_id = surveys.owner_id
+                    WHERE maps.map_features_id = map_features.nodes_id
+                ) AS nested_maps
+               ) AS dependents
+              FROM map_features
+              JOIN map_objects ON map_objects.nodes_id = map_features.owner_id
+              ${idArray ? `WHERE map_features.nodes_id IN (${idArray})` : ''}
+            ) AS expanded_map_features;`,
+        data: ids || []
+    }
+}
+
+/**
+ * Generate query: Insert node entry for given item
+ * data format:
+ *  [..., {
+ *     name: '82F01 (Yahk)',
+ *     geometry: [ [Object], [Object] ],
+ *     type: 'mapsheet',
+ *     description: 'Topographic survey.'
+ *   }, ... ]
+ *   owner format:
+ *   <Map Object Model>
+ *
+ * @return {Object} query
+ * @public
+ * @param {Array} data
+ * @param {Object} owner
+ */
+
+export function insertFeatures(data, owner) {
+
+    // get owner id
+    const {node} = owner || {};
+    const {id} = node || {};
+
+    // create placeholder strings in format "($1::<format>, $2::<format>, $3::<format>, ...), ..."
+    const nodeStr = (data || []).map((_, index) => {
+        return `('map_features', $1::integer, 'map_objects', NOW(), NOW())`;
+    }).join(',');
+    const featuresStr = (data || []).map((_, index) => {
+        return `(
+                $1::integer, 
+                $${index * 4 + 2}::varchar, 
+                $${index * 4 + 3}::varchar, 
+                $${index * 4 + 4}::text,
+                $${index * 4 + 5}::json
+                )`;
+    }).join(',');
+
+    // create values array to pass to placeholders
+    let valueArr = data.reduce((o, {name, type, description, geometry}) => {
+        return o.concat([name, type, description, JSON.stringify(geometry)]);
+    }, [id]);
+
+    return {
+        sql: `WITH mf_node_ids AS (
+                   INSERT INTO nodes (type, owner_id, owner_type, created_at, updated_at)
+                   VALUES ${nodeStr}
+                   RETURNING id
+                ),
+                m_features AS (
+                    SELECT *
+                        FROM ( VALUES ${featuresStr} ) AS feature_data(owner_id, name, type, description, geometry)
+                ),
+                collated_features AS (
+                    SELECT *
+                    FROM(
+                        SELECT *, row_number() over (order by id) as row_num
+                        FROM mf_node_ids) A
+                    JOIN
+                        (SELECT *,row_number() over (order by name) as row_num
+                        FROM m_features) B
+                    on  A.row_num=B.row_num
+                    ORDER BY A.id
+                )
+                INSERT INTO map_features (nodes_id, owner_id, name, type, description, geometry)
+                        SELECT collated_features.id,
+                        collated_features.owner_id,
+                        collated_features.name,
+                        collated_features.type,
+                        collated_features.description,
+                        CAST(collated_features.geometry AS json)
+                        FROM collated_features
+                    RETURNING *;`,
+        data: valueArr
+    }
+}
+
+
+/**
+ * Generate query: Delete node entry for given item
+ *
+ * @return {Function} query function / null if no node
+ * @public
+ * @param {Array} ids
+ */
+
+export function removeFeatures(ids) {
+    return null
+}
\ No newline at end of file
diff --git a/src/queries/schema.queries.js b/src/queries/schema.queries.js
index cec7caa8..bfff6af2 100644
--- a/src/queries/schema.queries.js
+++ b/src/queries/schema.queries.js
@@ -66,7 +66,7 @@ export function getColumns(targetTable) {
 }
 
 /**
- * Query: Check node relation for given node and owner type.
+ * Query: Check node relation allowed for given node and owner types.
  *
  * @return {Object} query binding
  * @param nodeID
diff --git a/src/routes/files.routes.js b/src/routes/files.routes.js
index d1dd4b75..2bd4b57c 100644
--- a/src/routes/files.routes.js
+++ b/src/routes/files.routes.js
@@ -1,8 +1,18 @@
 /*!
  * Core.API.Router.Files
  * File: files.routes.js
- * Copyright(c) 2021 Runtime Software Development Inc.
+ * Copyright(c) 2023 Runtime Software Development Inc.
+ * Version 2.0
  * MIT Licensed
+ *
+ * ----------
+ * Description
+ *
+ * File controller routes settings.
+ *
+ * ---------
+ * Revisions
+ * - 18-11-2023    Added admin-only list of files paths.
  */
 
 
@@ -93,6 +103,13 @@ function FilesRoutes(modelType) {
             put: null,
             post: null,
             delete: null,
+        },
+        settings: {
+            path: path.join('/files/list/'),
+            get: this.controller.directory,
+            put: null,
+            post: null,
+            delete: null,
         }
     };
 }
diff --git a/src/routes/index.routes.js b/src/routes/index.routes.js
index 90a4bca9..11663159 100644
--- a/src/routes/index.routes.js
+++ b/src/routes/index.routes.js
@@ -11,15 +11,16 @@
 
 import express from 'express';
 import * as schema from '../services/schema.services.js';
-import * as auth from '../services/auth.services.js'
-import main from './main.routes.js'
-import users from './users.routes.js'
-import nodes from './nodes.routes.js'
-import models from './model.routes.js'
-import metadata from './metadata.routes.js'
-import files from './files.routes.js'
-import master from './comparison.routes.js'
-import other from './other.routes.js'
+import * as auth from '../services/auth.services.js';
+import main from './main.routes.js';
+import users from './users.routes.js';
+import nodes from './nodes.routes.js';
+import models from './model.routes.js';
+import metadata from './metadata.routes.js';
+import files from './files.routes.js';
+import master from './comparison.routes.js';
+import other from './other.routes.js';
+import maps from './maps.routes.js';
 import pool from "../services/db.services.js";
 
 /**
@@ -136,6 +137,9 @@ async function initRouter() {
         // initialize other routes
         await initRoutes(other, baseRouter)
 
+        // initialize map routes
+        await initRoutes(maps, baseRouter)
+
         // initialize model routes
         const modelsRoutes = await models(client);
         await Promise.all(modelsRoutes
diff --git a/src/routes/main.routes.js b/src/routes/main.routes.js
index 65497c3d..3d93b98c 100644
--- a/src/routes/main.routes.js
+++ b/src/routes/main.routes.js
@@ -1,6 +1,6 @@
 /*!
- * Core.API.Router
- * File: index.routes.js
+ * Core.API.Router.Main
+ * File: main.routes.js
  * Copyright(c) 2021 Runtime Software Development Inc.
  * MIT Licensed
  */
diff --git a/src/routes/maps.routes.js b/src/routes/maps.routes.js
new file mode 100644
index 00000000..c9545bfc
--- /dev/null
+++ b/src/routes/maps.routes.js
@@ -0,0 +1,61 @@
+/*!
+ * Core.API.Router.Maps
+ * File: maps.routes.js
+ * Copyright(c) 2024 Runtime Software Development Inc.
+ * Version 2.0
+ * MIT Licensed
+ *
+ * ----------
+ * Description
+ *
+ * Map data routes.
+ *
+ * ---------
+ * Revisions
+
+ */
+
+/**
+ * Module dependencies
+ */
+
+import * as controller from '../controllers/maps.controller.js';
+import * as otherController from "../controllers/other.controller.js";
+
+/**
+ * Map data routes constructor
+ * @public
+ */
+
+function MapsRoutes() {
+
+    // initialize node controller
+    this.controller = controller;
+
+    // add controller routes
+    this.routes = {
+        create: {
+            path: '/files/map/features/:id',
+            get: controller.extractMapFeatures,
+            put: null,
+            post: controller.createMapFeatures,
+            delete: null,
+        },
+        show: {
+            path: '/map/features',
+            get: this.controller.getMapFeatures,
+            put: null,
+            post: null,
+            delete: null,
+        }
+    }
+}
+
+/**
+ * Express router
+ */
+
+let maps = new MapsRoutes();
+export default maps;
+
+
diff --git a/src/routes/metadata.routes.js b/src/routes/metadata.routes.js
index 900837da..0171debe 100644
--- a/src/routes/metadata.routes.js
+++ b/src/routes/metadata.routes.js
@@ -30,7 +30,15 @@ function MetadataRoutes(metadataType) {
     this.controller = new MetadataController(this.model);
 
     // define models that group metadata
-    const optionModels = ['cameras', 'lens', 'participants', 'participant_group_types', 'image_types'];
+    const optionModels = [
+        'cameras',
+        'lens',
+        'participants',
+        'participant_group_types',
+        'image_types',
+        'map_object_types',
+        'metadata_file_types'
+    ];
 
     // add controller routes
     this.routes = {
@@ -85,7 +93,7 @@ function MetadataRoutes(metadataType) {
                 ? this.controller.removeParticipants
                 : this.controller.remove,
             delete: null,
-        }
+        },
     }
 }
 
diff --git a/src/routes/model.routes.js b/src/routes/model.routes.js
index fb0787ba..b321e18c 100644
--- a/src/routes/model.routes.js
+++ b/src/routes/model.routes.js
@@ -39,7 +39,7 @@ function ModelRoutes(modelType) {
             delete: null,
         },
         create: {
-            path: this.model === 'surveyors' || this.model === 'projects'
+            path: this.model === 'surveyors' || this.model === 'projects' || this.model === 'map_objects'
                     ? path.join('/', this.model, 'new')
                     : path.join('/', this.model, 'new', ':owner_id'),
             get: this.controller.add,
diff --git a/src/services/files.services.js b/src/services/files.services.js
index 09bbb6c6..51744358 100644
--- a/src/services/files.services.js
+++ b/src/services/files.services.js
@@ -9,8 +9,8 @@
 
 import path from 'path';
 import fs from 'fs';
-import { Buffer } from 'node:buffer';
-import {copyFile, mkdir, unlink, rename} from 'fs/promises';
+import {Buffer} from 'node:buffer';
+import {copyFile, mkdir, rename, unlink} from 'fs/promises';
 import pool from './db.services.js';
 import queries from '../queries/index.queries.js';
 import {sanitize} from '../lib/data.utils.js';
@@ -349,6 +349,48 @@ export const selectByFile = async (file, client ) => {
         });
 };
 
+/**
+ * Recursively list files in a directory.
+ *
+ * @public
+ * @param localPath
+ * @param done
+ * @return {Array} files
+ */
+
+export const listFiles = (localPath, done=()=>{}) => {
+    // get root directories
+    const lowResPath = process.env.LOWRES_PATH;
+    const defaultPath = process.env.UPLOAD_DIR;
+    //joining path of local directory to root path
+    const dir = path.join(defaultPath, localPath);
+
+    let results = [];
+    fs.readdir(dir, function(err, list) {
+        if (err) return done(err);
+        let i = 0;
+        (function next() {
+            let file = list[i++];
+            if (!file) return done(null, results);
+            file = path.resolve(dir, file);
+            fs.stat(file, function(err, stat) {
+                console.log(stat)
+                if (stat && stat.isDirectory()) {
+                    listFiles(file, function(err, res) {
+                        results = results.concat(res);
+                        next();
+                    });
+                } else {
+                    results.push(file);
+                    next();
+                }
+            });
+        })();
+    });
+};
+
+
+
 /**
  * Insert file(s) and file metadata.
  * - import data structure:
@@ -490,17 +532,32 @@ export const insert = async (importData, model, fileOwner = null) => {
 
 export const update = async (file, metadata, client) => {
 
-    // update files record
-    const fileQuery = queries.files.update(file);
-    await client.query(fileQuery.sql, fileQuery.data);
+    try {
+        // start transaction
+        await client.query('BEGIN');
 
-    // update metadata record
-    const metadataQuery = queries.files.update(metadata);
-    let response = await client.query(metadataQuery.sql, metadataQuery.data);
+        // touch file node record
+        const fileNodeQuery = queries.files.touch(file);
+        await client.query(fileNodeQuery.sql, fileNodeQuery.data);
 
-    return response.hasOwnProperty('rows') && response.rows.length > 0
-        ? response.rows[0]
-        : null;
+        // update files record
+        const fileQuery = queries.files.update(file);
+        await client.query(fileQuery.sql, fileQuery.data);
+
+        // update metadata record
+        const metadataQuery = queries.files.update(metadata);
+        let response = await client.query(metadataQuery.sql, metadataQuery.data);
+
+        await client.query('COMMIT');
+
+        return response.hasOwnProperty('rows') && response.rows.length > 0
+            ? response.rows[0]
+            : null;
+
+    } catch (err) {
+        await client.query('ROLLBACK');
+        throw err;
+    }
 
 };
 
@@ -567,7 +624,6 @@ export const compress = async (files={}, version) => {
     return zip.toBuffer();
 };
 
-
 /**
  * Build file source path for resampled images and metadata files
  * from file data.
@@ -581,6 +637,7 @@ export const compress = async (files={}, version) => {
 export const getFilePath = (file, version='medium' ) => {
 
     const { fs_path = '', secure_token = '', file_type='' } = file || {};
+    console.log(file, '****')
     const lowResPath = process.env.LOWRES_PATH;
     const defaultPath = process.env.UPLOAD_DIR;
 
@@ -1080,7 +1137,7 @@ export const bulkDownload = async (req, res, next, version, client) => {
         // get owner node; check that node exists in database
         // and corresponds to requested owner type.
         const fileData = await get(sanitize(file_id, 'integer'), client);
-        const { file={}, metadata={} } = fileData || {};
+        const { file={} } = fileData || {};
         const { filename='', mime_type='' } = file || {};
         const filePath = getFilePath(file, version);
 
diff --git a/src/services/maps.services.js b/src/services/maps.services.js
new file mode 100644
index 00000000..f0130770
--- /dev/null
+++ b/src/services/maps.services.js
@@ -0,0 +1,212 @@
+/*!
+ * MLP.API.Services.Maps
+ * File: maps.services.js
+ * Copyright(c) 2024 Runtime Software Development Inc.
+ * MIT Licensed
+ */
+
+import * as fserve from "./files.services.js";
+import fs from "fs";
+import JSZip from "jszip";
+import {DOMParser} from "xmldom";
+import tj from "@mapbox/togeojson";
+import pool from "./db.services.js";
+import queries from "../queries/index.queries.js";
+
+/**
+ * Get map objects data by node ID.
+ *
+ * @public
+ * @param {Array} ids
+ * @param client
+ * @return {Promise} result
+ */
+
+export const getMapFeaturesById = async function (ids, client) {
+
+    // generate prepared statements collated with data
+    const { sql, data } = queries.maps.findFeatures(ids);
+    let response = await client.query(sql, data);
+    // destructure 'row-to-json' SQL row key
+    return response.hasOwnProperty('rows') ? response.rows.map(({row_to_json}) => {
+        return row_to_json;
+    }) || [] : [];
+
+}
+
+/**
+ * Get map objects data by node ID.
+ *
+ * @public
+ * @param id
+ * @param client
+ * @return {Promise} result
+ */
+
+export const getMapFeatureById = async function (id, client) {
+
+    // generate prepared statements collated with data
+    const { sql, data } = queries.maps.findFeatures([id]);
+    let response = await client.query(sql, data);
+    // destructure 'row-to-json' SQL row key
+    return response.hasOwnProperty('rows') ? response.rows.map(({row_to_json}) => {
+        return row_to_json;
+    }) || [] : [];
+
+}
+
+/**
+ * Extraction methods for GeoJSON by map object type
+ *
+ * GeoJSON map feature: pointer schema:
+ *  {
+ *     type: 'Feature',
+ *     geometry: { type: 'Point', coordinates: [Array] },
+ *     properties: {
+ *       name: 'Brown 1954. Bridgland 1922. Cautley 1926',
+ *       styleUrl: '#waypoint',
+ *       styleHash: '-6bc2ca73',
+ *       styleMapHash: [Object],
+ *       icon: 'http://maps.google.com/mapfiles/kml/shapes/placemark_circle.png',
+ *       description: 'NTS Mapsheet 82O04 (Banff).',
+ *       stroke: '#00aa00',
+ *       'stroke-opacity': 1,
+ *       'stroke-width': 5
+ *     }
+ *   }
+ *
+ *   GeoJSON map feature: grid schema:
+ *
+ *  {
+ *     nodes_id: 0,
+ *     name: '30M03 (Niagara)',
+ *     type: 'mapsheet',
+ *     owner: {
+ *       nodes_id: 47532,
+ *       name: 'Geodetic Topographic Survey (1-50K)',
+ *       type: 'nts',
+ *       description: 'Topographic survey.'
+ *     },
+ *     description: 'Topographic survey.',
+ *     geometry: { type: 'LineString', coordinates: [Array] },
+ *     points: [ [Object] ]
+ *   },
+ *
+ * @public
+ * @param type
+ * @param {Object} featuresArray
+ * @param {Object} owner
+ * @return {{owner: *, nodes_id: *, name: *, description: *, geometry: *, type: string, points}[]}
+ */
+
+const extractFeatures = (type, featuresArray, owner) => {
+
+    let featureType;
+    switch (type) {
+        case 'nts':
+            featureType = "mapsheet";
+            break;
+        case 'boundary':
+            featureType = "boundary";
+            break;
+        default:
+            featureType = "other";
+    }
+
+    const {metadata} = owner || {};
+    const {description} = metadata || {};
+    const {features} = featuresArray || {};
+    // extract mapsheet markers
+    const pointFeatures = (features || []).filter(feature => {
+        const {geometry} = feature || {};
+        const {type} = geometry || {};
+        return type === 'Point';
+    });
+    // extract mapsheet boundaries
+    return (features || []).filter(feature => {
+        const {geometry} = feature || {};
+        const {type} = geometry || {};
+        return type === 'LineString';
+    }).map((feature, index) => {
+        return {
+            nodes_id: index,
+            name: feature.properties.name,
+            type: featureType,
+            owner: metadata,
+            description: description,
+            geometry: ([feature.geometry]).concat((pointFeatures || [])
+                .filter(point => String(point.properties.description).includes(feature.properties.name))
+                .map(point => point.geometry))
+        }
+    });
+}
+
+/**
+ * Get map objects data by node ID.
+ *
+ * @public
+ * @param file
+ * @param owner
+ * @return {Promise} result
+ */
+
+export const extractMapFeaturesFromFile = async function (file, owner) {
+
+    // get absolute file path
+    const kmzFilePath = fserve.getFilePath(file);
+    // check that file exists
+    if (fs.existsSync(kmzFilePath)) console.log('File exists', kmzFilePath);
+    // buffer kmz file as binary data
+    const dataBuffer = await fs.promises.readFile(kmzFilePath);
+    const zip = await JSZip.loadAsync(dataBuffer);
+    const kmlDom = [];
+    // extract KML Dom read from buffer
+    zip.forEach(function (path, file) {
+        kmlDom.push(file.async('string'));
+    });
+    let result = []
+    // extract and convert features from each uncompressed KML file to GeoJSON format
+    await Promise.all(kmlDom.map(async (data) => {
+        // convert to geoJSON
+        const kml = new DOMParser().parseFromString(await data);
+        const featuresArray = tj.kml(kml, {styles: false});
+        // extract features for given map object type
+        const {metadata} = owner || {};
+        const {type} = metadata || {};
+        // console.log(extractFeatures[type](featuresArray, owner))
+        const features = extractFeatures(type, featuresArray, owner);
+        result = result.concat.apply(features);
+
+    }));
+    return result;
+}
+
+
+/**
+ * Get map objects data by node ID.
+ *
+ * @public
+ * @param features
+ * @param owner
+ * @return {Promise} result
+ */
+
+export const insertMapFeatures = async function (features, owner) {
+
+    const client = await pool.connect();
+
+    try {
+        // generate prepared statements collated with data
+        const { sql, data } = queries.maps.insertFeatures(features, owner);
+        // DEBUG
+        // console.log(sql, data)
+        // return []
+        let response = await client.query(sql, data);
+        return response.hasOwnProperty('rows') ? response.rows || [] : [];
+
+    } catch (err) {
+        throw err;
+    } finally {
+        await client.release(true);
+    }
+}
\ No newline at end of file
diff --git a/src/services/metadata.services.js b/src/services/metadata.services.js
index 77fbbf0f..c53097a6 100644
--- a/src/services/metadata.services.js
+++ b/src/services/metadata.services.js
@@ -316,6 +316,12 @@ export const getMetadataOptions = async function(client) {
         metadata_file_types: await findMetadataOptions(
             'metadata_file_types', 'name', ['label'], '', client
         ),
+        map_object_types: await findMetadataOptions(
+            'map_object_types', 'name', ['label'], '', client
+        ),
+        map_feature_types: await findMetadataOptions(
+            'map_feature_types', 'name', ['label'], '', client
+        ),
         surveyors: await findNodeOptions(
             'surveyors',
             ['last_name', 'given_names', 'short_name', 'affiliation'],
@@ -337,7 +343,14 @@ export const getMetadataOptions = async function(client) {
             true,
             client
         ),
-        statuses: getStatusTypes()
+        statuses: getStatusTypes(),
+        map_objects: await findNodeOptions(
+            'map_objects',
+            ['name'],
+            '',
+            false,
+            client
+        )
     }
 };
 
@@ -345,6 +358,7 @@ export const getMetadataOptions = async function(client) {
  * Get representative capture image file data.
  * - filters capture files by image state
  * - rank representative images as masters > interim > misc > raw > gridded
+ * - for multiple master images, select the most recent
  *
  * @param files
  * @param owner
@@ -355,7 +369,7 @@ export const getCaptureImage = (files, owner) => {
     const { historic_images=null, modern_images=null } = files || {};
     const captureImages = historic_images || modern_images || [];
     const { id='', type='' } = owner || {};
-    const fileType = type === 'historic_captures' ? 'historic_images' : 'modern_images'
+    const fileType = type === 'historic_captures' ? 'historic_images' : 'modern_images';
     return captureImages.find(file => file.metadata.image_state === 'master')
         || captureImages.find(file => file.metadata.image_state === 'interim')
         || captureImages.find(file => file.metadata.image_state === 'misc')
@@ -410,7 +424,9 @@ export const getAllSettings = async function(client) {
         image_states: await findMetadataOptions(
             'image_states', 'name', ['label'], ', ', client),
         participant_group_types: await findMetadataOptions(
-            'participant_group_types', 'id', ['label'], '', client)
+            'participant_group_types', 'id', ['label'], '', client),
+        map_objects: await findMetadataOptions(
+            'map_objects', 'name', ['label'], '', client)
     }
 };
 
@@ -670,7 +686,13 @@ export const getNodeLabel = async (node, files=[], client) => {
         ),
         maps: queries.metadata.selectLabel(
             id, type, ['nts_map'], '', ', ', 'id'
-        )
+        ),
+        map_objects: queries.metadata.selectLabel(
+            id, type, ['name'], '', ' '
+        ),
+        map_features: queries.metadata.selectLabel(
+            id, type, ['name'], '', ' '
+        ),
     };
 
     if (queriesByType.hasOwnProperty(type)) {
diff --git a/src/services/model.services.js b/src/services/model.services.js
index 9a731e29..3cddc641 100644
--- a/src/services/model.services.js
+++ b/src/services/model.services.js
@@ -220,6 +220,7 @@ export default function ModelServices(model) {
             // [3] process model data query (if provided)
             if (stmts.model) {
                 const { sql, data } = stmts.model(item);
+                console.log(sql)
                 res = await client.query(sql, data);
             }
 
diff --git a/src/services/nodes.services.js b/src/services/nodes.services.js
index 8be28761..95f605be 100644
--- a/src/services/nodes.services.js
+++ b/src/services/nodes.services.js
@@ -95,7 +95,7 @@ export const get = async (id, type, client) => {
 };
 
 /**
- * Get all nodes for top-level station map. Includes dependents data.
+ * Get filtered stations data for map navigation.
  *
  * @public
  * @return {Promise} result
@@ -122,7 +122,6 @@ export const getMap = async function(client) {
         })
 }
 
-
 /**
  * Get all nodes for top-level node tree. Includes dependents data.
  *
diff --git a/src/services/schema.services.js b/src/services/schema.services.js
index 5a2bcf04..4fb6f424 100644
--- a/src/services/schema.services.js
+++ b/src/services/schema.services.js
@@ -1,8 +1,15 @@
 /*!
  * MLP.API.Services.Schema
  * File: schema.services.js
- * Copyright(c) 2021 Runtime Software Development Inc.
+ * Copyright(c) 2023 Runtime Software Development Inc.
+ * Version 2.0
  * MIT Licensed
+ *
+ * Description
+ * Schema services are helper utilities to construct models using the MLP schema.
+ *
+ * Revisions
+ * - 31-12-2023   Added map objects as root
  */
 
 'use strict';
@@ -102,13 +109,14 @@ export const create = async (constructorType) => {
                 writable: false
             },
             rootNodeTypes: {
-                value: ['projects', 'surveyors'],
+                value: ['projects', 'surveyors', 'map_objects'],
                 writable: false
             },
             fsRoot: {
                 value: {
                     projects: 'Organized_by_Projects',
-                    surveyors: 'Organized_by_Surveyor'
+                    surveyors: 'Organized_by_Surveyor',
+                    map_objects: 'Map_Objects'
                 },
                 writable: false
             },
@@ -298,6 +306,8 @@ export function genLabel(model, attributes = null) {
         modern_captures: ['fn_photo_reference'],
         glass_plate_listings: ['container', 'plates'],
         maps: ['nts_map'],
+        map_objects: ['name'],
+        map_features: ['name']
     };
 
     return labelByModel.hasOwnProperty(model)

From 514e5c35775bbdc3de8900ef34c2684ba0986616 Mon Sep 17 00:00:00 2001
From: Spencer Rose <spencerrose@uvic.ca>
Date: Sat, 9 Mar 2024 13:35:52 -0800
Subject: [PATCH 2/8] Replace xmldom to handle CVE-2022-39353

---
 client/src/_components/common/icon.js  | 2 +-
 client/src/_components/common/table.js | 2 +-
 package.json                           | 8 ++++----
 src/services/maps.services.js          | 9 +++++----
 4 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/client/src/_components/common/icon.js b/client/src/_components/common/icon.js
index 0dc65a75..ef2d597d 100644
--- a/client/src/_components/common/icon.js
+++ b/client/src/_components/common/icon.js
@@ -1,7 +1,7 @@
 /*!
  * MLE.Client.Components.Common.Icon
  * File: icon.js
- * Copyright(c) 2022 Runtime Software Development Inc.
+ * Copyright(c) 2024 Runtime Software Development Inc.
  * Version 2.0
  * MIT Licensed
  */
diff --git a/client/src/_components/common/table.js b/client/src/_components/common/table.js
index 49fd509e..8ac6cc39 100644
--- a/client/src/_components/common/table.js
+++ b/client/src/_components/common/table.js
@@ -1,7 +1,7 @@
 /*!
  * MLE.Client.Components.Common.Table
  * File: editor.js
- * Copyright(c) 2022 Runtime Software Development Inc.
+ * Copyright(c) 2024 Runtime Software Development Inc.
  * Version 2.0
  * MIT Licensed
  */
diff --git a/package.json b/package.json
index 7cdb6fad..48e30053 100644
--- a/package.json
+++ b/package.json
@@ -39,6 +39,7 @@
     "express": "^4.18.2",
     "geojson": "^0.5.0",
     "helmet": "^4.6.0",
+    "jsdom": "21.0.0",
     "jsonwebtoken": "^9.0.2",
     "jszip": "^3.10.1",
     "jszip-utils": "^0.1.0",
@@ -49,12 +50,11 @@
     "node-fetch": "^2.6.7",
     "node-forge": "^1.3.1",
     "pg": "^8.5.1",
-    "pm2": ">=5.1.0",
+    "pm2": "^5.3.1",
     "react": "^17.0.2",
     "redis": "^3.1.2",
-    "sharp": "^0.30.5",
-    "uid-safe": "^2.1.5",
-    "xmldom": "^0.6.0"
+    "sharp": "^0.33.2",
+    "uid-safe": "^2.1.5"
   },
   "devDependencies": {
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
diff --git a/src/services/maps.services.js b/src/services/maps.services.js
index f0130770..976dbd6b 100644
--- a/src/services/maps.services.js
+++ b/src/services/maps.services.js
@@ -8,7 +8,7 @@
 import * as fserve from "./files.services.js";
 import fs from "fs";
 import JSZip from "jszip";
-import {DOMParser} from "xmldom";
+import {JSDOM} from "jsdom";
 import tj from "@mapbox/togeojson";
 import pool from "./db.services.js";
 import queries from "../queries/index.queries.js";
@@ -167,9 +167,10 @@ export const extractMapFeaturesFromFile = async function (file, owner) {
     let result = []
     // extract and convert features from each uncompressed KML file to GeoJSON format
     await Promise.all(kmlDom.map(async (data) => {
-        // convert to geoJSON
-        const kml = new DOMParser().parseFromString(await data);
-        const featuresArray = tj.kml(kml, {styles: false});
+        // convert to JSDOM
+        const dom = new JSDOM(await data);
+        // convert DOM to geoJSON
+        const featuresArray = tj.kml(dom.window.document, {styles: false});
         // extract features for given map object type
         const {metadata} = owner || {};
         const {type} = metadata || {};

From 697ebaa3e8be83cb28b121cacdcdde0079e89c87 Mon Sep 17 00:00:00 2001
From: Spencer Rose <spencerrose@uvic.ca>
Date: Wed, 20 Mar 2024 13:31:28 -0700
Subject: [PATCH 3/8] Help pages for Map Navitation features

---
 client/src/_components/content/editor.help.js | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/client/src/_components/content/editor.help.js b/client/src/_components/content/editor.help.js
index 34e7b788..45e46878 100644
--- a/client/src/_components/content/editor.help.js
+++ b/client/src/_components/content/editor.help.js
@@ -597,7 +597,6 @@ const explorerHelp = (gotoPage) => {
             </li>
         </ol></>;
 
-<<<<<<< HEAD
     const mapFeatures = <>
         <h4>Map Features</h4>
         <p>Explorer's map-based navigation tool (
@@ -733,8 +732,6 @@ const explorerHelp = (gotoPage) => {
         </table>
     </>;
 
-=======
->>>>>>> 514e5c35775bbdc3de8900ef34c2684ba0986616
     // index of editor help content
     return [
         {

From 183bbc82bad0a52de429d8a413a60bc64cfa222f Mon Sep 17 00:00:00 2001
From: Spencer Rose <spencerrose@uvic.ca>
Date: Sat, 3 Aug 2024 20:34:19 -0700
Subject: [PATCH 4/8] Updates to comparison slider for capture images.

---
 client/.gitignore                           |   2 +
 client/src/_components/common/comparator.js |  65 +----
 client/src/_components/common/icon.js       |   1 +
 client/src/_components/common/slider.js     | 253 +++++++++++++-------
 client/src/index.css                        |   4 +
 src/controllers/model.controller.js         |   3 +
 src/services/files.services.js              |   1 -
 src/services/import.services.js             |  72 +++---
 src/services/model.services.js              |   1 -
 9 files changed, 230 insertions(+), 172 deletions(-)

diff --git a/client/.gitignore b/client/.gitignore
index 4d29575d..fc81720f 100644
--- a/client/.gitignore
+++ b/client/.gitignore
@@ -21,3 +21,5 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+.vscode
\ No newline at end of file
diff --git a/client/src/_components/common/comparator.js b/client/src/_components/common/comparator.js
index 59cd8e9f..d37f7091 100644
--- a/client/src/_components/common/comparator.js
+++ b/client/src/_components/common/comparator.js
@@ -85,7 +85,6 @@ const Comparator = ({
     // selected slide state
     const [selectedIndex, setSelectedIndex] = React.useState(0);
     const [pairToggle, setPairToggle] = React.useState(false);
-    const [viewerType, setViewerType] = React.useState('overlay');
     const [expandImage, setExpandImage] = React.useState(false);
     const [panelWidth, setPanelWidth] = React.useState(0);
     const [panelHeight, setPanelHeight] = React.useState(0);
@@ -136,44 +135,16 @@ const Comparator = ({
         setSelectedIndex(nextIndex);
     };
 
-    const getViewer = function() {
-        const viewers = {
-            slider: () => {
-                return <Slider
-                    canvasWidth={panelWidth}
-                    canvasHeight={panelHeight}
-                    images={[historic_captures.refImage, modern_captures.refImage]}
-                />
-            },
-            default: () => {
-                return <>
-                    <div className={'slide'} style={{display: pairToggle ? 'block' : 'none'}}>
-                        <Image
-                            url={historic_captures.refImage.url || ''}
-                            scale={'medium'}
-                            width={'500px'}
-                        />
-                    </div>
-                    <div className={'slide'} style={{display: !pairToggle ? 'block' : 'none'}}>
-                        <Image
-                            url={modern_captures.refImage.url || ''}
-                            scale={'medium'}
-                            width={'500px'}
-                        />
-                    </div>
-                </>
-            }
-        }
-        return viewers.hasOwnProperty(viewerType) ? viewers[viewerType]() : viewers.default();
-    }
-
     return (
         <div className="comparator">
             <div ref={slidePanel} className={'slides'}>
-                { images.length > 0 ? getViewer() : <Loading /> }
+                { images.length > 0 ? <Slider
+                    images={[historic_captures.refImage, modern_captures.refImage]}
+                    toggle={pairToggle}
+                /> : <Loading /> }
                 <div className={'numbertext'}>{ selectedIndex + 1 }/{images.length}</div>
                 {
-                    expandable && viewerType === 'overlay' &&
+                    expandable &&
                     <div className={'expand-image'}><Button icon={'enlarge'} onClick={() => {
                         setExpandImage(true);
                     }}/></div>
@@ -184,36 +155,18 @@ const Comparator = ({
                     <ul>
                         <li><Button icon={'prev'} className={'prev'} onClick={prevPair} /></li>
                         <li><Button
-                            title={'View as Overlay'}
-                            className={'capture-button'}
-                            icon={'images'}
-                            disabled={viewerType === 'overlay'}
-                            onClick={()=>{setViewerType('overlay')}}
-                        /></li>
-                        <li><Button
-                            title={'View in Slider'}
-                            className={'capture-button'}
-                            icon={'overlay'}
-                            onClick={()=>{setViewerType('slider')}}
-                            disabled={viewerType === 'slider'}
-                        /></li>
-                        {
-                            viewerType === 'overlay' && <li><Button
                                 className={'capture-button'}
-                                icon={'sync'}
-                                onClick={() => {
-                                    setPairToggle(!pairToggle)
-                                }}
-                                label={pairToggle ? 'Historic' : 'Modern'}
+                                icon={'images'}
+                                onClick={() => setPairToggle(!pairToggle)}
+                                label={pairToggle ? 'Switch to Modern Capture' : 'Switch to Historic Capture'}
                             /></li>
-                        }
                         <li><Button
                             title={'View Capture Details'}
+                            label={label}
                             className={'capture-button'}
                             icon={pairToggle ? 'historic_captures' : 'modern_captures'}
                             onClick={()=>{router.update(link)}}
                         /></li>
-                        <li><a href={link}>{label}</a></li>
                         <li className={'push'}><Button icon={'next'} className={'next'} onClick={nextPair} /></li>
                     </ul>
                 </div>
diff --git a/client/src/_components/common/icon.js b/client/src/_components/common/icon.js
index ef2d597d..e028c00b 100644
--- a/client/src/_components/common/icon.js
+++ b/client/src/_components/common/icon.js
@@ -289,6 +289,7 @@ const getIconClass = (iconType) => {
         externalLink: 'external-link-square-alt',
         align: 'crosshairs',
         overlay: 'layer-group',
+        slider: 'columns',
         clustered: 'map-marker',
         boundaries: 'vector-square',
         filter: 'filter',
diff --git a/client/src/_components/common/slider.js b/client/src/_components/common/slider.js
index 5fedef27..41d86ed9 100644
--- a/client/src/_components/common/slider.js
+++ b/client/src/_components/common/slider.js
@@ -13,17 +13,19 @@
  * ---------
  * Revisions
  * - 14-07-2023   Redo of slider canvases.
+ * - 03-08-2024   Update slider to include image swap controls; centred view.
  */
 
-import React, {useLayoutEffect, useRef, useState} from 'react';
+import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { schema } from '../../schema';
 import Loading from './loading';
 import { UserMessage } from './message';
-import {scaleToFit} from '../alignment/tools/scaler.alignment';
+import { scaleToFit } from '../alignment/tools/scaler.alignment';
 import InputSelector from "../selectors/input.selector";
+import Button from './button';
 import Canvas from "../alignment/canvas/default.canvas.alignment";
 import styles from '../styles/slider.module.css';
-import {useWindowSize} from "../../_utils/events.utils.client";
+import { useWindowSize } from "../../_utils/events.utils.client";
 
 /**
  * Image slider component.
@@ -32,10 +34,11 @@ import {useWindowSize} from "../../_utils/events.utils.client";
  * @return
  */
 
-const Slider = ({ images = []}) => {
+const Slider = ({ images = [], toggle=false }) => {
 
-    const canvasWidth = 800;
-    const canvasHeight = 600;
+    // default canvas sizes
+    const DEFAULT_CANVAS_WIDTH = 900;
+    const DEFAULT_CANVAS_HEIGHT = 900;
 
     // window dimensions
     const [winWidth, winHeight] = useWindowSize();
@@ -43,9 +46,6 @@ const Slider = ({ images = []}) => {
     // input image data
     const [image1, image2] = images || [];
 
-    // mounted status
-    const _isMounted = React.useRef(false);
-
     // image data layers
     const renderLayer1 = useRef(null);
     const renderLayer2 = useRef(null);
@@ -58,12 +58,16 @@ const Slider = ({ images = []}) => {
     let slideWidth = 0;
     let slideInit = 0;
 
+    const [canvasWidth, setCanvasWidth] = React.useState(DEFAULT_CANVAS_WIDTH);
+    const [canvasHeight, setCanvasHeight] = React.useState(DEFAULT_CANVAS_HEIGHT);
+
     const [status1, setStatus1] = React.useState('empty');
     const [status2, setStatus2] = React.useState('empty');
     const [message, setMessage] = React.useState('empty');
 
     const [viewWidth, setViewWidth] = React.useState(0);
     const [viewDims, setViewDims] = React.useState(null);
+    const [viewSlider, setViewSlider] = React.useState(toggle);
 
     // Image labels
     const label1 = image1 && image1.hasOwnProperty('label') ? image1.label : 'Image 1';
@@ -73,13 +77,86 @@ const Slider = ({ images = []}) => {
     const [opacity, setOpacity] = useState(100);
 
 
+    /**
+     * Render image 1 data on canvas layer 1
+     *
+     * @private
+     */
+
+    const _drawImage1 = () => {
+
+        if (!imageLayer1.current) return;
+
+        // compute scaled dimensions for image 1 to fit view canvas
+        const viewDims1 = scaleToFit(
+            imageLayer1.current.width,
+            imageLayer1.current.height,
+            canvasWidth,
+            canvasHeight,
+        );
+
+        // compute image x offset
+        const viewOffset1 = (canvasWidth - viewDims1.w) / 2;
+
+        // render image to canvas
+        renderLayer1.current.draw(imageLayer1.current, {
+            view: { x: viewOffset1, y: 0, w: viewSlider && toggle ? viewDims1.w / 2 : viewDims1.w, h: viewDims1.h },
+            source: { x: 0, y: 0, w: viewSlider && toggle ? imageLayer1.current.width / 2 : imageLayer1.current.width, h: imageLayer1.current.height }
+        });
+
+        // set initial view dims
+        if (toggle) {
+            setCanvasWidth(viewDims1.w);
+            setCanvasHeight(viewDims1.h);
+            setViewWidth(viewSlider ? viewDims1.w / 2 : viewDims1.w);
+            setViewDims(viewDims1);
+        }
+    }
+
+    /**
+     * Render image 2 data on canvas layer 2
+     *
+     * @private
+     */
+
+    const _drawImage2 = () => {
+
+        if (!imageLayer2.current) return;
+
+        // compute scaled dimensions for image 2 to fit view canvas
+        const viewDims2 = scaleToFit(
+            imageLayer2.current.width,
+            imageLayer2.current.height,
+            canvasWidth,
+            canvasHeight,
+        );
+
+        // compute image x offset
+        const viewOffset2 = (canvasWidth - viewDims2.w) / 2;
+
+        // render image to canvas (toggle sets layer 1 as top layer)
+        renderLayer2.current.draw(imageLayer2.current, {
+            view: { x: viewOffset2, y: 0, w: viewSlider && !toggle ? viewDims2.w / 2 : viewDims2.w, h: viewDims2.h },
+            source: { x: 0, y: 0, w: viewSlider && !toggle ? imageLayer2.current.width / 2 : imageLayer2.current.width, h: imageLayer2.current.height }
+        });
+
+        // set initial view dims
+        if (!toggle) {
+            setCanvasWidth(viewDims2.w);
+            setCanvasHeight(viewDims2.h);
+            setViewWidth(viewSlider ? viewDims2.w / 2 : viewDims2.w);
+            setViewDims(viewDims2);
+        }
+    }
+
+
     /**
      * Load image data in comparator panel
      *
      * @private
      */
 
-    const load = () => {
+    const _load = () => {
 
         // status = image loading has started
         setStatus1('loading');
@@ -92,55 +169,29 @@ const Slider = ({ images = []}) => {
         imageLayer1.current.src = url1;
         imageLayer2.current.src = url2;
 
-        // load image 1 (overlay)
+        // load image 1
+        imageLayer1.current.onload = function () {
+            // load image data to canvas layer
+            _drawImage1();
+            // update load status
+            setStatus1('loaded');
+        };
         imageLayer1.current.onerror = () => {
             setMessage({ msg: 'Error: Image could not be loaded.', type: 'error' });
             imageLayer1.current.src = schema.errors.image.fallbackSrc;
         };
-        imageLayer1.current.onload = function() {
-
-            // compute scaled dimensions to fit view canvas
-            const viewDims1 = scaleToFit(imageLayer1.current.width, imageLayer1.current.height, canvasWidth, canvasHeight);
-
-            // load data into canvas layer
-            // - initially show half of top layer image
-            const initWidth = viewDims1.w / 2;
-            renderLayer1.current.draw(imageLayer1.current, {
-                view: {x: 0, y: 0, w: viewDims1.w / 2, h: viewDims1.h},
-                source: {x: 0, y: 0, w: imageLayer1.current.width / 2, h: imageLayer1.current.height}
-            });
-
-            // set initial view dims
-            setViewWidth(initWidth);
-            setViewDims(viewDims1);
 
+        // load image 2
+        imageLayer2.current.onload = function () {
+            // load image data to canvas layer
+            _drawImage2();
             // update load status
-            setStatus1('loaded');
-
+            setStatus2('loaded');
         };
-
-        // load image 2 (underlay)
         imageLayer2.current.onerror = () => {
             setMessage({ msg: 'Error: Image could not be loaded.', type: 'error' });
             imageLayer2.current.src = schema.errors.image.fallbackSrc;
         };
-        imageLayer2.current.onload = function() {
-            // compute scaled dimensions to fit view canvas
-            const viewDims2 = scaleToFit(
-                imageLayer2.current.width,
-                imageLayer2.current.height,
-                canvasWidth,
-                canvasHeight,
-            );
-
-            // load data into canvas layer
-            renderLayer2.current.draw(imageLayer2.current, {
-                view: {x: 0, y: 0, w: viewDims2.w, h: viewDims2.h},
-                source: {x: 0, y: 0, w: imageLayer2.current.width, h: imageLayer2.current.height}
-            });
-        };
-
-        setStatus2('loaded');
     }
 
     /**
@@ -154,7 +205,19 @@ const Slider = ({ images = []}) => {
         const { value = 100 } = target;
         setOpacity(value);
         // set canvas layer alpha value for opacity
-        renderLayer1.current.alpha( value / 100 );
+        toggle ? renderLayer1.current.alpha(value / 100) : renderLayer2.current.alpha(value / 100);
+    }
+
+    /**
+     * reset opacity on both layers
+     *
+     * @private
+     */
+
+    const _resetOpacity = () => {
+        setOpacity(100);
+        renderLayer1.current.alpha(100);
+        renderLayer2.current.alpha(100);
     }
 
     /**
@@ -165,20 +228,26 @@ const Slider = ({ images = []}) => {
      * @private
      */
 
-    useLayoutEffect(()=>{
+    useLayoutEffect(() => {
         if (status1 === 'empty' || status2 === 'empty') {
-            load();
+            _load();
         }
-        return ()=>{_isMounted.current = true;}
-
     }, []);
 
-    useLayoutEffect(()=>{
-        load();
-        return ()=>{_isMounted.current = true;}
-
+    useLayoutEffect(() => {
+        _load();
     }, [winWidth, winHeight]);
 
+    useEffect(() => {
+        setViewSlider(false);
+    }, [toggle]);
+
+    useLayoutEffect(() => {
+        _drawImage1();
+        _drawImage2();
+        _resetOpacity();
+    }, [viewSlider]);
+
     /* Initialize panel resize */
     function _resizeStart(e) {
         /* if slider is no longer engaged, exit this function: */
@@ -204,13 +273,21 @@ const Slider = ({ images = []}) => {
 
         // compute adjusted widths
         const _viewWidth = viewWidth - Math.round(slideInit - e.pageX);
-        const _imageWidth = Math.round(_viewWidth * ( imageLayer1.current.width / viewDims.w));
+        const _imageFullWidth = toggle ? imageLayer1.current.width : imageLayer2.current.width;
+        const _imageWidth = Math.round(_viewWidth * (_imageFullWidth / viewDims.w));
+        const _viewOffset = (canvasWidth - viewDims.w) / 2;
 
         // load data into canvas layer
         // - initially show half of top layer image
+        toggle ? 
         renderLayer1.current.draw(imageLayer1.current, {
-            view: {x: 0, y: 0, w: _viewWidth, h: viewDims.h},
-            source: {x: 0, y: 0, w: _imageWidth, h: imageLayer1.current.height}
+            view: { x: _viewOffset, y: 0, w: _viewWidth, h: viewDims.h },
+            source: { x: 0, y: 0, w: _imageWidth, h: imageLayer1.current.height }
+        }) 
+        :
+        renderLayer2.current.draw(imageLayer2.current, {
+            view: { x: _viewOffset, y: 0, w: _viewWidth, h: viewDims.h },
+            source: { x: 0, y: 0, w: _imageWidth, h: imageLayer2.current.height }
         });
 
         // set slide width
@@ -220,15 +297,16 @@ const Slider = ({ images = []}) => {
 
     return <>
         <div className={styles.slider}>
-            { ( status1 !== 'loaded' || status2 !== 'loaded' ) && <Loading className={'centered'} overlay={false}/> }
-            { message && <UserMessage message={message} /> }
-            <div className={styles.container} style={{height: canvasHeight, width: canvasWidth, margin: 'auto'}}>
+            {(status1 !== 'loaded' || status2 !== 'loaded') && <Loading className={'centered'} overlay={true} />}
+            {message && <UserMessage message={message} />}
+            <div className={styles.container} style={{ height: `${canvasHeight}px`, width: `${canvasWidth}px`, margin: 'auto' }}>
                 <Canvas
                     ref={controlLayer}
                     id={`slider_image_control`}
+                    style={{'zIndex': viewSlider ? 30 : 0}}
                     className={styles.overlay}
-                    width={canvasWidth}
-                    height={canvasHeight}
+                    width={DEFAULT_CANVAS_WIDTH}
+                    height={DEFAULT_CANVAS_HEIGHT}
                     onMouseDown={_resizeStart}
                     onTouchStart={_resizeStart}
                     onMouseUp={_resizeEnd}
@@ -237,18 +315,20 @@ const Slider = ({ images = []}) => {
                     onTouchMove={_resize}
                 />
                 <Canvas
+                    style={{'zIndex': toggle ? 20 : 10}}
                     className={styles.image1}
                     ref={renderLayer1}
                     id={`slider_image_layer_1`}
-                    width={canvasWidth}
-                    height={canvasHeight}
+                    width={DEFAULT_CANVAS_WIDTH}
+                    height={DEFAULT_CANVAS_HEIGHT}
                 />
                 <Canvas
+                    style={{'zIndex': toggle ? 10 : 20}}
                     className={styles.image2}
                     ref={renderLayer2}
                     id={`slider_image_layer_2`}
-                    width={canvasWidth}
-                    height={canvasHeight}
+                    width={DEFAULT_CANVAS_WIDTH}
+                    height={DEFAULT_CANVAS_HEIGHT}
                 />
                 <img
                     style={{ 'display': 'none' }}
@@ -265,17 +345,30 @@ const Slider = ({ images = []}) => {
                     alt={label2}
                 />
             </div>
-            <InputSelector
-                style={{width: '200px'}}
-                id={'layer_opacity'}
-                name={'layer_opacity'}
-                label={`Opacity ${opacity}%`}
-                type={'range'}
-                value={opacity}
-                min={0}
-                max={100}
-                onChange={_updateOpacity}
-            />
+            <div className={'slide-menu h-menu vcentered'}>
+                <ul>
+                    <li><Button
+                        title={'Compare Images using Slider'}
+                        label={viewSlider ? 'Slider On' : 'Slider Off'}
+                        className={`capture-button ${viewSlider && 'active'}`}
+                        icon={'slider'}
+                        onClick={() => {setViewSlider(!viewSlider)}}
+                    /></li>
+                    <li className={'push'}>
+                        <InputSelector
+                            style={{ width: '200px' }}
+                            id={'layer_opacity'}
+                            name={'layer_opacity'}
+                            label={`Opacity ${opacity}%`}
+                            type={'range'}
+                            value={opacity}
+                            min={0}
+                            max={100}
+                            onChange={_updateOpacity} />
+                    </li>
+                </ul>
+            </div>
+
         </div>
     </>;
 
diff --git a/client/src/index.css b/client/src/index.css
index 5b129a22..8c2d01fd 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -1079,6 +1079,10 @@ nav.breadcrumb ul li a:hover {
     background-color: #444444;
     color: #EEEEEE;
 }
+.capture-button.active {
+    background-color: coral;
+    color: #EEEEEE;
+}
 .comparator .prev,
 .comparator .next,
 .carousel .prev,
diff --git a/src/controllers/model.controller.js b/src/controllers/model.controller.js
index 2449dcb2..ebb38e62 100644
--- a/src/controllers/model.controller.js
+++ b/src/controllers/model.controller.js
@@ -217,6 +217,9 @@ export default function ModelController(nodeType) {
             // - collates metadata
             const importData = await importer.receive(req, owner_id, type);
 
+
+    console.log(importData)
+
             // check if files are present
             const hasFiles = Object.keys(importData.files).length > 0;
 
diff --git a/src/services/files.services.js b/src/services/files.services.js
index 51744358..a4487475 100644
--- a/src/services/files.services.js
+++ b/src/services/files.services.js
@@ -637,7 +637,6 @@ export const compress = async (files={}, version) => {
 export const getFilePath = (file, version='medium' ) => {
 
     const { fs_path = '', secure_token = '', file_type='' } = file || {};
-    console.log(file, '****')
     const lowResPath = process.env.LOWRES_PATH;
     const defaultPath = process.env.UPLOAD_DIR;
 
diff --git a/src/services/import.services.js b/src/services/import.services.js
index 5cb7b030..955f7c66 100644
--- a/src/services/import.services.js
+++ b/src/services/import.services.js
@@ -50,37 +50,6 @@ export const receive = (req, owner_id=null, owner_type=null) => {
         // close request pipeline
         req.on('close', cleanup);
 
-        // initialize busboy
-        busboy
-            .on('field', onField.bind(null, metadata.data))
-            .on('file', onFile.bind(null, filePromises, metadata, onError))
-            .on('error', onError)
-            .on('end', onEnd)
-            .on('finish', onEnd);
-
-        busboy.on('partsLimit', function() {
-            const err = new Error('Reach parts limit');
-            err.code = 'Request_parts_limit';
-            err.status = 413;
-            onError(err);
-        });
-
-        busboy.on('filesLimit', () => {
-            const err = new Error('Reach files limit');
-            err.code = 'Request_files_limit';
-            err.status = 413;
-            onError(err);
-        });
-
-        busboy.on('fieldsLimit', () => {
-            const err = new Error('Reach fields limit');
-            err.code = 'Request_fields_limit';
-            err.status = 413;
-            onError(err);
-        });
-
-        req.pipe(busboy);
-
         function onError(err) {
             console.error(err);
             cleanup();
@@ -92,6 +61,7 @@ export const receive = (req, owner_id=null, owner_type=null) => {
                 console.error(err);
                 return reject(err);
             }
+            
             Promise.all(filePromises)
                 .then(() => {
                     cleanup();
@@ -105,14 +75,46 @@ export const receive = (req, owner_id=null, owner_type=null) => {
         function cleanup() {
             busboy.removeListener('field', onField);
             busboy.removeListener('file', onFile);
-            busboy.removeListener('close', cleanup);
+            busboy.removeListener('close', onEnd);
             busboy.removeListener('end', cleanup);
             busboy.removeListener('error', onEnd);
             busboy.removeListener('partsLimit', onEnd);
             busboy.removeListener('filesLimit', onEnd);
             busboy.removeListener('fieldsLimit', onEnd);
-            busboy.removeListener('finish', onEnd);
         }
+
+
+        // initialize busboy
+        busboy
+            .on('field', onField.bind(null, metadata.data))
+            .on('file', onFile.bind(null, filePromises, metadata, onError))
+            .on('error', onError)
+            .on('end', onEnd)
+            .on('close', onEnd);
+
+        busboy.on('partsLimit', function() {
+            const err = new Error('Reach parts limit');
+            err.code = 'Request_parts_limit';
+            err.status = 413;
+            onError(err);
+        });
+
+        busboy.on('filesLimit', () => {
+            const err = new Error('Reach files limit');
+            err.code = 'Request_files_limit';
+            err.status = 413;
+            onError(err);
+        });
+
+        busboy.on('fieldsLimit', () => {
+            const err = new Error('Reach fields limit');
+            err.code = 'Request_fields_limit';
+            err.status = 413;
+            onError(err);
+        });
+
+        req.pipe(busboy);
+
     });
 }
 
@@ -131,6 +133,7 @@ export const receive = (req, owner_id=null, owner_type=null) => {
  */
 
 export const onFile = (filePromises, metadata, onError, fieldname, file, filename, encoding, mimetype) => {
+    console.log(filename)
 
     // reject file upload empty of files
     if (!filename) {
@@ -183,8 +186,9 @@ export const onFile = (filePromises, metadata, onError, fieldname, file, filenam
         .on('open', () => file
             .pipe(writeStream)
             .on('error', reject)
-            .on('finish', () => {
+            .on('close', () => {
                 // attach file data to global metadata
+                console.log(index, fileIndex)
                 // - for multiple files on same type, use key index (e.g. 'file_type[2]')
                 // - for multiple files on different type, use file index
                 if (index)
diff --git a/src/services/model.services.js b/src/services/model.services.js
index 3cddc641..9a731e29 100644
--- a/src/services/model.services.js
+++ b/src/services/model.services.js
@@ -220,7 +220,6 @@ export default function ModelServices(model) {
             // [3] process model data query (if provided)
             if (stmts.model) {
                 const { sql, data } = stmts.model(item);
-                console.log(sql)
                 res = await client.query(sql, data);
             }
 

From 9b6562169aa1ee834c6675b641ff984b7e25de4a Mon Sep 17 00:00:00 2001
From: Spencer Rose <spencerrose@uvic.ca>
Date: Sat, 3 Aug 2024 20:34:19 -0700
Subject: [PATCH 5/8] Updates to comparison slider for capture images.

---
 client/.gitignore                           |   2 +
 client/src/_components/common/comparator.js |  65 +----
 client/src/_components/common/icon.js       |   1 +
 client/src/_components/common/slider.js     | 253 +++++++++++++-------
 client/src/index.css                        |   4 +
 src/controllers/model.controller.js         |   3 +
 src/services/files.services.js              |   1 -
 src/services/import.services.js             |  72 +++---
 src/services/model.services.js              |   1 -
 9 files changed, 230 insertions(+), 172 deletions(-)

diff --git a/client/.gitignore b/client/.gitignore
index 4d29575d..fc81720f 100644
--- a/client/.gitignore
+++ b/client/.gitignore
@@ -21,3 +21,5 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+.vscode
\ No newline at end of file
diff --git a/client/src/_components/common/comparator.js b/client/src/_components/common/comparator.js
index 59cd8e9f..d37f7091 100644
--- a/client/src/_components/common/comparator.js
+++ b/client/src/_components/common/comparator.js
@@ -85,7 +85,6 @@ const Comparator = ({
     // selected slide state
     const [selectedIndex, setSelectedIndex] = React.useState(0);
     const [pairToggle, setPairToggle] = React.useState(false);
-    const [viewerType, setViewerType] = React.useState('overlay');
     const [expandImage, setExpandImage] = React.useState(false);
     const [panelWidth, setPanelWidth] = React.useState(0);
     const [panelHeight, setPanelHeight] = React.useState(0);
@@ -136,44 +135,16 @@ const Comparator = ({
         setSelectedIndex(nextIndex);
     };
 
-    const getViewer = function() {
-        const viewers = {
-            slider: () => {
-                return <Slider
-                    canvasWidth={panelWidth}
-                    canvasHeight={panelHeight}
-                    images={[historic_captures.refImage, modern_captures.refImage]}
-                />
-            },
-            default: () => {
-                return <>
-                    <div className={'slide'} style={{display: pairToggle ? 'block' : 'none'}}>
-                        <Image
-                            url={historic_captures.refImage.url || ''}
-                            scale={'medium'}
-                            width={'500px'}
-                        />
-                    </div>
-                    <div className={'slide'} style={{display: !pairToggle ? 'block' : 'none'}}>
-                        <Image
-                            url={modern_captures.refImage.url || ''}
-                            scale={'medium'}
-                            width={'500px'}
-                        />
-                    </div>
-                </>
-            }
-        }
-        return viewers.hasOwnProperty(viewerType) ? viewers[viewerType]() : viewers.default();
-    }
-
     return (
         <div className="comparator">
             <div ref={slidePanel} className={'slides'}>
-                { images.length > 0 ? getViewer() : <Loading /> }
+                { images.length > 0 ? <Slider
+                    images={[historic_captures.refImage, modern_captures.refImage]}
+                    toggle={pairToggle}
+                /> : <Loading /> }
                 <div className={'numbertext'}>{ selectedIndex + 1 }/{images.length}</div>
                 {
-                    expandable && viewerType === 'overlay' &&
+                    expandable &&
                     <div className={'expand-image'}><Button icon={'enlarge'} onClick={() => {
                         setExpandImage(true);
                     }}/></div>
@@ -184,36 +155,18 @@ const Comparator = ({
                     <ul>
                         <li><Button icon={'prev'} className={'prev'} onClick={prevPair} /></li>
                         <li><Button
-                            title={'View as Overlay'}
-                            className={'capture-button'}
-                            icon={'images'}
-                            disabled={viewerType === 'overlay'}
-                            onClick={()=>{setViewerType('overlay')}}
-                        /></li>
-                        <li><Button
-                            title={'View in Slider'}
-                            className={'capture-button'}
-                            icon={'overlay'}
-                            onClick={()=>{setViewerType('slider')}}
-                            disabled={viewerType === 'slider'}
-                        /></li>
-                        {
-                            viewerType === 'overlay' && <li><Button
                                 className={'capture-button'}
-                                icon={'sync'}
-                                onClick={() => {
-                                    setPairToggle(!pairToggle)
-                                }}
-                                label={pairToggle ? 'Historic' : 'Modern'}
+                                icon={'images'}
+                                onClick={() => setPairToggle(!pairToggle)}
+                                label={pairToggle ? 'Switch to Modern Capture' : 'Switch to Historic Capture'}
                             /></li>
-                        }
                         <li><Button
                             title={'View Capture Details'}
+                            label={label}
                             className={'capture-button'}
                             icon={pairToggle ? 'historic_captures' : 'modern_captures'}
                             onClick={()=>{router.update(link)}}
                         /></li>
-                        <li><a href={link}>{label}</a></li>
                         <li className={'push'}><Button icon={'next'} className={'next'} onClick={nextPair} /></li>
                     </ul>
                 </div>
diff --git a/client/src/_components/common/icon.js b/client/src/_components/common/icon.js
index ef2d597d..e028c00b 100644
--- a/client/src/_components/common/icon.js
+++ b/client/src/_components/common/icon.js
@@ -289,6 +289,7 @@ const getIconClass = (iconType) => {
         externalLink: 'external-link-square-alt',
         align: 'crosshairs',
         overlay: 'layer-group',
+        slider: 'columns',
         clustered: 'map-marker',
         boundaries: 'vector-square',
         filter: 'filter',
diff --git a/client/src/_components/common/slider.js b/client/src/_components/common/slider.js
index 5fedef27..41d86ed9 100644
--- a/client/src/_components/common/slider.js
+++ b/client/src/_components/common/slider.js
@@ -13,17 +13,19 @@
  * ---------
  * Revisions
  * - 14-07-2023   Redo of slider canvases.
+ * - 03-08-2024   Update slider to include image swap controls; centred view.
  */
 
-import React, {useLayoutEffect, useRef, useState} from 'react';
+import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { schema } from '../../schema';
 import Loading from './loading';
 import { UserMessage } from './message';
-import {scaleToFit} from '../alignment/tools/scaler.alignment';
+import { scaleToFit } from '../alignment/tools/scaler.alignment';
 import InputSelector from "../selectors/input.selector";
+import Button from './button';
 import Canvas from "../alignment/canvas/default.canvas.alignment";
 import styles from '../styles/slider.module.css';
-import {useWindowSize} from "../../_utils/events.utils.client";
+import { useWindowSize } from "../../_utils/events.utils.client";
 
 /**
  * Image slider component.
@@ -32,10 +34,11 @@ import {useWindowSize} from "../../_utils/events.utils.client";
  * @return
  */
 
-const Slider = ({ images = []}) => {
+const Slider = ({ images = [], toggle=false }) => {
 
-    const canvasWidth = 800;
-    const canvasHeight = 600;
+    // default canvas sizes
+    const DEFAULT_CANVAS_WIDTH = 900;
+    const DEFAULT_CANVAS_HEIGHT = 900;
 
     // window dimensions
     const [winWidth, winHeight] = useWindowSize();
@@ -43,9 +46,6 @@ const Slider = ({ images = []}) => {
     // input image data
     const [image1, image2] = images || [];
 
-    // mounted status
-    const _isMounted = React.useRef(false);
-
     // image data layers
     const renderLayer1 = useRef(null);
     const renderLayer2 = useRef(null);
@@ -58,12 +58,16 @@ const Slider = ({ images = []}) => {
     let slideWidth = 0;
     let slideInit = 0;
 
+    const [canvasWidth, setCanvasWidth] = React.useState(DEFAULT_CANVAS_WIDTH);
+    const [canvasHeight, setCanvasHeight] = React.useState(DEFAULT_CANVAS_HEIGHT);
+
     const [status1, setStatus1] = React.useState('empty');
     const [status2, setStatus2] = React.useState('empty');
     const [message, setMessage] = React.useState('empty');
 
     const [viewWidth, setViewWidth] = React.useState(0);
     const [viewDims, setViewDims] = React.useState(null);
+    const [viewSlider, setViewSlider] = React.useState(toggle);
 
     // Image labels
     const label1 = image1 && image1.hasOwnProperty('label') ? image1.label : 'Image 1';
@@ -73,13 +77,86 @@ const Slider = ({ images = []}) => {
     const [opacity, setOpacity] = useState(100);
 
 
+    /**
+     * Render image 1 data on canvas layer 1
+     *
+     * @private
+     */
+
+    const _drawImage1 = () => {
+
+        if (!imageLayer1.current) return;
+
+        // compute scaled dimensions for image 1 to fit view canvas
+        const viewDims1 = scaleToFit(
+            imageLayer1.current.width,
+            imageLayer1.current.height,
+            canvasWidth,
+            canvasHeight,
+        );
+
+        // compute image x offset
+        const viewOffset1 = (canvasWidth - viewDims1.w) / 2;
+
+        // render image to canvas
+        renderLayer1.current.draw(imageLayer1.current, {
+            view: { x: viewOffset1, y: 0, w: viewSlider && toggle ? viewDims1.w / 2 : viewDims1.w, h: viewDims1.h },
+            source: { x: 0, y: 0, w: viewSlider && toggle ? imageLayer1.current.width / 2 : imageLayer1.current.width, h: imageLayer1.current.height }
+        });
+
+        // set initial view dims
+        if (toggle) {
+            setCanvasWidth(viewDims1.w);
+            setCanvasHeight(viewDims1.h);
+            setViewWidth(viewSlider ? viewDims1.w / 2 : viewDims1.w);
+            setViewDims(viewDims1);
+        }
+    }
+
+    /**
+     * Render image 2 data on canvas layer 2
+     *
+     * @private
+     */
+
+    const _drawImage2 = () => {
+
+        if (!imageLayer2.current) return;
+
+        // compute scaled dimensions for image 2 to fit view canvas
+        const viewDims2 = scaleToFit(
+            imageLayer2.current.width,
+            imageLayer2.current.height,
+            canvasWidth,
+            canvasHeight,
+        );
+
+        // compute image x offset
+        const viewOffset2 = (canvasWidth - viewDims2.w) / 2;
+
+        // render image to canvas (toggle sets layer 1 as top layer)
+        renderLayer2.current.draw(imageLayer2.current, {
+            view: { x: viewOffset2, y: 0, w: viewSlider && !toggle ? viewDims2.w / 2 : viewDims2.w, h: viewDims2.h },
+            source: { x: 0, y: 0, w: viewSlider && !toggle ? imageLayer2.current.width / 2 : imageLayer2.current.width, h: imageLayer2.current.height }
+        });
+
+        // set initial view dims
+        if (!toggle) {
+            setCanvasWidth(viewDims2.w);
+            setCanvasHeight(viewDims2.h);
+            setViewWidth(viewSlider ? viewDims2.w / 2 : viewDims2.w);
+            setViewDims(viewDims2);
+        }
+    }
+
+
     /**
      * Load image data in comparator panel
      *
      * @private
      */
 
-    const load = () => {
+    const _load = () => {
 
         // status = image loading has started
         setStatus1('loading');
@@ -92,55 +169,29 @@ const Slider = ({ images = []}) => {
         imageLayer1.current.src = url1;
         imageLayer2.current.src = url2;
 
-        // load image 1 (overlay)
+        // load image 1
+        imageLayer1.current.onload = function () {
+            // load image data to canvas layer
+            _drawImage1();
+            // update load status
+            setStatus1('loaded');
+        };
         imageLayer1.current.onerror = () => {
             setMessage({ msg: 'Error: Image could not be loaded.', type: 'error' });
             imageLayer1.current.src = schema.errors.image.fallbackSrc;
         };
-        imageLayer1.current.onload = function() {
-
-            // compute scaled dimensions to fit view canvas
-            const viewDims1 = scaleToFit(imageLayer1.current.width, imageLayer1.current.height, canvasWidth, canvasHeight);
-
-            // load data into canvas layer
-            // - initially show half of top layer image
-            const initWidth = viewDims1.w / 2;
-            renderLayer1.current.draw(imageLayer1.current, {
-                view: {x: 0, y: 0, w: viewDims1.w / 2, h: viewDims1.h},
-                source: {x: 0, y: 0, w: imageLayer1.current.width / 2, h: imageLayer1.current.height}
-            });
-
-            // set initial view dims
-            setViewWidth(initWidth);
-            setViewDims(viewDims1);
 
+        // load image 2
+        imageLayer2.current.onload = function () {
+            // load image data to canvas layer
+            _drawImage2();
             // update load status
-            setStatus1('loaded');
-
+            setStatus2('loaded');
         };
-
-        // load image 2 (underlay)
         imageLayer2.current.onerror = () => {
             setMessage({ msg: 'Error: Image could not be loaded.', type: 'error' });
             imageLayer2.current.src = schema.errors.image.fallbackSrc;
         };
-        imageLayer2.current.onload = function() {
-            // compute scaled dimensions to fit view canvas
-            const viewDims2 = scaleToFit(
-                imageLayer2.current.width,
-                imageLayer2.current.height,
-                canvasWidth,
-                canvasHeight,
-            );
-
-            // load data into canvas layer
-            renderLayer2.current.draw(imageLayer2.current, {
-                view: {x: 0, y: 0, w: viewDims2.w, h: viewDims2.h},
-                source: {x: 0, y: 0, w: imageLayer2.current.width, h: imageLayer2.current.height}
-            });
-        };
-
-        setStatus2('loaded');
     }
 
     /**
@@ -154,7 +205,19 @@ const Slider = ({ images = []}) => {
         const { value = 100 } = target;
         setOpacity(value);
         // set canvas layer alpha value for opacity
-        renderLayer1.current.alpha( value / 100 );
+        toggle ? renderLayer1.current.alpha(value / 100) : renderLayer2.current.alpha(value / 100);
+    }
+
+    /**
+     * reset opacity on both layers
+     *
+     * @private
+     */
+
+    const _resetOpacity = () => {
+        setOpacity(100);
+        renderLayer1.current.alpha(100);
+        renderLayer2.current.alpha(100);
     }
 
     /**
@@ -165,20 +228,26 @@ const Slider = ({ images = []}) => {
      * @private
      */
 
-    useLayoutEffect(()=>{
+    useLayoutEffect(() => {
         if (status1 === 'empty' || status2 === 'empty') {
-            load();
+            _load();
         }
-        return ()=>{_isMounted.current = true;}
-
     }, []);
 
-    useLayoutEffect(()=>{
-        load();
-        return ()=>{_isMounted.current = true;}
-
+    useLayoutEffect(() => {
+        _load();
     }, [winWidth, winHeight]);
 
+    useEffect(() => {
+        setViewSlider(false);
+    }, [toggle]);
+
+    useLayoutEffect(() => {
+        _drawImage1();
+        _drawImage2();
+        _resetOpacity();
+    }, [viewSlider]);
+
     /* Initialize panel resize */
     function _resizeStart(e) {
         /* if slider is no longer engaged, exit this function: */
@@ -204,13 +273,21 @@ const Slider = ({ images = []}) => {
 
         // compute adjusted widths
         const _viewWidth = viewWidth - Math.round(slideInit - e.pageX);
-        const _imageWidth = Math.round(_viewWidth * ( imageLayer1.current.width / viewDims.w));
+        const _imageFullWidth = toggle ? imageLayer1.current.width : imageLayer2.current.width;
+        const _imageWidth = Math.round(_viewWidth * (_imageFullWidth / viewDims.w));
+        const _viewOffset = (canvasWidth - viewDims.w) / 2;
 
         // load data into canvas layer
         // - initially show half of top layer image
+        toggle ? 
         renderLayer1.current.draw(imageLayer1.current, {
-            view: {x: 0, y: 0, w: _viewWidth, h: viewDims.h},
-            source: {x: 0, y: 0, w: _imageWidth, h: imageLayer1.current.height}
+            view: { x: _viewOffset, y: 0, w: _viewWidth, h: viewDims.h },
+            source: { x: 0, y: 0, w: _imageWidth, h: imageLayer1.current.height }
+        }) 
+        :
+        renderLayer2.current.draw(imageLayer2.current, {
+            view: { x: _viewOffset, y: 0, w: _viewWidth, h: viewDims.h },
+            source: { x: 0, y: 0, w: _imageWidth, h: imageLayer2.current.height }
         });
 
         // set slide width
@@ -220,15 +297,16 @@ const Slider = ({ images = []}) => {
 
     return <>
         <div className={styles.slider}>
-            { ( status1 !== 'loaded' || status2 !== 'loaded' ) && <Loading className={'centered'} overlay={false}/> }
-            { message && <UserMessage message={message} /> }
-            <div className={styles.container} style={{height: canvasHeight, width: canvasWidth, margin: 'auto'}}>
+            {(status1 !== 'loaded' || status2 !== 'loaded') && <Loading className={'centered'} overlay={true} />}
+            {message && <UserMessage message={message} />}
+            <div className={styles.container} style={{ height: `${canvasHeight}px`, width: `${canvasWidth}px`, margin: 'auto' }}>
                 <Canvas
                     ref={controlLayer}
                     id={`slider_image_control`}
+                    style={{'zIndex': viewSlider ? 30 : 0}}
                     className={styles.overlay}
-                    width={canvasWidth}
-                    height={canvasHeight}
+                    width={DEFAULT_CANVAS_WIDTH}
+                    height={DEFAULT_CANVAS_HEIGHT}
                     onMouseDown={_resizeStart}
                     onTouchStart={_resizeStart}
                     onMouseUp={_resizeEnd}
@@ -237,18 +315,20 @@ const Slider = ({ images = []}) => {
                     onTouchMove={_resize}
                 />
                 <Canvas
+                    style={{'zIndex': toggle ? 20 : 10}}
                     className={styles.image1}
                     ref={renderLayer1}
                     id={`slider_image_layer_1`}
-                    width={canvasWidth}
-                    height={canvasHeight}
+                    width={DEFAULT_CANVAS_WIDTH}
+                    height={DEFAULT_CANVAS_HEIGHT}
                 />
                 <Canvas
+                    style={{'zIndex': toggle ? 10 : 20}}
                     className={styles.image2}
                     ref={renderLayer2}
                     id={`slider_image_layer_2`}
-                    width={canvasWidth}
-                    height={canvasHeight}
+                    width={DEFAULT_CANVAS_WIDTH}
+                    height={DEFAULT_CANVAS_HEIGHT}
                 />
                 <img
                     style={{ 'display': 'none' }}
@@ -265,17 +345,30 @@ const Slider = ({ images = []}) => {
                     alt={label2}
                 />
             </div>
-            <InputSelector
-                style={{width: '200px'}}
-                id={'layer_opacity'}
-                name={'layer_opacity'}
-                label={`Opacity ${opacity}%`}
-                type={'range'}
-                value={opacity}
-                min={0}
-                max={100}
-                onChange={_updateOpacity}
-            />
+            <div className={'slide-menu h-menu vcentered'}>
+                <ul>
+                    <li><Button
+                        title={'Compare Images using Slider'}
+                        label={viewSlider ? 'Slider On' : 'Slider Off'}
+                        className={`capture-button ${viewSlider && 'active'}`}
+                        icon={'slider'}
+                        onClick={() => {setViewSlider(!viewSlider)}}
+                    /></li>
+                    <li className={'push'}>
+                        <InputSelector
+                            style={{ width: '200px' }}
+                            id={'layer_opacity'}
+                            name={'layer_opacity'}
+                            label={`Opacity ${opacity}%`}
+                            type={'range'}
+                            value={opacity}
+                            min={0}
+                            max={100}
+                            onChange={_updateOpacity} />
+                    </li>
+                </ul>
+            </div>
+
         </div>
     </>;
 
diff --git a/client/src/index.css b/client/src/index.css
index 5b129a22..8c2d01fd 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -1079,6 +1079,10 @@ nav.breadcrumb ul li a:hover {
     background-color: #444444;
     color: #EEEEEE;
 }
+.capture-button.active {
+    background-color: coral;
+    color: #EEEEEE;
+}
 .comparator .prev,
 .comparator .next,
 .carousel .prev,
diff --git a/src/controllers/model.controller.js b/src/controllers/model.controller.js
index 2449dcb2..ebb38e62 100644
--- a/src/controllers/model.controller.js
+++ b/src/controllers/model.controller.js
@@ -217,6 +217,9 @@ export default function ModelController(nodeType) {
             // - collates metadata
             const importData = await importer.receive(req, owner_id, type);
 
+
+    console.log(importData)
+
             // check if files are present
             const hasFiles = Object.keys(importData.files).length > 0;
 
diff --git a/src/services/files.services.js b/src/services/files.services.js
index 51744358..a4487475 100644
--- a/src/services/files.services.js
+++ b/src/services/files.services.js
@@ -637,7 +637,6 @@ export const compress = async (files={}, version) => {
 export const getFilePath = (file, version='medium' ) => {
 
     const { fs_path = '', secure_token = '', file_type='' } = file || {};
-    console.log(file, '****')
     const lowResPath = process.env.LOWRES_PATH;
     const defaultPath = process.env.UPLOAD_DIR;
 
diff --git a/src/services/import.services.js b/src/services/import.services.js
index 5cb7b030..955f7c66 100644
--- a/src/services/import.services.js
+++ b/src/services/import.services.js
@@ -50,37 +50,6 @@ export const receive = (req, owner_id=null, owner_type=null) => {
         // close request pipeline
         req.on('close', cleanup);
 
-        // initialize busboy
-        busboy
-            .on('field', onField.bind(null, metadata.data))
-            .on('file', onFile.bind(null, filePromises, metadata, onError))
-            .on('error', onError)
-            .on('end', onEnd)
-            .on('finish', onEnd);
-
-        busboy.on('partsLimit', function() {
-            const err = new Error('Reach parts limit');
-            err.code = 'Request_parts_limit';
-            err.status = 413;
-            onError(err);
-        });
-
-        busboy.on('filesLimit', () => {
-            const err = new Error('Reach files limit');
-            err.code = 'Request_files_limit';
-            err.status = 413;
-            onError(err);
-        });
-
-        busboy.on('fieldsLimit', () => {
-            const err = new Error('Reach fields limit');
-            err.code = 'Request_fields_limit';
-            err.status = 413;
-            onError(err);
-        });
-
-        req.pipe(busboy);
-
         function onError(err) {
             console.error(err);
             cleanup();
@@ -92,6 +61,7 @@ export const receive = (req, owner_id=null, owner_type=null) => {
                 console.error(err);
                 return reject(err);
             }
+            
             Promise.all(filePromises)
                 .then(() => {
                     cleanup();
@@ -105,14 +75,46 @@ export const receive = (req, owner_id=null, owner_type=null) => {
         function cleanup() {
             busboy.removeListener('field', onField);
             busboy.removeListener('file', onFile);
-            busboy.removeListener('close', cleanup);
+            busboy.removeListener('close', onEnd);
             busboy.removeListener('end', cleanup);
             busboy.removeListener('error', onEnd);
             busboy.removeListener('partsLimit', onEnd);
             busboy.removeListener('filesLimit', onEnd);
             busboy.removeListener('fieldsLimit', onEnd);
-            busboy.removeListener('finish', onEnd);
         }
+
+
+        // initialize busboy
+        busboy
+            .on('field', onField.bind(null, metadata.data))
+            .on('file', onFile.bind(null, filePromises, metadata, onError))
+            .on('error', onError)
+            .on('end', onEnd)
+            .on('close', onEnd);
+
+        busboy.on('partsLimit', function() {
+            const err = new Error('Reach parts limit');
+            err.code = 'Request_parts_limit';
+            err.status = 413;
+            onError(err);
+        });
+
+        busboy.on('filesLimit', () => {
+            const err = new Error('Reach files limit');
+            err.code = 'Request_files_limit';
+            err.status = 413;
+            onError(err);
+        });
+
+        busboy.on('fieldsLimit', () => {
+            const err = new Error('Reach fields limit');
+            err.code = 'Request_fields_limit';
+            err.status = 413;
+            onError(err);
+        });
+
+        req.pipe(busboy);
+
     });
 }
 
@@ -131,6 +133,7 @@ export const receive = (req, owner_id=null, owner_type=null) => {
  */
 
 export const onFile = (filePromises, metadata, onError, fieldname, file, filename, encoding, mimetype) => {
+    console.log(filename)
 
     // reject file upload empty of files
     if (!filename) {
@@ -183,8 +186,9 @@ export const onFile = (filePromises, metadata, onError, fieldname, file, filenam
         .on('open', () => file
             .pipe(writeStream)
             .on('error', reject)
-            .on('finish', () => {
+            .on('close', () => {
                 // attach file data to global metadata
+                console.log(index, fileIndex)
                 // - for multiple files on same type, use key index (e.g. 'file_type[2]')
                 // - for multiple files on different type, use file index
                 if (index)
diff --git a/src/services/model.services.js b/src/services/model.services.js
index 3cddc641..9a731e29 100644
--- a/src/services/model.services.js
+++ b/src/services/model.services.js
@@ -220,7 +220,6 @@ export default function ModelServices(model) {
             // [3] process model data query (if provided)
             if (stmts.model) {
                 const { sql, data } = stmts.model(item);
-                console.log(sql)
                 res = await client.query(sql, data);
             }
 

From 56a592aba0152d1a81ffdd6b26d3cd9f6f4cdfac Mon Sep 17 00:00:00 2001
From: Spencer Rose <spencerrose@uvic.ca>
Date: Sun, 18 Aug 2024 14:26:48 -0700
Subject: [PATCH 6/8] Updates to slider viewer for comparisons.

---
 .../canvas/default.canvas.alignment.js        |  10 +-
 .../canvas/magnifier.canvas.alignment.js      |   2 +-
 .../alignment/tools/pointer.alignment.js      |   8 +-
 .../alignment/tools/scaler.alignment.js       |  10 +-
 client/src/_components/common/comparator.js   | 123 +++---
 client/src/_components/common/icon.js         |   3 +-
 client/src/_components/common/slider.js       | 401 +++++++++++++++---
 .../src/_components/styles/slider.module.css  |   6 +-
 8 files changed, 425 insertions(+), 138 deletions(-)

diff --git a/client/src/_components/alignment/canvas/default.canvas.alignment.js b/client/src/_components/alignment/canvas/default.canvas.alignment.js
index 49c5bd34..cca3aea1 100644
--- a/client/src/_components/alignment/canvas/default.canvas.alignment.js
+++ b/client/src/_components/alignment/canvas/default.canvas.alignment.js
@@ -71,7 +71,7 @@ const Canvas = forwardRef(function Canvas(props, ref) {
                 // put image to canvas
                 context.putImageData(imageData, x || 0, y || 0, 0, 0, w || imageData.width, h || imageData.height);
             },
-            draw: (image, dims) => {
+            draw: (image, dims, clear=true) => {
 
                 /**
                  * Redraws image data to canvas
@@ -96,7 +96,7 @@ const Canvas = forwardRef(function Canvas(props, ref) {
 
                 // clear, resize and render image data to canvas
                 const {source, view} = dims || {};
-                context.clearRect(0, 0, canvasRef.current.width, canvasRef.current.height);
+                if (clear) context.clearRect(0, 0, canvasRef.current.width, canvasRef.current.height);
                 // set canvas dimensions
                 // canvasRef.current.width = view && view.w || canvasRef.current.width;
                 // canvasRef.current.height = view && view.h || canvasRef.current.height;
@@ -125,6 +125,12 @@ const Canvas = forwardRef(function Canvas(props, ref) {
             dims: () => {
                 return {w: canvasRef.current.width, h: canvasRef.current.height};
             },
+            setWidth: (value) => {
+                canvasRef.current.width = value;
+            },
+            setHeight: (value) => {
+                canvasRef.current.height = value;
+            },
             bounds: () => {
                 const rect = canvasRef.current.getBoundingClientRect();
                 return {
diff --git a/client/src/_components/alignment/canvas/magnifier.canvas.alignment.js b/client/src/_components/alignment/canvas/magnifier.canvas.alignment.js
index 8aefee27..fe4d25bd 100644
--- a/client/src/_components/alignment/canvas/magnifier.canvas.alignment.js
+++ b/client/src/_components/alignment/canvas/magnifier.canvas.alignment.js
@@ -82,7 +82,6 @@ const MagnifierTool = forwardRef(function Canvas(props, ref) {
                     panel.properties.render_dims
                 );
 
-                // const sourcePt = scalePoint(pos, panel.properties.magnified_dims, panel.properties.render_dims);
                 let sourceX = sourcePt.x - scopeDims.w / 2;
                 let sourceY = sourcePt.y - scopeDims.h / 2;
 
@@ -97,6 +96,7 @@ const MagnifierTool = forwardRef(function Canvas(props, ref) {
                 let viewY = destY;
                 let drawMagImage = true;
 
+
                 // is the mouse over the image?
                 if (
                     _x <= 0 ||
diff --git a/client/src/_components/alignment/tools/pointer.alignment.js b/client/src/_components/alignment/tools/pointer.alignment.js
index b593ac59..3c08dae8 100644
--- a/client/src/_components/alignment/tools/pointer.alignment.js
+++ b/client/src/_components/alignment/tools/pointer.alignment.js
@@ -55,9 +55,6 @@ export const getPos = (e, properties) => {
         (document && document.scrollTop || 0) -
         (document && document.clientTop || 0 );
 
-    // DEBUG
-    // console.log(pageX, pageY, bounds)
-
     // compute mouse position relative to canvas bounds
     const x = Math.max(
         Math.min(
@@ -95,11 +92,12 @@ export function usePointer(properties, options) {
 
     /**
      * Set current pointer position coordinate
+     * 
      * */
 
-    const set = (e) => {
+    const set = (e, props = null) => {
         // compute current position of mouse
-        const pos = getPos(e, properties);
+        const pos = getPos(e, props ? props : properties);
         // set absolute client mouse coordinate
         setClient({x: e.clientX, y: e.clientY});
         // set actual
diff --git a/client/src/_components/alignment/tools/scaler.alignment.js b/client/src/_components/alignment/tools/scaler.alignment.js
index 82af860b..503f7f18 100644
--- a/client/src/_components/alignment/tools/scaler.alignment.js
+++ b/client/src/_components/alignment/tools/scaler.alignment.js
@@ -16,11 +16,13 @@
  */
 
 export const scaleToFit = (ix, iy, cx, cy) => {
-    const ri = ix / iy;
-    const rc = cx / cy;
+    // epsilon for stability
+    const eps = 1e-6;
+    const ri = ix / (iy + eps);
+    const rc = cx / (cy + eps);
     return {
-        w: Math.round(rc > ri ? ix * cy/iy : cx),
-        h: Math.round(rc > ri ? cy : iy * cx/ix)
+        w: Math.round(rc > ri ? ix * cy/(iy + eps) : cx),
+        h: Math.round(rc > ri ? cy : iy * cx/(ix + eps))
     };
 };
 
diff --git a/client/src/_components/common/comparator.js b/client/src/_components/common/comparator.js
index d37f7091..82a78139 100644
--- a/client/src/_components/common/comparator.js
+++ b/client/src/_components/common/comparator.js
@@ -77,35 +77,47 @@ const ImagePair = ({
 
 const Comparator = ({
                         images = [],
-                        menu = true,
                         autoslide=null,
                         expandable=true
                     }) => {
 
+    // slide panel reference
+    const slidePanel = React.useRef();                            
     // selected slide state
     const [selectedIndex, setSelectedIndex] = React.useState(0);
-    const [pairToggle, setPairToggle] = React.useState(false);
-    const [expandImage, setExpandImage] = React.useState(false);
-    const [panelWidth, setPanelWidth] = React.useState(0);
-    const [panelHeight, setPanelHeight] = React.useState(0);
-    let selectedImage = images[selectedIndex];
-    const slidePanel = React.useRef();
+    // const [expandImage, setExpandImage] = React.useState(false);
+    let selectedPair = images[selectedIndex];
+    
+    // retrieve captures from pair
+    const { historic_captures={}, modern_captures={} } = selectedPair || {};
 
     // get router
     const router = useRouter();
 
-    // window dimensions
-    const [winWidth, winHeight] = useWindowSize();
+    // extract metadata from capture object
+    const getMetadata = (capture) => {
+        const { refImage={} } = capture || {};
+        const { label='', file={}, url='', title='' } = refImage;
+        const { file_type='', owner_id='', owner_type='' } = file;
+        return {
+            label : label || '<No Label>',
+            title: title || '<No Title>',
+            url: createNodeRoute(owner_type, 'show', owner_id)
+        }
+    }
+    const modernMetadata = getMetadata(modern_captures);
+    const historicMetadata = getMetadata(historic_captures);
 
-    // retrieve image metadata
-    const { historic_captures={}, modern_captures={} } = selectedImage || {};
-    const selectedCapture = pairToggle ? historic_captures : modern_captures;
-    const { refImage={} } = selectedCapture || {};
-    const { label='', file={}, url='', title='' } = refImage;
-    const { file_type='', owner_id='', owner_type='' } = file;
 
-    // create view link for selected image
-    const link = createNodeRoute(owner_type, 'show', owner_id)
+    // select image pair
+    React.useEffect(() => {
+        const timer = autoslide ? setTimeout(() => {
+            setSelectedIndex((selectedIndex + 1) % images.length);
+        }, autoslide) : null;
+        return () => {
+            clearTimeout(timer);
+        };
+    }, [selectedIndex]);
 
     // auto-increment slideshow
     React.useEffect(() => {
@@ -117,13 +129,6 @@ const Comparator = ({
         };
     }, [selectedIndex, images.length, setSelectedIndex, autoslide]);
 
-    // panel dimensions
-    React.useEffect(() => {
-        if (slidePanel.current) {
-            setPanelWidth(slidePanel.current.offsetWidth);
-            setPanelHeight(slidePanel.current.offsetHeight);
-        }
-    }, [winWidth, winHeight]);
 
     // increment/decrement index to make slide visible
     const prevPair = () => {
@@ -138,48 +143,49 @@ const Comparator = ({
     return (
         <div className="comparator">
             <div ref={slidePanel} className={'slides'}>
-                { images.length > 0 ? <Slider
-                    images={[historic_captures.refImage, modern_captures.refImage]}
-                    toggle={pairToggle}
-                /> : <Loading /> }
+                { 
+                    images.length > 0 ? 
+                    <Slider images={[historic_captures.refImage, modern_captures.refImage]} /> 
+                    : 
+                    <Loading /> 
+                }
                 <div className={'numbertext'}>{ selectedIndex + 1 }/{images.length}</div>
-                {
+                {/* {
                     expandable &&
                     <div className={'expand-image'}><Button icon={'enlarge'} onClick={() => {
                         setExpandImage(true);
                     }}/></div>
-                }
+                } */}
             </div>
             {
-                label && <div className={'slide-menu h-menu vcentered'}>
+                <div className={'slide-menu h-menu vcentered'}>
                     <ul>
                         <li><Button icon={'prev'} className={'prev'} onClick={prevPair} /></li>
+                        <li>Historic:</li>
                         <li><Button
-                                className={'capture-button'}
-                                icon={'images'}
-                                onClick={() => setPairToggle(!pairToggle)}
-                                label={pairToggle ? 'Switch to Modern Capture' : 'Switch to Historic Capture'}
-                            /></li>
+                            title={'View Capture Details'}
+                            label={historicMetadata.label}
+                            className={'capture-button historic_captures'}
+                            icon={'historic_captures'}
+                            onClick={()=>{router.update(historicMetadata.url)}}
+                        /></li>
+                        <li>Modern:</li>
                         <li><Button
                             title={'View Capture Details'}
-                            label={label}
-                            className={'capture-button'}
-                            icon={pairToggle ? 'historic_captures' : 'modern_captures'}
-                            onClick={()=>{router.update(link)}}
+                            label={modernMetadata.label}
+                            className={'capture-button modern_captures'}
+                            icon={'modern_captures'}
+                            onClick={()=>{router.update(modernMetadata.url)}}
                         /></li>
                         <li className={'push'}><Button icon={'next'} className={'next'} onClick={nextPair} /></li>
                     </ul>
                 </div>
             }
-            {
-                menu
-                    ?
                     <div className={'thumbnails comparisons h-menu'}>
                         <ul>
                             {
                                 (images || []).map((imgPair, index) => {
                                     const { historic_captures={}, modern_captures={} } = imgPair || {};
-
                                     return (
                                         <li
                                             key={`slide_button_${index}`}
@@ -198,35 +204,6 @@ const Comparator = ({
                             }
                         </ul>
                     </div>
-                    :
-                    <div className={'dots'}>
-                        {
-                            (images || []).map((image, index) => {
-                                return (
-                                    <span
-                                        key={`comparator_img_${index}`}
-                                        className={`dot${index === selectedIndex ? ' active' : ''}`}
-                                        onClick={() => {setSelectedIndex(index)}}
-                                    />
-                                );
-                            })
-                        }
-                    </div>
-            }
-            {
-                expandImage &&
-                <Dialog
-                    title={`${getModelLabel(file_type)}: ${label}`}
-                    callback={()=>{setExpandImage(null)}}
-                >
-                    <Image
-                        key={`slide_${selectedIndex}`}
-                        url={url}
-                        title={title || label}
-                        scale={'medium'}
-                    />
-                </Dialog>
-            }
         </div>
     );
 };
diff --git a/client/src/_components/common/icon.js b/client/src/_components/common/icon.js
index e028c00b..c4339509 100644
--- a/client/src/_components/common/icon.js
+++ b/client/src/_components/common/icon.js
@@ -10,7 +10,6 @@ import React from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { library } from '@fortawesome/fontawesome-svg-core';
 import {
-
     faMapMarker,
     faVectorSquare,
     faLayerGroup,
@@ -290,12 +289,14 @@ const getIconClass = (iconType) => {
         align: 'crosshairs',
         overlay: 'layer-group',
         slider: 'columns',
+        sideBySide: 'images',
         clustered: 'map-marker',
         boundaries: 'vector-square',
         filter: 'filter',
         filterNavigation: 'filter',
         list: 'list-alt',
         search: 'search',
+        magnify: 'search-plus',
         undo: 'undo',
         reset: 'undo',
         sync: 'sync',
diff --git a/client/src/_components/common/slider.js b/client/src/_components/common/slider.js
index 41d86ed9..2817b68d 100644
--- a/client/src/_components/common/slider.js
+++ b/client/src/_components/common/slider.js
@@ -26,6 +26,8 @@ import Button from './button';
 import Canvas from "../alignment/canvas/default.canvas.alignment";
 import styles from '../styles/slider.module.css';
 import { useWindowSize } from "../../_utils/events.utils.client";
+import {usePointer} from "../alignment/tools/pointer.alignment";
+import MagnifierTool from '../alignment/canvas/magnifier.canvas.alignment';
 
 /**
  * Image slider component.
@@ -34,11 +36,12 @@ import { useWindowSize } from "../../_utils/events.utils.client";
  * @return
  */
 
-const Slider = ({ images = [], toggle=false }) => {
+const Slider = ({ images = [] }) => {
 
-    // default canvas sizes
+    // default canvas sizes and magnification factor
     const DEFAULT_CANVAS_WIDTH = 900;
     const DEFAULT_CANVAS_HEIGHT = 900;
+    const MAGNIFICATION = 2.0;
 
     // window dimensions
     const [winWidth, winHeight] = useWindowSize();
@@ -51,7 +54,12 @@ const Slider = ({ images = [], toggle=false }) => {
     const renderLayer2 = useRef(null);
     const imageLayer1 = useRef(null);
     const imageLayer2 = useRef(null);
-    const controlLayer = useRef();
+    const defaultControlLayer = useRef();
+    const sliderControlLayer = useRef();
+    const magControlLayer = useRef(null);
+    const magnifiedImage1 = useRef(null);
+    const magnifiedImage2 = useRef(null);
+    const magnifierLayer = useRef(null);
 
     // create reference to panel resizer
     let sliding = false;
@@ -67,15 +75,25 @@ const Slider = ({ images = [], toggle=false }) => {
 
     const [viewWidth, setViewWidth] = React.useState(0);
     const [viewDims, setViewDims] = React.useState(null);
-    const [viewSlider, setViewSlider] = React.useState(toggle);
+    const [viewMode, setViewMode] = React.useState(null);
+    const [toggle, setToggle] = React.useState(false);
+    const [properties, setProperties] = React.useState({
+        image_dims: {w: DEFAULT_CANVAS_WIDTH, h: DEFAULT_CANVAS_HEIGHT}, 
+        render_dims: {w: DEFAULT_CANVAS_WIDTH, h: DEFAULT_CANVAS_HEIGHT},
+        base_dims: {w: DEFAULT_CANVAS_WIDTH, h: DEFAULT_CANVAS_HEIGHT}, 
+        magnified_dims: {w: MAGNIFICATION*DEFAULT_CANVAS_WIDTH, h: MAGNIFICATION*DEFAULT_CANVAS_HEIGHT},
+        bounds: {w: DEFAULT_CANVAS_WIDTH, h: DEFAULT_CANVAS_HEIGHT}
+    })
 
     // Image labels
-    const label1 = image1 && image1.hasOwnProperty('label') ? image1.label : 'Image 1';
-    const label2 = image2 && image2.hasOwnProperty('label') ? image2.label : 'Image 2';
+    const label1 = image1 && image1.hasOwnProperty('label') ? image1.label : 'Historic Image';
+    const label2 = image2 && image2.hasOwnProperty('label') ? image2.label : 'Modern Image';
 
     // top layer opacity state
     const [opacity, setOpacity] = useState(100);
 
+    // initialize canvas pointers
+    const pointer = usePointer(properties);
 
     /**
      * Render image 1 data on canvas layer 1
@@ -85,30 +103,110 @@ const Slider = ({ images = [], toggle=false }) => {
 
     const _drawImage1 = () => {
 
-        if (!imageLayer1.current) return;
+        if (!imageLayer1.current || !imageLayer2.current) return;
 
         // compute scaled dimensions for image 1 to fit view canvas
         const viewDims1 = scaleToFit(
             imageLayer1.current.width,
             imageLayer1.current.height,
-            canvasWidth,
-            canvasHeight,
+            DEFAULT_CANVAS_WIDTH,
+            DEFAULT_CANVAS_HEIGHT,
         );
 
-        // compute image x offset
-        const viewOffset1 = (canvasWidth - viewDims1.w) / 2;
+        // compute scaled dimensions for image 2 to fit view canvas
+        const viewDims2 = scaleToFit(
+            imageLayer2.current.width,
+            imageLayer2.current.height,
+            DEFAULT_CANVAS_WIDTH,
+            DEFAULT_CANVAS_HEIGHT,
+        );
 
-        // render image to canvas
-        renderLayer1.current.draw(imageLayer1.current, {
-            view: { x: viewOffset1, y: 0, w: viewSlider && toggle ? viewDims1.w / 2 : viewDims1.w, h: viewDims1.h },
-            source: { x: 0, y: 0, w: viewSlider && toggle ? imageLayer1.current.width / 2 : imageLayer1.current.width, h: imageLayer1.current.height }
-        });
+        // Render image to canvas by view mode
+        if (viewMode === 'slider') {
+            // set canvas width to default;
+            setCanvasWidth(DEFAULT_CANVAS_WIDTH);
+            renderLayer1.current.setWidth(DEFAULT_CANVAS_WIDTH);
+            // compute image x offset
+            const _viewOffset1 = (DEFAULT_CANVAS_WIDTH - viewDims1.w) / 2;
+            renderLayer1.current.draw(imageLayer1.current, {
+                view: { x: _viewOffset1, y: 0, w: toggle ? viewDims1.w / 2 : viewDims1.w, h: viewDims1.h },
+                source: { x: 0, y: 0, w: toggle ? imageLayer1.current.width / 2 : imageLayer1.current.width, h: imageLayer1.current.height }
+            });
+            // draw magnified image to canvas
+            magnifiedImage1.current.setWidth(MAGNIFICATION * viewDims1.w);
+            magnifiedImage1.current.setHeight(MAGNIFICATION * viewDims1.h);
+            magnifiedImage1.current.draw(imageLayer1.current, {
+                view: { x: 0, y: 0, w: MAGNIFICATION * viewDims1.w, h: MAGNIFICATION * viewDims1.h },
+                source: { x: 0, y: 0, w: imageLayer1.current.width, h: imageLayer1.current.height  }
+            });
+            // update properties
+            setProperties(prevState => ({...prevState,
+                bounds: renderLayer1.current.bounds(),
+                base_dims: { w: DEFAULT_CANVAS_WIDTH, h: DEFAULT_CANVAS_HEIGHT },
+                render_dims: { x: _viewOffset1, y: 0, w: viewDims1.w, h: viewDims1.h },
+                magnified_dims: { x: 0, y: 0, w: MAGNIFICATION * viewDims1.w, h: MAGNIFICATION * viewDims1.h }
+            }));
+            
+        }
+        else if (viewMode === 'double') {
+            // set canvas width to double
+            const _combinedWidth = viewDims1.w + viewDims2.w;
+            setCanvasWidth(_combinedWidth);
+            // draw image to render canvas
+            renderLayer1.current.setWidth(_combinedWidth);
+            renderLayer1.current.draw(imageLayer1.current, {
+                view: { x: toggle ? 0 : viewDims1.w, y: 0, w: viewDims1.w, h: viewDims1.h },
+                source: { x: 0, y: 0, w: imageLayer1.current.width, h: imageLayer1.current.height }
+            }, false);
+            // draw magnified image to canvas
+            magnifiedImage1.current.setWidth(MAGNIFICATION * _combinedWidth);
+            magnifiedImage1.current.setHeight(MAGNIFICATION * viewDims1.h);
+            magnifiedImage1.current.draw(imageLayer1.current, {
+                view: { x: toggle ? 0 : MAGNIFICATION * viewDims2.w, y: 0, w: MAGNIFICATION * viewDims1.w, h: MAGNIFICATION * viewDims1.h },
+                source: { x: 0, y: 0, w: imageLayer1.current.width, h: imageLayer1.current.height  }
+            }, false);
+            // update properties
+            setProperties(prevState => ({...prevState,
+                bounds: renderLayer1.current.bounds(),
+                base_dims: { w: _combinedWidth, h: viewDims1.h },
+                render_dims: { x: 0, y: 0, w: _combinedWidth, h: viewDims1.h },
+                magnified_dims: { x: 0, y: 0, w: MAGNIFICATION * _combinedWidth,  h: MAGNIFICATION * viewDims1.h }
+            }));
+        }
+        else {
+            // set canvas width to default
+            setCanvasWidth(DEFAULT_CANVAS_WIDTH);
+            renderLayer1.current.setWidth(DEFAULT_CANVAS_WIDTH);
+            // compute image x offset
+            const _viewOffset1 = (DEFAULT_CANVAS_WIDTH - viewDims1.w) / 2;
+            // draw image to render canvas
+            renderLayer1.current.draw(imageLayer1.current, {
+                view: { x: _viewOffset1, y: 0, w: viewDims1.w, h: viewDims1.h },
+                source: { x: 0, y: 0, w: imageLayer1.current.width, h: imageLayer1.current.height }
+            });
+            // draw magnified image to canvas
+            magnifiedImage1.current.setWidth(MAGNIFICATION * viewDims1.w);
+            magnifiedImage1.current.setHeight(MAGNIFICATION * viewDims1.h);
+            magnifiedImage1.current.draw(imageLayer1.current, {
+                view: { x: 0, y: 0, w: MAGNIFICATION * viewDims1.w, h: MAGNIFICATION * viewDims1.h },
+                source: { x: 0, y: 0, w: imageLayer1.current.width, h: imageLayer1.current.height  }
+            });
+            // update properties
+            setProperties(prevState => ({...prevState,
+                bounds: renderLayer1.current.bounds(),
+                base_dims: { w: DEFAULT_CANVAS_WIDTH, h: DEFAULT_CANVAS_HEIGHT },
+                render_dims: { x: _viewOffset1, y: 0, w: viewDims1.w, h: viewDims1.h },
+                magnified_dims: { x: 0, y: 0, w: MAGNIFICATION * viewDims1.w, h: MAGNIFICATION * viewDims1.h }
+            }));
+        }
+        
+
+        // reset canvas height
+        setCanvasHeight(viewDims1.h);
 
         // set initial view dims
         if (toggle) {
-            setCanvasWidth(viewDims1.w);
-            setCanvasHeight(viewDims1.h);
-            setViewWidth(viewSlider ? viewDims1.w / 2 : viewDims1.w);
+            setViewWidth(viewMode === 'slider' ? viewDims1.w / 2 : viewDims1.w);
             setViewDims(viewDims1);
         }
     }
@@ -121,30 +219,92 @@ const Slider = ({ images = [], toggle=false }) => {
 
     const _drawImage2 = () => {
 
-        if (!imageLayer2.current) return;
+        if (!imageLayer2.current || !imageLayer1.current) return;
+
+        // compute scaled dimensions for image 1 to fit view canvas
+        const viewDims1 = scaleToFit(
+            imageLayer1.current.width,
+            imageLayer1.current.height,
+            DEFAULT_CANVAS_WIDTH,
+            DEFAULT_CANVAS_HEIGHT,
+        );
 
         // compute scaled dimensions for image 2 to fit view canvas
         const viewDims2 = scaleToFit(
             imageLayer2.current.width,
             imageLayer2.current.height,
-            canvasWidth,
-            canvasHeight,
+            DEFAULT_CANVAS_WIDTH,
+            DEFAULT_CANVAS_HEIGHT,
         );
 
-        // compute image x offset
-        const viewOffset2 = (canvasWidth - viewDims2.w) / 2;
+        // Render image to canvas based on view mode
+        if (viewMode === 'slider') {
+            // set canvas width to default
+            setCanvasWidth(DEFAULT_CANVAS_WIDTH);
+            renderLayer2.current.setWidth(DEFAULT_CANVAS_WIDTH);
+            // compute image x offset
+            const _viewOffset2 = (DEFAULT_CANVAS_WIDTH - viewDims1.w) / 2;
+            // render image
+            renderLayer2.current.draw(imageLayer2.current, {
+                view: { x: _viewOffset2, y: 0, w: !toggle ? viewDims2.w / 2 : viewDims2.w, h: viewDims2.h },
+                source: { x: 0, y: 0, w: !toggle ? imageLayer2.current.width / 2 : imageLayer2.current.width, h: imageLayer2.current.height }
+            });
+            // draw magnified image to canvas
+            magnifiedImage2.current.setWidth(MAGNIFICATION * viewDims2.w);
+            magnifiedImage2.current.setHeight(MAGNIFICATION * viewDims2.h);
+            magnifiedImage2.current.draw(imageLayer2.current, {
+                view: { x: 0, y: 0, w: MAGNIFICATION * viewDims2.w, h: MAGNIFICATION * viewDims2.h },
+                source: { x: 0, y: 0, w: imageLayer2.current.width, h: imageLayer2.current.height  }
+            });
+        }
+        else if (viewMode === 'double') {
+            // clear canvas 2 (image 2)
+            renderLayer2.current.clear();
+            // draw image 2 to canvas 1 with offset
+            renderLayer1.current.draw(imageLayer2.current, {
+                view: { x: toggle ? viewDims1.w : 0, y: 0, w: viewDims2.w, h: viewDims2.h },
+                source: { x: 0, y: 0, w: imageLayer2.current.width, h: imageLayer2.current.height }
+            }, false);
+            // clear magnified canvas 2 (image 2)
+            magnifiedImage2.current.clear();
+            // draw magnified image 2 to canvas 1
+            magnifiedImage1.current.draw(imageLayer2.current, {
+                view: { x: toggle ? MAGNIFICATION * viewDims1.w : 0, y: 0, w: MAGNIFICATION * viewDims2.w, h: MAGNIFICATION * viewDims2.h },
+                source: { x: 0, y: 0, w: imageLayer2.current.width, h: imageLayer2.current.height  }
+            }, false);
+        }
+        else {
+            // set canvas width to default
+            setCanvasWidth(DEFAULT_CANVAS_WIDTH);
+            renderLayer2.current.setWidth(DEFAULT_CANVAS_WIDTH);
+            // compute image x offset
+            const _viewOffset2 = (DEFAULT_CANVAS_WIDTH - viewDims1.w) / 2;
+            renderLayer2.current.draw(imageLayer2.current, {
+                view: { x: _viewOffset2, y: 0, w: viewDims2.w, h: viewDims2.h },
+                source: { x: 0, y: 0, w: imageLayer2.current.width, h: imageLayer2.current.height }
+            });
+            // draw magnified image to canvas
+            magnifiedImage2.current.setWidth(MAGNIFICATION * viewDims2.w);
+            magnifiedImage2.current.setHeight(MAGNIFICATION * viewDims2.h);
+            magnifiedImage2.current.draw(imageLayer2.current, {
+                view: { x: 0, y: 0, w: MAGNIFICATION * viewDims2.w, h: MAGNIFICATION * viewDims2.h },
+                source: { x: 0, y: 0, w: imageLayer2.current.width, h: imageLayer2.current.height  }
+            });
+            // update properties
+            setProperties(prevState => ({...prevState,
+                bounds: renderLayer2.current.bounds(),
+                base_dims: { w: DEFAULT_CANVAS_WIDTH, h: DEFAULT_CANVAS_HEIGHT },
+                render_dims: { x: _viewOffset2, y: 0, w: viewDims2.w, h: viewDims2.h },
+                magnified_dims: { x: 0, y: 0, w: MAGNIFICATION * viewDims2.w, h: MAGNIFICATION * viewDims2.h }
+            }));
+        }
 
-        // render image to canvas (toggle sets layer 1 as top layer)
-        renderLayer2.current.draw(imageLayer2.current, {
-            view: { x: viewOffset2, y: 0, w: viewSlider && !toggle ? viewDims2.w / 2 : viewDims2.w, h: viewDims2.h },
-            source: { x: 0, y: 0, w: viewSlider && !toggle ? imageLayer2.current.width / 2 : imageLayer2.current.width, h: imageLayer2.current.height }
-        });
+        // reset canvas height
+        setCanvasHeight(viewDims2.h);
 
         // set initial view dims
         if (!toggle) {
-            setCanvasWidth(viewDims2.w);
-            setCanvasHeight(viewDims2.h);
-            setViewWidth(viewSlider ? viewDims2.w / 2 : viewDims2.w);
+            setViewWidth(viewMode === 'slider' ? viewDims2.w / 2 : viewDims2.w);
             setViewDims(viewDims2);
         }
     }
@@ -162,10 +322,14 @@ const Slider = ({ images = [], toggle=false }) => {
         setStatus1('loading');
         setStatus2('loading');
 
+        // reset canvas size
+        setCanvasWidth(DEFAULT_CANVAS_WIDTH);
+        setCanvasHeight(DEFAULT_CANVAS_HEIGHT);
+
         // set data urls for images
         const url1 = image1 && image1.hasOwnProperty('url') ? image1.url.medium : image1;
         const url2 = image2 && image2.hasOwnProperty('url') ? image2.url.medium : image2;
-        // set image sources
+        // set view image sources
         imageLayer1.current.src = url1;
         imageLayer2.current.src = url2;
 
@@ -180,7 +344,7 @@ const Slider = ({ images = [], toggle=false }) => {
             setMessage({ msg: 'Error: Image could not be loaded.', type: 'error' });
             imageLayer1.current.src = schema.errors.image.fallbackSrc;
         };
-
+        
         // load image 2
         imageLayer2.current.onload = function () {
             // load image data to canvas layer
@@ -192,6 +356,7 @@ const Slider = ({ images = [], toggle=false }) => {
             setMessage({ msg: 'Error: Image could not be loaded.', type: 'error' });
             imageLayer2.current.src = schema.errors.image.fallbackSrc;
         };
+
     }
 
     /**
@@ -220,6 +385,16 @@ const Slider = ({ images = [], toggle=false }) => {
         renderLayer2.current.alpha(100);
     }
 
+    /**
+     * toggle image magnifier tool
+     *
+     * @private
+     */
+
+    const _toggleMagnifier = () => {
+        pointer.magnify ? pointer.magnifyOff() : pointer.magnifyOn();
+    }
+
     /**
      * Load comparator images
      * - comparison of images in same scale
@@ -229,24 +404,70 @@ const Slider = ({ images = [], toggle=false }) => {
      */
 
     useLayoutEffect(() => {
-        if (status1 === 'empty' || status2 === 'empty') {
-            _load();
-        }
+        if (status1 === 'empty' || status2 === 'empty') _load();
     }, []);
 
+     /**
+     * Reload images on image source and window size change.
+     *
+     * @private
+     */
+
     useLayoutEffect(() => {
         _load();
-    }, [winWidth, winHeight]);
+    }, [winWidth, winHeight, images]);
 
-    useEffect(() => {
-        setViewSlider(false);
-    }, [toggle]);
+
+    /**
+     * Redraw image to canvas.
+     *
+     * @private
+     */
 
     useLayoutEffect(() => {
         _drawImage1();
         _drawImage2();
         _resetOpacity();
-    }, [viewSlider]);
+    }, [viewMode, toggle]);
+
+    /**
+     * Apply magnification to image.
+     *
+     * @private
+     */
+
+    useEffect(() => {
+
+        // compare current with previously set pointer bounds
+        const _compareBounds = (bounds1, bounds2) => {
+            return bounds1.top === bounds2.top 
+            && bounds1.left === bounds2.left 
+            && bounds1.width === bounds2.width 
+            && bounds1.height === bounds2.height;
+        }
+        
+        // get current canvas bounds
+        const bounds = toggle || viewMode === 'double' ? renderLayer1.current.bounds() : renderLayer2.current.bounds(); 
+
+        // apply magnification if enabled
+        if (pointer.magnify) {    
+            // get current magnified image
+            const _magnifiedImage = toggle || viewMode === 'double' ? magnifiedImage1.current.canvas() : magnifiedImage2.current.canvas();
+            
+            // check pointer bounds to detect canvas translation (e.g., scrolling)
+            if(_compareBounds(bounds, properties.bounds)) {
+                magnifierLayer.current.magnify(_magnifiedImage, {pointer, properties});
+            }
+            else {
+                // update pointer bounds (update properties state)
+                setProperties(prevState => ({...prevState, bounds: bounds }));
+                magnifierLayer.current.magnify(_magnifiedImage, {pointer, properties: {...properties, bounds: bounds}});
+            }
+        }
+        else {
+            magnifierLayer.current.clear();
+        }
+    }, [pointer.x, pointer.y, pointer.magnify, viewMode]);
 
     /* Initialize panel resize */
     function _resizeStart(e) {
@@ -268,6 +489,7 @@ const Slider = ({ images = [], toggle=false }) => {
     /* Position the slider and resize panel */
     function _resize(e) {
 
+
         /* if slider is no longer engaged, exit this function: */
         if (!sliding) return false;
 
@@ -295,24 +517,60 @@ const Slider = ({ images = [], toggle=false }) => {
 
     }
 
+    /* Show magnifier viewer at pointer position */
+    function _setPointer(e) {    
+        e.preventDefault();
+        pointer.set(e, properties);
+    }
+
     return <>
         <div className={styles.slider}>
             {(status1 !== 'loaded' || status2 !== 'loaded') && <Loading className={'centered'} overlay={true} />}
             {message && <UserMessage message={message} />}
             <div className={styles.container} style={{ height: `${canvasHeight}px`, width: `${canvasWidth}px`, margin: 'auto' }}>
-                <Canvas
-                    ref={controlLayer}
-                    id={`slider_image_control`}
-                    style={{'zIndex': viewSlider ? 30 : 0}}
+                {
+                pointer.magnify && <Canvas
+                    ref={magControlLayer}
+                    id={`image_control_magnifier`}
+                    style={{zIndex: 55, cursor: 'crosshair'}}
                     className={styles.overlay}
-                    width={DEFAULT_CANVAS_WIDTH}
+                    width={canvasWidth}
+                    height={DEFAULT_CANVAS_HEIGHT}
+                    onMouseMove={_setPointer}
+                    /> 
+                }
+                {
+                viewMode === 'slider' && <Canvas
+                    ref={sliderControlLayer}
+                    style={{zIndex: 50, cursor: 'col-resize'}}
+                    id={`image_control_slider`}
+                    className={styles.overlay}
+                    width={canvasWidth}
                     height={DEFAULT_CANVAS_HEIGHT}
                     onMouseDown={_resizeStart}
-                    onTouchStart={_resizeStart}
                     onMouseUp={_resizeEnd}
                     onMouseMove={_resize}
+                    onTouchStart={_resizeStart}
                     onTouchEnd={_resizeEnd}
                     onTouchMove={_resize}
+                    /> 
+                }
+                <Canvas
+                    ref={defaultControlLayer}
+                    id={`default_control`}
+                    style={{zIndex: 35, cursor: 'default'}}
+                    className={styles.overlay}
+                    width={canvasWidth}
+                    height={DEFAULT_CANVAS_HEIGHT}
+                    onMouseMove={_setPointer}
+                    /> 
+                <MagnifierTool
+                    style={{'zIndex': 25}}
+                    ref={magnifierLayer}
+                    id={`magnifier_layer`}
+                    className={`layer`}
+                    width={canvasWidth}
+                    height={DEFAULT_CANVAS_HEIGHT}
                 />
                 <Canvas
                     style={{'zIndex': toggle ? 20 : 10}}
@@ -330,6 +588,20 @@ const Slider = ({ images = [], toggle=false }) => {
                     width={DEFAULT_CANVAS_WIDTH}
                     height={DEFAULT_CANVAS_HEIGHT}
                 />
+                <Canvas
+                    style={{ 'display': 'none' }}
+                    ref={magnifiedImage1}
+                    id={`slider_magnified_image_layer_1`}
+                    width={DEFAULT_CANVAS_WIDTH}
+                    height={DEFAULT_CANVAS_HEIGHT}
+                />
+                <Canvas
+                    style={{ 'display': 'none' }}
+                    ref={magnifiedImage2}
+                    id={`slider_magnified_image_layer_2`}
+                    width={DEFAULT_CANVAS_WIDTH}
+                    height={DEFAULT_CANVAS_HEIGHT}
+                />
                 <img
                     style={{ 'display': 'none' }}
                     ref={imageLayer1}
@@ -347,15 +619,42 @@ const Slider = ({ images = [], toggle=false }) => {
             </div>
             <div className={'slide-menu h-menu vcentered'}>
                 <ul>
+                <li><Button
+                        title={'View Image'}
+                        label={'Single View'}
+                        className={`capture-button ${!viewMode && 'active'}`}
+                        icon={'image'}
+                        onClick={() => {setViewMode(null)}}
+                    /></li>
+                    <li><Button
+                        title={'Compare Images side-by-side.'}
+                        label={'Double View'}
+                        className={`capture-button ${viewMode === 'double' && 'active'}`}
+                        icon={'images'}
+                        onClick={() => {setViewMode('double')}}
+                    /></li>
                     <li><Button
                         title={'Compare Images using Slider'}
-                        label={viewSlider ? 'Slider On' : 'Slider Off'}
-                        className={`capture-button ${viewSlider && 'active'}`}
+                        label={'Slider View'}
+                        className={`capture-button ${viewMode === 'slider' && 'active'}`}
                         icon={'slider'}
-                        onClick={() => {setViewSlider(!viewSlider)}}
+                        onClick={() => {setViewMode('slider')}}
+                    /></li>
+                    <li><Button
+                        icon={'sync'}
+                        className={`capture-button`}
+                        onClick={() => setToggle(!toggle)}
+                        label={'Swap Images'}
+                    /></li>
+                    <li><Button
+                        icon={'magnify'}
+                        className={`capture-button ${pointer.magnify && 'active'}`}
+                        onClick={_toggleMagnifier}
+                        label={'Magnify'}
                     /></li>
                     <li className={'push'}>
                         <InputSelector
+                            disabled={viewMode==='double'}
                             style={{ width: '200px' }}
                             id={'layer_opacity'}
                             name={'layer_opacity'}
diff --git a/client/src/_components/styles/slider.module.css b/client/src/_components/styles/slider.module.css
index 7b1aadc8..9ba4cb2f 100644
--- a/client/src/_components/styles/slider.module.css
+++ b/client/src/_components/styles/slider.module.css
@@ -4,6 +4,7 @@
     min-height: 500px;
     width: auto;
     background-color: transparent;
+    cursor: default;
 }
 .container {
     position: relative;
@@ -11,6 +12,7 @@
     background-color: transparent;
     margin: auto;
     height: auto; /*should be the same height as the images*/
+    /* overflow-x: scroll; */
 }
 .slider figure {
     margin: 0;
@@ -27,15 +29,17 @@
     position: absolute;
     z-index: 30;
     background-color: transparent;
-    cursor: col-resize;
+    cursor: inherit;
 }
 .image1 {
     margin: auto;
     position: absolute;
     z-index: 20;
+    cursor: default;
 }
 .image2 {
     margin: auto;
     position: absolute;
     z-index: 10;
+    cursor: default;
 }
\ No newline at end of file

From 607cbec9ba48546a887e373f705a274be231840c Mon Sep 17 00:00:00 2001
From: Spencer Rose <spencerrose@uvic.ca>
Date: Sun, 18 Aug 2024 15:58:59 -0700
Subject: [PATCH 7/8] Update to file importer.

---
 src/controllers/metadata.controller.js | 2 --
 src/controllers/model.controller.js    | 3 ---
 src/services/import.services.js        | 2 --
 3 files changed, 7 deletions(-)

diff --git a/src/controllers/metadata.controller.js b/src/controllers/metadata.controller.js
index fd096a3d..4d76ecb9 100644
--- a/src/controllers/metadata.controller.js
+++ b/src/controllers/metadata.controller.js
@@ -198,8 +198,6 @@ export default function MetadataController(metadataType) {
             const ownerID = this.getOwnerId(req);
             let ownerType = null;
 
-            console.log(req.body)
-
             // get owner ID from parameters
             if (ownerID) {
                 // get owner metadata record (if exists)
diff --git a/src/controllers/model.controller.js b/src/controllers/model.controller.js
index ebb38e62..2449dcb2 100644
--- a/src/controllers/model.controller.js
+++ b/src/controllers/model.controller.js
@@ -217,9 +217,6 @@ export default function ModelController(nodeType) {
             // - collates metadata
             const importData = await importer.receive(req, owner_id, type);
 
-
-    console.log(importData)
-
             // check if files are present
             const hasFiles = Object.keys(importData.files).length > 0;
 
diff --git a/src/services/import.services.js b/src/services/import.services.js
index 955f7c66..950cf5c6 100644
--- a/src/services/import.services.js
+++ b/src/services/import.services.js
@@ -133,7 +133,6 @@ export const receive = (req, owner_id=null, owner_type=null) => {
  */
 
 export const onFile = (filePromises, metadata, onError, fieldname, file, filename, encoding, mimetype) => {
-    console.log(filename)
 
     // reject file upload empty of files
     if (!filename) {
@@ -188,7 +187,6 @@ export const onFile = (filePromises, metadata, onError, fieldname, file, filenam
             .on('error', reject)
             .on('close', () => {
                 // attach file data to global metadata
-                console.log(index, fileIndex)
                 // - for multiple files on same type, use key index (e.g. 'file_type[2]')
                 // - for multiple files on different type, use file index
                 if (index)

From 81bd4518f75a612c1892560d42b0acc0b176bdf6 Mon Sep 17 00:00:00 2001
From: Spencer Rose <spencerrose@uvic.ca>
Date: Sun, 18 Aug 2024 16:01:13 -0700
Subject: [PATCH 8/8] Update busboy

---
 .vscode/settings.json | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .vscode/settings.json

diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 00000000..6c2ff60b
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,5 @@
+{
+    "githubPullRequests.ignoredPullRequestBranches": [
+        "master"
+    ]
+}
\ No newline at end of file