Mastering ArcGIS Server Development with JavaScript电子书

Mastering ArcGIS Server Development with JavaScript

Table of Contents

Mastering ArcGIS Server Development with JavaScript

Credits

About the Author

About the Reviewers

www.PacktPub.com

Support files, eBooks, discount offers, and more

Why subscribe?

Free access for Packt account holders

Preface

What this book covers

What you need for this book

Who this book is for

Conventions

Reader feedback

Customer support

Downloading the example code

Downloading the color images of this book

Errata

Piracy

Questions

1. Your First Mapping Application

Features of the API

The ArcGIS JavaScript API community

Our first Web Map

Our assignment

Setting up the HTML document

Starting from the head

Meta tags and title tags

Cascading style sheets

The Dojo configuration script

The ArcGIS JavaScript API script

Moving from the head to the body

Framing the HTML body

Adding a little style

Adding a script at the end

Asynchronous Module Definition

Loading required modules

The map object

The layers

Adding some action

Events

Tasks

Deferreds and promises

Showing the results

The Map's infoWindow

The InfoTemplate object

A note on proxies

Summary

2. Digging into the API

Finding the ArcGIS JavaScript API documentation

The documentation layout

Object constructor

CSS classes and data- attributes

Properties

Methods

Events

Drawing a map

Constructor options

Autoresize

Basemap

Explaining the center, extent, zoom, and scale

LODs

Properties

loaded

layerIds

spatialReference

Methods

Adding, removing, and retrieving layers

Moving around the map

Updating settings

Events

Layers

Common ArcGIS Server layers

ArcGISDynamicMapServiceLayer

ArcGISTiledMapServiceLayer

GraphicsLayers and FeatureLayers

GraphicsLayers

FeatureLayers

Other layer types

Graphics

Introducing geometry objects

Point

Polyline

Polygon

Extent

Multipoint

Geometry spatial reference

Symbols and renderers

Simple symbols

SimpleLineSymbol

SimpleMarkerSymbol

SimpleFillSymbol

esri/Color

Picture symbols

Renderers

SimpleRenderer

Unique Value Renderer

Class Break Renderer

InfoTemplates

Toolbars

The navigation toolbar

The draw toolbar

The edit toolbar

Tasks

Tasks, parameters, and results

Common tasks

GeometryService

QueryTask

IdentifyTask

FindTask

Locator

Tasks requiring server extensions

Routing

Dijits

Measurement

Print

Bookmarks

Basemaps

Popups and InfoWindows

Editing

AttributeInspector

TemplatePicker

An all-in-one Editor

Summary

3. The Dojo Widget System

A brief history of the Dojo framework

Introducing dojo, dijit, and dojox

The dojo package

The dijit package

The dojox package

The dojoConfig packages

Defining your widget

Declaring modules

Class Inheritance through Dojo

Dealing with classes and inheritance

Working with Evented modules

An overview of the _WidgetBase module

Working with other _Mixins

Adding _TemplatedMixin

Adding _OnDijitClickMixin

Adding _FocusMixin

The event system

Creating our own widget

Picking up where we left off…

The file structure for our application

Defining the layout with Dojo

Framing the page with BorderContainer

Inserting ContentPane

Modifying the layout of our application

Styling our application

Adding our custom package

Setting up our app

Coding our widget

Adding some dojo/text!

Our dijit template

Working with the dijit constructors

Reusing our old code

Loading more templates

Back to our app.js

Summary

4. Finding Peace in REST

Looking at a map server

Working with JSON

JSON and PJSON formatting

Service levels

Map services

Map service layers

Feature services

Layer level

Fields

Domains

Related tables

Common JSON objects

Geometries

Spatial reference

Points

Multipoints

Polylines

Polygons

Envelopes

Symbols

Color

Simple line symbol

Simple marker symbol

Simple fill symbols

Picture marker symbol

Picture fill symbol

Text symbol

Uses

Back to our application

How about that InfoWindow

Summary

5. Editing Map Data

The use cases for webmap editing

Map editing requirements

Feature services

Feature templates

Feature layer

Feature service modes

Snapshot mode

On demand mode

Selection mode

Editing tools

Edit toolbar

Attribute inspector

Template picker

Attachment editor

Editor dijit

Snapping manager

Securing editing services

Restricting user input

Password protected services

Identity manager

A new mapping application

The file setup

The front page

Loading the map

Adding the map layers

Using the proxy

Finding the user's location

The template picker

The attribute inspector

Securing the application

Limiting data entry

Summary

6. Charting Your Progress

Mixing graphs into our maps

Our story continues

Using dojox charting

Creating a chart in JavaScript

The chart object

