Developer Workshop

Dave Timmins - Senior GIS Developer - Eagle Technology

Agenda

ArcGIS for Developers
New Stuff
Web App Builder
Custom Development
Anything else?

ArcGIS for Developers

developers.arcgis.com
Documentation
Samples
Community

Your Content

Downloads
Hosted Data
Registered Applications
Usage Summary

Community

developers.arcgis.com
Events
Forums
Stack Overflow
GIS Stack Exchange
Blogs

OSS

Esri on GitHub
Other devs

GeoNet

Replaces old forums
Has enhanced community features
Promotes collaboration

Twitter

Great source of information
Lots of active geo geeks
Esri devs list
Eagle staff list

Show me some new stuff*

*^{Actual stuff may not be new to you}

1. Popup improvements

Use related fields in a popup template

"fieldName": "Point_Count_COMMON" // not related
"fieldName": "relationships/0/Point_Count_COMMON" // related

Light and Dark popup themes

2. Proxies

.NET, Java, PHP
Accessing resources secured with token based authentication
OAuth 2.0 app logins
Enabling logging
Both resource and referer based rate limiting

3. Better vector maps

Rotation
Symbol scaling
Dot density renderer
Scale dependent renderer

3.1. Rotation

Geographic Arithmetic

layer.renderer.setRotationInfo({
	field: 'heading',
	type: 'geographic'
});

3.2. Symbol scaling

layer.renderer.setProportionalSymbolInfo({
	field: 'GroundArea',
	valueUnit: 'meters',
	valueRepresentation: 'area'
});

layer.renderer.setProportionalSymbolInfo({
	field: 'GroundArea',
	minDataValue: 1,
	minSize: 4,
	maxDataValue: 100,
	maxSize: 20
});

3.3. Dot density renderer

var renderer = new DotDensityRenderer({
  fields: [{
    name: "M163_07",
    color: new Color("#CC8800")
  }],
  dotValue: 1600,
  dotSize: 1
});
layer.setRenderer(renderer);

3.4. Scale dependent renderer

var params = {rendererInfos: [{
  "renderer": renderer1,
  "minScale": 50000000,
  "maxScale": 10000000
}, {
  "renderer": renderer2,
  "minScale": 10000000,
  "maxScale": 5000000
}]};

var scaleDependentRenderer = new ScaleDependentRenderer(params);
layer.setRenderer(scaleDependentRenderer);

4. jsapi-resources

New repository on GitHub with TypeScript definitions for the JS API as well as the jshint options file used by the JS API team

5. New Layers

6. jso.arcgis.com

Create custom builds of the JS API
Host online or download
Doesn't require credits
Potential benefits

7. Circles _

var circle = new Circle({
  center: point,
	radius: 100
});

var graphic = new Graphic(circle, symbol);
map.graphics.add(graphic);

8. New Map Widgets

Home button
Locate button
Swipe tool

9. Go Offline

Finally!
Export tiles from tiled service
Sync framework for feature services

10. Web App Builder

Web App Builder

What is it?

Web AppBuilder for ArcGIS is an intuitive what-you-see-is-what-you-get (WYSIWYG) application that allows you to easily build web applications without writing a single line of code. It includes powerful tools to configure fully featured HTML web applications. As you add your map and tools, you can visually see them in the app and use them right away. Think of it as the HTML5 and JS equivalent of Silverlight and Flex Builders Delivers pure HTML-based applications that work on desktop browsers, tablets, and even smart phones Completely integrated within the ArcGIS Online and Portal for ArcGIS platforms Provides over 30 out-of-the-box widgets, such as mapping, query, geoprocessing, analysis, editing, and printing, and so on Supports both 2D and 3D map applications Extensible framework for developers to create widgets or themes, and embed them in applications ArcGIS Platform integration To access Web AppBuilder for ArcGIS, you must have ArcGIS Online organization account or Portal for ArcGIS account Currently at beta 2 so need to sign up at https://betacommunity.esri.com Release scheduled with ArcGIS 10.3

Supported Browsers

Chrome
Firefox
Safari 3+
Internet Explorer 9+

Installation

Stupid simple
Download Unzip run start.bat
or
run node server.js in directory from command prompt

Create an App

Set the map (webmap)
Set the theme
Choose your widgets
Set the app attributes
Run it!

Webmap 101

Basemap
Operational data
Popups
and more
More info

Set your (Web)map

Author on ArcGIS Online
or Portal
Set the start extent

Set your theme

Determines look and feel
Layout
Affects the UX

App Attributes

Title
Subtitle
Logo
Links
Use a proxy

