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

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