POST
|
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.
... View more
03-11-2024
02:05 PM
|
1
|
0
|
135
|
POST
|
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?
... View more
03-11-2024
11:21 AM
|
0
|
3
|
166
|
POST
|
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?
... View more
03-07-2024
01:02 PM
|
0
|
1
|
221
|
POST
|
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>
... View more
02-02-2024
01:24 PM
|
0
|
2
|
340
|
POST
|
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;
... View more
01-26-2024
11:50 AM
|
0
|
0
|
178
|
POST
|
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>
... View more
01-26-2024
09:01 AM
|
0
|
1
|
250
|
POST
|
Hello @FasilTiru , I have seen this example, thanks. Going to a particular page would be most helpful, please consider that. Thanks
... View more
10-03-2023
10:20 AM
|
0
|
0
|
288
|
POST
|
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?
... View more
10-03-2023
09:13 AM
|
0
|
2
|
304
|
POST
|
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.
... View more
01-29-2018
08:00 AM
|
1
|
0
|
2326
|
POST
|
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.
... View more
01-29-2018
07:52 AM
|
0
|
0
|
2326
|
POST
|
I would like to know how to use jupyter notebook on a machine with ArcGIS pro 2.1 with local arcgis pro projects / no internet connection. Is it possible? I can get jupyter up and running and have connected and used resources from ArcGIS online but I also need to be able to create these notebooks when I am not connected to the internet. Any examples / links etc. would be great.
... View more
01-29-2018
07:00 AM
|
0
|
4
|
14108
|
POST
|
I got the results I wanted, I set and locked the interval at .999 years and put the step at 1 year.. I will keep messing around with it but a good enough result for today. Thanks a lot for pointing me in the right direction!
... View more
11-08-2017
01:49 PM
|
1
|
0
|
435
|
Title | Kudos | Posted |
---|---|---|
1 | 03-11-2024 02:05 PM | |
1 | 11-08-2017 01:49 PM | |
1 | 01-29-2018 08:00 AM |
Online Status |
Offline
|
Date Last Visited |
a month ago
|