diff --git a/public/map/icons/bar.svg b/public/map/icons/bar.svg index 7a0ca12..42b8aae 100644 --- a/public/map/icons/bar.svg +++ b/public/map/icons/bar.svg @@ -1,4 +1,4 @@ - + diff --git a/public/map/icons/fast-food.svg b/public/map/icons/fast-food.svg index 74efaf5..86a337f 100644 --- a/public/map/icons/fast-food.svg +++ b/public/map/icons/fast-food.svg @@ -1,4 +1,4 @@ - - - + + + diff --git a/src/App.vue b/src/App.vue index 076873d..53330aa 100644 --- a/src/App.vue +++ b/src/App.vue @@ -5,20 +5,17 @@ import 'vue-leaflet-markercluster/dist/style.css' import L, { type PointTuple } from 'leaflet' globalThis.L = L -import { LMap, LTileLayer, LMarker, LPopup, LIcon, LControlZoom } from '@vue-leaflet/vue-leaflet' +import { LMap, LTileLayer, LControlZoom } from '@vue-leaflet/vue-leaflet' import { LMarkerClusterGroup } from 'vue-leaflet-markercluster' -import { computed, ref } from 'vue' +import { ref } from 'vue' import { useReviewStore } from './stores/reviews' +import ReviewMarker from './components/ReviewMarker.vue' const { markers } = useReviewStore() const zoom = ref(7) const minZoom = 4 const center = ref([47.809376, -0.637207]) - -const iconSize = ref([38, 38]) -const iconAnchor = computed(() => [iconSize.value[0] / 2, iconSize.value[1]]) -const popupOffset = [0, iconSize.value[0] * -0.66]
-

- {{ marker.title }} -

- -

-

- - - - - - - - - - - -
- {{ marker.reviews?.[0].grade }} -
- -
- - + @@ -128,6 +66,10 @@ main { } } +.marker-cluster span { + font-weight: var(--font-weight-medium); +} + .marker-cluster-small { background-color: color-mix(in srgb, var(--color-green-500) 25%, transparent); diff --git a/src/components/ReviewMarker.vue b/src/components/ReviewMarker.vue new file mode 100644 index 0000000..b600859 --- /dev/null +++ b/src/components/ReviewMarker.vue @@ -0,0 +1,69 @@ + + + diff --git a/src/models/Markers.ts b/src/models/Markers.ts new file mode 100644 index 0000000..7cf4a23 --- /dev/null +++ b/src/models/Markers.ts @@ -0,0 +1,18 @@ +import type { PointTuple } from "leaflet" + +export type MarkerType = "restaurant" | "bar" | "bakery" | "tea-shop" | "coffee-shop" | "ice-cream" +export type FoodType = "mixed" | "asian" | "vegetarian" | "italian" | "fast-food" | "street-food" | "burgers" | "seafood" | "creperie" | "eastern" + +export interface ReviewMarker { + coords: PointTuple + title?: string + type?: MarkerType + food?: FoodType + reviews?: Review[] + closed?: boolean +} + +export interface Review { + text?: string + grade: number +} diff --git a/src/stores/reviews.ts b/src/stores/reviews.ts index 0dce2f0..b82d7b6 100644 --- a/src/stores/reviews.ts +++ b/src/stores/reviews.ts @@ -1,23 +1,6 @@ -import type { PointTuple } from 'leaflet' +import type { ReviewMarker } from '@/models/Markers' import { defineStore } from 'pinia' -type MarkerType = "restaurant" | "bar" | "bakery" | "tea-shop" | "coffee-shop" | "ice-cream" -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[] - closed?: boolean -} - -interface Review { - text?: string - grade: number -} - export const useReviewStore = defineStore('reviews', () => { const markers: ReviewMarker[] = [ { @@ -475,6 +458,18 @@ const markers: ReviewMarker[] = [ } ] }, + { + title: "La Belle Normande", + coords: [48.63542201422258, -1.5098922028521766], + type: "restaurant", + food: "creperie", + reviews: [ + { + grade: 0.8, + text: "De la bouffe industrielle dans un attrape-touriste avec une marge multipliée par trois ? C'est ici." + } + ] + }, { title: "Saïgon Cà phê", coords: [49.254911553043485, 4.027036477700138], @@ -487,6 +482,18 @@ const markers: ReviewMarker[] = [ } ] }, + { + title: "Tacos Kebab 51", + coords: [48.72660636228893, 4.584080588216441], + type: "restaurant", + food: "fast-food", + reviews: [ + { + grade: 1.8, + text: "Un kebab correct, rien de plus." + } + ] + }, { title: "La Calabraise d'Erlon", coords: [49.256709879454554, 4.025919584640479], @@ -523,6 +530,17 @@ const markers: ReviewMarker[] = [ } ] }, + { + title: "Roadside", + coords: [48.646920384150576, -2.0086050666279425], + type: "restaurant", + food: "street-food", + reviews: [ + { + grade: 2.9 + } + ] + }, { title: "Pitaya Les Lices", coords: [48.11275152309647, -1.681332848723036],