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>