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

Points, lines or polygons

Feature Layers

Example:

http://services.arcgis.com/RkjCp6A0cLN4ubJm/arcgis/rest/services/Enriched Travel from POIJohnsCreek (5 Minutes)/FeatureServer/0

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

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