ArcGIS Server mashups

Transcription

1 Welcome to ArcGIS Server 9.3.1: Creating Fast Web Mapping Applications With JavaScript Scott Moore ESRI Olympia, WA

2 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!

3 ArcGIS API for JavaScript: An Overview

4 ArcGIS Server mashups Supported Web Clients ArcGIS JavaScript API Virtual Earth\Google Maps Google Earth Desktop ArcGIS Clients Web Map Explorer Mashup SOAP Other Web Clients OpenLayers Yahoo Pipes Adobe Flex/Java Fx/Silverlight Consumer Mapping

5 ArcGIS API for JavaScript Web-browser browser based API High performance Easy-to-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

6 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

7 Example applications King County Road Alert Parcel Notification

8 Creating JavaScript mapping Web pages 2. Publish resources to ArcGIS Server 5. Preview Web application ArcGIS Server HTML / JS 1. Author Maps / GP Models 3. Discover services using Services Directory 4. Copy/Paste HTML/JS from Resource Center

9 ArcGIS Server Resource Center

10 Javascript Sample Viewer Configure vs. Program Template Sample Viewer Demo

11 ArcGIS Server REST API and Services Directory

12 What is REST? Representational State Transfer Simple server-side side interface Requests to the REST API are through HTTP GETS Everything is a URL! SOAP REST WMS WFS-T KML Web Service Interfaces \

13 SOAP vs. REST Great Keynote at Developers Summit s/keynote.html

14 Browser as the command line Basemap URL (resource): Portland/Portland_ESRI_LandBase_AGO/MapServer Export Map (operation): BaseURL/export?bbox=-122.6,45.459, ,45.460&f=image Exports a map based on the parameters specified in the URL string

15 ArcGIS Server REST API Hierarchy of resources Resources and operations

16 ArcGIS Server 9.3 REST API All GIS services exposed as resources 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)

17 ArcGIS Server 9.3 REST API Results of operations can be returned as: HTML (Services Explorer default) IMAGE (direct streamed image) KML (Google Earth, Google Maps, Virtual Earth) JSON (developer)

18 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.)

19 ArcGIS Services Directory

20 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

21 REST API 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)

22 Demo Visit the sampleserver1 ArcGIS Services Directory

23 Maps, layers, and graphics

24 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 well-known ID (WKID) Listings available at Resource Center

25 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( "); map.addlayer(tiledmapservicelayer);

26 Demo Combine multiple tiled layers

27 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( "); map.addlayer(dynamicmapservicelayer);

28 Layer definitions and dynamic services Set layer definitions used to filter features of individual layers in the map service var layerdefinitions = []; layerdefinitions[0] = "POPULATION > "; layerdefinitions[5] = "AREA > "; dynamicmapservicelayer.setlayerdefinitions(layerdefinitions ); Optionally, use setvisiblelayers to override the visibility of layers in the map service dynamicmapservicelayer.setvisiblelayers([1,4]);

29 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 non-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);

30 Demo Combine dynamic and tiled layers

31 Custom Layers (Dynamic or Tiled) Leverage other technologies easily in the Javascript API WMS, IMS, Other Tiled Services (9.2 Server) Demo

32 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;

33 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

34 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(). ().setsize(10).setcolor (new dojo.color([255,0,0]));

35 Geometry Integral part of a graphic Support for following geometry types: Point Multipoint Polyline Polygon Extent

36 InfoWindow and InfoTemplate HTML popup Often contains attributes of a Graphic Can be used to display custom content on a map

37 Demo degallery/countythematic.html

38 Simplifying data when using graphics Limit number of vertices transferring from ArcGIS Server to Web browser

39 Renderers! Javascript API provides functionality to symbolize your map graphics Unique Value Renderer Class Breaks Renderer

40 Multiple Graphics Layers Javascript API provides functionality to manage your map graphics Demo

41 Browser Performance (multiple tests) Betanews.com

42 Improve IE User Experience Test your application (especially) in Internet Explorer map = new esri.map("map", {displaygraphicsonpan:!dojo.isie }); Demo (Firefox vs. IE)

43 Tasks, geometry services, and Dojo

44 Tasks API includes classes and methods for common GIS tasks Querying Finding addresses Finding attributes Identifying features Geoprocessing

45 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

46 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

47 Geometry Service Task Works with a geometry service resource exposed by the ArcGIS Server REST API Project, Simplify, Buffer

48 Demo Examine a Query Task and Geometry Service

49 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 token- based 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";

50 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

51 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, "onclick", myonclickhandler); To disconnect from an event: dojo.disconnect(myonclick_connect);

52 Demo Identify Task Identify Dijit Sample

53 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)

54 Demo Geocode Service

55 Geoprocessor Task Works with any GP Task resource exposed by the ArcGIS Server REST API Synchronous or asynchronous

56 Demo Find Water Pressure Geocode an Excel Spreadsheet odeexcel.htm

57 Network Analyst Task Support for ArcGIS Network Analyst Route Layers via ArcGIS Server Demo 1 Demo 2 Demo 3

58 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

59 Dojo grid control Used to create interactive data grids Rendered in the browser

60 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:"*"});

61 Dojo charting Used to create charts and graphs Rendered in the browser Could use Google Charts instead

62 Demo script/arcgis/index.cfm?fa=codegallerydetails& scriptid=15998

63 Printing Server side web application creates merged image (.NET or PHP) Resource Center Demo

64 Printing: Application Flow Graphics + Layers Client side Web Application Page Layout Page with printable elements Layers Output image Export Map Merge Images Output File Output folder Image URL Export Map Images

65 Table of Contents and Legends Table of Contents Sample Custom Legend Service or Static Legend

66 Animation Tsunami Demo

67 Advanced tools and guidelines for creating applications

68 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 built-in in text editors PSPad Test application in all target browsers Various browsers and versions

69 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

70 Demo Firebug Use Visual Studio Web Developer Express 2008 and script debugging in Internet Explorer Aptana

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

72 ArcGIS JavaScript Extension for the Google Maps API Combine GIS content hosted in ArcGIS Server with Google Maps basemap content

73 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: Same as Virtual Earth

74 ArcGIS JavaScript Extension for Microsoft Virtual Earth Combine GIS content hosted in ArcGIS Server with Virtual Earth basemap content

75 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: Same as Google Maps

76 Demo

77 Virtual Earth Tiles in the ArcGIS JS API Access Microsoft VE Tiled Basemaps in the core ArcGIS Javascript API Demo (VPN Required)

78 Want to Learn More? Free Web Training Seminar Building Mashups Using the ArcGIS JavaScript APIs Instructor-Led Training Introduction to ArcGIS Server New Course Specific to Javascript API Coming Soon!

79 Javascript Links Essential Javascript - A Javascript Tutorial vamanual/

80 Dojo Links Dojo Feature Explorer (Great source for learning how to use dijits and dojox widgets, check out the tests folder) 10 helpings of Dojo goodness

81 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/Layouts) options available from Dojo Setup a proxy page

82 Thank You Scott Moore ESRI 380 New York Street Redlands, California USA Phone: Fax: