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

Added base restaurants and icons

Browse Source
This commit is contained in:
Alexis
2025-08-21 17:36:23 +02:00
parent 9455991fae
commit 10b461d6ae
13 changed files with 1403 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

95
src/App.vue
View File

@@ -1,27 +1,110 @@
<script setup lang="ts">
import 'leaflet/dist/leaflet.css'
import { LMap, LTileLayer } from '@vue-leaflet/vue-leaflet'
import { ref } from 'vue'
import 'vue-leaflet-markercluster/dist/style.css'
const zoom = ref(6)
const center = ref([38, 139.69])
import L, { type PointTuple } from 'leaflet'
globalThis.L = L
import { LMap, LTileLayer, LMarker, LPopup, LIcon } from '@vue-leaflet/vue-leaflet'
import { LMarkerClusterGroup } from 'vue-leaflet-markercluster'
import { computed, ref } from 'vue'
import { useReviewStore } from './stores/reviews'
const { markers } = useReviewStore()
const zoom = ref(7)
const minZoom = 4
const center = ref<PointTuple>([47.809376, -0.637207])
const iconSize = ref<PointTuple>([30, 30])
const iconAnchor = computed<PointTuple>(() => [iconSize.value[0] / 2, iconSize.value[1]])
const popupOffset = [0, iconSize.value[0] * -0.66]
</script>
<template>
<main>
<LMap ref="map" v-model:zoom="zoom" v-model:center="center" :useGlobalLeaflet="false">
<LMap
ref="map"
:min-zoom
v-model:zoom="zoom"
v-model:center="center"
:useGlobalLeaflet="true"
>
<LTileLayer
url="https://tiles.stadiamaps.com/tiles/alidade_smooth_dark/{z}/{x}/{y}{r}.png"
layer-type="base"
name="Stadia Maps Basemap"
/>
<LMarkerClusterGroup :max-cluster-radius="25">
<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 />
<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>
</LMarker>
</LMarkerClusterGroup>
</LMap>
</main>
</template>
<style scoped>
<style lang="scss">
main {
height: 100vh;
width: 100vw;
}
.leaflet-marker-icon {
border-radius: 50%;
box-shadow: 0 0 8px 1px var(--color-slate-800);
}
.leaflet-popup-content-wrapper {
border-radius: 5px;
.leaflet-popup-content {
margin: 10px 20px 10px 15px;
}
}
.marker-cluster-small {
background-color: color-mix(in srgb, var(--color-green-500) 50%, transparent);
div {
background-color: color-mix(in srgb, var(--color-green-500) 70%, transparent);
}
}
.marker-cluster-medium {
background-color: color-mix(in srgb, var(--color-yellow-400) 50%, transparent);
div {
background-color: color-mix(in srgb, var(--color-yellow-400) 70%, transparent);
}
}
.marker-cluster-large {
background-color: color-mix(in srgb, var(--color-rose-400) 50%, transparent);
div {
background-color: color-mix(in srgb, var(--color-rose-400) 70%, transparent);
}
}
</style>

12
src/stores/counter.ts
View File

@@ -1,12 +0,0 @@
import { ref, computed } from 'vue'
import { defineStore } from 'pinia'
export const useCounterStore = defineStore('counter', () => {
const count = ref(0)
const doubleCount = computed(() => count.value * 2)
function increment() {
count.value++
}
return { count, doubleCount, increment }
})

775
src/stores/reviews.ts Normal file
View File

