style : 지도 마커 스타일링 (#410)

* style : 현재 위치 마커 스타일 수정 * style : 지도 색상 소폭 수정 * style : 지도 장소 마커 변경
prgrms-web-devcourse-final-project · Dec 9, 2024 · 5352bff · 5352bff
1 parent 8eb0caa
commit 5352bff
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 36 deletions.
diff --git a/public/placeMarker.svg b/public/placeMarker.svg
diff --git a/src/components/MapPage/Maplibre/MaplibreWithSearch.tsx b/src/components/MapPage/Maplibre/MaplibreWithSearch.tsx
@@ -50,7 +50,7 @@ export const MaplibreWithSearch = ({
                 <IoIosSearch className="w-6 h-8 cursor-pointer" />
             </div>
             {searchedLocation?.name && (
-                <div className="absolute top-28 w-[340px] h-[48px] left-1/2 transform -translate-x-1/2 z-10 bg-slate-200 rounded-2xl p-2 flex items-center justify-between">
+                <div className="absolute top-[5rem] w-[340px] h-[48px] left-1/2 transform -translate-x-1/2 z-10 bg-sample-gray text-sample-black text-bold rounded-md p-2 flex items-center justify-between">
                     <LuMapPin className="ml-2" />
                     <span className="flex-1 ml-4">{searchedLocation.name}</span>
                     <LiaTimesSolid
@@ -77,11 +77,12 @@ export const MaplibreWithSearch = ({
                         anchor="bottom"
                         rotation={direction || 0}
                     >
-                        <img
-                            src="https://www.svgrepo.com/show/372536/map-marker.svg"
-                            alt="marker"
-                            className="w-[30px] h-[30px] transform -translate-x-1/2 -translate-y-full"
-                        />
+                        <span className="relative flex h-5 w-5">
+                            <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-sample-marker opacity-75"></span>
+                            <span className="relative inline-flex justify-center items-center rounded-full h-5 w-5 bg-white">
+                                <span className="relative inline-flex rounded-full h-3 w-3 bg-sample-marker" />
+                            </span>
+                        </span>
                     </Marker>
                 )}
                 {nearbyLetters.map(
@@ -115,11 +116,21 @@ export const MaplibreWithSearch = ({
                         anchor="bottom"
                         rotation={direction || 0}
                     >
-                        <img
-                            src="https://www.svgrepo.com/show/372536/map-marker.svg"
-                            alt="marker"
-                            className="w-[30px] h-[30px] transform -translate-x-1/2 -translate-y-full"
-                        />
+                        <div className="flex justify-center">
+                            <div className="animate-bounce bg-white dark:bg-slate-800 p-2 w-10 h-10 ring-1 ring-slate-900/5 dark:ring-slate-200/20 shadow-lg rounded-full flex items-center justify-center">
+                                <svg
+                                    className="w-6 h-6 text-sample-place"
+                                    fill="none"
+                                    strokeLinecap="round"
+                                    strokeLinejoin="round"
+                                    strokeWidth="2"
+                                    viewBox="0 0 24 24"
+                                    stroke="currentColor"
+                                >
+                                    <path d="M19 14l-7 7m0 0l-7-7m7 7V3"></path>
+                                </svg>
+                            </div>
+                        </div>
                     </Marker>
                 )}
             </Map>

diff --git 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,23 +136,23 @@
             "source": "openmaptiles",
             "source-layer": "landuse",
             "filter": ["==", ["get", "class"], "pitch"],
-            "paint": { "fill-color": "#DEE3CD" }
+            "paint": { "fill-color": "#F5F3F1" }
         },
         {
             "id": "landuse_track",
             "type": "fill",
             "source": "openmaptiles",
             "source-layer": "landuse",
             "filter": ["==", ["get", "class"], "track"],
-            "paint": { "fill-color": "#DEE3CD" }
+            "paint": { "fill-color": "#F5F3F1" }
         },
         {
             "id": "landuse_cemetery",
             "type": "fill",
             "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
@@ -11,7 +11,9 @@ export default {
                     black: '#5C5C5C',
                     hoverblue: '#1882A8',
                     textgray: '#C3C3C3',
-                    select: '#22ABEF'
+                    select: '#22ABEF',
+                    marker: '#0168df',
+                    place: '#fe896b'
                 },
                 theme: {
                     skyblue: '#98c7fd',