ArcGIS Server Javascript API

11/3/2008

Agenda
• ArcGIS API for JavaScript: An Overview
• ArcGIS Server Resource Center
• ArcGIS Server REST API and Services Directory
• Maps, layers, graphics, and tasks
ArcGIS JavaScript API • Advanced tools and customization guidelines
• ArcGIS JavaScript Extensions for the Google Maps API
EWUG, Oct 29-30 and Microsoft Virtual Earth

Evan Marshall
Copyright © 2008 ESRI. All rights reserved. Nohyun Myung Copyright © 2008 ESRI. All rights reserved.

ArcGIS Server 9.3 mashups
Supported Web Clients Google Earth
Desktop
ArcGIS JavaScript API ArcGIS Clients
Virtual EarthGoogle Maps Web Map

Explorer

ArcGIS JavaScript API: Mashup
SOAP

An Overview
Other Web Clients
OpenLayers

Yahoo Pipes

Consumer Mapping
Adobe Flex/Java Fx/Silverlight

Copyright © 2008 ESRI. All rights reserved. Copyright © 2008 ESRI. All rights reserved.

Selecting a Web mapping technology Selecting a Web mapping technology

• Web mapping application (out of the box) • ArcGIS Web ADF SDKs (.NET or Java)
– No programming skills required – Most sophisticated developer framework for ArcGIS
– Supports multiple data sources including ArcGIS Server (many utilities, classes, extensible task
Server, ArcIMS, and WMS framework)
– Includes many tools/tasks: Identify, overview map – Fully integrated with Visual Studio, NetBeans, and
and magnifier, geocoding, geoprocessing tasks, Eclipse
copyright text, etc. – Requires .NET or Java skills; good for organizations
– Ideal for creating GIS Web applications, as opposed that feel comfortable developing with .NET or Java
to applications targeting general public – Integration with .NET and Java (full security models,
– Ideal for highly skilled desktop users with limited access to databases and other enterprise systems
server and programming skills from the Web tier, access to fine-grained ArcObjects
– Requires .NET or Java environment to run calls)

1

11/3/2008

Selecting a Web mapping technology Example Applications - Demos

• ArcGIS API for Flex • Web Mapping Application (Server Manager)
– Similar in functionality to JavaScript API • Flex API Application
– Supports ArcGIS Server services with well known
coordinate system ID and ArcIMS services
– Free!
– Integrated with Adobe Flex Builder (requires Flex
skills)
– Easily embeddable into any Web site
– Ideal for users who understand Web design and have
Flash/Flex expertise
– Build rich Internet applications on top of best GIS
server

Selecting a Web mapping technology ArcGIS API for JavaScript: features

• ArcGIS API for JavaScript • Embed maps and tasks from any ArcGIS Server
– Simplest API (lightweight scripting model) into your Web site
– Migration path for Avenue, AML, and ArcIMS HTML • Use content provided by ESRI or use your own
Viewer users; JavaScript is similar in concept and content as a basemap
complexity to those scripting languages
• Map can be in any supported projection
– Free!
– Data sources are limited to ArcGIS Server services • Built on top of Dojo JavaScript toolkit
with a well known coordinate system ID (no custom – Graphics support, community, Dijits
projections; e.g., no ArcIMS or WMS) • Copy and paste HTML and JavaScript to make
– Access to geoprocessing and geolocators your own Web mapping application
– Easily embeddable into any Web site


ArcGIS API for JavaScript: functionality ArcGIS API for JavaScript

• Examples • Web-browser based API
– Display an interactive map of your own data – High performance, Runs inside of browser
– Execute a GIS model on the server and display – Web application server (IIS, Apache/Tomcat) not
results needed
– Display your data on ArcGIS Online basemap – Easy-to-use mapping applications
– Search for features or attributes in your GIS data and • Hosted by ESRI on ArcGIS Online and available
display results for free use
– Search for addresses and display results – No development or deployment license required on
the Web server hosting your application
– Flexible release cycle
– Akamai (24/7 Availability)
Copyright © 2008 ESRI. All rights reserved.
• Web Application Acceleration and Performance Management

2

11/3/2008