@@ -0,0 +1,775 @@
import type { PointTuple } from 'leaflet'
import { defineStore } from 'pinia'
type MarkerType = "restaurant" | "bar" | "bakery"
type FoodType = "mixed" | "asian" | "vegetarian" | "italian" | "fast-food" | "street-food" | "burgers" | "seafood" | "creperie" | "eastern"
interface ReviewMarker {
coords: PointTuple
title?: string
type?: MarkerType
food?: FoodType
reviews?: Review[]
}
interface Review {
text?: string
grade: number
}
export const useReviewStore = defineStore('reviews', () => {
const markers: ReviewMarker[] = [
{
title: "La Tempête",
coords: [47.47828668587478, -3.125865802320788],
type: "restaurant",
food: "seafood",
reviews: [
{
grade: 20
}
]
},
{
title: "Khmer Thaï",
coords: [48.11752297250921, -1.6811361830581657],
type: "restaurant",
food: "asian",
reviews: [
{
grade: 16
}
]
},
{
title: "La Baie d'Halong",
coords: [48.724854571841945, -3.9833849929135576],
type: "restaurant",
food: "asian",
reviews: [
{
grade: 18.5
}
]
},
{
title: "Angello",
coords: [48.10933306853774, -1.6847963807279722],
type: "restaurant",
food: "italian",
reviews: [
{
grade: 17.5
}
]
},
{
title: "Le Petit Hanoï",
coords: [48.10850561023402, -1.684263611795858],
type: "restaurant",
food: "asian",
reviews: [
{
grade: 17.5
}
]
},
{
title: "Côté Sushi",
coords: [48.11324625619256, -1.6800305422199695],
type: "restaurant",
food: "asian",
reviews: [
{
grade: 17
}
]
},
{
title: "Dans la Grand Rue",
coords: [48.684192460939094, -3.986498144514444],
type: "restaurant",
food: "mixed",
reviews: [
{
grade: 16.5
}
]
},
{
title: "Fringale",
coords: [48.01905889927451, -2.171397985096437],
type: "restaurant",
food: "mixed",
reviews: [
{
grade: 16.5
}
]
},
{
title: "Cibeles",
coords: [48.106735005295626, -1.6856652735268327],
type: "restaurant",
food: "italian",
reviews: [
{
grade: 16.5
}
]
},
{
title: "La Lupa",
coords: [48.11295052226835, -1.6812203185427346],
type: "restaurant",
food: "italian",
reviews: [
{
grade: 16.5
}
]
},
{
title: "Le Bacchus",
coords: [48.10855324414594, -1.6973786525587304],
type: "bar",
reviews: [
{
grade: 16.5
}
]
},
{
title: "Le Coucou Rennais",
coords: [48.11534187578985, -1.678974672201788],
type: "restaurant",
food: "mixed",
reviews: [
{
grade: 16.5
}
]
},
{
title: "Le Tourne Pierre",
coords: [48.64939200441161, -2.0238274201262283],
type: "restaurant",
food: "mixed",
reviews: [
{
grade: 16
}
]
},
{
title: "Casa Antonio",
coords: [48.108374092201004, -1.676335338367073],
type: "restaurant",
food: "italian",
reviews: [
{
grade: 16
}
]
},
{
title: "Hot My Dog",
coords: [48.11026179127679, -1.6874321757846735],
type: "restaurant",
food: "street-food",
reviews: [
{
grade: 15
}
]
},
{
title: "Banh Mi Viet",
coords: [48.11400719159279, -1.6807249915598401],
type: "restaurant",
food: "street-food",
reviews: [
{
grade: 15.5
}
]
},
{
title: "Asian Street Food",
coords: [50.40718269352876, 1.564250350722199],
type: "restaurant",
food: "street-food",
reviews: [
{
grade: 15
}
]
},
{
title: "Pépé Pizza",
coords: [50.48121523204103, 1.590577696567199],
type: "restaurant",
food: "italian",
reviews: [
{
grade: 15
}
]
},
{
title: "La Cabane",
coords: [47.215538947496775, -1.552375181167602],
type: "restaurant",
food: "mixed",
reviews: [
{
grade: 15
}
]
},
{
title: "KilKenny's Pub",
coords: [48.11105421896557, -1.6773275062735566],
type: "bar",
reviews: [
{
grade: 15
}
]
},
{
title: "La Louperie",
coords: [48.11899359758488, -1.668218313830956],
type: "restaurant",
food: "mixed",
reviews: [
{
grade: 15
}
]
},
{
title: "La Casa Pépé",
coords: [48.11192815040314, -1.6758654492733234],
type: "restaurant",
food: "italian",
reviews: [
{
grade: 15
}
]
},
{
title: "Monsieur Joe",
coords: [48.11039424415681, -1.6627597599281814],
type: "restaurant",
food: "mixed",
reviews: [
{
grade: 15
}
]
},
{
title: "Fox and Friends",
coords: [48.11215429073604, -1.6830048833083207],
type: "bar",
reviews: [
{
grade: 15
}
]
},
{
title: "Ty'Anna",
coords: [48.11474624851543, -1.6814620536068385],
type: "bar",
reviews: [
{
grade: 15
}
]
},
{
title: "Pitaya",
coords: [48.11275152309647, -1.681332848723036],
type: "restaurant",
food: "street-food",
reviews: [
{
grade: 15
}
]
},
{
title: "Louise - Bistrot vivant ",
coords: [48.102723651057815, -1.6623584050501647],
type: "restaurant",
food: "mixed",
reviews: [
{
grade: 15
}
]
},
{
title: "Les Brocanteurs",
coords: [48.111004933372435, -1.6809616054195273],
type: "restaurant",
food: "mixed",
reviews: [
{
grade: 15
}
]
},
{
title: "Panier Vert",
coords: [48.11328698821665, -1.6611717430165736],
type: "restaurant",
food: "mixed",
reviews: [
{
grade: 15
}
]
},
{
title: "Uliva",
coords: [48.136000026894976, -1.6681454418705541],
type: "restaurant",
food: "italian",
reviews: [
{
grade: 14.5
}
]
},
{
title: "La Ptite Flambée",
coords: [48.10531486284804, -1.6284269785657488],
type: "restaurant",
food: "mixed",
reviews: [
{
grade: 14.5
}
]
},
{
title: "Whitefields Café",
coords: [48.13507870007574, -1.6225106053811715],
type: "restaurant",
food: "mixed",
reviews: [
{
grade: 14.5
}
]
},
{
title: "Les 3 Brasseurs",
coords: [48.132017471024135, -1.6888373517551438],
type: "restaurant",
food: "mixed",
reviews: [
{
grade: 14.5
}
]
},
{
title: "Chez Les Ducs",
coords: [47.21628942491444, -1.5506918098742497],
type: "restaurant",
food: "creperie",
reviews: [
{
grade: 14
}
]
},
{
title: "Penny Lane",
coords: [48.11103695795259, -1.6786062621912323],
type: "bar",
reviews: [
{
grade: 14
}
]
},
{
title: "La Cucina",
coords: [48.11403284472226, -1.680257872370312],
type: "restaurant",
food: "italian",
reviews: [
{
grade: 14
}
]
},
{
title: "Coppa Saint Mélaine",
coords: [48.11480321724176, -1.676270117028458],
type: "restaurant",
food: "italian",
reviews: [
{
grade: 14
}
]
},
{
title: "Les Grands Gamins",
coords: [48.109745722688515, -1.6896362295368355],
type: "restaurant",
food: "mixed",
reviews: [
{
grade: 14
}
]
},
{
title: "La Cité d'Ys",
coords: [48.108656698303605, -1.6772447857456239],
type: "bar",
reviews: [
{
grade: 14
}
]
},
{
title: "Falafel",
coords: [48.11601935822433, -1.6807647155460153],
type: "restaurant",
food: "eastern",
reviews: [
{
grade: 14
}
]
},
{
title: "Basilic & Co",
coords: [48.109668130909405, -1.6657984439029816],
type: "restaurant",
food: "italian",
reviews: [
{
grade: 14
}
]
},
{
title: "L'Escale",
coords: [50.7304430557406, 1.5963067512524898],
type: "restaurant",
food: "mixed",
reviews: [
{
grade: 13.5
}
]
},
{
title: "Mary Stuart",
coords: [48.68904281867946, -3.9691572771418047],
type: "restaurant",
food: "mixed",
reviews: [
{
grade: 13.5
}
]
},
{
title: "Le Papier Timbré",
coords: [48.115182616625766, -1.6846097395426023],
type: "bar",
reviews: [
{
grade: 13.5
}
]
},
{
title: "Big Fernand",
coords: [48.11347562584714, -1.6814439702872734],
type: "restaurant",
food: "burgers",
reviews: [
{
grade: 14
}
]
},
{
title: "Le Wok",
coords: [48.129943141404155, -1.6427404479388241],
type: "restaurant",
food: "asian",
reviews: [
{
grade: 12
}
]
},
{
title: "La Gavotte",
coords: [48.11194212832854, -1.675360124008564],
type: "restaurant",
food: "creperie",
reviews: [
{
grade: 13
}
]
},
{
title: "Les Burgers de Colette",
coords: [48.113617013564735, -1.6775973992185587],
type: "restaurant",
food: "burgers",
reviews: [
{
grade: 13
}
]
},
{
title: "Le Chanya",
coords: [48.11976336112167, -1.6665742873250897],
type: "restaurant",
food: "asian",
reviews: [
{
grade: 13
}
]
},
{
title: "Le Lapin noir",
coords: [48.11095515153713, -1.677499632237847],
type: "restaurant",
food: "vegetarian",
reviews: [
{
grade: 12
}
]
},
{
title: "Tiffany's",
coords: [48.1108461948547, -1.669435256663923],
type: "bar",
reviews: [
{
grade: 12.5
}
]
},
{
title: "Au Bureau",
coords: [48.11178519749741, -1.5901936624448747],
type: "restaurant",
food: "mixed",
reviews: [
{
grade: 11
}
]
},
{
title: "Boulangerie 'My'",
coords: [48.1083913929429, -1.6933925246110162],
type: "bakery",
reviews: [
{
grade: 12
}
]
},
{
title: "Roadside",
coords: [48.108738196772215, -1.6776529242210632],
type: "restaurant",
food: "burgers",
reviews: [
{
grade: 12
}
]
},
{
title: "Poutines Bros",
coords: [48.11380361886915, -1.6809323015470785],
type: "restaurant",
food: "burgers",
reviews: [
{
grade: 12
}
]
},
{
title: "Les Italiens du coin",
coords: [48.11623649490153, -1.6739699469480376],
type: "restaurant",
food: "italian",
reviews: [
{
grade: 12
}
]
},
{
title: "O'bread",
coords: [48.12986333170566, -1.6569573969582505],
type: "restaurant",
food: "fast-food",
reviews: [
{
grade: 12
}
]
},
{
title: "Black and White Burger",
coords: [48.10919682486201, -1.6799545325429213],
type: "restaurant",
food: "burgers",
reviews: [
{
grade: 11.5
}
]
},
{
title: "Ramen ya",
coords: [48.1143674948123, -1.6791145410742345],
type: "restaurant",
food: "asian",
reviews: [
{
grade: 11
}
]
},
{
title: "Class'Croute",
coords: [48.13042865928908, -1.6223519152906614],
type: "restaurant",
food: "street-food",
reviews: [
{
grade: 10
}
]
},
{
title: "Coppa Colombier",
coords: [48.10486715424073, -1.678274121410079],
type: "restaurant",
food: "italian",
reviews: [
{
grade: 10
}
]
},
{
title: "Al'saj",
coords: [48.11406777261912, -1.6795804290437015],
type: "restaurant",
food: "eastern",
reviews: [
{
grade: 8.5
}
]
},
{
title: "Frencheez",
coords: [48.114769618169206, -1.6791796367468956],
type: "restaurant",
food: "fast-food",
reviews: [
{
grade: 8
}
]
},
{
title: "Royal Kébab",
coords: [48.10754609376947, -1.6731889814647676],
type: "restaurant",
food: "fast-food",
reviews: [
{
grade: 7
}
]
},
{
title: "Ethnic Food",
coords: [48.11425969273338, -1.6798136555011158],
type: "restaurant",
food: "fast-food",
reviews: [
{
grade: 7
}
]
},
{
title: "Tacozh",
coords: [48.11045956306925, -1.6787808089703555],
type: "restaurant",
food: "street-food",
reviews: [
{
grade: 6.5
}
]
},
{
title: "Croc' Midi",
coords: [48.10581968022915, -1.6284936688855927],
type: "restaurant",
food: "fast-food",
reviews: [
{
grade: 6
}
]
},
{
title: "Ober food",
coords: [48.11342567412467, -1.6615374938838021],
type: "restaurant",
food: "fast-food",
reviews: [
{
grade: 3.5
}
]
},
{
title: "Les Clandestines",
coords: [48.112433245186544, -1.6668202940483952],
type: "restaurant",
food: "mixed",
reviews: [
{
grade: 2
}
]
},
]
return { markers }
})