From 402dc85bbb057717e756011e9a1f425b9294ad31 Mon Sep 17 00:00:00 2001
From: dbauszus-glx <dennis.bauszus@geolytix.co.uk>
Date: Tue, 19 Mar 2024 12:12:46 +0000
Subject: [PATCH 1/2] Split plugins into modules; Add keyvalue_dictionary

---
 lib/mapp.mjs                        |   2 +-
 lib/plugins.mjs                     | 192 ----------------------------
 lib/plugins/_plugins.mjs            |  27 ++++
 lib/plugins/admin.mjs               |  16 +++
 lib/plugins/fullscreen.mjs          |  25 ++++
 lib/plugins/keyvalue_dictionary.mjs |  44 +++++++
 lib/plugins/locator.mjs             |  17 +++
 lib/plugins/login.mjs               |  18 +++
 lib/plugins/svg_templates.mjs       |  21 +++
 lib/plugins/zoomBtn.mjs             |  39 ++++++
 lib/plugins/zoomToArea.mjs          |  45 +++++++
 11 files changed, 253 insertions(+), 193 deletions(-)
 delete mode 100644 lib/plugins.mjs
 create mode 100644 lib/plugins/_plugins.mjs
 create mode 100644 lib/plugins/admin.mjs
 create mode 100644 lib/plugins/fullscreen.mjs
 create mode 100644 lib/plugins/keyvalue_dictionary.mjs
 create mode 100644 lib/plugins/locator.mjs
 create mode 100644 lib/plugins/login.mjs
 create mode 100644 lib/plugins/svg_templates.mjs
 create mode 100644 lib/plugins/zoomBtn.mjs
 create mode 100644 lib/plugins/zoomToArea.mjs

diff --git a/lib/mapp.mjs b/lib/mapp.mjs
index c166c17817..af1457fefd 100644
--- a/lib/mapp.mjs
+++ b/lib/mapp.mjs
@@ -24,7 +24,7 @@ import location from './location/_location.mjs'
 
 import Mapview from './mapview/_mapview.mjs'
 
-import * as plugins from './plugins.mjs'
+import plugins from './plugins/_plugins.mjs'
 
 hooks.parse();
 
diff --git a/lib/plugins.mjs b/lib/plugins.mjs
deleted file mode 100644
index e4f7b34ceb..0000000000
--- a/lib/plugins.mjs
+++ /dev/null
@@ -1,192 +0,0 @@
-/**
-## mapp.plugins{}
-
-@module plugins
-*/
-
-export async function svg_templates(plugin, mapview) {
-
-  if (typeof mapp.utils.svgSymbols.templates !== 'object') {
-    mapp.utils.svgSymbols.templates = {}
-  }
-
-  // Iterate through svg_templates entries.
-  const promises = Object.entries(plugin).map(entry => {
-
-    // Fetch entry value.
-    return fetch(entry[1])
-      .then(response => response.text())
-      .then(svgString => {
-
-        // Assign parsed svgString as entry key to templates object.
-        mapp.utils.svgSymbols.templates[entry[0]] = svgString
-      })
-  })
-
-  await Promise.all(promises)
-}
-
-export function locator(plugin, mapview) {
-
-  const btnColumn = document.getElementById('mapButton');
-
-  // the btnColumn element only exist in the default mapp view.
-  if (!btnColumn) return;
-
-  const btn = mapp.utils.html.node`
-  <button
-    title=${mapp.dictionary.toolbar_current_location}
-    onclick=${(e) => {
-      e.target.classList.toggle('active');
-      mapview.locate();
-    }}><div class="mask-icon gps-not-fixed">`
-
-  btnColumn.append(btn)
-}
-
-export function fullscreen(plugin, mapview) {
-
-  const btnColumn = document.getElementById('mapButton');
-
-  // the btnColumn element only exist in the default mapp view.
-  if (!btnColumn) return;
-
-  function toggleFullscreen(e) {
-
-    e.target.classList.toggle('active');
-    document.body.classList.toggle('fullscreen');
-    mapview.Map.updateSize();
-    Object.values(mapview.layers)
-      .forEach((layer) => layer.mbMap?.resize());
-  }
-
-  const btn = mapp.utils.html.node`
-  <button
-    class="mobile-display-none"
-    title=${mapp.dictionary.toolbar_fullscreen}
-    onclick=${toggleFullscreen}>
-    <div class="mask-icon map">`
-
-  btnColumn.append(btn)
-}
-
-export function zoomToArea(plugin, mapview) {
-
-  const btnColumn = document.getElementById('mapButton');
-
-  // the btnColumn element only exist in the default mapp view.
-  if (!btnColumn) return;
-
-  function toggleZoomInteraction(e) {
-
-    // If active cancel zoom and enable highlight interaction.
-    if (e.target.classList.contains('active')) {
-
-      // Will remove the 'active' class in callback of zoom interaction.
-      mapview.interactions.highlight()
-      return;
-    }
-
-    // Add active class
-    e.target.classList.add('active')
-
-    // Make zoom interaction current.
-    mapview.interactions.zoom({
-
-      // The interaction callback is executed on cancel or finish.
-      callback: () => {
-        e.target.classList.remove('active');
-        delete mapview.interaction
-
-        // Set highlight interaction if no other interaction is current after 400ms.
-        setTimeout(() => {
-          !mapview.interaction && mapview.interactions.highlight()
-        }, 400)
-      }
-    })
-  }
-
-  const btn = mapp.utils.html.node`
-  <button
-    class="mobile-display-none"
-    title=${mapp.dictionary.toolbar_zoom_to_area}
-    onclick=${toggleZoomInteraction}>
-    <div class="mask-icon pageview">`
-
-  btnColumn.append(btn)  
-}
-
-export function zoomBtn(plugin, mapview) {
-
-  const btnColumn = document.getElementById('mapButton');
-
-  // the btnColumn element only exist in the default mapp view.
-  if (!btnColumn) return;
-
-  // Add zoomIn button.
-  const btnZoomIn = btnColumn.appendChild(mapp.utils.html.node`
-    <button
-      id="btnZoomIn"
-      .disabled=${mapview.Map.getView().getZoom() >= mapview.locale.maxZoom}
-      title=${mapp.dictionary.toolbar_zoom_in}
-      onclick=${(e) => {
-        const z = parseInt(mapview.Map.getView().getZoom() + 1);
-        mapview.Map.getView().setZoom(z);
-        e.target.disabled = z >= mapview.locale.maxZoom;
-      }}><div class="mask-icon add">`)
-
-  // Add zoomOut button.
-  const btnZoomOut = btnColumn.appendChild(mapp.utils.html.node`
-    <button
-      id="btnZoomOut"
-      .disabled=${mapview.Map.getView().getZoom() <= mapview.locale.minZoom}
-      title=${mapp.dictionary.toolbar_zoom_out}
-      onclick=${(e) => {
-        const z = parseInt(mapview.Map.getView().getZoom() - 1);
-        mapview.Map.getView().setZoom(z);
-        e.target.disabled = z <= mapview.locale.minZoom;
-      }}><div class="mask-icon remove">`)
-
-  // changeEnd event listener for zoom button
-  mapview.Map.getTargetElement()
-    .addEventListener('changeEnd', () => {
-      const z = mapview.Map.getView().getZoom();
-      btnZoomIn.disabled = z >= mapview.locale.maxZoom;
-      btnZoomOut.disabled = z <= mapview.locale.minZoom;
-    });
-}
-
-export function admin(plugin, mapview) {
-
-  const btnColumn = document.getElementById('mapButton');
-
-  // the btnColumn element only exist in the default mapp view.
-  if (!btnColumn) return;
-
-  // Append user admin link.
-  mapp.user?.admin
-    && btnColumn.appendChild(mapp.utils.html.node`
-      <a
-        title=${mapp.dictionary.toolbar_admin}
-        href="${mapp.host + '/api/user/admin'}">
-        <div class="mask-icon supervisor-account">`);
-}
-
-export function login(plugin, mapview) {
-
-  const btnColumn = document.getElementById('mapButton');
-
-  // the btnColumn element only exist in the default mapp view.
-  if (!btnColumn) return;
-  
-  // Append login/logout link.
-  if (!document.head.dataset.login) return;
-
-  const iconClass = `mask-icon ${mapp.user? 'logout': 'lock-open'}`
-
-  btnColumn.appendChild(mapp.utils.html.node`
-    <a
-      title=${mapp.user? mapp.dictionary.toolbar_logout: mapp.dictionary.toolbar_login}
-      href=${mapp.user? "?logout=true": "?login=true"}>
-      <div class=${iconClass}>`);
-}
\ No newline at end of file
diff --git a/lib/plugins/_plugins.mjs b/lib/plugins/_plugins.mjs
new file mode 100644
index 0000000000..74504157a7
--- /dev/null
+++ b/lib/plugins/_plugins.mjs
@@ -0,0 +1,27 @@
+/**
+## mapp.plugins{}
+
+@module plugins
+*/
+
+import { admin } from './admin.mjs'
+import { fullscreen } from './fullscreen.mjs'
+import { keyvalue_dictionary } from './keyvalue_dictionary.mjs'
+import { locator } from './locator.mjs'
+import { login } from './login.mjs'
+import { svg_templates } from './svg_templates.mjs'
+import { zoomBtn } from './zoomBtn.mjs'
+import { zoomToArea } from './zoomToArea.mjs'
+
+const plugins = {
+  admin,
+  fullscreen,
+  keyvalue_dictionary,
+  locator,
+  login,
+  svg_templates,
+  zoomBtn,
+  zoomToArea
+}
+
+export default plugins
diff --git a/lib/plugins/admin.mjs b/lib/plugins/admin.mjs
new file mode 100644
index 0000000000..a14f2a865f
--- /dev/null
+++ b/lib/plugins/admin.mjs
@@ -0,0 +1,16 @@
+export function admin(plugin, mapview) {
+
+  const btnColumn = document.getElementById('mapButton');
+
+  // the btnColumn element only exist in the default mapp view.
+  if (!btnColumn) return;
+
+  // Append user admin link.
+  if (!mapp.user?.admin) return;
+  
+  btnColumn.appendChild(mapp.utils.html.node`
+    <a
+      title=${mapp.dictionary.toolbar_admin}
+      href="${mapp.host + '/api/user/admin'}">
+      <div class="mask-icon supervisor-account">`);
+}
\ No newline at end of file
diff --git a/lib/plugins/fullscreen.mjs b/lib/plugins/fullscreen.mjs
new file mode 100644
index 0000000000..08ff78e80e
--- /dev/null
+++ b/lib/plugins/fullscreen.mjs
@@ -0,0 +1,25 @@
+export function fullscreen(plugin, mapview) {
+
+  const btnColumn = document.getElementById('mapButton');
+
+  // the btnColumn element only exist in the default mapp view.
+  if (!btnColumn) return;
+
+  function toggleFullscreen(e) {
+
+    e.target.classList.toggle('active');
+    document.body.classList.toggle('fullscreen');
+    mapview.Map.updateSize();
+    Object.values(mapview.layers)
+      .forEach((layer) => layer.mbMap?.resize());
+  }
+
+  const btn = mapp.utils.html.node`
+    <button
+      class="mobile-display-none"
+      title=${mapp.dictionary.toolbar_fullscreen}
+      onclick=${toggleFullscreen}>
+      <div class="mask-icon map">`
+
+  btnColumn.append(btn)
+}
\ No newline at end of file
diff --git a/lib/plugins/keyvalue_dictionary.mjs b/lib/plugins/keyvalue_dictionary.mjs
new file mode 100644
index 0000000000..a0f940c279
--- /dev/null
+++ b/lib/plugins/keyvalue_dictionary.mjs
@@ -0,0 +1,44 @@
+export function keyvalue_dictionary(keyvalue_dictionary, mapview) {
+
+  if (!mapp.user.language) return;
+
+  if (!mapview.locale) return;
+
+  parseObject(mapview.locale, keyvalue_dictionary)
+}
+
+function isArrayObject(item, dictionary) {
+
+  if (Array.isArray(item)) {
+    item.forEach(val => isArrayObject(val, dictionary))
+    return true
+  }
+
+  if (item instanceof Object) {
+    parseObject(item, dictionary)
+    return true
+  }
+}
+
+function parseObject(obj, dictionary) {
+
+  for (const [key, value] of Object.entries(obj)) {
+
+    if (isArrayObject(value, dictionary)) continue;
+
+    if (typeof value === 'string') replaceKeyValue(obj, key, value, dictionary);
+  }
+}
+
+function replaceKeyValue(obj, key, value, dictionary) {
+
+  // Find dictionary entry matching key and value.
+  const entry = dictionary
+    .filter(entry => entry.key === key)
+    .find(entry => entry.value === value)
+
+  if (!entry) return;
+
+  // Replace object key value with entry language lookup or default.
+  obj[key] = entry[mapp.user.language] || entry.default || value
+}
\ No newline at end of file
diff --git a/lib/plugins/locator.mjs b/lib/plugins/locator.mjs
new file mode 100644
index 0000000000..9d634a213b
--- /dev/null
+++ b/lib/plugins/locator.mjs
@@ -0,0 +1,17 @@
+export function locator(plugin, mapview) {
+
+  const btnColumn = document.getElementById('mapButton');
+
+  // the btnColumn element only exist in the default mapp view.
+  if (!btnColumn) return;
+
+  const btn = mapp.utils.html.node`
+    <button
+      title=${mapp.dictionary.toolbar_current_location}
+      onclick=${(e) => {
+      e.target.classList.toggle('active');
+      mapview.locate();
+    }}><div class="mask-icon gps-not-fixed">`
+
+  btnColumn.append(btn)
+}
\ No newline at end of file
diff --git a/lib/plugins/login.mjs b/lib/plugins/login.mjs
new file mode 100644
index 0000000000..6d37ea5378
--- /dev/null
+++ b/lib/plugins/login.mjs
@@ -0,0 +1,18 @@
+export function login(plugin, mapview) {
+
+  const btnColumn = document.getElementById('mapButton');
+
+  // the btnColumn element only exist in the default mapp view.
+  if (!btnColumn) return;
+
+  // Append login/logout link.
+  if (!document.head.dataset.login) return;
+
+  const iconClass = `mask-icon ${mapp.user ? 'logout' : 'lock-open'}`
+
+  btnColumn.appendChild(mapp.utils.html.node`
+    <a
+      title=${mapp.user ? mapp.dictionary.toolbar_logout : mapp.dictionary.toolbar_login}
+      href=${mapp.user ? "?logout=true" : "?login=true"}>
+      <div class=${iconClass}>`);
+}
\ No newline at end of file
diff --git a/lib/plugins/svg_templates.mjs b/lib/plugins/svg_templates.mjs
new file mode 100644
index 0000000000..1ddd58cdf0
--- /dev/null
+++ b/lib/plugins/svg_templates.mjs
@@ -0,0 +1,21 @@
+export async function svg_templates(plugin, mapview) {
+
+  if (typeof mapp.utils.svgSymbols.templates !== 'object') {
+    mapp.utils.svgSymbols.templates = {}
+  }
+
+  // Iterate through svg_templates entries.
+  const promises = Object.entries(plugin).map(entry => {
+
+    // Fetch entry value.
+    return fetch(entry[1])
+      .then(response => response.text())
+      .then(svgString => {
+
+        // Assign parsed svgString as entry key to templates object.
+        mapp.utils.svgSymbols.templates[entry[0]] = svgString
+      })
+  })
+
+  await Promise.all(promises)
+}
\ No newline at end of file
diff --git a/lib/plugins/zoomBtn.mjs b/lib/plugins/zoomBtn.mjs
new file mode 100644
index 0000000000..e3ebc34167
--- /dev/null
+++ b/lib/plugins/zoomBtn.mjs
@@ -0,0 +1,39 @@
+export function zoomBtn(plugin, mapview) {
+
+  const btnColumn = document.getElementById('mapButton');
+
+  // the btnColumn element only exist in the default mapp view.
+  if (!btnColumn) return;
+
+  // Add zoomIn button.
+  const btnZoomIn = btnColumn.appendChild(mapp.utils.html.node`
+    <button
+      id="btnZoomIn"
+      .disabled=${mapview.Map.getView().getZoom() >= mapview.locale.maxZoom}
+      title=${mapp.dictionary.toolbar_zoom_in}
+      onclick=${(e) => {
+        const z = parseInt(mapview.Map.getView().getZoom() + 1);
+        mapview.Map.getView().setZoom(z);
+        e.target.disabled = z >= mapview.locale.maxZoom;
+      }}><div class="mask-icon add">`)
+
+  // Add zoomOut button.
+  const btnZoomOut = btnColumn.appendChild(mapp.utils.html.node`
+    <button
+      id="btnZoomOut"
+      .disabled=${mapview.Map.getView().getZoom() <= mapview.locale.minZoom}
+      title=${mapp.dictionary.toolbar_zoom_out}
+      onclick=${(e) => {
+        const z = parseInt(mapview.Map.getView().getZoom() - 1);
+        mapview.Map.getView().setZoom(z);
+        e.target.disabled = z <= mapview.locale.minZoom;
+      }}><div class="mask-icon remove">`)
+
+  // changeEnd event listener for zoom button
+  mapview.Map.getTargetElement()
+    .addEventListener('changeEnd', () => {
+      const z = mapview.Map.getView().getZoom();
+      btnZoomIn.disabled = z >= mapview.locale.maxZoom;
+      btnZoomOut.disabled = z <= mapview.locale.minZoom;
+    });
+}
\ No newline at end of file
diff --git a/lib/plugins/zoomToArea.mjs b/lib/plugins/zoomToArea.mjs
new file mode 100644
index 0000000000..bb43ee36b8
--- /dev/null
+++ b/lib/plugins/zoomToArea.mjs
@@ -0,0 +1,45 @@
+export function zoomToArea(plugin, mapview) {
+
+  const btnColumn = document.getElementById('mapButton');
+
+  // the btnColumn element only exist in the default mapp view.
+  if (!btnColumn) return;
+
+  function toggleZoomInteraction(e) {
+
+    // If active cancel zoom and enable highlight interaction.
+    if (e.target.classList.contains('active')) {
+
+      // Will remove the 'active' class in callback of zoom interaction.
+      mapview.interactions.highlight()
+      return;
+    }
+
+    // Add active class
+    e.target.classList.add('active')
+
+    // Make zoom interaction current.
+    mapview.interactions.zoom({
+
+      // The interaction callback is executed on cancel or finish.
+      callback: () => {
+        e.target.classList.remove('active');
+        delete mapview.interaction
+
+        // Set highlight interaction if no other interaction is current after 400ms.
+        setTimeout(() => {
+          !mapview.interaction && mapview.interactions.highlight()
+        }, 400)
+      }
+    })
+  }
+
+  const btn = mapp.utils.html.node`
+    <button
+      class="mobile-display-none"
+      title=${mapp.dictionary.toolbar_zoom_to_area}
+      onclick=${toggleZoomInteraction}>
+      <div class="mask-icon pageview">`
+
+  btnColumn.append(btn)
+}
\ No newline at end of file

