Latest Contributions by GeoffreyJoseph

‎11-13-2024

I ended up using the "description" attribute of the header. Not ideal but it works. https://codepen.io/joffreyj/pen/qBegqJo

‎11-12-2024

I am working on a sort routine for a calcite-table component. I am trying to include an arrow icon to indicate which column is being sorted and in which direction. I can't find a way to render the arrow icon because of the shadow-dom I assume. Is there any way to work around this? Thanks. https://codepen.io/joffreyj/pen/qBegqJo

‎03-19-2024

Thanks

‎03-11-2024

What I ended up doing was just calculating an offset between selectedFeatureIndex and the known index and looping through it offset times using previous() or next(). Seems to work ok. I would still be interested in a more elegant solution.

‎03-11-2024

I have a popup with a variable number if features. Because the website is public facing and primarily aimed at users with no ArcGIS experience, we want to provide actions in case the users miss the "previous" and "next" arrows and the "select feature" option. We want to be able to provide the user with 3 primary actions that will always be returned in the query. I see the previous() and next() methods for popup, but how do I go directly to a specific index like the "select feature" option?

‎03-07-2024

I have an app (JSAPI 4.28) where the user searches an address and views various districts (police, fire, voting precinct, etc) associated with the address. In the popup header, the user can switch between these features using the arrows. Is there anyway to detect when the user clicks on these arrows to change the feature? If not, is there anyway to remove the header?

‎02-02-2024

Thanks very much for your help.

‎02-02-2024

