Added monnaie de paris layer

src/App.vue

@@ -5,17 +5,22 @@ import 'vue-leaflet-markercluster/dist/style.css'
 import L, { type PointTuple } from 'leaflet'
 globalThis.L = L
 
-import { LMap, LTileLayer, LControlZoom } from '@vue-leaflet/vue-leaflet'
+import { LMap, LTileLayer, LControlZoom, LLayerGroup } from '@vue-leaflet/vue-leaflet'
 import { LMarkerClusterGroup } from 'vue-leaflet-markercluster'
 import { ref } from 'vue'
-import { useReviewStore } from './stores/reviews'
-import ReviewMarker from './components/ReviewMarker.vue'
 
-const { markers } = useReviewStore()
+import ReviewMarker from './components/ReviewMarker.vue'
+import TokenMarker from './components/TokenMarker.vue'
+
+import { useReviewStore } from './stores/reviews'
+import { useParisTokensStore } from './stores/parisTokens'
 
 const zoom = ref(7)
 const minZoom = 4
 const center = ref<PointTuple>([47.809376, -0.637207])
+
+const { markers: reviews } = useReviewStore()
+const { markers: parisTokens } = useParisTokensStore()
 </script>
 
 <template>
@@ -35,8 +40,14 @@ const center = ref<PointTuple>([47.809376, -0.637207])
         layer-type="base"
       />
 
-      <LMarkerClusterGroup :max-cluster-radius="18" :disable-clustering-at-zoom="14">
-        <ReviewMarker v-once v-for="marker in markers" :key="marker.title" :marker />
+      <!-- "Monnaie de Paris" CSGroup -->
+      <LLayerGroup v-if="parisTokens.length > 0" :max-cluster-radius="18" :disable-clustering-at-zoom="14">
+        <TokenMarker v-once v-for="marker in parisTokens" :key="marker.title" :marker />
+      </LLayerGroup>
+
+      <!-- Review CSGroup -->
+      <LMarkerClusterGroup v-if="reviews.length > 0" :max-cluster-radius="18" :disable-clustering-at-zoom="14">
+        <ReviewMarker v-once v-for="marker in reviews" :key="marker.title" :marker />
       </LMarkerClusterGroup>
     </LMap>
   </main>

src/components/TokenMarker.vue

@@ -1,11 +1,12 @@
 <script setup lang="ts">
-import type { DefaultMarker } from '@/models/Markers';
+import type { TokenMarker } from '@/models/Markers';
 import { LMarker, LPopup, LIcon } from '@vue-leaflet/vue-leaflet'
-import type { Marker, PointTuple } from 'leaflet';
+import type { PointTuple } from 'leaflet';
 import { computed, ref } from 'vue';
+import { cn } from '@/lib/cn';
 
 defineProps<{
-  marker: DefaultMarker
+  marker: TokenMarker
 }>()
 
 const iconSize = ref<PointTuple>([38, 38])
@@ -20,7 +21,25 @@ const popupOffset = [0, iconSize.value[0] * -0.66]
         <h2 class="font-bold text-[1.2em] leading-5">
           {{ marker.title }}
         </h2>
+
+        <p v-html="marker.reviews?.[0]!!.text" />
       </div>
     </LPopup>
+
+    <LIcon
+      :icon-size
+      :icon-anchor
+      :class-name="cn(
+        { 'grayscale': marker.bootleg }
+      )"
+    >
+      <img src="/map/monnaie-de-paris.png" width="40" height="40" />
+
+      <div
+        class="absolute -top-2 -right-2 size-5 text-center grid place-items-center rounded-full text-[0.65rem] font-bold tracking-[-0.075em]"
+      >
+        {{ marker.reviews?.[0]!.grade }}
+      </div>
+    </LIcon>
   </LMarker>
 </template>

src/models/Markers.ts

@@ -16,6 +16,13 @@ export interface ReviewMarker extends DefaultMarker {
   url?: string
 }
 
+export interface TokenMarker extends DefaultMarker {
+  bootleg?: boolean
+  reviews?: Review[]
+  closed?: boolean
+  url?: string
+}
+
 export interface Review {
   text?: string
   grade?: number

src/stores/parisTokens.ts

@@ -0,0 +1,34 @@
+import type { TokenMarker } from '@/models/Markers'
+import { defineStore } from 'pinia'
+
+export const useParisTokensStore = defineStore('paris-tokens', () => {
+  const markers: TokenMarker[] = [
+    {
+      coords: [48.66782350856912, -3.8571097704328814],
+      title: "Cairn de Barnenez"
+    },
+    {
+      coords: [50.40515618183852, 1.560438779852095],
+      title: "Berck-sur-Mer"
+    },
+    {
+      coords: [50.73066247214813, 1.5943634531170394],
+      title: "Nausicaa - Boulogne-sur-Mer"
+    },
+    {
+      coords: [48.11527629124499, -1.6809942217011355],
+      title: "Parlement de Bretagne - Rennes"
+    },
+    {
+      coords: [48.01889482103195, -2.1739765065268],
+      title: "Brocéliande, la Porte des Secrets - Paimpont"
+    },
+    {
+      coords: [48.68378516188998, -3.9867849311824264],
+      title: "Saint Pol de Léon",
+      bootleg: true,
+    }
+  ]
+
+  return { markers }
+})