Add initial application

.gitignore

@@ -0,0 +1 @@
+.DS_Store

app.js

@@ -0,0 +1,202 @@
+const allTypes = [
+ "National park or forest",
+ "State park or forest",
+ "Regional park",
+ "County park",
+ "Local park",
+];
+const colors = ["#c66a4a", "#7a81ff", "#3cccb4", "#0096ff", "#f260a1"];
+
+const appState = {
+ types: allTypes,
+ mode: "light",
+};
+
+const renderer = {
+ type: "unique-value",
+ field: "FEATTYPE",
+ uniqueValueInfos: [
+ {
+ value: "National park or forest",
+ symbol: {
+ type: "simple-fill",
+ color: colors[0],
+ outline: { color: colors[0] },
+ },
+ },
+ {
+ value: "State park or forest",
+ symbol: {
+ type: "simple-fill",
+ color: colors[1],
+ outline: { color: colors[1] },
+ },
+ },
+ {
+ value: "Regional park",
+ symbol: {
+ type: "simple-fill",
+ color: colors[2],
+ outline: { color: colors[2] },
+ },
+ },
+ {
+ value: "County park",
+ symbol: {
+ type: "simple-fill",
+ color: colors[3],
+ outline: { color: colors[3] },
+ },
+ },
+ {
+ value: "Local park",
+ symbol: {
+ type: "simple-fill",
+ color: colors[4],
+ outline: { color: colors[4] },
+ },
+ },
+ ],
+};
+
+const toggleModeEl = document.getElementById("toggle-mode");
+const toggleModalEl = document.getElementById("toggle-modal");
+const modalEl = document.getElementById("modal");
+const chipsEl = document.getElementById("chips");
+const darkModeCss = document.getElementById("jsapi-mode-dark");
+const lightModeCss = document.getElementById("jsapi-mode-light");
+
+require([
+ "esri/Map",
+ "esri/views/MapView",
+ "esri/layers/FeatureLayer",
+ "esri/widgets/Home",
+ "esri/widgets/Locate",
+], (Map, MapView, FeatureLayer, Home, Locate) =>
+ (async () => {
+ toggleModeEl.addEventListener("click", () => handleModeChange());
+ toggleModalEl.addEventListener(
+ "click",
+ () => (modalEl.open = !modalEl.open)
+ );
+
+ const layer = new FeatureLayer({
+ url: "https://services.arcgis.com/P3ePLMYs2RVChkJx/arcgis/rest/services/USA_Parks/FeatureServer/0",
+ outFields: ["*"],
+ renderer: renderer,
+ popupTemplate: createPopupTemplate(),
+ minScale: 0,
+ maxScale: 0,
+ });
+
+ const map = new Map({
+ basemap: "topo-vector",
+ layers: [layer],
+ });
+
+ const view = new MapView({
+ container: "viewDiv",
+ map: map,
+ center: [-120, 45],
+ zoom: 3,
+ });
+
+ /** Ensure smaller features are visible on top of larger ones */
+ layer.orderBy = {
+ field: "SQMI",
+ order: "ascending",
+ };
+
+ const locateBtn = new Locate({ view: view });
+ const homeWidget = new Home({ view: view });
+
+ view.ui.add(homeWidget, "top-right");
+ view.ui.move("zoom", "top-right");
+ view.ui.add(locateBtn, { position: "top-right" });
+
+ /** Create the chips to represent each jurisdiction */
+ /** Assign a selector to style uniquely */
+ /** Add event listeners to filter on after interaction */
+ function createFilterChips() {
+ allTypes.map((item) => {
+ const chip = document.createElement("calcite-chip");
+ const simpleName = item.split(" ")[0];
+ const isActive = appState.types.includes(item);
+ chip.tabIndex = 0;
+ chip.innerText = simpleName;
+ chip.value = simpleName;
+ chip.id = `chip-type-${simpleName.toLowerCase()}`;
+ chip.icon = isActive ? "check-circle-f" : "circle";
+ chip.classList = isActive ? "chip-active" : undefined;
+ chip.addEventListener("click", (event) =>
+ handleChipSelection(event, item)
+ );
+ chip.addEventListener("keydown", (event) => {
+ if (event.key === " " || event.key === "Enter") {
+ handleChipSelection(event, item);
+ }
+ });
+ chipsEl.appendChild(chip);
+ });
+ }
+
+ function createPopupTemplate() {
+ return {
+ title: "{NAME}",
+ content: "{SQMI} square miles, jurisdiction: {FEATTYPE}",
+ };
+ }
+
+ function getWhereArgs() {
+ let args = [];
+ const typesActive = appState.types.length > 0;
+ const featureTypes = typesActive ? appState.types : allTypes;
+ featureTypes.map((j) => args.push(`'${j}'`));
+ const filtered = ` AND (FEATTYPE = ${args.join(" OR FEATTYPE = ")})`;
+ const unfiltered = ` AND FEATTYPE != ${args.join(" AND FEATTYPE != ")}`;
+ const argString = typesActive ? filtered : unfiltered;
+ return argString;
+ }
+
+ async function setFeatureLayerViewFilter() {
+ await view.whenLayerView(layer).then((featureLayerView) => {
+ const where = `NAME IS NOT NULL${getWhereArgs()}`;
+ featureLayerView.featureEffect = {
+ filter: { where },
+ excludedEffect: "opacity(20%) grayscale(100%)",
+ includedEffect: "opacity(100%)",
+ };
+ });
+ }
+
+ function handleChipSelection(event, value) {
+ let items = appState.types;
+ const isActive = !items.includes(value);
+ event.target.icon = isActive ? "check-circle-f" : "circle";
+ event.target.classList = isActive ? "chip-active" : undefined;
+ if (isActive) {
+ items.push(value);
+ } else {
+ items = items.filter((item) => item !== value);
+ }
+ appState.types = items;
+ setFeatureLayerViewFilter();
+ }
+
+ function handleModeChange() {
+ appState.mode = appState.mode === "dark" ? "light" : "dark";
+ const isDark = appState.mode === "dark";
+ darkModeCss.disabled = !darkModeCss.disabled;
+ lightModeCss.disabled = !lightModeCss.disabled;
+ map.basemap = isDark ? "streets-night-vector" : "topo-vector";
+ toggleModeEl.icon = isDark ? "moon" : "brightness";
+ document.body.className = isDark ? "calcite-mode-dark" : undefined;
+ }
+
+ function initializeApp() {
+ createFilterChips();
+ setFeatureLayerViewFilter();
+ }
+
+ initializeApp();
+ })());

