-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
91 lines (81 loc) · 4.7 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
88
89
90
91
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" />
<title>2025 Esri Developer & Technology Summit - Consistent Focus</title>
<!-- Calcite imports -->
<script type="module" src="https://js.arcgis.com/calcite-components/3.0.3/calcite.esm.js"></script>
<!-- ArcGIS Maps SDK for JavaScript imports -->
<script src="https://js.arcgis.com/4.32/"></script>
<link id="jsapi-mode-light" rel="stylesheet" href="https://js.arcgis.com/4.32/esri/themes/light/main.css" />
<link disabled id="jsapi-mode-dark" rel="stylesheet" href="https://js.arcgis.com/4.32/esri/themes/dark/main.css" />
<script type="module" src="https://js.arcgis.com/map-components/4.32/arcgis-map-components.esm.js"></script>
<!-- Demo imports -->
<script src="./app.js" defer></script>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<calcite-shell content-behind>
<calcite-navigation slot="header" id="nav">
<calcite-navigation-logo icon="accessibility" alt="Application logo" slot="logo"
heading="Consistent Focus"
description="Esri Developer & Technology Summit 2025"></calcite-navigation-logo>
<calcite-action-pad layout="horizontal" expand-disabled slot="content-end">
<calcite-action id="toggle-mode" text="Toggle mode" icon="brightness"></calcite-action>
</calcite-action-pad>
<calcite-tooltip placement="bottom" reference-element="toggle-mode" slot="content-end">Toggle
mode</calcite-tooltip>
</calcite-navigation>
<calcite-shell-panel slot="panel-start" display-mode="float-content">
<calcite-action-bar id="custom-action-bar" slot="action-bar">
<calcite-action data-action-id="layer-effects" icon="effects" text="Layer effects"></calcite-action>
<calcite-action data-action-id="legend" icon="legend" text="Legend"></calcite-action>
</calcite-action-bar>
<!-- Layer effects -->
<calcite-panel heading="Layer effects" height-scale="l" data-panel-id="layer-effects" closable closed>
<!-- Bloom effect -->
<calcite-block open heading="Bloom" description="Apply a neon-like glow">
<!-- Bloom enabled -->
<calcite-block-section id="bloom-effect" open text="Apply bloom effect" toggle-display="switch">
<!-- Intensity -->
<calcite-label for="bloom-intensity">Bloom intensity</calcite-label>
<calcite-slider id="bloom-intensity" value="1.5" min="0" max="10" step="0.5" label-ticks ticks="2"></calcite-slider>
<!-- Radius-->
<calcite-label for="bloom-radius">Bloom radius</calcite-label>
<calcite-slider id="bloom-radius" value="0.5" min="0" max="1" step="0.5" label-ticks ticks="0.25"></calcite-slider>
<!-- Threshold -->
<calcite-label for="bloom-threshold">Bloom threshold</calcite-label>
<calcite-slider id="bloom-threshold" value="0.1" min="0" max="0.5" step="0.1" label-ticks ticks="0.25"></calcite-slider>
</calcite-block-section>
</calcite-block>
<!-- Drop shadow effect -->
<calcite-block open heading="Drop shadow" description="Apply a drop shadow">
<!-- Shadow enabled -->
<calcite-block-section id="shadow-effect" text="Apply drop shadow effect" toggle-display="switch">
<!-- Shadow length -->
<calcite-label for="shadow-length">Shadow length</calcite-label>
<calcite-slider id="shadow-length" value="3" min="0" max="4" step="1" label-ticks ticks="1"></calcite-slider>
<!-- Shadow depth-->
<calcite-label for="shadow-depth">Shadow depth</calcite-label>
<calcite-slider id="shadow-depth" value="1" min="0" max="4" step="1" label-ticks ticks="1"></calcite-slider>
<!-- Shadow outline -->
<calcite-label for="shadow-outline">Shadow outline</calcite-label>
<calcite-slider id="shadow-outline" value="3" min="0" max="4" step="1" label-ticks ticks="1"></calcite-slider>
</calcite-block-section>
</calcite-block>
</calcite-panel>
<!-- Legend Panel -->
<calcite-panel heading="Legend" height-scale="l" data-panel-id="legend" closable closed>
<arcgis-legend reference-element="arcgis-map" position="bottom-right"></arcgis-legend>
</calcite-panel>
</calcite-shell-panel>
<arcgis-map item-id="c2a3444863f2466aaad9efa6e65063e1" id="mapEl" basemap="gray">
<arcgis-home position="top-right"></arcgis-home>
<arcgis-expand id="expand-el" focus-trap-enabled="false" close-on-esc position="top-right" mode="floating">
<arcgis-search id="search-el"></arcgis-search>
</arcgis-expand>
<arcgis-zoom position="bottom-right"></arcgis-zoom>
</arcgis-map>
</calcite-shell>
</body>
</html>