ashatora/editor
1
0
Fork 0
mirror of https://github.com/maputnik/editor.git synced 2026-07-30 09:47:28 +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
CHANGELOG.md
+1
View File
@@ -3,6 +3,7 @@
### ✨ Features and improvements ### ✨ Features and improvements
- Added translation to "Links" in debug modal - Added translation to "Links" in debug modal
- Add support for hillshade's color arrays and relief-color elevation expression - 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` - Remove `@mdi` packages in favor of `react-icons`
- _...Add new stuff here..._ - _...Add new stuff here..._
src/components/IconLayer.tsx
+13 -11
View File
@@ -1,9 +1,11 @@
import React from "react"; import React from "react";
import type {CSSProperties} from "react"; import type {CSSProperties} from "react";
import { BsDiamond, BsDiamondFill, BsFonts, BsSun } from "react-icons/bs"; import { BsBack, BsDiamondFill, BsSunFill } from "react-icons/bs";
import { MdBubbleChart, MdOutlineCircle, MdPriorityHigh } from "react-icons/md"; import { MdBubbleChart, MdCircle, MdLocationPin, MdPhoto, MdPriorityHigh } from "react-icons/md";
import { IoAnalyticsOutline } from "react-icons/io5"; import { IoAnalyticsOutline } from "react-icons/io5";
import { IoMdCube } from "react-icons/io";
import { FaMountain } from "react-icons/fa";
type IconLayerProps = { type IconLayerProps = {
type: string type: string
@@ -14,16 +16,16 @@ type IconLayerProps = {
const IconLayer: React.FC<IconLayerProps> = (props) => { const IconLayer: React.FC<IconLayerProps> = (props) => {
const iconProps = { style: props.style }; const iconProps = { style: props.style };
switch(props.type) { switch(props.type) {
case "fill-extrusion": return <BsDiamondFill {...iconProps} />; case "fill-extrusion": return <IoMdCube {...iconProps} />;
case "raster": return <BsDiamond {...iconProps} />; case "raster": return <MdPhoto {...iconProps} />;
case "hillshade": return <BsSun {...iconProps} />; case "hillshade": return <BsSunFill {...iconProps} />;
case "color-relief": return <MdBubbleChart {...iconProps} />; case "color-relief": return <FaMountain {...iconProps} />;
case "heatmap": return <BsDiamond {...iconProps} />; case "heatmap": return <MdBubbleChart {...iconProps} />;
case "fill": return <BsDiamond {...iconProps} />; case "fill": return <BsDiamondFill {...iconProps} />;
case "background": return <BsDiamondFill {...iconProps} />; case "background": return <BsBack {...iconProps} />;
case "line": return <IoAnalyticsOutline {...iconProps} />; case "line": return <IoAnalyticsOutline {...iconProps} />;
case "symbol": return <BsFonts {...iconProps} />; case "symbol": return <MdLocationPin {...iconProps} />;
case "circle": return <MdOutlineCircle {...iconProps} />; case "circle": return <MdCircle {...iconProps} />;
default: return <MdPriorityHigh {...iconProps} />; default: return <MdPriorityHigh {...iconProps} />;
} }
}; };