Running local with separate files using the new CDN

AntonioMedrano

Hi there,

I've been teaching the Maps SDK for JS for a while now, but it's been a couple years since I last did so, and boy has a lot changed! I'm used to using the require([],()=>{}) function to bring in the modules that I'll be using, and running my files locally using separate html, javascript, and css files. This seems to no longer be supported by the API reference documentation. I think if I can get a basic web map working locally with separate files, I should be good to go. Any help is much appreciated!

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <title>Intro to MapView - Create a 2D map | Sample | ArcGIS Maps SDK for JavaScript 4.33</title>
    
    <!-- Load required JS SDK stylesheet, contains the CSS for various widgets and the map itself -->
    <link rel="stylesheet" type="text/css" href="https://js.arcgis.com/4.33/esri/themes/light/main.css">
    <!-- use a local stylesheet as well for the div containing the map -->
    <link rel="stylesheet" type="text/css" href="./style.css" />

    <!-- specify the JavaScript ArcGIS SDK -->
    <script src="https://js.arcgis.com/4.33/"></script>

    <!-- specify the local JavaScript file to load a web map into viewDiv -->
    <script type="module" src="./script.js"></script>

  <body>
    <div id="viewDiv"></div>
  </body>
</html>

// Load the Map and MapView modules
// require(["esri/Map", "esri/views/MapView"], (Map, MapView) => {
const [Map, MapView] = await $arcgis.import([
  "@arcgis/core/Map.js",
  "@arcgis/core/views/MapView.js",
]);

const myMap = new Map({
  basemap: "topo-vector",
});

const myView = new MapView({
  container: "viewDiv",
  map: myMap,
  zoom: 4,
  center: [15, 65], // longitude, latitude
});
//});

D_Atkins

When I run your files locally, I receive a CORS error (not too surprising). Rather than try and bypass that (you'd want to setup a 'local webhost'), it was just as easy to throw those files out on GitHub: I don't see any errors?

Intro to MapView - Create a 2D map | Sample | ArcGIS Maps SDK for JavaScript 4.33
https://daneatkins-github.github.io/DemoPage/index.html

Sage_Wall

Hi @AntonioMedrano

I would start making the transition to the map components API rather than creating the MapView programmatically. Something like this should work and easy to build from.

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CDN APP</title>
    <!-- Load Calcite Design System -->
    <script
      type="module"
      src="https://js.arcgis.com/calcite-components/3.2.1/calcite.esm.js"
    ></script>

    <!-- Load the JavaScript Maps SDK core API -->
    <link
      rel="stylesheet"
      href="https://js.arcgis.com/4.33/esri/themes/light/main.css"
    />
    <script src="https://js.arcgis.com/4.33/"></script>

    <!-- Load the JavaScript Maps SDK Map components or other component packages -->
    <script
      type="module"
      src="https://js.arcgis.com/4.33/map-components/"
    ></script>

    <!-- Load the styles.css file -->
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <arcgis-map item-id="237b9584339446a0b56317b5962a4971">
      <arcgis-zoom position="top-left"></arcgis-zoom>
      <arcgis-legend position="bottom-right"></arcgis-legend>
    </arcgis-map>

    <!-- Load the main.js file -->
    <script type="module" src="main.js"></script>
  </body>
</html>

main.js

const mapElement = document.querySelector("arcgis-map");

await mapElement.viewOnReady();
console.log("The map view is ready!");

styles.css

html,
body {
  height: 100%;
  margin: 0;
}

AntonioMedrano

Thanks for the reply! Unfortunately this gets a CORS error when run locally. I was taught that it was always good to separate your HTML, JS, and CSS, but I think the <script type="module" ...> seems to make that not work locally. For teaching absolute beginners, is it preferred now to just keep everything in one HTML file?

Sage_Wall

You're right, scripts seem to be blocked from local file paths due to a CORS error when you try to open the HTML file directly in a browser. It's now considered best practice to host your files on a local web server, and in many cases, it's necessary.

There are many options available, from using a full-fledged server like Apache or IIS to something more temporary. For quick local hosting, I find these options useful, they are not official esri recommendations or products:

Live Server for VS Code: This is a free extension that makes it easy to host your current directory. It also automatically refreshes the browser when you save your files. You can find it on the Visual Studio Marketplace.
http-server: This is a simple, zero-configuration command-line HTTP server that you can install via npm. You can find the package and installation instructions on the npm website.

Sage_Wall

You should also be able to host on github pages, but that's not ideal for development. This is the same app above hosted on github.

https://sagewall.github.io/cdn-app-template/

https://github.com/sagewall/cdn-app-template

Hope this helps 😀

JeffreyThompson2

https://developers.arcgis.com/javascript/latest/sample-code/intro-mapview/

ESRI is moving away from it, so maybe it's not the best choice for a new application, but the require() syntax is still valid as of 4.33.

GIS Developer
City of Arlington, Texas