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?
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.
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.
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/
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
<script type="module">
....
</script>
I hope this helps,
Sage
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.
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.