Getting started with ArcGIS API for JavaScript Chapter 10 Getting started with ArcGIS API for JavaScript Instructor These slides are for Getting to Know Web GIS, third edition (Esri Press 2018).

Chapter objectives Understand the basics of JavaScript API. Debug JavaScript. Adapt JavaScript samples. Develop 2D and 3D GIS apps using JavaScript. Handle JavaScript events. Use widgets. Use tasks. This chapter is long. It can be split into two meetings: One focuses on ArcGIS Online standard analysis tools. The other focuses on custom web tools (i.e. geoprocessing services) and big data tools (i.e. GeoAnalytics tools). Getting to Know Web GIS, third edition

ArcGIS Online / ArcGIS Enterprise Client apps Data sources ArcGIS Online / ArcGIS Enterprise Client apps CSV files Shapefiles KMLs File geodatabases Enterprise geodatabases Database management systems Imagery Drone images Sensor and real-time data Big data Layers in portal Feature layers Raster tile layers Vector tile layers Scene layers Dynamic map services Web tools/geoprocessing services Image services Stream services Geometry services Living Atlas of the World Server object extension Server object interceptor Feature layers Web maps/ scenes Scene layers ArcGIS API for JavaScript Ready-to-use apps and configuration templates Configurable app templates Story Maps Web AppBuilder Operations Dashboard Solutions apps Insights Collector, Survey123, Explorer, and Navigator Workforce AppStudio ArcGIS Earth ArcGIS Indoors viewers ArcGIS VR 360 ArcMap ArcGIS Pro Drone2Map CityEngine Click to add notes. Custom apps ArcGIS API for JavaScript ArcGIS Runtime SDKs ArcGIS API for Python Getting to Know Web GIS, third edition

Web GIS programming Client side Database server side GIS Server & Web server side SQL Stored procedures Triggers SQL Server Integration Services Oracle Data Integrator Java .NET Python … Java .NET PHP Python … Data exchange formats JSON XML … For browsers HTML/CSS/JavaScript For desktops and mobiles C/C++ Java Objective-C and Swift .NET Python … Click to add notes. Getting to Know Web GIS, third edition

Why learn JavaScript? The most widely used languages in the world today. Almost all web pages include some JavaScript code. A bridge between web browsers and web servers. Interacts with servers to use the servers’ capabilities. Works with web browsers to make web pages dynamic and interactive. Cross-platform (almost), no plugin is needed. Runs inside web browsers. Supports mobile platform well with HTML 5 and responsive web design. Relatively easy. Powerful (with the development of frameworks) Dojo, jQuery, Ext JS, d3.js, and Angular.js … JS is one of (or the) most used programming language in the world. The JS API is based on Dojo framework, and can work with other frameworks. **IDE is not even needed – you can start simple, only need a webserver & text editor like notepad. Getting to Know Web GIS, third edition 5

JavaScript, HTML, and CSS Behavior and user interaction You need to know all three: HTML: a markup language used to package your content CSS: a formatting language used to style content JavaScript: creates dynamic and interactive features for your web pages HTML Structure and content CSS Presentation and style Click to add notes. Getting to Know Web GIS, third edition

Tutorial demo Learn the basics of HTML, JavaScript, and CSS at http://www.w3schools.com Click to add notes. Getting to Know Web GIS, third edition

JSON (JavaScript Object Notation) A lightweight and easy to understand format for storing and exchanging data { "students": [{ "name": "John", "hobby": "Basketball", "address": { "street": "380 New York St", "zip": 92373 } }, { "name": "Lisa", "hobby": "Movie", "street": "270 State Ave", "zip": 92000 }] Syntax: Data is in field_name: value pairs Data is separated by commas Curly braces hold objects Square brackets hold arrays Click to add notes. Online resources Tutorial: http://www.w3schools.com/js/js_json_intro.asp Online validator: http://jsonlint.com Getting to Know Web GIS, third edition

ArcGIS API for JavaScript Click to add notes. Getting to Know Web GIS, third edition

ArcGIS API for JavaScript Provides a lightweight way to embed maps and tasks in web apps Built on top of HTML5 (HTML, JavaScript, and CSS) and Dojo Full integration with ArcGIS platform Interacts with servers to access mapping, querying, editing, and analysis functions Displays server responses in maps, views, pop-ups, charts, and other formats Interacts with users Cross browsers and cross devices Click to add notes. ArcGIS API for JavaScript Dojo Chrome Firefox Safari Internet Explorer Others Getting to Know Web GIS, third edition

Interacts with ArcGIS REST API Relies on ArcGIS REST API to interact with ArcGIS Online & ArcGIS Enterprise ArcGIS Online ArcGIS Enterprise ArcGIS REST API HTTP requests HTTP responses Click to add notes. ArcGIS API for JavaScript Dojo HTML, CSS, JavaScript Web browsers Getting to Know Web GIS, third edition

An example For example, the REST URL of the second layer (earthquakes) in a map service is https://services2.arcgis.com/No7KRrFgpO516cMP/arcgis/rest/services/NaturalDisasters/FeatureServer/1 The URL to query for earthquakes with magnitudes greater than 5 is https://services2.arcgis.com/No7KRrFgpO516cMP/arcgis/rest/services/NaturalDisasters/FeatureServer/1/query? where=MAGNITUDE%3E5&outFields=LOCATION%2CMAGNITUDE%2CYEAR&returnGeometry=true&f=pjson ArcGIS API for JavaScript Builds the URL for you, Sends the request to the server, and Handles the response Click to add notes. Getting to Know Web GIS, third edition

ArcGIS API for JavaScript website Click to add notes. https://developers.arcgis.com/javascript/ Getting to Know Web GIS, third edition

Main classes MapView SceneView Views Map WebScene Map/scene CSVLayer FeatureLayer GraphicsLayer SceneLayer StreamLayer ImageLayer MapImageLayer VectorTileLayer TileLayer Layers Tasks Portal QueryTask Portal IdentifyTask SimpleRenderer UniqueValueRenderer ClassBreaksRenderer Renders PortalUser PrintTask PortalItem SimpleMarkerSymbol PictureMarkerSymbol SimpleLineSymbol SimpleFillSymbol TextSymbol 2D symbols PointSymbol3D LineSymbol3D PolygonSymbol3D LabelSymbol3D 3D symbols RouteTask PortalQueryParams Click to add notes. Geoprocessor PortalQueryResult

Classes, objects, and constructors A class contains constructors that are invoked to create objects from the class blueprint. An object is an instance of a class. Syntax: var anObj = new aClassName(parameters); var map = new Map({ basemap: "streets" });   var view = new MapView({ container: "viewDiv", map: map var map = new Map({ basemap: "streets" });   var view = new SceneView({ container: "viewDiv", map: map Click to add notes. Getting to Know Web GIS, third edition

Properties Heading Position X, Y, Z fov (field of view in degrees) An object has properties Position X, Y, Z Heading Tilt fov (field of view in degrees) MapView map extent center rotation scale zoom … SceneView map center scale (at center) zoom (at center) camera viewingMode … heading tilt position fov … Click to add notes. Getting to Know Web GIS, third edition

Set and get properties objectName.propertyName or objectName.set("propertyName") objectName.get({"propertyName":value}) view.zoom = 6; var zoomLevel=view.zoom view.set({"zoom": 6}); var zoomLevel=view.get("zoom") Click to add notes. Getting to Know Web GIS, third edition

Methods Syntax objectName.methodName(parameters) Methods are the actions or functions that the objects of a class can perform Syntax objectName.methodName(parameters) Map add() findLayerById() remove() … Click to add notes. var featureLayer = new FeatureLayer({ url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/3" }); map.add(featureLayer); Getting to Know Web GIS, third edition

Events “Things" that happen to HTML elements. JavaScript can "react" on these events To monitor an object’s property change, use obj.watch(property, callback) mapView.watch("extent", function(response) { console.log("the response object is the new extent"); }); To handle the result of a task or a class, use promise obj.then(callback, errback) Click to add notes. queryTask.execute(parameters).then( function getResults(queryResult) { }, function getErrors(err) { } ); Getting to Know Web GIS, third edition

Steps using the API to build a basic map/scene app Reference the ArcGIS API for JavaScript. Load API modules needed for your functions. Create your map or scene. Create your 2D map view or 3D scene view. Define page content & the spaces (divs) to hold your maps and scene views. Style the page. Click to add notes. Read: https://developers.arcgis.com/javascript/latest/sample-code/get-started-mapview/index.html Getting to Know Web GIS, third edition

A 2D map view sample Demo: https://developers.arcgis.com/javascript/latest/sample-code/intro-mapview/index.html Click to add notes. Getting to Know Web GIS, third edition

A 3D scene view sample Demo: https://developers.arcgis.com/javascript/latest/sample-code/intro-sceneview/index.html Click to add notes. Getting to Know Web GIS, third edition

Load your layers manually Not recommended Use a web map or a web scene: Easy, with styles and pop-ups already configured Add layers manually: Your need to choose the right layer types CSVLayer FeatureLayer MapImageLayer TileLayer VectorTileLayer StreamLayer … Note several class names have changed. Getting to Know Web GIS, third edition

Load layers via web maps/scenes recommended Web map var webmap = new WebMap({ portalItem: { id: "f2e9b762544945f390ca4ac3671cfa72" } }); var view = new MapView({ map: webmap, container: "viewDiv" Advantages Already has layers added Already has layers configured styles pop-ups labels visible scale ranges Already has security configured Much easier than writing your own code to add and configure layers, and manage access to your map Web scene var scene = new WebScene({ portalItem: { id: "3a9976baef9240ab8645ee25c7e9c096" } }); var view = new SceneView({ map: scene, container: "viewDiv" Click to add notes. Getting to Know Web GIS, third edition

Adapting samples and combining samples Replace web map/scene id or layer URLs Replace attributes Replace field names with names for the new service(s) or layer(s) Replace the values of the related fields Replace related symbols To match the new feature layers and graphics Combining samples: Need to load the required modules for all samples More work to be done based on the specific situation Click to add notes. Getting to Know Web GIS, third edition

Widgets A widget is a self-contained component that you can easily incorporate into your JavaScript apps Examples: BasemapToggle Compass Legend Locate Popup Search Track …. Click to add notes. Getting to Know Web GIS, third edition

Steps to incorporate widgets (add to your view) Load the module(s) in the require function Insatiate the widget and define its properties var legend = new Legend({ view: view }); Add to your map/scene view with a position view.ui.add(legend, “top-right"); top-left top-right bottom-left bottom-right require([ "esri/widgets/Legend", … Click to add notes. https://developers.arcgis.com/javascript/latest/sample-code/sandbox/sandbox.html?sample=widgets-legend Getting to Know Web GIS, third edition

IDE (Integrated development environment) Ease your programming experience by providing Syntax highlighting IntelliSense: context-aware code-completion Simple IDEs: Sublime Text NotePad++ … Click to add notes. Getting to Know Web GIS, third edition

JavaScript debugging The process of finding and fixing the defects in code. Supported in most today’s web browsers. Press the F12 key to access the developer tools. Click to add notes. Getting to Know Web GIS, third edition

Tutorial demos Sample code for this demo is available at http://bit.ly/2DGlv0F Or find demos at ArcGIS Dev Labs: https://developers.arcgis.com/labs/browse/?topic=any&product=JavaScript Click to add notes. Getting to Know Web GIS, third edition

Tutorial Create several web apps for the following tasks: Display earthquakes and tectonic boundaries in 2D and 3D views. Link two views so that the 3D view will follow the 2D view as you pan, zoom, and rotate the 2D view. Add a widget. Add the query capability. System requirements: Chrome web browser. A JavaScript editor: e.g., NotePad++ or Sublime Text ArcGIS Online: Serving services. No accounts are needed. Click to add notes. Getting to Know Web GIS, third edition

Summary Built on top of JavaScript and Dojo framework, ArcGIS API for JavaScript provides libraries for you to develop custom web GIS apps. The API interacts with GIS servers via ArcGIS REST API. Server responses are typically in JSON format. The API has core classes corresponding to 2D/3D views, maps/scenes, various layers, renderers, symbols, portal, and various tasks. The steps to develop a basic app using the API include: reference the API, load required modules, create your map or scene, create the view, define the spaces (divs) to hold the view, and style the page. The steps to adapt a sample include: replace URLs (and portal item ids), replace attribute names (and values), and replace related symbols. Click to add notes. Getting to Know Web GIS, third edition

Assignment Develop a web app using JavaScript API Submit Requirements: Find a sample or multiple samples on the JavaScript API website or ArcGIS Dev Lab. Adapt the sample(s). Use a web map/scene or layers different from the original sample(s). Incorporate a task (query, geoprocessor, or other types). Incorporate a widget. Submit The URL of the original sample(s) with which you started. Your new source code. Click to add notes. Getting to Know Web GIS, third edition

Reading: Chapter 10, Getting to Know Web GIS, third edition Questions? Reading: Chapter 10, Getting to Know Web GIS, third edition Click to add notes. Getting to Know Web GIS, third edition