Widgets

OOTB

Some are preconfigured with a layout
In-panel and off-panel widgets
~20 included currently

Off-Panel widgets

Attribute table
Coordinate
Geocoder
Home Button
My Location
Overview Map
Scalebar

Off-panel widgets are available as part of a theme but not addable to the widgets' controller. They can be turned on or off but cannot be removed from the application. When the Widget tab is activated, the off-panel widgets embedded in a theme display. An off-panel widget does not have a panel and cannot be contained by header or side controllers. Attribute table—Displays a tabular view of a feature layer's attributes. Coordinate—Displays coordinates in the current map projection when moving the cursor on the map or in other coordinate systems by clicking the map. Geocoder—Enables finding a location on the map. Home Button—Click to zoom to map's initial extent. My Location—Detects your physical location and zooms the map to it. Overview Map—Shows the current spatial extent of the map display as a grey rectangle relative to the entire spatial extent of the basemap service. Scalebar—Displays a scalebar on the map

In-Panel widgets

Basemap Gallery
Bookmark
Chart
Directions
Draw
Edit

In-panel widgets are available to the widget controllers and can be added to your application. By default, they are contained by a controller. Depending on which theme you select, they may show in the upper right corner of the application with the header controller in a Foldable theme, or on the left side of the application with the side controller in the Tab theme. Each in-panel widget requires user interactions on the panel. In addition, in-panel widgets are associated with placeholders that define the position of an in-panel widget. Instead of displaying in the controller, an in-panel widget can also display in the placeholder. Basemap Gallery—Presents a gallery of basemaps and allows you to select one. Bookmark—Spatial bookmarks for quick navigation. Chart—Display charts for selected features. Directions—Calculates and displays directions between two or more locations. Draw—Draws basic graphics and texts on the map. Edit—Provides tools to modify features in editable layers.

In-Panel widgets cont.

Geoprocessing
Layer List
Legend
Measurement
Print
Query

Demo Time!

Super awesome demo

Customization Options

Edit existing widgets / themes
Create widgets
Create themes - styles and layouts

Geocoder

Change the default behaviour

Enough config, lets build something

Custom Widgets

Naming convention
Required files
In or Off Panel
Can be configurable (code and in builder)
Support multiple cultures
Support themes
Communication with app container, map and other widgets

Convention and Defaults

Widget class - Uses the convention name, Widget.js. A minimal widget can be just this one JS file. Widget template (widget UI) - Uses the same name as the widget class except with a .html extension. For example, Widget.html. Widget configuration file - Uses the config.json file and puts it into the widget folder. Widget I18N file (locale file) - Uses the strings.js file and puts it into the nls folder. For more information, see Dojo’s documentation at http://dojotoolkit.org/documentation/tutorials/1.8/i18n/. Widget style file - Uses the style.css file and puts it into the css folder. Puts all the images used by the style into the images css subfolder. Widget icon files - Uses the icon.png file name and puts it into the images folder. Widget manifest file - Uses the name manifest.json to describe the widget’s content. The JavaScript file that defines the widget (Widget.js) - only required file to work Template file that defines the widget’s UI (Widget.html) The widget’s configuration file (config.json) The widget’s i18n strings file (nls/strings.js) The widget’s style file (css/style.css)

BaseWidget

define(['dojo/_base/declare', 'jimu/BaseWidget'],
function(declare, BaseWidget){
  return declare([BaseWidget], {
		// do stuff here
  });
});

Lets Create a Widget

OpenWeatherMap

Combine forces

Custom Themes

Panels
Theme Widgets
Styles
Layouts
Images
manifest.json

