ExtractData Dijit

502
6
Jump to solution
01-31-2018 02:18 PM
JohnCartwright3
New Contributor II

Hello All,

I'm having a little trouble getting the the ExtractData dijit ("esri/dijit/analysis/ExtractData") working using JSAPI 3.23.

...
var
extractData = new ExtractData({
    featureLayers: layers,
    map: map,
    analysisGpServer: "https://gisdev.ngdc.noaa.gov/arcgis/rest/services/extract/hazards_extract/GPServer"
}, "analysis-tool");
extractData.startup();
...

Besides the styling being incorrect, I'm getting an "Cannot read property 'indexOf' of undefined" error out of the dijit.

Can anyone provide me an example of how to set this dijit up?

Thanks!

--john

Tags (2)
0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Esteemed Contributor

Ken, I hope you don't mind me jumping in.

John, You issue is simple your app needs a dojo theme applied.

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
  <title>Simple Map</title>
  <link rel="stylesheet" href="https://js.arcgis.com/3.23/esri/css/esri.css">
  <link rel="stylesheet" href="https://js.arcgis.com/3.23/dijit/themes/claro/claro.css">

  <style>
    html,
    body,
    #map {
      height: 100%;
      margin: 0;
      padding: 0;
    }
  </style>
  <script src="https://js.arcgis.com/3.23/"></script>
  <script>
    var map;

    require([
      "dojo/on",
      "esri/config",
      "esri/map",
      "esri/layers/ArcGISDynamicMapServiceLayer",
      "esri/layers/FeatureLayer",
      "esri/dijit/analysis/ExtractData",
      "esri/geometry/Extent",
      "esri/tasks/Geoprocessor",
      "dojo/domReady!"
    ], function(on, esriConfig, Map, ArcGISDynamicMapServiceLayer, FeatureLayer, ExtractData, Extent, Geoprocessor) {
      esriConfig.defaults.io.corsEnabledServers.push('maps.ngdc.noaa.gov');
      esriConfig.defaults.io.corsEnabledServers.push('gis.ngdc.noaa.gov');
      esriConfig.defaults.io.corsEnabledServers.push('gisdev.ngdc.noaa.gov');

      var aoi = new Extent(-44, -9, -41, 0);
      console.log(aoi.toJson());

      map = new Map("map", {
        basemap: "topo", //For full list of pre-defined basemaps, navigate to http://arcg.is/1JVo6Wd
        center: [-122.45, 37.75], // longitude, latitude
        zoom: 6
      });

      var layer = new ArcGISDynamicMapServiceLayer(
        "https://gis.ngdc.noaa.gov/arcgis/rest/services/web_mercator/hazards/MapServer", {
          id: 'natural hazards'
        }
      );


      map.addLayer(layer);
      var layers = [
        new FeatureLayer("https://gisdev.ngdc.noaa.gov/arcgis/rest/services/extract/hazards_extract/MapServer/0", {
          id: 'Retrospective DART Deployments'
        }),
        new FeatureLayer("https://gisdev.ngdc.noaa.gov/arcgis/rest/services/extract/hazards_extract/MapServer/1", {
          id: 'Current DART Deployments'
        }),
        new FeatureLayer("https://gisdev.ngdc.noaa.gov/arcgis/rest/services/extract/hazards_extract/MapServer/2", {
          id: 'Volcano Locations'
        }),
        new FeatureLayer("https://gisdev.ngdc.noaa.gov/arcgis/rest/services/extract/hazards_extract/MapServer/3", {
          id: 'Signifigant Earthquakes'
        }),
        new FeatureLayer("https://gisdev.ngdc.noaa.gov/arcgis/rest/services/extract/hazards_extract/MapServer/4", {
          id: 'Tsunami Observations'
        }),
        new FeatureLayer("https://gisdev.ngdc.noaa.gov/arcgis/rest/services/extract/hazards_extract/MapServer/5", {
          id: 'Tsunami Events'
        })
      ];

      map.addLayers(layers);
      on(this.map, 'layers-add-result', function() {
        console.log('layers added');
        var extractData = new ExtractData({
          featureLayers: layers,
          map: map,
          analysisGpServer: "https://gisdev.ngdc.noaa.gov/arcgis/rest/services/extract/hazards_extract/GPServer"
        }, "analysis-tool");
        extractData.startup();
      });
      console.log('here');

    });
  </script>
</head>

<body class="claro">
  <div id="map"></div>
  <hr>
  <br>
  <div id="analysis-tool"></div>
</body>

</html>

View solution in original post

6 Replies
KenBuja
MVP Honored Contributor

Hi John,

Can you post more of your code, particularly the require/function section?

0 Kudos
JohnCartwright3
New Contributor II

Thanks for your interest Ken, I've put it into a Gist

