nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Using $arcgis.import() with self hosted SDK

NicolasGIS

Hello,

In my organization, I can't use the CDN for data privacy reasons.

I need to download the SDK and host it.

I like the coding style offered by $arcgis.import() rather than using AMD and find it really convenient but I found out that it is not defined in the SDK downloaded:

https://developers.arcgis.com/javascript/latest/sdk-downloads-and-archive/

It's true that it is always refereed that is it only available for application built with the CDN so I guess it is by design but I was wondering why not making it available there as well ?

More info on the official blog post: https://www.esri.com/arcgis-blog/products/js-api-arcgis/developers/future-proof-your-arcgis-javascript-app

Thanks for listening !

Nicolas

Find more posts tagged with

Accepted answers

RRubalcava

The download of the SDK should be the same as what is published to the CDN.

Test this out locally and was able to use $arcgis.import()

<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
  <title>
    Test app
  </title>
  <link rel="stylesheet"
    href="http://localhost/builds/arcgis_js_v50_core_api/javascript/5.0/esri/themes/light/main.css" />

  <script type="module" src="http://localhost/builds/arcgis_js_v50_core_api/javascript/5.0/core.js"></script>
  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>
  <script type="module">
    const [Map, MapView, Search] =
      await $arcgis.import([
        "@arcgis/core/Map.js",
        "@arcgis/core/views/MapView.js",
        "@arcgis/core/widgets/Search.js",
      ]);

    const map = new Map({
      basemap: "dark-gray-vector",
    });

    const view = new MapView({
      container: "viewDiv",
      map: map,
    });

    const search = new Search({
      view: view,
    });
    view.ui.add(search, "top-right");
  </script>
</head>

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

Only place it's not available is in the npm build.

All comments

NicolasGIS

All good @ReneRubalcava ! It works. Many thanks once again. Really happy to be able to leverage this functionnality.

NicolasGIS

Thanks for your quick reply @ReneRubalcava !

Happy to read it is possible ! I must have done something wrong in my setup then. My bad. I had $arcgis.import error though everything seemed loaded at first sight. Will try again and let you know.

By the way, it would be great to have a simple export button with all the components and core wired properly for a given SDK version. Downloading everything manually from npm is error prone !

RRubalcava

The download of the SDK should be the same as what is published to the CDN.

Test this out locally and was able to use $arcgis.import()

<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
  <title>
    Test app
  </title>
  <link rel="stylesheet"
    href="http://localhost/builds/arcgis_js_v50_core_api/javascript/5.0/esri/themes/light/main.css" />

  <script type="module" src="http://localhost/builds/arcgis_js_v50_core_api/javascript/5.0/core.js"></script>
  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>
  <script type="module">
    const [Map, MapView, Search] =
      await $arcgis.import([
        "@arcgis/core/Map.js",
        "@arcgis/core/views/MapView.js",
        "@arcgis/core/widgets/Search.js",
      ]);

    const map = new Map({
      basemap: "dark-gray-vector",
    });

    const view = new MapView({
      container: "viewDiv",
      map: map,
    });

    const search = new Search({
      view: view,
    });
    view.ui.add(search, "top-right");
  </script>
</head>

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

Only place it's not available is in the npm build.

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.