Data

What kinds of Data?

* JSON, KML, Shapefile, CSV etc..

* Live streams, twitter, crowdsource data

Analysis Tools

Summarize Data

Find Locations

Manage Data

Use Proximity

Analyze Patterns

Data Enrichment

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