An ArcGIS Web AppBuilder theme is a collection of user interface elements that define an app's look-and-feel, layout, app navigation, and on screen functional UI items such as scale bar, overview map, and so on. By developing a theme, you can create your application's interface, interactive user experience, and branding style. The theme elements includes widget panels, style sheets, and layout definitions and theme widgets. One app can include more than one theme, but can only use one theme while running. A Panel is a UI window that displays a widget's content. A Panel can be developed to have its own distinguish behaviors and style for a specific theme. For example, you can develop a Panel that can be dragged around the screen and have purple color style that matches your overall theme style. With the theme Panel, widget developers can focus on developing a widget's function and content without worrying about how the widget displays, which further simplifies the widget development task. A theme can contain multiple Panels. A Theme widget is no more than a regular Web AppBuilder widget in terms of coding. However, without this widget as part of the theme, the theme is not complete. For example, the Header Controller widget is part of the out-of-the-box theme, called Foldable theme. Header Controller is developed to navigate all the widgets configured into an app. Creating the Theme widget is also a mechanism to ensure a theme can be shared as whole. A Style is a CSS file that you can define your CSS rules in. One theme can contains multiple styles. A Layout theme is essentially an app configuration placing all the UI elements (widgets) on the screen. It also includes predefined position holders (placeholders) on the screen that can be configured with widgets in the GUI AppBuilder. A theme can have multiple layouts. All theme elements are contained inside a folder. The folder name should be the same as the theme's name. Similar to a widget, a theme must have an icon file named icon.png, which is under the \images folder. The theme root folder contains a common.css file. It defines the style content that is common for all styles. A theme can include multiple styles in the \styles folder. Each style has a folder that is named the same as the style name. Each style must have a style.css file. There must be a style named default. A theme can include multiple panels in the \panels folder. Each panel has a folder named the same as the panel name. Each panel must have a Panel.js file. A theme can include multiple layouts in the \layouts folder. Each layout has a folder named the same as the layout name. Each layout must have a config.json file and an icon.png file. There must be a layout named default. There must be a manifest.json file to describe the theme's content.

Lets Create a Theme

Deployment

Download zip from WAB
Unzip and configure with web server
APP ID?

Third Party Libraries

Yes you can use them

Lets Deploy!

What about different environments?

Before we move on

Custom Development

COTS vs. Custom

When?
Why?

COTS

Custom

Types of Apps

Map centric
Maps as app navigation
Map as context
Map-less apps

What sort of app are you building? Who is the target audience. Can your mum use it? Map centric - all about the map. In map-centric apps, the map is the most important thing about the app. Usually the map opens first and is the focus of the app. Examples include the ArcGIS App and Collector for ArcGIS. The user gets value out of the app by interacting with the map; it's the map that provides the desired intelligence or information. Many of these apps open only one map or allow the user to choose from a few maps that are important to them. Users interact with the same map for some time. An example of this type of app is one that allows field workers to: View their organization's assets in relation to their current location. Determine the route and time it will take to get to the asset. The value to the user is the map itself. Maps as app navigation - map helps you get to other information. In maps-as-navigation apps, the map is important, but it's not the most important part of the app. The map in this case drives the navigation of the app and lets the user discover additional information and access other screens that provide value to the user. From the user's point of view, the map itself has little value in this app; it's a tool to get to the information they need. An example of this type of app is one that allows users to define areas on the map that show what properties are for sale, what school districts the properties are in, and what the average sales price is. The valuable content for the user is not the map, but the resulting information. However, without the map, the user is unable to get to the target information Map as context - map may provide extra information though it is secondary to other data. Map driven by other content, embedded in other information In a map-as-context app, the map is an additional view in the app and is mainly used for contextual purposes. The map is created and shown based on some other source information also visible in the app. The map displays additional information, which the user can choose to consider. The map is typically auto-populated with the correct layers, layer filters (also called layer definitions), location, and zoom level specifically based on the source information. An example of this scenario is displaying a weather map for a specific location and time. The source information in this case is the location name, the time of day, and the weather forecast for that area (temperature, wind speed, humidity, and so on). Initially, the map shows additional weather information (cloud cover and rain radar for example) for the location and its surroundings at the time that is being displayed. If the user changes the time of day, the map updates to show the weather information for the new time. The information the user wants to know is the weather forecast (the source information); the map in this case is additional contextual information that adds value to the source information. Map-less apps - user doesn't know there is a spatial component, adds spatial intelligence. Mapless apps that contain location-based intelligence are common and valuable, especially in devices that leverage GPS and motion sensors to provide information to users. In this pattern, the user should never know about GIS, spatial intelligence, or mapping, and you should choose your tool names and information screens carefully to hide these from the user. Example - how far away is the nearest petrol station? How many cafes are near me etc. Other considerations, cartography - simple or complex, tools - broad or focused, many or limited, popups

Development Toolbox

IDE
Source Control
Design
Collaboration
Knowledge sharing / discovery
Testing

Lets Look at Code

Dave's example project

Leverage Existing Widgets

Remember

Read code
Write code
Delete code
Repeat

Other Examples

The Great Kiwi Map Challenge

bit.ly/Storymapcontest
Vote for your favourite
Winner gets a Panasonic Toughpad!
Voting ends Tuesday

image from saltoff.co.nz

Find an Eagle staff member
Ask a question
Guess the number of #NZEUC tweets
Follow @eaglegis for updates
Entries close an hour before closing session

Thanks!

@davetimmins

davetimmins.com

Slides