feat: add icon instead of red circle

app/components/map/map.client.vue

@@ -2,6 +2,7 @@
     <ClientOnly>
         <MglMap :map-style="style" :center="center" :zoom="zoom" map-key="main">
             <MglNavigationControl />
+            <MglImage id="cluster" :image="image" />
             <template v-for="r of shownLines" :key="r.route.id">
                 <MapLines :route-with-line="r" />
                 <MapClusters
@@ -20,6 +21,7 @@ import type {
     MultiLineString,
     Point,
 } from "geojson";
+
 import { useMap } from "@indoorequal/vue-maplibre-gl";
 import { LngLat, LngLatBounds } from "maplibre-gl";
 const style = "https://tiles.versatiles.org/assets/styles/colorful/style.json";
@@ -29,7 +31,7 @@ const zoom = 12;
 const store = useMresoStore();
 await store.fetchData();
 const shownClusters = ref<FeatureCollection<Point> | null>(null);
-
+const image = useSvgImage();
 const map = useMap("main");
 watchEffect(async () => {
     const allClusters = [];
@@ -61,7 +63,7 @@ watchEffect(async () => {
         // .filter((c) => stops.includes(c.properties?.id))
         .reduce(
             (bounds, coords) => {
-                return bounds.extend(new LngLat(coords[0], coords[1]));
+                return bounds.extend(new LngLat(coords[0]!, coords[1]!));
             },
             new LngLatBounds([
                 firstPoint.geometry.coordinates[0]!,