101 lines
2.3 KiB
Svelte
101 lines
2.3 KiB
Svelte
<script lang="ts">
|
|
export let query: string | undefined = undefined
|
|
export let state: string | undefined = undefined
|
|
export let country: string | undefined = undefined
|
|
export let city: string | undefined = undefined
|
|
export let street: string | undefined = undefined
|
|
export let ll: [number, number] | null = null
|
|
|
|
export let visible = true
|
|
|
|
type Item = {
|
|
boundingbox: [string, string, string, string]
|
|
display_name: string
|
|
}
|
|
|
|
async function getItem(query: {
|
|
q?: string
|
|
state?: string
|
|
country?: string
|
|
city?: string
|
|
street?: string
|
|
format?: string
|
|
}) {
|
|
if (!query.q) delete query.q
|
|
// const hasItem = localStorage.getItem(JSON.stringify(query))
|
|
// if (hasItem && hasItem != 'undefined') {
|
|
// const item = JSON.parse(hasItem)
|
|
// visible = item ? true : false
|
|
// return item
|
|
// }
|
|
query = JSON.parse(JSON.stringify(query))
|
|
const search = new URLSearchParams(query).toString()
|
|
const resp = await fetch(
|
|
`https://nominatim.openstreetmap.org/search?${search}`
|
|
)
|
|
const item = (await resp.json())[0]
|
|
localStorage.setItem(JSON.stringify(query), JSON.stringify(item))
|
|
visible = item ? true : false
|
|
return item
|
|
}
|
|
|
|
let promise: Promise<Item>
|
|
if (!ll) {
|
|
promise = getItem({
|
|
q: query,
|
|
state,
|
|
country,
|
|
city,
|
|
street,
|
|
format: 'json'
|
|
})
|
|
}
|
|
</script>
|
|
|
|
{#if promise}
|
|
{#await promise then item}
|
|
{#if item}
|
|
<div class="map-wrapper loaded">
|
|
<iframe
|
|
title={item.display_name ? item.display_name : 'OpenStreetMap'}
|
|
frameborder="0"
|
|
scrolling="no"
|
|
marginheight="0"
|
|
marginwidth="0"
|
|
src="https://www.openstreetmap.org/export/embed.html?bbox={item
|
|
.boundingbox[2]},{item.boundingbox[0]},{item.boundingbox[3]},{item
|
|
.boundingbox[1]}&layer=mapnik"
|
|
/>
|
|
</div>
|
|
{/if}
|
|
{/await}
|
|
{:else if ll}
|
|
<div class="map-wrapper loaded">
|
|
<iframe
|
|
title="OpenStreetMap"
|
|
frameborder="0"
|
|
scrolling="no"
|
|
marginheight="0"
|
|
marginwidth="0"
|
|
src="https://www.openstreetmap.org/export/embed.html?bbox={ll[1]},{ll[0]},{ll[1]},{ll[0]}&layer=mapnik"
|
|
/>
|
|
</div>
|
|
{/if}
|
|
|
|
<style lang="postcss">
|
|
.map-wrapper.loaded {
|
|
background-color: var(--grey-300);
|
|
position: relative;
|
|
min-height: 10rem;
|
|
}
|
|
.map-wrapper iframe {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
</style>
|