Building Web and Mobile ArcGIS Server Applications with JavaScript

Building Web and Mobile ArcGIS Server Applications with JavaScript

By : Eric Pimpler

Buy this Book

Building Web and Mobile ArcGIS Server Applications with JavaScript

By: Eric Pimpler

Buy this Book

Overview of this book

ArcGIS Server is the leading software for developing both web and mobile GIS applications. There are a number of programming languages that you can use to develop applications with ArcGIS Server including JavaScript, Flex, and Silverlight. However, the ArcGIS API for JavaScript is the preferred way of developing your custom applications for ArcGIS Server since it can be used for both web and mobile application development. It’s easy to use and doesn’t require the use of a browser plugin. This tutorial-based guide provides you with hands-on experience in developing custom web and mobile ArcGIS Server applications with step-by-step style exercises. Along with introducing you to the HTML/CSS/JavaScript technology stack, you will learn to add intuitive geographic layers of information to your map, interactive query and display of spatial data, add user interface widgets, access geoprocessing tasks, and many more in your own web and mobile GIS applications. With this practical, hands-on guide, you will be able to develop fully-functional online GIS applications with ArcGIS Server using the ArcGIS API for JavaScript. After creating your own map, you will explore how to add geographic layers from a variety of sources including tiled and dynamic map services, add graphics to the map, and stream geographic features to the browser using a FeatureLayer. Most applications include the specific functionalities implemented by ArcGIS Server as tasks. You’ll learn how to use the various tasks provided by ArcGIS Server including spatial and attribute queries, identification of features, finding features by attribute, and more. Geocoding and geoprocessing tasks are covered in-depth to help you accomplish your task in GIS. Finally, you’ll learn just how easy it is to integrate ArcGIS.com content into your custom developed applications. This comprehensive guide quickly advances through probing programmatic techniques for building web and mobile GIS applications which will make application development a lot easier!

Building Web and Mobile ArcGIS Server Applications with JavaScript

Credits

About the Author

About the Reviewers

www.PacktPub.com

Preface

Free Chapter

Introduction to HTML, CSS, and JavaScript

Basic HTML page concepts

JavaScript fundamentals

Basic CSS principles

Separating HTML, CSS, and JavaScript

Summary

Creating Maps and Adding Layers

Introduction

The ArcGIS API for JavaScript Sandbox

Basic steps for creating an application with the ArcGIS API for JavaScript

More about the map

Working with map service layers

Map events

Summary

Adding Graphics to the Map

The four parts of a graphic

Creating geometry for graphics

Symbolizing graphics

Assigning attributes to graphics

Displaying graphic attributes in an info template

Creating graphics

Adding graphics to the graphics layer

Time to practice with graphics

Summary

The Feature Layer

Creating a FeatureLayer object

Defining display modes

Setting a definition expression

Feature selection

Rendering a feature layer

Time to practice with FeatureLayer

Summary

Using Widgets and Toolbars

Adding toolbars to an application

User interface widgets

Feature editing

Summary

Performing Spatial and Attribute Queries

Introducing tasks in ArcGIS Server

An overview of attribute and spatial queries

Time to practice with spatial queries

Summary

Identifying and Finding Features

Using IdentifyTask to get feature attributes

Using FindTask to get the feature attributes

Summary

Turning Addresses into Points and Points into Addresses

Introducing geocoding

Geocoding with a Locator service in the ArcGIS API for JavaScript

Time to practice with the Locator service

Summary

Network Analyst Tasks

RouteTask

Time to practice routing

The ClosestFacility task

The ServiceArea task

Summary

Geoprocessing Tasks

Models in ArcGIS Server

Using Geoprocessor – what you need to know

Understanding the service page for a geoprocessing task

The Geoprocessor task

Time to practice with geoprocessing tasks

Summary

Integration with ArcGIS Online

Adding ArcGIS Online maps to your applications with the webmap ID

Adding ArcGIS Online maps to your applications with JSON

Time to practice with ArcGIS Online

Summary

Creating Mobile Applications

ArcGIS API for JavaScript – a compact build

Integrating the Geolocation API

Summary

