multidomainvis/index.html

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>A case study in Gothenburg</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<style>
			.legend {
				background: #ffffffd0;
				width: 150px;
				margin: 3px;
				display: none;
			}
			#overlay {
				position: fixed;
				display: block;
				width: 100%;
				height: 100%;
				top: 0; left: 0; right: 0; bottom: 0;
				background-color: rgba(0, 0, 0, 0.6);
				color: white;
				z-index: 2;
				cursor: wait;
			}
		</style>
	</head>
	<body style="margin: 0">
		<div id="overlay">
			<div style="position: absolute; bottom: 0; padding: 1em;">
				Loading data, this may take a few minutes...<br>
				<ul id="loadingLog"></ul>
				<progress style="width: 100%;"></progress>
				<div  id="cityModelDialog" style="padding: 2em; background: #ff000071; display: none;">
					<p>No CityModel.json file found. Upload one now, or ignore and load remaining data?</p>
					<input type="file" id="cityModelFile">
					<button type="button" id="ignoreCityModelUpload">Ignore</button>
				</div>
			</div>
		</div>
		<div id="legendContainer" style="position: fixed; margin: 10px; overflow-y: auto; display: block ruby; bottom: 0;"></div>
		<div id="container"></div>

		<!-- Import maps polyfill -->
		<!-- Remove this when import maps will be widely supported -->
		<script async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js"></script>

		<script type="importmap">
			{
				"imports": {
					"three": "./libs/three.module.js"
				}
			}
		</script>

		<script type="module" src="main.js"></script>
		<script src="libs/papaparse.min.js"></script>

	</body>
</html>