forked from MapComplete/MapComplete
64 lines
1.8 KiB
Svelte
64 lines
1.8 KiB
Svelte
|
<script lang="ts">/**
|
||
|
|
* Wrapper around 'ThemeViewGui', which is responsible for some boiler plate things, such as:
|
||
|
|
*
|
||
|
|
* - Checking for WebGL support
|
||
|
|
* - Loading the available layers
|
||
|
|
* - ...
|
||
|
|
*/
|
||
|
|
import ThemeViewGUI from "./ThemeViewGUI.svelte"
|
||
|
|
import Constants from "../Models/Constants.js"
|
||
|
|
import { Utils } from "../Utils.js"
|
||
|
|
import { UIEventSource } from "../Logic/UIEventSource"
|
||
|
|
import { WithSearchState } from "../Models/ThemeViewState/WithSearchState"
|
||
|
|
import ThemeConfig from "../Models/ThemeConfig/ThemeConfig"
|
||
|
|
|
||
|
|
function webgl_support() {
|
||
|
|
try {
|
||
|
|
const canvas = document.createElement("canvas")
|
||
|
|
if (
|
||
|
|
!!window.WebGLRenderingContext &&
|
||
|
|
(canvas.getContext("webgl") || canvas.getContext("experimental-webgl"))
|
||
|
|
) {
|
||
|
|
return true
|
||
|
|
}
|
||
|
|
} catch (e) {
|
||
|
|
return false
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
async function getAvailableLayers(): Promise<Set<string>> {
|
||
|
|
if (!Constants.SummaryServer) {
|
||
|
|
return new Set<string>()
|
||
|
|
}
|
||
|
|
try {
|
||
|
|
const host = new URL(Constants.SummaryServer).host
|
||
|
|
const status: { layers: string[] } = await Promise.any([
|
||
|
|
Utils.downloadJson<{ layers }>("https://" + host + "/summary/status.json"),
|
||
|
|
Utils.waitFor(2500, { layers: [] })
|
||
|
|
])
|
||
|
|
return new Set<string>(status.layers)
|
||
|
|
} catch (e) {
|
||
|
|
console.error("Could not get MVT available layers due to", e)
|
||
|
|
return new Set<string>()
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
export let theme: ThemeConfig
|
||
|
|
|
||
|
|
let webgl_supported = webgl_support()
|
||
|
|
|
||
|
|
let availableLayers = UIEventSource.FromPromise(getAvailableLayers())
|
||
|
|
const state = new WithSearchState(theme, availableLayers)
|
||
|
|
|
||
|
|
</script>
|
||
|
|
|
||
|
|
{#if !webgl_supported}
|
||
|
|
<div class="alert w-full h-full justify-center items-center m-8">WebGL is not supported or not enabled. This is
|
||
|
|
essential
|
||
|
|
for MapComplete to function, please enable this.
|
||
|
|
</div>
|
||
|
|
{:else}
|
||
|
|
<ThemeViewGUI {state} />
|
||
|
|
{/if}
|