Application Design with ArcGIS Templates and Dojo

The Dojo BorderContainer dijit

Additional Dojo layout elements

Time to practice with sample layouts

Summary

Index

Customer Reviews

5 star

4 star

3 star

2 star

1 star

Time to practice with sample layouts

In this exercise, you will download a sample layout provided by Esri. You'll then examine the layout to get a feel of the basic layout elements provided by Dojo. Finally, you'll make some changes to the layout.

Before starting this exercise, you'll want to make sure that you have access to a web server. If you don't have access to a web server or if a web server isn't already installed on your computer, you can download and install the open source web server Apache (http://httpd.apache.org/download.cgi). Microsoft IIS is another commonly used web server and there are many others that you can use as well. For the purpose of this exercise, I will assume that you are using the Apache web server.
A web server installed on your local computer will be referred to through URL as http://localhost. This points to the htdocs folder under C:\Program Files\Apache Software Foundation\Apache2.2\ if you've installed Apache on a Windows platform.
On the Samples tab of the ArcGIS API for JavaScript site (https://developers.arcgis.com/en/javascript/jssamples/), search for Layouts in the search box to generate a list of available layout samples.
Scroll down the list of search results until you see the Layout with left pane sample seen in the following screenshot. Click on this item:
Click on the Download as a zip file link to download the sample.
Create a new folder in your htdocs folder under C:\Program Files\Apache Software Foundation\Apache2.2\ and name it layout. Unzip the file that you downloaded into this folder. This will create a file called index.html, along with the css and images folders.
Open a web browser and go to the URL http://localhost/layout/index.html so you can see the current layout. You should see something similar to the following screenshot:
Open index.html in your favorite text or web editor.
Scroll to the bottom of the file until you see the <body> tag.

The highest level layout container is BorderContainer. A <div> tag will contain BorderContainer and all other child layout elements need to be located inside this <div> tag. Examine the following code. The highlighted section is the code used to define our top level BorderContainer. Notice that the design has been set to headline, which means that the top and bottom regions will be scrolled across the entire width of the screen:

<body class="claro">
  <div id="mainWindow" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline'"
  style="width:100%; height:100%;">

    <div id="header" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">
        <div id="title">
      </div>
    </div>

    <div data-dojo-type="dijit.layout.ContentPane" id="leftPane" data-dojo-props="region:'left'">
      <div data-dojo-type="dijit.layout.TabContainer">
        <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title:'Tab 1', selected:'true'">
          Content for the first tab
        </div>
        <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title:'Tab 2'">
          Content for the second tab
        </div>
      </div>
    </div>

    <div id="map" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'"></div>

    <div id="footer" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'bottom'">
      <span id="dataSource">
      </span>
    </div>

  </div>
</body>

Inside BorderContainer, you will find several child layout elements defined with the ContentPane dijit. ContentPane is a very generic layout element that simply holds either text or additional layout elements, such as TabContainer or AccordionContainer.

<body class="claro">
  <div id="mainWindow" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline'"
    style="width:100%; height:100%;">

    <div id="header" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">
      <div id="title">
      </div>
    </div>

    <div data-dojo-type="dijit.layout.ContentPane" id="leftPane" data-dojo-props="region:'left'">
      <div data-dojo-type="dijit.layout.TabContainer">
        <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title:'Tab 1', selected:'true'">
          Content for the first tab
        </div>
        <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title:'Tab 2'">
          Content for the second tab
        </div>
      </div>
    </div>

    <div id="map" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'"></div>

    <div id="footer" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'bottom'">
      <span id="dataSource">
      </span>
    </div>

  </div>
</body>

Tip

Notice that in the previous code example, each ContentPane layout element has a region that has been designed for each layout element. In this case, we have defined all of the available regions, with the exception of the right region. This is illustrated in the following screenshot:

Next, examine the following highlighted code. The highlighted code defines the content for the left region. A simple ContentPane layout element is defined, which as I mentioned previously is a very simple container for other layout elements or text. Inside this ContentPane, we have created a TabContainer layout element and assigned two tabs. Each tab is created as ContentPane.

<body class="claro">
  <div id="mainWindow" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline'"
    style="width:100%; height:100%;">

      <div id="header" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">
        <div id="title">
        </div>
      </div>

      <div data-dojo-type="dijit.layout.ContentPane" id="leftPane" data-dojo-props="region:'left'">
        <div data-dojo-type="dijit.layout.TabContainer">
          <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title:'Tab 1', selected:'true'">
            Content for the first tab
          </div>
          <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title:'Tab 2'">
            Content for the second tab
          </div>
        </div>
      </div>

      <div id="map" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'"></div>

      <div id="footer" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'bottom'">
      <span id="dataSource">
      </span>
    </div>

  </div>
</body>

A common scenario would be to create a tab container that holds a legend for the map, as seen in the following screenshot:

Now that you understand the basic concepts of creating layout elements, you can add content for the right region. Add the following highlighted code:

<body class="claro">
  <div id="mainWindow" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline'"
    style="width:100%; height:100%;">

    <div id="header" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">
      <div id="title">
      </div>
    </div>

    <div data-dojo-type="dijit.layout.ContentPane" id="leftPane" data-dojo-props="region:'left'">
      <div data-dojo-type="dijit.layout.TabContainer">
        <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title:'Tab 1', selected:'true'">
          Content for the first tab
        </div>
        <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title:'Tab 2'">
          Content for the second tab
        </div>
      </div>
    </div>

    <div data-dojo-type="dijit.layout.ContentPane" id="rightPane" data-dojo-props="region:'right'">
      Content for right pane
    </div>


    <div id="map" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'"></div>

    <div id="footer" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'bottom'">
      <span id="dataSource">
      </span>
    </div>

  </div>
</body>

In the css folder that you extracted earlier in the exercise, there is a file called layout.css. This contains the styling information for our application. Open this file in your text editor.
Find the text #rightPane as seen in the following code example. Properties are defined for the background color, foreground color, border styling, and width of the region:
```
#rightPane {
  background-color:#FFF;
  color:#3f3f3f;
  border:solid 2px #224a54;
  width:20%;
}
```
Recall that in the previous code block that you added, we gave id of rightPane to the right region. The CSS section will style our pane by giving it a background color (white), foreground color, width, and border.
Save the file.
If necessary, open your web browser and reload http://localhost/layout/index.html, or simply refresh the page if you already have it opened. Now you should see new content for the right region of the application. Currently, it only holds some text as the content, but you could easily add additional content, including user interface widgets (dijits). We'll do that in the next step when we add AccordionContainer.
Next, we'll add AccordionContainer to the right region.

First, add a reference to the AccordionContainer resource, as seen in the following highlighted code:

dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit.layout.TabContainer");
dojo.require("esri.map");
dojo.require("esri.arcgis.utils");
dojo.require("esri.IdentityManager");
dojo.require("dijit.layout.AccordionContainer");

Now, add AccordionContainer inside ContentPane for the right region as well as the content for each of the panes. The highlighted code below should be added to the ContentPane you created in step 14:

<div data-dojo-type="dijit.layout.ContentPane" id="rightPane" data-dojo-props="region:'right'">
  <div data-dojo-type="dijit.layout.AccordionContainer" >
    <div data-dojo-type="dijit.layout.ContentPane" title="Pane 1">
    Content for Pane 1
    </div>
    <div data-dojo-type="dijit.layout.ContentPane" title="Pane 2">
      Content for Pane 2
    </div>
    <div data-dojo-type="dijit.layout.ContentPane" title="Pane 3">
    Content for Pane 3
    </div>
  </div>
</div>

Save the file.
Refresh your browser to see the new AccordionContainer layout element as seen in the following screenshot. In this exercise, you learned how to quickly create an application layout using Esri sample layouts.

Building Web and Mobile ArcGIS Server Applications with JavaScript

By : Eric Pimpler

Building Web and Mobile ArcGIS Server Applications with JavaScript

By: Eric Pimpler

Overview of this book

Related Content you might be interested in

Current Title:

Building Web and Mobile ArcGIS Server Applications with JavaScript

Time to practice with sample layouts

Tip