Update demo

EsriDevEvents · Mar 7, 2023 · 59f8733 · 59f8733
1 parent 95d9916
commit 59f8733
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 75 deletions.
diff --git a/app.js b/app.js
@@ -1,3 +1,10 @@
+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");
+
 const allTypes = [
   "National park or forest",
   "State park or forest",
@@ -6,7 +13,7 @@ const allTypes = [
   "Local park",
 ];
 
-const colors = ["#c66a4a", "#7a81ff", "#3cccb4", "#0096ff", "#f260a1"];
+const typeColors = ["#c66a4a", "#7a81ff", "#3cccb4", "#0096ff", "#f260a1"];
 
 const appState = {
   types: allTypes,
@@ -16,56 +23,23 @@ const appState = {
 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",
+  uniqueValueInfos: assignColorsToTypes(),
+};
+
+function assignColorsToTypes() {
+  let uniqueValueInfos = [];
+  allTypes.forEach((type, index) => {
+    uniqueValueInfos.push({
+      value: type,
       symbol: {
         type: "simple-fill",
-        color: colors[4],
-        outline: { color: colors[4] },
+        color: typeColors[index],
+        outline: { color: typeColors[index] },
       },
-    },
-  ],
-};
-
-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");
+    });
+  });
+  return uniqueValueInfos;
+}
 
 require([
   "esri/Map",
@@ -76,10 +50,7 @@ require([
 ], (Map, MapView, FeatureLayer, Home, Locate) =>
   (async () => {
     toggleModeEl.addEventListener("click", () => handleModeChange());
-    toggleModalEl.addEventListener(
-      "click",
-      () => (modalEl.open = !modalEl.open)
-    );
+    toggleModalEl.addEventListener("click", () => handleModalChange());
 
     const layer = new FeatureLayer({
       url: "https://services.arcgis.com/P3ePLMYs2RVChkJx/arcgis/rest/services/USA_Parks/FeatureServer/0",
@@ -99,7 +70,7 @@ require([
       container: "viewDiv",
       map: map,
       center: [-120, 45],
-      zoom: 3,
+      zoom: 4,
     });
 
     /** Ensure smaller features are visible on top of larger ones */
@@ -114,9 +85,14 @@ require([
     view.ui.add(homeWidget, "top-left");
     view.ui.add(locateBtn, { position: "top-left" });
 
+    function createPopupTemplate() {
+      return {
+        title: "{NAME}",
+        content: "{SQMI} square miles, jurisdiction: {FEATTYPE}",
+      };
+    }
+
     /** Create the chips to represent each jurisdiction */
-    /** Assign a selector to style uniquely */
-    /** Add event listeners to filter on after interaction */
     function createFilterChips() {
       allTypes.forEach((item) => {
         const chip = document.createElement("calcite-chip");
@@ -129,25 +105,18 @@ require([
         chip.icon = isActive ? "check-circle-f" : "circle";
         chip.classList = isActive ? "chip-active" : undefined;
         chip.addEventListener("click", (event) =>
-          handleChipSelection(event, item)
+          handleChipChange(event, item)
         );
         chip.addEventListener("keydown", (event) => {
           if (event.key === " " || event.key === "Enter") {
-            handleChipSelection(event, item);
+            handleChipChange(event, item);
           }
         });
         chipsEl.appendChild(chip);
       });
     }
 
-    function createPopupTemplate() {
-      return {
-        title: "{NAME}",
-        content: "{SQMI} square miles, jurisdiction: {FEATTYPE}",
-      };
-    }
-
-    function getWhereArgs() {
+    function createWhereArguments() {
       let args = [];
       const typesActive = appState.types.length > 0;
       const featureTypes = typesActive ? appState.types : allTypes;
@@ -158,18 +127,18 @@ require([
       return argString;
     }
 
-    async function setFeatureLayerViewFilter() {
+    async function handleLayerFilter() {
       await view.whenLayerView(layer).then((featureLayerView) => {
-        const where = `NAME IS NOT NULL${getWhereArgs()}`;
+        const where = `NAME IS NOT NULL${createWhereArguments()}`;
         featureLayerView.featureEffect = {
           filter: { where },
-          excludedEffect: "opacity(20%) grayscale(100%)",
+          excludedEffect: "opacity(30%) grayscale(100%)",
           includedEffect: "opacity(100%)",
         };
       });
     }
 
-    function handleChipSelection(event, value) {
+    function handleChipChange(event, value) {
       let items = appState.types;
       const isActive = !items.includes(value);
       event.target.icon = isActive ? "check-circle-f" : "circle";
@@ -180,22 +149,26 @@ require([
         items = items.filter((item) => item !== value);
       }
       appState.types = items;
-      setFeatureLayerViewFilter();
+      handleLayerFilter();
     }
 
     function handleModeChange() {
       appState.mode = appState.mode === "dark" ? "light" : "dark";
-      const isDark = appState.mode === "dark";
+      const isDarkMode = 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;
+      map.basemap = isDarkMode ? "streets-night-vector" : "topo-vector";
+      toggleModeEl.icon = isDarkMode ? "moon" : "brightness";
+      document.body.className = isDarkMode ? "calcite-mode-dark" : undefined;
+    }
+
+    function handleModalChange() {
+      modalEl.open = !modalEl.open;
     }
 
     function initializeApp() {
       createFilterChips();
-      setFeatureLayerViewFilter();
+      handleLayerFilter();
     }
 
     initializeApp();

diff --git a/style.css b/style.css
@@ -115,6 +115,10 @@ body.calcite-mode-dark calcite-modal {
   color: var(--calcite-ui-text-2);
 }
 
+#nav calcite-tooltip {
+  z-index: 100;
+}
+
 #modal hr {
   margin: 1rem 0;
   border: 0;