diff options
| -rwxr-xr-x | bun.lockb | bin | 160735 -> 163296 bytes | |||
| -rw-r--r-- | package.json | 1 | ||||
| -rw-r--r-- | src/components/LocationsMap.svelte | 107 |
3 files changed, 95 insertions, 13 deletions
| Binary files differ diff --git a/package.json b/package.json index 2ed4c699..dd020bb8 100644 --- a/package.json +++ b/package.json @@ -7,6 +7,7 @@ "@capacitor/cli": "^6.0.0", "@capacitor/core": "^6.0.0", "@capacitor/ios": "^6.1.2", + "@maplibre/maplibre-gl-geocoder": "^1.7.0", "@scure/base": "^1.1.8", "@scure/bip39": "^1.2.1", "@scure/btc-signer": "^1.3.2", diff --git a/src/components/LocationsMap.svelte b/src/components/LocationsMap.svelte index 4961fc8c..c5e13fc2 100644 --- a/src/components/LocationsMap.svelte +++ b/src/components/LocationsMap.svelte @@ -1,4 +1,5 @@ <script> + import MaplibreGeocoder from "@maplibre/maplibre-gl-geocoder"; import { tick, onMount, onDestroy } from "svelte"; import { browser } from "$app/environment"; import Icon from "$comp/Icon.svelte"; @@ -6,6 +7,7 @@ import { back } from "$lib/utils"; import "maplibre-gl/dist/maplibre-gl.css"; + import "@maplibre/maplibre-gl-geocoder/dist/maplibre-gl-geocoder.css"; export let locations; let map; @@ -145,10 +147,84 @@ let popups = {}; let counter = 0; - onMount(() => { + onMount(async () => { if (browser) { - import("maplibre-gl").then(({ default: maplibre }) => { - map = new maplibre.Map({ + console.log("hi"); + + try { + const request = `https://photon.komoot.io/api/?q=vancouver&limit=5`; + const response = await fetch(request); + const geojson = await response.json(); + console.log(geojson); + } catch (e) { + console.log(e); + } + + import("maplibre-gl").then(({ default: maplibregl }) => { + const geocoderApi = { + forwardGeocode: async (config) => { + console.log("forwardGeocode called with query:", config.query); // Debugging log + + const features = []; + try { + console.log("OHYES"); + const request = `https://photon.komoot.io/api/?q=${config.query}&limit=5`; + const response = await fetch(request); + const geojson = await response.json(); + console.log("OHNO"); + + for (const feature of geojson.features) { + const center = feature.center; + const point = { + type: "Feature", + geometry: { + type: "Point", + coordinates: center, + }, + place_name: feature.place_name, + properties: feature.properties, + text: feature.text, + place_type: feature.place_type, + center, + }; + features.push(point); + } + } catch (e) { + console.log("OH NO", e); + console.error(`Failed to forwardGeocode with error: ${e}`); + } + + return { + features, + }; + }, + }; + + // let searchInput; + // let debounceTimer; + // function handleInput(event) { + // clearTimeout(debounceTimer); + // + // debounceTimer = setTimeout(() => { + // const query = event.target.value; + // if (query.length > 0) { + // geocoderApi.forwardGeocode({ query }).then((result) => { + // console.log(result); // Display suggestions as needed + // }); + // } + // }, 300); + // } + + // searchInput = document.querySelector( + // ".maplibregl-ctrl-geocoder--input" + // ); + // + // if (searchInput) { + // console.log("ADDING"); + // searchInput.addEventListener("input", handleInput); + // } + + map = new maplibregl.Map({ container: mapContainer, style: "https://tiles.stadiamaps.com/styles/stamen_toner.json", center: [-123.05, 49.26], @@ -172,9 +248,9 @@ props: { tags }, }); - let marker = new maplibre.Marker({ color: "#F7931A", scale: 0.5 }) + let marker = new maplibregl.Marker({ color: "#F7931A", scale: 0.5 }) .setLngLat([lon, lat]) - .setPopup(new maplibre.Popup().setDOMContent(popupContainer)) + .setPopup(new maplibregl.Popup().setDOMContent(popupContainer)) .addTo(map); marker.id = counter++; @@ -195,6 +271,13 @@ }); updateLabelVisibility(); + + map.addControl( + new MaplibreGeocoder(geocoderApi, { + maplibregl, + }), + "top-left" + ); }); map.on("mousedown", stopFlying); @@ -221,14 +304,6 @@ class="mx-auto h-full w-full z-0" bind:this={mapContainer} /> - <div class="absolute flex top-2 left-2 gap-2"> - <button - class="rounded-full border-2 border-black bg-white w-10 h-10" - on:click={back} - > - <Icon icon="arrow-left" style="w-4 m-auto" /> - </button> - </div> <div class="relative"> {#if !showList} <div @@ -261,6 +336,12 @@ <div class="absolute flex top-2 right-2 gap-2"> <button class="rounded-full border-2 border-black bg-white w-10 h-10" + on:click={back} + > + <Icon icon="arrow-left" style="w-4 m-auto" /> + </button> + <button + class="rounded-full border-2 border-black bg-white w-10 h-10" on:click={toggleList} > <Icon icon="list" style="w-4 m-auto" /> |