Adding Scale control and swap map sources button +

Color burn at top of list and zoom level when latlon searching default 15

src/App.tsx

@@ -1,10 +1,10 @@
 import { useState, useRef, useEffect, useCallback, useMemo } from "react";
 
 import "./App.css";
-import Map, { type MapRef, Source, Layer } from "react-map-gl";
+import Map, { type MapRef, Source, Layer, ScaleControl } from "react-map-gl";
 import GeocoderControl from "./geocoder-control";
 import ControlPanel, { type MapSplitMode } from "./control-panel";
-import { subMonths } from "date-fns";
+import { set, subMonths } from "date-fns";
 import Split from "react-split";
 
 import { ToggleButton, ToggleButtonGroup } from "@mui/material";
@@ -16,6 +16,7 @@ import {
   debounce,
   useLocalStorage,
 } from "./utilities";
+import mapboxgl from "mapbox-gl";
 
 const MAPBOX_TOKEN = import.meta.env.VITE_MAPBOX_TOKEN;
 
@@ -323,7 +324,6 @@ function App() {
         onMove={activeMap === "left" ? onMoveDebounce : () => ({})}
         style={LeftMapStyle}
         mapStyle={leftMapboxMapStyle}
-
         // projection={"naturalEarth"} // globe mercator naturalEarth equalEarth  // TODO: eventually make projection controllable
       >
         <GeocoderControl
@@ -378,6 +378,7 @@ function App() {
           </Source> 
         } */}
         {/* beforeId={"GROUP_"} */}
+        <ScaleControl maxWidth={60} unit="metric" position={'top-left'}/>
       </Map>
       <Map
         {...sharedMapsProps}
@@ -438,6 +439,7 @@ function App() {
         setSelectedTms={
           clickedMap == "left" ? setLeftSelectedTms : setRightSelectedTms
         }
+        swapMapSources={() => {setLeftSelectedTms(rightSelectedTms); setRightSelectedTms(leftSelectedTms)}}
         splitScreenMode={splitScreenMode}
         setSplitScreenMode={setSplitScreenMode}
         setSplitPanelSizesPercent={setSplitPanelSizesPercent}

src/blending-control.tsx

@@ -3,8 +3,8 @@ import { FormControl, InputLabel, MenuItem, Select } from "@mui/material";
 
 const BlendingControl = (props:any) => {
   const blendingModes = [
-    'difference', 'exclusion', 'normal', 'multiply', 'screen', 'overlay', 'darken', 'lighten',
-    'color-dodge', 'color-burn', 'hard-light', 'soft-light', 'hue', 'saturation', 'color', 'luminosity'
+    'difference', 'exclusion', 'color-burn', 'normal', 'multiply', 'screen', 'overlay', 'darken', 'lighten',
+    'color-dodge', 'hard-light', 'soft-light', 'hue', 'saturation', 'color', 'luminosity'
   ];
 
   const handleBlendingModeChange = (event:any) => {

src/control-panel.tsx

@@ -24,7 +24,6 @@ import {
   MenuItem,
 } from "@mui/material";
 import { differenceInMonths, eachMonthOfInterval, isValid } from "date-fns";
-
 import {
   sliderValToDate,
   dateToSliderVal,
@@ -38,6 +37,7 @@ import {
   useLocalStorage,
   // convertLatlonTo3857,
 } from "./utilities";
+import { width } from "@fortawesome/free-solid-svg-icons/fa0";
 
 const TITILER_ENDPOINT = "https://titiler.xyz"; // https://app.iconem.com/titiler
 const MAX_FRAME_RESOLUTION = 2048; // 1024 - 2048
@@ -132,6 +132,8 @@ function ControlPanel(props:any) {
   // Adding blending activation state
   const blendingActivation = props.blendingActivation || true;
   const setBlendingActivation = props.setBlendingActivation || (() => {});
+  // Adding map sources swap
+  const swapMapSources = props.swapMapSources
   // Slider control
   // For slider play/pause loops
   // const [playbackSpeedFPS, setPlaybackSpeedFPS] = useState<number>(2);
@@ -389,6 +391,7 @@ function ControlPanel(props:any) {
               </LocalizationProvider>{" "}
             </>
           )}{" "}
+          <img src="swap.svg" onClick={swapMapSources} style={{width: '30px', height: 'auto'}}></img>
           <div>
             <BlendingControl
             blendingMode={blendingMode}

src/geocoder-control.tsx

@@ -92,7 +92,8 @@ export default function GeocoderControl(
       const ctrl = new MapboxGeocoder({
         ...props,
         localGeocoder: coordinatesGeocoder,
-        zoom: 12,
+        addressAccuracy: 'place',
+        zoom: 15,
         marker: false,
         accessToken: props.mapboxAccessToken,
         flyTo: { duration: 100 },