Gecng Started with the ArcGIS Server JavaScript API
Ge#ng Started with the ArcGIS Server JavaScript API E-‐Learning for the GIS Professional – Any Time, Any Place! geospaCaltraining.com
Lesson 1: IntroducCon E-‐Learning for the GIS Professional – Any Time, Any Place! geospaCaltraining.com
Lesson Agenda • In this lesson you will learn about: – ArcGIS Server overview – The ArcGIS Server Services Directory – The proxy page and CORS – The Dojo framework
3
ArcGIS Server Overview
4
What is ArcGIS Server? • PlaSorm for sharing GIS resources • Shareable Resources – Maps, globes, address locators, geodatabases, tools
• Can be shared within your organizaCon or externally – Intranet web mapping applicaCons – Through ArcGIS Desktop – Mobile applicaCons
• Out-‐of-‐the-‐box applicaCons and services • Rich developer opportuniCes
ArcGIS Server Architecture
Image courtesy of ESRI
Why Use ArcGIS Server? • Data is centrally managed • MulC-‐user support • Data always up to date • Out of the box client tools for consuming services • Web development plaSorm for custom applicaCons
GIS Services • Central concept to ArcGIS Server • ArcGIS Server provides GIS services – Many types of GIS services • Map, Geoprocessing, Locator, Globe, Image • Each performs a specific task
• GIS Services consumed by clients – Web – Desktop – Mobile
Types of Services Clients consume GIS services Map
Image
Globe
Geocode
ArcGIS Server
Geoprocessing
Geometry
Geodata
Services Covered in this Course
• We will access several service types through the ArcGIS Server JavaScript API in this course Map
– Map service Image
Geocode
– Geocode service – Geometry Service – Geoprocessing Service
ArcGIS Server Globe
Geodata
Geoprocessing
Geometry
How Services are Consumed • Services provided by ArcGIS Server are consumed or used by various client applicaCons – Web clients
– Desktop clients • ArcGIS Desktop • ArcGIS Explorer
– Mobile clients
Map Services • Most common type of ArcGIS service • Support – Map viewing – Modeling and geoprocessing – Mobile GIS services – Open publishing such as OGC WMS, OGC WCS, KML
• Create a map document (.mxd) in ArcMap and publish through ArcCatalog – Map design very important
Arcmap (.mxd)
ArcCatalog
ArcGIS Server
Client Application * Web Based * Desktop ArcGIS
Map Services
Created in ArcMap as .mxd file
Published with ArcCatalog
Clients
ArcGIS Server Hosted by ArcGIS Server
Geocode Service • Primarily used to assign geographic coordinates to addresses • Can also perform reverse geocoding (find the nearest address to a point) • Requires creaCon of address locator in ArcGIS Desktop (ArcCatalog) – Locator contains data necessary to perform geocoding – Use Manager to publish the locator as a geocode service
Geometry Service • Performs geometric operaCons – Buffer – Feature simplificaCon – CalculaCon of areas and lengths – Data projecCon
• Works behind the scenes and is only visible to server administrators and developers – Service must be named Geometry
Geoprocessing Service • Contains geoprocessing tasks accessible by web-‐enabled clients • Created by publishing geoprocessing models and script tools • Asynchronous or Synchronous
ArcGIS Server Services Directory
17
How to Read Services Directory • Helps you discover informaCon about services on a parCcular ArcGIS Server instance • Gives a list of available services and properCes – Map extent, spaCal reference, supported operaCons – Layer names, ids, fields
• Need to know the URL of the server instance – Normally in web server’s root directory as “arcgis” • In “rest” folder
– Example hfp://sampleserver1.arcgisonline.com/arcgis/rest/services
DemonstraDon: Reading the Services Directory • Instructor demonstraCon of the services directory hfps://s3.amazonaws.com/GST_ELearning_Courses/Web20Mapping/Programming%20the%20ArcGIS%20Server%20JavaScript%20API/Demos/ JavaScriptAPI_Nine_demo/JavaScriptAPI_Nine_demo.htm
Exercise • Please complete the following exercise: – Exercise 1-‐1: Exploring the ArcGIS Server “Services” Directory
20
Using the Proxy Page
21
What is a Proxy Page? • Handles communicaCon between ArcGIS Server Services and your applicaCon • Server-‐side code that resides on your Web Server • Browser sends a request to the proxy and proxy forwards the request to the ArcGIS Server Services
Web App
Proxy Page
ArcGIS Server Service
22
Cross Domain Issues and CORS
• CORS: – Lets the web server and browser decide between them if a parCcular resource should be allowed. – Only works when both the browser and target web server support CORS
Your web app
GET /yourApp.html
XML HttpRequest
• You need to use a proxy page if the resource you are trying to access is on a different domain than your applicaCon and CORS (Cross Origin Resource Sharing) is not available).
Your web server
Another web server
• ArcGIS Server v 10.1 supports CORS out of the box • Older versions support CORS, but it must be enabled by an administrator: see here. 23
When to use a Proxy Page
1. ApplicaCon creates requests that exceed 2048 characters • Performs a POST • Buffers, spaCal references using WKT
2. ApplicaCon uses a services secured with token-‐based authenCcaCon • User can’t view token • Don’t want to transmit token
3. ApplicaCon performs ediCng 24
Proxy Page InstallaDon and ConfiguraDon
Step 1
• Download and configure proxy page for your server • ASP.NET, PHP, Java/JSP
Step 2
• Add code to your applicaCon to enable use of proxy
Step 3
• Secure web applicaCon • Tokens
Step 4
• Test your applicaCon
Detailed information on proxy page installation and configuration 25
Coding Your ApplicaDon to Use a Proxy Page • Requires only a couple lines of code – Need to provide the Url to the proxy page – ‘alwaysUseProxy’ can be set to true or false • Unless using tokens you can set this to false
26
IntroducDon to Dojo
27
What is Dojo? Dojo is a unified JavaScript toolkit for building beauCful and funcConal web and mobile applicaCons: • Standardizes development across different plaSorms and browsers • Provides rich UI widgets (calendars, 3D carousel, etc.) • Suitable for business apps: grids, charts, forms and data management • Is free and open source • Included in the ArcGIS Server API for JavaScript 28
IntroducDon to Dojo
core
uCl
Dojo
dijit
dojox 29
Dojo Projects
core
dijit
dojox
uCl
dojo – Sometimes referred to as "core", this is the foundation for all three projects. Handles browser normalization, fixes browser compatibilities, DOM querying, remote scripting, drag and drop, data store API, localization and internationalization, cookie handling, accessibility, more dijit – Dojo framework and dozens of HTML user interface widgets. Claro, Tundra, Soria and Nihilo CSS themes for integration into your web site design. Themes: http://dojotoolkit.org/reference-guide/1.10/dijit/themes.html dojoX – Dojo extensions and advanced projects such as the grid widget, graphics library, charting, image handling and more. util – Items that support the rest of the toolkit, including tools for building, testing and documenting code. 30
Dijits • User interface components • Can be extended to build custom GIS specific dijits • DocumentaCon: hfp://dojotoolkit.org/reference-‐guide/1.10/dijit/index.html
31
DojoX • You can take full advantage of the enCre Dojo toolkit – Not limited to just those exposed by the ArcGIS JavaScript API
• Dojo extensions
Photo Slideshows
Grids Charts
32
Dojo and ArcGIS JavaScript API
• What does Dojo have to do with ArcGIS JavaScript API? – ArcGIS JavaScript API built on top of Dojo – Dojo handles core funcConality and browser differences – Dojo always in use with the ArcGIS Server JavaScript API
Dojo
ESRI
ArcGIS JavaScript API
33
Dojo + ArcGIS Server Architecture • How do you get Dojo? – ArcGIS Server built on top of Dojo
• Architecture
34
Referencing the API • Reference to ArcGIS Server API for JavaScript is always done inside tags.
– Hosted by ArcGIS Online
• The reference to the API also loads the Dojo Toolkit.
35
Referencing the API • Delivered via a content delivery network (CDN). CDN's are a collecCon of geographically distributed web servers that deliver content efficiently. • The servers are load balanced and monitored 24/7 • No need to download and re-‐install the API when new versions are released. You just need to modify the script tag in your applicaCon to point to the new version.
36
Referencing the ESRI Stylesheet (CSS) • Must reference the Esri stylesheet – esri.css
• Reference the CSS file In secCon, before the API download link
37
The OpDonal Dojo Stylesheet • Can opConally include a Dojo Dijit stylesheet • Used to theme user interface widgets you add to the applicaCon
Tundra Soria Nihilo Claro Custom
38
Dojo Stylesheet Examples Claro
Nihilo
Soria
Tundra
Courtesy Dojo Toolkit Reference Guide
39
AMD Dojo
AMD
• New • Asynchronous Module DefiniCon • Dojo 1.7 and above • ArcGIS JavaScript API 3.4+ • Use to write new apps 40
ImporDng ArcGIS Server Resources -‐ AMD • Uses a require() funcCon – Accepts an array of modules and a funcCon as parameters
require(["esri/map", ... ], function(Map, ... ){ ... });
41
Preferred Arguments for AMD
ESRI Preferred Argument List Dojo Preferred Argument List
42
Common ArcGIS Server Resources Resources
Use for:
esri/Map
Map, geometry, graphics, and symbols
esri/layers/ ArcGISDynamicMapServiceLayer
ArcGISDynamicMapServiceLayer
esri/layers/ ArcGISTiledMapServiceLayer
ArcGISTiledMapServiceLayer
esri/tasks/Find
Find task
esri/tasks/Geometry
Geometry task
esri/tasks/Geoprocessor
Geoprocessing task
esri/tasks/IdenCfy
IdenCfy task
esri/tasks/Locator
Locator task
esri/tasks/Query
Query task
esri/toolbars/Draw
Draw
esri/toolbars/NavigaCon
NavigaCon
43
Page Load • ready() funcCon • Runs ayer the DOM and modules have loaded – Don’t want to afempt to access a DOM node before it has loaded
• Run inside the require() funcCon
• Can also use dojo/domReady!
44
Referencing the Dojo Style Sheet • Reference the style sheet in the body of your web page • Typically in tag, but can be in other tags such as – Themes are designed to be applied to any arbitrary element
• Style sheet then applied to addiConal elements such as Dijits and DojoX
45
Events
46
What are Events? • Events are acCons that take place within an applicaCon – Map clicks, mouse drags (panning), keyboard acCons, component modificaCon (resizing), network traffic (sending, receiving data), and others
• on() used to connect an event with a handler • Event handlers respond to the events – JavaScript funcCon executes
• Mouse
Event click Occurs • Keyboard
interacCon
Listener
Connects an event to a handler
Runs in
Handler response to the event
47
Event Handling • Events are acCons that take place in an applicaCon – Map clicks, mouse drags, keyboard events, applicaCon iniCated events
• JavaScript funcCons can be wrifen to respond to these events – Example: Display the geographic coordinates of a map click
• Use the dojo/on module
48
ConnecDng Events to Handlers with Dojo on() • Events registered to handlers through dojo on() method • Example: – dojo on() takes three parameters
• First two idenCfy the object and event that will be registered • Last parameter specifies the handler that is triggered when the event occurs • Map click event triggers a JavaScript funcCon called displayCoordinates 49
ConnecDng MulDple Events to a Single Handler • In v3.9 of the API and above, one handler can deal with mulCple events – List each event a handler must handle as a comma-‐separated string:
50
Should I Handle All Events? • Not necessary to write code for all events – Only those necessary for your applicaCon – What happens when an event occurs for which you haven’t wrifen a handler? • Nothing. Event is ignored in your applicaCon
51
What Browser to Use?
52
What Browser Should You Use? • Short answer: – Firefox or Chrome – Both have built in tool for developers
• Internet Explorer is improving in recent versions, but Firefox and Chrome sCll offer the best experience for developers. • Test your applicaCon in all popular browsers.
53
Exercise • Please complete the following exercise: – Exercise 1-‐2: CreaCng Your First ArcGIS Server JavaScript ApplicaCon
54
Lesson 2: CreaCng a Map and Adding Layers E-‐Learning for the GIS Professional – Any Time, Any Place! geospaCaltraining.com
Lesson Agenda • In this lesson you will learn about: – CreaCng a map – Working with Dynamic and Tiled map service layers
56
The Map Object
57
CreaDng a Map • Add reference to the resource – esri/Map
• Use constructor – Only the ID is required • Specifies the container for the map
– OpCons defined as JSON object and include • Center the map • Zoom scale • Basemap • Graphic display during panning • Others 58
Map Constructor OpDons • OpCons are the second parameter in the Map constructor – JSON object
• Enclosed within { } • Each opCon should be named and followed by a colon • MulCple opCons separated by commas • Example:
Center the map
Options defined within { }
Set basemap Map scale
Turn off pan buttons
59
Map Constructor OpDons • Using a MapOpCons constructor in the map is more efficient (requires less code) • OpCons include: – basemap – ArcGIS.com basemap can include “streets”,”satellite”,”hybrid”,”topo”,”gray”,”oceans”,”naConal-‐geographic”,”osm” – center – zoom –starCng zoom level of the map – minZoom – maxZoom – wraparound180
60
Map Constructor OpDons extent nav displayGraphicsOnPan showInfoWindowOnClick slider
• Sets the iniCal map extent
• Displays pan bufons on the map
• When true, graphics are displayed during panning. When false, graphics turned off. Se#ng to false can improve performance • Used to display an InfoWindow if a graphic has a defined InfoTemplate when the user clicks on the graphic
• Displays the zoom slider
61
Tiled and Dynamic Map Service Layers
62
Working with Layers
• Types of Layers – ArcGISDynamicMapServiceLayer • Works with a map service exposed by ArcGIS Server • Generates map images on the fly – ArcGISTiledMapServiceLayer • A cached map service exposed by ArcGIS Server • Accesses Cles from a cache instead of dynamically rendering images – Improved performance
63
ArcGISDynamicMapServiceLayer • Refers to a map service exposed by ArcGIS Server • Maps created dynamically • Constructor
• url = URL to ArcGIS Server map service • opCons? – id = ID to assign to the layer – opacity = transparency of layer – visible = iniCal visibility of layer (true = visible)
• Example 64
ArcGISDynamicMapServiceLayer • Consists of 1 or more layers • Each layer occupies an index – Census Block Points (0)
• ArcGISDynamicMapServiceLayer – Provides a reference to all layers
65
What can you do with ArcGISDynamicMapServiceLayer? • Using Dynamic map services you can – Create maps – Query data from layers in the service – Set layer definiCons – Control layer visibility – Time related informaCon – Export map as an image – Control transparency
66
ArcGISDynamicMapServiceLayer: Adding the Service to a Map • Ayer creaCng an instance of ArcGISDynamicMapServiceLayer you need to add the service to the map – This also applies to ArcGISTiledMapServiceLayer
• Call Map.addLayer(layer, index?) or Map.addLayers(layers)
67
ArcGISDynamicMapServiceLayer: Applying a DefiniDon Expression • Use setLayerDefiniCons(layerDefiniCons) method to control layer visibility – Only features meeCng the layer definiCon will be displayed – layerDefiniCons parameter is an array of definiCons containing SQL queries – Access and set each layer through a numeric index
• Example:
68
ArcGISDynamicMapServiceLayer: Controlling Layer Visibility • Use setVisibleLayers(ids) method to control layer visibility • Example: dynamicMS.setVisibleLayers([0,2,3]) –
setVisibleLayers takes an array of integers corresponding to the data layers in the map service
–
Zero based array so 0 is the first layer in the map service
69
ArcGISDynamicMapServiceLayer: Querying Data • Can also query data from layers in ArcGISDynamicMapServiceLayer • Accomplished through the Query and QueryTask objects • Covered extensively later in the course
70
ArcGISTiledMapServiceLayer • Works with cached map services exposed by ArcGIS Server – Performance can be improved with this type map service layer
• Constructor • url = URL to ArcGIS Server map service • opCons? – id = ID to assign to the layer – opacity = transparency of layer – visible = iniCal visibility of layer (true = visible)
• Example
71
What can you do with ArcGISTiledMapServiceLayer? • These services used primarily for display of data • Can also – Control display levels • Example: – Want to display generalized interstates, highways at levels 0-‐6 – As user zooms to levels 7 and higher you want to display more specialized street data • Use displayLevels in opCons
– Set transparency of the layer
72
Exercise
• Please complete the following exercise: – Exercise 2-‐1: CreaCng a Map Using a Default Basemap and Adding Layers
73
Lesson 3: Graphics and Graphic Layers E-‐Learning for the GIS Professional – Any Time, Any Place! geospaCaltraining.com
Lesson Agenda • In this lesson you will learn about: – Adding graphics to the map – Symbolizing graphics – The Graphics Layer – The InfoWindow
75
Adding Graphics to the Map
76
What are Graphics? • Points, lines, or polygons drawn on top of the exisCng map layers • Created by the user or applicaCon • Graphic is a container for four things (opConal) – Geometry • Where the graphic is located
– Symbol • How the graphic looks
– Afributes • Name-‐value pairs that describe the graphic
– Info Template • Defines the format of the InfoWindow that appears when a graphic is clicked
• Graphics stored in a GraphicsLayer 77
How to Add a Graphic to the Map
• Graphic contains – Geometry, Symbol, Afributes, InfoTemplate – All are opConal
• Typical Process Create geometry Create symbol Assign afributes Create graphic Add graphic to graphics layer
78
How to Add a Graphic to the Map: Create Geometry • Geometry can be created in different ways – Using Geometry objects • Point, Polyline, Polygon • Found in esri/geometry – Point – MulCPoint – Polyline – Polygon – Extent
– Output from a task • Query, IdenCfy, Buffer, etc 79
How to Add a Graphic to the Map: Symbolizing the Graphic • Symbols define how the graphic should appear on the map • Classes for various types of symbols – SimpleMarkerSymbol or PictureMarkerSymbol • For Point and MulCPoint
– SimpleLineSymbol • For Polyline
– SimpleFillSymbol or PictureFillSymbol • For Polygon
– TextSymbol • For Text 80
Symbolizing Graphics
81
Symbolizing Graphics: SimpleMarkerSymbol • Used to symbolize point or mulCpoint graphics • ProperCes – Style • Circle, cross, diamond, square, x • Constants: STYLE_CIRCLE, STYLE_CROSS, STYLE_DIAMOND, STYLE_SQUARE, STYLE_X
– Size – Outline • Used to define an opConal outline color which is a SimpleLineSymbol
– Color
82
Symbolizing Graphics: SimpleLineSymbol • Used to symbolize linear features • Can be a solid line or combinaCon of dots and dashes • ProperCes – Style • Dash, dashdot, dashdotdot, dot, null, solid (solid is default) • Constants: STYLE_DASH, STYLE_DASHDOT, STYLE_DASHDOTDOT, STYLE_DOT, STYLE_NULL, STYLE_SOLID
– Color – Width
83
Symbolizing Graphics: SimpleFillSymbol • Symbols for drawing polygons • Can be solid, transparent, or cross hatch • ProperCes – Style • STYLE_BACKWARD_DIAGONAL, STYLE_CROSS, STYLE_DIAGONAL_CROSS, STYLE_FORWARD_DIAGONAL, STYLE_HORIZONTAL, STYLE_NULL, STYLE_SOLID, STYLE_VERTICAL
– Outline • SimpleLineSymbol that defines the outline properCes of the polygon
– Color
84
How to Add a Graphic to the Map: A[ributes • Name-‐value pairs that describe a graphic • If graphics created as a result of a task then – Field afributes of layer become the afributes – Can be limited in some cases • Example: Query.outFields
• If graphics created programmaCcally – Must assign the afributes in your code – Use Graphic.setAfributes() method
85
How to Add a Graphic to the Map: InfoTemplate • Defines the format for an InfoWindow • Contains the afribute informaCon • Appears when the graphic is clicked • Can use custom forma#ng funcCons – Esri example
86
Se\ng InfoTemplates on Sub Layers of a Map Service • You can apply different infotemplates to each sublayer of a map service (v3.10+) – Applies to ArcGISTileMapServiceLayer and ArcGISDynamicMapServiceLayer – Use the setInfoTemplates() funcCon to specify a template for each layer of interest – Call Map.setInfoWindowOnClick(false) to disable InfoWindow clicks
87
User Drawn Graphics • Draw toolbar allows your users to draw graphics on the map – Captures the geometry of graphics that were drawn – You define the symbol for display
• Show Me an Example (ESRI provided)
hfp://developers.arcgis.com/javascript/samples/graphics_add/
88
Graphic Class • New instance of a graphic created from opConal parameters – Geometry, Symbol, Afributes, InfoTemplate
Geometry Symbol
Attributes InfoTemplate
89
The Graphics Layer
90
GraphicsLayer • All maps have a GraphicsLayer – Container for all graphic objects
• Graphics appear on the map when added to a GraphicsLayer • Always on top of other layers in the map • Can also create your own graphics layers • Can add and remove graphics from the layer – GraphicsLayer.add(graphic) – GraphicsLayer.remove(graphic) – GraphicsLayer.clear() 91
LabelLayer esri/layers/LabelLayer • Special type of graphics layer used to display text and symbols on the map • Provides properCes and methods and integrates with exisCng classes to specify behavior and appearance of map labels: – Use TextSymbol symbol type to define text labels – Use setScaleRange(minScale, maxScale) to specify at which scales labels appear – Supports conCnuous relabeling via dynamic posiConing: • See: hfps://developers.arcgis.com/javascript/jshelp/images/label-‐layer-‐staCc-‐dynamic.gif
– Change appearance of labels at different scales with ScaleDependentRenderer – Change appearance of labels depending on underlying data afributes with ClassBreaksRenderer and UniqueValueRenderer 92
The InfoWindow
93
What is an InfoWindow? • HTML popup that displays when the map is clicked – Dojo widget (Dijit)
• Can contain text, charts, pictures, anything else that can be represented by HTML • Property of the Map – Map.infoWindow
94
Controlling the InfoWindow • Set the Ctle and content of the InfoWindow – InfoWindow.setTitle(Ctle) – InfoWindow.setContent(content)
• Show and Hide the InfoWindow – InfoWindow.show(point, anchor) – InfoWindow.hide()
• Set display placement – InfoWindow.anchor(ANCHOR_LOWERLEFT, ANCHOR_LOWERRIGHT, ANCHOR_UPPERLEFT, ANCHOR_UPPERRIGHT)
• Control where it is placed – InfoWindow.coords(Point) 95
Exercise • Please complete the following exercise – Exercise 3-‐1: Working with Graphics and the GraphicsLayer
96
Lesson 4: The Feature Layer E-‐Learning for the GIS Professional – Any Time, Any Place! geospaCaltraining.com
Lesson Agenda • In this lesson you will learn about: – FuncCon and usage of the Feature Layer – Applying a definiCon expression to filter Feature Layer contents – Using the Feature Layer for selecCon
98
FuncDon and Usage of the Feature Layer
99
What is a Feature Layer?
• Extends GraphicsLayer • Brings geometry informaCon for features to the client – Also brings afribute informaCon
• Work against layer or table in a map service or feature service • Supports automaCc labelling of features
100
FeatureLayer Supports
SelecCon
DefiniCon Expression
Labelling
FeatureLayer Time
Query
EdiCng
Query Related
101
Display Modes
FeatureLayer Display Modes
Snapshot Mode On Demand Mode SelecCon Only Mode 102
Snapshot Mode
• All features from layer streamed to client • Use with small datasets • No need to return to server ayer iniCal streaming • Performance can be a problem if layer contains many features • Limited to 1000 features at a Cme
Display Modes Snapshot Mode On Demand Mode SelecCon Only Mode 103
On Demand Mode
• Retrieves features as needed • Use with large datasets • Requests only features within current view extent • Requires round trips to the server
Display Modes Snapshot Mode On Demand Mode SelecCon Only Mode 104
SelecDon Only Mode
• No iniCal request for features • Added when a selecCon is made • Used for highlighCng features such as the results of a query • Selected features always held on client
Display Modes Snapshot Mode On Demand Mode SelecCon Only Mode 105
CreaDng a FeatureLayer • Constructor – Accepts an URL that points directly to a layer within a service – Also accepts opCons • Display mode, output fields, info template, and others
106
Filtering Features
107
Se\ng a DefiniDon Expression • Used to limit the features displayed on a map • FeatureLayer.setDefiniConExpression(expression) • View sample hfps://developers.arcgis.com/javascript/samples/fl_hover/ • View code that created this sample hfps://developers.arcgis.com/javascript/jssamples/fl_hover.html • Retrieve current definiCon expression with FeatureLayer.getDefiniConExpression() 108
Feature Layer SelecDon
109
Feature SelecDon and Display • FeatureLayer supports feature selecCon – Subset of features for viewing, ediCng, or analysis – Features can be added or removed from selecCon set • SpaCal or afribute criteria
• Selected features can be drawn with different symbol • SelecCon set oyen used for input to analysis, geoprocessing tasks, graphing, and other operaCons • FeatureLayer.selectFeatures(query) – Takes a Query object
110
More on Feature SelecDon • DefiniCon expression and Cme definiCon honored • FeatureLayer.setSelecConSymbol(symbol) – Defines the symbol to use for selected features
• SelecCon method can be: – SELECTION_ADD – SELECTION_NEW – SELECTION_SUBTRACT
• Callback and errback funcCons can be defined to process the results or handle errors
111
Exercise • Please complete the following exercise: – Exercise 4-‐1: Working with the FeatureLayer
112
Lesson 5: Graphic Rendering E-‐Learning for the GIS Professional – Any Time, Any Place! geospaCaltraining.com
Lesson Agenda • In this lesson you will learn about: – Symbolizing graphics based on afributes – Using basic rendering techniques
114
Symbolizing Graphics With Renderers
115
Symbolizing Features and Graphics with Renderers • Renderer defines a set of symbols to use with graphics or features – Different colors or sizes based on an afribute
• Several types of renderer in API for JavaScript – SimpleRenderer – ClassBreaksRenderer
Create Renderer
– UniqueValueRenderer – TemporalRenderer
Define Symbology
• Rendering process
Apply to GraphicsLayer (or FeatureLayer)
116
Renderer Code Example
117
The Different Types of Renderers
118
SimpleRenderer • Simplest type of renderer • Uses the same symbol for all graphics • Constructor
119
UniqueValueRenderer • Symbolizes groups of graphics based on a matching afribute • Typically used with string data – Example: Road Types • Interstate • U.S. Highway • Major Road • Minor Road • Surface Street • All would have a different symbol based on the afribute
120
ClassBreaksRenderer • Renders graphics based on the value of a numeric afribute • Graphics with similar values are assigned the same symbol • Breaks define the values at which the symbol changes • Example: – Parcel Feature Class • Afribute “PropertyValue” – 0 – 50,000 – 50,001 – 100,000 – 100,001 – 250,000 – 250,001 and greater
• Each graphic (or feature) would be symbolized based on the value in the PropertyValue field
121
Controlling Renderer Opacity • Use Renderer.setOpacityInfo(opacityInfo) – OpacityInfo object contains the following properCes: – Field: Name of feature afribute containing the data value – normalizeField: name of afribute used to normalize the data value opConal – stops[] or opacityValues[] • opacityValues: array of opacity values from 0 (fully transparent) to 1 (fully opaque) – Must specify minDataValue/maxDataValue – First/last entries in the array correspond to minDataValue and maxDataValue – If there are more, the opacity for the intermediate steps is applied proporConately • Stops: An array of opaciCes, each with value and opacity properCes. 122
Exercise • Please complete the following exercise: – Exercise 5-‐1: Rendering Graphics and Features
123
Lesson 6: Toolbars E-‐Learning for the GIS Professional – Any Time, Any Place! geospaCaltraining.com
Lesson Agenda • In this lesson you will learn about: – Adding toolbars to help users interact with your applicaCon: • NavigaCon toolbar • Draw toolbar
125
Working with Toolbars
126
IntroducDon to Toolbars • API includes helper classes for navigaCon and drawing • NOT user interface components – Just helper classes – Make it very easy to add toolbars
127
Steps to CreaDng a Toolbar 1. Define the CSS styles for each bufon –
Define an image for the bufon and the width and height
2. Create the Toolbar –
Use dijit/Toolbar
3. Create the Bufons inside the toolbar –
Use dijit/form/Bufon
4. Reference the CSS styles for each bufon in HTML –
Use iconClass property
5. Define funcConality that will be enabled when bufon is clicked –
onClick event
6. Create an instance of esri/toolbars/NavigaCon or esri/toolbars/Draw 7. Connect bufon events to handler funcCons
128
CreaDng the Toolbar Interface
CSS for the buttons
HTML
129
CreaDng the NavigaDon Class
Reference navigation resource
Create an instance of Navigation
Event handler
130
Bu[on AcDvaDon • When user clicks a bufon funcConality is enabled – Example: • User clicks Zoom Out bufon • onClick event is fired • Zoom Out funcConality is acCvated
131
Using the NavigaDon Toolbar • Supports basic pan and zoom navigaCon • Resource: esri/toolbars/NavigaCon • Not an actual user interface component – Helper class
• Saves you the work of drawing zoom boxes, capturing mouse clicks, etc • Example (ESRI provided)
hfps://developers.arcgis.com/javascript/jssamples/toolbar_navigaCon.html
• DocumentaCon
hfps://developers.arcgis.com/javascript/jsapi/navigaCon-‐amd.html
132
Using the Draw Toolbar • Supports funcConality to create new geometries by drawing – Points, Lines, Polylines, Polygons, Rectangles, etc
• Resource: esri/toolbars/Draw • Not an actual user interface component – Helper class
• Saves you the work of drawing zoom boxes, capturing mouse clicks, etc • Example (ESRI provided)
hfps://developers.arcgis.com/javascript/jssamples/toolbar_draw.html
• DocumentaCon
hfps://developers.arcgis.com/javascript/jsapi/draw-‐amd.html 133
Exercise • Please complete the following exercise: – Exercise 6-‐1: Adding a NavigaCon Toolbar to the Interface
134
Lesson 7: Widgets E-‐Learning for the GIS Professional – Any Time, Any Place! geospaCaltraining.com
Lesson Agenda • In this lesson you will learn about: – Adding funcConality with widgets • Basemap Gallery/Toggle • Bookmarks • PrinCng • Geocoding • Measurement • Legend and Scalebar … and more
136
API Widget Overview
137
BasemapGallery Widget • Displays a collecCon of basemaps from – ArcGIS.com – User-‐defined set of map or image services
• New basemap is displayed when selected • All basemaps added to the gallery need to have same spaCal reference • Recommended that all basemaps are Cled layers • Constructor
138
BasemapGallery Widget • Example (ESRI provided) hfps://developers.arcgis.com/javascript/jssamples/widget_basemap.html • Various parameters can be set on creaCon – showArcGISBasemaps – basemaps • Define one or more Basemap objects to include in the gallery • Place these in the basemaps[] array
– bingMapsKey – map
• Call BasemapGallery.startup() ayer creaCng the widget to prepare for user interacCon 139
Bookmarks Widget • Example (ESRI provided) hfps://developers.arcgis.com/javascript/jssamples/widget_bookmarks_dropdownbufon.html • Named geographic extents • Create, update, delete bookmarks • Bookmarks added to an array • Bookmarks have properCes – Defined as JSON object – Name – Extent – xmin, ymin, xmax, ymax
• Call Bookmark.addBookmark() to add a new bookmark to the widget 140
Print Widget • Example (ESRI provided) hfps://developers.arcgis.com/javascript/jssamples/widget_print_webmap.html
• Simplifies prinCng from web applicaCons • Uses a default or user-‐defined layout • Requires AGIS 10.1 Export Web Map Task
141
Geocoder Widget • Example (ESRI provided) hfp://help.arcgis.com/en/webapi/javascript/arcgis/samples/ locator_widget/index.html
• Easily add an address search box • Uses ESRI World Locator service by default • Auto-‐complete • Can append values to the string – Example: AutomaCcally add city, state, zip if applicaCon limited to a specific area – Use ‘suffix’ property
142
Search Widget • Similar to Geocoder widget – Added capabiliCes for mulCple sources rather than just a locator service • Map and feature services
• Example (ESRI provided) hfps://developers.arcgis.com/javascript/jssamples/search_basic.html
• Easily add a search box
143
Measurement Widget • Example (ESRI provided) hfps://developers.arcgis.com/javascript/jssamples/widget_measurement.html • Measures – Length – Area – Current coordinates
144
Measurement Widget measure() Method • Call Measurement.measure(geometry) to invoke the measuring capability of the Measurement widget to measure an exisCng geometry
145
Legend Widget • Displays a label and symbols for some or all layers in the map • Can respect scale dependencies • Supports ArcGISDynamicMapServiceLayer, ArcGISTiledMapServiceLayer, FeatureLayer
146
Legend Widget • Example (ESRI provided) hfps://developers.arcgis.com/javascript/jssamples/widget_legend.html • Constructor • Various parameters can be set on creaCon – arrangement • Specify the alignment of the legend within the HTML element
– layerInfos • Used to specify a subset of layers to use in the legend
– respectCurrentMapScale • Legend updates according to scale ranges and displays only the current visible layers
• Call startup() to display the legend 147
• Can add a scalebar to the map or at a specific HTML node
Scalebar Widget
• Units displayed in english or metric values • Can control scalebar posiConing • Constructor
– Parameters include • afachTo – Specify scalebar posiCon on map (top-‐right, bofom-‐right, top-‐center, bofom-‐center, top-‐ley, bofom-‐ley. Default is bofom-‐ley • map • scalebarUnit – ‘english’ or ‘metric’ 148
OverviewMap Widget • Displays the current extent of the map within the context of a larger area • Updates when the map extent changes • Extent of main map represented by rectangle in the overview map – Extent rectangle can be dragged to change extent in main map
• Can be displayed in various ways – In corner of main map and hidden while not in use – In a element outside the main map window – Temporarily maximized for access to far away areas of interest 149
OverviewMap Widget • Example (ESRI provided) hfps://developers.arcgis.com/javascript/jssamples/widget_overviewmap.htmlConstructor
• Parameters – afachTo -‐ Specify the map corner where the overview map will be afached – baseLayer -‐ Base layer to use for the overview map – color -‐ Fill color for the extent rectangle – maximizeBufon (true or false value) -‐ Defines the visibility of the maximize/restore bufon – visible – Sets the iniCal visibility of the overview map
150
Gauge Widget • Example (ESRI provided) hfps://developers.arcgis.com/javascript/jssamples/widget_gauge.html
• Displays numeric data in a gauge interface • Uses FeatureLayer • OpCons – color – dataField (numeric) – dataLabelField – layer (FeatureLayer or GraphicsLayer) – maxDataValue – Ctle
151
Popup Widget • Example (ESRI provided) hfps://developers.arcgis.com/javascript/jssamples/popup_chart.html • Replacement for default InfoWindow • Adds new funcConality – Zoom to and highlight feature – Interface for mulCple selecCons – Maximize window
152
GeoEnrichment Widgets • Uses the ArcGIS GeoEnrichment Service – Gets facts about a locaCon or area – Demographics, Life style informaCon, business informaCon – Requires ArcGIS Online
• Infographic widget • Infographic Carousel widget • Histogram Cme slider widget • DataBrowser
153
Basemap Toggle • Example (ESRI provided) hfps://developers.arcgis.com/javascript/jssamples/widget_toggle.html
• Used to switch between two basemaps – Uses ArcGIS Online by default – Can also customize to use your own basemaps
154
Home Bu[on • Example (ESRI provided) hfps://developers.arcgis.com/javascript/jssamples/widget_home.html • Used to return the map to the iniCal extent
155
Locate Bu[on • Example (ESRI provided) hfps://developers.arcgis.com/javascript/jssamples/widget_locate.html • Uses GeolocaCon API to find current locaCon of user
156
Swipe Widget • Example (ESRI provided) hfps://developers.arcgis.com/javascript/jssamples/widget_swipe.html • Draggable control used to compare various map layers
157
EdiDng Widgets Editor
Afachment Editor
Widgets
Template Picker
Afribute Inspector 158
Analysis Widgets • 12 Analysis widgets • Provide access to ArcGIS SpaCal Analysis Service • Requires ArcGIS.com subscripCon – Data stored in ArcGIS.com
• More informaCon hfps://developers.arcgis.com/en/javascript/jshelp/intro_analysiswidgets.html
159
Exercise • Please complete the following exercise: – Lesson 7-‐1: Adding the Geocoding Widget to an ApplicaCon
160
Lesson 8: ArcGIS Online IntegraCon E-‐Learning for the GIS Professional – Any Time, Any Place! geospaCaltraining.com
Lesson Agenda • In this lesson you will learn about: – Accessing your ArcGIS Online webmaps from a ArcGIS Server API for JavaScript applicaCon
162
IntegraDon with ArcGIS Online • What can you do on ArcGIS Online? – Create maps – Find and use maps, applicaCons, tool – Share maps and applicaCons with others – Find useful basemaps, data, applicaCons, and tools – Join and create groups
• Integrate ArcGIS Online content in custom API for JavaScript applicaCons
163
IntegraDon with ArcGIS Online
• Several uClity methods for working with maps from ArcGIS Online • esri/arcgis/uCls – esri/arcgis/uCls/createMap() • Creates a map from an ArcGIS Online item
– esri/arcgis/uCls/getItem() • Gets details about the input ArcGIS Online item
164
• Each ArcGIS Online map has an ID
ArcGIS Online Map ID
– Called webmap
• To get the ‘webmap’ ID – Click any map that has been shared in the ArcGIS Online gallery – Address bar will contain the ‘webmap’ ID for the map
165
Retrieve InformaDon About the Webmap ID • Once you have the ‘webmap’ ID – Use esri/arcgis/uCls.getItem(itemID) to retrieve informaCon about the webmap ID – Returns a dojo/Deferred object • Callback funcCons for success or failure • Success returns an itemInfo that can be used to create the map from ArcGIS Online • Dojo/Deferred object for tasks that may not complete immediately
166
ArcGIS Online Code Example
167
Create the ArcGIS Online Map • Use createMap() method • Constructor – Takes an instance of itemInfo or the ‘webmap’ ID – Also need to provide a pointer to a where the map will be placed – OpConal map opCons
• Returns a dojo/Deferred object
168
ArcGIS Online Code Example
169
Exercise • Please complete the following exercise: – Exercise 8-‐1: IntegraCon with ArcGIS Online
170
Thanks for A[ending! • Thanks for your parCcipaCon in the class • Want to learn more? – Intermediate ArcGIS Server Programming with JavaScript
171
Lesson 1: IntroducCon E-‐Learning for the GIS Professional – Any Time, Any Place! geospaCaltraining.com
Lesson Agenda • In this lesson you will learn about: – ArcGIS Server overview – The ArcGIS Server Services Directory – The proxy page and CORS – The Dojo framework
3
ArcGIS Server Overview
4
What is ArcGIS Server? • PlaSorm for sharing GIS resources • Shareable Resources – Maps, globes, address locators, geodatabases, tools
• Can be shared within your organizaCon or externally – Intranet web mapping applicaCons – Through ArcGIS Desktop – Mobile applicaCons
• Out-‐of-‐the-‐box applicaCons and services • Rich developer opportuniCes
ArcGIS Server Architecture
Image courtesy of ESRI
Why Use ArcGIS Server? • Data is centrally managed • MulC-‐user support • Data always up to date • Out of the box client tools for consuming services • Web development plaSorm for custom applicaCons
GIS Services • Central concept to ArcGIS Server • ArcGIS Server provides GIS services – Many types of GIS services • Map, Geoprocessing, Locator, Globe, Image • Each performs a specific task
• GIS Services consumed by clients – Web – Desktop – Mobile
Types of Services Clients consume GIS services Map
Image
Globe
Geocode
ArcGIS Server
Geoprocessing
Geometry
Geodata
Services Covered in this Course
• We will access several service types through the ArcGIS Server JavaScript API in this course Map
– Map service Image
Geocode
– Geocode service – Geometry Service – Geoprocessing Service
ArcGIS Server Globe
Geodata
Geoprocessing
Geometry
How Services are Consumed • Services provided by ArcGIS Server are consumed or used by various client applicaCons – Web clients
– Desktop clients • ArcGIS Desktop • ArcGIS Explorer
– Mobile clients
Map Services • Most common type of ArcGIS service • Support – Map viewing – Modeling and geoprocessing – Mobile GIS services – Open publishing such as OGC WMS, OGC WCS, KML
• Create a map document (.mxd) in ArcMap and publish through ArcCatalog – Map design very important
Arcmap (.mxd)
ArcCatalog
ArcGIS Server
Client Application * Web Based * Desktop ArcGIS
Map Services
Created in ArcMap as .mxd file
Published with ArcCatalog
Clients
ArcGIS Server Hosted by ArcGIS Server
Geocode Service • Primarily used to assign geographic coordinates to addresses • Can also perform reverse geocoding (find the nearest address to a point) • Requires creaCon of address locator in ArcGIS Desktop (ArcCatalog) – Locator contains data necessary to perform geocoding – Use Manager to publish the locator as a geocode service
Geometry Service • Performs geometric operaCons – Buffer – Feature simplificaCon – CalculaCon of areas and lengths – Data projecCon
• Works behind the scenes and is only visible to server administrators and developers – Service must be named Geometry
Geoprocessing Service • Contains geoprocessing tasks accessible by web-‐enabled clients • Created by publishing geoprocessing models and script tools • Asynchronous or Synchronous
ArcGIS Server Services Directory
17
How to Read Services Directory • Helps you discover informaCon about services on a parCcular ArcGIS Server instance • Gives a list of available services and properCes – Map extent, spaCal reference, supported operaCons – Layer names, ids, fields
• Need to know the URL of the server instance – Normally in web server’s root directory as “arcgis” • In “rest” folder
– Example hfp://sampleserver1.arcgisonline.com/arcgis/rest/services
DemonstraDon: Reading the Services Directory • Instructor demonstraCon of the services directory hfps://s3.amazonaws.com/GST_ELearning_Courses/Web20Mapping/Programming%20the%20ArcGIS%20Server%20JavaScript%20API/Demos/ JavaScriptAPI_Nine_demo/JavaScriptAPI_Nine_demo.htm
Exercise • Please complete the following exercise: – Exercise 1-‐1: Exploring the ArcGIS Server “Services” Directory
20
Using the Proxy Page
21
What is a Proxy Page? • Handles communicaCon between ArcGIS Server Services and your applicaCon • Server-‐side code that resides on your Web Server • Browser sends a request to the proxy and proxy forwards the request to the ArcGIS Server Services
Web App
Proxy Page
ArcGIS Server Service
22
Cross Domain Issues and CORS
• CORS: – Lets the web server and browser decide between them if a parCcular resource should be allowed. – Only works when both the browser and target web server support CORS
Your web app
GET /yourApp.html
XML HttpRequest
• You need to use a proxy page if the resource you are trying to access is on a different domain than your applicaCon and CORS (Cross Origin Resource Sharing) is not available).
Your web server
Another web server
• ArcGIS Server v 10.1 supports CORS out of the box • Older versions support CORS, but it must be enabled by an administrator: see here. 23
When to use a Proxy Page
1. ApplicaCon creates requests that exceed 2048 characters • Performs a POST • Buffers, spaCal references using WKT
2. ApplicaCon uses a services secured with token-‐based authenCcaCon • User can’t view token • Don’t want to transmit token
3. ApplicaCon performs ediCng 24
Proxy Page InstallaDon and ConfiguraDon
Step 1
• Download and configure proxy page for your server • ASP.NET, PHP, Java/JSP
Step 2
• Add code to your applicaCon to enable use of proxy
Step 3
• Secure web applicaCon • Tokens
Step 4
• Test your applicaCon
Detailed information on proxy page installation and configuration 25
Coding Your ApplicaDon to Use a Proxy Page • Requires only a couple lines of code – Need to provide the Url to the proxy page – ‘alwaysUseProxy’ can be set to true or false • Unless using tokens you can set this to false
26
IntroducDon to Dojo
27
What is Dojo? Dojo is a unified JavaScript toolkit for building beauCful and funcConal web and mobile applicaCons: • Standardizes development across different plaSorms and browsers • Provides rich UI widgets (calendars, 3D carousel, etc.) • Suitable for business apps: grids, charts, forms and data management • Is free and open source • Included in the ArcGIS Server API for JavaScript 28
IntroducDon to Dojo
core
uCl
Dojo
dijit
dojox 29
Dojo Projects
core
dijit
dojox
uCl
dojo – Sometimes referred to as "core", this is the foundation for all three projects. Handles browser normalization, fixes browser compatibilities, DOM querying, remote scripting, drag and drop, data store API, localization and internationalization, cookie handling, accessibility, more dijit – Dojo framework and dozens of HTML user interface widgets. Claro, Tundra, Soria and Nihilo CSS themes for integration into your web site design. Themes: http://dojotoolkit.org/reference-guide/1.10/dijit/themes.html dojoX – Dojo extensions and advanced projects such as the grid widget, graphics library, charting, image handling and more. util – Items that support the rest of the toolkit, including tools for building, testing and documenting code. 30
Dijits • User interface components • Can be extended to build custom GIS specific dijits • DocumentaCon: hfp://dojotoolkit.org/reference-‐guide/1.10/dijit/index.html
31
DojoX • You can take full advantage of the enCre Dojo toolkit – Not limited to just those exposed by the ArcGIS JavaScript API
• Dojo extensions
Photo Slideshows
Grids Charts
32
Dojo and ArcGIS JavaScript API
• What does Dojo have to do with ArcGIS JavaScript API? – ArcGIS JavaScript API built on top of Dojo – Dojo handles core funcConality and browser differences – Dojo always in use with the ArcGIS Server JavaScript API
Dojo
ESRI
ArcGIS JavaScript API
33
Dojo + ArcGIS Server Architecture • How do you get Dojo? – ArcGIS Server built on top of Dojo
• Architecture
34
Referencing the API • Reference to ArcGIS Server API for JavaScript is always done inside tags.
– Hosted by ArcGIS Online
• The reference to the API also loads the Dojo Toolkit.
35
Referencing the API • Delivered via a content delivery network (CDN). CDN's are a collecCon of geographically distributed web servers that deliver content efficiently. • The servers are load balanced and monitored 24/7 • No need to download and re-‐install the API when new versions are released. You just need to modify the script tag in your applicaCon to point to the new version.
36
Referencing the ESRI Stylesheet (CSS) • Must reference the Esri stylesheet – esri.css
• Reference the CSS file In secCon, before the API download link
37
The OpDonal Dojo Stylesheet • Can opConally include a Dojo Dijit stylesheet • Used to theme user interface widgets you add to the applicaCon
Tundra Soria Nihilo Claro Custom
38
Dojo Stylesheet Examples Claro
Nihilo
Soria
Tundra
Courtesy Dojo Toolkit Reference Guide
39
AMD Dojo
AMD
• New • Asynchronous Module DefiniCon • Dojo 1.7 and above • ArcGIS JavaScript API 3.4+ • Use to write new apps 40
ImporDng ArcGIS Server Resources -‐ AMD • Uses a require() funcCon – Accepts an array of modules and a funcCon as parameters
require(["esri/map", ... ], function(Map, ... ){ ... });
41
Preferred Arguments for AMD
ESRI Preferred Argument List Dojo Preferred Argument List
42
Common ArcGIS Server Resources Resources
Use for:
esri/Map
Map, geometry, graphics, and symbols
esri/layers/ ArcGISDynamicMapServiceLayer
ArcGISDynamicMapServiceLayer
esri/layers/ ArcGISTiledMapServiceLayer
ArcGISTiledMapServiceLayer
esri/tasks/Find
Find task
esri/tasks/Geometry
Geometry task
esri/tasks/Geoprocessor
Geoprocessing task
esri/tasks/IdenCfy
IdenCfy task
esri/tasks/Locator
Locator task
esri/tasks/Query
Query task
esri/toolbars/Draw
Draw
esri/toolbars/NavigaCon
NavigaCon
43
Page Load • ready() funcCon • Runs ayer the DOM and modules have loaded – Don’t want to afempt to access a DOM node before it has loaded
• Run inside the require() funcCon
• Can also use dojo/domReady!
44
Referencing the Dojo Style Sheet • Reference the style sheet in the body of your web page • Typically in tag, but can be in other tags such as – Themes are designed to be applied to any arbitrary element
• Style sheet then applied to addiConal elements such as Dijits and DojoX
45
Events
46
What are Events? • Events are acCons that take place within an applicaCon – Map clicks, mouse drags (panning), keyboard acCons, component modificaCon (resizing), network traffic (sending, receiving data), and others
• on() used to connect an event with a handler • Event handlers respond to the events – JavaScript funcCon executes
• Mouse
Event click Occurs • Keyboard
interacCon
Listener
Connects an event to a handler
Runs in
Handler response to the event
47
Event Handling • Events are acCons that take place in an applicaCon – Map clicks, mouse drags, keyboard events, applicaCon iniCated events
• JavaScript funcCons can be wrifen to respond to these events – Example: Display the geographic coordinates of a map click
• Use the dojo/on module
48
ConnecDng Events to Handlers with Dojo on() • Events registered to handlers through dojo on() method • Example: – dojo on() takes three parameters
• First two idenCfy the object and event that will be registered • Last parameter specifies the handler that is triggered when the event occurs • Map click event triggers a JavaScript funcCon called displayCoordinates 49
ConnecDng MulDple Events to a Single Handler • In v3.9 of the API and above, one handler can deal with mulCple events – List each event a handler must handle as a comma-‐separated string:
50
Should I Handle All Events? • Not necessary to write code for all events – Only those necessary for your applicaCon – What happens when an event occurs for which you haven’t wrifen a handler? • Nothing. Event is ignored in your applicaCon
51
What Browser to Use?
52
What Browser Should You Use? • Short answer: – Firefox or Chrome – Both have built in tool for developers
• Internet Explorer is improving in recent versions, but Firefox and Chrome sCll offer the best experience for developers. • Test your applicaCon in all popular browsers.
53
Exercise • Please complete the following exercise: – Exercise 1-‐2: CreaCng Your First ArcGIS Server JavaScript ApplicaCon
54
Lesson 2: CreaCng a Map and Adding Layers E-‐Learning for the GIS Professional – Any Time, Any Place! geospaCaltraining.com
Lesson Agenda • In this lesson you will learn about: – CreaCng a map – Working with Dynamic and Tiled map service layers
56
The Map Object
57
CreaDng a Map • Add reference to the resource – esri/Map
• Use constructor – Only the ID is required • Specifies the container for the map
– OpCons defined as JSON object and include • Center the map • Zoom scale • Basemap • Graphic display during panning • Others 58
Map Constructor OpDons • OpCons are the second parameter in the Map constructor – JSON object
• Enclosed within { } • Each opCon should be named and followed by a colon • MulCple opCons separated by commas • Example:
Center the map
Options defined within { }
Set basemap Map scale
Turn off pan buttons
59
Map Constructor OpDons • Using a MapOpCons constructor in the map is more efficient (requires less code) • OpCons include: – basemap – ArcGIS.com basemap can include “streets”,”satellite”,”hybrid”,”topo”,”gray”,”oceans”,”naConal-‐geographic”,”osm” – center – zoom –starCng zoom level of the map – minZoom – maxZoom – wraparound180
60
Map Constructor OpDons extent nav displayGraphicsOnPan showInfoWindowOnClick slider
• Sets the iniCal map extent
• Displays pan bufons on the map
• When true, graphics are displayed during panning. When false, graphics turned off. Se#ng to false can improve performance • Used to display an InfoWindow if a graphic has a defined InfoTemplate when the user clicks on the graphic
• Displays the zoom slider
61
Tiled and Dynamic Map Service Layers
62
Working with Layers
• Types of Layers – ArcGISDynamicMapServiceLayer • Works with a map service exposed by ArcGIS Server • Generates map images on the fly – ArcGISTiledMapServiceLayer • A cached map service exposed by ArcGIS Server • Accesses Cles from a cache instead of dynamically rendering images – Improved performance
63
ArcGISDynamicMapServiceLayer • Refers to a map service exposed by ArcGIS Server • Maps created dynamically • Constructor
• url = URL to ArcGIS Server map service • opCons? – id = ID to assign to the layer – opacity = transparency of layer – visible = iniCal visibility of layer (true = visible)
• Example 64
ArcGISDynamicMapServiceLayer • Consists of 1 or more layers • Each layer occupies an index – Census Block Points (0)
• ArcGISDynamicMapServiceLayer – Provides a reference to all layers
65
What can you do with ArcGISDynamicMapServiceLayer? • Using Dynamic map services you can – Create maps – Query data from layers in the service – Set layer definiCons – Control layer visibility – Time related informaCon – Export map as an image – Control transparency
66
ArcGISDynamicMapServiceLayer: Adding the Service to a Map • Ayer creaCng an instance of ArcGISDynamicMapServiceLayer you need to add the service to the map – This also applies to ArcGISTiledMapServiceLayer
• Call Map.addLayer(layer, index?) or Map.addLayers(layers)
67
ArcGISDynamicMapServiceLayer: Applying a DefiniDon Expression • Use setLayerDefiniCons(layerDefiniCons) method to control layer visibility – Only features meeCng the layer definiCon will be displayed – layerDefiniCons parameter is an array of definiCons containing SQL queries – Access and set each layer through a numeric index
• Example:
68
ArcGISDynamicMapServiceLayer: Controlling Layer Visibility • Use setVisibleLayers(ids) method to control layer visibility • Example: dynamicMS.setVisibleLayers([0,2,3]) –
setVisibleLayers takes an array of integers corresponding to the data layers in the map service
–
Zero based array so 0 is the first layer in the map service
69
ArcGISDynamicMapServiceLayer: Querying Data • Can also query data from layers in ArcGISDynamicMapServiceLayer • Accomplished through the Query and QueryTask objects • Covered extensively later in the course
70
ArcGISTiledMapServiceLayer • Works with cached map services exposed by ArcGIS Server – Performance can be improved with this type map service layer
• Constructor • url = URL to ArcGIS Server map service • opCons? – id = ID to assign to the layer – opacity = transparency of layer – visible = iniCal visibility of layer (true = visible)
• Example
71
What can you do with ArcGISTiledMapServiceLayer? • These services used primarily for display of data • Can also – Control display levels • Example: – Want to display generalized interstates, highways at levels 0-‐6 – As user zooms to levels 7 and higher you want to display more specialized street data • Use displayLevels in opCons
– Set transparency of the layer
72
Exercise
• Please complete the following exercise: – Exercise 2-‐1: CreaCng a Map Using a Default Basemap and Adding Layers
73
Lesson 3: Graphics and Graphic Layers E-‐Learning for the GIS Professional – Any Time, Any Place! geospaCaltraining.com
Lesson Agenda • In this lesson you will learn about: – Adding graphics to the map – Symbolizing graphics – The Graphics Layer – The InfoWindow
75
Adding Graphics to the Map
76
What are Graphics? • Points, lines, or polygons drawn on top of the exisCng map layers • Created by the user or applicaCon • Graphic is a container for four things (opConal) – Geometry • Where the graphic is located
– Symbol • How the graphic looks
– Afributes • Name-‐value pairs that describe the graphic
– Info Template • Defines the format of the InfoWindow that appears when a graphic is clicked
• Graphics stored in a GraphicsLayer 77
How to Add a Graphic to the Map
• Graphic contains – Geometry, Symbol, Afributes, InfoTemplate – All are opConal
• Typical Process Create geometry Create symbol Assign afributes Create graphic Add graphic to graphics layer
78
How to Add a Graphic to the Map: Create Geometry • Geometry can be created in different ways – Using Geometry objects • Point, Polyline, Polygon • Found in esri/geometry – Point – MulCPoint – Polyline – Polygon – Extent
– Output from a task • Query, IdenCfy, Buffer, etc 79
How to Add a Graphic to the Map: Symbolizing the Graphic • Symbols define how the graphic should appear on the map • Classes for various types of symbols – SimpleMarkerSymbol or PictureMarkerSymbol • For Point and MulCPoint
– SimpleLineSymbol • For Polyline
– SimpleFillSymbol or PictureFillSymbol • For Polygon
– TextSymbol • For Text 80
Symbolizing Graphics
81
Symbolizing Graphics: SimpleMarkerSymbol • Used to symbolize point or mulCpoint graphics • ProperCes – Style • Circle, cross, diamond, square, x • Constants: STYLE_CIRCLE, STYLE_CROSS, STYLE_DIAMOND, STYLE_SQUARE, STYLE_X
– Size – Outline • Used to define an opConal outline color which is a SimpleLineSymbol
– Color
82
Symbolizing Graphics: SimpleLineSymbol • Used to symbolize linear features • Can be a solid line or combinaCon of dots and dashes • ProperCes – Style • Dash, dashdot, dashdotdot, dot, null, solid (solid is default) • Constants: STYLE_DASH, STYLE_DASHDOT, STYLE_DASHDOTDOT, STYLE_DOT, STYLE_NULL, STYLE_SOLID
– Color – Width
83
Symbolizing Graphics: SimpleFillSymbol • Symbols for drawing polygons • Can be solid, transparent, or cross hatch • ProperCes – Style • STYLE_BACKWARD_DIAGONAL, STYLE_CROSS, STYLE_DIAGONAL_CROSS, STYLE_FORWARD_DIAGONAL, STYLE_HORIZONTAL, STYLE_NULL, STYLE_SOLID, STYLE_VERTICAL
– Outline • SimpleLineSymbol that defines the outline properCes of the polygon
– Color
84
How to Add a Graphic to the Map: A[ributes • Name-‐value pairs that describe a graphic • If graphics created as a result of a task then – Field afributes of layer become the afributes – Can be limited in some cases • Example: Query.outFields
• If graphics created programmaCcally – Must assign the afributes in your code – Use Graphic.setAfributes() method
85
How to Add a Graphic to the Map: InfoTemplate • Defines the format for an InfoWindow • Contains the afribute informaCon • Appears when the graphic is clicked • Can use custom forma#ng funcCons – Esri example
86
Se\ng InfoTemplates on Sub Layers of a Map Service • You can apply different infotemplates to each sublayer of a map service (v3.10+) – Applies to ArcGISTileMapServiceLayer and ArcGISDynamicMapServiceLayer – Use the setInfoTemplates() funcCon to specify a template for each layer of interest – Call Map.setInfoWindowOnClick(false) to disable InfoWindow clicks
87
User Drawn Graphics • Draw toolbar allows your users to draw graphics on the map – Captures the geometry of graphics that were drawn – You define the symbol for display
• Show Me an Example (ESRI provided)
hfp://developers.arcgis.com/javascript/samples/graphics_add/
88
Graphic Class • New instance of a graphic created from opConal parameters – Geometry, Symbol, Afributes, InfoTemplate
Geometry Symbol
Attributes InfoTemplate
89
The Graphics Layer
90
GraphicsLayer • All maps have a GraphicsLayer – Container for all graphic objects
• Graphics appear on the map when added to a GraphicsLayer • Always on top of other layers in the map • Can also create your own graphics layers • Can add and remove graphics from the layer – GraphicsLayer.add(graphic) – GraphicsLayer.remove(graphic) – GraphicsLayer.clear() 91
LabelLayer esri/layers/LabelLayer • Special type of graphics layer used to display text and symbols on the map • Provides properCes and methods and integrates with exisCng classes to specify behavior and appearance of map labels: – Use TextSymbol symbol type to define text labels – Use setScaleRange(minScale, maxScale) to specify at which scales labels appear – Supports conCnuous relabeling via dynamic posiConing: • See: hfps://developers.arcgis.com/javascript/jshelp/images/label-‐layer-‐staCc-‐dynamic.gif
– Change appearance of labels at different scales with ScaleDependentRenderer – Change appearance of labels depending on underlying data afributes with ClassBreaksRenderer and UniqueValueRenderer 92
The InfoWindow
93
What is an InfoWindow? • HTML popup that displays when the map is clicked – Dojo widget (Dijit)
• Can contain text, charts, pictures, anything else that can be represented by HTML • Property of the Map – Map.infoWindow
94
Controlling the InfoWindow • Set the Ctle and content of the InfoWindow – InfoWindow.setTitle(Ctle) – InfoWindow.setContent(content)
• Show and Hide the InfoWindow – InfoWindow.show(point, anchor) – InfoWindow.hide()
• Set display placement – InfoWindow.anchor(ANCHOR_LOWERLEFT, ANCHOR_LOWERRIGHT, ANCHOR_UPPERLEFT, ANCHOR_UPPERRIGHT)
• Control where it is placed – InfoWindow.coords(Point) 95
Exercise • Please complete the following exercise – Exercise 3-‐1: Working with Graphics and the GraphicsLayer
96
Lesson 4: The Feature Layer E-‐Learning for the GIS Professional – Any Time, Any Place! geospaCaltraining.com
Lesson Agenda • In this lesson you will learn about: – FuncCon and usage of the Feature Layer – Applying a definiCon expression to filter Feature Layer contents – Using the Feature Layer for selecCon
98
FuncDon and Usage of the Feature Layer
99
What is a Feature Layer?
• Extends GraphicsLayer • Brings geometry informaCon for features to the client – Also brings afribute informaCon
• Work against layer or table in a map service or feature service • Supports automaCc labelling of features
100
FeatureLayer Supports
SelecCon
DefiniCon Expression
Labelling
FeatureLayer Time
Query
EdiCng
Query Related
101
Display Modes
FeatureLayer Display Modes
Snapshot Mode On Demand Mode SelecCon Only Mode 102
Snapshot Mode
• All features from layer streamed to client • Use with small datasets • No need to return to server ayer iniCal streaming • Performance can be a problem if layer contains many features • Limited to 1000 features at a Cme
Display Modes Snapshot Mode On Demand Mode SelecCon Only Mode 103
On Demand Mode
• Retrieves features as needed • Use with large datasets • Requests only features within current view extent • Requires round trips to the server
Display Modes Snapshot Mode On Demand Mode SelecCon Only Mode 104
SelecDon Only Mode
• No iniCal request for features • Added when a selecCon is made • Used for highlighCng features such as the results of a query • Selected features always held on client
Display Modes Snapshot Mode On Demand Mode SelecCon Only Mode 105
CreaDng a FeatureLayer • Constructor – Accepts an URL that points directly to a layer within a service – Also accepts opCons • Display mode, output fields, info template, and others
106
Filtering Features
107
Se\ng a DefiniDon Expression • Used to limit the features displayed on a map • FeatureLayer.setDefiniConExpression(expression) • View sample hfps://developers.arcgis.com/javascript/samples/fl_hover/ • View code that created this sample hfps://developers.arcgis.com/javascript/jssamples/fl_hover.html • Retrieve current definiCon expression with FeatureLayer.getDefiniConExpression() 108
Feature Layer SelecDon
109
Feature SelecDon and Display • FeatureLayer supports feature selecCon – Subset of features for viewing, ediCng, or analysis – Features can be added or removed from selecCon set • SpaCal or afribute criteria
• Selected features can be drawn with different symbol • SelecCon set oyen used for input to analysis, geoprocessing tasks, graphing, and other operaCons • FeatureLayer.selectFeatures(query) – Takes a Query object
110
More on Feature SelecDon • DefiniCon expression and Cme definiCon honored • FeatureLayer.setSelecConSymbol(symbol) – Defines the symbol to use for selected features
• SelecCon method can be: – SELECTION_ADD – SELECTION_NEW – SELECTION_SUBTRACT
• Callback and errback funcCons can be defined to process the results or handle errors
111
Exercise • Please complete the following exercise: – Exercise 4-‐1: Working with the FeatureLayer
112
Lesson 5: Graphic Rendering E-‐Learning for the GIS Professional – Any Time, Any Place! geospaCaltraining.com
Lesson Agenda • In this lesson you will learn about: – Symbolizing graphics based on afributes – Using basic rendering techniques
114
Symbolizing Graphics With Renderers
115
Symbolizing Features and Graphics with Renderers • Renderer defines a set of symbols to use with graphics or features – Different colors or sizes based on an afribute
• Several types of renderer in API for JavaScript – SimpleRenderer – ClassBreaksRenderer
Create Renderer
– UniqueValueRenderer – TemporalRenderer
Define Symbology
• Rendering process
Apply to GraphicsLayer (or FeatureLayer)
116
Renderer Code Example
117
The Different Types of Renderers
118
SimpleRenderer • Simplest type of renderer • Uses the same symbol for all graphics • Constructor
119
UniqueValueRenderer • Symbolizes groups of graphics based on a matching afribute • Typically used with string data – Example: Road Types • Interstate • U.S. Highway • Major Road • Minor Road • Surface Street • All would have a different symbol based on the afribute
120
ClassBreaksRenderer • Renders graphics based on the value of a numeric afribute • Graphics with similar values are assigned the same symbol • Breaks define the values at which the symbol changes • Example: – Parcel Feature Class • Afribute “PropertyValue” – 0 – 50,000 – 50,001 – 100,000 – 100,001 – 250,000 – 250,001 and greater
• Each graphic (or feature) would be symbolized based on the value in the PropertyValue field
121
Controlling Renderer Opacity • Use Renderer.setOpacityInfo(opacityInfo) – OpacityInfo object contains the following properCes: – Field: Name of feature afribute containing the data value – normalizeField: name of afribute used to normalize the data value opConal – stops[] or opacityValues[] • opacityValues: array of opacity values from 0 (fully transparent) to 1 (fully opaque) – Must specify minDataValue/maxDataValue – First/last entries in the array correspond to minDataValue and maxDataValue – If there are more, the opacity for the intermediate steps is applied proporConately • Stops: An array of opaciCes, each with value and opacity properCes. 122
Exercise • Please complete the following exercise: – Exercise 5-‐1: Rendering Graphics and Features
123
Lesson 6: Toolbars E-‐Learning for the GIS Professional – Any Time, Any Place! geospaCaltraining.com
Lesson Agenda • In this lesson you will learn about: – Adding toolbars to help users interact with your applicaCon: • NavigaCon toolbar • Draw toolbar
125
Working with Toolbars
126
IntroducDon to Toolbars • API includes helper classes for navigaCon and drawing • NOT user interface components – Just helper classes – Make it very easy to add toolbars
127
Steps to CreaDng a Toolbar 1. Define the CSS styles for each bufon –
Define an image for the bufon and the width and height
2. Create the Toolbar –
Use dijit/Toolbar
3. Create the Bufons inside the toolbar –
Use dijit/form/Bufon
4. Reference the CSS styles for each bufon in HTML –
Use iconClass property
5. Define funcConality that will be enabled when bufon is clicked –
onClick event
6. Create an instance of esri/toolbars/NavigaCon or esri/toolbars/Draw 7. Connect bufon events to handler funcCons
128
CreaDng the Toolbar Interface
CSS for the buttons
HTML
129
CreaDng the NavigaDon Class
Reference navigation resource
Create an instance of Navigation
Event handler
130
Bu[on AcDvaDon • When user clicks a bufon funcConality is enabled – Example: • User clicks Zoom Out bufon • onClick event is fired • Zoom Out funcConality is acCvated
131
Using the NavigaDon Toolbar • Supports basic pan and zoom navigaCon • Resource: esri/toolbars/NavigaCon • Not an actual user interface component – Helper class
• Saves you the work of drawing zoom boxes, capturing mouse clicks, etc • Example (ESRI provided)
hfps://developers.arcgis.com/javascript/jssamples/toolbar_navigaCon.html
• DocumentaCon
hfps://developers.arcgis.com/javascript/jsapi/navigaCon-‐amd.html
132
Using the Draw Toolbar • Supports funcConality to create new geometries by drawing – Points, Lines, Polylines, Polygons, Rectangles, etc
• Resource: esri/toolbars/Draw • Not an actual user interface component – Helper class
• Saves you the work of drawing zoom boxes, capturing mouse clicks, etc • Example (ESRI provided)
hfps://developers.arcgis.com/javascript/jssamples/toolbar_draw.html
• DocumentaCon
hfps://developers.arcgis.com/javascript/jsapi/draw-‐amd.html 133
Exercise • Please complete the following exercise: – Exercise 6-‐1: Adding a NavigaCon Toolbar to the Interface
134
Lesson 7: Widgets E-‐Learning for the GIS Professional – Any Time, Any Place! geospaCaltraining.com
Lesson Agenda • In this lesson you will learn about: – Adding funcConality with widgets • Basemap Gallery/Toggle • Bookmarks • PrinCng • Geocoding • Measurement • Legend and Scalebar … and more
136
API Widget Overview
137
BasemapGallery Widget • Displays a collecCon of basemaps from – ArcGIS.com – User-‐defined set of map or image services
• New basemap is displayed when selected • All basemaps added to the gallery need to have same spaCal reference • Recommended that all basemaps are Cled layers • Constructor
138
BasemapGallery Widget • Example (ESRI provided) hfps://developers.arcgis.com/javascript/jssamples/widget_basemap.html • Various parameters can be set on creaCon – showArcGISBasemaps – basemaps • Define one or more Basemap objects to include in the gallery • Place these in the basemaps[] array
– bingMapsKey – map
• Call BasemapGallery.startup() ayer creaCng the widget to prepare for user interacCon 139
Bookmarks Widget • Example (ESRI provided) hfps://developers.arcgis.com/javascript/jssamples/widget_bookmarks_dropdownbufon.html • Named geographic extents • Create, update, delete bookmarks • Bookmarks added to an array • Bookmarks have properCes – Defined as JSON object – Name – Extent – xmin, ymin, xmax, ymax
• Call Bookmark.addBookmark() to add a new bookmark to the widget 140
Print Widget • Example (ESRI provided) hfps://developers.arcgis.com/javascript/jssamples/widget_print_webmap.html
• Simplifies prinCng from web applicaCons • Uses a default or user-‐defined layout • Requires AGIS 10.1 Export Web Map Task
141
Geocoder Widget • Example (ESRI provided) hfp://help.arcgis.com/en/webapi/javascript/arcgis/samples/ locator_widget/index.html
• Easily add an address search box • Uses ESRI World Locator service by default • Auto-‐complete • Can append values to the string – Example: AutomaCcally add city, state, zip if applicaCon limited to a specific area – Use ‘suffix’ property
142
Search Widget • Similar to Geocoder widget – Added capabiliCes for mulCple sources rather than just a locator service • Map and feature services
• Example (ESRI provided) hfps://developers.arcgis.com/javascript/jssamples/search_basic.html
• Easily add a search box
143
Measurement Widget • Example (ESRI provided) hfps://developers.arcgis.com/javascript/jssamples/widget_measurement.html • Measures – Length – Area – Current coordinates
144
Measurement Widget measure() Method • Call Measurement.measure(geometry) to invoke the measuring capability of the Measurement widget to measure an exisCng geometry
145
Legend Widget • Displays a label and symbols for some or all layers in the map • Can respect scale dependencies • Supports ArcGISDynamicMapServiceLayer, ArcGISTiledMapServiceLayer, FeatureLayer
146
Legend Widget • Example (ESRI provided) hfps://developers.arcgis.com/javascript/jssamples/widget_legend.html • Constructor • Various parameters can be set on creaCon – arrangement • Specify the alignment of the legend within the HTML element
– layerInfos • Used to specify a subset of layers to use in the legend
– respectCurrentMapScale • Legend updates according to scale ranges and displays only the current visible layers
• Call startup() to display the legend 147
• Can add a scalebar to the map or at a specific HTML node
Scalebar Widget
• Units displayed in english or metric values • Can control scalebar posiConing • Constructor
– Parameters include • afachTo – Specify scalebar posiCon on map (top-‐right, bofom-‐right, top-‐center, bofom-‐center, top-‐ley, bofom-‐ley. Default is bofom-‐ley • map • scalebarUnit – ‘english’ or ‘metric’ 148
OverviewMap Widget • Displays the current extent of the map within the context of a larger area • Updates when the map extent changes • Extent of main map represented by rectangle in the overview map – Extent rectangle can be dragged to change extent in main map
• Can be displayed in various ways – In corner of main map and hidden while not in use – In a element outside the main map window – Temporarily maximized for access to far away areas of interest 149
OverviewMap Widget • Example (ESRI provided) hfps://developers.arcgis.com/javascript/jssamples/widget_overviewmap.htmlConstructor
• Parameters – afachTo -‐ Specify the map corner where the overview map will be afached – baseLayer -‐ Base layer to use for the overview map – color -‐ Fill color for the extent rectangle – maximizeBufon (true or false value) -‐ Defines the visibility of the maximize/restore bufon – visible – Sets the iniCal visibility of the overview map
150
Gauge Widget • Example (ESRI provided) hfps://developers.arcgis.com/javascript/jssamples/widget_gauge.html
• Displays numeric data in a gauge interface • Uses FeatureLayer • OpCons – color – dataField (numeric) – dataLabelField – layer (FeatureLayer or GraphicsLayer) – maxDataValue – Ctle
151
Popup Widget • Example (ESRI provided) hfps://developers.arcgis.com/javascript/jssamples/popup_chart.html • Replacement for default InfoWindow • Adds new funcConality – Zoom to and highlight feature – Interface for mulCple selecCons – Maximize window
152
GeoEnrichment Widgets • Uses the ArcGIS GeoEnrichment Service – Gets facts about a locaCon or area – Demographics, Life style informaCon, business informaCon – Requires ArcGIS Online
• Infographic widget • Infographic Carousel widget • Histogram Cme slider widget • DataBrowser
153
Basemap Toggle • Example (ESRI provided) hfps://developers.arcgis.com/javascript/jssamples/widget_toggle.html
• Used to switch between two basemaps – Uses ArcGIS Online by default – Can also customize to use your own basemaps
154
Home Bu[on • Example (ESRI provided) hfps://developers.arcgis.com/javascript/jssamples/widget_home.html • Used to return the map to the iniCal extent
155
Locate Bu[on • Example (ESRI provided) hfps://developers.arcgis.com/javascript/jssamples/widget_locate.html • Uses GeolocaCon API to find current locaCon of user
156
Swipe Widget • Example (ESRI provided) hfps://developers.arcgis.com/javascript/jssamples/widget_swipe.html • Draggable control used to compare various map layers
157
EdiDng Widgets Editor
Afachment Editor
Widgets
Template Picker
Afribute Inspector 158
Analysis Widgets • 12 Analysis widgets • Provide access to ArcGIS SpaCal Analysis Service • Requires ArcGIS.com subscripCon – Data stored in ArcGIS.com
• More informaCon hfps://developers.arcgis.com/en/javascript/jshelp/intro_analysiswidgets.html
159
Exercise • Please complete the following exercise: – Lesson 7-‐1: Adding the Geocoding Widget to an ApplicaCon
160
Lesson 8: ArcGIS Online IntegraCon E-‐Learning for the GIS Professional – Any Time, Any Place! geospaCaltraining.com
Lesson Agenda • In this lesson you will learn about: – Accessing your ArcGIS Online webmaps from a ArcGIS Server API for JavaScript applicaCon
162
IntegraDon with ArcGIS Online • What can you do on ArcGIS Online? – Create maps – Find and use maps, applicaCons, tool – Share maps and applicaCons with others – Find useful basemaps, data, applicaCons, and tools – Join and create groups
• Integrate ArcGIS Online content in custom API for JavaScript applicaCons
163
IntegraDon with ArcGIS Online
• Several uClity methods for working with maps from ArcGIS Online • esri/arcgis/uCls – esri/arcgis/uCls/createMap() • Creates a map from an ArcGIS Online item
– esri/arcgis/uCls/getItem() • Gets details about the input ArcGIS Online item
164
• Each ArcGIS Online map has an ID
ArcGIS Online Map ID
– Called webmap
• To get the ‘webmap’ ID – Click any map that has been shared in the ArcGIS Online gallery – Address bar will contain the ‘webmap’ ID for the map
165
Retrieve InformaDon About the Webmap ID • Once you have the ‘webmap’ ID – Use esri/arcgis/uCls.getItem(itemID) to retrieve informaCon about the webmap ID – Returns a dojo/Deferred object • Callback funcCons for success or failure • Success returns an itemInfo that can be used to create the map from ArcGIS Online • Dojo/Deferred object for tasks that may not complete immediately
166
ArcGIS Online Code Example
167
Create the ArcGIS Online Map • Use createMap() method • Constructor – Takes an instance of itemInfo or the ‘webmap’ ID – Also need to provide a pointer to a where the map will be placed – OpConal map opCons
• Returns a dojo/Deferred object
168
ArcGIS Online Code Example
169
Exercise • Please complete the following exercise: – Exercise 8-‐1: IntegraCon with ArcGIS Online
170
Thanks for A[ending! • Thanks for your parCcipaCon in the class • Want to learn more? – Intermediate ArcGIS Server Programming with JavaScript
171
