feat: save selected marker id list

src/components/MarkerView.tsx

@@ -0,0 +1,26 @@
+import { createSignal } from 'solid-js';
+import { mapLeftTop } from '../signals/signal.ts';
+import { Marker } from '../data/marker.ts';
+
+type Props = {
+  data: Marker;
+  scale: number;
+  initialMarked: boolean;
+  onClickMarker: (id: number) => void;
+}
+
+export const MarkerView = ({ data, scale, initialMarked, onClickMarker }: Props) => {
+  const [marked, setMarked] = createSignal(initialMarked);
+  return (
+    <div
+      class={`marker ${marked() ? 'marked' : ''}`}
+      onClick={() => {
+        setMarked(prev => !prev);
+        onClickMarker(data.id);
+      }}
+      style={{
+        transform: `translate(${mapLeftTop().x + data.position.x * scale - 12}px, ${mapLeftTop().y + data.position.y * scale - 12}px)`,
+      }}
+    >{data.type}</div>
+  );
+};

src/components/layer/MarkerLayer.tsx

@@ -1,22 +1,29 @@
 import { Marker } from '../../data/marker.ts';
-import { mapLeftTop } from '../../signals/signal.ts';
+import { MARKED_MARKER_LIST_STORAGE_KEY } from '../../constants/localStorageKey.ts';
+import { MarkerView } from '../MarkerView.tsx';
 
 type Props = {
   markerList: Marker[];
   scale: number;
 }
 
 export const MarkerLayer = (props: Props) => {
+  let markedMarkerList = JSON.parse(localStorage.getItem(MARKED_MARKER_LIST_STORAGE_KEY) ?? '[]') as Array<number>;
+
+  const onClickMarker = (id: number) => {
+    markedMarkerList = markedMarkerList.includes(id) ? markedMarkerList.filter(x => x !== id) : [...markedMarkerList, id];
+    localStorage.setItem(MARKED_MARKER_LIST_STORAGE_KEY, JSON.stringify(markedMarkerList));
+  };
+
   return (
     <div class={'marker_layer'}>
-      {props.markerList.map(({ position, type }) => (
-        <div
-          class={'marker'}
-          style={{
-            transform: `translate(${mapLeftTop().x + position.x * props.scale - 12}px, ${mapLeftTop().y + position.y * props.scale - 12}px)`,
-          }}
-        >{type}</div>
-      ))}
+      {props.markerList.map((data) =>
+        <MarkerView
+          data={data}
+          scale={props.scale}
+          initialMarked={markedMarkerList.includes(data.id)}
+          onClickMarker={onClickMarker}
+        />)}
     </div>
   );
 };

src/constants/localStorageKey.ts

@@ -0,0 +1 @@
+export const MARKED_MARKER_LIST_STORAGE_KEY = 'MARKED_MARKER_LIST';