Why JavaScript? Example applications - Demos

• One of the most used languages in the world • Site Selection
• Pure client development • Parcel Notification
• JavaScript frameworks abstract away browser
complexity (Dojo)
• Stability
– No new changes since 1999
• Path for HTML Viewer (ArcIMS) developers


Creating JavaScript mapping Web pages ArcGIS Server Resource Center
5. Preview Web
2. Publish resources
application

• http://resources.esri.com/arcgisserver
to ArcGIS Server

ArcGIS Server

HTML / JS

1. Author Maps /
GP Models

3. Discover 4. Copy/Paste
services using HTML/JS from
Services Resource Center
Directory Copyright © 2008 ESRI. All rights reserved.

Demo

• Visit the ArcGIS Server Resource Center
• Create your first application from a sample
ArcGIS Server REST API and Services
Directory


3

11/3/2008

What is REST? Browser as the command line

• Representational State Transfer • Basemap URL (resource):
http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/
• Simple server-side interface Portland/Portland_ESRI_LandBase_AGO/MapServer
• Requests to the REST API are through HTTP • Export Map (operation):
GETS BaseURL/export?bbox=-122.6,45.459,-122.595,45.460&f=image
– Exports a map based on the
parameters specified in the
WFS-T
REST
SOAP

KML
WMS

URL string
Web
Service
Interfaces


ArcGIS Server REST API ArcGIS Server 9.3 REST API

• Hierarchy of resources • All GIS services exposed as resources
• Resources and operations – 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)


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

4

11/3/2008

Demo

• Visit the sampleserver1 ArcGIS Services
Directory

Maps, layers, and graphics


Map ArcGISTiledMapServiceLayer

• Typically added using HTML DIV element • Cached map service resource exposed by the
var map = new esri.Map(quot;mapquot;); ArcGIS Server REST API
var tiledMapServiceLayer = new
esri.layers.ArcGISTiledMapServiceLayer(“..quot;); • Accesses tiles from a cache instead of
map.addLayer(tiledMapServiceLayer); dynamically rendering images
• Width and height come from DIV element var map = new esri.Map(quot;mapquot;);
• Can overlay multiple layers from cached and esri.layers.ArcGISTiledMapServiceLayer(“…quot;);
dynamic services map.addLayer(tiledMapServiceLayer);

• Projected and geographic coordinate systems
must be defined by well-known ID (WKID)
– Listings available at Resource Center


Demo ArcGISDynamicMapServiceLayer

• Combine multiple tiled layers • Dynamic map service resource exposed by the
• Change size of Map Frame ArcGIS Server REST API
• Generates images on the fly
var map = new esri.Map(quot;mapquot;);
var dynamicMapServiceLayer = new
esri.layers.ArcGISDynamicMapServiceLayer(“…quot;);
map.addLayer(dynamicMapServiceLayer);


5

11/3/2008

Layer definitions and dynamic services Combining dynamic and tiled layers
var map = new esri.Map(quot;mapquot;);
• Set layer definitions used to filter features of
//Takes a URL to a map in a map service.
individual layers in the map service
var layerDefinitions = [];
esri.layers.ArcGISTiledMapServiceLayer(“…quot;);
layerDefinitions[0] = quot;POPULATION > 5000000quot;;
map.addLayer(tiledMapServiceLayer);
layerDefinitions[5] = quot;AREA > 100000quot;;
//Takes a URL to a non-cached map service.
dynamicMapServiceLayer.setLayerDefinitions(layerDefinitions
); var dynamicMapServiceLayer = new
esri.layers.ArcGISDynamicMapServiceLayer(“…quot;);
• Optionally, use setVisibleLayers to override the //Make the dynamic layer 50% opaque
visibility of layers in the map service dynamicMapServiceLayer.setOpacity(0.5);
dynamicMapServiceLayer.setVisibleLayers([1,4]); //Add the dynamic layer on top of the tiled layer
map.addLayer(dynamicMapServiceLayer);


Demo GraphicsLayer

• Combine dynamic and tiled layers • Every map has a GraphicsLayer

• Allows graphics to be drawn on top of a map

• Access using Map.Graphics property
var graphicsLayer = map.graphics;

•Can tie events to GraphicsLayer operations
(onClick, onGraphicRemove, etc.)


Graphic Geometry

• Geometry + Attributes + Symbol + InfoTemplate • Integral part of a graphic
• Allows graphics to be drawn on top of a map • Support for following geometry types:
• Can be drawn by the user as markup or input to – Point
a task – Multipoint
• Can be drawn by the application in response to – Polyline
a task – Polygon

• Exist as vectors in the browser (no additional
requests to the server)


6

11/3/2008

Attributes Symbols

• Can contain field attributes of a layer (if it is a • Determine how a graphic looks
result of a task performed on the layer) • 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().setSize(10).setColor
(new dojo.Color([255,0,0]));
• If graphic is created manually, user will need to
assign attributes.

InfoWindow and InfoTemplate

• HTML popup
• Often contains attributes of a Graphic
• Can be used to display custom content on a Tasks, geometry services, and Dojo
map


Tasks Find Task

• API includes classes and methods for common • Search a map service exposed by the ArcGIS
GIS tasks Server REST API based on a string value
– Querying • Can search one or more layers within a service
– Finding addresses
– Finding attributes
– Identifying features
– Geoprocessing


7

11/3/2008

Query Task Geometry Service Task

• Performs a query operation on a specific layer • Works with a geometry service resource
in a map service resource exposed by the exposed by the ArcGIS Server REST API
ArcGIS Server REST API • Project, Simplify, Buffer
• Spatial and
attribute filters


Identify Task Geocode Task

• Performs an identify operation on layers of a • Represents a geocode service resource
map service resource exposed by the ArcGIS exposed by the ArcGIS Server REST API
Server REST API • Geocode (x,y from address)
• Can identify features • Reverse geocode (address from x,y)
in one or more layers
within a service
• Identify geometry can
be point, line,
polygon, or extent


Geoprocessor Task Dojo

• Works with any GP Task resource exposed by • Open source DHTML toolkit written in JavaScript
the ArcGIS Server REST API • Handles
• Synchronous or asynchronous – 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/


8

11/3/2008

Charting
• Used to create charts and graphs
• Rendered in the browser
• Could use Google Charts API or Dojo Charting
Advanced tools and guidelines for creating
applications


JavaScript editing and testing Scripting guidelines

• Fully functional JavaScript debuggers • JSAPIConceptsInsideTheAPICodingGuidelines
– Microsoft Visual Studio 2008 Web Developer Express • Visit the Resource Center to learn more about:
– Mozilla Firefox and Firebug – Loading layers, getting/setting properties, initializing
– Aptana objects, resizing/repositioning the map
– Fiddler – Working with graphics
• Simple text editors – Working with events

– Notepad or other built-in text editors – Working with Dojo

– PSPad – Default API configurations
– Map navigation
• Test application in all target browsers
– Various browsers and versions


ArcGIS JavaScript Extension for the Google Maps API

• Combine GIS content hosted in ArcGIS Server
with Google Maps basemap content

ArcGIS JavaScript Extensions for the
Google Maps API and
Microsoft Virtual Earth


9

11/3/2008

ArcGIS JavaScript Extension for the Google Maps API ArcGIS JavaScript Extension for Microsoft Virtual Earth

• Works with cached and dynamic ArcGIS Server • Combine GIS content hosted in ArcGIS Server
services with Virtual Earth basemap content
– 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

• Works with cached ArcGIS Server services
– Cache must be fused
• Content (VE shapes, tiles) can be viewed in 2D
or 3D Thank You
• Tiled maps use WGS 1984 Web Mercator
projection
– WKID: 102113
– Same as Google Maps ESRI
380 New York Street
Redlands, California
92373-8100 USA
Phone: 909-793-2853
Fax: 909-793-5953
E-mail: info@esri.com

10

ArcGIS Server Javascript API

Recomendados

Recomendados

Más contenido relacionado

Destacado

Destacado (11)

Similar a ArcGIS Server Javascript API

Similar a ArcGIS Server Javascript API (20)

Último

Último (20)

ArcGIS Server Javascript API