Hide boundaries on map (#690)

* Hide boundaries on map

* Hide boundaries on map

Author: luccasmmg

deployment/frontend/src/components/_shared/HideBoundaries.tsx

@@ -0,0 +1,27 @@
+import { useMap } from 'react-map-gl'
+
+export function HideBoundaries() {
+    const { current: map } = useMap()
+    if (map) {
+        map.on('load', () => {
+            const layersToHide = [
+                'admin-2-boundaries',
+                'admin-2-boundaries-bg',
+                'admin-3-4-boundaries',
+                'admin-3-4-boundaries-bg',
+            ]
+
+            layersToHide.forEach((layerId) => {
+                // Check if the layer actually exists in the current style before trying to hide it
+                if (map && map.getLayer(layerId)) {
+                    map.getMap().setLayoutProperty(
+                        layerId,
+                        'visibility',
+                        'none'
+                    )
+                }
+            })
+        })
+    }
+    return null
+}

deployment/frontend/src/components/_shared/map/controls/Settings.tsx

@@ -6,10 +6,10 @@ import { type MapRef } from 'react-map-gl'
 import Boundaries from './Boundaries'
 import { SettingsIcon } from '../../icons/SettingsIcon'
 
-import dynamic from 'next/dynamic';
+import dynamic from 'next/dynamic'
 const Modal = dynamic(() => import('@/components/_shared/Modal'), {
     ssr: false,
-});
+})
 
 export default function Settings({
     mapRef,
@@ -18,7 +18,7 @@ export default function Settings({
 }) {
     const [open, setOpen] = useState(false)
     return (
-        <IconButton tooltip='Map settings' onClick={() => setOpen(true)}>
+        <IconButton tooltip="Map settings" onClick={() => setOpen(true)}>
             <SettingsIcon />
             <Modal open={open} setOpen={setOpen} className="max-w-[36rem]">
                 <h2 className="font-['Acumin Pro SemiCondensed'] text-3xl font-normal text-black mb-5">
@@ -31,12 +31,8 @@ export default function Settings({
                     <div className="basis-1/2 pr-2">
                         <LabelSelector />
                     </div>
-                    <div className="basis-1/2">
-                        <Boundaries mapRef={mapRef} />
-                    </div>
                 </div>
             </Modal>
         </IconButton>
     )
 }
-

deployment/frontend/src/components/dashboard/datasets/admin/datafiles/DatafileLocation.tsx

@@ -15,6 +15,7 @@ import notify from '@/utils/notify'
 import Spinner from '@/components/_shared/Spinner'
 import { UseFormReturn } from 'react-hook-form'
 import * as turf from '@turf/turf'
+import { HideBoundaries } from '@/components/_shared/HideBoundaries'
 
 export function DatafileLocation({
     formObj,
@@ -211,6 +212,7 @@ export function DatafileLocation({
                                     touchZoomRotate={false}
                                     initialViewState={{ zoom: 2 }}
                                 >
+                                    <HideBoundaries />
                                     <Source
                                         type="geojson"
                                         data={watch(
@@ -248,6 +250,7 @@ export function DatafileLocation({
                                 dragRotate={false}
                                 touchZoomRotate={false}
                             >
+                                <HideBoundaries />
                                 <GeocoderControl
                                     mapboxAccessToken="pk.eyJ1IjoicmVzb3VyY2V3YXRjaCIsImEiOiJjbHNueG5idGIwOXMzMmp0ZzE1NWVjZDV1In0.050LmRm-9m60lrzhpsKqNA"
                                     position="bottom-right"

deployment/frontend/src/components/dashboard/datasets/admin/metadata/LocationForm.tsx

@@ -21,6 +21,7 @@ import GeocoderControl from '@/components/search/GeocoderControl'
 import { Layer, Map, Source } from 'react-map-gl'
 import notify from '@/utils/notify'
 import Spinner from '@/components/_shared/Spinner'
+import { HideBoundaries } from '@/components/_shared/HideBoundaries'
 
 export function LocationForm({
     formObj,
@@ -245,6 +246,7 @@ export function LocationForm({
                                     touchZoomRotate={false}
                                     initialViewState={{ zoom: 2 }}
                                 >
+                                    <HideBoundaries />
                                     <Source
                                         type="geojson"
                                         data={watch('spatial')}
@@ -280,6 +282,7 @@ export function LocationForm({
                                 dragRotate={false}
                                 touchZoomRotate={false}
                             >
+                                <HideBoundaries />
                                 <GeocoderControl
                                     mapboxAccessToken="pk.eyJ1IjoicmVzb3VyY2V3YXRjaCIsImEiOiJjbHNueG5idGIwOXMzMmp0ZzE1NWVjZDV1In0.050LmRm-9m60lrzhpsKqNA"
                                     position="bottom-right"
@@ -292,7 +295,9 @@ export function LocationForm({
                                     onClear={(e) => {
                                         setValue('spatial_address', '')
                                     }}
-                                    initialValue={watch('spatial_address') ?? undefined}
+                                    initialValue={
+                                        watch('spatial_address') ?? undefined
+                                    }
                                 />
                             </Map>
                         </Tab.Panel>

deployment/frontend/src/components/datasets/sections/LocationSearch.tsx

@@ -7,12 +7,14 @@ import {
     MapRef,
     Marker,
     Source,
+    useMap,
 } from 'react-map-gl'
 import GeocoderControl from '@/components/search/GeocoderControl'
 import { useQuery } from 'react-query'
 import { UseFormReturn, useForm } from 'react-hook-form'
 import DrawControl from '@/components/search/Draw'
 import { LocationSearchFormType } from './DataFiles'
+import { HideBoundaries } from '@/components/_shared/HideBoundaries'
 
 export default function LocationSearch({
     geojsons,
@@ -126,7 +128,6 @@ export default function LocationSearch({
         }
     }, [])
 
-    console.log('cursor', cursor)
     return (
         <Map
             ref={(_map) => {
@@ -145,6 +146,7 @@ export default function LocationSearch({
             onClick={handleMapClick}
             cursor={cursor}
         >
+            <HideBoundaries />
             <GeocoderControl
                 mapboxAccessToken="pk.eyJ1IjoicmVzb3VyY2V3YXRjaCIsImEiOiJjbHNueG5idGIwOXMzMmp0ZzE1NWVjZDV1In0.050LmRm-9m60lrzhpsKqNA"
                 position="bottom-right"

deployment/frontend/src/components/search/LocationSearch.tsx

@@ -6,6 +6,7 @@ import { Dispatch, SetStateAction } from 'react'
 import { SearchInput } from '@/schema/search.schema'
 import { Filter } from '@/interfaces/search.interface'
 import classNames from '@/utils/classnames'
+import { HideBoundaries } from '../_shared/HideBoundaries'
 
 export default function LocationSearch({
     setFilters,
@@ -145,6 +146,7 @@ export default function LocationSearch({
                                     dragRotate={false}
                                     touchZoomRotate={false}
                                 >
+                                    <HideBoundaries />
                                     <GeocoderControl
                                         mapboxAccessToken="pk.eyJ1IjoicmVzb3VyY2V3YXRjaCIsImEiOiJjbHNueG5idGIwOXMzMmp0ZzE1NWVjZDV1In0.050LmRm-9m60lrzhpsKqNA"
                                         position="bottom-right"