Skip to content

Commit

Permalink
Merge pull request #16 from TIPPECC/6-display-geotiff-on-map
Browse files Browse the repository at this point in the history 
6 display geotiff on map
  • Loading branch information
@geofranzi
geofranzi authored Jul 22, 2024
2 parents e97739d + 8db64ea commit 9b6547b
Show file tree
Hide file tree
Showing 5 changed files with 267 additions and 106 deletions.
50 changes: 28 additions & 22 deletions src/lib/ColorGradientPicker.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -302,26 +302,24 @@
}
</script>

<div class="p-4 {horizontal ? 'w-[480px]' : 'w-[380px]'}">
<div
class="grid grid-cols-1 {horizontal
? 'grid-cols-1 w-[480px] place-items-center'
: 'grid-cols-5 w-[380px]'}"
>
<div class={horizontal ? '' : 'col-span-3 pt-2 flex place-items-center justify-center p-1'}>
<div class={horizontal ? 'flex' : ''}>
<div class="flex-1 {horizontal ? 'mr-1' : 'mb-1'}">
<div class="p-4 mt-2 {horizontal ? 'w-[480px]' : 'w-[260px]'}">
<!--Buttons/Inputs-->
<div class="grid grid-cols-1 place-items-center {horizontal ? 'grid-cols-1 w-full' : 'w-full'}">
<div class={horizontal ? '' : 'pt-2 flex place-items-center p-1'}>
<div class={horizontal ? 'md:flex' : ''}>
<!--Bounds-->
<div class="flex {horizontal ? 'md:mr-1 max-md:mb-1' : 'mb-1'}">
{#if show_in_bounds}
<button
class="variant-filled-tertiary px-1 w-28"
class="variant-filled-tertiary hover:bg-tertiary-600 p-1 w-28"
on:click={() => {
show_in_bounds = !show_in_bounds;
}}
>Show all
</button>
{:else}
<button
class="variant-filled-tertiary px-1 w-28"
class="variant-filled-tertiary hover:bg-tertiary-600 p-1 w-28"
on:click={() => {
show_in_bounds = !show_in_bounds;
}}
Expand All @@ -330,18 +328,19 @@
{/if}
</div>

<div class="flex-1 {horizontal ? 'mr-1' : 'mb-1'}">
<!--Verticality-->
<div class="flex-1 {horizontal ? 'md:mr-2 max-md:mb-1' : 'mb-1'}">
{#if horizontal}
<button
class="variant-filled-tertiary px-1 w-28"
class="variant-filled-tertiary hover:bg-tertiary-600 p-1 w-28"
on:click={() => {
horizontal = !horizontal;
}}
>Horizontal
</button>
{:else}
<button
class="variant-filled-tertiary px-1 w-28"
class="variant-filled-tertiary hover:bg-tertiary-600 p-1 w-28"
on:click={() => {
horizontal = !horizontal;
}}
Expand All @@ -350,36 +349,40 @@
{/if}
</div>

<div class="flex {horizontal ? 'mr-1' : 'mb-1'}">
<!--Custom Max-->
<div class="flex {horizontal ? 'md:mr-2 max-md:mb-1' : 'mb-1'}">
<nobr>
<label for="custom_bounds_input" class="flex-1 variant-outline-tertiary px-1"
<label for="custom_bounds_input" class="flex variant-outline-tertiary p-1"
>Custom Max:</label
>
</nobr>
<input
id="custom_bounds_input"
class="flex-1 text-black ml-1 max-w-[96px]"
class="flex-1 text-black ml-1 max-w-[96px] pl-1"
on:change={set_custom_bounds}
/>
</div>
<div class="flex {horizontal ? 'mr-1' : 'mb-1'}">

<!--Steps-->
<div class="flex {horizontal ? 'md:mr-2 max-md:mb-1' : 'mb-1'}">
<nobr>
<label for="steps_input" class="flex-1 variant-outline-tertiary px-1">Steps:</label>
<label for="steps_input" class="flex variant-outline-tertiary p-1">Steps:</label>
</nobr>
<input
on:change={change_steps}
bind:value={input_steps}
type="number"
id="steps_input"
class="flex-1 text-black ml-1 max-w-[36px]"
class="flex-1 text-black ml-1 max-w-[40px] pl-1"
max="21"
min="0"
/>
</div>

<!--Color Scheme-->
<div class="flex">
<nobr>
<label for="color_scheme_select" class="flex-1 variant-outline-tertiary px-1"
<label for="color_scheme_select" class="flex variant-outline-tertiary p-1"
>Color Scheme:</label
>
</nobr>
Expand All @@ -400,11 +403,13 @@
</div>
</div>

<!--Color Gradient-->
<div
class="grid grid-cols-1 {horizontal
? 'grid-cols-1'
: 'grid-cols-[40px_40px] col-span-2 p-1'} place-items-center"
: 'grid-cols-[40px_40px] p-1'} place-items-center"
>
<!--Color Rectangles-->
<div>
<div class={horizontal ? 'flex items-center mt-2' : ''}>
{#key color_steps}
Expand All @@ -422,6 +427,7 @@
</div>
</div>

<!--Values-->
<div>
<div class={horizontal ? 'flex items-center' : ''}>
{#key color_steps}
Expand Down
102 changes: 72 additions & 30 deletions src/lib/CustomSliderPicker.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,49 @@
<script lang="ts">
import { createEventDispatcher } from 'svelte';
import { onMount, onDestroy } from 'svelte';
const dispatch = createEventDispatcher();
// Define custom slider steps
export let valMap: any[];
export let onSliderChangeFunction = onSliderChange;
// const valMap = [0, 1, 3, 5, 10, 15, 20, 30, 50];
let visible_value_ids: any[] = [];
let num_displayed_values: number = 0;
// This is the default position of the slider
export let slider_index: number = 0;
export let slider_value: number = 0;
// approximated space in px of one value label of the slider
// higher means less labels across the slider
export let label_space: number = 80;
onMount(() => {
window.addEventListener('resize', handle_resize);
handle_resize();
});
onDestroy(() => {
window.removeEventListener('resize', handle_resize);
});
function get_value_range(upper: number, lower: number, steps: number) {
// console.log("Building values: ", upper, " ", lower, " ", steps);
if (steps <= 1) {
return false;
}
const difference = upper - lower;
const increment = difference / (steps - 1);
return [
lower,
...Array(steps - 2)
.fill('')
.map((_, index) => Math.round(lower + increment * (index + 1))),
upper
];
}
function onSliderChange(e?) {
// Update the internal slider value based on input change
slider_index = e.target.value;
Expand All @@ -20,6 +53,35 @@
}
}
function handle_resize() {
if (valMap) {
var n = valMap.length;
var slider = document.getElementById('slider-picker-input-slider');
if (!slider) {
throw new Error("Element with id 'slider-picker-input-slider' does not exist.");
}
if (!label_space || label_space <= 0) {
var err_msg = 'Invalid label space: ' + label_space.toString();
throw new Error(err_msg);
}
var w = slider.clientWidth;
var num_helper = Math.floor(w / label_space);
// if change, need to update visible_value_ids
if (num_displayed_values != num_helper) {
num_displayed_values = num_helper;
// console.log("#Numbers: ", n, " width: ", w, " Calc: ", Math.floor(w/72));
var helper = get_value_range(n - 1, 0, num_displayed_values);
if (helper) {
visible_value_ids = helper;
}
}
}
}
// var intervalId = window.setInterval(function(){
// if (slider_index < valMap.length){
// slider_index += 1;
Expand All @@ -28,25 +90,28 @@
// }, 5000);
</script>

{#if valMap != undefined}
<div class="variant-outline-tertiary mt-2 px-20">
{#if valMap}
<div class="md:px-20 max-md:px-4">
<h4 class="h4 text-center">Bandslider</h4>
<div class="slider-container mt-6">
<div class="relative h-[40px] mt-6">
<!-- Slider input with custom steps -->
<input
type="range"
class="slider"
class="slider relative h-[20px] w-full bg-transparent"
id="slider-picker-input-slider"
min="0"
max={valMap.length - 1}
step="1"
bind:value={slider_index}
on:change={onSliderChangeFunction}
/>

<!-- Labels for the slider steps -->
{#each valMap as val, idx}
{#if idx % 10 == 0 || idx == valMap.length - 1}
<div class="slider-label" style="left: {(idx / (valMap.length - 1)) * 100}%">
{#if visible_value_ids.includes(idx) || idx == valMap.length - 1}
<div
class="top-[-20px] translate-x-[-50%] absolute"
style="left: {(idx / (valMap.length - 1)) * 100}%"
>
{val}
</div>
{/if}
Expand All @@ -60,30 +125,7 @@

<style>
/* Slider styling */
.slider-container {
position: relative;
height: 40px;
}
.slider {
width: 100%;
background: transparent;
position: relative;
height: 20px;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
background: #4caf50;
width: 20px;
height: 20px;
border-radius: 50%;
cursor: pointer;
}
.slider-label {
position: absolute;
top: -20px;
transform: translateX(-50%);
}
</style>
12 changes: 9 additions & 3 deletions src/lib/fetch_folder_content.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,16 +3,22 @@ import { API_URL } from '../app.config';
/**
* @param {string | undefined} [type]
*/
export async function _fetch_foldercontent_by_type(type) {
const custom_url = API_URL + '/climate/get_content?type=' + type;
export async function _fetch_foldercontent_by_type(type, convertable = false) {
var helper = API_URL + '/climate/get_content?type=' + type;
if (convertable) {
helper += '&convertable=true';
}

const custom_url = helper;

const res = await fetch(custom_url, {
method: 'GET'
});

let result = [];
if (!res.ok) {
throw new Error(`${res.status} ${res.statusText}`);
var msg = await res.text();
throw new Error(`${res.status} ${res.statusText}\nReason: ${msg}`);
}

result = await res.json();
Expand Down
Loading

0 comments on commit 9b6547b

Please sign in to comment.