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

require(["esri/map", "dojo/domReady!"],
  function(Map) { 
    var map = new Map("map", 
       { 
         center: [-118, 34.5], 
         zoom: 8, 
         basemap: "topo" 
       }
    ); 
});

<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

Example:

http://services.arcgis.com/uCXeTVveQzP4IIcx/ArcGIS/rest/services/Portland_TotalActivity/FeatureServer/0

Feature Layers

API Module:

"esri/layers/FeatureLayer"

Handles all communication

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("map", {
                center: [-122.6717, 45.5275],
                zoom: 14,
                basemap: "dark-gray"
            });

            var url = "http://services.arcgis.com/uCXeTVveQzP4IIcx/ArcGIS/" +
                    "rest/services/Portland_TotalActivity/FeatureServer/0";

            var featureLayer = new FeatureLayer(url, {
                id: "world-regions"
            });

            map.addLayer(featureLayer);
        }
);

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

github.com/esri

Hundreds of samples, templates, open source projects

JavaScript Resources

https://developers.arcgis.com/javascript

https://github.com/Esri/quickstart-map-js

https://github.com/Esri/esri-leaflet

https://github.com/Esri/quickstart-map-phonegap