From a322afdceec7a4dd20a3ed9a8647f3679ae882ac Mon Sep 17 00:00:00 2001
From: Harel M <harel.mazor@gmail.com>
Date: Sun, 14 Sep 2025 01:46:28 +0300
Subject: [PATCH] Use different icons for different layers (#1375)

## Launch Checklist

This changes the layers icons a bit in order to make them a bit more
distinct:

After:
<img width="580" height="331" alt="image"
src="https://github.com/user-attachments/assets/f341a64e-0310-40f7-8f5a-650d7bb06b9f"
/>


 - [x] Briefly describe the changes in this PR.
- [x] Include before/after visuals or gifs if this PR includes visual
changes.
 - [x] Add an entry to `CHANGELOG.md` under the `## main` section.

---------

Co-authored-by: Frank Elsinga <frank@elsinga.de>
---
 CHANGELOG.md                 |  1 +
 src/components/IconLayer.tsx | 24 +++++++++++++-----------
 2 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index a3201ef4..198b46af 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,6 +3,7 @@
 ### ✨ Features and improvements
 - Added translation to "Links" in debug modal
 - Add support for hillshade's color arrays and relief-color elevation expression
+- Change layers icons to make them a bit more distinct
 - Remove `@mdi` packages in favor of `react-icons`
 - _...Add new stuff here..._
 
diff --git a/src/components/IconLayer.tsx b/src/components/IconLayer.tsx
index d01c6059..6505ad24 100644
--- a/src/components/IconLayer.tsx
+++ b/src/components/IconLayer.tsx
@@ -1,9 +1,11 @@
 import React from "react";
 
 import type {CSSProperties} from "react";
-import { BsDiamond, BsDiamondFill, BsFonts, BsSun } from "react-icons/bs";
-import { MdBubbleChart, MdOutlineCircle, MdPriorityHigh } from "react-icons/md";
+import { BsBack, BsDiamondFill, BsSunFill } from "react-icons/bs";
+import { MdBubbleChart, MdCircle, MdLocationPin, MdPhoto, MdPriorityHigh } from "react-icons/md";
 import { IoAnalyticsOutline } from "react-icons/io5";
+import { IoMdCube } from "react-icons/io";
+import { FaMountain } from "react-icons/fa";
 
 type IconLayerProps = {
   type: string
@@ -14,16 +16,16 @@ type IconLayerProps = {
 const IconLayer: React.FC<IconLayerProps> = (props) => {
   const iconProps = { style: props.style };
   switch(props.type) {
-    case "fill-extrusion": return <BsDiamondFill {...iconProps} />;
-    case "raster": return <BsDiamond {...iconProps} />;
-    case "hillshade": return <BsSun {...iconProps} />;
-    case "color-relief": return <MdBubbleChart {...iconProps} />;
-    case "heatmap": return <BsDiamond {...iconProps} />;
-    case "fill": return <BsDiamond {...iconProps} />;
-    case "background": return <BsDiamondFill {...iconProps} />;
+    case "fill-extrusion": return <IoMdCube {...iconProps} />;
+    case "raster": return <MdPhoto {...iconProps} />;
+    case "hillshade": return <BsSunFill {...iconProps} />;
+    case "color-relief": return <FaMountain {...iconProps} />;
+    case "heatmap": return <MdBubbleChart {...iconProps} />;
+    case "fill": return <BsDiamondFill {...iconProps} />;
+    case "background": return <BsBack {...iconProps} />;
     case "line": return <IoAnalyticsOutline {...iconProps} />;
-    case "symbol": return <BsFonts {...iconProps} />;
-    case "circle": return <MdOutlineCircle {...iconProps} />;
+    case "symbol": return <MdLocationPin {...iconProps} />;
+    case "circle": return <MdCircle {...iconProps} />;
     default: return <MdPriorityHigh {...iconProps} />;
   }
 };