Latest Contributions by SteveCole

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