What do you get with a Packt Subscription?

Free for first 7 days. $19.99 p/m after that. Cancel any time!

Unlimited ad-free access to the largest independent learning library in tech. Access this title and thousands more!

50+ new titles added per month, including many first-to-market concepts and exclusive early access to books as they are being written.

Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.

Thousands of reference materials covering every tech concept you need to stay up to date.

Subscribe now

View plans & pricing

Developing Mobile Web ArcGIS Applications

Chapter 1. Introduction to Mobile Web ArcGIS Development

We live in interesting times. Mobile and cloud computing are changing how and where we are able to use technology. No longer are we limited to our home or office. Today, technology is accessible and usable at any location and at anytime. By technology, we mean computers, smartphones, tablets, and the new phablets.

Mobility means the ability to change location. This has suddenly made location and location-based data and analysis terribly important. Geographic Information Systems (GIS) is a location-focused technology. It provides the means to collect, store, visualize, and analyze any and all location-based data.

Today's cloud-based mobile world heralds the beginnings of a revolution in location technology and GIS.

This book will introduce you to mobile application development using Esri's mobile ArcGIS JavaScript API; it presumes that you are familiar with HTML, JavaScript, and CSS. The API provides a rich set of tools for developing high performance, engaging mobile ArcGIS applications. You will learn about the classes available in the API for mobile development, how to use them in a JavaScript-based mobile web application, and how to incorporate ArcGIS services and ArcGIS Online content to enhance your applications. ArcGIS RESTful web services will also be introduced, which will provide resources via argument/value pairs. The ArcGIS Feature service, that will be introduced early in the book, is one of the many examples. In this chapter, we will go through some of the fundamentals: how mobile development is different from standard web development and design and performance considerations, mobile device types and popular mobile frameworks that are now available, and the more advanced changes that the rapid advancement in mobile- and cloud-based technologies are bringing to the GIS industry.

The topics covered in this chapter are as follows:

Web ArcGIS development
Differences between mobile development and traditional web development
Introduction to mobile frameworks
How mobile web is different from traditional web
The impact of mobile and cloud-based technologies
The Cloud on the GIS industry

Fundamentally, Web ArcGIS development is focused on providing users access, through any web browser, to services provided by the ArcGIS platform: ArcGIS Server, Portal for ArcGIS, and ArcGIS Online. Portal for ArcGIS provides the same experience as ArcGIS Online but within an organization's infrastructure (on-premise or in the cloud). This is a particularly good solution where there are concerns around security. The following screenshot illustrates the mobile ArcGIS application running on an iPad:

Introduction to Mobile Web ArcGIS Development

Mobile ArcGIS application running on an iPad

Often, mobile ArcGIS application begins with an interactive map that consists of a base map overlaid with point, line, or polygon layers. Click or tap on one of these features and a pop should appear listing the feature's attributes.

ArcGIS web applications are not only used for visualization, but they often provide specific functionality too. Tools can be built that give users specific workflows. These tools might include search, identification, buffering, measurement, and more. One of the attractions of ArcGIS technology is the number of RESTful web services that are provided. There is an expanding list of services such as those that transform an address to a location (geocoding), a location's surrounding area demographics (geoenrichment), and projection (geometry). Web services provide the base for the tools that developers build into their mobile web ArcGIS applications. ArcGIS is a service-rich platform that can be easily accessed through one of the many web APIs such as the ArcGIS JavaScript API.

The transition from standard web development to mobile development needs careful planning and consideration. Mobile web development is different. It is generally targeted at a multitude of low-powered mobile computers that are limited in memory, storage, and processing power. Combine this with the range of different mobile device types and screen sizes; design and performance are key considerations when planning the development of any mobile ArcGIS web application.

It is worth discussing some of the differences between standard and mobile web development in a little more detail. There are some key areas that should be mentioned, notably the screen size, user interaction, design, functionality, and performance considerations.

Tip

Downloading the example code

You can download the example code files for all Packt books you have purchased from your account at http://www.packtpub.com. If you purchased this book elsewhere, you can visit http://www.packtpub.com/support and register to have the files e-mailed directly to you.

