Fix saved farm fields visibility on atlas map

fdm-app/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog fdm-app
 
+## 0.25.2
+
+### Patch Changes
+
+- f443234: Fixes that saved fields of the farm are visible again with a colored outline
+
 ## 0.25.1
 
 ### Patch Changes

fdm-app/app/components/blocks/atlas/atlas-panels.tsx

@@ -38,22 +38,29 @@ export function FieldsPanelHover({
                 // Set message about zoom level
                 const zoom = map.getZoom()
                 if (zoom && zoom > zoomLevelFields) {
+                    if (!map.getLayer(layer)) return
+
                     const features = map.queryRenderedFeatures(evt.point, {
                         layers: [layer],
                     })
 
                     if (layerExclude) {
-                        const featuresExclude = map.queryRenderedFeatures(
-                            evt.point,
-                            {
-                                layers: Array.isArray(layerExclude)
-                                    ? layerExclude
-                                    : [layerExclude],
-                            },
-                        )
-                        if (featuresExclude && featuresExclude.length > 0) {
-                            setPanel(null)
-                            return
+                        const layers = Array.isArray(layerExclude)
+                            ? layerExclude
+                            : [layerExclude]
+                        const validLayers = layers.filter((l) => map.getLayer(l))
+
+                        if (validLayers.length > 0) {
+                            const featuresExclude = map.queryRenderedFeatures(
+                                evt.point,
+                                {
+                                    layers: validLayers,
+                                },
+                            )
+                            if (featuresExclude && featuresExclude.length > 0) {
+                                setPanel(null)
+                                return
+                            }
                         }
                     }
 

fdm-app/app/routes/farm.$b_id_farm.$calendar.atlas.fields._index.tsx

@@ -12,7 +12,10 @@ import { type LoaderFunctionArgs, useLoaderData } from "react-router"
 import { ZOOM_LEVEL_FIELDS } from "~/components/blocks/atlas/atlas"
 import { Controls } from "~/components/blocks/atlas/atlas-controls"
 import { FieldsPanelHover } from "~/components/blocks/atlas/atlas-panels"
-import { FieldsSourceAvailable } from "~/components/blocks/atlas/atlas-sources"
+import {
+    FieldsSourceAvailable,
+    FieldsSourceNotClickable,
+} from "~/components/blocks/atlas/atlas-sources"
 import { getFieldsStyle } from "~/components/blocks/atlas/atlas-styles"
 import { getViewState } from "~/components/blocks/atlas/atlas-viewstate"
 import { getMapboxStyle, getMapboxToken } from "~/integrations/mapbox"
@@ -117,10 +120,10 @@ export default function FarmAtlasFieldsBlock() {
 
     const id = "fieldsSaved"
     const fields = loaderData.savedFields
-    const _fieldsSavedStyle = getFieldsStyle(id)
+    const fieldsSavedStyle = getFieldsStyle(id)
     const fieldsAvailableId = "fieldsAvailable"
     const fieldsAvailableStyle = getFieldsStyle(fieldsAvailableId)
-    const _fieldsSavedOutlineStyle = getFieldsStyle("fieldsSavedOutline")
+    const fieldsSavedOutlineStyle = getFieldsStyle("fieldsSavedOutline")
     const initialViewState = getViewState(fields)
 
     // Create a sessionStorage to store the latest viewstate
@@ -191,6 +194,21 @@ export default function FarmAtlasFieldsBlock() {
                 <Layer {...fieldsAvailableStyle} layout={layerLayout} />
             </FieldsSourceAvailable>
 
+            {fields && (
+                <FieldsSourceNotClickable id={id} fieldsData={fields}>
+                    <Layer
+                        {...fieldsSavedOutlineStyle}
+                        source={id}
+                        layout={layerLayout}
+                    />
+                    <Layer
+                        {...fieldsSavedStyle}
+                        source={id}
+                        layout={layerLayout}
+                    />
+                </FieldsSourceNotClickable>
+            )}
+
             <div className="fields-panel grid gap-4 w-[350px]">
                 <FieldsPanelHover
                     zoomLevelFields={ZOOM_LEVEL_FIELDS}

fdm-app/app/routes/farm.create.$b_id_farm.$calendar.atlas.tsx

@@ -336,8 +336,14 @@ export default function Index() {
                                     id={fieldsSavedId}
                                     fieldsData={fieldsSaved}
                                 >
-                                    <Layer {...fieldsSavedStyle} />
-                                    <Layer {...fieldsSavedOutlineStyle} />
+                                    <Layer
+                                        {...fieldsSavedOutlineStyle}
+                                        source={fieldsSavedId}
+                                    />
+                                    <Layer
+                                        {...fieldsSavedStyle}
+                                        source={fieldsSavedId}
+                                    />
                                 </FieldsSourceNotClickable>
 
                                 <div className="fields-panel grid gap-4 w-[350px]">

fdm-app/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@svenvw/fdm-app",
-    "version": "0.25.1",
+    "version": "0.25.2",
     "private": true,
     "sideEffects": false,
     "type": "module",