
Text

ArcGIS API for JavaScript
Building custom mapping apps
Adding mapping functionality to existing apps
Extending ArcGIS Online templates
Esri WebApp Builder custom widgets
Custom mapping apps
Map-centric app
Non map-centric app with map
Geographic analysis data - no map
Geographic data with no map

Map-centric app

NON map-centric app

No map - geographic data only

ArcGIS API for JavaScript
<link rel="stylesheet"
href="http://js.arcgis.com/3.14/esri/css/esri.css">
<script src="http://js.arcgis.com/3.14/"></script>
Hello World Map
Feature Layers
Geospatial database in the cloud
Accessible via HTTP requests
Get, add, update or delete geospatial data

Feature Layers



Feature Layers


Feature Layers


Points, lines or polygons
Feature Layers

Feature Layers
API Module:
"esri/layers/FeatureLayer"
Handles all communication between app and the service
var featureLayer = new FeatureLayer("http://.../MapServer/2",{
mode: FeatureLayer.MODE_ONDEMAND,
outFields: ["*"],
infoTemplate: infoTemplate
});
map.addLayer(featureLayer);
Feature Layers
require([
"esri/map",
"esri/layers/FeatureLayer",
"dojo/domReady!"
], function(
Map,
FeatureLayer
) {
var map = new Map("mapDiv", {
basemap: "national-geographic",
center: [-84.1986, 34.0289],
zoom: 12
});
var url = "http://services.arcgis.com/uCXeTVveQzP4IIcx/ArcGIS/" +
"rest/services/POIJohnsCreek/FeatureServer/0";
var featureLayer = new FeatureLayer(url);
map.addLayer(featureLayer);
}
);
Feature Layers
ArcGIS Online Map
require([
"esri/map",
"esri/arcgis/utils",
"dojo/domReady!"
], function(Map, arcgisUtils){
arcgisUtils.createMap(<<Web Map Id>>, "mapDiv")
.then(function (response) {
map = response.map;
});
});
<link rel="stylesheet"
href="http://js.arcgis.com/3.14/esri/css/esri.css">
<script src="http://js.arcgis.com/3.14/"></script>
ArcGIS Online Map
Hundreds of samples, templates, open source projects

JavaScript Resources
Johns Creek Competition
By Andy G
Johns Creek Competition
- 2,078