Building Web Applications Using ArcGIS

API for JavaScript

Ken Leung
Sam Wong
Build an application

• Learn how to
- Create a map
- Add layers
- Work with widgets
- Display information
- Use a renderer

• Tips and Gotchas

ArcGIS API for JavaScript: An Introduction

Get the API

• Hosted

• Download
- http://www.esri.com/apps/products/download/

ArcGIS API for JavaScript: An Introduction

Tip: Protocol Relative URL

• Prevent mixed-content messages

<script src=“http://js.arcgis.com/3.12”></script
src=“//js.arcgis.com/3.12”></script> >
Learn about the API
Make a map
Make a map
World Topographic Map
Ocean Basemap
Tip: Find the center
Make a map with
auto center and
zoom level
Sam Wong
Widgets

• Legend
• Directions
• Geocoder
• Print
• Basemap Gallery
• And more
Widget coding pattern

• Create widget
• Set widget properties
• Call startup
Geocoder Widget
Sam Wong
Edit geometries

• Helper class
• Edit geometries
- Move
- Modify vertices
- Rotate and scale
Use edit to move graphics
Editor Widget
Sam Wong
Tasks

• Find Nearest
• Find Address
• Reverse Geocode
• Closest Facility
• And more …
Create a task

• Create the task

• Execute method
• Handle results
Example: Add reverse geocode to app
Add Reverse
Geocode
Sam Wong
Add Layers
Layer coding pattern

• Create layer
• Specify layer specific properties
• Add to map
Add feature layer to application
Add Feature Layer
Sam Wong
Popups

• Add interactivity
• Information about …
- a location
- a feature
- the results of an address search
• Customizable
Popup Examples
Customize
Samaple Popup
Sam Wong
Designing for mobile
Mobile app using Java Script
Mobile resources in the API

ArcGIS for JavaScript: An Introduction

Touch aware map

ArcGIS for JavaScript: An Introduction

HTML 5 input types

ArcGIS for JavaScript: An Introduction

Geocoder, HomeButton

esri/dijit/Geocoder

esri/dijit/HomeButton

ArcGIS for JavaScript: An Introduction

Popup Mobile

esri/dijit/PopupMobile

ArcGIS for JavaScript: An Introduction

App Like Website
Sam Wong
What’s new in Java Script API
What’s new in Java Script API

• Simplifying workflows
• Better data visualization tools

ArcGIS for JavaScript: An Introduction

Querying – point and distance (3.9)

ArcGIS for JavaScript: An Introduction

Querying – geometry and distance (3.9)

ArcGIS for JavaScript: An Introduction

Simpler – Not Necessary LabelLayer (Showlabel = true)

ArcGIS for JavaScript: An Introduction

Map Widgets

ArcGIS for JavaScript: An Introduction

CSV Layer

ArcGIS for JavaScript: An Introduction

Simpler Oauth 2 secure layers

• Identity Manager
• OAuth support

OAuth
Smarter map navigation

ArcGIS for JavaScript: An Introduction

Data Visualization

• Three new properties on renderer

- Rotation
- Proportional symbol
- Color (ramp)
• Dot density renderer
• Scale dependent renderer
• Stylize features with CSS

ArcGIS for JavaScript: An Introduction

Rotation

0°

0°

Geographic Arithmetic
ArcGIS for JavaScript: An Introduction
Proportional Symbol
Distance-based quantity

Non-distance-based quantity

ArcGIS for JavaScript: An Introduction

Continuous Color (color ramp)

ArcGIS for JavaScript: An Introduction

Dot Density

ArcGIS for JavaScript: An Introduction

Scale Dependent Renderer

ArcGIS for JavaScript: An Introduction

Stylize Features with CSS
JavaScript

CSS

ArcGIS for JavaScript: An Introduction

Analysis

ArcGIS for JavaScript: An Introduction

Analysis

ArcGIS for JavaScript: An Introduction

Set SVG Path for SimpleMarkerSymbol
http://raphaeljs.com/icons/

ArcGIS for JavaScript: An Introduction

What’s new in Java
Script API
Sam Wong
Share your moment #EsriAPUC