ArcGIS Web Development

By Rene Rubalcava

Summary

ArcGIS Web Development is an example-rich tutorial designed to teach developers to use the ArcGIS JavaScript API to build custom GIS web applications.

About the Technology

Now you can unshackle your GIS application from a workstation! Using the ArcGIS JavaScript API, developers can build mobile and web-based maps and applications driven by ArcGIS data and functionality. Experienced ArcGIS developers will find that the familiar development environment provides a smooth transition to the web. Web developers new to GIS will be pleased by how easily they can apply their existing skills to GIS applications.

Purchase of the print book includes a free eBook in PDF, Kindle, and ePub formats from Manning Publications.

About the Book

ArcGIS Web Development is an example-rich guide that teaches you to use the ArcGIS JavaScript API to build custom GIS web applications. The book begins with easy-to-follow examples that introduce readers to the ArcGIS JavaScript API and show how you can apply simple customizations. As the book progresses, you'll explore a full-scale, web-mapping application. By the end you will be able to build web apps that have features you'd ordinarily expect to find only in dedicated GIS applications.

Written for web developers familiar with JavaScript and basic GIS concepts. Experience with ArcGIS is helpful, but not necessary.

What's Inside

• Build web-based GIS applications
• Customize the ArcGIS Javascript API tools
• Bring ArcGIS data to the web
• Create secure logins for mobile app users

About the Author

Rene Rubalcava is the cofounder of SmartGeoTech, Inc., a GIS development company specializing in Esri technologies.

Table of Contents

PART 1 ARCGIS JAVASCRIPT FOUNDATION
1. GIS as a tool
2. Introducing core API concepts
3. Working with the REST API
PART 2 SAMPLE USE CASE
4. Building an application
5. Developing a custom data-collection application
6. Building a desktop browser application
7. Advanced techniques
APPENDICES

1. Setting up your environment
2. Dojo basics
3. Configuring a proxy

• Language: English
• Publisher: Manning
• Release date: Nov 11, 2014
• ISBN: 9781638355748

Rene Rubalcava

Rene Rubalcava is the co-founder of SmartGeoTech, Inc, a GIS development company specializing in Esri Technologies.

Book preview

Copyright

For online information and ordering of this and other Manning books, please visit www.manning.com. The publisher offers discounts on this book when ordered in quantity. For more information, please contact

        Special Sales Department

        Manning Publications Co.

        20 Baldwin Road

        PO Box 261

        Shelter Island, NY 11964

        Email: 

[e-mail]

©2015 by Manning Publications Co. All rights reserved.

No part of this publication may be reproduced, stored in a retrieval system, or transmitted, in any form or by means electronic, mechanical, photocopying, or otherwise, without prior written permission of the publisher.

Many of the designations used by manufacturers and sellers to distinguish their products are claimed as trademarks. Where those designations appear in the book, and Manning Publications was aware of a trademark claim, the designations have been printed in initial caps or all caps.

Recognizing the importance of preserving what has been written, it is Manning’s policy to have the books we publish printed on acid-free paper, and we exert our best efforts to that end. Recognizing also our responsibility to conserve the resources of our planet, Manning books are printed on paper that is at least 15 percent recycled and processed without elemental chlorine.

ISBN: 9781617291616

Printed in the United States of America

1 2 3 4 5 6 7 8 9 10 – MAL – 19 18 17 16 15 14

Brief Table of Contents

Copyright

Brief Table of Contents

Table of Contents

Preface

Acknowledgments

About this Book

1. ArcGIS JavaScript Foundation

Chapter 1. GIS as a tool

Chapter 2. Introducing core API concepts

Chapter 3. Working with the REST API

2. Sample Use Case

Chapter 4. Building an application

Chapter 5. Developing a custom data-collection application

Chapter 6. Building a desktop browser application

Chapter 7. Advanced techniques

Appendix A. Setting up your environment

Appendix B. Dojo basics

Appendix C. Configuring a proxy

Index

List of Figures

List of Tables

List of Listings

Table of Contents

Copyright

Brief Table of Contents

Table of Contents

Preface

Acknowledgments

About this Book

1. ArcGIS JavaScript Foundation

Chapter 1. GIS as a tool

1.1. GIS: here, there, everywhere

1.1.1. The GIS tools landscape

1.1.2. Introducing the ArcGIS platform

1.1.3. Why care about spatial applications?

1.1.4. Trends in the GIS industry

1.2. Understanding the GIS bits

1.2.1. The what and the where of GIS data

1.2.2. Serving GIS data: ArcGIS Server and the REST API

1.2.3. Choosing an ArcGIS web API

1.3. Things to know

1.3.1. JavaScript, Dojo Toolkit, and Dijit

1.3.2. Introducing a tad of GIS

1.3.3. Interacting with the ArcGIS REST API

1.4. Summary

