layer control customizing

src/Components/Map/Subcomponents/Controls/LayerControl.tsx

@@ -5,8 +5,8 @@ import LayerSVG from '#assets/layer.svg'
 import { useIsLayerVisible, useToggleVisibleLayer } from '#components/Map/hooks/useFilter'
 import { useLayers } from '#components/Map/hooks/useLayers'
 
-export function LayerControl() {
-  const [open, setOpen] = useState(false)
+export function LayerControl({ expandLayerControl = false }: { expandLayerControl: boolean }) {
+  const [open, setOpen] = useState(expandLayerControl)
 
   const layers = useLayers()
 

src/Components/Map/UtopiaMap.tsx

@@ -54,6 +54,7 @@ function UtopiaMap({
   showThemeControl = false,
   defaultTheme,
   donationWidget,
+  expandLayerControl,
 }: {
   /** height of the map (default '500px') */
   height?: string
@@ -79,6 +80,8 @@ function UtopiaMap({
   defaultTheme?: string
   /** ask to donate to the Utopia Project OpenCollective campaign (default false) */
   donationWidget?: boolean
+  /** open layer control on map initialisation */
+  expandLayerControl?: boolean
 }) {
   return (
     <ContextWrapper>
@@ -97,6 +100,7 @@ function UtopiaMap({
           donationWidget={donationWidget}
           showThemeControl={showThemeControl}
           defaultTheme={defaultTheme}
+          expandLayerControl={expandLayerControl}
         >
           {children}
         </UtopiaMapInner>

src/Components/Map/UtopiaMapInner.tsx

@@ -22,9 +22,7 @@ import {
   useAddVisibleLayer,
   useFilterTags,
   useResetFilterTags,
-  useResetVisibleLayers,
   useToggleVisibleLayer,
-  useVisibleLayer,
 } from './hooks/useFilter'
 import { useLayers } from './hooks/useLayers'
 import { useLeafletRefs } from './hooks/useLeafletRefs'
@@ -56,6 +54,7 @@ export function UtopiaMapInner({
   showThemeControl = false,
   defaultTheme = '',
   donationWidget,
+  expandLayerControl,
 }: {
   children?: React.ReactNode
   geo?: GeoJsonObject
@@ -65,6 +64,7 @@ export function UtopiaMapInner({
   donationWidget?: boolean
   showThemeControl?: boolean
   defaultTheme?: string
+  expandLayerControl?: boolean
 }) {
   const selectNewItemPosition = useSelectPosition()
   const setSelectNewItemPosition = useSetSelectPosition()
@@ -272,7 +272,7 @@ export function UtopiaMapInner({
       </Control>
       <Control position='bottomLeft' zIndex='999' absolute>
         {showFilterControl && <FilterControl />}
-        {showLayerControl && <LayerControl />}
+        {showLayerControl && <LayerControl expandLayerControl={expandLayerControl ?? false} />}
         {showGratitudeControl && <GratitudeControl />}
       </Control>
       <TileLayer

src/types/UtopiaMapProps.d.ts

@@ -16,4 +16,5 @@ export interface UtopiaMapProps {
   infoText?: string
   donationWidget?: boolean
   defaultTheme?: string
+  expandLayerControl?: boolean
 }