From 79e1b5ec4837d62a089340f27b90999662f64eee Mon Sep 17 00:00:00 2001
From: Ken Greim <34892440+kengreim@users.noreply.github.com>
Date: Tue, 28 May 2024 20:38:37 -0700
Subject: [PATCH] Add effect to call `moveLayer` when `beforeId` is changed

---
 src/components/Layer/index.tsx | 23 +++++++++++++++++++----
 1 file changed, 19 insertions(+), 4 deletions(-)

diff --git a/src/components/Layer/index.tsx b/src/components/Layer/index.tsx
index bedb664..546a039 100644
--- a/src/components/Layer/index.tsx
+++ b/src/components/Layer/index.tsx
@@ -1,4 +1,4 @@
-import { onCleanup, createEffect, Component, createUniqueId } from "solid-js";
+import { onCleanup, createEffect, Component, createUniqueId, createMemo } from "solid-js";
 import { useMapContext } from "../MapProvider";
 import { useSourceId } from "../Source";
 import { layerEvents } from "../../events";
@@ -100,6 +100,12 @@ export const Layer: Component<Props> = (props) => {
       console.debug("%c[MapGL]", "color: #10b981", text, value || "");
   };
 
+  const getBeforeId = createMemo(() =>
+    props.beforeType
+      ? ctx.map.getStyle().layers.find((l) => l.type === props.beforeType)?.id
+      : props.beforeId
+  );
+
   // Add Layer
   ctx.map.addLayer(
     props.customLayer || {
@@ -111,9 +117,7 @@ export const Layer: Component<Props> = (props) => {
         smg: { beforeType: props.beforeType, beforeId: props.beforeId },
       },
     },
-    props.beforeType
-      ? ctx.map.getStyle().layers.find((l) => l.type === props.beforeType)?.id
-      : props.beforeId,
+    getBeforeId()
   );
   ctx.map.layerIdList.push(layerId);
   if (props.customLayer) ctx.map.fire("load");
@@ -171,6 +175,17 @@ export const Layer: Component<Props> = (props) => {
     return props.visible;
   }, props.visible);
 
+  // Update Layer Z-Index
+  createEffect((prev: string) => {
+    if (getBeforeId() === prev) return;
+
+    ctx.map.moveLayer(
+      layerId,
+      getBeforeId()
+    );
+    return getBeforeId();
+  }, getBeforeId())
+
   // Update Filter
   createEffect(async () => {
     if (!props.filter) return;