Esri UC 2014 | Technical Workshop |

ArcGIS API for JavaScript: An Introduction Kelly Hutchins Derek Swingley

Esri UC 2014 | Technical Workshop |

Why

ArcGIS API for JavaScript: An Introduction

• Interactive maps • ArcGIS Online basemaps • Widgets: Geocoder, Home, Locate, etc. • Analysis: GP, location analytics, geoenrichment • …explore the samples

Esri UC 2014 | Technical Workshop |

Getting Help

• Forums • GIS.StackExchange • Twitter

- #esrijs

ArcGIS API for JavaScript: An Introduction

@derekswingley

@kellyhutchins

Esri UC 2014 | Technical Workshop |

Build an application

ArcGIS API for JavaScript: An Introduction

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

• Tips and Gotchas

Esri UC 2014 | Technical Workshop |

Get the API

ArcGIS API for JavaScript: An Introduction

• Hosted

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

Esri UC 2014 | Technical Workshop |

Gotcha: Scrambled tiles

ArcGIS API for JavaScript: An Introduction

Esri UC 2014 | Technical Workshop |

<script src=“//js.arcgis.com/3.10”></script>

Tip: Protocol Relative URL

ArcGIS API for JavaScript: An Introduction

• Prevent mixed-content messages

<script src=“http://js.arcgis.com/3.10”></script>

Esri UC 2014 | Technical Workshop |

Learn about the API

ArcGIS API for JavaScript: An Introduction

Esri UC 2014 | Technical Workshop |

Make a map

ArcGIS API for JavaScript: An Introduction

Esri UC 2014 | Technical Workshop |

Make a map

ArcGIS API for JavaScript: An Introduction

Esri UC 2014 | Technical Workshop |

World Topographic Map

ArcGIS API for JavaScript: An Introduction

Esri UC 2014 | Technical Workshop |

Ocean Basemap

ArcGIS API for JavaScript: An Introduction

Esri UC 2014 | Technical Workshop | ArcGIS API for JavaScript: An Introduction

Esri UC 2014 | Technical Workshop |

Tip: Find the center

ArcGIS API for JavaScript: An Introduction

Esri UC 2014 | Technical Workshop |

Demo: Create map

ArcGIS API for JavaScript: An Introduction

Esri UC 2014 | Technical Workshop |

Widgets

• Legend • Directions • Geocoder • Print • Basemap Gallery • And more

ArcGIS API for JavaScript: An Introduction

Esri UC 2014 | Technical Workshop |

Widget coding pattern

• Create widget • Set widget properties • Call startup

ArcGIS API for JavaScript: An Introduction

Esri UC 2014 | Technical Workshop |

Demo: Add Geocoder widget

ArcGIS API for JavaScript: An Introduction

Esri UC 2014 | Technical Workshop |

Edit geometries

• Helper class • Edit geometries

- Move - Modify vertices - Rotate and scale

ArcGIS API for JavaScript: An Introduction

Esri UC 2014 | Technical Workshop |

Demo: Use edit to move graphics

ArcGIS API for JavaScript: An Introduction

Esri UC 2014 | Technical Workshop |

Tasks

• Find Nearest • Find Address • Reverse Geocode • Closest Facility • And more …

ArcGIS API for JavaScript: An Introduction

Esri UC 2014 | Technical Workshop |

Create a task

• Create the task • Execute method • Handle results

ArcGIS API for JavaScript: An Introduction

Esri UC 2014 | Technical Workshop |

Demo: Add reverse geocode to app

ArcGIS API for JavaScript: An Introduction

Esri UC 2014 | Technical Workshop |

Add Layers

ArcGIS API for JavaScript: An Introduction

Esri UC 2014 | Technical Workshop |

Layer coding pattern

• Create layer • Specify layer specific properties • Add to map

ArcGIS API for JavaScript: An Introduction

Esri UC 2014 | Technical Workshop |

Tip: Adding secure layers

• Identity Manager • OAuth support

ArcGIS API for JavaScript: An Introduction

Esri UC 2014 | Technical Workshop |

Adding layers – Feature layers

• Vector data • Interactive

- Editing, selection

• Attribute and spatial queries • Popups

ArcGIS API for JavaScript: An Introduction

Esri UC 2014 | Technical Workshop |

Demo: Add feature layer to application

ArcGIS API for JavaScript: An Introduction

Esri UC 2014 | Technical Workshop |

Renderers

ArcGIS API for JavaScript: An Introduction

Esri UC 2014 | Technical Workshop |

Popups

ArcGIS API for JavaScript: An Introduction

• Add interactivity • Information about …

- a location - a feature - the results of an address search

• Customizable

Esri UC 2014 | Technical Workshop |

Popup Examples

ArcGIS API for JavaScript: An Introduction

Esri UC 2014 | Technical Workshop |

Demo: Display geocode results in a popup

ArcGIS API for JavaScript: An Introduction

Esri UC 2014 | Technical Workshop |

Tip: Simplify code using a web map

• esri/arcgis/utils - createMap - getLegendLayers

ArcGIS API for JavaScript: An Introduction

Esri UC 2014 | Technical Workshop |

Thank you…

• Please fill out the session survey:

First Offering ID: 1134 Second Offering ID: 1251

Online – www.esri.com/ucsessionsurveys Paper – pick up and put in drop box

ArcGIS API for JavaScript: An Introduction

Esri UC 2014 | Technical Workshop | ArcGIS API for JavaScript: An Introduction