web appbuilder: customize esri widgets or build your own ... · why javascript api...
TRANSCRIPT
![Page 1: Web AppBuilder: customize Esri Widgets or build your own ... · Why JavaScript API •“Silverlight - Rest in Peace”-Rex Hanson – Esri Product Manager •Create public map viewer](https://reader035.vdocuments.us/reader035/viewer/2022062913/5e15f106af2fc6782514de2c/html5/thumbnails/1.jpg)
Web AppBuilder:
customize Esri Widgets or build your
own using JavaScript API
Presented by: Dave Orlando, GIS Analyst, RD Central Okanagan
April 26, 2016
![Page 2: Web AppBuilder: customize Esri Widgets or build your own ... · Why JavaScript API •“Silverlight - Rest in Peace”-Rex Hanson – Esri Product Manager •Create public map viewer](https://reader035.vdocuments.us/reader035/viewer/2022062913/5e15f106af2fc6782514de2c/html5/thumbnails/2.jpg)
Regional District of Central Okanagan
• < 2010
- Internal application built with Map Objects
- Web application built with WebADF
• 2010 – present
- Web application built with Silverlight API
• Present - …..
- Web application built with Web AppBuilder (JavaScript API)
![Page 3: Web AppBuilder: customize Esri Widgets or build your own ... · Why JavaScript API •“Silverlight - Rest in Peace”-Rex Hanson – Esri Product Manager •Create public map viewer](https://reader035.vdocuments.us/reader035/viewer/2022062913/5e15f106af2fc6782514de2c/html5/thumbnails/3.jpg)
Why Web AppBuilder,
Why JavaScript API
• “Silverlight - Rest in Peace”
- Rex Hanson – Esri Product Manager
• Create public map viewer to replace current application
• Most functionality possible
• Least effort / shortest learning curve
• Leverage Esri developers
• JavaScript is only API left for Web development
![Page 4: Web AppBuilder: customize Esri Widgets or build your own ... · Why JavaScript API •“Silverlight - Rest in Peace”-Rex Hanson – Esri Product Manager •Create public map viewer](https://reader035.vdocuments.us/reader035/viewer/2022062913/5e15f106af2fc6782514de2c/html5/thumbnails/4.jpg)
How Web AppBuilder accesses your data
• REST endpoint (your ArcServer)
• Web Map (ArcGIS.com)
![Page 5: Web AppBuilder: customize Esri Widgets or build your own ... · Why JavaScript API •“Silverlight - Rest in Peace”-Rex Hanson – Esri Product Manager •Create public map viewer](https://reader035.vdocuments.us/reader035/viewer/2022062913/5e15f106af2fc6782514de2c/html5/thumbnails/5.jpg)
Web AppBuilder • Four configuration pages
![Page 6: Web AppBuilder: customize Esri Widgets or build your own ... · Why JavaScript API •“Silverlight - Rest in Peace”-Rex Hanson – Esri Product Manager •Create public map viewer](https://reader035.vdocuments.us/reader035/viewer/2022062913/5e15f106af2fc6782514de2c/html5/thumbnails/6.jpg)
Widgets
Widgets requiring panel
Widgets on-screen
![Page 7: Web AppBuilder: customize Esri Widgets or build your own ... · Why JavaScript API •“Silverlight - Rest in Peace”-Rex Hanson – Esri Product Manager •Create public map viewer](https://reader035.vdocuments.us/reader035/viewer/2022062913/5e15f106af2fc6782514de2c/html5/thumbnails/7.jpg)
Widgets - configuration • Most are full point & click configuration
• Others require ArcGIS online ‘helper’ items
• Some can use your REST items
![Page 8: Web AppBuilder: customize Esri Widgets or build your own ... · Why JavaScript API •“Silverlight - Rest in Peace”-Rex Hanson – Esri Product Manager •Create public map viewer](https://reader035.vdocuments.us/reader035/viewer/2022062913/5e15f106af2fc6782514de2c/html5/thumbnails/8.jpg)
Query Widget
• Query any layer in WebMap or REST endpoint
![Page 9: Web AppBuilder: customize Esri Widgets or build your own ... · Why JavaScript API •“Silverlight - Rest in Peace”-Rex Hanson – Esri Product Manager •Create public map viewer](https://reader035.vdocuments.us/reader035/viewer/2022062913/5e15f106af2fc6782514de2c/html5/thumbnails/9.jpg)
Search Widget
• Search using a Geocoder or Feature Layer
![Page 10: Web AppBuilder: customize Esri Widgets or build your own ... · Why JavaScript API •“Silverlight - Rest in Peace”-Rex Hanson – Esri Product Manager •Create public map viewer](https://reader035.vdocuments.us/reader035/viewer/2022062913/5e15f106af2fc6782514de2c/html5/thumbnails/10.jpg)
Query & Search Widget
• Both widgets reference data layers by the layer’s index # in the
REST service
• Be very conscious of this when adding layers to your services,
you queries will stop working
• Two possible solution:
• Create a ‘select’ MapService that is used for selections only, no
display at all. This lets you add new layers to the bottom with no
regard to display
• ArcMap / ArcServer 10.3+ has a new feature to overwrite the layer
indices when publishing
![Page 11: Web AppBuilder: customize Esri Widgets or build your own ... · Why JavaScript API •“Silverlight - Rest in Peace”-Rex Hanson – Esri Product Manager •Create public map viewer](https://reader035.vdocuments.us/reader035/viewer/2022062913/5e15f106af2fc6782514de2c/html5/thumbnails/11.jpg)
Directions Widget • esri’s route service requires ArcGIS credentials
• Can proxy credentials through ArcGIS ‘item’
• Use your own Geocoder
![Page 12: Web AppBuilder: customize Esri Widgets or build your own ... · Why JavaScript API •“Silverlight - Rest in Peace”-Rex Hanson – Esri Product Manager •Create public map viewer](https://reader035.vdocuments.us/reader035/viewer/2022062913/5e15f106af2fc6782514de2c/html5/thumbnails/12.jpg)
Print Widget
• Print using your own templates (empty MXDs)
![Page 13: Web AppBuilder: customize Esri Widgets or build your own ... · Why JavaScript API •“Silverlight - Rest in Peace”-Rex Hanson – Esri Product Manager •Create public map viewer](https://reader035.vdocuments.us/reader035/viewer/2022062913/5e15f106af2fc6782514de2c/html5/thumbnails/13.jpg)
Geoprocessing Widget
• Running your Models
![Page 14: Web AppBuilder: customize Esri Widgets or build your own ... · Why JavaScript API •“Silverlight - Rest in Peace”-Rex Hanson – Esri Product Manager •Create public map viewer](https://reader035.vdocuments.us/reader035/viewer/2022062913/5e15f106af2fc6782514de2c/html5/thumbnails/14.jpg)
Custom Widget (JavaScript API)
• ArcGIS API for JavaScript resource page
• https://developers.arcgis.com/javascript/
![Page 15: Web AppBuilder: customize Esri Widgets or build your own ... · Why JavaScript API •“Silverlight - Rest in Peace”-Rex Hanson – Esri Product Manager •Create public map viewer](https://reader035.vdocuments.us/reader035/viewer/2022062913/5e15f106af2fc6782514de2c/html5/thumbnails/15.jpg)
Custom Widget (JavaScript API)
• Web AppBuilder for ArcGIS resource page
• https://developers.arcgis.com/web-appbuilder/
![Page 16: Web AppBuilder: customize Esri Widgets or build your own ... · Why JavaScript API •“Silverlight - Rest in Peace”-Rex Hanson – Esri Product Manager •Create public map viewer](https://reader035.vdocuments.us/reader035/viewer/2022062913/5e15f106af2fc6782514de2c/html5/thumbnails/16.jpg)
Custom Widget (JavaScript API)
• Visual Studio
![Page 17: Web AppBuilder: customize Esri Widgets or build your own ... · Why JavaScript API •“Silverlight - Rest in Peace”-Rex Hanson – Esri Product Manager •Create public map viewer](https://reader035.vdocuments.us/reader035/viewer/2022062913/5e15f106af2fc6782514de2c/html5/thumbnails/17.jpg)
Custom Widget (JavaScript API)
• Widget.js
![Page 18: Web AppBuilder: customize Esri Widgets or build your own ... · Why JavaScript API •“Silverlight - Rest in Peace”-Rex Hanson – Esri Product Manager •Create public map viewer](https://reader035.vdocuments.us/reader035/viewer/2022062913/5e15f106af2fc6782514de2c/html5/thumbnails/18.jpg)
Custom Widget (JavaScript API)
• Widget.js
• Step 1: query address points, feed geometries to Step 2
![Page 19: Web AppBuilder: customize Esri Widgets or build your own ... · Why JavaScript API •“Silverlight - Rest in Peace”-Rex Hanson – Esri Product Manager •Create public map viewer](https://reader035.vdocuments.us/reader035/viewer/2022062913/5e15f106af2fc6782514de2c/html5/thumbnails/19.jpg)
Custom Widget (JavaScript API)
• Widget.js
• Step 2: buffer points, add results to GraphicLayer
![Page 21: Web AppBuilder: customize Esri Widgets or build your own ... · Why JavaScript API •“Silverlight - Rest in Peace”-Rex Hanson – Esri Product Manager •Create public map viewer](https://reader035.vdocuments.us/reader035/viewer/2022062913/5e15f106af2fc6782514de2c/html5/thumbnails/21.jpg)
• Questions?.....
Thank-you,
Dave Orlando, GIS Analyst, RDCO
250-469-6267