practical guide to building 2d web apps - esri · 2017 esri developer...
TRANSCRIPT
![Page 1: Practical Guide to Building 2D Web Apps - Esri · 2017 Esri Developer Summit-International--Presentation, 2017 Esri Developer Summit-International, Practical Guide to Building 2D](https://reader030.vdocuments.site/reader030/viewer/2022011822/5ecc5abb5f53fc20cb535ce9/html5/thumbnails/1.jpg)
Practical Guide to Building 2D Web AppsHeather Gonzago and Kelly Hutchins
![Page 2: Practical Guide to Building 2D Web Apps - Esri · 2017 Esri Developer Summit-International--Presentation, 2017 Esri Developer Summit-International, Practical Guide to Building 2D](https://reader030.vdocuments.site/reader030/viewer/2022011822/5ecc5abb5f53fc20cb535ce9/html5/thumbnails/2.jpg)
Agenda
• Setup
• First Steps
• Working with layers
• Symbols and Renderers
• Make your map interactive
• Widgets and styling
![Page 3: Practical Guide to Building 2D Web Apps - Esri · 2017 Esri Developer Summit-International--Presentation, 2017 Esri Developer Summit-International, Practical Guide to Building 2D](https://reader030.vdocuments.site/reader030/viewer/2022011822/5ecc5abb5f53fc20cb535ce9/html5/thumbnails/3.jpg)
Presentations accessible on GitHub
• Focusing on version 4.0 for this presentation
• Concepts are similar between 3.x and 4.0
• https://github.com/hgonzago/DevSummit-presentations
![Page 5: Practical Guide to Building 2D Web Apps - Esri · 2017 Esri Developer Summit-International--Presentation, 2017 Esri Developer Summit-International, Practical Guide to Building 2D](https://reader030.vdocuments.site/reader030/viewer/2022011822/5ecc5abb5f53fc20cb535ce9/html5/thumbnails/5.jpg)
Which API version should I use?
![Page 6: Practical Guide to Building 2D Web Apps - Esri · 2017 Esri Developer Summit-International--Presentation, 2017 Esri Developer Summit-International, Practical Guide to Building 2D](https://reader030.vdocuments.site/reader030/viewer/2022011822/5ecc5abb5f53fc20cb535ce9/html5/thumbnails/6.jpg)
Developer Setup
• Choose an IDE
• Code assist
• Helpful tools
![Page 7: Practical Guide to Building 2D Web Apps - Esri · 2017 Esri Developer Summit-International--Presentation, 2017 Esri Developer Summit-International, Practical Guide to Building 2D](https://reader030.vdocuments.site/reader030/viewer/2022011822/5ecc5abb5f53fc20cb535ce9/html5/thumbnails/7.jpg)
Get the API
• CDN
• Custom builds
• Download API
![Page 8: Practical Guide to Building 2D Web Apps - Esri · 2017 Esri Developer Summit-International--Presentation, 2017 Esri Developer Summit-International, Practical Guide to Building 2D](https://reader030.vdocuments.site/reader030/viewer/2022011822/5ecc5abb5f53fc20cb535ce9/html5/thumbnails/8.jpg)
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
![Page 9: Practical Guide to Building 2D Web Apps - Esri · 2017 Esri Developer Summit-International--Presentation, 2017 Esri Developer Summit-International, Practical Guide to Building 2D](https://reader030.vdocuments.site/reader030/viewer/2022011822/5ecc5abb5f53fc20cb535ce9/html5/thumbnails/9.jpg)
CSS
• Main.css
• View.css
• Themes
• Custom CSS(SASS)
![Page 10: Practical Guide to Building 2D Web Apps - Esri · 2017 Esri Developer Summit-International--Presentation, 2017 Esri Developer Summit-International, Practical Guide to Building 2D](https://reader030.vdocuments.site/reader030/viewer/2022011822/5ecc5abb5f53fc20cb535ce9/html5/thumbnails/10.jpg)
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
![Page 11: Practical Guide to Building 2D Web Apps - Esri · 2017 Esri Developer Summit-International--Presentation, 2017 Esri Developer Summit-International, Practical Guide to Building 2D](https://reader030.vdocuments.site/reader030/viewer/2022011822/5ecc5abb5f53fc20cb535ce9/html5/thumbnails/11.jpg)
Make a map
![Page 12: Practical Guide to Building 2D Web Apps - Esri · 2017 Esri Developer Summit-International--Presentation, 2017 Esri Developer Summit-International, Practical Guide to Building 2D](https://reader030.vdocuments.site/reader030/viewer/2022011822/5ecc5abb5f53fc20cb535ce9/html5/thumbnails/12.jpg)
Map View
![Page 13: Practical Guide to Building 2D Web Apps - Esri · 2017 Esri Developer Summit-International--Presentation, 2017 Esri Developer Summit-International, Practical Guide to Building 2D](https://reader030.vdocuments.site/reader030/viewer/2022011822/5ecc5abb5f53fc20cb535ce9/html5/thumbnails/13.jpg)
Add layers
• Layer types
- FeatureLayer
- MapImageLayer
- ImageryLayer
- TileLayer
- VectorTileLayer
- … and more
![Page 14: Practical Guide to Building 2D Web Apps - Esri · 2017 Esri Developer Summit-International--Presentation, 2017 Esri Developer Summit-International, Practical Guide to Building 2D](https://reader030.vdocuments.site/reader030/viewer/2022011822/5ecc5abb5f53fc20cb535ce9/html5/thumbnails/14.jpg)
Layer coding pattern
1. Load module
2. Create layer
3. Set properties
4. Add to map (or scene)
![Page 15: Practical Guide to Building 2D Web Apps - Esri · 2017 Esri Developer Summit-International--Presentation, 2017 Esri Developer Summit-International, Practical Guide to Building 2D](https://reader030.vdocuments.site/reader030/viewer/2022011822/5ecc5abb5f53fc20cb535ce9/html5/thumbnails/15.jpg)
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
![Page 16: Practical Guide to Building 2D Web Apps - Esri · 2017 Esri Developer Summit-International--Presentation, 2017 Esri Developer Summit-International, Practical Guide to Building 2D](https://reader030.vdocuments.site/reader030/viewer/2022011822/5ecc5abb5f53fc20cb535ce9/html5/thumbnails/16.jpg)
Demo: Add layer to sample app
![Page 17: Practical Guide to Building 2D Web Apps - Esri · 2017 Esri Developer Summit-International--Presentation, 2017 Esri Developer Summit-International, Practical Guide to Building 2D](https://reader030.vdocuments.site/reader030/viewer/2022011822/5ecc5abb5f53fc20cb535ce9/html5/thumbnails/17.jpg)
Renderers
• Define a set of symbols to use for the layer
• Set rules on how the symbols should be used
• Basic coding pattern
![Page 18: Practical Guide to Building 2D Web Apps - Esri · 2017 Esri Developer Summit-International--Presentation, 2017 Esri Developer Summit-International, Practical Guide to Building 2D](https://reader030.vdocuments.site/reader030/viewer/2022011822/5ecc5abb5f53fc20cb535ce9/html5/thumbnails/18.jpg)
Symbols
• Renderers make use of symbology
- Points, lines, and polygons
• Pass the symbol to the renderer
![Page 19: Practical Guide to Building 2D Web Apps - Esri · 2017 Esri Developer Summit-International--Presentation, 2017 Esri Developer Summit-International, Practical Guide to Building 2D](https://reader030.vdocuments.site/reader030/viewer/2022011822/5ecc5abb5f53fc20cb535ce9/html5/thumbnails/19.jpg)
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
![Page 20: Practical Guide to Building 2D Web Apps - Esri · 2017 Esri Developer Summit-International--Presentation, 2017 Esri Developer Summit-International, Practical Guide to Building 2D](https://reader030.vdocuments.site/reader030/viewer/2022011822/5ecc5abb5f53fc20cb535ce9/html5/thumbnails/20.jpg)
Demo: Update feature layer renderer
![Page 21: Practical Guide to Building 2D Web Apps - Esri · 2017 Esri Developer Summit-International--Presentation, 2017 Esri Developer Summit-International, Practical Guide to Building 2D](https://reader030.vdocuments.site/reader030/viewer/2022011822/5ecc5abb5f53fc20cb535ce9/html5/thumbnails/21.jpg)
Interactive Map
• Make map interactive
- Popups
- Query
- Filter out features based on a definition expression
![Page 22: Practical Guide to Building 2D Web Apps - Esri · 2017 Esri Developer Summit-International--Presentation, 2017 Esri Developer Summit-International, Practical Guide to Building 2D](https://reader030.vdocuments.site/reader030/viewer/2022011822/5ecc5abb5f53fc20cb535ce9/html5/thumbnails/22.jpg)
Popups
• Responsive widget
• Information about
- Clicked location
- Feature
- Search results
• Customizable
![Page 23: Practical Guide to Building 2D Web Apps - Esri · 2017 Esri Developer Summit-International--Presentation, 2017 Esri Developer Summit-International, Practical Guide to Building 2D](https://reader030.vdocuments.site/reader030/viewer/2022011822/5ecc5abb5f53fc20cb535ce9/html5/thumbnails/23.jpg)
FeatureLayer PopupTemplate
• View has associated popup
• Popup content is set via PopupTemplate
• FeatureLayer has popupTemplate
• Popup’s dockOptions
![Page 24: Practical Guide to Building 2D Web Apps - Esri · 2017 Esri Developer Summit-International--Presentation, 2017 Esri Developer Summit-International, Practical Guide to Building 2D](https://reader030.vdocuments.site/reader030/viewer/2022011822/5ecc5abb5f53fc20cb535ce9/html5/thumbnails/24.jpg)
Popup: Custom Actions
![Page 26: Practical Guide to Building 2D Web Apps - Esri · 2017 Esri Developer Summit-International--Presentation, 2017 Esri Developer Summit-International, Practical Guide to Building 2D](https://reader030.vdocuments.site/reader030/viewer/2022011822/5ecc5abb5f53fc20cb535ce9/html5/thumbnails/26.jpg)
Widgets
• Responsive widgets
• Customizable
![Page 27: Practical Guide to Building 2D Web Apps - Esri · 2017 Esri Developer Summit-International--Presentation, 2017 Esri Developer Summit-International, Practical Guide to Building 2D](https://reader030.vdocuments.site/reader030/viewer/2022011822/5ecc5abb5f53fc20cb535ce9/html5/thumbnails/27.jpg)
View UI
• Position widgets
- Add
- Move
- Remove
![Page 28: Practical Guide to Building 2D Web Apps - Esri · 2017 Esri Developer Summit-International--Presentation, 2017 Esri Developer Summit-International, Practical Guide to Building 2D](https://reader030.vdocuments.site/reader030/viewer/2022011822/5ecc5abb5f53fc20cb535ce9/html5/thumbnails/28.jpg)
Expand
• Expandable container
![Page 29: Practical Guide to Building 2D Web Apps - Esri · 2017 Esri Developer Summit-International--Presentation, 2017 Esri Developer Summit-International, Practical Guide to Building 2D](https://reader030.vdocuments.site/reader030/viewer/2022011822/5ecc5abb5f53fc20cb535ce9/html5/thumbnails/29.jpg)
Please Take Our Survey!
Download the Esri Events app
and go to DevSummit
Select the session you attended
Scroll down to the
“Feedback” section
Complete Answers,
add a Comment,
and Select “Submit”
![Page 30: Practical Guide to Building 2D Web Apps - Esri · 2017 Esri Developer Summit-International--Presentation, 2017 Esri Developer Summit-International, Practical Guide to Building 2D](https://reader030.vdocuments.site/reader030/viewer/2022011822/5ecc5abb5f53fc20cb535ce9/html5/thumbnails/30.jpg)
![Page 31: Practical Guide to Building 2D Web Apps - Esri · 2017 Esri Developer Summit-International--Presentation, 2017 Esri Developer Summit-International, Practical Guide to Building 2D](https://reader030.vdocuments.site/reader030/viewer/2022011822/5ecc5abb5f53fc20cb535ce9/html5/thumbnails/31.jpg)
Did you know?
Esri Corporate Template-Dark v3.3
16:9 version – January 21, 2016
For More Templates, Sample Files, and Icons See
https://compass.esri.com/resources/presentations/Pages/Main.aspx
New Feature
Footers have been added to this template. To learn about using footers for PowerPoint 2010:
https://support.office.com/en-US/article/Add-a-header-or-footer-882EFCEA-35CD-4B68-AC0B-041AE1BA7099
For PowerPoint 2013:
https://support.office.com/en-US/article/Video-Add-headers-and-footers-to-a-presentation-C76A96AA-6622-442E-
8B0A-ED75BBAE22B3
Videos not working?For video in PowerPoint, animated GIF is recommended. AVI and WMV (native PC files) will work best on a PC platform. H.264
MP4 will work only on PowerPoint 2013 and later.
![Page 32: Practical Guide to Building 2D Web Apps - Esri · 2017 Esri Developer Summit-International--Presentation, 2017 Esri Developer Summit-International, Practical Guide to Building 2D](https://reader030.vdocuments.site/reader030/viewer/2022011822/5ecc5abb5f53fc20cb535ce9/html5/thumbnails/32.jpg)
Aspect Ratio Test
Esri Corporate Template-Dark v3.3
16:9 version – January 21, 2016
If this shape does not appear as
a perfect circle, adjust the aspect
ratio of your display until it does.
Try the resolution 1920x1080 for
16:9 displays.