index.html

@@ -0,0 +1,70 @@
+<html>
+
+<head>
+ <meta charset="utf-8" />
+ <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
+ <title>2023 Esri Developer Summit - Designing Apps with Calcite Design System</title>
+
+ <!-- Calcite imports -->
+ <script type="module" src="https://js.arcgis.com/calcite-components/1.0.7/calcite.esm.js"></script>
+ <link rel="stylesheet" type="text/css" href="https://js.arcgis.com/calcite-components/1.0.7/calcite.css" />
+
+ <!-- ArcGIS Maps SDK for JavaScript imports -->
+ <script src="https://js.arcgis.com/4.27/"></script>
+ <link id="jsapi-mode-light" rel="stylesheet"
+ href="https://js.arcgis.com/4.27/@arcgis/core/assets/esri/themes/light/main.css">
+ <link disabled id="jsapi-mode-dark" rel="stylesheet" href="https://js.arcgis.com/4.27/esri/themes/dark/main.css" />
+
+ <!-- Demo imports -->
+ <script src="/app.js" defer></script>
+ <link rel="stylesheet" href="/style.css">
+</head>
+
+<body>
+ <calcite-shell>
+ <div id="viewDiv"></div>
+ <div id="nav" slot="header">
+ <img id="logo" src="/images/logo.svg" />
+ <h1>US Park Finder</h1>
+ <div id="chips">
+ <calcite-chip tabindex="0" icon="question" id="chip-info-toggle" value="Instructions"></calcite-chip>
+ </div>
+ <calcite-action-pad layout="horizontal" expand-disabled>
+ <calcite-action id="toggle-mode" text="Change mode" text-enabled icon="brightness"></calcite-action>
+ <calcite-action id="toggle-modal" text="About this application" icon="information"></calcite-action>
+ </calcite-action-pad>
+ <calcite-tooltip placement="bottom" reference-element="chip-info-toggle">Use the filters to show or hide
+ park
+ jurisdictions.</calcite-tooltip>
+ <calcite-tooltip placement="bottom" reference-element="toggle-mode">Change mode</calcite-tooltip>
+ <calcite-tooltip placement="bottom" reference-element="toggle-modal">About this
+ application</calcite-tooltip>
+ </div>
+ </calcite-shell>
+
+ <calcite-modal id="modal">
+ <div slot="header">Hello visitor!</div>
+ <div slot="content">
+ This simple sample application is a companion resource to the "Designing Apps with
+ Calcite Design System" technical session at Esri Developer Summit 2023.
+ <hr />
+ This example illustrates theming Calcite Components - learn more <calcite-link target="_blank"
+ href="https://developers.arcgis.com/calcite-design-system">
+ in Calcite Design System documentation</calcite-link>.
+ <hr />
+ <calcite-link target="_blank"
+ href="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/EsriDevEvents/designing-apps-with-calcite-design-system-2023">Application
+ source code</calcite-link> is available at
+ <calcite-link target="_blank" href="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/EsriDevEvents/">Esri Developer Events
+ GitHub</calcite-link>.
+ <hr />
+ <calcite-link target="_blank"
+ href="https://www.arcgis.com/home/item.html?id=f092c20803a047cba81fbf1e30eff0b5">USA
+ Parks data</calcite-link> is sourced from Esri Data and Maps, and available in the
+ <calcite-link target="_blank" href="https://livingatlas.arcgis.com/en/home/">ArcGIS Living Atlas of the
+ World</calcite-link>.
+ </div>
+ </calcite-modal>
+</body>
+
+</html>

