For an overview of this project from the perspective of a user, see the document "Using ArcGIS WebMaps in SAS Visual Analytics."

This project presents a web page with an ArcGIS map designed to serve as a data-driven content for reports built with SAS Visual Analytics. The majority of the code is a fork of jsapi-resources, Esri's template for JS apps. Uses DOJO and ArcGIS for JS 4.6.

A "copy:debug" task has been added to the normal build which will copy an ArcGISVisualizationBridgeCDN.html file into the "dist" directory. This file accomplishes the main tasks that the built application will do, without requiring a full build; however, it may not be as performant as the main application (served by index.html). (This file is composited manually, and it is not always up-to-date with the latest changes.)

The task also adds an .htaccess file, which, if configured, will allow an Apache server to cache the built project for a minute.

• npm run buildDebug - runs the build, leaving the uncompressed js in the dist directory.

Normal installation follows these steps:

• Download the project.
• Open a command-line context at the project directory.
• npm install
• npm run build
• Copy the built application from the dist directory to your web server's directory.

From SAS Visual Analytics, users can add a "Data-Driven Content" object to their report and set its "Web Content" url to the deployment directory. They can then use the supported query string arguments to customize the type and styling of the visualization layer in which the report data appears above the ArcGIS map.

Data-driven content aggregates report data. Keep this in mind when including location coordinate information, which is required for scatter and bubble plots. The default aggregation method for numeric columns is "sum", and summing coordinates (e.g, latitude and longitude) will produce values that cannot be geographically located. For these coordinate columns, either switch their aggregation type to something less disruptive (such as "average"), or take other steps to ensure that there is only one category value per location, so that no aggregation of their coordinates will occur. For instance, VA's "Geographic Items," when set to the data type "custom coordinates," protect against inappropriate aggregation, and their use is preferred.

A simple scatter plot layer:

http://<server>/ArcGisWebMapProvider/?visualizationType=scatter&useSampleData=true

A simple bubble plot layer:

http://<server>/ArcGisWebMapProvider/?visualizationType=bubble&x=Longitude&y=Latitude&color=Life%20expectancy%20at%20birth,%20total%20(years)&size=GDP%20(current%20US$)&useSampleData=true

A choropleth drawing countries and joining on "NAME":

http://<server>/ArcGisWebMapProvider/?visualizationType=choropleth&geoId=Geographic%20Item%201&color=GDP%20(current%20US$)&featureServiceUrl=https://services.arcgis.com/V6ZHFr6zdgNZuVG0/ArcGIS/rest/services/World_borders/FeatureServer&featureServiceGeoId=NAME&useSampleData=true

An "animated" scatter plot:

http://<server>/ArcGisWebMapProvider/?useSampleData=true&animation=Date

Other examples can be found in the file examples.html.

• World borders
• US states

Information about using data-driven visualizations in SAS Visual Analytics is found both at the repository supporting general third-party visualizations and at the post Programming Considerations for Data-Driven Visualizations.

At a high level, data-driven visualizations are HTML pages listening to the window's "message" event for data having a format similar to the following:

{
    data: {
        columns: [
            {name: "carColumnName", label: "car", type: "string"},
            {name: "priceColumnName", label: "price", type: "number"}
        ],
        data: [
            ["Ford", 1000],
            ["Toyota", 2000],
            ["BMW", 1500]
        ],
        resultName: "sasVAResultName",
        rowCount: 3
    }
}

See SampleData.json for a more complete example.

Use of Esri's ArcGIS SDK is subject to their licensing requirements.

Subsequent notes are from Esri's (dojo-based) build project.

This is a sample application showing how to use Bower to build your ArcGIS API for JavaScript application. It provides a Gruntfile for build scenario using Dojo.

• node & npm
• bower
• java 7 or greater - for Closure Compiler used during build

• npm install -g bower - installs bower
• npm install - installs required node and bower packages
• npm run clean - removes built files from dist directory
• npm run build - run the Dojo build on application

If you are interested in building the Sass files included in the Bower release of the API, please refer to this document.

We have also included a gulpfile if that is your build tool of choice. Just run gulp to start the build.

And just to demonstrate that it can be done, we've included a makefile so you can build the demo application using the make command.

If you have Python you can run python -m SimpleHTTPServer in same folder as application to run it in a browser.

For details on the Dojo build system, review the Dojo documentation.