Interacting with mobile applications

By interaction, we mean how users work with an application, which includes the following:

Change from mouse to finger interaction, that is, from click to tap
New mobile data input methods including popup keyboards
The need to provide user interaction feedback

Next, we will cover these interaction differences in a little more detail.

From clickable to tappable

The following screenshot illustrates the Smartphone ArcGIS finger interactions that we just discussed:

Smartphone ArcGIS finger interaction

Traditional web development is focused on mouse interaction, where a mouse is a high-precision device. Mobile web development is quite different, as it relies on touch or finger interaction instead. This is very low precision, particularly since we all have different sized fingers. Tapping a button can be problematic and requires that the selectable on-screen items be larger to ensure a good user experience. Map interaction is driven by a finger slide for pan and a pinch to zoom. Zoom sliders are often included in mobile ArcGIS apps and they also provide zoom functionality.

New data input and collection methods

Data input relies on a screen-based, touch-driven keyboard. Usually, multiple keyboards are available; these are for character input, phone or numeric input, and date input, respectively. Voice is another potential source of data input for a mobile device. This provides new and interesting possibilities for mobile web developers.

Mobile device input types

For ArcGIS developers, the built-in GPS that is present on most devices means that current location, or geolocation, is a valuable new data source for use in any mobile application. Similarly, built-in cameras provide both video and still imagery, and these can help to enrich the data used or collected in an application.

Providing interaction feedback

Any interaction should provide users with obvious feedback. When a user taps a button or link, it is good if the item changes state.

Note

Feedback is particularly important to help guide mobile users, when they use your application.

For example, as shown in the following screenshots, a green-colored button with the label, 'Online', changes to red and the label changes to 'Offline' after a user tap:

Button changes color and label based on user interaction

Another good feedback mechanism is a loading animation. This is particularly helpful when loading maps:

Map loading animation

Designing for mobile

Careful consideration is needed when designing mobile ArcGIS applications. Key areas to consider include the following:

Mobile web applications need to be simple and easy to use
Given the range of mobile screen sizes and pixel densities, layout design becomes important
Orientation of a mobile device after it is rotated, as this will directly affect your mobile application and the layout of user interface components
Differences between mobile device brands such as Apple, Google, Windows, and Blackberry
The target audience for both the application and the device
Styling differences between traditional and mobile web applications

Again, let's consider each of these design differences in a little more detail.

Simplicity and intuition

Too often mobile web developers try to recreate a traditional web experience which results in an application that is overly complex. Simplicity and intuition are key. Don't try to do all things for all people. Workflows need to be obvious so that if a user selects a menu item or taps a button, then what they see on the screen makes sense. One screen should logically follow the next.

Note

A GIS map is made up of a base map with so-called feature overlays. These overlays are the map layers and represent geographic features through a point, line, or polygon. Points might represent water valves, lines might be buried pipelines, while polygons might represent parks.

Navigation should be simple. For example, if a user has tapped on a point feature and is viewing a full screen attribute inspector, then returning to the map should be easy and obvious.

Note

Focus on designing your mobile web apps so that they are simple and intuitive. Mobile users will stop using a mobile application if it has a cluttered interface and is hard to use.

Layout

Careful consideration needs to go into mobile ArcGIS app layouts. Single column layouts combined with collapsible menus often work best. Traditional ArcGIS web applications are often designed with multiple columns, commonly with a layer list on the left-hand side, the map at the center, and a list of tools on the right-hand side.

The following screenshot illustrates the multiple versus single column layouts that we just discussed:

Multiple versus single column layouts

Collapsable menus provide ways to easily combine simple interfaces with functional options: widgets and tools. Using a responsive design, as we will discuss in Chapter 5, Providing Cross-device Support with Responsive Design, allows a multi-column layout to be adapted into a single-column layout depending on the screen size of the mobile device that is accessing the application.

Orientation

By rotating their mobile device, users can change the orientation of an application to either landscape or portrait. An orientation change affects layout. For example, a map that has a column on the right-hand side might work well in the landscape mode, but it might obscure the map if a user rotates the device to the portrait mode.

