diff --git a/vcm/css/sliders.css b/vcm/css/sliders.css
index b1f3da9500c504f812bfff04519cde0900ba0479..1e9ab982b234edc026d1c459c557b4512cb99b40 100644
--- a/vcm/css/sliders.css
+++ b/vcm/css/sliders.css
@@ -42,6 +42,66 @@
background-color: #ad0202;
}
+.OneBLD{
+ border-width: 2px;
+ border-radius:4px;
+ border:solid #121212 ;
+ background-color: #f7fbff;
+}
+.TwoBLD{
+ border-width: 2px;
+ border-radius:4px;
+ border:solid #121212 ;
+ background-color: #deebf7;
+}
+.ThreeBLD{
+ border-width: 2px;
+ border-radius:4px;
+ border:solid #121212 ;
+ background-color: #c6dbef;
+}
+.FourBLD{
+ border-width: 2px;
+ border-radius:4px;
+ border:solid #121212 ;
+ background-color: #9ecae1;
+}
+.FiveBLD{
+ border-width: 2px;
+ border-radius:4px;
+ border:solid #121212 ;
+ background-color: #6baed6;
+}
+.SixBLD{
+ border-width: 2px;
+ border-radius:4px;
+ border:solid #121212 ;
+ background-color: #4292c6;
+}
+.SevenBLD{
+ border-width: 2px;
+ border-radius:4px;
+ border:solid #121212 ;
+ background-color: #2171b5;
+}
+.EightBLD{
+ border-width: 2px;
+ border-radius:4px;
+ border:solid #121212 ;
+ background-color: #08519c;
+}
+.NineBLD{
+ border-width: 2px;
+ border-radius:4px;
+ border:solid #121212 ;
+ background-color: #08306b;
+}
+.NoBLD{
+ border-width: 2px;
+ border-radius:4px;
+ border:solid #121212 ;
+ background-color: #008055;
+}
.my-legend .legend-title {
text-align: left;
margin-bottom: 5px;
diff --git a/vcm/index.html b/vcm/index.html
index f49877af770666645bdf810693ad8307bd3de7f5..430feeefdfd37f4c4b824a333ac0393626df4d2f 100644
--- a/vcm/index.html
+++ b/vcm/index.html
@@ -359,6 +359,54 @@
Geplanten.</p>
<!-- <p class="contentOne">Vergleich zwischen dem monatlichen Gasamtwärmebedarf der zukünftigen Gebäude und der aktuellen Gebäude.</p> -->
+ </div>
+ <button id="men_stadtplanung" onclick="screenspaceErr(true)" type="button"
+ class="collapsible">Stadtplanung</button>
+ <div class="content">
+ <h3>Historische Stadtentwicklung</h3>
+ <p class="contentOne">Durch dieses Tool kann das Wachstum der Stadt Stuttgart dargestellt werden.</a><br>
+ </p>
+ <div onclick='' class='box-3'>
+ <p>Einfärben </p><div class='switch'>
+ <input type='checkbox' name='toggle' id='chxboxAge' onclick='checkboxAge();'>
+ <label for='toggle'><i></i></label>
+ <span></span>
+ </div></div>
+ <br>
+
+ <div class='addition'>
+ <div class='legend-title'>Baujahre </div>
+ <div class='legend-scale addition2'>
+ <ul class='legend-labels'>
+ <li class="OneBLD" id="OneBld"><span class="rectangleBld"
+ style='background:#f7fbff;'></span>min-1900</li>
+ <li class="TwoBLD" id="TwoBld"><span class="rectangleBld"
+ style='background:#deebf7;'></span>1900-1915</li>
+ <li class="ThreeBLD" id="ThreeBld"><span class="rectangleBld"
+ style='background:#c6dbef;'></span>1915-1930</li>
+ <li class="FourBLD" id="FourBld"><span class="rectangleBld"
+ style='background:#9ecae1;'></span>1930-1945</li>
+ <li class="FiveBLD" id="FiveBld"><span class="rectangleBld"
+ style='background:#6baed6;'></span>1945-1960</li>
+ <li class="SixBLD" id="FiveBld"><span class="rectangleBld"
+ style='background:#4292c6;'></span>1960-1975</li>
+ <li class="SevenBLD" id="FiveBld"><span class="rectangleBld"
+ style='background:#2171b5;'></span>1975-1990</li>
+ <li class="EightBLD" id="FiveBld"><span class="rectangleBld"
+ style='background:#08519c;'></span>1990-2005</li>
+ <li class="NineBLD" id="FiveBld"><span class="rectangleBld"
+ style='background:#08306b;'></span>2005-max</li>
+ <li class="NoBLD" id="NoBld"><span class="rectangleBld"
+ style='background:#008055;'></span>No Building Age</li>
+ </ul>
+ </div>
+ <!-- <div class='legend-source'>Source: <a href="#link to source">Name of source</a></div> -->
+ </div>
+ <br>
+ <p>Wachstum kann über einen Slider gezeigt werden: </p><br>
+ <div id = "slider-step"></div><br>
+ <div id="slider-step-value"></div><br>
+
</div>
<button id="men_acoustic" onclick="akkustikview()" type="button" class="collapsible">Akustik</button>
<div class="content">
@@ -1403,6 +1451,7 @@
<script src="js/favoriteplaces.js"></script>
<script src="js/codepoly.js"></script>
<script src="js/custom.js"></script>
+ <script src="js/cityplanning.js"></script>
<script src="js/newDevBahn.js"></script>
<script src="js/cus_Menu.js"></script>
<script src="js/cus_SimStadt.js"></script>
diff --git a/vcm/js/cityplanning.js b/vcm/js/cityplanning.js
new file mode 100644
index 0000000000000000000000000000000000000000..899457696dc38e10066e7a713f1eeb6ef052cc37
--- /dev/null
+++ b/vcm/js/cityplanning.js
@@ -0,0 +1,183 @@
+function checkboxAge() {
+ var chk_ceil = document.getElementById("chxboxAge");
+ if (chk_ceil.checked == true) {
+ screenspaceErr(true)
+ BuildingAGE();
+ } else {
+
+ removebuildings();
+
+
+ }
+
+ };
+
+
+
+function BuildingAGE() {
+ screenspaceErr(true)
+ var Framework = vcs.vcm.Framework.getInstance();
+ var layers = Framework.getLayers();
+
+ var layerIndexRosenstein
+ var layernameRosenstein = ["StuttgartLocal"]
+ var frameworkZus = vcs.vcm.Framework.getInstance();
+ var layersZus = frameworkZus.getLayers();
+ for (var i = 0; i < layersZus.length; i++) {
+ var layerst = layersZus[i];
+ if (layernameRosenstein.indexOf(layerst.name) >= 0) {
+ layerIndexRosenstein = i
+ }
+ }
+
+
+ layer2 = layers[layerIndexRosenstein];
+ var tileset = layer2.cesium3DTileset;
+ if (tileset) {
+ tileset.style = new Cesium.Cesium3DTileStyle({
+ color: {
+ conditions: [
+ ["Number(${citygml_year_of_construction}) < 1900", "color('#f7fbff')"],
+ ["Number(${citygml_year_of_construction}) <= 1915", "color('#deebf7')"],
+ ["Number(${citygml_year_of_construction}) <= 1930", "color('#c6dbef')"],
+ ["Number(${citygml_year_of_construction}) <= 1945", "color('#9ecae1')"],
+ ["Number(${citygml_year_of_construction}) <= 1960", "color('#6baed6')"],
+ ["Number(${citygml_year_of_construction}) <= 1975", "color('#4292c6')"],
+ ["Number(${citygml_year_of_construction}) <= 1990", "color('#2171b5')"],
+ ["Number(${citygml_year_of_construction}) <= 2005", "color('#08519c')"],
+ ["Number(${citygml_year_of_construction}) <= 2020", "color('#08306b')"],
+ ["true", "color('#008055')"]
+ ],
+ },
+ });
+
+ }
+
+
+ var layerIndexPart
+ var layernamePart = ["StuttgartPart"]
+ var frameworkPart = vcs.vcm.Framework.getInstance();
+ var layersPart = frameworkPart.getLayers();
+ for (var i = 0; i < layersPart.length; i++) {
+ var layerPart = layersPart[i];
+ if (layernamePart.indexOf(layerPart.name) >= 0) {
+ layerPart.activate(false);
+ }
+ }
+
+ // layer3 = layersPart[layerIndexPart];
+ // var tilesetPart = layer3.cesium3DTileset;
+ // if (tilesetPart) {
+ // tilesetPart.style = new Cesium.Cesium3DTileStyle({
+ // color: {
+ // conditions: [
+ // ["${citygml_year_of_construction} === 'DEBW522AA0001fd8a'", "color('#000000FF')"],
+ // ["${gml_id} === 'DEBW522AA00016448'", "color('#000000FF')"],
+ // ["true", "color('#000000FF')"],
+ // ],
+ // },
+ // });
+ // }
+
+ // ----------why does this not work?
+ // for (i = 0; i < id.length - 1; i++){
+ // idtext = '' + id[i]
+ // layer.highlight({idtext:Cesium.Color.fromCssColorString("#BB8FCE")})
+ // console.log("layer.highlight({" + idtext + ":Cesium.Color.fromCssColorString('#BB8FCE')})")
+ // }
+
+ }
+
+
+ var stepSlider = document.getElementById('slider-step');
+
+noUiSlider.create(stepSlider, {
+ start: [1900],
+ step: 1,
+ range: {
+ 'min': [1900],
+ 'max': [2020]
+ }
+});
+
+var stepSliderValueElement = document.getElementById('slider-step-value');
+
+stepSlider.noUiSlider.on('update', function (values, handle) {
+ stepSliderValueElement.innerHTML = "Gebäude gebaut vor: " + parseInt(values[handle]);
+ BuildingAGEdynamic(parseFloat(values[handle]))
+});
+
+
+function BuildingAGEdynamic(age) {
+ screenspaceErr(true)
+ var Framework = vcs.vcm.Framework.getInstance();
+ var layers = Framework.getLayers();
+
+ var layerIndexRosenstein
+ var layernameRosenstein = ["StuttgartLocal"]
+ var frameworkZus = vcs.vcm.Framework.getInstance();
+ var layersZus = frameworkZus.getLayers();
+ for (var i = 0; i < layersZus.length; i++) {
+ var layerst = layersZus[i];
+ if (layernameRosenstein.indexOf(layerst.name) >= 0) {
+ layerIndexRosenstein = i
+ }
+ }
+
+
+ layer2 = layers[layerIndexRosenstein];
+ var tileset = layer2.cesium3DTileset;
+ if (tileset) {
+ tileset.style = new Cesium.Cesium3DTileStyle({
+ color: {
+ conditions: [
+ ["Number(${citygml_year_of_construction}) <= "+ age + "", "color('#292a2e')"],
+ ["true", "color('#B7D9B1','0')"]
+ ],
+ },
+ });
+
+ }
+
+
+ var layerIndexPart
+ var layernamePart = ["StuttgartPart"]
+ var frameworkPart = vcs.vcm.Framework.getInstance();
+ var layersPart = frameworkPart.getLayers();
+ for (var i = 0; i < layersPart.length; i++) {
+ var layerPart = layersPart[i];
+ if (layernamePart.indexOf(layerPart.name) >= 0) {
+ layerPart.activate(false);
+ }
+ }}
+
+
+function screenspaceErr(tf) {
+
+ var Framework = vcs.vcm.Framework.getInstance();
+ var layers = Framework.getLayers();
+
+ var layerIndexRosenstein
+ var layernameRosenstein = ["StuttgartLocal"]
+ var frameworkZus = vcs.vcm.Framework.getInstance();
+ var layersZus = frameworkZus.getLayers();
+ for (var i = 0; i < layersZus.length; i++) {
+ var layerst = layersZus[i];
+ if (layernameRosenstein.indexOf(layerst.name) >= 0) {
+ layerIndexRosenstein = i
+ }
+ }
+
+
+ layer2 = layers[layerIndexRosenstein];
+ if(tf == true){
+ layer2.screenSpaceErrorMobile = 1
+ layer2.screenSpaceError = 1
+ } else {
+ layer2.screenSpaceErrorMobile = 32
+ layer2.screenSpaceError = 16
+ }
+
+
+
+}
\ No newline at end of file
diff --git a/vcm/js/newDevBahn.js b/vcm/js/newDevBahn.js
index 05fc596e949406d0aeb5d274fee7b3ec2ff8b3be..5c6e57cf721c8f56e42998074814b515f1395fe7 100644
--- a/vcm/js/newDevBahn.js
+++ b/vcm/js/newDevBahn.js
@@ -4,7 +4,7 @@ var heatdemVal03 = 300
var heatdemVal04 = 400
function removebuildings() {
-
+ screenspaceErr(false)
var layerIndexStuttgartTotal
var layerIndexStuttgartBahnhof
var layernameStuttgartTotal = ["StuttgartLocal"]