From 5352bff53e596e79101efcce71d434fda6ff91db Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9E=84=EC=B1=84=EB=AF=BC?= <87525734+cmlim0070@users.noreply.github.com> Date: Tue, 10 Dec 2024 00:51:24 +0900 Subject: [PATCH] =?UTF-8?q?style=20:=20=EC=A7=80=EB=8F=84=20=EB=A7=88?= =?UTF-8?q?=EC=BB=A4=20=EC=8A=A4=ED=83=80=EC=9D=BC=EB=A7=81=20(#410)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * style : 현재 위치 마커 스타일 수정 * style : 지도 색상 소폭 수정 * style : 지도 장소 마커 변경 --- public/placeMarker.svg | 7 +++ .../MapPage/Maplibre/MaplibreWithSearch.tsx | 33 ++++++++----- .../MapPage/Maplibre/map_style.json | 48 +++++++++---------- tailwind.config.js | 4 +- 4 files changed, 56 insertions(+), 36 deletions(-) create mode 100644 public/placeMarker.svg diff --git a/public/placeMarker.svg b/public/placeMarker.svg new file mode 100644 index 00000000..b5ec9b04 --- /dev/null +++ b/public/placeMarker.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/src/components/MapPage/Maplibre/MaplibreWithSearch.tsx b/src/components/MapPage/Maplibre/MaplibreWithSearch.tsx index 8898d0f5..c4c199c3 100644 --- a/src/components/MapPage/Maplibre/MaplibreWithSearch.tsx +++ b/src/components/MapPage/Maplibre/MaplibreWithSearch.tsx @@ -50,7 +50,7 @@ export const MaplibreWithSearch = ({ {searchedLocation?.name && ( -
+
{searchedLocation.name} - marker + + + + + + )} {nearbyLetters.map( @@ -115,11 +116,21 @@ export const MaplibreWithSearch = ({ anchor="bottom" rotation={direction || 0} > - marker +
+
+ + + +
+
)} diff --git a/src/components/MapPage/Maplibre/map_style.json b/src/components/MapPage/Maplibre/map_style.json index b3ce8091..682c3889 100644 --- a/src/components/MapPage/Maplibre/map_style.json +++ b/src/components/MapPage/Maplibre/map_style.json @@ -21,7 +21,7 @@ { "id": "background", "type": "background", - "paint": { "background-color": "#B5DCE2" } + "paint": { "background-color": "#ceeefc" } }, { "id": "natural_earth", @@ -88,7 +88,7 @@ "filter": ["==", ["get", "class"], "wood"], "paint": { "fill-antialias": false, - "fill-color": "hsl(190, 50%, 60%)", + "fill-color": "#22B8EF", "fill-opacity": 0.4 } }, @@ -100,7 +100,7 @@ "filter": ["==", ["get", "class"], "grass"], "paint": { "fill-antialias": false, - "fill-color": "rgba(176, 213, 154, 1)", + "fill-color": "#1882A8", "fill-opacity": 0.3 } }, @@ -136,7 +136,7 @@ "source": "openmaptiles", "source-layer": "landuse", "filter": ["==", ["get", "class"], "pitch"], - "paint": { "fill-color": "#DEE3CD" } + "paint": { "fill-color": "#F5F3F1" } }, { "id": "landuse_track", @@ -144,7 +144,7 @@ "source": "openmaptiles", "source-layer": "landuse", "filter": ["==", ["get", "class"], "track"], - "paint": { "fill-color": "#DEE3CD" } + "paint": { "fill-color": "#F5F3F1" } }, { "id": "landuse_cemetery", @@ -152,7 +152,7 @@ "source": "openmaptiles", "source-layer": "landuse", "filter": ["==", ["get", "class"], "cemetery"], - "paint": { "fill-color": "hsl(75,37%,81%)" } + "paint": { "fill-color": "#F5F3F1" } }, { "id": "landuse_hospital", @@ -168,7 +168,7 @@ "source": "openmaptiles", "source-layer": "landuse", "filter": ["==", ["get", "class"], "school"], - "paint": { "fill-color": "rgb(236,238,204)" } + "paint": { "fill-color": "#F5F3F1" } }, { "id": "waterway_tunnel", @@ -393,7 +393,7 @@ ], "layout": { "line-join": "round" }, "paint": { - "line-color": "#e9ac77", + "line-color": "#F5F3F1", "line-width": [ "interpolate", ["exponential", 1.2], @@ -889,7 +889,7 @@ ], "layout": { "line-cap": "round", "line-join": "round" }, "paint": { - "line-color": "#e9ac77", + "line-color": "#1882A8", "line-width": [ "interpolate", ["exponential", 1.2], @@ -923,7 +923,7 @@ ], "layout": { "line-cap": "round", "line-join": "round" }, "paint": { - "line-color": "#cfcdca", + "line-color": "#F5F3F1", "line-width": [ "interpolate", ["exponential", 1.2], @@ -1293,7 +1293,7 @@ ], "layout": { "line-cap": "round", "line-join": "round" }, "paint": { - "line-color": "#88b3ba", + "line-color": "#F5F3F1", "line-width": [ "interpolate", ["exponential", 1.2], @@ -1331,7 +1331,7 @@ ], "layout": { "line-cap": "round", "line-join": "round" }, "paint": { - "line-color": "#a2cfe0", + "line-color": "#F5F3F1", "line-width": [ "interpolate", ["exponential", 1.2], @@ -1363,7 +1363,7 @@ ], "layout": { "line-join": "round" }, "paint": { - "line-color": "#729dc2", + "line-color": "#F5F3F1", "line-width": [ "interpolate", ["exponential", 1.2], @@ -1436,7 +1436,7 @@ ["==", ["get", "class"], "rail"] ], "paint": { - "line-color": "#bbb", + "line-color": "#F5F3F1", "line-width": [ "interpolate", ["exponential", 1.4], @@ -1467,7 +1467,7 @@ ["==", ["get", "class"], "rail"] ], "paint": { - "line-color": "#bbb", + "line-color": "#F5F3F1", "line-dasharray": [0.2, 8], "line-width": [ "interpolate", @@ -1499,7 +1499,7 @@ ["==", ["get", "class"], "transit"] ], "paint": { - "line-color": "#bbb", + "line-color": "#F5F3F1", "line-width": [ "interpolate", ["exponential", 1.4], @@ -1530,7 +1530,7 @@ ["==", ["get", "class"], "transit"] ], "paint": { - "line-color": "#bbb", + "line-color": "#F5F3F1", "line-dasharray": [0.2, 8], "line-width": [ "interpolate", @@ -1608,7 +1608,7 @@ ], "layout": { "line-join": "round" }, "paint": { - "line-color": "#cfcdca", + "line-color": "#F5F3F1", "line-width": [ "interpolate", ["exponential", 1.2], @@ -1668,7 +1668,7 @@ ], "layout": { "line-join": "round" }, "paint": { - "line-color": "hsl(36,6%,74%)", + "line-color": "#F5F3F1", "line-opacity": [ "interpolate", ["linear"], @@ -2035,7 +2035,7 @@ ["==", ["get", "brunnel"], "bridge"] ], "paint": { - "line-color": "#bbb", + "line-color": "#F5F3F1", "line-width": [ "interpolate", ["exponential", 1.4], @@ -2060,7 +2060,7 @@ ["==", ["get", "brunnel"], "bridge"] ], "paint": { - "line-color": "#bbb", + "line-color": "#F5F3F1", "line-dasharray": [0.2, 8], "line-width": [ "interpolate", @@ -2086,7 +2086,7 @@ ["==", ["get", "brunnel"], "bridge"] ], "paint": { - "line-color": "#bbb", + "line-color": "#F5F3F1", "line-width": [ "interpolate", ["exponential", 1.4], @@ -2111,7 +2111,7 @@ ["==", ["get", "brunnel"], "bridge"] ], "paint": { - "line-color": "#bbb", + "line-color": "#F5F3F1", "line-dasharray": [0.2, 8], "line-width": [ "interpolate", @@ -2277,7 +2277,7 @@ "text-size": 14 }, "paint": { - "text-color": "#74aee9", + "text-color": "#1882A8", "text-halo-color": "rgba(255,255,255,0.7)", "text-halo-width": 1.5 } diff --git a/tailwind.config.js b/tailwind.config.js index 0efd9134..380d52e4 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -11,7 +11,9 @@ export default { black: '#5C5C5C', hoverblue: '#1882A8', textgray: '#C3C3C3', - select: '#22ABEF' + select: '#22ABEF', + marker: '#0168df', + place: '#fe896b' }, theme: { skyblue: '#98c7fd',