The following screenshot illustrates the mobile device orientation change:

Mobile device orientation change

Styling

Finger tap requires interactive items in mobile web applications to be larger than in traditional web applications. Buttons, links, and menu items all need to be larger than their traditional web counterparts. Recommendations on size vary considerably. For example, the recommended size for buttons varies from 44 x 44 pixels by Apple for iPhones to 28 x 28 pixels as per Nokia's smartphone suggestion. Either way, on-screen items on a mobile device need to be easy to select.

Note

We will discuss style sheets or CSS in depth in later chapters. These greatly help developers style their mobile ArcGIS apps. Both Android and Apple provide style guides and these can be found at the following links:

By contrast, some on-screen items are smaller on mobile devices. Popups are a good example of this.

Small popups open to attributes screen

Mobile apps are often styled for a specific device. Apple and Android have styling and design guidelines. These are recommendations for the look and feel of mobile apps on individual platforms. Though it is a little more difficult to style a mobile application for a specific platform using web technology than it is for native mobile applications, much can be done now with style sheets to provide a platform-specific look and feel to your mobile web application by targeting mobile-specific functionality.

Mobile applications are often used for different purposes than traditional web applications. Their requirements and workflows are quite different from to desktop browser applications. Thus, functionality is a key consideration. This includes the following:

Building a mobile application on a mobile device that makes sense from a functional perspective.
Avoid mirroring, recreating, or reusing a traditional web application for mobile use.
Thinking carefully about your mobile ArcGIS users. Are they GIS or non-GIS users? Functionality will differ depending on the audience. We no longer build web applications that provide tools for everybody (we hope!).

Mobile targeted functionality

There is usually a clear divide between what functionality makes sense for mobile use versus desktop use. Questions around current location or use of GPS are usually mobile use cases. More complex, analytical tasks are more likely to be part of the desktop world.

Focused mobile applications

When web ArcGIS applications started to become popular, too often developers tried to recreate desktop applications for the Web. This resulted in complex applications loaded with tools that were cluttered and in many ways unusable. Web GIS had a distinctly narrower focus than desktop GIS. As we move to mobile ArcGIS development, developers need to remember lessons that they learned from the early days of the Web. Mobile web GIS again has a narrower focus than traditional web GIS. A good example of a focused mobile ArcGIS app might be one that just provides editing capabilities: add, edit, or delete a point feature. In the mobile world, focused functionality is king.

Target audience GIS versus non-GIS users

You need to build your mobile ArcGIS application for your intended audience. If your app is for maintenance workers who need to report on their work of filling pot holes, you will need to build an app that includes all the functional elements—a map with relevant layers, reporting tool, and so on—that are required to complete this task. GIS has traditionally served a GIS-trained audience. As we will discuss later, the combination of mobile and cloud technology has widened the potential user base for applications powered by ArcGIS.

Note

The world of GIS is changing. As the technology becomes more popular, the number of users unfamiliar with GIS is increasing dramatically. Developers are now building seeing it for the first time GIS-powered web applications for a new audience.

Today, a new group of users is accessing and using services provided by ArcGIS. Functionality, design, and workflows need to be carefully considered for this new audience.

Mobile frameworks, toolkits, and libraries

JavaScript is an implementation of the ECMAScript language open standard. The JavaScript community is worldwide and very active. JavaScript is one of the most widely used languages. Today, there are a plethora of tools that are provided by this community that help JavaScript development. These tools go under different names: toolkits, libraries, modules, and frameworks.

Note

JavaScript frameworks, toolkits, and libraries help to simplify mobile web development.

Often the terms library and framework are used interchangeably. There is a subtle but distinct difference between a library and framework called the inversion of control. When a developer's code calls a library, the code is in control. The reverse is true for a framework. Here, the framework calls the developer's code. More simply put, a library is a collection of functionality that you can call, whereas a framework provides automatic flow controls. For all intents and purposes, libraries and toolkits are identical.

