Develop

Web Applications using ArcGIS API for JavaScript

Questions and Answers

1. What is the difference between building a map with an ArcGIS Web API and the map viewer? :
ArcGIS Web APIs and the map viewer are intended for building maps. Maps created with the
map viewer are targeted to a non-developer web audience, since no programming is required,
but the capabilities are limited.

The APIs, on the other hand, are intended for developers who want to build web apps. These
apps can be shared in the ArcGIS Online website, but they are created and viewed outside the
website. ArcGIS Web APIs are programming interfaces that allow you to add GIS capabilities and
map services to your web apps. For ArcGIS API for JavaScript a web server is required, the API
needs to be accessed over an htt:// rather than file://.

2. How to use a web map published on ArcGISOnline?
a. Obtain the Web Map ID, such as afe57755197c40a7aacf0ef370068ca0

b. Add the web map with webmapID
To obtain the Web Map ID of hosted layers, maps, and tiles that you have created you must first
sign in to your organization. Click on my content and view a listing of the maps, apps, tiles, and
layers that you have created and published. The Type column lists the type of content that you
have created. If you click on an item then you will be taken directly to a description page with a
description of the content and URL. Copy the URL and paste it directly in to your source code
when creating an app for the ArcGIS or mobile APIs.

Click on the item to be directed to description page.

Description page showing highlighted URL that can be copy and pasted to app source code.

Paste URL as a variable layer/new feature layer within ArcGIS Web API source code.

//ArcGIS Online feature service showing Homeless service agency types
var layer = new FeatureLayer("http://services2.arcgis.com/4XlTp6SwwtAtXgjj/arcgis/rest/services/HSA_

TEST2/FeatureServer/1", {
outFields: ["*"]
});
map.addLayer(layer);

3. How to use a web map published on an ArcGIS for Server?

The following link is a list of detailed instructions on saving and sharing your ArcMap as service
that can then be published to your desired GIS server:
http://resources.arcgis.com/en/help/main/10.1/index.html#//0154000003vt000000

Also read sharing your map in a web application: https://server.arcgis.com/en/server/latest/get-
started/windows/sharing-your-map-in-a-web-application.htm

a. Obtain the web map REST URL

b. Add the web map with REST URL

//The ID for the map from ArcGIS.com webmap = "e88fc77e54a844739a7a1c5affdc6c87"; //Enter a title,
if no title is specified, the webmap's title is used. title = "Retail Spending Potential"; //Enter
a subtitle, if not specified the ArcGIS.com web map's summary is used subtitle ="Downtown Seattle
and vicinity";

c. Add additional widgets: https://developers.arcgis.com/javascript/

