Upload
others
View
10
Download
0
Embed Size (px)
Citation preview
ArcGIS API for JavaScript
An IntroductionJo Fraley & Rene Rubalcava
Outline
• Setup
• First Steps
• Working with layers
• Symbols and Renderers
• Make your map interactive
• Widgets and styling
Presentations accessible on GitHub
• Focusing on version 4.0 for this presentation
• Concepts are similar between 3.x and 4.0
• Version 3.x UC 2015 presentation and demos are available
• https://github.com/Esri/uc-2106-JSAPI-introduction
Which API version should I use?
Developer Setup
• Choose an IDE
• Code assist
• Helpful tools
Get the API
• CDN
• Custom builds
• Download API
JSAPI-Resources
• Collection of resources to aid development in the JSAPI
• Some of these include:
- JSHint file
- Helps to detect errors and potential problems in code
- Typescript definition file
- Provides code assist in some IDE’s such as WebStorm and Visual Studio
- Build tools, e.g. Bower for custom builds of the API
- Callback page for popups using OAuth2 for security
CSS
• Main.css
- Contains styles for all of API.
• View.css
- Better choice, if only need CSS for a basic map with default
widgets. Smaller in size.
• Custom css (sass)
- Provide widget css source
First steps
• How will application be written?
• Separate files or one combined file?
• Demos shows separate HTML, CSS,
and JS files
• Reference JSAPI and any additional
references, e.g. CSS, any other
libraries in markup
Make a map
Tip
• Modules out of order
• Blank tiles -> Can’t find CSS
Map View
Add layers
• Layer types
- FeatureLayer
- MapImageLayer
- ImageryLayer
- TileLayer
- VectorTileLayer
- GroupLayer
- SceneLayer
- … and more
Layer coding pattern
1. Load module
2. Create layer
3. Set properties
4. Add to map (or scene)
Working with Properties
• All properties for each class can be set in its constructor
• No need to explicitly call Get/Set for properties
• Watch for property changes
• Use esri/core/watchUtils to aid in watching property changes
Demo: Add layer to sample app
Renderers
• Define a set of symbols to use for the layer
• Set rules on how the symbols should be used
• Basic coding pattern
Symbols
• Renderers make use of symbology
- Points, lines, and polygons
• Pass the symbol to the renderer
Autocasting
• Allows you to pass in a property without having to specifically require it in the code.
- Efficient
- Less code
- Less overhead
• Not sure if a property can use this functionality?
- Check property’s API reference for Autocast label
Demo: Update feature layer renderer
Interactive Map
• Make map interactive
- Popups
- Query
- Filter out features based on a definition expression
Popups
• Responsive widget
• Information about
- Clicked location
- Feature
- Search results
• Customizable
FeatureLayer PopupTemplate
• View has associated popup
• Popup content is set via PopupTemplate
• FeatureLayer has popupTemplate
• Popup’s dockOptions
Popup: Custom Actions
Demo: Add a popup to the map
FeatureLayer definition expressions
• SQL where clause used to filter features on
the client
• Use with large datasets
• View automatically refreshes
Demo: Filtering features using a definition expression
Web map
• Reduce code by using a web map
- No need to write a bunch of code
• Retains all customizations with rendering, popups, filtering, etc.
- Basemap
- Layers
- Popup
- Symbology
- Extent
- Basemap
Demo: Add a web map to an application
Widgets
• BasemapToggle
• Compass
• Home
• Legend
• Search
• Popup
• Track
• Locate
• LayerList
• SmartMapping
• Specific encapsulated
functionality
Widget coding pattern
• Load module
• Create widget
• Set widget properties
• Add widget to UI
Default UI
Widget coding pattern
1. Load module
2. Create widget
3. Set options
4. Add widget to the UI
Demo: Add widget to app
Customize widget appearance
• CSS
• SASS
Want more info?
• Documentation
- https://developers.arcgis.com/javascript/
• Check out Esri-related training classes and webinars
• Additional Resources
- JavaScript online training classes: free and fee-based
Additional sessions
• ArcGIS API for JavaScript: What's New at v4.x
• ArcGIS API for JavaScript: Advanced Topics
• ArcGIS API for JavaScript: Build 3D Web Apps
• ArcGIS API for JavaScript: Data Visualization
• ArcGIS API for JavaScript: Tips and Tricks for Dev and Debug Apps
Please take our SurveyYour feedback allows us to help maintain high standards and to help presenters
Find the session you want to review
Find your event in the Esri Events App
Scroll down to the bottom of the session
Answer survey questions and submit