Scaling in markers option in chart modifiers box

Author: steps39

SedimentDataExplorer.html

@@ -595,7 +595,7 @@
     <div id="everything" style="display: none;"></div>
 
     <header>
-        <h1>Sediment Data Explorer <small style="font-weight: normal; opacity: 0.8;">v1.20251018</small></h1>
+        <h1>Sediment Data Explorer <small style="font-weight: normal; opacity: 0.8;">v1.20251020</small></h1>
         <div class="header-actions">
             <button onclick="updateChart()">(Re)Plot Chart</button>
             <button onclick="exportCharts()" class="secondary">Export Chart</button>
@@ -701,6 +701,7 @@ <h1>Sediment Data Explorer <small style="font-weight: normal; opacity: 0.8;">v1.
                 <button onclick="openDatasetLabels()">Enter Dataset Labels</button>
                 <button onclick="openSampleLabels()">Enter Sample Labels</button>
                 <button onclick="openChartModifiersModal()">Chart Modifiers</button>
+                <button onclick="openMapModifiersModal()">Map Modifiers</button>
                 <hr>
                 <div class="input-group">
                     <label for="primary-sorting-select">Primary Sort:</label>
@@ -871,6 +872,13 @@ <h2>Chart Modifiers</h2>
             <div class="modal-footer"><button onclick="closeChartModifiersModal()" class="secondary">Close</button></div>
         </div>
     </div>
+    <div id="mapModifiersModal" class="modal">
+        <div class="modal-content">
+            <h2>Map Modifiers</h2>
+            <label for="markerScaling">Marker Scaling Factor:</label><input type="number" id="markerScaling" placeholder="2">
+            <div class="modal-footer"><button onclick="closeMapModifiersModal()" class="secondary">Close</button></div>
+        </div>
+    </div>
     <div id="additionalChartsModal" class="modal">
         <div class="modal-content">
             <h2>Additional Chart Options</h2>
@@ -1175,6 +1183,11 @@ <h2>Select Radar Plot for Map Popups</h2>
         function closeAdditionalInfoModal() { document.getElementById('additionalInfoModal').style.display = 'none'; }
         function openChartModifiersModal() { document.getElementById('chartModifiersModal').style.display = 'block'; }
         function closeChartModifiersModal() { document.getElementById('chartModifiersModal').style.display = 'none'; }
+        function openMapModifiersModal() { document.getElementById('mapModifiersModal').style.display = 'block'; }
+        function closeMapModifiersModal() { 
+            document.getElementById('mapModifiersModal').style.display = 'none';
+            markerScaling = parseFloat(document.getElementById('markerScaling').value) || 2;
+         }
         function openAdditionalChartsModal() { document.getElementById('additionalChartsModal').style.display = 'block'; }
         function closeAdditionalChartsModal() { document.getElementById('additionalChartsModal').style.display = 'none'; }
         function openPcaOptionsModal() { document.getElementById('pcaOptionsModal').style.display = 'block'; }

sdeMaps.js

@@ -17,6 +17,7 @@ let depthStatsGlobal = { min: Infinity, max: -Infinity };
 let depthSortedSampleIds = [];
 let minLat = null, maxLat = null, minLon = null, maxLon = null;
 let noLocations = 0, latSum = 0, lonSum = 0;
+let markerScaling = 2.0;
 const hoverStyle = { radius: 10, weight: 3, opacity: 1, fillOpacity: 1 };
 
 const highlightStyle = {
@@ -78,10 +79,9 @@ const highlightStyle = {
 
     function getLogDepthRadius3Levels(depth, depthMin, depthMax, zoomLevel = null) {
         // Define geographic sizes in meters for each depth level
-        const rScalingFactor = 2.0; // You can adjust this factor to scale all sizes
-        const rSmallMeters = 5 * rScalingFactor;    // 5 meters for shallow samples
-        const rMedMeters = 10 * rScalingFactor;     // 10 meters for medium depth samples
-        const rLargeMeters = 15 * rScalingFactor;   // 15 meters for deep samples
+        const rSmallMeters = 5 * markerScaling;    // 5 meters for shallow samples
+        const rMedMeters = 10 * markerScaling;     // 10 meters for medium depth samples
+        const rLargeMeters = 15 * markerScaling;   // 15 meters for deep samples
 
         let radiusInMeters;
         if (depth == null || isNaN(depth) || depthMin === depthMax) {