style.css

@@ -0,0 +1,91 @@
+html,
+body,
+#viewDiv {
+ padding: 0;
+ margin: 0;
+ height: 100%;
+ width: 100%;
+ font-family: Roboto, system, sans-serif;
+}
+
+/** theming examples for core Calcite theme values */
+body.calcite-mode-dark {
+ --calcite-ui-brand: #3fa659;
+ --calcite-ui-brand-hover: #358c4b;
+ --calcite-ui-brand-press: #2c733e;
+ --calcite-ui-background: #303531;
+ --calcite-ui-foreground-1: #1e2520;
+ --calcite-ui-info: #49bf67;
+ --calcite-ui-text-1: #ffffff;
+ --calcite-ui-text-2: #b1bab3;
+ --calcite-ui-text-3: #8a9c8c;
+ --calcite-ui-text-inverse: #07100a;
+ --calcite-ui-border-1: #48554b;
+ --calcite-ui-border-2: #434a44;
+ --calcite-ui-border-3: #334036;
+ --calcite-ui-border-input: #4a5d4e;
+}
+
+/** theming examples for Calcite Chip with programmatically assigned classes */
+/** these values match the colors assigned in `app.js` */
+#chip-type-national {
+ --calcite-ui-icon-color: #c66a4a;
+}
+#chip-type-national.chip-active {
+ --calcite-ui-foreground-2: rgba(198, 106, 74, 0.3);
+}
+#chip-type-regional {
+ --calcite-ui-icon-color: #3cccb4;
+}
+#chip-type-regional.chip-active {
+ --calcite-ui-foreground-2: rgba(60, 204, 180, 0.3);
+}
+#chip-type-state {
+ --calcite-ui-icon-color: #7a81ff;
+}
+#chip-type-state.chip-active {
+ --calcite-ui-foreground-2: rgba(122, 129, 255, 0.3);
+}
+#chip-type-county {
+ --calcite-ui-icon-color: #0096ff;
+}
+#chip-type-county.chip-active {
+ --calcite-ui-foreground-2: rgba(0, 150, 255, 0.3);
+}
+#chip-type-local {
+ --calcite-ui-icon-color: #f260a1;
+}
+#chip-type-local.chip-active {
+ --calcite-ui-foreground-2: rgba(242, 95, 161, 0.3);
+}
+
+/** supporting styles */
+#nav {
+ padding: 0.5rem 1rem;
+ display: flex;
+ align-items: center;
+ border-bottom: 1px solid var(--calcite-ui-border-3);
+}
+
+#nav h1 {
+ font-size: 1rem;
+ margin-inline: 1rem auto;
+ color: var(--calcite-ui-text-2);
+}
+
+#chips {
+ margin-inline-end: auto;
+ display: flex;
+ flex-wrap: wrap;
+ gap: 0.5rem;
+}
+
+#chips calcite-chip {
+ cursor: pointer;
+}
+
+#modal hr {
+ margin: 1rem 0;
+ border: 0;
+ border-bottom: 1px solid var(--calcite-ui-border-3);
+}