From 63374cc7ad1f023aed78bfdfc0c53e2a90b7b744 Mon Sep 17 00:00:00 2001
From: Robert Hurst <robert.hurst@geolytix.co.uk>
Date: Wed, 20 Mar 2024 15:08:01 +0200
Subject: [PATCH 2/2] Plugins documentation

---
 lib/plugins/_plugins.mjs            | 17 ++++++--
 lib/plugins/admin.mjs               | 12 ++++++
 lib/plugins/fullscreen.mjs          | 22 ++++++++---
 lib/plugins/keyvalue_dictionary.mjs | 61 ++++++++++++++++++++---------
 lib/plugins/locator.mjs             | 24 +++++++++---
 lib/plugins/login.mjs               | 12 ++++++
 lib/plugins/svg_templates.mjs       | 13 ++++++
 lib/plugins/zoomBtn.mjs             | 16 ++++++++
 lib/plugins/zoomToArea.mjs          | 15 +++++++
 9 files changed, 160 insertions(+), 32 deletions(-)

diff --git a/lib/plugins/_plugins.mjs b/lib/plugins/_plugins.mjs
index 74504157a7..8cacbf7e8b 100644
--- a/lib/plugins/_plugins.mjs
+++ b/lib/plugins/_plugins.mjs
@@ -1,7 +1,7 @@
 /**
 ## mapp.plugins{}
-
-@module plugins
+This module serves as a collection of plugin modules for the application.
+@module /plugins
 */
 
 import { admin } from './admin.mjs'
@@ -13,6 +13,17 @@ import { svg_templates } from './svg_templates.mjs'
 import { zoomBtn } from './zoomBtn.mjs'
 import { zoomToArea } from './zoomToArea.mjs'
 
+/**
+@typedef {Object} plugins
+@property {function} admin - The admin plugin module.
+@property {function} fullscreen - The fullscreen plugin module.
+@property {function} keyvalue_dictionary - The keyvalue_dictionary plugin module.
+@property {function} locator - The locator plugin module.
+@property {function} login - The login plugin module.
+@property {function} svg_templates - The svg_templates plugin module.
+@property {function} zoomBtn - The zoomBtn plugin module.
+@property {function} zoomToArea - The zoomToArea plugin module.
+*/
 const plugins = {
   admin,
   fullscreen,
@@ -24,4 +35,4 @@ const plugins = {
   zoomToArea
 }
 
-export default plugins
+export default plugins
\ No newline at end of file
diff --git a/lib/plugins/admin.mjs b/lib/plugins/admin.mjs
index a14f2a865f..769652e991 100644
--- a/lib/plugins/admin.mjs
+++ b/lib/plugins/admin.mjs
@@ -1,3 +1,15 @@
+/**
+### Admin Plugin
+@module /plugins/admin
+*/
+
+/**
+Adds an admin button to the map view if the user has admin privileges.
+@function admin
+@param {Object} plugin - The plugin configuration object.
+@param {Object} mapview - The mapview object.
+@returns {void}
+*/
 export function admin(plugin, mapview) {
 
   const btnColumn = document.getElementById('mapButton');
diff --git a/lib/plugins/fullscreen.mjs b/lib/plugins/fullscreen.mjs
index 08ff78e80e..fead70f3e7 100644
--- a/lib/plugins/fullscreen.mjs
+++ b/lib/plugins/fullscreen.mjs
@@ -1,12 +1,24 @@
-export function fullscreen(plugin, mapview) {
+/**
+### Fullscreen Plugin
+@module /plugins/fullscreen
+ */
 
+/**
+Adds a fullscreen toggle button to the map view.
+@function fullscreen
+@param {Object} plugin - The plugin configuration object.
+@param {Object} mapview - The mapview object.
+@param {ol.Map} mapview.Map - The OpenLayers map object.
+@param {Object} mapview.layers - The layers object containing map layers.
+@returns {void}
+*/
+export function fullscreen(plugin, mapview) {
   const btnColumn = document.getElementById('mapButton');
 
-  // the btnColumn element only exist in the default mapp view.
+  // The btnColumn element only exists in the default mapp view.
   if (!btnColumn) return;
 
   function toggleFullscreen(e) {
-
     e.target.classList.toggle('active');
     document.body.classList.toggle('fullscreen');
     mapview.Map.updateSize();
@@ -19,7 +31,7 @@ export function fullscreen(plugin, mapview) {
       class="mobile-display-none"
       title=${mapp.dictionary.toolbar_fullscreen}
       onclick=${toggleFullscreen}>
-      <div class="mask-icon map">`
+      <div class="mask-icon map">`;
 
-  btnColumn.append(btn)
+  btnColumn.append(btn);
 }
\ No newline at end of file
diff --git a/lib/plugins/keyvalue_dictionary.mjs b/lib/plugins/keyvalue_dictionary.mjs
index a0f940c279..da47d46962 100644
--- a/lib/plugins/keyvalue_dictionary.mjs
+++ b/lib/plugins/keyvalue_dictionary.mjs
@@ -1,44 +1,69 @@
-export function keyvalue_dictionary(keyvalue_dictionary, mapview) {
+/**
+### Keyvalue Dictionary Plugin
+@module /plugins/keyvalue_dictionary
+*/
 
+/**
+Replaces key-value pairs in the mapview locale object with dictionary entries.
+@function keyvalue_dictionary
+@param {Array} keyvalue_dictionary - An array of dictionary entries.
+@param {Object} mapview - The mapview object.
+@param {Object} mapview.locale - The locale object of the mapview.
+@returns {void}
+ */
+export function keyvalue_dictionary(keyvalue_dictionary, mapview) {
   if (!mapp.user.language) return;
-
   if (!mapview.locale) return;
-
-  parseObject(mapview.locale, keyvalue_dictionary)
+  parseObject(mapview.locale, keyvalue_dictionary);
 }
 
+/**
+Checks if an item is an array or an object and recursively applies the parsing logic.
+@function isArrayObject
+@param {*} item - The item to check.
+@param {Array} dictionary - An array of dictionary entries.
+@returns {boolean} - Returns true if the item is an array or an object, false otherwise.
+ */
 function isArrayObject(item, dictionary) {
-
   if (Array.isArray(item)) {
-    item.forEach(val => isArrayObject(val, dictionary))
-    return true
+    item.forEach(val => isArrayObject(val, dictionary));
+    return true;
   }
-
   if (item instanceof Object) {
-    parseObject(item, dictionary)
-    return true
+    parseObject(item, dictionary);
+    return true;
   }
 }
 
+/**
+Parses an object and replaces its string values with dictionary entries.
+@function parseObject
+@param {Object} obj - The object to parse.
+@param {Array} dictionary - An array of dictionary entries.
+@returns {void}
+*/
 function parseObject(obj, dictionary) {
-
   for (const [key, value] of Object.entries(obj)) {
-
     if (isArrayObject(value, dictionary)) continue;
-
     if (typeof value === 'string') replaceKeyValue(obj, key, value, dictionary);
   }
 }
 
+/**
+Replaces a key-value pair in an object with a dictionary entry.
+@function replaceKeyValue
+@param {Object} obj - The object containing the key-value pair.
+@param {string} key - The key of the value to replace.
+@param {string} value - The value to replace.
+@param {Array} dictionary - An array of dictionary entries.
+@returns {void}
+ */
 function replaceKeyValue(obj, key, value, dictionary) {
-
   // Find dictionary entry matching key and value.
   const entry = dictionary
     .filter(entry => entry.key === key)
-    .find(entry => entry.value === value)
-
+    .find(entry => entry.value === value);
   if (!entry) return;
-
   // Replace object key value with entry language lookup or default.
-  obj[key] = entry[mapp.user.language] || entry.default || value
+  obj[key] = entry[mapp.user.language] || entry.default || value;
 }
\ No newline at end of file
diff --git a/lib/plugins/locator.mjs b/lib/plugins/locator.mjs
index 9d634a213b..23d54a2c47 100644
--- a/lib/plugins/locator.mjs
+++ b/lib/plugins/locator.mjs
@@ -1,17 +1,29 @@
-export function locator(plugin, mapview) {
+/**
+### Locator Plugin
+@module /plugins/locator
+ */
 
+/**
+Adds a locator button to the map view for triggering geolocation.
+@function locator
+@param {Object} plugin - The plugin configuration object.
+@param {Object} mapview - The mapview object.
+@param {Function} mapview.locate - The locate function of the mapview.
+@returns {void}
+*/
+export function locator(plugin, mapview) {
   const btnColumn = document.getElementById('mapButton');
 
-  // the btnColumn element only exist in the default mapp view.
+  // The btnColumn element only exists in the default mapp view.
   if (!btnColumn) return;
 
   const btn = mapp.utils.html.node`
     <button
       title=${mapp.dictionary.toolbar_current_location}
       onclick=${(e) => {
-      e.target.classList.toggle('active');
-      mapview.locate();
-    }}><div class="mask-icon gps-not-fixed">`
+        e.target.classList.toggle('active');
+        mapview.locate();
+      }}><div class="mask-icon gps-not-fixed">`;
 
-  btnColumn.append(btn)
+  btnColumn.append(btn);
 }
\ No newline at end of file
diff --git a/lib/plugins/login.mjs b/lib/plugins/login.mjs
index 6d37ea5378..46c242174d 100644
--- a/lib/plugins/login.mjs
+++ b/lib/plugins/login.mjs
@@ -1,3 +1,15 @@
+/**
+### Login Plugin
+@module /plugins/login
+ */
+
+/**
+Adds a login/logout button to the map view.
+@function login
+@param {Object} plugin - The plugin configuration object.
+@param {Object} mapview - The mapview object.
+@returns {void}
+*/
 export function login(plugin, mapview) {
 
   const btnColumn = document.getElementById('mapButton');
diff --git a/lib/plugins/svg_templates.mjs b/lib/plugins/svg_templates.mjs
index 1ddd58cdf0..25da581aaf 100644
--- a/lib/plugins/svg_templates.mjs
+++ b/lib/plugins/svg_templates.mjs
@@ -1,3 +1,16 @@
+/**
+### Svg Templates Plugin
+@module /plugins/svg_templates
+*/
+
+/**
+Fetches and stores SVG templates for use in the application.
+@async
+@function svg_templates
+@param {Object} plugin - The plugin configuration object containing SVG template URLs.
+@param {Object} mapview - The mapview object.
+@returns {Promise<void>}
+*/
 export async function svg_templates(plugin, mapview) {
 
   if (typeof mapp.utils.svgSymbols.templates !== 'object') {
diff --git a/lib/plugins/zoomBtn.mjs b/lib/plugins/zoomBtn.mjs
index e3ebc34167..64d1135f11 100644
--- a/lib/plugins/zoomBtn.mjs
+++ b/lib/plugins/zoomBtn.mjs
@@ -1,3 +1,19 @@
+/**
+### Zoom Btn Plugin
+@module /plugins/zoomBtn
+*/
+
+/**
+Adds zoom in and zoom out buttons to the map view.
+@function zoomBtn
+@param {Object} plugin - The plugin configuration object.
+@param {Object} mapview - The mapview object.
+@param {ol.Map} mapview.Map - The OpenLayers map object.
+@param {Object} mapview.locale - The locale object of the mapview.
+@param {number} mapview.locale.maxZoom - The maximum zoom level allowed.
+@param {number} mapview.locale.minZoom - The minimum zoom level allowed.
+@returns {void}
+*/
 export function zoomBtn(plugin, mapview) {
 
   const btnColumn = document.getElementById('mapButton');
diff --git a/lib/plugins/zoomToArea.mjs b/lib/plugins/zoomToArea.mjs
index bb43ee36b8..58dd3fbf67 100644
--- a/lib/plugins/zoomToArea.mjs
+++ b/lib/plugins/zoomToArea.mjs
@@ -1,3 +1,18 @@
+/**
+### Zoom To Area Plugin
+@module /plugins/zoomtoArea
+*/
+
+/**
+Adds a "Zoom to Area" button to the map view for zooming to a specific area.
+@function zoomToArea
+@param {Object} plugin - The plugin configuration object.
+@param {Object} mapview - The mapview object.
+@param {Object} mapview.interactions - The interactions object of the mapview.
+@param {Function} mapview.interactions.highlight - The highlight interaction function.
+@param {Function} mapview.interactions.zoom - The zoom interaction function.
+@returns {void}
+*/
 export function zoomToArea(plugin, mapview) {
 
   const btnColumn = document.getElementById('mapButton');