Imperial-MEng/drp-48
1
0
Fork 0
Code Issues 17 Pull Requests Actions Packages Projects Releases Wiki Activity

feat: google maps #39

Merged
gk1623 merged 3 commits from google-maps-integration into master 2025-06-10 23:18:57 +00:00
Conversation 7 Commits 3 Files Changed 11 +125 -14
11 changed files with 125 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
.env.example
View File

@@ -1,2 +1,3 @@
PUBLIC_SUPABASE_URL=http://127.0.0.1:54321
PUBLIC_SUPABASE_ANON_KEY=your-anon-key-here
PUBLIC_SUPABASE_ANON_KEY=your-anon-key-here
PUBLIC_GMAPS_API_KEY=your-google-maps-api-key-here

2
.gitlab-ci.yml
View File

@@ -21,6 +21,7 @@ check_types:
variables:
PUBLIC_SUPABASE_URL: $SUPABASE_URL
PUBLIC_SUPABASE_ANON_KEY: $SUPABASE_ANON_KEY
PUBLIC_GMAPS_API_KEY: $GMAPS_API_KEY
script:
- npm run check
@@ -72,6 +73,7 @@ build:
variables:
PUBLIC_SUPABASE_URL: $SUPABASE_URL
PUBLIC_SUPABASE_ANON_KEY: $SUPABASE_ANON_KEY
PUBLIC_GMAPS_API_KEY: $GMAPS_API_KEY
script:
- npm run build
artifacts:

23
package-lock.json generated
View File

