Skip to content

Commit

Permalink
lots
Browse files Browse the repository at this point in the history
  • Loading branch information
@morandd
morandd committed Nov 23, 2024
1 parent 96f4013 commit 7b25a59
Show file tree
Hide file tree
Showing 7 changed files with 237 additions and 96 deletions.
36 changes: 36 additions & 0 deletions src/components/COGURL.astro
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@

<div class="cogurl">
<input type="text" placeholder="URL to any GeoTIFF"
data-badvalue="https://data.sustainability.nilu.no/fairicube/ua2018_mosaic_raster_10m_cog_2_3_B1.tif"
value="https://data.sustainability.nilu.no/fairicube/r05_treecover2018_100m_b1_COG.tif"
/>
<button>View</button>
</div>

<script>
document.querySelector('.cogurl button')?.addEventListener('click', viewCOG);
function viewCOG() {
//@ts-ignore
const cogurl = document.querySelector('.cogurl input')?.value;
if (!cogurl) return;
localStorage.setItem('url', cogurl);
document.dispatchEvent(new Event('newsource'));

}
</script>

<style>
.cogurl {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
width: 100vw;
bottom: 10px;
right: 0px;
margin:0;
border-radius: 10px;
padding: 5px;
gap: 10px;
}
</style>
64 changes: 55 additions & 9 deletions src/components/ChoosePalette.astro
View file
Original file line number Diff line number Diff line change
@@ -1,24 +1,39 @@

<div class="choosepalette">
<div>
<label><input type="radio" name="palette" value="A" checked />Palette A</label>
<label><input type="radio" name="palette" value="B" />Palette B</label>
<label><input type="radio" name="palette" value="C" />Palette C</label>
<label><input type="radio" name="palette" value="D" />Palette D</label>
<label><input type="radio" name="palette" value="RGB"
/>True Color</label>
<label><input type="radio" name="palette" value="d3.interpolateViridis" checked />Viridis</label>
<label><input type="radio" name="palette" value="d3.interpolateTurbo" />Turbo</label>
<label><input type="radio" name="palette" value="d3.interpolateBlues" />Blues</label>
<label><input type="radio" name="palette" value="d3.interpolateGnBu" />GnBu</label>
<label><input type="radio" name="palette" value="rgb"/>True Color</label>
<label class="invertpalette"><input type="checkbox" name="invertpalette"/>Invert</label>
</div>
</div>



<script>

// Add click handlers for the invert checkbox. Set the invert flag in localStorage.
document.querySelector('input[name="invertpalette"]')?.addEventListener('change', (e) => {
localStorage.setItem('invertpalette', (e.target as HTMLInputElement).checked.toString());
document.dispatchEvent(new Event('newpalette'));
});

// Add an event listener for the "newpalette" event. If localStorage.palette=rgb hide the Invert checkbox
document.addEventListener('newpalette', () => {
const palette = localStorage.getItem('palette');
const invertCheckbox = document.querySelector('label.invertpalette') as HTMLLabelElement;
invertCheckbox.style.opacity = palette==='rgb' ? '0' : '1';
});

// Change the palette
// Add click handlers for the palette radio buttons
document.querySelectorAll('input[name="palette"]').forEach( (radio : Element) => {
// Trigger a "palette" event when the palette is changed
if (radio) (radio as HTMLInputElement).onchange = () => document.dispatchEvent(new Event('newpalette'));
(radio as HTMLInputElement).onchange = (e) => {
localStorage.setItem('palette', (e.target as HTMLInputElement).value);
document.dispatchEvent(new Event('newpalette'));
};
});


