-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
87 lines (75 loc) · 3.47 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="description" content="Traditional method for loading ArcGIS SDKs for Javascript into an application">
<link rel="icon" type="image/svg+xml" sizes="any" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🌎</text></svg>"/>
<title>ArcGIS - Map Application</title>
<!-- The esri.css file contains the CSS for various widgets, including CSS for the map. Because all CSS is in a single file, retrieving CSS for the API is done in a single request. Reducing the number of http requests is one way for apps to improve performance. -->
<style>
body {
overflow: hidden;
}
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 97.5%;
width: 100%;
background-color: black;
}
/* selector targets three elements setting them to the styles specified */
#uiDiv {
position: absolute;
top: 15px;
left: 60px;
}
#textBox {
position: relative;
text-align: center;
color: whitesmoke;
background-color: black;
font-size: 1em;
height: 3%;
padding: 2.5%;
margin: 0%;
overflow-x: scroll;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.28/esri/themes/dark/main.css" type="text/css">
<script type="text/javascript" src="https://js.arcgis.com/4.28/"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div id="viewDiv"></div>
<div id="uiDiv">
<input
class="esri-component esri-widget--button esri-widget esri-interactive"
type="button"
id="switch-btn"
value="3D"
style="position: absolute; color: whitesmoke; background-color: #202020;"
/>
<input
class="esri-component esri-widget--button esri-widget esri-interactive"
type="button"
id="switch-map-btn"
value="💧"
style="position: absolute; top: 33px; color: whitesmoke; background-color: #202020;"
/>
<select
class="esri-component esri-widget--button esri-widget esri-interactive"
id="switch-data-menu"
style="position: absolute; top: 0px; left: 40px; width: 77.5px; color: whitesmoke; background-color: #202020;"
>
<option value="Data1">Slopes</option>
<option value="Data2">Under Construction</option>
<option value="Data3">More data soon!</option>
</select>
</div>
<p id="textBox">ArcGIS Map App displaying topography of the Shetland Isles.</p>
</body>
</html>
<!-- With the script.js appropriately setup plus the viewport settings when displaying the html file in the browser we can see the ArcGIS map takes up the whole viewport, the html body has been replaced with the Esri UI -->