@@ -8,6 +8,7 @@
"name": "drp-48",
"version": "0.0.1",
"dependencies": {
"@googlemaps/js-api-loader": "^1.16.8",
"@supabase/ssr": "^0.6.1",
"@supabase/supabase-js": "^2.49.8",
"posthog-js": "^1.250.1"
@@ -15,12 +16,14 @@
"devDependencies": {
"@eslint/compat": "^1.2.5",
"@eslint/js": "^9.18.0",
"@googlemaps/typescript-guards": "^2.0.3",
"@playwright/test": "^1.49.1",
"@sveltejs/adapter-node": "^5.2.12",
"@sveltejs/kit": "^2.16.0",
"@sveltejs/vite-plugin-svelte": "^5.0.0",
"@testing-library/jest-dom": "^6.6.3",
"@testing-library/svelte": "^5.2.4",
"@types/google.maps": "^3.58.1",
"eslint": "^9.18.0",
"eslint-config-prettier": "^10.0.1",
"eslint-plugin-svelte": "^3.0.0",
@@ -819,6 +822,19 @@
"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
}
},
"node_modules/@googlemaps/js-api-loader": {
"version": "1.16.8",
"resolved": "https://registry.npmjs.org/@googlemaps/js-api-loader/-/js-api-loader-1.16.8.tgz",
"integrity": "sha512-CROqqwfKotdO6EBjZO/gQGVTbeDps5V7Mt9+8+5Q+jTg5CRMi3Ii/L9PmV3USROrt2uWxtGzJHORmByxyo9pSQ==",
"license": "Apache-2.0"
},
"node_modules/@googlemaps/typescript-guards": {
"version": "2.0.3",
"resolved": "https://registry.npmjs.org/@googlemaps/typescript-guards/-/typescript-guards-2.0.3.tgz",
"integrity": "sha512-3iHuO8H0jPehftsMK0kgyJzPYU/g/oiTRw+wu/yltqSZ7wJPt3vfsJHkPiuRpQjbnnWygX+T3mkRGyK/eyZ/lw==",
"dev": true,
"license": "Apache-2.0"
},
"node_modules/@humanfs/core": {
"version": "0.19.1",
"resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz",
@@ -1725,6 +1741,13 @@
"dev": true,
"license": "MIT"
},
"node_modules/@types/google.maps": {
"version": "3.58.1",
"resolved": "https://registry.npmjs.org/@types/google.maps/-/google.maps-3.58.1.tgz",
"integrity": "sha512-X9QTSvGJ0nCfMzYOnaVs/k6/4L+7F5uCS+4iUmkLEls6J9S/Phv+m/i3mDeyc49ZBgwab3EFO1HEoBY7k98EGQ==",
"dev": true,
"license": "MIT"
},
"node_modules/@types/json-schema": {
"version": "7.0.15",
"resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",

3
package.json
View File

@@ -20,12 +20,14 @@
"devDependencies": {
"@eslint/compat": "^1.2.5",
"@eslint/js": "^9.18.0",
"@googlemaps/typescript-guards": "^2.0.3",
"@playwright/test": "^1.49.1",
"@sveltejs/adapter-node": "^5.2.12",
"@sveltejs/kit": "^2.16.0",
"@sveltejs/vite-plugin-svelte": "^5.0.0",
"@testing-library/jest-dom": "^6.6.3",
"@testing-library/svelte": "^5.2.4",
"@types/google.maps": "^3.58.1",
"eslint": "^9.18.0",
"eslint-config-prettier": "^10.0.1",
"eslint-plugin-svelte": "^3.0.0",
@@ -42,6 +44,7 @@
"vitest": "^3.0.0"
},
"dependencies": {
"@googlemaps/js-api-loader": "^1.16.8",
"@supabase/ssr": "^0.6.1",
"@supabase/supabase-js": "^2.49.8",
"posthog-js": "^1.250.1"

5
src/lib/components/inputs/Text.svelte
View File

@@ -1,15 +1,16 @@
<script lang="ts">
interface Props {
inputElem?: HTMLInputElement;
name: string;
value?: string | null;
placeholder?: string;
required?: boolean;
}
let { value = $bindable(), name, ...rest }: Props = $props();
let { inputElem = $bindable(), value = $bindable(), name, ...rest }: Props = $props();
</script>
<input type="text" id={name} {name} bind:value {...rest} />
<input type="text" id={name} {name} bind:value bind:this={inputElem} {...rest} />
<style>
input {

9
src/lib/database.d.ts vendored
View File

@@ -100,7 +100,8 @@ export type Database = {
}
study_spaces: {
Row: {
building_location: string | null
building_location: Json | null
building_location_old: string | null
created_at: string | null
description: string | null
id: string
@@ -112,7 +113,8 @@ export type Database = {
wifi: string
}
Insert: {
building_location?: string | null
building_location?: Json | null
building_location_old?: string | null
created_at?: string | null
description?: string | null
id?: string
@@ -124,7 +126,8 @@ export type Database = {
wifi: string
}
Update: {
building_location?: string | null
building_location?: Json | null
building_location_old?: string | null
created_at?: string | null
description?: string | null
id?: string

10
src/lib/index.ts
View File

@@ -1,3 +1,4 @@
import { PUBLIC_GMAPS_API_KEY } from "$env/static/public";
import type { Database } from "./database.d.ts";
export type Table<T extends keyof Database["public"]["Tables"]> =
@@ -30,3 +31,12 @@ export const reportTypes = [
"Incorrect content",
"Other"
];
export async function gmapsLoader() {
const { Loader } = await import("@googlemaps/js-api-loader");
return new Loader({
apiKey: PUBLIC_GMAPS_API_KEY,
version: "weekly",
libraries: ["places"]
});
}

42
src/routes/space/+page.svelte
View File

@@ -7,15 +7,30 @@
import Button from "$lib/components/Button.svelte";
import Images from "$lib/components/inputs/Images.svelte";
import type { Table } from "$lib";
import { availableStudySpaceTags, wifiTags, powerOutletTags, volumeTags } from "$lib";
import {
availableStudySpaceTags,
wifiTags,
powerOutletTags,
volumeTags,
gmapsLoader
} from "$lib";
import { onMount } from "svelte";
import type { Json } from "$lib/database.js";
const { data } = $props();
const { supabase } = $derived(data);
let spaceImgs = $state<FileList>();
let uploading = $state(false);
let studySpaceData = $state<Omit<Table<"study_spaces">, "id" | "created_at" | "updated_at">>({
let studySpaceData = $state<
Omit<
Table<"study_spaces">,
"id" | "created_at" | "updated_at" | "building_location_old" | "building_location"
> & {
building_location?: google.maps.places.PlaceResult;
}
>({
description: "",
building_location: "",
building_location: undefined,
location: "",
tags: [],
volume: "",
@@ -25,10 +40,14 @@
async function uploadStudySpace() {
if (!spaceImgs || spaceImgs.length < 1) return alert("Please select an image file.");
if (!studySpaceData.building_location) return alert("Please select a building location.");
const { data: studySpaceInsert, error: studySpaceError } = await supabase
.from("study_spaces")
.insert(studySpaceData)
.insert({
...studySpaceData,
building_location: studySpaceData.building_location as Json
})
.select()
.single();
if (studySpaceError)
@@ -92,6 +111,19 @@
tagFilter = "";
};
}
let addressInput = $state<HTMLInputElement>();
onMount(async () => {
const loader = await gmapsLoader();
const places = await loader.importLibrary("places");
if (!addressInput) return console.error("Address input element not found");
const placeAutocomplete = new places.Autocomplete(addressInput, {
componentRestrictions: { country: "gb" }
});
placeAutocomplete.addListener("place_changed", () => {
studySpaceData.building_location = placeAutocomplete.getPlace();
});
});
</script>
<Navbar>
@@ -211,7 +243,7 @@
<label for="building-location">Add the building location:</label>
<Text
name="building-location"
bind:value={studySpaceData.building_location}
bind:inputElem={addressInput}
placeholder="Huxley Building, Imperial South Kensington Campus"
required
/>

35
src/routes/space/[id]/+page.svelte
View File

@@ -5,10 +5,13 @@
import Carousel from "$lib/components/Carousel.svelte";
import CompulsoryTags from "$lib/components/CompulsoryTags.svelte";
import Report from "$lib/components/Report.svelte";
import { onMount } from "svelte";
import { gmapsLoader } from "$lib";
const { data } = $props();
const { space, supabase } = $derived(data);
const place = $derived(space.building_location as google.maps.places.PlaceResult);
const imgUrls = $derived(
space.study_space_images.length === 0
? [placeholder]
@@ -23,6 +26,23 @@
function hideFunc() {
isReportVisible = false;
}
let mapElem = $state<HTMLDivElement>();
onMount(async () => {
if (!mapElem) return console.error("Map element not found");
const loader = await gmapsLoader();
const { Map } = await loader.importLibrary("maps");
const { AdvancedMarkerElement } = await loader.importLibrary("marker");
const map = new Map(mapElem, {
center: place.geometry?.location,
zoom: 15,
mapId: "9f4993cd3fb1504d495821a5"
});
new AdvancedMarkerElement({
position: place.geometry?.location,
map
});
});
</script>
<Navbar>
@@ -57,8 +77,14 @@
<hr />
<div class="subtitle">Where it is:</div>
<p class="addrContainer">
{space.building_location}
{#if place.name}
{place.name} <br />
{/if}
{#each place.formatted_address?.split(",") || [] as line (line)}
{line.trim()} <br />
{/each}
</p>
<div class="addrMap" bind:this={mapElem}></div>
<button
type="button"
@@ -126,7 +152,7 @@
.addrContainer {
font-size: 1.2rem;
padding: 0rem 1.4rem;
padding: 0rem 1.4rem 1rem;
}
.tagContainer {
@@ -157,6 +183,11 @@
font-size: 1.3rem;
padding-bottom: 0;
}
.addrMap {
width: 100%;
aspect-ratio: 1 / 1;
}
.reportButton {
width: 100%;
padding: 0.4rem;

3
supabase/migrations/20250609145614_gmaps_location.sql Normal file
View File

@@ -0,0 +1,3 @@
-- rename old colum nto building_location_old and create a new column instead of altering
alter table "public"."study_spaces" rename column "building_location" to "building_location_old";
alter table "public"."study_spaces" add column "building_location" jsonb;

4
supabase/schemas/0001_study_spaces.sql
View File

@@ -11,7 +11,9 @@ CREATE TABLE study_spaces (
description text,
-- Location within building, e.g., "Room 101"
location text,
building_location text,
-- Not bothered to write a proper data migration
building_location_old text,
building_location jsonb,
tags text[] NOT NULL DEFAULT array[]::text[],
volume text NOT NULL,
wifi text NOT NULL,