Can someone please help me understand why my highlights on mouseover are not working here? I am (slowly) working on learning the js api by cobbling together a new version of an app I made in leaflet (many years ago from the new api samples. Very interesting. I am trying to get the mouseover highlight to work as it does in that app. I know there are other things I may not be doing optimally, feel free to chime in. Eventually I want to use the reactiveUtils I think. Thanks. <!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" /> <title>Arkansas District Finder</title> <script src="https://js.arcgis.com/calcite-components/1.6.1/calcite.esm.js" type="module"></script> <link rel="stylesheet" href="https://js.arcgis.com/calcite-components/1.6.1/calcite.css" /> <script src="https://js.arcgis.com/4.28/"></script> <link rel="stylesheet" href="https://js.arcgis.com/4.28/esri/themes/light/main.css" /> </head> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } body { display: flex; } calcite-loader { align-self: center; justify-self: center; } #header-title { margin-left: 1rem; margin-right: 1rem; } #info-content { padding: 0.75rem; } calcite-rating { margin-top: 0.25rem; } #search-container.esri-search.esri-widget { width: 100% !important; align-items: flex-start; /* do not want scroll bar on panel. Clicking it makes search suggestions disappear */ min-height: 300px; padding: 0px; overflow: auto; /* overflow: hidden; */ } button:disabled { opacity: 0.4; -moz-opacity: 0.4; -webkit-opacity: 0.4; cursor: default; } #info { visibility: hidden; } .esri-feature { letter-spacing: 0em; line-height: 1.55rem; font-feature-settings: "liga"1, "calt"0; background: #fff; padding: 1em; } </style> <body> <calcite-loader></calcite-loader> <calcite-shell hidden> <calcite-shell-panel slot="panel-start"> <calcite-panel> <calcite-block open> <div style="width: 100%; background:red; color:white; max-width: 100%; display: flex; flex-direction: row; align-items: center;justify-content: center"> <h2>Arkansas District Finder</h2> </div> </calcite-block> <calcite-block heading="Select Chamber" open> <div style="width: 360px; max-width: 100%; display: flex; flex-direction: row"> <calcite-button class="esri-button style-button" id="senate" type="button" disabled> State Senate </calcite-button> <calcite-button class="esri-button style-button" id="house" type="button"> State House </calcite-button> </div> </calcite-block> <calcite-block id="senBlock" heading="Search Arkansas State Senators" collapsible open> <calcite-label> Senators <calcite-combobox id="senSelect" selection-mode="single" placeholder="Select a Senator"> </calcite-combobox> </calcite-label> </calcite-block> <calcite-block id="repBlock" heading="Arkansas State Reps" collapsible open hidden> <calcite-label> Representatives <calcite-combobox id="repSelect" selection-mode="single" placeholder="Select a Representative"> </calcite-combobox> <calcite-label> </calcite-block> <calcite-block heading="Find My Districts" collapsible closed> <div id="search-container"></div> </calcite-block> <calcite-block heading="Legend" collapsible open> <div id="legend-container"></div> </calcite-block> </calcite-panel> </calcite-shell-panel> <div id="overviewDiv"> <div id="extentDiv"></div> </div> <div id="viewDiv"></div> <calcite-shell-panel slot="panel-start" width-scale="s" id="info" align="center"> <calcite-panel heading="Arkansas Senate"> <calcite-card> <img slot="thumbnail" alt="Sample image alt" src="https://placebear.com/280/200"> <span slot="title">Senator Name Here</span> <span slot="subtitle"></span></span> <div slot="footer-start" id="example-slotted-footer"> <calcite-chip id="badge-1" value="calcite chip" icon="check-circle" scale="s"></calcite-chip> <calcite-chip id="badge-2" value="calcite chip" icon="globe" scale="s"></calcite-chip> <calcite-chip id="badge-3" value="calcite chip" icon="security" scale="s"></calcite-chip> </div> <div slot="footer-end"> <calcite-chip id="badge-4" value="calcite chip" icon="user" scale="s"></calcite-chip> <calcite-action scale="s" icon="ellipsis" id="example-slotted-action"></calcite-action> </div> </calcite-card> </calcite-panel> </calcite-shell-panel> </calcite-shell> <script> require([ "esri/core/promiseUtils", "esri/core/reactiveUtils", "esri/WebMap", "esri/views/MapView", "esri/widgets/Home", "esri/widgets/Features" ] , function(promiseUtils, reactiveUtils, WebMap, MapView, Home, Features){ const webmapId = new URLSearchParams(window.location.search).get("webmap") ?? "c7e90511a9094e14a6b373c5d47916f6"; // Create a Map with a basemap, to be used with in the main view const map = new WebMap({ portalItem: { id: webmapId } }); map.load() .then(() => { map.layers .filter(layer => { return layer.type === 'feature' }) .map(layer => { let featLayer = layer; featLayer.outFields = ['*']; return featLayer; }); }); const view = new MapView({ container: "viewDiv", map: map, popupEnabled: false }); // Provide graphic to a new instance of a Feature widget const featuresWidget = new Features({ container: 'features-widget', view: view }); const popup = "<div id='features-widget'></div>" view.ui.add(featuresWidget, "bottom-right"); view.ui.move("zoom", "top-left"); var home = new Home({ view: view }); view.ui.add(home, "top-left"); view.ui.add("info", "bottom-left"); // Open the Features widget with features fetched from // the view click event location. reactiveUtils.on( () => view, "click", (event) => { featuresWidget.open({ location: event.mapPoint, fetchFeatures: true }); } ); map.when(() => { // 2016 election layer const senateLayer = map.layers.items[0]; senateLayer.outFields = ['*']; view.whenLayerView(senateLayer).then((layerView) => { let highlight; let objectId; const debouncedUpdate = promiseUtils.debounce(async (event) => { // Perform a hitTest on the View const hitTest = await view.hitTest(event); // Make sure graphic is for the current layer const results = hitTest.results.filter((result) => { return result.graphic.layer.title === "Arkansas State Senate"; }); if(results.length){ const result = results[0]; const newObjectId = result && result.graphic.attributes[result.layer.objectIdField]; document.getElementById("info").style.visibility = "hidden"; if (!newObjectId) { highlight?.remove(); objectId = null; } else if (objectId !== newObjectId) { highlight?.remove(); objectId = newObjectId; highlight = layerView.highlight(result.graphic); } //result.forEach((graphicHit) => { const graphic = result.graphic; const attributes = graphic.attributes; const firstName = attributes.FirstName; const lastName = attributes.LastName; const email = attributes.Email; const party = attributes.Party; const district = attributes.district; const chamber = attributes.Chamber; const id = attributes.OBJECTID; document.getElementById("info").style.visibility = "visible"; var panel = document.querySelector('#info'); panel.children[0].heading = firstName + " " + lastName + " (" + party +")"; document.querySelector('[slot="title"]').innerText= "Arkansas " + chamber + " District " + district; document.querySelector('[slot="subtitle"]').innerText=email; document.querySelector('[slot="thumbnail"]').src=attributes.PhotoURL; document.querySelector('[slot="thumbnail"]').width="320px"; }else{ highlight?.remove(); document.getElementById("info").style.visibility = "hidden"; } }); // Listen for the pointer-move event on the View view.on("pointer-move", (event) => { debouncedUpdate(event).catch((err) => { if (!promiseUtils.isAbortError(err)) { throw err; } }); }); }); }); document.querySelector("calcite-shell").hidden = false; document.querySelector("calcite-loader").hidden = true; }); </script> </body> </html>

‎01-26-2024

Finally pieced it together. If anyone else runs into this... //title document.querySelector('[slot="title"]').innerText="Text"; //img src document.querySelector('[slot="thumbnail"]').src=attributes.PhotoURL;

‎01-26-2024

Is there an example you can provide on how to update a card with dynamic content? For example how would I change the image and title in the code below programmatically? <calcite-card> <img slot="thumbnail" alt="Sample image alt" src="https://placebear.com/280/200"> <span slot="title">Downtown - 4 mile buffer</span> <span slot="subtitle">City of AcmeCo</span> <div slot="footer-start" id="example-slotted-footer"> <calcite-chip id="badge-1" value="calcite chip" icon="check-circle" scale="s"></calcite-chip> <calcite-chip id="badge-2" value="calcite chip" icon="globe" scale="s"></calcite-chip> <calcite-chip id="badge-3" value="calcite chip" icon="security" scale="s"></calcite-chip> </div> <div slot="footer-end"> <calcite-chip id="badge-4" value="calcite chip" icon="user" scale="s"></calcite-chip> <calcite-action scale="s" icon="ellipsis" id="example-slotted-action"></calcite-action> </div> </calcite-card> <calcite-tooltip reference-element="badge-1">Verified</calcite-tooltip> <calcite-tooltip reference-element="badge-2">Public</calcite-tooltip> <calcite-tooltip reference-element="badge-3">Secure</calcite-tooltip> <calcite-tooltip reference-element="badge-4">User-created</calcite-tooltip>

‎10-18-2023

Is this possible? I have this question as well.

‎10-03-2023

Hello @FasilTiru , I have seen this example, thanks. Going to a particular page would be most helpful, please consider that. Thanks

‎10-03-2023

Is there a URL parameter for going to a particular page in a multi page infographic? Like "?theme=light&toolbarViewMode=none" ? Maybe "&page=3" oir something like that? Is there a list of the valid parameters anywhere?

‎01-29-2018

Yes, I could have access while not connected but I think for my purposes at this point it would be overkill. I can use something else to accomplish my goal at this stage. Thank you for this information though, it is very helpful.

‎01-29-2018

Many thanks for the info. My hope was to be able to create (and execute) notebooks using local ArcGIS Pro projects when I am not connected to the internet, yes not connected to AGOL or Portal. As far as what I hope to accomplish, at this point I am trying to create some simple choropleth maps using output from an already developed python module, than progress from there. I think something like geopandas may work for me. Again, thanks for clarifying this.

Online Status	Offline
Date Last Visited	‎09-12-2025 12:43 PM

My Ideas

Latest Contributions by GeoffreyJoseph

Re: Visual indicator calcite-table sort

Visual indicator calcite-table sort

Re: Go to specific index in popup

Re: Go to specific index in popup

Go to specific index in popup

Detect change in popup features

Re: feature hightlight on mouseover

feature hightlight on mouseover

Re: How to interact with card slots in ES6

How to interact with card slots in ES6

Re: how to bypass the OAuth logon prompt

Re: Business Analyst Dynamic HTML url parameters

Business Analyst Dynamic HTML url parameters

Re: Using Jupyter Notebook without internet access

Re: Using Jupyter Notebook without internet access

Re: Go to specific index in popup

Re: ARCGis Pro time slider

Re: Using Jupyter Notebook without internet access