Chapter 2. Introducing core API concepts

2.1. From data to map

2.1.1. Parts of a basic map

2.1.2. Specifying common map options

2.2. Understanding layers and accessing data

2.2.1. Layer types for raster-based data

2.2.2. Layer types for vector-based data

2.2.3. Getting to know the GraphicsLayer

2.2.4. Creating graphics with the QueryTask

2.3. Working with the FeatureLayer

2.3.1. Advantages of a FeatureLayer

2.3.2. Creating a FeatureLayer

2.3.3. Optimizing application performance

2.3.4. Selecting items in the FeatureLayer

2.4. Summary

Chapter 3. Working with the REST API

3.1. Introducing the ArcGIS Server REST API

3.1.1. Exploring how the API works

3.1.2. Interacting with ArcGIS Server pages

3.2. Building your own widget

3.2.1. Building the legend root menu

3.2.2. Retrieving legend details

3.2.3. Displaying details in the custom legend widget

3.2.4. Working with multiple symbols in a feature

3.3. Working with the geometry service

3.3.1. Buffer your heart out

3.3.2. Buffer and select

3.3.3. Buffer and intersect

3.4. Summary

2. Sample Use Case

Chapter 4. Building an application

4.1. What are you going to build?

4.1.1. Using a tablet or phone

4.1.2. Collecting points

4.1.3. Performing disconnected editing

4.2. Working with ArcGIS Online

4.2.1. ArcGIS Online vs. ArcGIS Server

4.2.2. Setting up an ArcGIS Online account

4.2.3. Defining a feature service

4.2.4. Accessing your ArcGIS Online feature service

4.3. Building a real-world application

4.3.1. Setting up Dojo and organizing modules

4.3.2. Tying the application together

4.4. Adding layers and using the renderer

4.4.1. Adding layers with a module

4.4.2. Using the renderer

4.4.3. Applying the renderer

4.4.4. Setting up the editing tools

4.4.5. Assigning an action to a button

4.5. Summary

Chapter 5. Developing a custom data-collection application

5.1. Performing default web map editing

5.1.1. Finding feature service information

5.1.2. Adding your feature service to the map

5.1.3. Adding the TemplatePicker and default Editor widgets

5.2. Building a custom edit tool

5.2.1. Working with the custom edit functionality

5.2.2. Refining the custom edit tool

5.3. Enabling disconnected editing

5.3.1. Local storage

5.3.2. Caveats

5.3.3. Other storage options

5.4. Summary

Chapter 6. Building a desktop browser application

6.1. The project ahead

6.1.1. Goals of the RequestViewer

6.1.2. Freedom of the desktop browser

6.2. Setting up and configuring the RequestViewer

6.2.1. Creating index.html

6.2.2. Configuring run.js

6.2.3. Starting the RequestViewer

6.2.4. Defining map services

6.2.5. Setting up the application controller

6.3. Setting up authentication with OAuth 2.0

6.3.1. Using your developer account to create an application

6.3.2. Updating main.js

6.3.3. Saving credentials

6.4. Building the user interface

6.4.1. Working with the Measurement widget

6.4.2. Working with the BasemapToggle widget

6.5. Editing requests

6.5.1. Editing a request’s location

6.5.2. Editing a request’s attributes

6.5.3. Incorporating a nonspatial service

6.6. Summary

Chapter 7. Advanced techniques

7.1. Using a single configuration file

7.1.1. Defining a map

7.1.2. Loading the Geocoder widget

7.1.3. Looking for the patterns

7.2. Dynamic widget loading

7.2.1. Widget path and options

7.2.2. Building a widget loader

7.2.3. Testing the widget loader

7.2.4. Adding HTML elements

7.3. Adding a web map

7.3.1. Creating the web map

7.3.2. Adding the web map to an application

7.3.3. Using the web map specification

7.4. Advanced techniques for offline mode

7.4.1. Creating an application cache

7.4.2. Storing data locally with the PouchDB library

7.5. Summary

Appendix A. Setting up your environment

A.1. Visual Studio Express for Web

A.2. XAMPP

A.3. Python

Appendix B. Dojo basics

B.1. AMD loader

AMD’s define and require methods

B.2. Dijit lifecycle

B.3. Common Dojo modules

dojo/_base/lang

dojo/_base/array

dojo/on

Appendix C. Configuring a proxy

C.1. Setting up the proxy page

C.2. Using the proxy in your application

Index

List of Figures

List of Tables

List of Listings

Preface

