AdrianKriger/cesium_osm3Dbuildings01.html

## cesium_osm3Dbuildings01.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
    />
    <meta name="description" content="Use Viewer to start building new applications or easily embed Cesium into existing applications.">
    <meta name="cesium-sandcastle-labels" content="Beginner, Showcases">
    <title>Cesium Demo</title>
    <script type="text/javascript" src="../Sandcastle-header.js"></script>
    <script
      type="text/javascript"
      src="../CesiumUnminified/Cesium.js"

    ></script>

  </head>
  <body
    class="sandcastle-loading"
    data-sandcastle-bucket="bucket-requirejs.html"
  >
<style>
      @import url(../templates/bucket.css);
    </style>
    <div id="cesiumContainer" class="fullSize"></div>
    <div id="loadingOverlay"><h1>Loading...</h1></div>
    <div id="toolbar">
        <select class="cesium-button" id="dropdown">
        <option value="0">Apply Default Style</option>
        <option value="1">Apply Basic Style</option>
        <option value="2">Color Features with Conditions</option>
        <option value="3">Color BRT with Conditions</option>
      </select>
    </div>


    <script id="cesium_sandcastle_script">
function startup(Cesium) {
    'use strict';
//Sandcastle_Begin
// Grant CesiumJS access to your ion assets
// Cesium.Ion.defaultAccessToken = "_your_cesium_ion_acess_token_";

var viewer = new Cesium.Viewer("cesiumContainer", {
  terrainProvider: Cesium.createWorldTerrain(),
  animation: false,
});

// Set the initial camera to look at Mamre
viewer.scene.camera.setView({
  destination: Cesium.Cartesian3.fromDegrees(18.4856, -33.5141, 550),
  orientation: {
    heading: Cesium.Math.toRadians(270),
	pitch: Cesium.Math.toRadians(-35),
  },
});

// Add OSM Building tileset
var osmBuildingsTileset = Cesium.createOsmBuildings();
viewer.scene.primitives.add(osmBuildingsTileset);

// Show features
function showDefault() {
  osmBuildingsTileset.style = new Cesium.Cesium3DTileStyle({
    show: osmBuildingsTileset,
  });
}

// Styling functions
// Color by type, checks for null values since not all buildings have the type property.
function basicStyling() {
  osmBuildingsTileset.style = new Cesium.Cesium3DTileStyle({
    defines: {
      whole: "${feature['building']}",
      part:  "${feature['part#building:part']}", //"${feature['building'].building:part]}"
      amenity: "${feature['amenity']}"
    },
    color: {
      conditions: [
        ["${whole} === null", "color('white')"],
        ["${whole} === 'house'", "color('blue', 0.5)"],
        ["${whole} === 'garage'", "color('green', 0.7)"],
        ["${part} === 'house'", "color('blue', 0.5)"],
        ["${part} === 'garage'", "color('green', 0.7)"],
        ["${whole} === 'retail'", "color('orange')"],
        ["${whole} === 'school'", "color('red')"],
        ["${amenity} === 'library'", "color('purple')"],
        ["${amenity} === 'clinic'", "color('yellow')"],
        ["true", "color('white')"], // This is the else case
      ],
    },
  });
}

// Show features based on property
function showFeaturesWithProperty() {
  osmBuildingsTileset.style = new Cesium.Cesium3DTileStyle({
    show: "${feature['building']} === 'residential' || ${feature['building']} === 'apartments'",
  });
}

// Color features with distance conditions
function colorFeaturesWithConditions() {
  osmBuildingsTileset.style = new Cesium.Cesium3DTileStyle({
    defines: {
      distance:
        "distance(vec2(${feature['cesium#longitude']}, ${feature['cesium#latitude']}), vec2(18.47923, -33.51519))",
    },
    color: {
      conditions: [
        ["${distance} > 0.010", "color('red')"],
        ["${distance} > 0.006", "color('pink')"],
        ["${distance} > 0.002", "color('orange')"],
        ["${distance} > 0.0001", "color('yellow')"],
        ["true", "color('#ffffff')"],
      ],
    },
  });
}

// Color BRT with distnace conditions
function brtWithConditions() {

  // Load the GeoJSON file from Cesium ion.
  async function addGeoJSON() {
    // Load the GeoJSON file from Cesium ion.
    const geoJSONURL = await Cesium.IonResource.fromAssetId(721383);
    // Create the geometry from the GeoJSON, and clamp it to the ground.
    const geoJSON = await Cesium.GeoJsonDataSource.load(geoJSONURL,
                                                        { clampToGround: true,
                                                         markerSymbol: 'bus',
                                                        markerColor: Cesium.Color.DARKCYAN });
    // Add it to the scene.
    const dataSource = await viewer.dataSources.add(geoJSON);
    geoJSON.show = true;}
    addGeoJSON();

  ///color buildings based on distance
  osmBuildingsTileset.style = new Cesium.Cesium3DTileStyle({
    defines: {
      distance:
        "distance(vec2(${feature['cesium#longitude']}, ${feature['cesium#latitude']}), vec2(18.47923, -33.51519))",
    },
    color: {
      conditions: [
        ["${distance} > 0.010", "color('red')"],
        ["${distance} > 0.006", "color('pink')"],
        ["${distance} > 0.002", "color('orange')"],
        ["${distance} > 0.0001", "color('yellow')"],
        ["true", "color('#ffffff')"],
      ],
    },
  });
}

var menu = document.getElementById("dropdown");

menu.options[0].onselect = function () {
  showDefault();
};

menu.options[1].onselect = function () {
  basicStyling();
};

menu.options[2].onselect = function () {
  colorFeaturesWithConditions();
};

menu.options[3].onselect = function () {
  brtWithConditions();
};

menu.onchange = function () {
  var item = menu.options[menu.selectedIndex];
  if (item && typeof item.onselect === "function") {
    item.onselect();
  }
};

showDefault();//Sandcastle_End
    Sandcastle.finishedLoading();
}
if (typeof Cesium !== 'undefined') {
    window.startupCalled = true;
    startup(Cesium);
}
</script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta
	name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
	/>
	<meta name="description" content="Use Viewer to start building new applications or easily embed Cesium into existing applications.">
	<meta name="cesium-sandcastle-labels" content="Beginner, Showcases">
	<title>Cesium Demo</title>
	<script type="text/javascript" src="../Sandcastle-header.js"></script>
	<script
	type="text/javascript"
	src="../CesiumUnminified/Cesium.js"

	></script>

	</head>
	<body
	class="sandcastle-loading"
	data-sandcastle-bucket="bucket-requirejs.html"
	>
	<style>
	@import url(../templates/bucket.css);
	</style>
	<div id="cesiumContainer" class="fullSize"></div>
	<div id="loadingOverlay"><h1>Loading...</h1></div>
	<div id="toolbar">
	<select class="cesium-button" id="dropdown">
	<option value="0">Apply Default Style</option>
	<option value="1">Apply Basic Style</option>
	<option value="2">Color Features with Conditions</option>
	<option value="3">Color BRT with Conditions</option>
	</select>
	</div>


	<script id="cesium_sandcastle_script">
	function startup(Cesium) {
	'use strict';
	//Sandcastle_Begin
	// Grant CesiumJS access to your ion assets
	// Cesium.Ion.defaultAccessToken = "_your_cesium_ion_acess_token_";

	var viewer = new Cesium.Viewer("cesiumContainer", {
	terrainProvider: Cesium.createWorldTerrain(),
	animation: false,
	});

	// Set the initial camera to look at Mamre
	viewer.scene.camera.setView({
	destination: Cesium.Cartesian3.fromDegrees(18.4856, -33.5141, 550),
	orientation: {
	heading: Cesium.Math.toRadians(270),
	pitch: Cesium.Math.toRadians(-35),
	},
	});

	// Add OSM Building tileset
	var osmBuildingsTileset = Cesium.createOsmBuildings();
	viewer.scene.primitives.add(osmBuildingsTileset);

	// Show features
	function showDefault() {
	osmBuildingsTileset.style = new Cesium.Cesium3DTileStyle({
	show: osmBuildingsTileset,
	});
	}

	// Styling functions
	// Color by type, checks for null values since not all buildings have the type property.
	function basicStyling() {
	osmBuildingsTileset.style = new Cesium.Cesium3DTileStyle({
	defines: {
	whole: "${feature['building']}",
	part: "${feature['part#building:part']}", //"${feature['building'].building:part]}"
	amenity: "${feature['amenity']}"
	},
	color: {
	conditions: [
	["${whole} === null", "color('white')"],
	["${whole} === 'house'", "color('blue', 0.5)"],
	["${whole} === 'garage'", "color('green', 0.7)"],
	["${part} === 'house'", "color('blue', 0.5)"],
	["${part} === 'garage'", "color('green', 0.7)"],
	["${whole} === 'retail'", "color('orange')"],
	["${whole} === 'school'", "color('red')"],
	["${amenity} === 'library'", "color('purple')"],
	["${amenity} === 'clinic'", "color('yellow')"],
	["true", "color('white')"], // This is the else case
	],
	},
	});
	}

	// Show features based on property
	function showFeaturesWithProperty() {
	osmBuildingsTileset.style = new Cesium.Cesium3DTileStyle({
	show: "${feature['building']} === 'residential' \|\| ${feature['building']} === 'apartments'",
	});
	}

	// Color features with distance conditions
	function colorFeaturesWithConditions() {
	osmBuildingsTileset.style = new Cesium.Cesium3DTileStyle({
	defines: {
	distance:
	"distance(vec2(${feature['cesium#longitude']}, ${feature['cesium#latitude']}), vec2(18.47923, -33.51519))",
	},
	color: {
	conditions: [
	["${distance} > 0.010", "color('red')"],
	["${distance} > 0.006", "color('pink')"],
	["${distance} > 0.002", "color('orange')"],
	["${distance} > 0.0001", "color('yellow')"],
	["true", "color('#ffffff')"],
	],
	},
	});
	}

	// Color BRT with distnace conditions
	function brtWithConditions() {

	// Load the GeoJSON file from Cesium ion.
	async function addGeoJSON() {
	// Load the GeoJSON file from Cesium ion.
	const geoJSONURL = await Cesium.IonResource.fromAssetId(721383);
	// Create the geometry from the GeoJSON, and clamp it to the ground.
	const geoJSON = await Cesium.GeoJsonDataSource.load(geoJSONURL,
	{ clampToGround: true,
	markerSymbol: 'bus',
	markerColor: Cesium.Color.DARKCYAN });
	// Add it to the scene.
	const dataSource = await viewer.dataSources.add(geoJSON);
	geoJSON.show = true;}
	addGeoJSON();

	///color buildings based on distance
	osmBuildingsTileset.style = new Cesium.Cesium3DTileStyle({
	defines: {
	distance:
	"distance(vec2(${feature['cesium#longitude']}, ${feature['cesium#latitude']}), vec2(18.47923, -33.51519))",
	},
	color: {
	conditions: [
	["${distance} > 0.010", "color('red')"],
	["${distance} > 0.006", "color('pink')"],
	["${distance} > 0.002", "color('orange')"],
	["${distance} > 0.0001", "color('yellow')"],
	["true", "color('#ffffff')"],
	],
	},
	});
	}

	var menu = document.getElementById("dropdown");

	menu.options[0].onselect = function () {
	showDefault();
	};

	menu.options[1].onselect = function () {
	basicStyling();
	};

	menu.options[2].onselect = function () {
	colorFeaturesWithConditions();
	};

	menu.options[3].onselect = function () {
	brtWithConditions();
	};

	menu.onchange = function () {
	var item = menu.options[menu.selectedIndex];
	if (item && typeof item.onselect === "function") {
	item.onselect();
	}
	};

	showDefault();//Sandcastle_End
	Sandcastle.finishedLoading();
	}
	if (typeof Cesium !== 'undefined') {
	window.startupCalled = true;
	startup(Cesium);
	}
	</script>
	</body>
	</html>