The chart style

The chart theme

Chart actions and effects

Using Dojox Charts in popups

Using Dojo Charts in our application

Loading the modules

Preparing the popup

Updating the HTML template

Processing the data

Parsing the ethnic data

Parsing the gender data

Parsing the age data

Showing the results

Ethnic graph

Gender graph

Age graph

Introducing D3.js

Adding the D3.js library with Dojo's AMD

Loading another library outside an AMD module

Loading another library within an AMD module

Using D3.js in our application

Adding D3.js to the configuration

Preparing the popup

Processing our data

Displaying the results

Displaying the ethnic graph

Displaying the gender graph

Displaying the age graph

Summary

7. Plays Well with Others

Compatibility with other libraries and frameworks

Popular libraries to play with

Our story continues

An overview of jQuery

How jQuery works

Adding jQuery to your app

Filling in our dropdowns

Adding the QueryTask

Other helper functions

Handling events

Handling the state

How the counties differ

Finally, the block groups

Filling in the states

An overview of Backbone.js

Components of Backbone

The Model

The View

The Collection

Implementing a router

Handling events

Putting some Backbone in your app

Defining the models

Defining the collections

Defining the views

Creating templates

Wiring events

Getting the Backbone to dance

An overview of Knockout.js

Knockout and MVVM

Using Knockout in our app

Defining the ViewModel

Adding custom binding handlers

Defining the View

Applying the ViewModel

A brief overview of AngularJS

Angular and MV*

Angular vocabulary

The app controller

The app service

The app directive

Making a web mapping app more Angular

Overall results with other frameworks

jQuery

Backbone.js

Knockout and Angular

Summary

8. Styling Your Map

The inner workings of CSS

Selector specificity

Equal selector specificity

Styling tips and tricks

Styling don'ts

Responsive design

Normalize.css

Organizing your CSS

Organizing by selector specificity

Group by module

A class for everything

Media queries

Positioning your map

The fixed-width map

Stretching the map to fullscreen

Floating the map to the side

Positioning the map top and center

Covering most of the page with the map

Centering a map of known width and height

Centering a map of unknown width and height

Troubleshooting

Responsive resizers

Dojo layout

Containers

LayoutContainer

BorderContainer

AccordionContainer

TabContainer

Panes

ContentPane

AccordionPane

Bootstrap

ESRI-Bootstrap

Restyling our app

Adding ESRI-Bootstrap to our app

Bootstrapping our HTML

Replacing the header with a navbar

Rearranging the map

Restyling our app

Making our Census dijit modal

Summary

9. Mobile Development

Embracing mobile

Mobile is different

The good

Access to phone sensors

Instant access to the app

Instant access to the user

The bad

So many screen sizes

Fingertip accuracy

Battery life

More devices

The ArcGIS compact build

Modules included in the compact build

What's not included

What does this mean to you?

ESRI Leaflet

Dojox mobile

Dojox mobile views

Working with touch

Gestures

Our application

Changing the layout

Modifying the JavaScript

Working with the map on mobile

Fixing the LocateButton

Working with the editor widgets

Template picker

Attribute inspector

Trouble in the app

Rebuilding the attribute inspector

Creating the form

The attachment editor

The end result

Summary

10. Testing

Testing through code

Unit testing

Functional testing

End-to-end testing

Testing as you code

Test-Driven Development

Behavior-Driven Development

Test statements

Intern testing framework

Setting up your testing environment

Special requirements for the ArcGIS JavaScript API

Writing tests for Intern

Unit testing with Intern

Test lifecycle with Intern

Jasmine testing framework

Writing tests for Jasmine

Writing suites, specs, and tests

Setup and teardown

Ignoring tests

Red-light green-light

Jasmine and the ArcGIS JavaScript API

In the specs

Use case for Jasmine and the ArcGIS JavaScript API

Our application

Adding testing files

The package.json file

The Grunt setup

Setting up Bower

Intern.js configuration

If you haven't installed Node.js

Loading all the libraries locally

Writing our tests

Checking the results

Summary

11. The Future of ArcGIS Development

ArcGIS Online

ArcGIS Portal

Web AppBuilder

Developer Edition

More Node.js

Our application

Creating a webmap

Changing the basemap

Adding the census map service

Searching for layers

Browsing for ESRI layers

Adding layers from the web

Adding layer from a file

Adding map notes

Our application data source

Styling

Creating popups

Adding charts

Uses for an ArcGIS Online webmap

Sharing

Printing

Directions

Measurements

Bookmarks

Developing against an ArcGIS Online webmap

Creating the webmap

In our census widget

Accessing webmap in our app

Interacting with the map through code

Summary

Index