The last decade has seen a boom in people becoming acclimated to location technology. Most users may not fully realize that they’re using location technology when they get an alert on their phone that there’s traffic on the way home, or when they get a coupon from an app on their phone for a local restaurant. Smart phones are no longer simply devices for making phone calls, texting, and checking email. For many people, they’ve not only replaced the heavy and clumsy map book that your passenger used to help you navigate, but these phones have also replaced the expensive in-dash GPS systems in our vehicles. It’s so easy today to say the name of a store or venue into your phone, and in seconds receive turn-by-turn directions. That’s not to say that these directions may not try to direct you into a lake, but there’s no denying that location technology has become part of our daily lives. We gladly share our current locations with friends and family with as much fervor as when we shared a photo a few years ago. Maps and the information they can convey are great tools that developers should take time to learn to use.

A few years ago, I was tasked with upgrading an enterprise GIS application and bringing it into the modern non-mainframe era. Esri had just started releasing Web APIs for use with their technology. At the time, I built my application with the Flex API, and I delved deep into the world of ActionScript and Flex modular development, but it always felt a bit heavy-handed.

Over time, the Esri JavaScript API became more appealing. It performed better with each release and offered new features that worked with the latest updates to ArcGIS Server. At some point, my focus switched entirely from Flex development to JavaScript, and I immersed myself in every nook and cranny of the API.

I’ve had the pleasure over the years of building numerous applications with the ArcGIS API for JavaScript, even building a business around creating web-mapping applications. I’ve tried to follow each learning hump with a blog post or a presentation to share what I have learned. This is my way of paying it forward—paying it forward for all those blog posts I spent late nights digging through, simply to fix some odd bug or solve a problem I was ready to give up on, and for all the presentations I’ve attended that inspired me to build and learn, to create useful tools and applications, and to strive to learn what I didn’t even know I wanted or needed to learn. This book brings together the knowledge I’ve gained and puts it all in one place. I hope you enjoy reading this book as much as I did writing it.

I also hope you take the foundations laid out here to explore what you can do with web mapping with the ArcGIS API for JavaScript and build some really cool things. Because as developers, isn’t that what we all want to do? Just build.

Acknowledgments

There are numerous people to thank, without whose help and support this book would not have been possible.

I’d like to thank the people at Esri who provided me with great feedback on the subject matter: Jim Barry, Derek Swingley, Andy Gup, Jeremy Bartley, and everyone on the JavaScript API and Server team who answered one of my numerous questions.

Thanks to the Manning Early Access Program (MEAP) readers who posted comments and corrections in the Author Online forum. Thanks also to all the reviewers who provided invaluable feedback: Adam Krein, Alexander Jones, Andrea Tarocchi, Brandon Titus, Cliff Zhao, David Takahashi, Dennis Sellinger, Jaclynn Wilson, Shaun Langley, Tim Djossou, and Vidyasagar Nallapati.

I’d like to thank the entire Manning editorial staff for helping me every single step of the way in writing this book. My development editor, Susan Conant, helped me brainstorm ideas for this book and was quick to answer all my questions and show me how to teach, not tell. Brian Arnold, technical proofreader, provided incredibly thorough technical guidance in reviewing the code for this book.

I’d also like to thank my parents for always believing in me and supporting me when I needed it the most. A special thank you to my wife Zenayda, who has been my rock since we met, and who pushes me to be better on a daily basis. Thank you to my three daughters Andrea, Zoe, and Abbey Rose, who have taught me the patience that only a father of daughters could understand.

About this Book

The ArcGIS API for JavaScript is a library built to work hand in hand with ArcGIS Server technologies. It’s designed to provide a wide range of tools that allow a developer to build everything from the simplest web-mapping application to a heavily used and feature-rich tool. What you decide to build is up to you and the needs of your users, but it’s been my experience that the ArcGIS API for JavaScript can meet most expectations.

This book, ArcGIS Web Development, is an introduction to the ArcGIS API for JavaScript, with a little bit of extra information thrown in to get you up to speed with the Dojo Toolkit that the API is built on.

There are a variety of web-mapping libraries available, and the ArcGIS API for JavaScript is designed to take advantage of the technology provided by ArcGIS Server and ArcGIS Online, both of which will be discussed in this book.

Roadmap

ArcGIS Web Development is divided into two parts: "ArcGIS JavaScript Foundation and A Sample Use Case." If you’re already familiar with GIS and just want to learn how to use the ArcGIS API for JavaScript, you may be tempted to skip Part 1 entirely. I strongly recommend, though, that you at least familiarize yourself with chapter 3, which covers the ArcGIS REST API.

The first part of the book is an introduction to some core concepts of GIS and terms used throughout the book. By the end of part 1, you’ll have a solid understanding of the ArcGIS Server REST API, which is the driving force for ArcGIS web technologies and core concepts of the ArcGIS API for JavaScript.

In chapter 1, you’ll learn how GIS can be used as a tool and the significance of spatial applications.

In chapter 2, you’ll build your first map and learn the basics of spatial data and how to query that data.

In chapter 3, you’ll learn the basics of the ArcGIS Server REST API and be given a sample of how to use it to build a custom legend widget. This is also the first dive into using the Dojo AMD loading system.

