mirror of
https://github.com/seanmorley15/AdventureLog.git
synced 2025-07-28 09:19:37 +02:00
geocoding!!
This commit is contained in:
parent
e650a81109
commit
040d5a755f
2 changed files with 73 additions and 2 deletions
|
@ -1,6 +1,6 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
// @ts-nocheck
|
// @ts-nocheck
|
||||||
import type { Point } from '$lib/types';
|
import type { OpenStreetMapPlace, Point } from '$lib/types';
|
||||||
import { createEventDispatcher } from 'svelte';
|
import { createEventDispatcher } from 'svelte';
|
||||||
const dispatch = createEventDispatcher();
|
const dispatch = createEventDispatcher();
|
||||||
import { onMount } from 'svelte';
|
import { onMount } from 'svelte';
|
||||||
|
@ -10,6 +10,8 @@
|
||||||
|
|
||||||
let markers: Point[] = [];
|
let markers: Point[] = [];
|
||||||
|
|
||||||
|
let query: string = '';
|
||||||
|
|
||||||
export let longitude: number | null = null;
|
export let longitude: number | null = null;
|
||||||
export let latitude: number | null = null;
|
export let latitude: number | null = null;
|
||||||
|
|
||||||
|
@ -39,6 +41,20 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
let places: OpenStreetMapPlace[] = [];
|
||||||
|
|
||||||
|
async function geocode(e: Event) {
|
||||||
|
e.preventDefault();
|
||||||
|
if (!query) {
|
||||||
|
alert('Please enter a location');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
let res = await fetch(`https://nominatim.openstreetmap.org/search?q=${query}&format=jsonv2`);
|
||||||
|
console.log(res);
|
||||||
|
let data = (await res.json()) as OpenStreetMapPlace[];
|
||||||
|
places = data;
|
||||||
|
}
|
||||||
|
|
||||||
function submit() {
|
function submit() {
|
||||||
if (markers.length === 0) {
|
if (markers.length === 0) {
|
||||||
alert('Please select a point on the map');
|
alert('Please select a point on the map');
|
||||||
|
@ -53,7 +69,18 @@
|
||||||
<dialog id="my_modal_1" class="modal">
|
<dialog id="my_modal_1" class="modal">
|
||||||
<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
|
<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
|
||||||
<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
|
<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
|
||||||
<div class="modal-box" role="dialog" on:keydown={handleKeydown} tabindex="0">
|
<div class="modal-box w-11/12 max-w-4xl" role="dialog" on:keydown={handleKeydown} tabindex="0">
|
||||||
|
<form on:submit={geocode}>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
placeholder="Seach for a location"
|
||||||
|
class="input input-bordered w-full max-w-xs"
|
||||||
|
id="search"
|
||||||
|
name="search"
|
||||||
|
bind:value={query}
|
||||||
|
/>
|
||||||
|
<button type="submit">Search</button>
|
||||||
|
</form>
|
||||||
<h3 class="font-bold text-lg mb-4">Choose a Point</h3>
|
<h3 class="font-bold text-lg mb-4">Choose a Point</h3>
|
||||||
<MapLibre
|
<MapLibre
|
||||||
style="https://basemaps.cartocdn.com/gl/positron-gl-style/style.json"
|
style="https://basemaps.cartocdn.com/gl/positron-gl-style/style.json"
|
||||||
|
@ -70,6 +97,33 @@
|
||||||
{/each}
|
{/each}
|
||||||
</MapLibre>
|
</MapLibre>
|
||||||
|
|
||||||
|
{#if places.length > 0}
|
||||||
|
<div class="mt-4">
|
||||||
|
<h3 class="font-bold text-lg mb-4">Search Results</h3>
|
||||||
|
<ul>
|
||||||
|
{#each places as place}
|
||||||
|
<li>
|
||||||
|
<button
|
||||||
|
class="btn btn-neutral mb-2"
|
||||||
|
on:click={() => {
|
||||||
|
markers = [
|
||||||
|
{
|
||||||
|
lngLat: { lng: Number(place.lon), lat: Number(place.lat) },
|
||||||
|
name: place.display_name
|
||||||
|
}
|
||||||
|
];
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{place.display_name}
|
||||||
|
</button>
|
||||||
|
</li>
|
||||||
|
{/each}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
{:else}
|
||||||
|
<p class="text-error text-lg">No results found</p>
|
||||||
|
{/if}
|
||||||
|
|
||||||
<div class="mb-4 mt-4"></div>
|
<div class="mb-4 mt-4"></div>
|
||||||
<button class="btn btn-primary" on:click={submit}>Submit</button>
|
<button class="btn btn-primary" on:click={submit}>Submit</button>
|
||||||
<button class="btn btn-neutral" on:click={close}>Close</button>
|
<button class="btn btn-neutral" on:click={close}>Close</button>
|
||||||
|
|
|
@ -62,3 +62,20 @@ export type Collection = {
|
||||||
is_public: boolean;
|
is_public: boolean;
|
||||||
adventures: Adventure[];
|
adventures: Adventure[];
|
||||||
};
|
};
|
||||||
|
|
||||||
|
export type OpenStreetMapPlace = {
|
||||||
|
place_id: number;
|
||||||
|
licence: string;
|
||||||
|
osm_type: string;
|
||||||
|
osm_id: number;
|
||||||
|
lat: string;
|
||||||
|
lon: string;
|
||||||
|
category: string;
|
||||||
|
type: string;
|
||||||
|
place_rank: number;
|
||||||
|
importance: number;
|
||||||
|
addresstype: string;
|
||||||
|
name: string;
|
||||||
|
display_name: string;
|
||||||
|
boundingbox: string[];
|
||||||
|
};
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue