Commit c4f2f2cb authored by zchkfmn's avatar zchkfmn
Browse files

Added GeoTiff side Viewer

parent 9cb5c31d

app/src/components/container/App.jsx

+36 −0
Original line number Diff line number Diff line
@@ -5,6 +5,11 @@ import QueryConsole from "../presentational/QueryConsole.jsx"; 
import CreditsDisplay from "../presentational/CreditsDisplay.jsx";

import SearchAndFilterInput from "../presentational/SearchAndFilterInput.jsx";

import ArrowLeftIcon from '@mui/icons-material/ArrowLeft';

import Typography from '@mui/material/Typography';

import AppBar from '@mui/material/AppBar';

import Container from '@mui/material/Container';

import GeoTiffViewer from "./geoTiffViewer";

//import GeoTiffViewer from "../../js/geoTIffViewer";



const css = {

  shown: {
@@ -27,6 +32,7 @@ export default function App() { 
  const [targetPlanet, setTargetPlanet] = React.useState("Mars");

  const [showSortBar, setShowSortBar] = React.useState(true);

  const [sortBarStyle, setSortBarStyle] = React.useState(css.hidden);

  const geoTiffViewer = new GeoTiffViewer("geoTiff-Container");



  const ShowHideSort = () => {

    setShowSortBar(!showSortBar);
@@ -63,6 +69,36 @@ export default function App() { 
            <SearchAndFilterInput target={targetPlanet}/>

          </div>

      </div>



      <div id="geoTiff-Container">

        <Container>

          <AppBar position="relative">

            <Container>

              <Typography 

                variant="h6"

                id="geoTiff-Asset-name"

                noWrap

                component="div"

                align="center"

                sx={{ mr: 2, display: { xs: 'none', md: 'flex' } }}

                >

                  Displayed GeoTiff

                </Typography>

                <button onClick={geoTiffViewer.toggleViewer()} 

                id="geoTiffClose">

                  CLOSE

                </button>

            </Container>

          </AppBar>

          <div id = "geoTiff-Asset">

          </div>

          <AppBar position="relative">

            <Container>

              <button id="download-button">Download Asset</button>

            </Container>

          </AppBar>

        </Container>

      </div>

    </div>

  );

}

app/src/js/AstroMap.js

+3 −3
Original line number Diff line number Diff line
@@ -5,6 +5,7 @@ import LayerCollection from "./LayerCollection"; 
import { getItemCollection, setNumberMatched, setMaxNumberPages, getCurrentPage, setCurrentPage } from "./ApiJsonCollection";

import { MY_JSON_MAPS } from "./layers";





/**

 * @class AstroMap

 * @aka L.Map.AstroMap
@@ -134,7 +135,6 @@ export default L.Map.AstroMap = L.Map.extend({ 
   */

  loadFootprintLayer: function(name, queryString) {

    var matched = 0;

    

    getItemCollection(name, queryString).then(result => {

      if (result != undefined) {

        this._geoLayers = new Array(result.length);

app/src/js/geoTIffViewer.js

0 → 100644
+93 −0
Original line number Diff line number Diff line 
/*



*/

export default class GeoTiffViewer {





	/**

	 * Function name: Constructor

	 * Desc: The constructor function for the class 

	 * GeoTiffViewer takes in the div id that the 

	 * viewer will reside in

	 * Input: imageDiv - String: the name of div ID where the image

	 * asset will be displayed. 

	**/

	constructor( imageDiv )

	{

		this._imageArray = [];



		this._imgDiv = imageDiv;



		const currentIndex = 0;



	}





	/*

	fetch(imageURL)

			.then(response => response.blob())

			.then(imageBlob => {



				const imageObjectUrl = URL.createObjectURL(imageBlob);

				console.log(imageObjectUrl);

			})

	*/

	/**

	 * function name: displayGeoTiff

	 * Desc: Takes in a URL for the asset file and changes the content

	 * inside of the geotiff div to display the asset to user

	 * Input: imageURL - String: Url link from the STAC catalogue

	 * */

	displayGeoTiff( imageURL )

	{

		this._imageArray.push(imageURL);



		(async () => {

			const response = await fetch(imageURL)

			const imageBlob = await response.blob()

			const reader = new FileReader();

			reader.readAsDataURL(imageBlob);

			reader.onloadend = () => {

				const base64data = reader.result;

				console.log(base64data);

			}



			const geoTiffDiv = document.getElementbyID(this._imgDiv)  

			geoTiffDiv.innerHTML = ''; 



			const imageObjectURL = URL.createObjectURL(imageBlob);

			var img = document.createElement('img');



			img.src = imageObjectURL;



			document.getElementbyID(this._imgDiv).appendChild(img);

			

		})



		



	}





	/**

	 * Function name: toggleViewer

	 * Desc: This function will open and close the geotiffviewer depending

	 * on whether it is open or closed.

	 * Note: Could adjust the main maps size to display geotiff next to map 

	 * */

	toggleViewer()

	{

		var div = document.getElementbyID("");

		if (div.style.display == "none")

		{

			x.style.diplay = "block";



		}

		else

		{

			x.style.diplay = "none"; 

		}

	}





}
 
 No newline at end of file

app/src/styles.css

+19 −0
Original line number Diff line number Diff line
@@ -274,3 +274,22 @@ summary { 
  padding: auto;

  vertical-align: center;

}



#geoTiff-Container {

  width: 300px;

  text-align: center;

  margin: 0 auto;

  display: none; 

  background: lightgray;

  color: black;

}



#geoTiff-Asset-name {

  text-align: center;

  flex-grow: 1;

}



#geoTiffClose {

  text-align: center;

  background: darkgray;

}
 
 No newline at end of file