Expand All @@ -42,11 +57,20 @@ document.addEventListener('newsource', () => {
flex-direction: column;
justify-content: center;
align-items: flex-end;
pointer-events: none;

div {
pointer-events: auto;
padding: 1rem;
opacity: 0.5;
transition: all 0.1s;
&:hover {
background-color: rgba(255, 255, 255, 0.6);
opacity: 1;
}
display: flex;
flex-direction: column;
align-items: start;
align-items: flex-end;
align-content: start;
justify-items: start;
justify-content: start;
Expand All @@ -56,6 +80,28 @@ document.addEventListener('newsource', () => {
font-family: 'Inter', sans-serif;
}
}
input{
display: none;
}
input[name="invertpalette"] {
display: initial;
margin-right: 0.5rem;
}
label {
margin-bottom: 0;
transition: all 0.1s ease-in-out;
}
label:has(input:disabled) {
opacity: 0.25;
pointer-events: none;
}
label:has(input[name="palette"]:checked){
color: var(--color-primary);
font-weight: 600;
font-size: 1.2rem;
margin-top: 0.2rem;
margin-bottom: 0.2rem;
}

top:0;
height: 100vh;
Expand Down
27 changes: 21 additions & 6 deletions src/components/Colorbar.astro
View file
Original file line number Diff line number Diff line change
@@ -1,21 +1,36 @@
<div id="colorbar"></div>

<script>

import { getPaletteAsGradient } from '../scripts/palette';
import * as d3 from 'd3';
// Listen for the changes to palette or source
document.addEventListener('newpalette', updateColorbar);
document.addEventListener('newsource', updateColorbar);


function updateColorbar() {
console.log('newpalette - updating colorbar');
console.log('updateColorbar');

const colorbar = document.getElementById('colorbar');
if (!colorbar) return;

const el = document.getElementById('colorbar');
if (!el) return;
const palette = localStorage.getItem('palette') || 'd3.interpolateBlues';
colorbar.style.display = (palette=='rgb') ? 'none' : 'flex';

const palette = localStorage.getItem('palette');
const min : number = parseFloat(localStorage.getItem('min') ?? '0');
const max : number = parseFloat(localStorage.getItem('max') ?? '1');
const nmiddletics = (min==0 && max==1) ? 0 : 3;
// Get Ntics evenly spaced between min and max
const middltics = d3.range(min, max, (max-min)/(nmiddletics-1));
const labels = [...middltics.map(t => t.toFixed(0)), max.toFixed(0)];
colorbar.innerHTML = '';
for (let i = 0; i < labels.length; i++){
let div = document.createElement('div');
div.innerHTML = labels[i]; // Value
colorbar.appendChild(div);
}

el.style.display = (palette=='rgb') ? 'none' : 'block';
colorbar.style.background = getPaletteAsGradient();

}

Expand Down
85 changes: 51 additions & 34 deletions src/components/Map.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,15 +36,15 @@ const googleview = new ol.View({
//center: [10,55.2],zoom:6 // Copenhagen
//center:[-77.1778,26.4858], zoom: 8 // Virgin Gorda
});
/*googleview.setCenter( fromLonLat([-77.1778,26.4858], googleview.getProjection())); googleview.setZoom(8); // Virgin Gorda
googleview.setCenter( fromLonLat([-77.1778,26.4858], googleview.getProjection())); googleview.setZoom(8); // Virgin Gorda
googleview.setCenter( fromLonLat([-10,55.2], googleview.getProjection())); googleview.setZoom(6); // Copenhagen
googleview.setCenter( fromLonLat([16.2,48.2], googleview.getProjection())); googleview.setZoom(10); // Vienna
*/


const map = new ol.Map({
target: 'map',
layers: [baselayer]//,
//view: googleview //source.getView()
layers: [baselayer],
view: googleview //source.getView()
});


Expand All @@ -69,7 +69,7 @@ async function buildMapForGeotiff() {
window.newToast(`Loading ${url}`);

//If url does not start with "http"then add the curent location base url (server url)
if (!url.startsWith("http")) url = window.location.origin + url;
if (!url.startsWith("http")) url = window.location.origin + (url.startsWith('/') ? '' : '/') + url;

// If URL does not end with .tif, then return
if (!url.endsWith('.tif')) {
Expand All @@ -83,13 +83,20 @@ async function buildMapForGeotiff() {

const geotiffSource : any = {url};

localStorage.setItem('min', '0');
localStorage.setItem('max', '1');

// Try to fetch and parse an {url}.aux.xml file. The file is an XML file with metadata about the GeoTIFF
const minmax = await getGeotiffMinmaxFromAuxXML(url);
if (minmax) {
geotiffSource.min = minmax[0];
geotiffSource.max = minmax[1];
console.log(`Used .tif.aux.xml to find min=${geotiffSource.min}, max=${geotiffSource.max}`);
}
getGeotiffMinmaxFromAuxXML(url).then(minmax => {
if (minmax) {
geotiffSource.min = minmax[0];
geotiffSource.max = minmax[1];
localStorage.setItem('min', geotiffSource.min.toString());
localStorage.setItem('max', geotiffSource.max.toString());
document.dispatchEvent(new Event('newpalette'));
window.newToast(`.tif.aux.xml says min=${geotiffSource.min}, max=${geotiffSource.max}`);
}
});


// Create the source and layer
Expand All @@ -107,43 +114,55 @@ async function buildMapForGeotiff() {
source.on('tileloadend', (event) => {

if (flag_styleIsSet) return; // If the style has already been set, do nothing
flag_styleIsSet = true; // Set the flag

window.newToast({title: 'Info', message: `Got image with ${event.target.bandCount} bands`});
window.newToast(`Got image with ${event.target.bandCount} bands`);
if (layer) (layer as TileLayer).setStyle(getInterpolateBand1AsColor()); // Set the style

flag_styleIsSet = true; // Set the flag
});


// Create the map
map.setLayers([baselayer,layer]);
map.render();

/*
const vo = await source.getView();
if (!vo.projection) {
console.log(`File ${url} contains insufficient metadata about its projection`);
//return;
}

const proj = getProjection(vo.projection?.getCode());
if (!proj) {
// Look up at epsg.io
vo.projection= await fromEPSGCode(vo.projection?.getCode());
console.log(`Downloading projection ${vo.projection.getCode()} used by ${url}`);
//return;
}
source.getView().then(async (vo) => {
if (!vo.projection) {
window.newToast(`File ${url} contains insufficient metadata about its projection`);
console.log(`File ${url} contains insufficient metadata about its projection`);
//return;
}

const proj = getProjection(vo.projection?.getCode());
if (!proj) {
// Look up at epsg.io
vo.projection= await fromEPSGCode(vo.projection?.getCode());
console.log(`Downloading projection ${vo.projection.getCode()} used by ${url}`);
//return;
}

// Reproject the extent to the map's projection
const extent = transformExtent(vo.extent, vo.projection, googleview.getProjection());
map.getView().fit(extent);
}); // end of source.getView().then


// Reproject the extent to the map's projection
const extent = transformExtent(vo.extent, vo.projection, googleview.getProjection());
map.getView().fit(extent);
*/

}; // function buildMapforGeotiff




// Add a listener for the "newpalette" event
document.addEventListener('newpalette', updateGeotiffColors);
function updateGeotiffColors(){
if (!layer) {
console.error('No layer to update colors for');
return;
}
(layer as TileLayer).setStyle(getInterpolateBand1AsColor()); // Set the style
}



Expand All @@ -154,10 +173,8 @@ async function buildMapForSTACItem() {
let stac_json = localStorage.getItem('stac');


if (!stac_json) {
console.error(`No STAC JSON in localStorage`);
return;
}
if (!stac_json) return buildMapForGeotiff();


const layer = new STAC({url: stac_json});

Expand Down
3 changes: 2 additions & 1 deletion src/components/Toaster.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,10 +39,11 @@ window.newToast = ( message) => {
gap: 0.5rem;
z-index: 1000;
.toast {
box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, 0.1);
background-color: rgba(255,255,255,0.8);
font-family: 'Inter', sans-serif;
color: #000;
border-radius: 0.5rem;
border-radius: 1rem;
display: block;
padding: 1rem;
opacity: 0;
Expand Down
4 changes: 3 additions & 1 deletion src/pages/index.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import Dataviewer from "../components/Dataviewer.astro";
import STACTreeView from "../components/STACTreeView.jsx";
import Toaster from "../components/Toaster.astro";
import ChoosePalette from "../components/ChoosePalette.astro";
import COGURL from "../components/COGURL.astro";
export const prerender = true;
---

Expand All @@ -33,6 +33,8 @@ export const prerender = true;
<Colorbar />

<ChoosePalette />

<COGURL />

<Toaster />

Expand Down
Loading

0 comments on commit 7b25a59

Please sign in to comment.