Skip to content
GitLab
Commit a3bec392 authored by Rushikesh Padsala's avatar Rushikesh Padsala
Browse files

Upload New File

parent 830c2cb2
Hide whitespace changes
Inline Side-by-side
public/index.html 0 → 100644
View file @ a3bec392
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Use correct character set. -->
<meta charset="utf-8">
<!-- Tell IE to use the latest, best version. -->
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<!-- Make the app on mobile take up the full browser screen and disable user scaling. -->
<meta name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<title>Landkreis Ludwigsburg 3D Viewer</title>
<!-- The Cesium library. -->
<script src="https://cesium.com/downloads/cesiumjs/releases/1.81/Build/Cesium/Cesium.js"></script>
<link href="./CSS/widgets.css" rel="stylesheet">
<!-- stylesheets -->
<link rel="stylesheet" href="./CSS/index.css" media="screen">
<link rel="stylesheet" type="text/css" href="./CSS/lkrludwigsburg.css">
<!-- external scripts -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<!-- defining container to keep cesium viewer -->
<div id="cesiumContainer"></div>
<!-- defining menu panel -->
<div class="backdrop" id="menu">
<h2>Landkreis Ludwigsburg 3D Viewer <i class="fa fa-info-circle" style="font-size:15px;color:yellow" onclick="window.open('https://www.isprs-ann-photogramm-remote-sens-spatial-inf-sci.net/VIII-4-W1-2021/81/2021/')"> </i></h2>
<span><strong>Fly To</strong></span>
<div class="nowrap">
<select id="selectscenario">
<option value="Affalterbach">Affalterbach</option>
<option value="Aldingen">Aldingen</option>
<option value="Asperg">Asperg</option>
<option value="Aurich">Aurich</option>
<option value="Benningen">Benningen</option>
<option value="Besigheim">Besigheim</option>
<option value="Bietigheim">Bietigheim</option>
<option value="Bissingen">Bissingen</option>
<option value="Bönnigheim">Bönnigheim</option>
<option value="Ditzingen">Ditzingen</option>
<option value="Eberdingen">Eberdingen</option>
<option value="Ensingen">Ensingen</option>
<option value="Enzweihingen">Enzweihingen</option>
<option value="Erdmannshausen">Erdmannshausen</option>
<option value="Erligheim">Erligheim</option>
<option value="Freudental">Freudental</option>
<option value="Gemmrigheim">Gemmrigheim</option>
<option value="Gerlingen">Gerlingen</option>
<option value="Gronau">Gronau</option>
<option value="Großbottwar">Großbottwar</option>
<option value="Großingersheim">Großingersheim</option>
<option value="Großsachsenheim">Großsachsenheim</option>
<option value="Gündelbach">Gündelbach</option>
<option value="Häfnerhaslach">Häfnerhaslach</option>
<option value="Heimerdingen">Heimerdingen</option>
<option value="Hemmingen">Hemmingen</option>
<option value="Hessigheim">Hessigheim</option>
<option value="Hirschlanden">Hirschlanden</option>
<option value="Hochberg">Hochberg</option>
<option value="Hochdorf(Eberdingen)">Hochdorf (Eberdingen)</option>
<option value="Hochdorf(Remseck)">Hochdorf (Remseck)</option>
<option value="HofundLembach">Hof und Lembach</option>
<option value="Hofen">Hofen</option>
<option value="Hohenhaslach">Hohenhaslach</option>
<option value="Hohenstein">Hohenstein</option>
<option value="Höpfigheim">Höpfigheim</option>
<option value="Horrheim">Horrheim</option>
<option value="Kirchheim">Kirchheim</option>
<option value="Kleinbottwar">Kleinbottwar</option>
<option value="Kleinglattbach">Kleinglattbach</option>
<option value="Kleiningersheim">Kleiningersheim</option>
<option value="Kleinsachsenheim">Kleinsachsenheim</option>
<option value="Löchgau">Löchgau</option>
<option value="Marbach">Marbach</option>
<option value="Markgrönningen">Markgrönningen</option>
<option value="Möglingen">Möglingen</option>
<option value="Mundelsheim">Mundelsheim</option>
<option value="Murr">Murr</option>
<option value="Neckargröningen">Neckargröningen</option>
<option value="Neckarrems">Neckarrems</option>
<option value="Nussdorf">Nussdorf</option>
<option value="Oberriexingen">Oberriexingen</option>
<option value="Oberstenfeld">Oberstenfeld</option>
<option value="Ochsenbach">Ochsenbach</option>
<option value="Ottmarsheim">Ottmarsheim</option>
<option value="Pleidelsheim">Pleidelsheim</option>
<option value="Rielingshausen">Rielingshausen</option>
<option value="Riet">Riet</option>
<option value="Roßwag">Roßwag</option>
<option value="Schöckingen">Schöckingen</option>
<option value="Schwieberdingen">Schwieberdingen</option>
<option value="Sersheim">Sersheim</option>
<option value="Spielberg">Spielberg</option>
<option value="Steinheim">Steinheim</option>
<option value="Vaihingen">Vaihingen</option>
<option value="Walheim">Walheim</option>
<option value="Winzerhausen">Winzerhausen</option>
</select>
</div>
<br>
<span><strong>3D City Model</strong></span>
<div class="nowrap">
<input id="buildings" type="checkbox" checked onclick="showbuildings()" />
<label for="buildings">Buildings</label> <i class="fa fa-info-circle" style="font-size:15px;color:yellow" onclick="window.open('http://gdz.bkg.bund.de/index.php/default/3d-gebaudemodelle-lod2-deutschland-lod2-de.html')"> </i>
<input id="landuse" type="checkbox" onclick="showlanduse()" />
<label for="landuse">LandUse</label> <i class="fa fa-info-circle" style="font-size:15px;color:yellow" onclick="window.open('https://www.bkg.bund.de/SharedDocs/Produktinformationen/BKG/DE/P-2019/191011_ATKISDLM.html')"> </i>
</div>
<br>
<span><strong>Analysis</strong></span>
<div class="nowrap">
<input id="fooddemand" type="checkbox" onclick="return showfooddemand()" />
<label for="fooddemand">Food Demand </label> <i class="fa fa-info-circle" style="font-size:15px;color:yellow" onclick="window.open('https://www.mdpi.com/2073-445X/10/8/880/')"> </i>
<br>
<input id="waterdemand" type="checkbox" onclick="return showwaterdemand()" />
<label for="waterdemand">Water Demand </label> <i class="fa fa-info-circle" style="font-size:15px;color:yellow" onclick="window.open('https://www.mdpi.com/2220-9964/9/11/642')"> </i>
<br>
<input id="heatdemand" type="checkbox" onclick="return showheatdemand()" />
<label for="heatdemand">Heating Energy Demand </label> <i class="fa fa-info-circle" style="font-size:15px;color:yellow" onclick="window.open('https://www.sciencedirect.com/science/article/abs/pii/S0378778816319016?via%3Dihub')"> </i>
<br>
<input id="bioenergypotential" type="checkbox" onclick="return showbioenergypotential()" />
<label for="bioenergypotential">Bioenergy Potential </label> <i class="fa fa-info-circle" style="font-size:15px;color:yellow" onclick="window.open('https://www.mdpi.com/1996-1073/13/24/6488')"> </i>
<br>
<input id="foodpotential" type="checkbox" onclick="return showfoodpotential()" />
<label for="foodpotential">Food Potential </label> <i class="fa fa-info-circle" style="font-size:15px;color:yellow" onclick="window.open('https://www.mdpi.com/2073-445X/10/8/880/')"> </i>
<br>
<input id="pvpotential" type="checkbox" onclick="return showpvpotential()" />
<label for="pvpotential">Rooftop Photovoltaic Potential </label> <i class="fa fa-info-circle" style="font-size:15px;color:yellow" onclick="window.open('https://www.mdpi.com/1996-1073/12/3/403')"> </i>
</div>
<br>
<!-- for legend panel -->
<div id=legend>
<hr color='white'>
<div class='my-legend' id="legendcontainer">
<div class='legend-title'>LandUse Classification</div>
<div class='legend-scale'>
<ul class='legend-labels'>
<li><span style='background:#FFFF008C;'></span>Settlement Area</li>
<li><span style='background:#FFC3008C;'></span>Open Plot</li>
<li><span style='background:#8888888C;'></span>Transport Area</li>
<li><span style='background:#44EE0D8C;'></span>Vegetation</li>
<li><span style='background:#0DC2EE8C;'></span>Water Body</li>
</ul>
</div>
</div>
</div>
<div id=biolegend>
<hr color='white'>
<div class='my-legend' id="legendcontainer">
<div class='legend-title'>Bioenergy Potential Classification</div>
<div class='legend-scale'>
<ul class='legend-labels'>
<li><span style='background:#8000008C;'></span>No Potential</li>
<li><span style='background:#FF00008C;'></span>Very Low Potential (Less then 50 GJ/yr)</li>
<li><span style='background:#FFA5008C;'></span>Low Potential (50 to 150 GJ/yr)</li>
<li><span style='background:#FFFF008C;'></span>Average Potential (150 to 350 GJ/yr)</li>
<li><span style='background:#00FF008C;'></span>High Potenial (350 to 650 GJ/yr)</li>
<li><span style='background:#00A3008C;'></span>Very High Potential (More then 650 GJ/yr)</li>
</ul>
</div>
</div>
</div>
<div id=foodlegend>
<hr color='white'>
<div class='my-legend' id="legendcontainer">
<div class='legend-title'>Food Potential Classification</div>
<div class='legend-scale'>
<ul class='legend-labels'>
<li><span style='background:#A110598C;'></span>No Potential</li>
<li><span style='background:#FF00808C;'></span>Very Low Potential (Less then 50.000 * 10<sup>3</sup> kcal/yr)</li>
<li><span style='background:#916D808C;'></span>Low Potential (50.000 to 100.000 * 10<sup>3</sup> kcal/yr)</li>
<li><span style='background:#00FF808C;'></span>Average Potential (100.000 to 200.000 * 10<sup>3</sup> kcal/yr)</li>
<li><span style='background:#0089BA8C;'></span>High Potenial (200.000 to 300.000 * 10<sup>3</sup> kcal/yr)</li>
<li><span style='background:#0000FF8C;'></span>Very High Potential (More then 300.000 * 10<sup>3</sup> kcal/yr)</li>
</ul>
</div>
</div>
</div>
</div>
<!-- defining container to keep cesium viewer -->
<a href="https://www.hft-stuttgart.de/" target='_blank'>
<div class="credit"></div>
</a>
<div class="legends" id="food-demand-legend">
<div class="food-demand-legend-container">
<h3 id="food-demand-legend-title">
Total Food Demand [10^3 kcal/yr]
</h3>
<div class= "food-demand-Bar" id="bottom-round"/>
</div>
<div class="values">
<div class="value">0</div>
<div class="value">5000</div>
<div class="value">10000</div>
<div class="value">15000</div>
<div class="value">20000</div>
<div class="value">>25000</div>
</div>
</div>
</div>
<div class="legends" id="water-demand-legend">
<div class="water-demand-legend-container">
<h3 id="water-demand-legend-title">
Water Demand [cu.m/yr]
</h3>
<div class= "water-demand-Bar" id="bottom-round"/>
</div>
<div class="values">
<div class="value">0</div>
<div class="value">500</div>
<div class="value">1000</div>
<div class="value">5000</div>
<div class="value">10000</div>
<div class="value">>20000</div>
</div>
</div>
</div>
<div class="legends" id="pv-potential-legend">
<div class="pv-potential-legend-container">
<h3 id="pv-potential-legend-title">
Rooftop Photovoltaic Potential [MWh/yr]
</h3>
<div class= "pv-potential-Bar" id="bottom-round"/>
</div>
<div class="values">
<div class="value">0</div>
<div class="value">2</div>
<div class="value">4</div>
<div class="value">6</div>
<div class="value">8</div>
<div class="value">>10</div>
</div>
</div>
</div>
<div class="legends" id="heat-demand-legend">
<div class="heat-demand-legend-container">
<h3 id="heat-demand-legend-title">
Specific Space Heating Demand [kWh/(m²*yr)]
</h3>
<div class= "Heat-Demand-Bar" id ="top">
<div class="classes" >A+</div>
<div class="line" >|</div>
<div class="classes" >A</div>
<div class="line" >|</div>
<div class="classes" >B</div>
<div class="line" >|</div>
<div class="classes" >C</div>
<div class="line" >|</div>
<div class="classes" >D</div>
<div class="line" >|</div>
<div class="classes" >E</div>
<div class="line" >|</div>
<div class="classes" >F</div>
<div class="line" >|</div>
<div class="classes" >G</div>
<div class="line" >|</div>
<div class="classes" >H</div>
</div>
<div class="values">
<div class="value">0</div>
<div class="value">25</div>
<div class="value">50</div>
<div class="value">75</div>
<div class="value">100</div>
<div class="value">125</div>
<div class="value">150</div>
<div class="value">175</div>
<div class="value">200</div>
<div class="value">>225</div>
</div>
<div class= "Heat-Demand-Bar" id="bottom"/>
<div id="arrow-slider">
<div id="arrow">&uArr;</div>
</div>
</div>
</div>
<!-- javascript -->
<script src="./App.js"></script>
</body>
</html>
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

Dies ist die Gitlab-Instanz des Transferportals der Hochschule für Technik Stuttgart. Hier geht es zurück zum Portal