From 12b39bdf842bcc8e1610c8a1a2446f63e651d15e Mon Sep 17 00:00:00 2001
From: VPoussou <94170838+VPoussou@users.noreply.github.com>
Date: Mon, 24 Jun 2024 11:57:49 +0200
Subject: [PATCH] Adding Scale control and swap map sources button +

Color burn at top of list and zoom level when latlon searching default 15
---
 public/swap.svg          | 7 +++++++
 src/App.tsx              | 8 +++++---
 src/blending-control.tsx | 4 ++--
 src/control-panel.tsx    | 5 ++++-
 src/geocoder-control.tsx | 3 ++-
 5 files changed, 20 insertions(+), 7 deletions(-)
 create mode 100644 public/swap.svg

diff --git a/public/swap.svg b/public/swap.svg
new file mode 100644
index 0000000..7f1d274
--- /dev/null
+++ b/public/swap.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="none">
+
<g fill="#000000">
+
<path d="M12.26 1.45a.75.75 0 10-1.02 1.1l2.1 1.95H7.75a.75.75 0 000 1.5h5.59l-2.1 1.95a.75.75 0 101.02 1.1l3.5-3.25a.75.75 0 000-1.1l-3.5-3.25zM2.66 10l2.1-1.95a.75.75 0 10-1.02-1.1L.24 10.2a.75.75 0 000 1.1l3.5 3.25a.75.75 0 001.02-1.1l-2.1-1.95h5.59a.75.75 0 000-1.5H2.66z"/>
+
</g>
+
</svg>
\ No newline at end of file
diff --git a/src/App.tsx b/src/App.tsx
index 19a3757..778342c 100644
--- a/src/App.tsx
+++ b/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}
diff --git a/src/blending-control.tsx b/src/blending-control.tsx
index db64760..0ff5fad 100644
--- a/src/blending-control.tsx
+++ b/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) => {
diff --git a/src/control-panel.tsx b/src/control-panel.tsx
index 7fcb10c..8be781c 100644
--- a/src/control-panel.tsx
+++ b/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}
diff --git a/src/geocoder-control.tsx b/src/geocoder-control.tsx
index 3c23a57..3c9954c 100644
--- a/src/geocoder-control.tsx
+++ b/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 },