• Save
ArcGIS Server Javascript API
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

ArcGIS Server Javascript API

  • 11,969 views
Uploaded on

Utilizing a powerful and proven development framework, ...

Utilizing a powerful and proven development framework,
ArcGIS Server opens itself up to the Javascript world. With the
new Javascript API, users can take advantage of an incredibly
robust development environment to build and deploy web
mapping applications within an organization. This session will
explore the utilization of existing Javascript developer libraries
that can be utilized to make simple yet powerful GIS web
applications, showcase the performance increases that users will
see with ArcGIS Server and introduce a simple mash up
environment with Google Maps and Microsoft Virtual Earth

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • Excellent presentation on the use of ArcGIS JavaScript API.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
11,969
On Slideshare
11,948
From Embeds
21
Number of Embeds
4

Actions

Shares
Downloads
0
Comments
1
Likes
6

Embeds 21

http://www.ewug.org 15
http://www.slideee.com 4
http://www.lmodules.com 1
http://www.docshut.com 1

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. 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) Copyright © 2008 ESRI. All rights reserved. Copyright © 2008 ESRI. All rights reserved. 1
  • 2. 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 Copyright © 2008 ESRI. All rights reserved. Copyright © 2008 ESRI. All rights reserved. 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 Copyright © 2008 ESRI. All rights reserved. Copyright © 2008 ESRI. All rights reserved. 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 Copyright © 2008 ESRI. All rights reserved. 2
  • 3. 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 Copyright © 2008 ESRI. All rights reserved. Copyright © 2008 ESRI. All rights reserved. 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 Copyright © 2008 ESRI. All rights reserved. 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 Copyright © 2008 ESRI. All rights reserved. Copyright © 2008 ESRI. All rights reserved. 3
  • 4. 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 Copyright © 2008 ESRI. All rights reserved. Copyright © 2008 ESRI. All rights reserved. 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) Copyright © 2008 ESRI. All rights reserved. Copyright © 2008 ESRI. All rights reserved. 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 Copyright © 2008 ESRI. All rights reserved. Copyright © 2008 ESRI. All rights reserved. 4
  • 5. 11/3/2008 Demo • Visit the sampleserver1 ArcGIS Services Directory Maps, layers, and graphics Copyright © 2008 ESRI. All rights reserved. Copyright © 2008 ESRI. All rights reserved. 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;); var tiledMapServiceLayer = new • 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 Copyright © 2008 ESRI. All rights reserved. Copyright © 2008 ESRI. All rights reserved. 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); Copyright © 2008 ESRI. All rights reserved. Copyright © 2008 ESRI. All rights reserved. 5
  • 6. 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 tiledMapServiceLayer = new 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); Copyright © 2008 ESRI. All rights reserved. Copyright © 2008 ESRI. All rights reserved. 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.) Copyright © 2008 ESRI. All rights reserved. Copyright © 2008 ESRI. All rights reserved. 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) Copyright © 2008 ESRI. All rights reserved. Copyright © 2008 ESRI. All rights reserved. 6
  • 7. 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. Copyright © 2008 ESRI. All rights reserved. Copyright © 2008 ESRI. All rights reserved. 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 Copyright © 2008 ESRI. All rights reserved. Copyright © 2008 ESRI. All rights reserved. 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 Copyright © 2008 ESRI. All rights reserved. Copyright © 2008 ESRI. All rights reserved. 7
  • 8. 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 Copyright © 2008 ESRI. All rights reserved. Copyright © 2008 ESRI. All rights reserved. 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 Copyright © 2008 ESRI. All rights reserved. Copyright © 2008 ESRI. All rights reserved. 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/ Copyright © 2008 ESRI. All rights reserved. Copyright © 2008 ESRI. All rights reserved. 8
  • 9. 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 Copyright © 2008 ESRI. All rights reserved. Copyright © 2008 ESRI. All rights reserved. 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 Copyright © 2008 ESRI. All rights reserved. Copyright © 2008 ESRI. All rights reserved. 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 Copyright © 2008 ESRI. All rights reserved. Copyright © 2008 ESRI. All rights reserved. 9
  • 10. 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 Copyright © 2008 ESRI. All rights reserved. Copyright © 2008 ESRI. All rights reserved. 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 Copyright © 2008 ESRI. All rights reserved. 10