topic Re: AMD to ESM in Simplified Display a Map Example in ArcGIS JavaScript Maps SDK Questions

AMD to ESM in Simplified Display a Map Example

IfThenTim — Wed, 10 Nov 2021 01:43:07 GMT

Hello all! This is my first post beyond my introduction.

I thought it would be good to see if I could convert my JavaScript code for the Display a Map tutorial from AMD to ESM. When it didn't work, I made an even simpler version -- which still doesn't work. <g>

This is the AMD version that works as-expected:

require([ "esri/config", "esri/Map", "esri/views/MapView" ], function(esriConfig, Map, MapView) { esriConfig.apiKey = "not-my-actual-api-key"; // create basemap const map = new Map({ basemap: "arcgis-navigation" }); // set a map view const view = new MapView({ map: map, center: [-82.998794, 39.961176], // Columbus, Ohio 39.961176 / -82.998794 zoom: 9, container: "viewDiv" }); });

This is the ESM version that does not work:

import esriConfig from "@arcgis/core/config"; import Map from "@arcgis/core/Map"; import MapView from "@arcgis/core/views/MapView"; esriConfig.apiKey = "not-my-actual-api-key"; // create basemap const map = new Map({ basemap: "arcgis-navigation" }); // set a map view const view = new MapView({ map: map, center: [-82.998794, 39.961176], // Columbus, Ohio 39.961176 / -82.998794 zoom: 9, container: "viewDiv" });

Everything below the API code is the same, so I am supposing the trouble happens there or above. With that in mind, I was seeking an ESM example of config using the API key, but I could not find one. Also, I am supposing I shouldn't post my actual API key, so I removed that from both blocks of code.

What changes would fix the ESM code?

Re: AMD to ESM in Simplified Display a Map Example

ReneRubalcava — Mon, 08 Nov 2021 22:10:51 GMT

Is there a particular error with this sample? Are you using your API key from developers.arcgis.com?

Here's a video that walks through the steps.

Re: AMD to ESM in Simplified Display a Map Example

IfThenTim — Wed, 10 Nov 2021 01:38:29 GMT

Thank you for your reply and the link to the video. I learned a lot watching that video, but I was not able to resolve my problem or quickly/easily replicate the results of the video. I did notice some naming differences in loading config and the API key compared to what I was doing.

Given that using AMD eliminates all of the problems in my test example, it's practical enough for me to embrace that approach for the near term.

Re: AMD to ESM in Simplified Display a Map Example

shaylavi — Wed, 10 Nov 2021 03:20:11 GMT

You didn't provide enough details to understand your problem but I believe that if you'll follow closely the following tutorial, you won't have any issues -

https://developers.arcgis.com/javascript/latest/display-a-map/

Re: AMD to ESM in Simplified Display a Map Example

Sage — Thu, 11 Nov 2021 13:00:08 GMT

@IfThenTim ,

I was wondering if you installed the ES modules with npm?

npm install @arcgis/core

Otherwise you would need to change your import statements to use the ES modules CDN

import esriConfig from "https://js.arcgis.com/4.21/@arcgis/core/config.js"; import MapView from "https://js.arcgis.com/4.21/@arcgis/core/views/MapView.js"; import Map from "https://js.arcgis.com/4.21/@arcgis/core/Map.js";

I don't think this is explained in the tutorial, as it assumes you are using AMD, but it is described on the install and setup webpage: https://developers.arcgis.com/javascript/latest/install-and-set-up/

There are also some samples using ES modules available on GitHub: https://github.com/Esri/jsapi-resources/tree/master/esm-samples

If you intend to use the ES modules from CDN also make sure and change your script tag to be of type module

I hope this helps,

Sage

Re: AMD to ESM in Simplified Display a Map Example

IfThenTim — Mon, 15 Nov 2021 22:40:21 GMT

I was wondering if you installed the ES modules with npm?

That's a good question, but yes, I did install the ES Modules with npm.

Re: AMD to ESM in Simplified Display a Map Example

IfThenTim — Mon, 15 Nov 2021 22:52:06 GMT

To maybe bring some sort of closure to this: After doing the Display a Map tutorial, I tried to adapt it for Angular using ES modules. When that did not work, I thought I might simplify it for seeking support to bring it back to vanilla JS. But in reading/watching more video on my own, I think I have discovered that I lost the "bundler" functionality needed to use ES modules. And/or there may be other problems too. <g>

If I decide to ask for support on running something like the Display a Map exercise in Angular with ES modules, I will make a separate post for that. Thanks to all who attempted to assist me. I have a lot to learn.