ashatora/editor
1
0
Fork 0
mirror of https://github.com/maputnik/editor.git synced 2025-12-25 15:40:00 +00:00
Code Issues Projects Releases Wiki Activity

Use different icons for different layers (#1375)

Browse Source 
## 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>
This commit is contained in:
Harel M
2025-09-14 01:46:28 +03:00
committed by GitHub
parent c6f599cc61
commit a322afdcee
2 changed files with 14 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src/components/IconLayer.tsx
View File

@@ -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} />;
}
};