In later chapters, both frameworks and libraries will be discussed in more detail. The code examples provided in the code bundle will be built using the Dojo framework, this is the base for the ArcGIS JavaScript API. Dojo helps developers to build dynamic web interfaces.

Note

An alternative to Dojo is jQuery mobile.

There are two other frameworks that are worth mentioning and will form the base for later chapters. These are Bootstrap and PhoneGap.

Bootstrap

Bootstrap is the most popular framework for developing responsive mobile applications. This framework provides automatic layout adaptation. That includes adapting to changes in device orientation and screen size. This means your ArcGIS web application will look good and be usable on all mobile devices: smartphones, phablets, and tablets.

The following screenshot shows Bootstrap downloads, illustrating its popularity:

Bootstrap: One of the most popular mobile frameworks

PhoneGap

PhoneGap is a framework that allows developers to convert web mobile applications into installable hybrid apps.

Note

Cordova is an open source framework that is managed by the Apache Foundation. PhoneGap is based on Cordova and PhoneGap is owned and managed by Adobe.

For more information, visit http://cordova.apache.org/.

The names (Cordova and PhoneGap) are often used interchangeably; in fact, the two are very similar, but there is a legal and technical difference.

These hybrid apps can be distributed through the various mobile app stores, just like their native counterparts. In Chapter 7, Developing Hybrid ArcGIS Mobile Applications with PhoneGap we will walk you through the development of a hybrid ArcGIS mobile app. PhoneGap works by providing a web app with a native wrapper around a headless browser. These wrappers are platform-specific and allow your web app to be built to run natively on any of the popular mobile platforms.

The following screenshot illustrates how to convert a web app to hybrid using PhoneGap:

Converting a web app to hybrid using Phonegap

What you will learn

Set up your development environment and understand the key frameworks and tools needed to build mobile ArcGIS apps

Add advanced tools to your base application including features such as address search

Provide crossdevice support via responsive design using the Bootstrap framework

Integrate your mobile ArcGIS application with ArcGIS online

Build high performance, attractive mobile applications using the lightweight, browserbased ArcGIS Server JavaScript API

Get acquainted with the entire process of creating mobile apps and integrating them with other platforms

Leverage HTML and JavaScript techniques for mobile development

Create immersive and engrossing views and widgets

Obtain finegrained control to provide secure, reliable GIS services

What do you get with a Packt Subscription?

Free for first 7 days. $19.99 p/m after that. Cancel any time!

Unlimited ad-free access to the largest independent learning library in tech. Access this title and thousands more!

50+ new titles added per month, including many first-to-market concepts and exclusive early access to books as they are being written.

Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.

Thousands of reference materials covering every tech concept you need to stay up to date.

Subscribe now

View plans & pricing

Frequently bought together

€20.99

Developing Mobile Web ArcGIS Applications

€20.99

ArcPy and ArcGIS: Geospatial Analysis with Python

€36.99

Total € 78.97

Filter reviews by

All

Amazon verified reviews

Massera Riccardo Mar 29, 2015

I enjoyed reading this book, it is aimed to GIS developers that would like to learn how to develop websites and mobile applications that interact with Esri's ArcGIS API.The first part is a nice introduction that explains how to approach mobile applications development in contrast with desktop web development and the basics of the dojo and ArcGIS frameworks.The author approach is hands on and the examples help the reader to learn and develop step by step: things are explained in a concise but effective manner starting from the basics and building on it to obtain fully functional applications.One thing I appreciated is that only the relevant code to understand the key concepts is included and commented in the book, while there are many links to examples on the book website, keeping the book compact in size, not bloated with code and leaving more space for useful pictures and screenshots.One chapter is devoted to explain what changed with the recent introduction of ArcGIS Online SaaS service and how you can develop a GIS application using it; this chapter is admittedly only a brief introduction to the main concepts to get started with ArcGIS Online.The final part is perhaps the most interesting, since it explains how get started with PhoneGap/Cordova and how to develop a cross-platform mobile GIS app using the same APIs seen in the first part of the book.In the end, I would recommend reading this book to programmers that are looking for a graceful introduction to ArcGIS web and mobile development and would like to experiment with it.

Amazon Verified review

