Mastering ArcGIS Server Development with JavaScript

Mastering ArcGIS Server Development with JavaScript

by Ken Doman
Released September 2015
Publisher(s): Packt Publishing
ISBN: 9781784396459

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Book description

Transform maps and raw data into full-fledged web mapping applications using the power of the ArcGIS JavaScript API and JavaScript libraries

About This Book

  • Create and share modern map applications for desktops, tablets, and mobile browsers
  • Present and edit geographic and related data through maps, charts, graphs, and more
  • Learn the tools, tips, and tricks made available through the API and related libraries with examples of real-world applications

Who This Book Is For

This book is intended for intermediate developers who want to design web mapping applications. You should have some experience with geographic information systems, especially with ArcGIS products such as ArcGIS Server. It also helps to have some experience with HTML, CSS, and JavaScript.

What You Will Learn

  • Create single-page mapping applications, lining up data from different sources
  • Search for and display geographic and tabular information based on locations and attributes
  • Customize maps and widgets to deliver the best user experience
  • Present location data intuitively using charts and graphs
  • Integrate mapping applications with your favorite JavaScript frameworks
  • Test the working of your web map application and take advantage of cloud services such as ArcGIS Online
  • Create modern-looking web maps through styling tips and tricks

In Detail

ESRI and its ArcGIS line of software have been an industry leader in digital map production and publication for over 30 years. ArcGIS Server lets you design, configure, and publish maps that can be viewed and edited through the Internet.

After designing basic maps, you may want to find out new and innovative ways to represent information using these maps. In this book, you'll work through practical examples, experiencing the pitfalls and successes of creating desktop and mobile map applications for a web browser using the ArcGIS Server platform.

The book begins by introducing you to ArcGIS Server and ESRI's JavaScript API. You'll work with your first web map and then move on to learn about ESRI's building blocks. A Dojo AMS style widget will help you create your own widgets for a map and then see how to collect geographic data.

Furthermore, you will learn different techniques such as using Dojo Charts to create charts and graphs to represent your data. Then you will see how to use ESRI JavaScript API with other JavaScript libraries and different styling methods to make your map stand out. By the end of the book, you will discover how to make your application compatible with different devices and platforms and test it using testing libraries.

Style and approach

An in-depth guide that explores web application development using ArcGIS Server and the ArcGIS JavaScript API. Topics are explained in the context of developing two applications for fictional clients. Details of application development, including possible pitfalls and best practices, are included in this book.

Table of contents

  1. Mastering ArcGIS Server Development with JavaScript
    1. Table of Contents
    2. Mastering ArcGIS Server Development with JavaScript
    3. Credits
    4. About the Author
    5. About the Reviewers
    6. www.PacktPub.com
      1. Support files, eBooks, discount offers, and more
        1. Why subscribe?
        2. Free access for Packt account holders
    7. Preface
      1. What this book covers
      2. What you need for this book
      3. Who this book is for
      4. Conventions
      5. Reader feedback
      6. Customer support
        1. Downloading the example code
        2. Downloading the color images of this book
        3. Errata
        4. Piracy
        5. Questions
    8. 1. Your First Mapping Application
      1. Features of the API
      2. The ArcGIS JavaScript API community
      3. Our first Web Map
        1. Our assignment
      4. Setting up the HTML document
        1. Starting from the head
          1. Meta tags and title tags
          2. Cascading style sheets
          3. The Dojo configuration script
          4. The ArcGIS JavaScript API script
        2. Moving from the head to the body
          1. Framing the HTML body
          2. Adding a little style
          3. Adding a script at the end
      5. Asynchronous Module Definition
      6. Loading required modules
      7. The map object
      8. The layers
      9. Adding some action
        1. Events
        2. Tasks
        3. Deferreds and promises
      10. Showing the results
        1. The Map's infoWindow
        2. The InfoTemplate object
      11. A note on proxies
      12. Summary
    9. 2. Digging into the API
      1. Finding the ArcGIS JavaScript API documentation
        1. The documentation layout
          1. Object constructor
          2. CSS classes and data- attributes
          3. Properties
          4. Methods
          5. Events
      2. Drawing a map
        1. Constructor options
          1. Autoresize
          2. Basemap
          3. Explaining the center, extent, zoom, and scale
          4. LODs
        2. Properties
          1. loaded
          2. layerIds
          3. spatialReference
        3. Methods
          1. Adding, removing, and retrieving layers
          2. Moving around the map
          3. Updating settings
        4. Events
      3. Layers
        1. Common ArcGIS Server layers
          1. ArcGISDynamicMapServiceLayer
          2. ArcGISTiledMapServiceLayer
        2. GraphicsLayers and FeatureLayers
          1. GraphicsLayers
          2. FeatureLayers
        3. Other layer types
      4. Graphics
      5. Introducing geometry objects
        1. Point
        2. Polyline
        3. Polygon
        4. Extent
        5. Multipoint
        6. Geometry spatial reference
      6. Symbols and renderers
        1. Simple symbols
          1. SimpleLineSymbol
          2. SimpleMarkerSymbol
          3. SimpleFillSymbol
        2. esri/Color
        3. Picture symbols
        4. Renderers
          1. SimpleRenderer
          2. Unique Value Renderer
          3. Class Break Renderer
      7. InfoTemplates
      8. Toolbars
        1. The navigation toolbar
        2. The draw toolbar
        3. The edit toolbar
      9. Tasks
        1. Tasks, parameters, and results
        2. Common tasks
          1. GeometryService
          2. QueryTask
          3. IdentifyTask
          4. FindTask
          5. Locator
        3. Tasks requiring server extensions
          1. Routing
      10. Dijits
        1. Measurement
        2. Print
        3. Bookmarks
        4. Basemaps
        5. Popups and InfoWindows
        6. Editing
          1. AttributeInspector
          2. TemplatePicker
          3. An all-in-one Editor
      11. Summary
    10. 3. The Dojo Widget System
      1. A brief history of the Dojo framework
      2. Introducing dojo, dijit, and dojox
        1. The dojo package
        2. The dijit package
        3. The dojox package
      3. The dojoConfig packages
      4. Defining your widget
        1. Declaring modules
          1. Class Inheritance through Dojo
          2. Dealing with classes and inheritance
      5. Working with Evented modules
      6. An overview of the _WidgetBase module
      7. Working with other _Mixins
        1. Adding _TemplatedMixin
        2. Adding _OnDijitClickMixin
        3. Adding _FocusMixin
      8. The event system
      9. Creating our own widget
        1. Picking up where we left off…
          1. The file structure for our application
        2. Defining the layout with Dojo
          1. Framing the page with BorderContainer
          2. Inserting ContentPane
          3. Modifying the layout of our application
        3. Styling our application
        4. Adding our custom package
        5. Setting up our app
        6. Coding our widget
          1. Adding some dojo/text!
          2. Our dijit template
          3. Working with the dijit constructors
          4. Reusing our old code
          5. Loading more templates
          6. Back to our app.js
      10. Summary
    11. 4. Finding Peace in REST
      1. Looking at a map server
      2. Working with JSON
        1. JSON and PJSON formatting
      3. Service levels
      4. Map services
        1. Map service layers
      5. Feature services
      6. Layer level
        1. Fields
        2. Domains
      7. Related tables
      8. Common JSON objects
        1. Geometries
          1. Spatial reference
          2. Points
          3. Multipoints
          4. Polylines
          5. Polygons
          6. Envelopes
        2. Symbols
          1. Color
          2. Simple line symbol
          3. Simple marker symbol
          4. Simple fill symbols
          5. Picture marker symbol
          6. Picture fill symbol
          7. Text symbol
          8. Uses
      9. Back to our application
        1. How about that InfoWindow
      10. Summary
    12. 5. Editing Map Data
      1. The use cases for webmap editing
      2. Map editing requirements
      3. Feature services
        1. Feature templates
      4. Feature layer
        1. Feature service modes
          1. Snapshot mode
          2. On demand mode
          3. Selection mode
      5. Editing tools
        1. Edit toolbar
        2. Attribute inspector
        3. Template picker
        4. Attachment editor
        5. Editor dijit
        6. Snapping manager
      6. Securing editing services
        1. Restricting user input
        2. Password protected services
          1. Identity manager
      7. A new mapping application
        1. The file setup
        2. The front page
        3. Loading the map
          1. Adding the map layers
          2. Using the proxy
          3. Finding the user's location
        4. The template picker
        5. The attribute inspector
        6. Securing the application
          1. Limiting data entry
      8. Summary
    13. 6. Charting Your Progress
      1. Mixing graphs into our maps
      2. Our story continues
      3. Using dojox charting
        1. Creating a chart in JavaScript
        2. The chart object
        3. The chart style
        4. The chart theme
        5. Chart actions and effects
      4. Using Dojox Charts in popups
      5. Using Dojo Charts in our application
        1. Loading the modules
        2. Preparing the popup
          1. Updating the HTML template
        3. Processing the data
          1. Parsing the ethnic data
          2. Parsing the gender data
          3. Parsing the age data
        4. Showing the results
          1. Ethnic graph
          2. Gender graph
          3. Age graph
      6. Introducing D3.js
        1. Adding the D3.js library with Dojo's AMD
          1. Loading another library outside an AMD module
          2. Loading another library within an AMD module
      7. Using D3.js in our application
        1. Adding D3.js to the configuration
        2. Preparing the popup
        3. Processing our data
        4. Displaying the results
          1. Displaying the ethnic graph
          2. Displaying the gender graph
          3. Displaying the age graph
      8. Summary
    14. 7. Plays Well with Others
      1. Compatibility with other libraries and frameworks
      2. Popular libraries to play with
        1. Our story continues
      3. An overview of jQuery
        1. How jQuery works
      4. Adding jQuery to your app
        1. Filling in our dropdowns
          1. Adding the QueryTask
          2. Other helper functions
        2. Handling events
          1. Handling the state
          2. How the counties differ
          3. Finally, the block groups
        3. Filling in the states
      5. An overview of Backbone.js
        1. Components of Backbone
          1. The Model
          2. The View
          3. The Collection
          4. Implementing a router
          5. Handling events
      6. Putting some Backbone in your app
        1. Defining the models
        2. Defining the collections
        3. Defining the views
          1. Creating templates
        4. Wiring events
        5. Getting the Backbone to dance
      7. An overview of Knockout.js
        1. Knockout and MVVM
      8. Using Knockout in our app
        1. Defining the ViewModel
        2. Adding custom binding handlers
        3. Defining the View
        4. Applying the ViewModel
      9. A brief overview of AngularJS
        1. Angular and MV*
        2. Angular vocabulary
          1. The app controller
          2. The app service
          3. The app directive
      10. Making a web mapping app more Angular
      11. Overall results with other frameworks
        1. jQuery
        2. Backbone.js
        3. Knockout and Angular
      12. Summary
    15. 8. Styling Your Map
      1. The inner workings of CSS
        1. Selector specificity
        2. Equal selector specificity
      2. Styling tips and tricks
        1. Styling don'ts
        2. Responsive design
        3. Normalize.css
        4. Organizing your CSS
          1. Organizing by selector specificity
          2. Group by module
          3. A class for everything
          4. Media queries
        5. Positioning your map
        6. The fixed-width map
        7. Stretching the map to fullscreen
        8. Floating the map to the side
        9. Positioning the map top and center
        10. Covering most of the page with the map
        11. Centering a map of known width and height
        12. Centering a map of unknown width and height
      3. Troubleshooting
        1. Responsive resizers
      4. Dojo layout
        1. Containers
          1. LayoutContainer
          2. BorderContainer
          3. AccordionContainer
          4. TabContainer
        2. Panes
          1. ContentPane
          2. AccordionPane
      5. Bootstrap
      6. ESRI-Bootstrap
      7. Restyling our app
        1. Adding ESRI-Bootstrap to our app
        2. Bootstrapping our HTML
          1. Replacing the header with a navbar
          2. Rearranging the map
        3. Restyling our app
        4. Making our Census dijit modal
      8. Summary
    16. 9. Mobile Development
      1. Embracing mobile
      2. Mobile is different
        1. The good
          1. Access to phone sensors
          2. Instant access to the app
          3. Instant access to the user
        2. The bad
          1. So many screen sizes
          2. Fingertip accuracy
          3. Battery life
          4. More devices
      3. The ArcGIS compact build
        1. Modules included in the compact build
        2. What's not included
        3. What does this mean to you?
      4. ESRI Leaflet
      5. Dojox mobile
        1. Dojox mobile views
      6. Working with touch
        1. Gestures
      7. Our application
        1. Changing the layout
          1. Modifying the JavaScript
        2. Working with the map on mobile
          1. Fixing the LocateButton
        3. Working with the editor widgets
          1. Template picker
          2. Attribute inspector
        4. Trouble in the app
        5. Rebuilding the attribute inspector
          1. Creating the form
          2. The attachment editor
        6. The end result
      8. Summary
    17. 10. Testing
      1. Testing through code
        1. Unit testing
        2. Functional testing
        3. End-to-end testing
      2. Testing as you code
        1. Test-Driven Development
        2. Behavior-Driven Development
        3. Test statements
      3. Intern testing framework
        1. Setting up your testing environment
          1. Special requirements for the ArcGIS JavaScript API
        2. Writing tests for Intern
          1. Unit testing with Intern
          2. Test lifecycle with Intern
      4. Jasmine testing framework
        1. Writing tests for Jasmine
          1. Writing suites, specs, and tests
          2. Setup and teardown
          3. Ignoring tests
        2. Red-light green-light
        3. Jasmine and the ArcGIS JavaScript API
          1. In the specs
        4. Use case for Jasmine and the ArcGIS JavaScript API
      5. Our application
        1. Adding testing files
          1. The package.json file
          2. The Grunt setup
          3. Setting up Bower
          4. Intern.js configuration
        2. If you haven't installed Node.js
        3. Loading all the libraries locally
        4. Writing our tests
        5. Checking the results
      6. Summary
    18. 11. The Future of ArcGIS Development
      1. ArcGIS Online
        1. ArcGIS Portal
      2. Web AppBuilder
        1. Developer Edition
      3. More Node.js
      4. Our application
      5. Creating a webmap
        1. Changing the basemap
        2. Adding the census map service
          1. Searching for layers
          2. Browsing for ESRI layers
          3. Adding layers from the web
          4. Adding layer from a file
          5. Adding map notes
          6. Our application data source
          7. Styling
          8. Creating popups
          9. Adding charts
        3. Uses for an ArcGIS Online webmap
          1. Sharing
          2. Printing
          3. Directions
          4. Measurements
          5. Bookmarks
      6. Developing against an ArcGIS Online webmap
        1. Creating the webmap
        2. In our census widget
        3. Accessing webmap in our app
        4. Interacting with the map through code
      7. Summary
    19. Index

Product information

  • Title: Mastering ArcGIS Server Development with JavaScript
  • Author(s): Ken Doman
  • Release date: September 2015
  • Publisher(s): Packt Publishing
  • ISBN: 9781784396459