diff --git a/.changeset/four-chairs-wave.md b/.changeset/four-chairs-wave.md
new file mode 100644
index 0000000000..94c0d987bb
--- /dev/null
+++ b/.changeset/four-chairs-wave.md
@@ -0,0 +1,5 @@
+---
+"geohub": patch
+---
+
+fix: fixed bug of converting maplibre function to step expression.
diff --git a/.changeset/smooth-candles-stare.md b/.changeset/smooth-candles-stare.md
new file mode 100644
index 0000000000..8125c888f3
--- /dev/null
+++ b/.changeset/smooth-candles-stare.md
@@ -0,0 +1,5 @@
+---
+"@undp-data/svelte-maplibre-storymap": patch
+---
+
+fix: fixed bug of restoring layer opacity when there is no paint property.
diff --git a/packages/svelte-maplibre-storymap/src/lib/MaplibreLegendControl.svelte b/packages/svelte-maplibre-storymap/src/lib/MaplibreLegendControl.svelte
index 651ad17c75..8b45c64d92 100644
--- a/packages/svelte-maplibre-storymap/src/lib/MaplibreLegendControl.svelte
+++ b/packages/svelte-maplibre-storymap/src/lib/MaplibreLegendControl.svelte
@@ -166,7 +166,8 @@
 		const layer = style?.layers?.find((l) => l.id === layerId);
 		if (!layer) return 0;
 
-		if (layer.layout?.visibility === 'none') {
+		let invisible = layer.layout?.visibility === 'none';
+		if (invisible) {
 			return 0;
 		}
 
@@ -179,11 +180,17 @@
 		const props: string[] = layerTypes[layer.type];
 		if (props && props.length > 0) {
 			for (const prop of props) {
-				const v = layer.paint[prop];
-				opacity = v ?? 1;
+				if (layer.paint && prop in layer.paint) {
+					const v = layer.paint[prop];
+					opacity = v;
+				}
 			}
 		}
 
+		if (opacity === 0 && !invisible) {
+			opacity = 1;
+		}
+
 		return opacity;
 	};
 
diff --git a/sites/geohub/src/components/pages/map/layers/LayerEdit.svelte b/sites/geohub/src/components/pages/map/layers/LayerEdit.svelte
index 7075498cc3..885a8a61d3 100644
--- a/sites/geohub/src/components/pages/map/layers/LayerEdit.svelte
+++ b/sites/geohub/src/components/pages/map/layers/LayerEdit.svelte
@@ -40,7 +40,8 @@
 		const layer = style?.layers?.find((l) => l.id === $editingLayerStore?.id);
 		if (!layer) return 0;
 
-		if (layer.layout?.visibility === 'none') {
+		let invisible = layer.layout?.visibility === 'none';
+		if (invisible) {
 			return 0;
 		}
 
@@ -53,11 +54,17 @@
 		const props: string[] = layerTypes[layer.type];
 		if (props && props.length > 0) {
 			for (const prop of props) {
-				const v = layer.paint[prop];
-				opacity = v ?? 1;
+				if (layer.paint && prop in layer.paint) {
+					const v = layer.paint[prop];
+					opacity = v;
+				}
 			}
 		}
 
+		if (opacity === 0 && !invisible) {
+			opacity = 1;
+		}
+
 		return opacity;
 	};
 
diff --git a/sites/geohub/src/components/pages/map/layers/LayerTemplate.svelte b/sites/geohub/src/components/pages/map/layers/LayerTemplate.svelte
index 7f498f67f5..dfcfd3a347 100644
--- a/sites/geohub/src/components/pages/map/layers/LayerTemplate.svelte
+++ b/sites/geohub/src/components/pages/map/layers/LayerTemplate.svelte
@@ -203,7 +203,8 @@
 		const l = style?.layers?.find((l) => l.id === layer.id);
 		if (!l) return 0;
 
-		if (l.layout?.visibility === 'none') {
+		let invisible = l.layout?.visibility === 'none';
+		if (invisible) {
 			return 0;
 		}
 
@@ -216,11 +217,17 @@
 		const props: string[] = layerTypes[l.type];
 		if (props && props.length > 0) {
 			for (const prop of props) {
-				const v = l.paint[prop];
-				opacity = v ?? 1;
+				if (l.paint && prop in l.paint) {
+					const v = l.paint[prop];
+					opacity = v;
+				}
 			}
 		}
 
+		if (opacity === 0 && !invisible) {
+			opacity = 1;
+		}
+
 		return opacity;
 	};
 
diff --git a/sites/geohub/src/lib/helper/convertFunctionToExpression.ts b/sites/geohub/src/lib/helper/convertFunctionToExpression.ts
index f7dc0acd5f..4a3d66b206 100644
--- a/sites/geohub/src/lib/helper/convertFunctionToExpression.ts
+++ b/sites/geohub/src/lib/helper/convertFunctionToExpression.ts
@@ -13,15 +13,25 @@ export const convertFunctionToExpression = (value: unknown, defaultValue: unknow
 			const steps: unknown[] = ['step', ['get', property]];
 
 			if ('stops' in value && Array.isArray(value.stops)) {
+				let thresholds: number[] = [];
+				const colors: string[] = [];
 				for (let i = 0; i < value.stops.length; i++) {
 					const stop = value.stops[i];
 					const c: string = stop[1];
 					const v: number = stop[0];
+					thresholds.push(v);
+					colors.push(c);
+				}
+				// first value is minimum value in the dataset, it should be skiped for step expression.
+				thresholds = thresholds.splice(1);
+
+				colors.forEach((c, index) => {
+					const v: number = thresholds[index];
 					steps.push(c);
-					if (i !== value.stops.length - 1) {
+					if (index !== colors.length - 1) {
 						steps.push(v);
 					}
-				}
+				});
 			}
 			return steps;
 		} else if ('type' in value && value.type === 'categorical') {