113 lines
2.9 KiB
Vue
113 lines
2.9 KiB
Vue
<script setup lang="ts">
|
|
import 'leaflet/dist/leaflet.css'
|
|
import 'vue-leaflet-markercluster/dist/style.css'
|
|
|
|
import L from 'leaflet'
|
|
globalThis.L = L
|
|
|
|
import { LMap, LTileLayer, LControlZoom, LLayerGroup } from '@vue-leaflet/vue-leaflet'
|
|
import { LMarkerClusterGroup } from 'vue-leaflet-markercluster'
|
|
|
|
import ReviewMarker from './components/map/ReviewMarker.vue'
|
|
import TokenMarker from './components/map/TokenMarker.vue'
|
|
|
|
import { storeToRefs } from 'pinia'
|
|
import { useReviewStore } from './stores/reviews'
|
|
import { useParisTokensStore } from './stores/parisTokens'
|
|
import { useMap } from './stores/map'
|
|
import MapSidebar from './components/map/MapSidebar.vue'
|
|
|
|
const { zoom, minZoom, center } = useMap()
|
|
|
|
const { markers: reviews } = useReviewStore()
|
|
const { markers: parisTokens } = useParisTokensStore()
|
|
|
|
const { activeLayers } = storeToRefs(useMap())
|
|
</script>
|
|
|
|
<template>
|
|
<main>
|
|
<LMap
|
|
ref="map"
|
|
:min-zoom
|
|
v-model:zoom="zoom"
|
|
v-model:center="center"
|
|
:options="{ zoomControl: false }"
|
|
:useGlobalLeaflet="true"
|
|
>
|
|
<LControlZoom position="bottomright" />
|
|
|
|
<LTileLayer
|
|
url="https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png"
|
|
layer-type="base"
|
|
/>
|
|
|
|
<!-- "Monnaie de Paris" CSGroup -->
|
|
<LLayerGroup v-if="activeLayers.tokens && 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="activeLayers.food && 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>
|
|
|
|
<MapSidebar />
|
|
</template>
|
|
|
|
<style lang="scss">
|
|
main {
|
|
height: 100vh;
|
|
width: 100vw;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.leaflet-marker-icon:not(.marker-cluster) {
|
|
border-radius: 50%;
|
|
box-shadow: 0 0 5px 3px color-mix(in srgb, var(--color-neutral-400) 66%, transparent);
|
|
}
|
|
|
|
.leaflet-popup-content-wrapper {
|
|
border-radius: 5px;
|
|
|
|
.leaflet-popup-content {
|
|
margin: 10px 20px 10px 15px;
|
|
|
|
p {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.marker-cluster span {
|
|
font-weight: var(--font-weight-medium);
|
|
}
|
|
|
|
.marker-cluster-small {
|
|
background-color: color-mix(in srgb, var(--color-green-500) 25%, transparent);
|
|
|
|
div {
|
|
background-color: color-mix(in srgb, var(--color-green-500) 33%, transparent);
|
|
}
|
|
}
|
|
|
|
.marker-cluster-medium {
|
|
background-color: color-mix(in srgb, var(--color-yellow-400) 25%, transparent);
|
|
|
|
div {
|
|
background-color: color-mix(in srgb, var(--color-yellow-400) 33%, transparent);
|
|
}
|
|
}
|
|
|
|
.marker-cluster-large {
|
|
background-color: color-mix(in srgb, var(--color-rose-400) 25%, transparent);
|
|
|
|
div {
|
|
background-color: color-mix(in srgb, var(--color-rose-400) 33%, transparent);
|
|
}
|
|
}
|
|
</style>
|