fix: specify water server icon explicitly

Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>

Author: tknkaa

src/markers.ts

@@ -1,4 +1,5 @@
 import L from "leaflet";
+import { WaterServer } from "./assets";
 
 export interface MarkerData {
   position: [number, number];
@@ -32,6 +33,13 @@ export const orangeIcon = L.icon({
   iconAnchor: [12.5, 41],
 });
 
+export const waterServerIcon = L.icon({
+  iconUrl: WaterServer,
+  iconSize: [28, 28],
+  iconAnchor: [14, 28],
+  popupAnchor: [0, -28],
+});
+
 export const vendingMachineMarkers: MarkerData[] = [
   { position: [1097, 1504] },
   { position: [1096, 1625] },

src/pages/MapPage.tsx

@@ -17,6 +17,7 @@ import { useGeolocation } from "../geolocation";
 import {
   buildingPolygons,
   waterServerMarkers,
+  waterServerIcon,
   vendingMachineMarkers,
   orangeIcon,
 } from "../markers";
@@ -303,7 +304,11 @@ export function MapPage() {
 
         {wsMarkersVisible &&
           waterServerMarkers.map((marker, idx) => (
-            <Marker key={`ws-${idx}`} position={marker.position}>
+            <Marker
+              key={`ws-${idx}`}
+              position={marker.position}
+              icon={waterServerIcon}
+            >
               {marker.popup && <Popup>{marker.popup}</Popup>}
             </Marker>
           ))}