I think I have the "indexOf" issue solved - wait for all layers to be added to the map - but the CSS is still broken and it appears to want me to log in.  Wondering if this dijit only works w/ Portal-hosted services?

--john

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

Ken, I hope you don't mind me jumping in.

John, You issue is simple your app needs a dojo theme applied.

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
  <title>Simple Map</title>
  <link rel="stylesheet" href="https://js.arcgis.com/3.23/esri/css/esri.css">
  <link rel="stylesheet" href="https://js.arcgis.com/3.23/dijit/themes/claro/claro.css">

  <style>
    html,
    body,
    #map {
      height: 100%;
      margin: 0;
      padding: 0;
    }
  </style>
  <script src="https://js.arcgis.com/3.23/"></script>
  <script>
    var map;

    require([
      "dojo/on",
      "esri/config",
      "esri/map",
      "esri/layers/ArcGISDynamicMapServiceLayer",
      "esri/layers/FeatureLayer",
      "esri/dijit/analysis/ExtractData",
      "esri/geometry/Extent",
      "esri/tasks/Geoprocessor",
      "dojo/domReady!"
    ], function(on, esriConfig, Map, ArcGISDynamicMapServiceLayer, FeatureLayer, ExtractData, Extent, Geoprocessor) {
      esriConfig.defaults.io.corsEnabledServers.push('maps.ngdc.noaa.gov');
      esriConfig.defaults.io.corsEnabledServers.push('gis.ngdc.noaa.gov');
      esriConfig.defaults.io.corsEnabledServers.push('gisdev.ngdc.noaa.gov');

      var aoi = new Extent(-44, -9, -41, 0);
      console.log(aoi.toJson());

      map = new Map("map", {
        basemap: "topo", //For full list of pre-defined basemaps, navigate to http://arcg.is/1JVo6Wd
        center: [-122.45, 37.75], // longitude, latitude
        zoom: 6
      });

      var layer = new ArcGISDynamicMapServiceLayer(
        "https://gis.ngdc.noaa.gov/arcgis/rest/services/web_mercator/hazards/MapServer", {
          id: 'natural hazards'
        }
      );


      map.addLayer(layer);
      var layers = [
        new FeatureLayer("https://gisdev.ngdc.noaa.gov/arcgis/rest/services/extract/hazards_extract/MapServer/0", {
          id: 'Retrospective DART Deployments'
        }),
        new FeatureLayer("https://gisdev.ngdc.noaa.gov/arcgis/rest/services/extract/hazards_extract/MapServer/1", {
          id: 'Current DART Deployments'
        }),
        new FeatureLayer("https://gisdev.ngdc.noaa.gov/arcgis/rest/services/extract/hazards_extract/MapServer/2", {
          id: 'Volcano Locations'
        }),
        new FeatureLayer("https://gisdev.ngdc.noaa.gov/arcgis/rest/services/extract/hazards_extract/MapServer/3", {
          id: 'Signifigant Earthquakes'
        }),
        new FeatureLayer("https://gisdev.ngdc.noaa.gov/arcgis/rest/services/extract/hazards_extract/MapServer/4", {
          id: 'Tsunami Observations'
        }),
        new FeatureLayer("https://gisdev.ngdc.noaa.gov/arcgis/rest/services/extract/hazards_extract/MapServer/5", {
          id: 'Tsunami Events'
        })
      ];

      map.addLayers(layers);
      on(this.map, 'layers-add-result', function() {
        console.log('layers added');
        var extractData = new ExtractData({
          featureLayers: layers,
          map: map,
          analysisGpServer: "https://gisdev.ngdc.noaa.gov/arcgis/rest/services/extract/hazards_extract/GPServer"
        }, "analysis-tool");
        extractData.startup();
      });
      console.log('here');

    });
  </script>
</head>

<body class="claro">
  <div id="map"></div>
  <hr>
  <br>
  <div id="analysis-tool"></div>
</body>

</html>

View solution in original post

JohnCartwright3
New Contributor II

Thanks Robert, that was definitely an oversight on my part and your suggestion gets the dialog to display properly. 

I'm now left with the question of why the dijit is requiring a login and not displaying the list of feature layers.  You don't have experience w/ this particular dijit do you?

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

Sorry can't say I do.

0 Kudos
GaneshSubbiah
Esri Contributor

Hi John,

Analysis Dijits/Widgets work against ArcGIS SPatial Analysis Service, In the sample here you are pointing to a custom Extract Data GP Task which is not supported.

Working with Analysis Widgets | Guide | ArcGIS API for JavaScript 3.24  

The Analysis Widgets provide access to the ArcGIS Spatial Analysis Service, which allows you to perform common spatial analyses on your hosted data, via the ArcGIS API for JavaScript. 

Hope this helps

Thanks and Regards

Ganesh Subbiah

0 Kudos