reintroduces style switcher and adds types

Author: DonovanAndrews300

src/components/MapStyleSwitcher.tsx

@@ -14,7 +14,14 @@ const MapStyleSwitcher: React.FC<MapStyleSwitcherProps> = ({
   useEffect(() => {
     console.log('MapStyleSwitcher rendered', handleStyleChange);
   });
-  const baseMaps = {
+  type BaseMap = {
+    name: string;
+    img: string;
+  };
+
+  type BaseMaps = Record<string, BaseMap>;
+
+  const baseMaps: BaseMaps = {
     STREETS: {
       name: 'Street',
       img: 'https://cloud.maptiler.com/static/img/maps/streets.png',
@@ -37,7 +44,7 @@ const MapStyleSwitcher: React.FC<MapStyleSwitcherProps> = ({
 
   return (
     <div
-      className="relative maplibregl-ctrl maplibregl-ctrl-basemaps"
+      className="relative maplibregl-ctrl maplibregl-ctrl-basemaps p-2"
       onMouseEnter={() => setIsHovered(true)}
       onMouseLeave={() => setIsHovered(false)}
     >
@@ -51,7 +58,7 @@ const MapStyleSwitcher: React.FC<MapStyleSwitcherProps> = ({
       />
 
       <div
-        className={`absolute flex flex-row items-center transition-transform duration-300 ${
+        className={`absolute flex flex-row items-center pl-2 transition-transform duration-300 ${
           isHovered
             ? 'translate-x-20 opacity-100'
             : 'translate-x-0 opacity-0 pointer-events-none'

src/components/PropertyMap.tsx

@@ -8,7 +8,6 @@ import {
   Dispatch,
   SetStateAction,
   ReactElement,
-  ElementRef,
 } from 'react';
 import {
   maptilerApiKey,
@@ -108,7 +107,13 @@ const layerStylePoints: CircleLayerSpecification = {
   },
 };
 
-const mapStyles = {
+type MapStyle = {
+  url: string;
+};
+
+type MapStyles = Record<string, MapStyle>;
+
+const mapStyles: MapStyles = {
   DataVisualization: {
     url: `https://api.maptiler.com/maps/dataviz/style.json?key=${maptilerApiKey}`,
   },
@@ -131,6 +136,8 @@ const MapControls: React.FC<{
     <>
       <NavigationControl showCompass={false} position="bottom-right" />
       <GeolocateControl position="bottom-right" />
+      <ScaleControl />
+      <MapStyleSwitcher handleStyleChange={handleStyleChange} />
       {smallScreenToggle || window.innerWidth > 640 ? (
         <MapLegendControl
           position="bottom-left"
@@ -509,21 +516,13 @@ const PropertyMap: FC<PropertyMapProps> = ({
         onError={(e) => {
           console.log(e);
           if (
-            e.message ===
+            e.error.cause ===
             "The layer 'vacant_properties_tiles_polygons' does not exist in the map's style and cannot be queried for features."
           )
             setHasLoadingError(true);
         }}
         onLoad={(e) => {
           setMap(e.target);
-          const attributionButton: HTMLElement | null = document.querySelector(
-            '.maplibregl-ctrl-attrib-button'
-          );
-          if (attributionButton) {
-            attributionButton.click();
-          } else {
-            console.warn('Attribution button not found.');
-          }
         }}
         onSourceData={(e) => {
           handleSetFeatures(e);