4. What are the following terms and their relationships?
(https://developers.arcgis.com/javascript/jsapi/map-amd.html)

a. Map class: creates a container and required DOM structure so that the developer is able
to add layers, graphics, info windows, and other navigation. It is a template of the
methods and variables in a particular kind of object. A class contains real values instead
of variables. It is typically added using a DIV container. Classes can contain subclasses
and it creates a class hierarchy. Classes can also be packaged as modules that conform
to the AMD standards.


b. Instance: an instance is a realization of any object when using object oriented
programming. An instance can occur anytime a program is run. Instancing a class means
creating an object by referencing or returning to that class.

c. Element: an element is used to define the syntax and can represent both functions and
data. For example an element used in ArcGIS for API JavaScript is a variable (<var>),
which can be used to document programing tasks, concepts, and reference information.

d. Map Events
i. Load: the first layer has been added to the map
ii. Layers-add-result: all layers in a call to Map.addLayers() have been added
iii. Extent-change: the center x,y or level of detail of the map has changed
iv. Pan: the map is being panned
v. Resize: the map containers width or height has changed

e. Object: Object refers to an instance of a class that represents variables, functions, and
data structures. It is typically one item that is self contained and consists of data and
procedures such as shapes and pictures (basemap, or map features).

5. What are the following files and their relationships?

f.

HyperText Markup Language (*.html): HTML is a mark-up language that creates a basic
structure and wireframe composed of elements and attributes. HTML defines how
content such as headings, tables, and lists are viewed in a web browser.
Sample code: <div id = "footer></div>

g. JavaScript (*.js): JavaScript is a scripting language that adds behavior to a page such as
animation, interactivity, and functionality. Js targets HTML elements to interact with and
is then interpreted by the web browser.
Sample code: <script type="text/javascript">
var x = 5;
var y = 6;
var result = x + y;
</script>

h. Cascading Style Sheets (*.css): CSS allows you control over the formatting and layout of
your document. It interacts with the elements in HTML and can change the style, color,
size, and position of the elements. It is recommended to create a separate (external)
CSS document that can be referenced in the HTML index page.
Sample code: { p

line-height: 3;

color: red;

}
Sample external style sheet reference:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css"

>
</head>

6. How to use a widget?

i. What is a widget? : Widgets configure specific functionalities for maps and mapping
applications. Widget (Dojo uses the term dijit) is a self-contained piece of visual
functionality (class) that can be incorporated into ArcGIS API for JavaScript applications.

j.

What are the widgets available in the API?

vi. Bookmarks
vii. Analysis (geoprocessing, geometry service, etc.)
viii. Directions
ix. BasemapGallery
x. Geocoder
xi. Measurement
xii. HomeButton
xiii. LocateButton
xiv. Graphics
xv. Image layers
xvi. Popups and Info Windows
xvii. Query and Select

k. Where to find the built-in widgets? If the map was created using web app builder then
off-panel and in-panel widgets have been added to the map with a selected theme.
Many of the widgets have parameters that allow for configuration and customization.
l. Where to find widgets developed by others? : Widgets developed by others can be
found in the API Library (https://developers.arcgis.com/javascript/jssamples/).
m. What are the commonly used widgets?
I.
Attribute tableDisplays a tabular view of operational layers' attributes.
Currently, layers from map service, feature service and feature collection in the
map are supported.
II.
CoordinateDisplays coordinates in the current map projection when moving
the cursor on the map or in other coordinate systems by clicking the map.
III.
GeocoderEnables finding a location on the map.
IV.
Home ButtonClick to zoom to map's initial extent.
V.
My LocationDetects your physical location and zooms the map to it.
VI.
Overview MapShows the current spatial extent of the map display as a grey
rectangle relative to the entire spatial extent of the basemap service.
VII.
ScalebarDisplays a scalebar on the map.
VIII.
Splash--Displays content on the splash screen.
IX.
Swipe--Shows a portion of a layer or layers on top of a map.
X.
Time Slider--Visualizes content within a map that contains time-aware layers.
n. How to build my own widget? : https://developers.arcgis.com/web-appbuilder/
o. How to use a widget?
Sample code: Item selector that allows the user to search items of specified types.

require(['jimu/dijit/ItemSelector'],function(ItemSelector){

var itemSelector = new ItemSelector({

 portalUrl: "http://orgname.maps.arcgis.com",

itemTypes: ['Feature Service','Map Service']
}, srcNodeRef);... });

Custom Search Optimization widget showing Services near Washington Park and OTR

Basemap Toggle Widget showing the Downtown/banks area


7. How to use API libraries?
p. What are API libraries? : A set of pre-written APIs
q. Where to find API libraries? Recommended APIs for web apps can be found in the
ArcGIS API for JavaScript hosted by ESRI.
r. How to reference API libraries? Many developers and consumers of the API will use CDN
to reference the library but it can also be downloaded, or used in a web optimizer and
compact build (https://developers.arcgis.com/javascript/jshelp/intro_accessapi.html)
Sample code: <link rel="stylesheet"
href="http://js.arcgis.com/3.14/esri/css/esri.css">
<script src="http://js.arcgis.com/3.14/"></script>
s. How to use API libraries? The default strings of the API libraries can usually be
overridden so that the developer is able to create a new modified widget with the
strings specified.
Sample code: Simple Renderer API where the size, color and feature can all be edited.

// AMD
require([
"esri/symbols/SimpleMarkerSymbol",
"esri/renderers/SimpleRenderer",
"dojo/_base/Color", ...
], function(SimpleMarkerSymbol, SimpleRenderer, Color, ...) {
var symbol = new SimpleMarkerSymbol();
symbol.style = SimpleMarkerSymbol.STYLE_SQUARE;
symbol.setSize(8);
symbol.setColor(new Color([255,255,0,0.5]));
var renderer = new SimpleRenderer(symbol);
});

// legacy
var symbol = new esri.symbol.SimpleMarkerSymbol();
symbol.style = esri.symbol.SimpleMarkerSymbol.STYLE_SQUARE;
symbol.setSize(8); symbol.setColor(new dojo.Color([255,255,0,0.5]));
var renderer = new esri.renderer.SimpleRenderer(symbol);

8. What is the asynchronous module definition (AMD) syntax? : API that specifies mechanism for
defining modules so that the model and its dependencies can be asynchronously loaded. AMD
references local variables and is usually exposed through the require() and define() functions.
AMD-compliant modules allow for flexibility in how modules are named once they're loaded.
Since AMD does not use global identifiers, it is up to developers to name modules appropriately
in their code.

require(["dojo/dom", "dojo/domReady!"], function(dom){
dom.byId("helloworld").innerHTML = "Hello!";
});

9. How to use ArcGIS Online basemaps?

t. What are available basemaps?
xviii. satellite Imagery
xix. hybrid Imagery with Labels
xx. streets Streets
xxi. gray Light Gary Canvas
xxii. national-geographic National Geographic
xxiii. oceans Oceans
xxiv. topo Topographic
xxv. osm - OpenStreetMap
u. How to use a basemap? : basemaps need to be single-layer maps created with the map
viewer. If there is more than one basemap then the bottom layer will automatically
appear. To define the basemap, set basemapUrl= to the layer. If a basemap is not
defined, the default basemap will be the World Topographic basemap.

Sample code:

var map;
require(["esri/map", "dojo/domReady!"], function(Map) {
map = new Map("mapDiv", {
center: [-56.049, 38.485],
zoom: 3,
basemap: "streets"
});
});

10. How to use an ArcGIS Online service?
v. What are the ready-to-use services?
i.
Geosearch and Geocoding (World Geocoding Service)
ii.
Routing (Network Analysis Service)
iii.
Demographics and Lifestyle maps
iv.
Live Traffic Map
v.
Imagery (Landsat, MODIS< NAIP)
vi.
Elevation Layers
vii.
Live Feeds (winds, weather conditions, active hurricanes, and wildfires,)
w. How to use a service? : Within ArcGIS Online, you use ArcGIS Server web services as
layers for maps or you can add them as items to be shared with members of your
organization or the public.

11. What is an ArcGIS API for JavaScript Web Optimizer: jso.arcgis.com
x. What is it? : A web application that creates custom builds of the ArcGIS API for
JavaScript. It offers alternatives to the one size fits all build via the CDN.
y. Who needs it? : This is more beneficial for the development of smaller web applications
because it can reduce the number of http requests during a load time. Must have an
ArcGIS Online organization or ArcGIS for Developers account and JS API version 3.4 or
later.

z.

How to use it?

https://developers.arcgis.com/javascript/jshelp/inside_web_optimizer.html
Generate custom builds by uploading a zipped app, referencing a URL, uploading a
module list or creating a manual selection.

Figure shows the process of selecting modules creating a build and viewing the zipped
folder files (http://js.arcgis.com/o/rybackma53/MeganTestBuild/dojo/dojo.js).

12. What are the different layer types? https://developers.arcgis.com/net/store/guide/layer-

types.htm
a. Basemap: provisioned as a tiled map layer.
i.
Tiled layer: connected to cached map services, ArcGISTiledMapServiceLayer
ii.
Offline tiled layer: downloaded cache of tiles from the server to the clients
device, ArcGISLocalTiledLayer
b. Operational layer: provisioned as a feature service or dynamic map service.
iii.
Dynamic layer: can contain multiple layers rendered by the server each time
the request is made, ArcGISDynamicMapServiceLayer
iv.
Feature layer: display data from featured services online and offline,
ServiceFeatureTable, FeatureLayer, GeodatabaseFeatureTable, FeatureLayer
c. Graphics layer: used to display information not supported by the other types of layers
above typically based on user actions, GraphicsLayer.

13. How to add a layer
a. How to find the layer URL form ArcGIS Online? The URL always begins with
http://www.arcgis.com/home/webmap/viewer.html? And then includes specific
parameters such as webmap=8505192e747d440098523e9e64419710.
b.

URL highlighted in the above browser

c. How to find the layer URL form an ArcGIS for Server?
d. How to load a layer?
e. How to set up the characteristics of a layer?

14. How to set up map and layer spatial references?
a. What the rules for spatial references? : In the API, a spatial reference class represents a
coordinate system. It contains a coordinate system and helper methods to access and
use it. The spatial reference class is associated with several other API classes that need a
coordinate system to function.
b. How to call a spatial coordinate system? : To define a spatial reference you will use the
well-know ID (WKID) or a full text definition that supports Geographic Coordinate
Systems and Projected Coordinate Systems.

c. When and how to change the spatial reference of a map or a layer? : To use a projection
other than the service default, define esri.Maps spatial reference by specifying the
constructor option. When layers and maps are combined with different spatial
references then there can become disparities in the viewing and analysis of the data.
Spatial references can be referred to by a well-know ID (WKID).

15. How to set up the display of a web map?
a. Extent: if you include no extent information then the applications default extent will be
the initial extent of the map.
b. Center: center point of the map using latitude and longitudinal points on initial extent of
map.
c. Size: of varying graphics of the initial extent of map.
d. Zoom: the zoom level of the initial extent of map.

Sample code:

var map;

require([
"esri/map",
"esri/styles/size", "dojo/domReady!"], function(Map, esriStylesSize) {
map = new Map("map", {
basemap: "topo",
center: [-122.45, 37.75], // longitude, latitude
zoom: 13
});

16. How to create a Legend?

Sample code:

Var legendLayers =

arcgisUtils.getLegendLayers(response);

var legendDijit = new Legend({


map: map,


layerInfos: legendLayers

}, ui-legend);

legendDijit.startup();

17. How to print a web map? : Use a print dijit to create a print template for the users.

Sample code:

<script>
var app = {};
require([

 "esri/arcgis/utils", "esri/dijit/Print",
"esri/tasks/PrintTemplate", "esri/config",
"dojo/_base/array", "dojo/dom", "dojo/parser",
"dijit/layout/BorderContainer", "dijit/layout/ContentPane",
"dojo/domReady!"
], function(
arcgisUtils, Print,
PrintTemplate, esriConfig,
arrayUtils, dom, parser
) {
parser.parse();

app.webmapId = "8315cf7d20f0484e869c4791f70f4f15";
app.printUrl =
"http://sampleserver6.arcgisonline.com/arcgis/rest/services/Utilities/PrintingToo
ls/GPServer/Export%20Web%20Map%20Task";

esriConfig.defaults.io.proxyUrl = "/proxy/";

var webmap = arcgisUtils.createMap(app.webmapId, "map", {
mapOptions: {
center: [-85.673, 38.21],
zoom: 10
}
});
webmap.then(function(resp) {
app.mapInfo = resp.itemInfo.item;
app.map = resp.map;
createPrintDijit(app.mapInfo.title);
});

function createPrintDijit(printTitle) {
var layoutTemplate, templateNames, mapOnlyIndex, templates;

// create an array of objects that will be used to create print
templates
var layouts = [{
name: "Letter ANSI A Landscape",
label: "Landscape (PDF)",
format: "pdf",
options: {
legendLayers: [], // empty array means no legend
scalebarUnit: "Miles",
titleText: printTitle + ", Landscape PDF"
}
}, {
name: "Letter ANSI A Portrait",
label: "Portrait (Image)",
format: "jpg",
options: {
legendLayers: [],
scalebarUnit: "Miles",

 titleText: printTitle + ", Portrait JPG"

}
}];

// create the print templates
var templates = arrayUtils.map(layouts, function(lo) {
var t = new PrintTemplate();
t.layout = lo.name;
t.label = lo.label;
t.format = lo.format;
t.layoutOptions = lo.options;
return t;
});

app.printer = new Print({
map: app.map,
templates: templates,
url: app.printUrl
}, dom.byId("print_button"));
app.printer.startup();
}
});
</script>

18. How to query a layer? : When setting up a query task a user will provide input to the query
which could include selecting features on a map, selecting a value from a list, or entering a value
to search (https://developers.arcgis.com/javascript/jshelp/intro_querytask.html).

Sample code:

function executeQueryTask(population) {
//set query based on what user typed in for population;
query.where = "POP04 > " + population;

//execute query
queryTask.execute(query,showResults);
}

19. How to edit a layer? : Web based editing allows for a larger group to add to and improve your
data. APIs include widgets that help you add editing capabilities to your application
(https://developers.arcgis.com/javascript/jshelp/inside_editing.html).

Sample code:

require([
"esri/map", "esri/dijit/editing/AttachmentEditor", "dojo/dom", ...
], function(Map, AttachmentEditor, dom, ... ) {
var map = new Map( ... );
map.infoWindow.setContent("<div id='content' style='width:100%'></div>");
map.infoWindow.resize(350,275);
var attachmentEditor = new AttachmentEditor({}, dom.byId("content"));
attachmentEditor.startup();
...
});

20. How to display a layer?
SimpleRenderer- a render that uses one symbol only
UniqueValueRenderer- renderer symbolizes groups of graphics that have matching attributes
ClassBreaksRenderer- renderer that symbolizes each graphic based on the value of some


numeric attribute
DotDensityRender- provides the ability to create dot density visualizations on data
HeatMapRender- renders point data into a raster visualization that emphasizes areas of higher

density or weighted values
TemporalRenderer- provide time-based rendering of features in a feature layer
ScaleDependentRenderer- provides the capability to apply multiple scale-dependent renderers

to a layer
Feature layer renderer visualization properties

setColorInfo()-renders quantitative data with color ramp

setRotationInfo()

setSizeInfo()

setOpacityInfo

21. How to create a Popup? You can create popup windows by building info widows using the API.
Pop up windows can include formatted text, images, and charts
(https://developers.arcgis.com/javascript/jsapi/popup-amd.html).

Sample Code:
var template = new PopupTemplate({
title: "Boston Marathon 2013",
description: "{STATE_NAME}: {Percent_Fi} of starters finished",
fieldInfos: [{ //define field infos so we can specify an alias
fieldName: "Number_Ent",
label: "Entrants"
},{
fieldName: "Number_Sta",
label: "Starters"
},{
fieldName: "Number_Fin",
label: "Finishers"

 }],
mediaInfos:[{ //define the bar chart
caption: "",
type:"barchart",
value:{
theme: "Dollar",
fields:["Number_Ent","Number_Sta","Number_Fin"]
}
}]
});

22. How to change the display order of multiple layers?
Use urls= to include more than one layer. Separate layers with a comma. The map dispaly is based
on the last layer in the list or the slowest one to load. To define the operational layers that overlay
the basemap, use webmap=, layers=, url=, or urls=. If the layer is an item in the website, use layers=
so you get all the layer configurations. If the layer isn't in the website, use url= or urls=.

The layers= parameter accepts a single item ID or multiple item IDs. For multiple layers, use a
comma-separated list of IDs (&layers=<itemID>,<itemID>,<itemID>). For example:
http://www.arcgis.com/home/webmap/viewer.html?layers=a79a3e4dc55343b08543b1b6133bfb90
,a068913914cd4fecb302b9207a532d1a

23. Please include all the questions we want to answer for the homeless project.

Where will the maps/data be published? Trents server?

What is the relationship between the database and Trents server?
Who will have the privileges to update data? Public or administrators?