ruben Apr 11, 2015

Great book I have not seen any book like this, it is something new for ne.I appreciate the author because it wrote the book in a logical way, it is something important because we can aply the codes in a solutionVery interesting book very new technologies in mobile development.

Matteo Apr 14, 2015

This book let you learn how to set up a map interface for any of your mobile web apps, sometimes you get overloaded by code but its sort of a given in a coding book. Its not too complex to read too so you can easily read it in a couple of sittings(its short but in a good way) without studying it too much. If you are going to set up any world map in your web site and you are not going to just paste google maps you need to give this book a shot

Francois Goulet Mar 11, 2015

I really appreciated “Developing Mobile Web ArcGIS Applications”. The book is beginners driven, so the author explains all the basics. Everything seemed covered without going in too much technicalities. The book is focused in giving us practical skills, that could be extended after.The first thing I liked is that the author takes time to explain the difference of designing a web application on a mobile platform instead of a desktop browser, something that doesn’t always come to mind at first.The book covers the basic Esri, Bootstrap and Geolocation APIs, without going in to much details and the tutorial for our “first” ArcGIS mobile web application is concise and well written. It’s easy to follow and to create that app and also provides good practices in web app development.The step-by-step tutorials allows us to add the most popular features of a web map application, like popups, legend, a search tool and a geocoding tool as well as developing a cross-platform/cross-device application.I also appreciated the PhoneGap introduction. PhoneGap is a free opensource framework that allows us to create native mobile apps from html and javascript. I’m looking forward to try that one!I would have liked a part on editing features, if only attributes. It’s mentioned on the book, but never explained how to do it. There’s plenty of example of that on the web, but it would have been nice to have an example in the same reference.

E. Anderson Mar 27, 2015

There are a number of books, many excellent, dealing with developing GIS websites using the ArcGIS API for JavaScript API and their number is growing. While a few of these books have a chapter or two about mobile GIS websites, few were devoted solely to the subject; "Developing Mobile Web ArcGIS Applications" is one of them.(Edit: I had forgotten another title dealing with mobile ArcGIS Server applications, "Building Web and Mobile ArcGIS Server Applications with JavaScript" [http://www.amazon.com/dp/1849697965], also published by Packt Publishing. I haven't read it yet but felt it should be mentioned.)I've read through this and wasn't disappointed. The first item that excited me was the use of version 3.11 of the JSAPI in the code. This is not far behind the current version of 3.13 (as of 3/27/2015) and helps; make the sample code relevant and usable instead of having to translate something from v1.x or even 2.xThe second item was the really good introductory to responsive web design (RWD) - essential for designing well-behaved mobile apps in general - and BootStrap.As for the content layout, I appreciated the development of the core features first (e.g. layout, basemaps, adding feature layers, handling events, and determining geolocation) followed by more advanced concepts (e.g. pop-ups, legends, finding features, and searching addresses). My only gripe is a bit more focus is needed on finding features and address searching as these are core features of any GIS website most users would be familiar with and looking for.The introductory chapter to ArcGIS Online, while helpful, was also a little too brief.I skimmed the last chapter dealing with creating a hybrid app using PhoneGap as it's not immediately applicable to my needs. It still looks interesting though.All in all, I'd give this very up-to-date and worthwhile book a solid 4.5 out of 5 stars (if I could).I should also note that while there are many good technical books out there, few are fun technical books. This one falls in that latter group for me.Another related book that I found fun as well is "Google Maps JavaScript API Cookbook" [http://www.amazon.com/dp/B00HJR6RD6], again published by Packt Publishing.

Developing Mobile Web ArcGIS Applications: Learn to build your own engaging and immersive geographic applications with ArcGIS

What do you get with a Packt Subscription?

Mobile targeted functionality

Focused mobile applications

Target audience GIS versus non-GIS users

Description

Who is this book for?

What you will learn

Product Details

What do you get with a Packt Subscription?

Product Details

Packt Subscriptions

Frequently bought together

Table of Contents

Recommendations for you

Customer reviews

Filter reviews by

People who bought this also bought

About the author

FAQs