Joururi/echoes
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added all restaurants I could think of

Browse Source
This commit is contained in:
Alexis
2025-08-22 15:21:35 +02:00
parent 10b461d6ae
commit 3188148b06
8 changed files with 551 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files

108
src/App.vue
View File

@@ -5,7 +5,7 @@ import 'vue-leaflet-markercluster/dist/style.css'
import L, { type PointTuple } from 'leaflet'
globalThis.L = L
import { LMap, LTileLayer, LMarker, LPopup, LIcon } from '@vue-leaflet/vue-leaflet'
import { LMap, LTileLayer, LMarker, LPopup, LIcon, LControlZoom } from '@vue-leaflet/vue-leaflet'
import { LMarkerClusterGroup } from 'vue-leaflet-markercluster'
import { computed, ref } from 'vue'
import { useReviewStore } from './stores/reviews'
@@ -16,7 +16,7 @@ const zoom = ref(7)
const minZoom = 4
const center = ref<PointTuple>([47.809376, -0.637207])
const iconSize = ref<PointTuple>([30, 30])
const iconSize = ref<PointTuple>([38, 38])
const iconAnchor = computed<PointTuple>(() => [iconSize.value[0] / 2, iconSize.value[1]])
const popupOffset = [0, iconSize.value[0] * -0.66]
</script>
@@ -28,37 +28,77 @@ const popupOffset = [0, iconSize.value[0] * -0.66]
:min-zoom
v-model:zoom="zoom"
v-model:center="center"
:options="{ zoomControl: false }"
:useGlobalLeaflet="true"
>
<LControlZoom position="bottomright" />
<LTileLayer
url="https://tiles.stadiamaps.com/tiles/alidade_smooth_dark/{z}/{x}/{y}{r}.png"
url="https://tiles.stadiamaps.com/tiles/alidade_smooth/{z}/{x}/{y}{r}.png"
layer-type="base"
name="Stadia Maps Basemap"
/>
<LMarkerClusterGroup :max-cluster-radius="25">
<LMarkerClusterGroup :max-cluster-radius="18" :disable-clustering-at-zoom="14">
<LMarker v-for="marker in markers" :key="marker.title" :lat-lng="marker.coords">
<LPopup :options="{ offset: popupOffset, maxWidth: 500, minWidth: 180 }">
<h2 class="font-bold text-[1.2em] leading-5">
{{ marker.title }}
</h2>
{{ marker.reviews?.[0].grade }}&nbsp;/&nbsp;20
</LPopup>
<LIcon v-if="marker.type === 'bar'" icon-url="/map/icons/bar.svg" :icon-size :icon-anchor />
<LIcon v-if="marker.type === 'bakery'" icon-url="/map/icons/bakery.svg" :icon-size :icon-anchor />
<LPopup :options="{ offset: popupOffset, maxWidth: 380, minWidth: 180 }">
<div class="spacing">
<h2 class="font-bold text-[1.2em] leading-5">
{{ marker.title }}
</h2>
<template v-else-if="marker.type === 'restaurant'">
<LIcon v-if="marker.food === 'asian'" icon-url="/map/icons/asian.svg" :icon-size :icon-anchor />
<LIcon v-else-if="marker.food === 'burgers'" icon-url="/map/icons/burgers.svg" :icon-size :icon-anchor />
<!-- <LIcon v-else-if="marker.food === 'creperie'" icon-url="/map/icons/creperie.svg" :icon-size :icon-anchor /> -->
<!-- <LIcon v-else-if="marker.food === 'eastern'" icon-url="/map/icons/eastern.svg" :icon-size :icon-anchor /> -->
<!-- <LIcon v-else-if="marker.food === 'fast-food'" icon-url="/map/icons/fast-food.svg" :icon-size :icon-anchor /> -->
<LIcon v-else-if="marker.food === 'italian'" icon-url="/map/icons/italian.svg" :icon-size :icon-anchor />
<LIcon v-else-if="marker.food === 'seafood'" icon-url="/map/icons/seafood.svg" :icon-size :icon-anchor />
<!-- <LIcon v-else-if="marker.food === 'street-food'" icon-url="/map/icons/street-food.svg" :icon-size :icon-anchor /> -->
<LIcon v-else-if="marker.food === 'vegetarian'" icon-url="/map/icons/vegetarian.svg" :icon-size :icon-anchor />
<LIcon v-else icon-url="/map/icons/restaurant.svg" :icon-size :icon-anchor />
</template>
<p v-html="marker.reviews?.[0].text" />
</div>
</LPopup>
<LIcon
:icon-size
:icon-anchor
:class-name="marker.closed ? 'grayscale' : ''"
>
<img v-if="marker.type === 'bar'" src="/map/icons/bar.svg" />
<img v-if="marker.type === 'bakery'" src="/map/icons/bakery.svg" />
<img v-if="marker.type === 'tea-shop'" src="/map/icons/tea-shop.svg" />
<img v-if="marker.type === 'coffee-shop'" src="/map/icons/coffee-shop.svg" />
<img v-if="marker.type === 'ice-cream'" src="/map/icons/ice-cream.svg" />
<template v-else-if="marker.type === 'restaurant'">
<img v-if="marker.food === 'asian'" src="/map/icons/asian.svg" />
<img v-else-if="marker.food === 'burgers'" src="/map/icons/burgers.svg" />
<!-- <img v-else-if="marker.food === 'creperie'" src="/map/icons/creperie.svg" /> -->
<!-- <img v-else-if="marker.food === 'eastern'" src="/map/icons/eastern.svg" /> -->
<img v-else-if="marker.food === 'fast-food'" src="/map/icons/fast-food.svg" />
<img v-else-if="marker.food === 'italian'" src="/map/icons/italian.svg" />
<img v-else-if="marker.food === 'seafood'" src="/map/icons/seafood.svg" />
<!-- <img v-else-if="marker.food === 'street-food'" src="/map/icons/street-food.svg" /> -->
<img v-else-if="marker.food === 'vegetarian'" src="/map/icons/vegetarian.svg" />
<img v-else src="/map/icons/restaurant.svg" />
</template>
<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]"
:class="{
'text-white bg-red-500': marker.reviews?.[0].grade! <= 1.5,
'text-black bg-amber-400': marker.reviews?.[0].grade! > 1.5 && marker.reviews?.[0].grade! <= 2.5,
'text-black bg-lime-400': marker.reviews?.[0].grade! > 2.5 && marker.reviews?.[0].grade! < 4.0,
'text-black bg-green-400': marker.reviews?.[0].grade! > 2.5 && marker.reviews?.[0].grade! < 4.7,
'text-black bg-sky-400': marker.reviews?.[0].grade! >= 4.7
}"
>
{{ marker.reviews?.[0].grade }}
</div>
<div
class="absolute -z-10 -inset-0.5 rounded-full"
:class="{
'bg-red-500': marker.reviews?.[0].grade! <= 1.5,
'bg-amber-400': marker.reviews?.[0].grade! > 1.5 && marker.reviews?.[0].grade! <= 2.5,
'bg-lime-400': marker.reviews?.[0].grade! > 2.5 && marker.reviews?.[0].grade! < 4.0,
'bg-green-400': marker.reviews?.[0].grade! > 2.5 && marker.reviews?.[0].grade! < 4.7,
'bg-sky-400': marker.reviews?.[0].grade! >= 4.7
}"
/>
</LIcon>
</LMarker>
</LMarkerClusterGroup>
</LMap>
@@ -71,9 +111,9 @@ main {
width: 100vw;
}
.leaflet-marker-icon {
.leaflet-marker-icon:not(.marker-cluster) {
border-radius: 50%;
box-shadow: 0 0 8px 1px var(--color-slate-800);
box-shadow: 0 0 5px 3px color-mix(in srgb, var(--color-neutral-400) 66%, transparent);
}
.leaflet-popup-content-wrapper {
@@ -81,30 +121,34 @@ main {
.leaflet-popup-content {
margin: 10px 20px 10px 15px;
p {
margin-bottom: 0;
}
}
}
.marker-cluster-small {
background-color: color-mix(in srgb, var(--color-green-500) 50%, transparent);
background-color: color-mix(in srgb, var(--color-green-500) 25%, transparent);
div {
background-color: color-mix(in srgb, var(--color-green-500) 70%, transparent);
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) 50%, transparent);
background-color: color-mix(in srgb, var(--color-yellow-400) 25%, transparent);
div {
background-color: color-mix(in srgb, var(--color-yellow-400) 70%, transparent);
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) 50%, transparent);
background-color: color-mix(in srgb, var(--color-rose-400) 25%, transparent);
div {
background-color: color-mix(in srgb, var(--color-rose-400) 70%, transparent);
background-color: color-mix(in srgb, var(--color-rose-400) 33%, transparent);
}
}
</style>