1

I am trying to use search functionality using downloaded ArcGIS JavaScript API v4.27. Here is my code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="initial-scale=1,maximum- 
  scale=1,user-scalable=no" />
  <title>Test local installation of ArcGIS Maps SDK for 
  JavaScript</title>
  <style>
    html,
    body,
    #viewDiv {
    padding: 0;
    margin: 0;
    height:100%;
    width: 100%;
    }
  </style>

  <!-- Load the ArcGIS CSS directly from the CDN -->
  <link rel="stylesheet" href="./esri/themes/light/main.css" />

  <!-- Load the ArcGIS SDK script directly from the CDN -->
  <script src="./init.js"></script>

      <script>
      require([
      "esri/config",
      "esri/Basemap",
      "esri/layers/TileLayer",
      "esri/Map",
      "esri/views/SceneView",
      "esri/widgets/Search" // Add the Search module 
       ], function (esriConfig,Basemap, TileLayer, Map, SceneView, 
       Search) {

       esriConfig.assetsPath ="/assets";

       const layer = new TileLayer({
        url: "https://services.arcgisonline.com/arcgis/rest/services/World_Street_Map/MapServer"
      });
      const customBasemap = new Basemap({
        baseLayers: [layer],
        title: "My Basemap"
      });
      const myMap = new Map({
        basemap: customBasemap
      });
      const view = new SceneView({
        container: "viewDiv",
        map: myMap
      });

      // Add a Search widget to the view's UI
      const search = new Search({
        view: view
      });
      view.ui.add(search, "top-right");

    });
  </script>
</head>

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

I am getting this error:

Using ArcGIS Maps SDK for JavaScript 4.27 [Date: 20230626, Revision: b81703b4] [esri.widgets.Attribution] widget-intl:locale-error esri.widgets.Attribution q {name: 'intl:message-bundle-error', details: {…}, message: 'Errors occurred while loading "esri/widgets/Attribution/t9n/Attribution"'} [esri.widgets.Zoom] widget-intl:locale-error esri.widgets.Zoom q {name: 'intl:message-bundle-error', details: {…}, message: 'Errors occurred while loading "esri/widgets/Zoom/t9n/Zoom"'} [esri.widgets.NavigationToggle] widget-intl:locale-error esri.widgets.NavigationToggle q {name: 'intl:message-bundle-error', details: {…}, message: 'Errors occurred while loading "esri/widgets/NavigationToggle/t9n/NavigationToggle"'} [esri.widgets.Compass] widget-intl:locale-error esri.widgets.Compass q {name: 'intl:message-bundle-error', details: {…}, message: 'Errors occurred while loading "esri/widgets/Compass/t9n/Compass"'} [esri.widgets.Search] widget-intl:locale-error esri.widgets.Search q {name: 'intl:message-bundle-error', details: {…}, message: 'Errors

...

(d:\Rakesh\arcgis_js_v427_api\arcgis_js_v427_api\arcgis_js_api\javascript\4.27\init.js:1717:169) at a.when (d:\Rakesh\arcgis_js_v427_api\arcgis_js_v427_api\arcgis_js_api\javascript\4.27\init.js:2638:266) [esri.views.3d.environment.Stars] q {name: 'request:server', details: {…}, message: 'Failed to fetch'}

undefined.(d:\Rakesh\arcgis_js_v427_api\arcgis_js_v427_api\arcgis_js_api\javascript\4.27\init.js:1717:82) at t

What is the reason for the error and the fix?

Improve this question
2
  • Welcome to GIS SE. Providing the error mesage is not enough, kindly give more context to your problem.
    – Padmanabha
    Commented Aug 24, 2023 at 7:24
  • I updated it with code
    – Priyansh Garg
    Commented Aug 24, 2023 at 9:13

2 Answers 2

Reset to default
0

Remove the line about

esriConfig.assetsPath ="/assets";

That property is only for use with NPM packages. If you downloaded the API library zip file from https://developers.arcgis.com/downloads/, then you SHOULD NOT set this variable.

Improve this answer
2
  • Even then it is producing same error.
    – Priyansh Garg
    Commented Aug 25, 2023 at 4:19
  • Issue solved folder placing was incorrect
    – Priyansh Garg
    Commented Aug 25, 2023 at 7:26
0

It's hard to say why it doesn't work for you since you are getting libraries and assets from local path.

The below code works for me without any problems:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Linked Maps Example</title>
  <!-- Include ESRI JavaScript API -->
  <link rel="stylesheet" href="https://js.arcgis.com/4.23/esri/themes/light/main.css">
  <script src="https://js.arcgis.com/4.23/"></script>
  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height:100%;
      width: 100%;
    }
  </style>
</head>
<body>
  <div id="viewDiv"></div>
  <script>
    require([
      "esri/config",
      "esri/Basemap",
      "esri/layers/TileLayer",
      "esri/Map",
      "esri/views/SceneView",
      "esri/widgets/Search"
    ],
    function (esriConfig,Basemap, TileLayer, Map, SceneView, Search) {
//      esriConfig.assetsPath ="/assets"; 
      const layer = new TileLayer({
        url: "https://services.arcgisonline.com/arcgis/rest/services/World_Street_Map/MapServer"
      });
      const customBasemap = new Basemap({
        baseLayers: [layer],
        title: "My Basemap"
      });
      const myMap = new Map({
        basemap: customBasemap
      });
      const view = new SceneView({
        container: "viewDiv",
        map: myMap
      });    
      const search = new Search({
        view: view
      });
      view.ui.add(search, "top-right");
    }
  );
  </script>
</body>
</html>

Here is a sample of search with the above code:

enter image description here

Is seems there's something wrong with your local install of ArcGIS JavaScript API library.

UPDATE:
It worked for me also with local install of ArcGIS JS library. I installed it on subdirectory api/4.27 of my app on IIS server and referenced it like this:

<link rel="stylesheet" href="api/4.27/esri/themes/light/main.css" />
<script src="api/4.27/init.js"></script>

Did you successfully run test index.html from the installed library after installation?

Improve this answer
1
  • Try this code by downloading arcgis javascript api 4.27. It is working with online links but not with the offline package.
    – Priyansh Garg
    Commented Aug 25, 2023 at 4:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.