use custommarkeroptions in createLeafletMarker

src/map/Leaflet.svelte

@@ -3,7 +3,11 @@
   import * as L from "leaflet";
   import { imageHeight, mapUnit } from "./mapcontent";
   import { CustomMarker } from "./markers";
-  import type { InteractiveMarker, MarkerData } from "./markers";
+  import type {
+    CustomMarkerOptions,
+    InteractiveMarker,
+    MarkerData,
+  } from "./markers";
 
   import "leaflet/dist/leaflet.css";
   import EntranceMarkerPopup from "./EntranceMarkerPopup.svelte";
@@ -33,8 +37,6 @@
     inactive: L.LayerGroup;
   };
 
-  function addToLayerGroup(layer: L.Layer, groupName: string) {}
-
   let coordinateToMarkers: Map<string, InteractiveMarker> = new Map();
   let markerGroups: {
     entrance: Array<InteractiveMarker>;
@@ -111,17 +113,22 @@
     eventHandlers: Array<{
       eventType: string;
       fn: L.LeafletEventHandlerFn;
-    }> = []
+    }> = [],
+    className?: string
   ) {
     let latLng = toLatLng(marker.xy);
     let positionedMarker = L.latLng(latLng[0], latLng[1]);
-    let leafletMarker = new CustomMarker(positionedMarker, {
+
+    // Option creation
+    let options: CustomMarkerOptions = {
       icon: iconFor(marker),
-      className: "marker-inactive",
-    });
-    // let leafletMarker = L.marker(positionedMarker, {
-    //   icon: iconFor(marker),
-    // });
+    };
+    if (className) {
+      options.className = className;
+    }
+
+    let leafletMarker = new CustomMarker(positionedMarker, options);
+
     eventHandlers.forEach((e) => {
       leafletMarker.on(e.eventType, e.fn);
     });

src/map/markers.ts

@@ -1,8 +1,8 @@
 import L, { LatLngExpression } from "leaflet";
 import type { Writable } from "svelte/store";
 
-interface CustomMarkerOptions extends L.MarkerOptions {
-  className: string;
+export interface CustomMarkerOptions extends L.MarkerOptions {
+  className?: string;
 }
 export class CustomMarker extends L.Marker {
   options: CustomMarkerOptions;