Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Cancel
- Home
- :
- About SteveCole
SteveCole
Honored Contributor
since
07-04-2014
1476
Posts created
707
Kudos given
116
Solutions
839
Kudos received
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
My Ideas
(28 Idea Submissions)Latest Contributions by SteveCole
|
POST
|
In 3.X, this was quite simple as there was the infoWindow.Resize() method but there seemingly is not an equivalent option in 4.X? The closest thing I found was this thread where someone was using CSS to resize the popup. Unfortunately, this hasn't been working for me and I need to adjust the popup's dimensions a number of times, depending on the layer that was clicked. In my attempt, I'm using reactiveUtil to watch for features being added to the popup: reactiveUtils.watch(()=>theView.popup.features, (event)=>{
// If the zoom-out action is clicked, fire the zoomOut() function
//Attempt to resize the popup based on the layer
if (event.length > 0) {
var theLayerName = theView.popup.features[0].layer.id;
switch(theLayerName) {
case "tipLine":
break;
case "tipPoint":
break;
case "swmCip":
break;
case "schools":
break;
case "parcels":
break;
case "raceTracts":
app.plmf.resizePopupWindow(925,500);
break;
case "raceBlockGroups":
break;
case "povertyTracts":
break;
case "povertyBlockGroups":
break;
case "lepTracts":
break;
case "lepBlockGroups":
break;
case "ageSexTracts":
break;
case "ageSexBlockGroups":
break;
case "disabilityTracts":
break;
case "disabilityBlockGroups":
break;
case "originTracts":
break;
default:
}
}
}); And then the function that is called to attempt to resize the popup is as follows: resizePopupWindow(theWidth,theHeight) {
var theCssWidth = theWidth + 'px !important';
var theCssHeight = theHeight + 'px !important';
var cols = document.querySelectorAll('.esri-view-width-xlarge .esri-popup__main-container, .esri-view-width-large .esri-popup__main-container, .esri-view-width-medium .esri-popup__main-container');
if (cols.length > 0) {
for(var i = 0; i < cols.length; i++) {
cols[i].style.height = theCssHeight;
cols[i].style.width = theCssWidth;
}
}
}
... View more
08-19-2024
08:09 AM
|
0
|
1
|
818
|
|
POST
|
Wanted to post an update because I have found a way to push through my issues. While searching the forum for some information, I came across this post which, succinctly, laid out an example of how to incorporate your own modules along with the ESRI stuff. The short answer is to ditch AMD and use the ESM IMPORT method rather than dojo require. There were still some fine details in order to get it to work but the linked sample helped me visualize it. First big thing is that in the HTML header your main JS file should be identified as a module rather than just JS. It went from this: <script type="text/javascript" src="js/maing.js"></script> to this: <script type="module" src="js/main.js"></script> Within that JS file, all the require statements went away in favor of this: import postLoadMapFunctions from "./postLoadMapFunctions.js";
import esriConfig from "https://js.arcgis.com/4.30/@arcgis/core/config.js";
import Extent from "https://js.arcgis.com/4.30/@arcgis/core/geometry/Extent.js";
import SpatialReference from "https://js.arcgis.com/4.30/@arcgis/core/geometry/SpatialReference.js";
import esriId from "https://js.arcgis.com/4.30/@arcgis/core/identity/IdentityManager.js"; I'm still using the ESRI CDN so you'll see that the base URL to the CDN version has been inserted before the "@" character. This got things going quickly but there were still hiccups. For example, sometimes you may specify one of objects but you'll get an errror in the console like this one from reactiveUtils: The fix for this is actually quite easy. Change your import reference from this: import reactiveUtils from "https://js.arcgis.com/4.30/@arcgis/core/core/reactiveUtils.js"; to this: import * as reactiveUtils from "https://js.arcgis.com/4.30/@arcgis/core/core/reactiveUtils.js"; The layout/format of your custom modules will be different because, again, there are is no dojo require statement but mine is roughly this: import MapView from 'https://js.arcgis.com/4.29/@arcgis/core/views/MapView.js';
import Map from 'https://js.arcgis.com/4.29/@arcgis/core/Map.js';
import GraphicsLayer from 'https://js.arcgis.com/4.29/@arcgis/core/layers/GraphicsLayer.js';
import Graphic from 'https://js.arcgis.com/4.29/@arcgis/core/Graphic.js';
export default class myModule {
constructor(){
}
setView(view){
this.view = view;
}
connectedCallback() {
let goToButton = document.createElement("div");
goToButton.setAttribute("style", "background-color:#d9dde0;padding:2px 6px;cursor:pointer");
goToButton.textContent = "Add Graphic";
this.shadow.appendChild(goToButton);
goToButton.addEventListener("click", (function(){
this.addGraphic();
}).bind(this));
}
addGraphic(){
let point = {
type: "point",
longitude: -71.2643,
latitude: 42.0909
};
let markerSymbol = {
type: "simple-marker",
color: [226, 119, 40]
};
let graphic = new Graphic({
geometry: point,
symbol: markerSymbol
});
let graphicsLayer = new GraphicsLayer();
graphicsLayer.add(graphic);
this.view.map.add(graphicsLayer);
this.view.goTo(graphic);
}
} From that point, you're really onto just 3.X vs 4.X API changes in your code. Anyways, hope this makes sense and helps some others.
... View more
08-15-2024
12:22 PM
|
1
|
0
|
3721
|
|
POST
|
Thanks. That appears to be what I wanted. That works in my application. Until it does something else unintended. 😂
... View more
08-14-2024
01:32 PM
|
0
|
0
|
1286
|
|
POST
|
Hey Rene, thanks for responding. That sample works great for FeatureLayers but I'm dealing with a GraphicsLayer. Here's a CodePen using the Sketch Widget sample as a base: https://codepen.io/evtguy/pen/xxoPorp I've tried my best to modify the sample to reflect the code in my actual application. Once you open the CodePen, here's what to do: Use the Sketch tool to add a point. Click anywhere in the map to deselect the graphic. Now click on the added point graphic to display the popup. Close the popup. The graphic remains selected.
... View more
08-14-2024
11:05 AM
|
0
|
2
|
1292
|
|
POST
|
I've spent far too much time today trying to figure this out. In the 4.X API, how do you unselect a selected graphic? My specific issue is with a popup on a graphicsLayer where the graphic is not unselected when the popup is closed. FWIW, this would be my relevant code: // Search for graphics at the clicked location
theView.hitTest(screenPoint,{include:theGLayer}).then(function (response) {
if (response.results.length) {
var theContent = app.plmf.graphicsLayerContent(response.results[0].graphic);
var theTitle = "User Defined Project";
theView.openPopup({title:theTitle, content:theContent, location: event.mapPoint});
//}
}
});
});
//Unselect the interactive project when the popup is closed
reactiveUtils.watch(
// getValue function
() => theView.popup.visible,
// callback
(visible) => {
if (visible == true) {
//Do Nothing
} else {
console.log('The popup is closed');
theView.popup.clear();
}
});
... View more
08-13-2024
03:01 PM
|
0
|
4
|
1346
|
|
POST
|
Thanks, guys. I gave the nod to Tony since his post is how I would like to implement this in 4.x but I appreciate the context that GeoGalvanic provided. It is weird how the use of popupTemplate isn't documented in the GraphicsLayer Help Docs but at least it does work. My implementation is literally using one user generated feature so I don't think there's going to be any performance hit in using GraphicsLayer vs FeatureLayer. I also prefer the freedom of storying either a point, line, or polygon in one layer using GraphicsLayer. Cheers!
... View more
08-09-2024
08:55 AM
|
0
|
0
|
1884
|
|
POST
|
Can a 4.x GraphicsLayer have a popup? This was possible in 3.x but I'm not seeing it in 4.x. In my 3.x application, users primarily worked using a combo box picklist of mapped features but I used the GraphicsLayer and Draw toolbar to provide the option of manually drawing a graphic on the map but still take advantage of some reporting functionality that I have in the app. The report functionality could extract some of the information that a user provided when adding the graphic for use inside the final report product. I guess if GraphicsLayers can't have attributes I might have to use a FeatureLayer like one. Ugh. One step forward, two steps backwards..
... View more
08-08-2024
03:47 PM
|
0
|
3
|
1957
|
|
POST
|
THANK YOU! Your approach might be the least painful option for me so I'll see if I'm able to incorporate it.
... View more
08-06-2024
03:19 PM
|
0
|
0
|
3820
|
|
POST
|
No, I don't believe I would have any issues doing so. I kinda considered downloading the API as an option to keep my 3.x app running (I know ESRI isn't pulling the CDN plug for awhile but still). The biggest challenge seems to be finding the actual 3.x download. I keep getting in a circular loop while looking for it. Ugh. I'm too old and too close to retirement to learn NPM. 😆
... View more
08-06-2024
02:53 PM
|
0
|
1
|
3823
|
|
POST
|
Thanks, Joel. While I have read the announcements about each new 4.x version, these migration issue aspects have definitely not been on my horizon. And yes, as you commented, I am using the ESRI CDN rather than self hosting the API. In my dojoConfig, I have tried providing a full URL path for my custom modules but it keeps appending that to the end of the core ESRI baseURL. This shouldn't be so difficult but, if I have to append them all into an 8,000 line JS file, I'll do it. 😩 [By the way, I don't actually use Declare in my code base. I didn't know about that getting dropped and it was pure bad luck that I randomly copy/pasted that from the Dojo help pages. Doh!]
... View more
08-05-2024
03:38 PM
|
0
|
3
|
3866
|
|
POST
|
Thanks for chiming in. Yikes. I don't like this version of Chose Your Own adventure. My original post might have led to some confusion so let me clarify- my "modules" aren't Dojo/Digit dependent per se- I'm just using the technique to break up all my code into smaller blocks based on functionality. For example, one module might have all the pop up content generating functions, another module generates a custom report. I may use an odd dojo item (dojo.number.format) but mostly they reference to JS API items like queryTask or Geometry. It just seems like no matter what is actually inside the module, it will choke. I've tried pared down versions and the end result is the same. Here's an ESRI JS API only version with a blank function: String.prototype.toProperCase = function () {
return this.replace(/\w\S*/g, function(txt){return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();});
};
define ([
"esri/geometry/Extent",
"esri/layers/FeatureLayer",
"esri/SpatialReference",
"esri/tasks/BufferParameters",
"esri/tasks/FeatureSet",
"esri/tasks/GeometryService",
"esri/tasks/query",
"esri/tasks/QueryTask"
], function (
Extent, FeatureLayer, SpatialReference, BufferParameters, FeatureSet, GeometryService, Query, QueryTask
) {
return declare(null,{
create: function () {
}
});
}); Here's a simple module from Dojo's website: define([
"dojo/_base/declare",
"dojo/dom",
"app/dateFormatter"
], function(declare, dom, dateFormatter){
return declare(null, {
showDate: function(id, date){
dom.byId(id).innerHTML = dateFormatter.format(date);
}
});
}); Both will error out with the same message. For the heck of it, here are the consoles from my 4.x attempt on the left and the existing 3.x app which works fine. The only difference in dojoConfig I see is that the 4.x dojoConfig specifies baseUrl whereas the 3.x dojoConfig does not. Again, I'm only using this approach because that's how I did it with 3.x If there's a different (and suggested) way of dividing up / compartmentalizing your code with 4.x, I'm all ears.
... View more
08-05-2024
11:57 AM
|
0
|
1
|
3886
|
|
POST
|
I had hoped that I could just fade into the sunset with my 3.x JS API application and not have to migrate it to 4.x but the slow & delayed pace of Experience Builder functional parity makes me feel like I'll have to migrate it. The app I have is what I would call "plain" vanilla and just uses the JS API and Dojo components available when using the API. In other words, I'm not doing any React, Typescript etc. When I developed it, I used the example in the 3.x API documentation where I created custom modules to group together my app's functionality and then load/reference them as it is outlined here under Step 4 (Load a custom module) in the Documentation. Is this method/practice still valid with the 4.x API or should I be doing this some other way? My app breaks when it hits the Require statement in my main JS file and attempts to reference the custom module. The error thrown provides zero detail as to the issue so I'm mystified as to why it's failing at that point. Steve
... View more
08-05-2024
08:52 AM
|
0
|
9
|
3916
|
|
POST
|
Thank you, that did it. Sometimes it gets confusing when you're learning and throw together several different code snippits in order to piece together an app. I'm a little leery about hard coding the height. When I didn't specify the height, it added the scrollbar but it would push other accordion items off the page because the accordion container had overflow hidden. Any thoughts on getting all this to play nice within the screen real estate? I have 6 accordion items and most of these will have content that needs scrolling. Coming from the 3.x world and Dojo, I like how that accordion panel behaves and just pushes any unopened accordion items to the bottom and utilizes the available vertical screen space allotted for the overall accordion widget.
... View more
08-01-2024
11:16 AM
|
0
|
0
|
2062
|
|
POST
|
For starters, you can highlight the area in the Imagery Map Feedback app to let ESRI know it should consider updating that area. Your deadline will likely come up before ESRI actually does anything. As Eugene mentions, you can see if any County or State agencies have any ortho resources that you could leverage to cover this. Short of these, you could consider purchasing an image through Sky-Fi. If they have an existing image in their collection, the turnaround on that is usually 24 hours. They do have an area minimum for ordering and it varies depending on image resolution but it's not that bad. I swear there was an announcement at the ESRI UC about integrating Sky-Fi's holdings into AGOL (likely as Premium content?) but I can't recall the specifics or find them with a quick search.
... View more
08-01-2024
10:57 AM
|
1
|
0
|
1479
|
|
POST
|
The content inside my accordion items are too long so they get cut off. How do I add scrollbars? In general, the CSS controlling that would be "overflow-y" but I haven't been able to figure out the correct CSS item to target inside Calcite to get this to work. Thanks! Steve
... View more
08-01-2024
10:38 AM
|
0
|
2
|
2086
|
My kudoed posts
| Title | Kudos | Posted |
|---|---|---|
| 1 | 12-04-2025 02:30 PM | |
| 3 | 11-13-2025 07:55 AM | |
| 1 | 09-11-2025 10:18 AM | |
| 1 | 09-11-2025 08:03 AM | |
| 1 | 08-13-2025 09:16 AM |
Activity Feed
- Kudoed More scale bar options for map series for NavaSheer. 12 hours ago
- Got a Kudo for Map Viewer - Date Filter (today/after today/Date Range). yesterday
- Posted Re: Cross-Street search tool on ArcGIS Experience Builder Questions. Friday
- Kudoed Re: Cross-Street search tool for JudithWammack. Friday
- Kudoed Re: Cross-Street search tool for JeffreyThompson2. Friday
- Kudoed Dynamically Buffer Feature Layer in Web Map for ZacharyKasson. Thursday
- Kudoed Clearly display the Feature Storage size for hosted items to users for PeterKnoop. Thursday
- Kudoed Allow an Arcade script to throw an Error for RomaHicks. Thursday
- Kudoed Enable Pixel Value Interrogation for Raster Layers in ArcGIS Experience Builder for RachelSinclair. Thursday
- Kudoed adding .kmz file using the Add Data widget in ExB for Bdillard. Thursday
- Got a Kudo for Hub Basic / Sites: Add Halo option for text. a week ago
- Kudoed Allow changing of centre point symbology in Near Me widget for HelenWhiteley_tfl. 2 weeks ago
- Got a Kudo for Re: ArcGIS Javascript API 3.x documentation. 3 weeks ago
- Got a Kudo for Map Viewer - Date Filter (today/after today/Date Range). 12-19-2025 06:24 AM
- Kudoed Connect ArcGIS Pro Directly to City Open Data Portals for MohammadAlattar. 12-18-2025 11:42 AM
- Kudoed Color code tabs for maps and tables so you know which is from which. for TomMagdaleno2. 12-11-2025 01:34 PM
- Got a Kudo for Map Viewer - Date Filter (today/after today/Date Range). 12-08-2025 09:40 AM
- Got a Kudo for Re: How to Re-Create Near Me Widget in Portal. 12-05-2025 05:18 AM
- Posted Re: How to Re-Create Near Me Widget in Portal on ArcGIS Enterprise Portal Questions. 12-04-2025 02:30 PM
- Got a Kudo for Re: Experience Builder for Portal Print Widget?. 12-02-2025 02:14 PM