fix: migrate to new layer selector

Author: stdavis

package.json

@@ -30,9 +30,8 @@
   "dependencies": {
     "@arcgis/core": "^4.31.1",
     "@heroicons/react": "^2.1.5",
-    "@ugrc/layer-selector": "^6.2.12",
-    "@ugrc/utah-design-system": "^1.19.0",
-    "@ugrc/utilities": "^2.4.3",
+    "@ugrc/utah-design-system": "^1.20.2",
+    "@ugrc/utilities": "^3.0.2",
     "firebase": "^11.0.1",
     "ky": "^1.7.4",
     "lodash.startcase": "^4.4.0",

pnpm-lock.yaml

@@ -2,14 +2,12 @@ import Polygon from '@arcgis/core/geometry/Polygon';
 import VectorTileLayer from '@arcgis/core/layers/VectorTileLayer';
 import EsriMap from '@arcgis/core/Map';
 import MapView from '@arcgis/core/views/MapView';
-import LayerSelector from '@ugrc/layer-selector';
+import { LayerSelector, type LayerSelectorProps } from '@ugrc/utah-design-system';
 import { useEffect, useRef, useState } from 'react';
 import cityExtents from './data/cityExtents';
 import { useMap } from './hooks';
 import { randomize } from './utils';
 
-import '@ugrc/layer-selector/src/LayerSelector.css';
-
 const { item: randomExtent } = randomize<__esri.GraphicProperties>(cityExtents);
 const urls = {
   landownership:
@@ -18,26 +16,12 @@ const urls = {
     'https://www.arcgis.com/sharing/rest/content/items/77202507796a4d5796b7d8e6871e352e/resources/styles/root.json',
 };
 
-type LayerFactory = {
-  Factory: new () => __esri.Layer;
-  url: string;
-  id: string;
-  opacity: number;
-};
-type SelectorOptions = {
-  view: MapView;
-  quadWord: string;
-  baseLayers: Array<string | { token: string; selected: boolean } | LayerFactory>;
-  overlays?: Array<string | LayerFactory>;
-  position: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
-};
-
 export const MapContainer = ({ onClick }: { onClick?: __esri.ViewImmediateClickEventHandler }) => {
   const mapNode = useRef<HTMLDivElement | null>(null);
   const mapComponent = useRef<EsriMap | null>(null);
   const mapView = useRef<MapView>();
   const clickHandler = useRef<IHandle>();
-  const [selectorOptions, setSelectorOptions] = useState<SelectorOptions | null>(null);
+  const [selectorOptions, setSelectorOptions] = useState<LayerSelectorProps | null>(null);
   const { setMapView } = useMap();
 
   // setup the Map
@@ -59,39 +43,32 @@ export const MapContainer = ({ onClick }: { onClick?: __esri.ViewImmediateClickE
 
     setMapView(mapView.current);
 
-    const selectorOptions: SelectorOptions = {
-      view: mapView.current,
-      quadWord: import.meta.env.VITE_DISCOVER,
-      baseLayers: [
-        'Hybrid',
-        {
-          Factory: VectorTileLayer,
-          url: urls.liteVector,
-          id: 'Lite',
-          opacity: 1,
-        },
-        'Terrain',
-        'Topo',
-        'Color IR',
-      ],
-      overlays: [
-        'Address Points',
-        {
-          Factory: VectorTileLayer,
-          url: urls.landownership,
-          id: 'Land Ownership',
-          opacity: 0.3,
-        },
-      ],
-      position: 'top-right',
+    const selectorOptions: LayerSelectorProps = {
+      options: {
+        view: mapView.current,
+        quadWord: import.meta.env.VITE_DISCOVER,
+        baseLayers: [
+          'Hybrid',
+          {
+            label: 'Lite',
+            function: () =>
+              new VectorTileLayer({
+                url: urls.liteVector,
+                opacity: 1,
+              }),
+          },
+          'Terrain',
+          'Topo',
+          'Color IR',
+        ],
+        referenceLayers: ['Address Points', 'Land Ownership'],
+      },
     };
 
-    const { index: randomBaseMapIndex } = randomize(selectorOptions.baseLayers);
+    const { index: randomBaseMapIndex } = randomize(selectorOptions.options.baseLayers);
 
-    selectorOptions.baseLayers[randomBaseMapIndex] = {
-      token: selectorOptions.baseLayers[randomBaseMapIndex] as string,
-      selected: true,
-    };
+    const removed = selectorOptions.options.baseLayers.splice(randomBaseMapIndex, 1);
+    selectorOptions.options.baseLayers.unshift(removed[0]!);
 
     setSelectorOptions(selectorOptions);
 
@@ -114,7 +91,7 @@ export const MapContainer = ({ onClick }: { onClick?: __esri.ViewImmediateClickE
 
   return (
     <div ref={mapNode} className="size-full">
-      {selectorOptions?.view && <LayerSelector {...selectorOptions}></LayerSelector>}
+      {selectorOptions && <LayerSelector {...selectorOptions}></LayerSelector>}
     </div>
   );
 };