The second part of the book walks you through a sample field collection application, which also provides some tips on disconnected editing for mobile applications. In part 2 you’ll learn how to structure a scalable application, build a mobile-friendly data-collection application, and even learn some advanced techniques for disconnected editing:

In chapter 4, you’ll set up an ArcGIS Online account and learn how to use Dojo to build your application.

In chapter 5, you’ll learn how to edit features on the map and use authentication to secure your application, as well as how you can use LocalStorage to enable disconnected editing.

In chapter 6, you’ll focus on building an application for use on a desktop browser, freeing you up from some limitations of a mobile environment. You’ll also learn how to use OAuth 2.0 with ArcGIS Online and store your credentials to allow users to log in and out. This chapter also covers how to integrate data collected in the field with some non-spatial data.

In chapter 7, you’ll be introduced to more advanced subjects and techniques. You’ll learn about the ArcGIS WebMap specification and how to use it to configure your map. You’ll also learn how to build your entire application from a single JSON file that will configure your widgets for you. This chapter will also describe an alternative to disconnected editing using a library called PouchDB.

Finally, there are three appendixes that contain supporting information. Appendix A provides some development environment options available for writing and running the code in this book. Appendix B is probably the most valuable appendix in this book, as it covers basics of the Dojo Toolkit that are indispensable for using the ArcGIS API for JavaScript. Appendix C discusses how to use the proxy files provided by Esri in your application and explains why you will probably need them.

Code conventions and downloads

All source code in listings or in text is in a fixed-width font like this to separate it from ordinary text. Code annotations accompany many of the listings, highlighting important concepts. In some cases, numbered bullets link to explanations that follow the listing.

Source code for the examples in the book can be downloaded from the publisher’s website at www.manning.com/ArcGISWebDevelopment.

Author Online

Purchase of ArcGIS Web Development includes free access to a private web forum run by Manning Publications, where you can make comments about the book, ask technical questions, and receive help from the author and from other users. To access the forum and subscribe to it, point your web browser to www.manning.com/ArcGISWeb Development. This page provides information on how to get on the forum once you are registered, what kind of help is available, and the rules of conduct on the forum.

Manning’s commitment to our readers is to provide a venue where a meaningful dialogue between individual readers and between readers and the author can take place. It is not a commitment to any specific amount of participation on the part of the author, whose contribution to the book’s forum remains voluntary (and unpaid). We suggest you try asking him some challenging questions, lest his interest strays!

The Author Online forum and the archives of previous discussions will be accessible from the publisher’s website as long as the book is in print.

About the cover illustration

The figure on the cover of ArcGIS Web Development is captioned La Demoiselle de Compagnie, a young woman who serves as a companion to an older and more well-to-do woman from the aristocracy or bourgeoisie; or as a chaperone for a young, unmarried woman, who could not go out unaccompanied. The illustration is taken from a nineteenth-century edition of Sylvain Maréchal’s four-volume compendium of regional dress customs published in France. Each illustration is finely drawn and colored by hand. The rich variety of Maréchal’s collection reminds us vividly of how culturally distinct the world’s towns and regions were just 200 years ago. Isolated from each other, people spoke different dialects and languages. In the streets or in the countryside, it was easy to identify where they lived and what their trade or station in life was just by their dress.

Dress codes have changed since then and the diversity by region, so rich at the time, has faded away. It is now hard to tell apart the inhabitants of different continents, let alone different towns or regions. Perhaps we have traded cultural diversity for a more varied personal life—certainly for a more varied and fast-paced technological life.

At a time when it is hard to tell one computer book from another, Manning celebrates the inventiveness and initiative of the computer business with book covers based on the rich diversity of regional life of two centuries ago, brought back to life by Maréchal’s pictures.

Part 1. ArcGIS JavaScript Foundation

Part one of this book introduces some of the core concepts of GIS and terms used throughout the book. By the end of this part, you’ll have a solid understanding of the ArcGIS Server REST API, which is the driving force for ArcGIS web technologies and core concepts of the ArcGIS API for JavaScript, as well as how spatial data is provided to web applications:

In chapter 1, you’ll learn how to use GIS as a tool and the significance of spatial applications.

In chapter 2, you’ll build your first map and learn the basics of spatial data and how to query that data. You’ll also learn the details of how a FeatureLayer works and how it’s optimized for performance.

In chapter 3, you’ll learn the basics of the ArcGIS Server REST API and be given a sample of how to use it to build a custom legend widget. This is also the first dive into using the Dojo AMD loading system and modularizing your application.

Chapter 1. GIS as a tool

This chapter covers

What a geographic information system (GIS) is and how it’s used

The significance of spatial applications

Trends for pros and opportunities for beginners

Parts of a GIS web application

Where we are, and our understanding