javascriptdojoarcgisarcgis-js-api

Using Dojo with ArcGIS Map SDK for JavaScript 4.29

Error Screenshot Here, I want to use dojo in ArcGIS Api for JS , but it give me script error when i import dojo through cdn link. Added SS of the code and Error. I am using the ArcGIS Map SDK for Javascript with the version 4.29. When i include the dojo using the CDN link then it gives me the Script error as shown in the error Screenshot attached here.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Tutorial: Hello Dojo!</title>
    <link rel="stylesheet" href="https://js.arcgis.com/4.29/esri/themes/light/main.css">
     <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"
            data-dojo-config="async: true"></script>
</head>

<script src="https://js.arcgis.com/4.29/"></script>
<body>
    <script>
        require([
            "dojo/dom",
            "dojo/dom-construct",
            "esri/config",
            "esri/Map",
            "esri/views/MapView",
        ], function (dom, domConstruct, esriConfig, Map, MapView) {
            esriConfig.apiKey = "API KEY HERE ";

            const map = new Map({
                basemap: "arcgis/topographic"
            });

            const view = new MapView({
                container: "viewDiv",
                map: map,
                center: [-118.243683, 34.052234],
                zoom: 13
            });
        });
    </script>
    <h1 id="viewDiv"></h1>
</body>
</html>
Solution

  • The error you are getting is probably cause by the order of you library imports. You also need to specify what is the name dojo, if not it will try to search it on esri library.

    So,

    Example,

    <html lang="en">

<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<title>Using Dojo from CDN with ArcGIS Maps SDK for JavaScript 4.30</title>
<style>
    html,
    body,
    #viewDiv {
        padding: 0;
        margin: 0;
        height: 500px;
        width: 100%;
    }
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.30/esri/themes/light/main.css" />
<!-- i) declares names -->
<script>
    var dojoConfig = {
        baseUrl: "//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo",
        packages: [
            {
                name: "esri",
                location: "https://js.arcgis.com/4.30/esri"
            },
        ]
    };
</script>
<!--ii) import libraries -->
<script src="https://js.arcgis.com/4.30/"></script>
<!--iii) main-->
<script>
    require(
        ["dojo/dom", "dojo/dom-construct", "esri/Map", "esri/views/MapView"],
        (dom, domConstruct, Map, MapView) => {
        const map = new Map({
            basemap: "topo-vector"
        });

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

        const greetingNode = dom.byId('greeting');
        domConstruct.place('<em> Dojo!</em>', greetingNode);
    });
</script>
</head>

<body>
<h1 id="greeting">Hello</h1>
<div id="viewDiv"></div>
</body>

</html>

    EDIT: