Creating Fast Web Mapping Applications With JavaScript

Welcome to
ArcGIS Server 9.3.1:
Creating Fast Web Mapping
Applications With JavaScript
Scott Moore
ESRI – Olympia, WA
[email protected]
Seminar agenda
• ArcGIS API for JavaScript: An Overview
• ArcGIS Server Resource Center
• ArcGIS Server REST API and Services Directory
• Maps, layers, and graphics
• Tasks, geometry services, and Dojo
• Advanced tools and customization guidelines
• ArcGIS JavaScript Extensions for the Google Maps API
and Microsoft Virtual Earth
• Discussion and Tips and Tricks Throughout!
ArcGIS API for JavaScript:
An Overview
ArcGIS Server 9.3.1 mashups
Supported Web Clients
Google Earth
Desktop
ArcGIS JavaScript API
Virtual Earth\Google Maps
ArcGIS Clients
Web Map
Explorer
Mashup
Other Web Clients
OpenLayers
Yahoo Pipes
Adobe Flex/Java Fx/Silverlight
Consumer Mapping
SOAP
ArcGIS API for JavaScript
• Web
Web--browser based API
– High performance
– Easy
Easy--toto-use mapping applications
• Hosted by ESRI on ArcGIS Online and available
for free use
– No development or deployment license required on
the Web server hosting your application
– Flexible release cycle
– Akamai (24/7 Availability)
• Web Application Acceleration and Performance Management
Why JavaScript?
• One of the most used languages in the world
• Pure client development
• JavaScript frameworks abstract away browser
complexity (Dojo)
• Stability
– No new changes since 1999
• Path for HTML Viewer (ArcIMS) developers
Example applications
• King County Road Alert
• Parcel Notification
Creating JavaScript mapping Web pages
5. Preview Web
application
2. Publish resources
to ArcGIS Server
ArcGIS Server
HTML / JS
1. Author Maps /
GP Models
3. Discover
services using
Services
Directory
4. Copy/Paste
HTML/JS from
Resource Center
ArcGIS Server Resource Center
• http://resources.esri.com/arcgisserver
Javascript Sample Viewer
• Configure vs. Program
• Template
• Sample Viewer
• Demo
ArcGIS Server REST API and Services
Directory
What is REST?
• Representational State Transfer
• Simple serverserver-side interface
• Requests to the REST API are through HTTP
GETS
Web
Service
Interfaces
\
KML
WFS-T
WMS
REST
SOAP
• Everything is a URL!
SOAP vs. REST
• Great Keynote at Developers Summit
• http://www.esri.com/events/devsummit/session
s/keynote.html
Browser as the command line
• Basemap URL (resource):
http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/
Portland/Portland_ESRI_LandBase_AGO/MapServer
• Export Map (operation):
BaseURL/export?bbox=-122.6,45.459,-122.595,45.460&f=image
– Exports a map based on the
parameters specified in the
URL string
ArcGIS Server REST API
• Hierarchy of resources
• Resources and operations
ArcGIS Server 9.3 REST API
• All GIS services exposed as resources
– Service
Service--level metadata
• Some resources have operations
– Map service (export, find, identify)
– Map service layers (query)
– Image services (export)
– Geocode service (findAddressCandidates, Reverse
Geocode)
– Geoprocessing service (execute, submitjob)
– Geometry service (project, simplify, and others)
– Network Analyst (New at 9.3.1)
ArcGIS Server 9.3 REST API
• Results of operations can be returned as:
– HTML (Services Explorer—
Explorer—default)
– IMAGE (direct streamed image)
– KML (Google Earth, Google Maps, Virtual Earth)
– JSON (developer)
ArcGIS Server 9.3 REST API clients
• ArcGIS JavaScript APIs
• Flex/Silverlight APIs
• Web developers (outside of JavaScript APIs)
• KML Web developers
• Many other possibilities
– Mashup integration platforms (Yahoo! Pipes, MS
Popfly, others)
– Other programming languages (Ruby, Python, .NET,
Java, PHP, etc.)
ArcGIS Services Directory
ArcGIS Services Directory
• Discover information about services
• Understand how to use a service with the
ArcGIS API for JavaScript
• Get additional information about services
– Layers in the map, IDs of the layers used for
querying
– Attribute names
– Spatial reference
• If services are secured, they will require a login
• http://<server>/<instance>/rest/services
– http://www.example.com/arcgis/rest/services
REST API Admin
•http://<host>:<port>/arcgis/rest/admin
• Currently supports 2 administrative options
• Clear Cache Options
– Clear Cache Now
– Configure Clear Cache Policies
• Important Note: Always clear the REST API
Cache whenever you add, delete or update
services
• Access to REST Admin is secured
– Only agsadmin users can login (same as Manager)
Demo
• Visit the sampleserver1 ArcGIS Services
Directory
Maps, layers, and graphics
Map
• Typically added using HTML DIV element
var map = new esri.Map("map");
var tiledMapServiceLayer = new
esri.layers.ArcGISTiledMapServiceLayer(“..");
map.addLayer(tiledMapServiceLayer);
• Width and height come from DIV element
• Can overlay multiple layers from cached and
dynamic services
• Projected and geographic coordinate systems
must be defined by wellwell-known ID (WKID)
– Listings available at Resource Center
ArcGISTiledMapServiceLayer
• Cached map service resource exposed by the
ArcGIS Server REST API
• Accesses tiles from a cache instead of
dynamically rendering images
var map = new esri.Map("map");
var tiledMapServiceLayer = new
esri.layers.ArcGISTiledMapServiceLayer(“…");
esri.layers.ArcGISTiledMapServiceLayer
(“…");
map.addLayer(tiledMapServiceLayer);
Demo
• Combine multiple tiled layers
ArcGISDynamicMapServiceLayer
• Dynamic map service resource exposed by the
ArcGIS Server REST API
• Generates images on the fly
var map = new esri.Map("map");
var dynamicMapServiceLayer = new
esri.layers.ArcGISDynamicMapServiceLayer(“…");
esri.layers.ArcGISDynamicMapServiceLayer
(“…");
map.addLayer(dynamicMapServiceLayer);
Layer definitions and dynamic services
• Set layer definitions used to filter features of
individual layers in the map service
var layerDefinitions = [];
layerDefinitions[0] = "POPULATION > 5000000";
layerDefinitions[5] = "AREA > 100000";
dynamicMapServiceLayer.setLayerDefinitions(layerDefinitions
);
• Optionally, use setVisibleLayers to override the
visibility of layers in the map service
dynamicMapServiceLayer.setVisibleLayers([1,4]);
Combining dynamic and tiled layers
var map = new esri.Map("map");
//Takes a URL to a map in a map service.
var tiledMapServiceLayer = new
esri.layers.ArcGISTiledMapServiceLayer(“…");
map.addLayer(tiledMapServiceLayer);
//Takes a URL to a nonnon-cached map service.
var dynamicMapServiceLayer = new
esri.layers.ArcGISDynamicMapServiceLayer(“…");
//Make the dynamic layer 50% opaque
dynamicMapServiceLayer.setOpacity(0.5);
//Add the dynamic layer on top of the tiled layer
map.addLayer(dynamicMapServiceLayer);
Demo
• Combine dynamic and tiled layers
Custom Layers (Dynamic or Tiled)
• Leverage other technologies easily in the
Javascript API
• WMS, IMS, Other Tiled Services (9.2 Server)
• Demo
GraphicsLayer
• Allows graphics to be drawn on top of a map
• Every map has a GraphicsLayer
• Access using Map.Graphics property
var graphicsLayer = map.graphics;
Graphic
• Geometry + Attributes + Symbol + InfoTemplate
• Allows graphics to be drawn on top of a map
• Can be drawn by the user as markup or input to
a task
• Can be drawn by the application in response to
a task
• Exist as vectors in the browser
Symbols
• Determine how a graphic looks
• Marker, Line, Fill, and Text symbols
• Set geometry and symbology before adding to
the map
var symbol = new esri.symbol.SimpleMarkerSymbol();
symbol.setSize(10);
symbol.setColor(new dojo.Color([255,0,0]));
• Or (by chaining method calls)
var symbol = new
esri.symbol.SimpleMarkerSymbol().
esri.symbol.SimpleMarkerSymbol
().setSize
setSize(10).
(10).setColor
setColor
(new dojo.Color([255,0,0]));
dojo.Color([255,0,0]));
Geometry
• Integral part of a graphic
• Support for following geometry types:
– Point
– Multipoint
– Polyline
– Polygon
– Extent
InfoWindow and InfoTemplate
• HTML popup
• Often contains attributes of a Graphic
• Can be used to display custom content on a
map
Demo
• http://smoore
http://smoore--oly/js/dnr/dnr.htm
• http://serverx.esri.com/ArcGISJavaScriptAPI/Co
deGallery/CountyThematic.html
Simplifying data when using graphics
• Limit number of vertices transferring from
ArcGIS Server to Web browser
Renderers!
• Javascript API provides functionality to
symbolize your map graphics
• Unique Value Renderer
• Class Breaks Renderer
Multiple Graphics Layers
• Javascript API provides functionality to manage
your map graphics
• Demo
Browser Performance (multiple tests)
Betanews.com
Improve IE User Experience
• Test your application (especially) in Internet
Explorer
map = new esri.Map
esri.Map("map",
("map", {
{displayGraphicsOnPan
displayGraphicsOnPan:
: !dojo.isIE
!dojo.isIE });
• Demo (Firefox vs. IE)
Tasks, geometry services, and Dojo
Tasks
• API includes classes and methods for common
GIS tasks
– Querying
– Finding addresses
– Finding attributes
– Identifying features
– Geoprocessing
Find Task
• Search a map service exposed by the ArcGIS
Server REST API based on a string value
• Can search one or more layers within a service
Query Task
• Performs a query operation on a specific layer
in a map service resource exposed by the
ArcGIS Server REST API
• Spatial and
attribute filters
Geometry Service Task
• Works with a geometry service resource
exposed by the ArcGIS Server REST API
• Project, Simplify, Buffer
Demo
• Examine a Query Task and Geometry Service
Using a proxy page
• You need a proxy page when
– Application creates requests that exceed the URL
length limit imposed by the browser (2000
characters)
– Application uses a service that is secured with tokentokenbased authentication, and you want to keep the token
secure
• For ASP.NET:
esri.config.defaults.io.proxyUrl = "proxy.ashx";
• For Java/JSP:
esri.config.defaults.io.proxyUrl = "proxy.jsp";
Identify Task
• Performs an identify operation on layers of a
map service resource exposed by the ArcGIS
Server REST API
• Can identify features
in one or more layers
within a service
• Identify geometry can
be point, line,
polygon, or extent
Connecting to events
• Loading the page, clicking the mouse,
executing a task, and many other actions all
trigger events
• Can have multiple handlers for each event
• To connect to an event:
var myOnClick_connect = dojo.connect(map,
dojo.connect(map, "
"onClick
onClick",
",
myOnClickHandler);
myOnClickHandler
);
• To disconnect from an event:
dojo.disconnect(
dojo.disconnect
(myOnClick_connect
myOnClick_connect);
);
Demo
• Identify Task
• Identify Dijit Sample
Geocode Task
• Represents a geocode service resource
exposed by the ArcGIS Server REST API
• Geocode (x,y from address)
• Reverse geocode (address from x,y)
Demo
• Geocode Service
Geoprocessor Task
• Works with any GP Task resource exposed by
the ArcGIS Server REST API
• Synchronous or asynchronous
Demo
Find Water Pressure
• http://smoore
http://smoore--oly/js/spu/spu2.htm
Geocode an Excel Spreadsheet
• http://nwtech.esri.com/javascript/geocode/geoc
odeexcel.htm
Network Analyst Task
• Support for ArcGIS Network Analyst Route
Layers via ArcGIS Server 9.3.1
• Demo 1
• Demo 2
• Demo 3
Dojo
• Open source DHTML toolkit written in JavaScript
• Handles
– Core ArcGIS API for JavaScript functionality
– Browser differences
– Vector graphics support, visual effects, widgets
– AJAX and JSON support
• Take advantage of full Dojo toolkit, not just Dojo
commands exposed through JavaScript API
• http://dojotoolkit.org/
Dojo grid control
• Used to create interactive data grids
• Rendered in the browser
FeatureSet DataStore DataGrid
• Demo
• Convert FeatureSet to FileItemReadStore
dojo.forEach(featureSet.features, function(feature) {
...
items.push(dojo.mixin({}, feature.attributes));
});
var data = { identifier: "OBJECTID",
//unique id
label:featureSet.displayFieldName, //name field or display
items: items };
//set items
store = new dojo.data.ItemFileReadStore({ data:data });
• Use FileItemReadStore in DataGrid
grid.setStore(store, {OBJECTID:"*"});
Dojo charting
• Used to create charts and graphs
• Rendered in the browser
• Could use Google Charts instead
Demo
• http://www.dojotoolkit.org/
• http://resources.esri.com/arcgisserver/apis/java
script/arcgis/index.cfm?fa=codeGalleryDetails&
scriptID=15998
Printing
• Server side web application creates merged
image (.NET or PHP)
• Resource Center
• Demo
Printing: Application Flow
Client side Web
Application
Page
Graphics
+ Layers
Layout Page
with printable
elements
Layers
Image URL
http://myserver.com/...
Export Map
Merge Images
Output File
Output
image
Output folder
http://sampleserver1.arcgisonline.com/...
Export Map
Images
http://server.arcgisonline.com/...
Table of Contents and Legends
• Table of Contents Sample
• Custom Legend Service
or
• Static Legend
Animation
• Tsunami Demo
Advanced tools and guidelines for creating
applications
JavaScript editing and testing
• Fully functional JavaScript debuggers
– Microsoft Visual Studio 2008 Web Developer Express
– Mozilla Firefox and Firebug
– Aptana
• Simple text editors
– Notepad or other builtbuilt-in text editors
– PSPad
• Test application in all target browsers
– Various browsers and versions
Scripting guidelines
• Visit the Resource Center to learn more about:
– Loading layers, getting/setting properties, initializing
objects, resizing/repositioning the map
– Working with graphics
– Working with events
– Working with Dojo
– Default API configurations
– Map navigation
Demo
• Firebug
• Use Visual Studio Web Developer Express 2008
and script debugging in Internet Explorer
• Aptana
ArcGIS JavaScript Extensions for the
Google Maps API and
Microsoft Virtual Earth
ArcGIS JavaScript Extension for the Google Maps API
• Combine GIS content hosted in ArcGIS Server
with Google Maps basemap content
ArcGIS JavaScript Extension for the Google Maps API
• Works with cached and dynamic ArcGIS Server
services
– REST API
– KML
• Applications can be built in traditional mashup
form or as Google Mapplets
• Tiled maps use WGS 1984 Web Mercator
projection
– WKID: 102113
– Same as Virtual Earth
ArcGIS JavaScript Extension for Microsoft Virtual Earth
• Combine GIS content hosted in ArcGIS Server
with Virtual Earth basemap content
ArcGIS JavaScript Extension for Microsoft Virtual Earth
• Works with cached ArcGIS Server services
– Cache must be fused
• Content (VE shapes, tiles) can be viewed in 2D
or 3D
• Tiled maps use WGS 1984 Web Mercator
projection
– WKID: 102113
– Same as Google Maps
Demo
• http://smoore
http://smoore--oly/js/swig/swiggoogle.htm
Virtual Earth Tiles in the ArcGIS JS API
• Access Microsoft VE Tiled Basemaps in the
core ArcGIS Javascript API
• Demo (VPN Required)
Want to Learn More?
• Free Web Training Seminar
– Building Mashups Using the ArcGIS JavaScript APIs
• Instructor
Instructor--Led Training
– Introduction to ArcGIS Server
• New Course Specific to Javascript API Coming
Soon!
Javascript Links
• Essential Javascript - A Javascript Tutorial
• http://www.comptechdoc.org/independent/web/cgi/ja
vamanual/
• http://www.w3schools.com/jsref/default.asp
• http://javascript.crockford.com/
Dojo Links
• http://dojotoolkit.org/key
http://dojotoolkit.org/key--links
• Dojo Feature Explorer
• http://www.sitepen.com/labs/dojo.php
• http://archive.dojotoolkit.org/nightly/checkout/ (Great
source for learning how to use dijits and dojox
widgets, check out the tests folder)
• http://www.roseindia.net/dojo/
• 10 helpings of Dojo goodness
Summary
• Start at the Resource Center
– Concepts
– View the samples
– Community
• Pick a basemap
• Install Firefox/Firebug and/or Visual Studio
(Web Developer Express 2008 – Free!)
• Learn UI (Dijits
(Dijits/Layouts)
/Layouts) options available from
Dojo
• Setup a proxy page
Thank You
Scott Moore
[email protected]
ESRI
380 New York Street
Redlands, California
92373-8100 USA
Phone: 909-793-2853
Fax: 909-793-5953
E-mail: [email protected]