CreatingFastWebMapping Mon Moore ESRI

Welcome toWelcome toArcGIS Server 9.3.1:ArcGIS Server 9.3.1:

Creating Fast Web Mapping Creating Fast Web Mapping Applications With JavaScriptApplications With JavaScriptApplications With JavaScriptApplications With JavaScript

Scott MooreScott Moore

ESRI ESRI –– Olympia, WAOlympia, WA

[email protected]@esri.com

Seminar agendaSeminar agenda

•• ArcGIS API for JavaScript: An OverviewArcGIS API for JavaScript: An Overview

•• ArcGIS Server Resource CenterArcGIS Server Resource Center

•• ArcGIS Server REST API and Services DirectoryArcGIS Server REST API and Services Directory

•• Maps, layers, and graphicsMaps, layers, and graphics

•• Tasks, geometry services, and DojoTasks, geometry services, and Dojo•• Tasks, geometry services, and DojoTasks, geometry services, and Dojo

•• Advanced tools and customization guidelinesAdvanced tools and customization guidelines

•• ArcGIS JavaScript Extensions for the Google Maps API ArcGIS JavaScript Extensions for the Google Maps API

and Microsoft Virtual Earthand Microsoft Virtual Earth

•• Discussion and Tips and Tricks Throughout!Discussion and Tips and Tricks Throughout!

ArcGIS API for JavaScript:ArcGIS API for JavaScript:An OverviewAn Overview

ArcGIS Server 9.3.1 mashups

Desktop

Supported Web ClientsSupported Web Clients

ArcGIS ClientsArcGIS Clients

Mashup

ArcGIS JavaScript API

Virtual Earth\Google Maps

Google Earth

Explorer

Web Map

SOAPSOAP

Consumer MappingConsumer Mapping

OpenLayersOpenLayers

Yahoo PipesYahoo Pipes

Adobe Flex/Java Fx/SilverlightAdobe Flex/Java Fx/Silverlight

Other Web ClientsOther Web Clients

ArcGIS API for JavaScriptArcGIS API for JavaScript

•• WebWeb--browser based APIbrowser based API

–– High performanceHigh performance

–– EasyEasy--toto--use mapping applicationsuse mapping applications

•• Hosted by ESRI on ArcGIS Online and available Hosted by ESRI on ArcGIS Online and available

for free usefor free usefor free usefor free use

–– No development or deployment license required on No development or deployment license required on

the Web server hosting your applicationthe Web server hosting your application

–– Flexible release cycleFlexible release cycle

–– Akamai (24/7 Availability)Akamai (24/7 Availability)

•• Web Application Acceleration and Performance ManagementWeb Application Acceleration and Performance Management

Why JavaScript?Why JavaScript?

• One of the most used languages in the world

• Pure client development

• JavaScript frameworks abstract away browser

complexity (Dojo)

• Stability• Stability

– No new changes since 1999

• Path for HTML Viewer (ArcIMS) developers

Example applicationsExample applications

•• King County Road AlertKing County Road Alert

•• Parcel NotificationParcel Notification

Creating JavaScript mapping Web pagesCreating JavaScript mapping Web pages

ArcGIS ServerArcGIS Server

2. Publish resources

to ArcGIS Server

5. Preview Web

application

1. Author Maps /

GP Models

3. Discover

services using

Services

Directory

4. Copy/Paste

HTML/JS from

Resource Center

HTML / JS

ArcGIS Server Resource CenterArcGIS Server Resource Center

•• http://resources.esri.com/arcgisserverhttp://resources.esri.com/arcgisserver

JavascriptJavascript Sample ViewerSample Viewer

•• Configure vs. ProgramConfigure vs. Program

•• TemplateTemplate

•• Sample ViewerSample Viewer

•• DemoDemo

ArcGIS Server REST API and Services ArcGIS Server REST API and Services DirectoryDirectory

What is REST?What is REST?

•• Representational State TransferRepresentational State Transfer

•• Simple serverSimple server--side interfaceside interface

•• Requests to the REST API are through HTTP Requests to the REST API are through HTTP

GETSGETS

•• Everything is a URL!Everything is a URL!•• Everything is a URL!Everything is a URL!

\Web

Service

Interfaces

RE

ST

WM

S

WF

S-T

KM

L

SO

AP

SOAP vs. RESTSOAP vs. REST

•• Great Keynote at Developers SummitGreat Keynote at Developers Summit

•• http://www.esri.com/events/devsummit/sessionhttp://www.esri.com/events/devsummit/session

s/keynote.htmls/keynote.html

Browser as the command lineBrowser as the command line

•• Basemap URL (resource):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 theExports a map based on the–– Exports a map based on theExports a map based on the

parameters specified in theparameters specified in the

URL string URL string

ArcGIS Server REST APIArcGIS Server REST API

•• Hierarchy of resourcesHierarchy of resources

•• Resources and operationsResources and operations

ArcGIS Server 9.3 REST APIArcGIS Server 9.3 REST API

•• All GIS services exposed as resourcesAll GIS services exposed as resources

–– ServiceService--level metadatalevel metadata

•• Some resources have operationsSome resources have operations

–– Map service (export, find, identify)Map service (export, find, identify)

–– Map service layers (query)Map service layers (query)–– Map service layers (query)Map service layers (query)

–– Image services (export)Image services (export)

–– GeocodeGeocode service (findAddressCandidates, Reverse service (findAddressCandidates, Reverse

Geocode)Geocode)

–– Geoprocessing service (execute, submitjob)Geoprocessing service (execute, submitjob)

–– Geometry service (project, simplify, and others)Geometry service (project, simplify, and others)

–– Network Analyst (New at 9.3.1)Network Analyst (New at 9.3.1)

ArcGIS Server 9.3 REST APIArcGIS Server 9.3 REST API

•• Results of operations can be returned as:Results of operations can be returned as:

–– HTML (Services ExplorerHTML (Services Explorer——default)default)

–– IMAGE (direct streamed image)IMAGE (direct streamed image)

–– KML (Google Earth, Google Maps, Virtual Earth)KML (Google Earth, Google Maps, Virtual Earth)

–– JSON (developer)JSON (developer)–– JSON (developer)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• Many other possibilities

– Mashup integration platforms (Yahoo! Pipes, MS

Popfly, others)

– Other programming languages (Ruby, Python, .NET,

Java, PHP, etc.)

ArcGIS Services DirectoryArcGIS Services Directory

ArcGIS Services DirectoryArcGIS Services Directory

•• Discover information about servicesDiscover information about services

•• Understand how to use a service with the Understand how to use a service with the

ArcGIS API for JavaScriptArcGIS API for JavaScript

•• Get additional information about servicesGet additional information about services

–– Layers in the map, IDs of the layers used for Layers in the map, IDs of the layers used for –– Layers in the map, IDs of the layers used for Layers in the map, IDs of the layers used for

queryingquerying

–– Attribute namesAttribute names

–– Spatial referenceSpatial reference

•• If services are secured, they will require a loginIf services are secured, they will require a login

•• http://<server>/<instance>/rest/serviceshttp://<server>/<instance>/rest/services

–– http://www.example.com/arcgis/rest/serviceshttp://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– 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)

DemoDemo

•• Visit the Visit the sampleserver1 ArcGIS Services sampleserver1 ArcGIS Services

DirectoryDirectory

Maps, layers, and graphicsMaps, layers, and graphics

MapMap

•• Typically added using HTML DIV elementTypically added using HTML DIV elementvar map = new esri.Map("map");var map = new esri.Map("map");

var tiledMapServiceLayer = new var tiledMapServiceLayer = new

esri.layers.ArcGISTiledMapServiceLayer(“..");esri.layers.ArcGISTiledMapServiceLayer(“..");

map.addLayer(tiledMapServiceLayer);map.addLayer(tiledMapServiceLayer);

•• Width and height come from DIV elementWidth and height come from DIV element•• Width and height come from DIV elementWidth and height come from DIV element

•• Can overlay multiple layers from cached and Can overlay multiple layers from cached and

dynamic servicesdynamic services

•• Projected and geographic coordinate systems Projected and geographic coordinate systems

must be defined by wellmust be defined by well--known ID (WKID) known ID (WKID)

–– Listings available at Resource CenterListings available at Resource Center

ArcGISTiledMapServiceLayerArcGISTiledMapServiceLayer

•• Cached map service resource exposed by the Cached map service resource exposed by the


•• Accesses tiles from a cache instead of Accesses tiles from a cache instead of

dynamically rendering imagesdynamically rendering imagesvar map = new esri.Map("map");var map = new esri.Map("map");var map = new esri.Map("map");var map = new esri.Map("map");

varvar tiledMapServiceLayer = new tiledMapServiceLayer = new

esri.layers.ArcGISTiledMapServiceLayeresri.layers.ArcGISTiledMapServiceLayer(“…");(“…");

map.addLayer(tiledMapServiceLayer); map.addLayer(tiledMapServiceLayer);

DemoDemo

•• Combine multiple tiled layersCombine multiple tiled layers

ArcGISDynamicMapServiceLayerArcGISDynamicMapServiceLayer

•• Dynamic map service resource exposed by the Dynamic map service resource exposed by the


•• Generates images on the flyGenerates images on the flyvar map = new esri.Map("map");var map = new esri.Map("map");

var dynamicMapServiceLayer = new var dynamicMapServiceLayer = new

esri.layers.ArcGISDynamicMapServiceLayeresri.layers.ArcGISDynamicMapServiceLayer(“…");(“…");esri.layers.ArcGISDynamicMapServiceLayeresri.layers.ArcGISDynamicMapServiceLayer(“…");(“…");

map.addLayer(dynamicMapServiceLayer); map.addLayer(dynamicMapServiceLayer);

Layer definitions and dynamic servicesLayer definitions and dynamic services

•• Set layer definitions used to filter features of Set layer definitions used to filter features of

individual layers in the map serviceindividual layers in the map servicevar layerDefinitions = [];var layerDefinitions = [];

layerDefinitions[0] = "POPULATION > 5000000";layerDefinitions[0] = "POPULATION > 5000000";

layerDefinitions[5] = "AREA > 100000";layerDefinitions[5] = "AREA > 100000";

dynamicMapServiceLayer.setLayerDefinitions(layerDefinitionsdynamicMapServiceLayer.setLayerDefinitions(layerDefinitionsdynamicMapServiceLayer.setLayerDefinitions(layerDefinitionsdynamicMapServiceLayer.setLayerDefinitions(layerDefinitions

); );

•• Optionally, use setVisibleLayers to override the Optionally, use setVisibleLayers to override the

visibility of layers in the map servicevisibility of layers in the map servicedynamicMapServiceLayer.setVisibleLayers([1,4]); dynamicMapServiceLayer.setVisibleLayers([1,4]);

Combining dynamic and tiled layersCombining dynamic and tiled layers

var map = new esri.Map("map");var map = new esri.Map("map");

//Takes a URL to a map in a map service.//Takes a URL to a map in a map service.

var tiledMapServiceLayer = new var tiledMapServiceLayer = new

esri.layers.ArcGISTiledMapServiceLayer(“…");esri.layers.ArcGISTiledMapServiceLayer(“…");

map.addLayer(tiledMapServiceLayer);map.addLayer(tiledMapServiceLayer);

//Takes a URL to a non//Takes a URL to a non--cached map service.cached map service.

var dynamicMapServiceLayer = new var dynamicMapServiceLayer = new

esri.layers.ArcGISDynamicMapServiceLayer(“…");esri.layers.ArcGISDynamicMapServiceLayer(“…");

//Make the dynamic layer 50% opaque//Make the dynamic layer 50% opaque

dynamicMapServiceLayer.setOpacity(0.5);dynamicMapServiceLayer.setOpacity(0.5);

//Add the dynamic layer on top of the tiled layer//Add the dynamic layer on top of the tiled layer

map.addLayer(dynamicMapServiceLayer); map.addLayer(dynamicMapServiceLayer);

DemoDemo

•• Combine dynamic and tiled layersCombine dynamic and tiled layers

Custom Layers (Dynamic or Tiled)Custom Layers (Dynamic or Tiled)

•• Leverage other technologies easily in the Leverage other technologies easily in the

JavascriptJavascript APIAPI

•• WMS, IMS, Other Tiled Services (9.2 Server)WMS, IMS, Other Tiled Services (9.2 Server)

•• DemoDemo

GraphicsLayerGraphicsLayer

•• Allows graphics to be drawn on top of a mapAllows graphics to be drawn on top of a map

•• Every map has a GraphicsLayerEvery map has a GraphicsLayer

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

GraphicGraphic

•• Allows graphics to be drawn on top of a mapAllows graphics to be drawn on top of a map

•• Can be drawn by the user as markup or input to Can be drawn by the user as markup or input to

a taska task

•• Can be drawn by the application in response to Can be drawn by the application in response to

•• Geometry + Attributes + Symbol + InfoTemplateGeometry + Attributes + Symbol + InfoTemplate

•• Can be drawn by the application in response to Can be drawn by the application in response to

a taska task

•• Exist as vectors in the browserExist as vectors in the browser

SymbolsSymbols

•• Determine how a graphic looksDetermine how a graphic looks

•• Marker, Line, Fill, and Text symbolsMarker, Line, Fill, and Text symbols

•• Set geometry and symbology before adding to Set geometry and symbology before adding to

the mapthe mapvar symbol = new esri.symbol.SimpleMarkerSymbol();var symbol = new esri.symbol.SimpleMarkerSymbol();var symbol = new esri.symbol.SimpleMarkerSymbol();var symbol = new esri.symbol.SimpleMarkerSymbol();

symbol.setSize(10);symbol.setSize(10);

symbol.setColor(new dojo.Color([255,0,0]));symbol.setColor(new dojo.Color([255,0,0]));

•• Or (by chaining method calls)Or (by chaining method calls)varvar symbol = new symbol = new

esri.symbol.SimpleMarkerSymbolesri.symbol.SimpleMarkerSymbol().().setSizesetSize(10).(10).setColorsetColor

(new (new dojo.Colordojo.Color([255,0,0])); ([255,0,0]));

GeometryGeometry

•• Integral part of a graphicIntegral part of a graphic

•• Support for following geometry types:Support for following geometry types:

–– PointPoint

–– MultipointMultipoint

–– PolylinePolyline–– PolylinePolyline

–– PolygonPolygon

–– ExtentExtent

InfoWindow and InfoTemplateInfoWindow and InfoTemplate

•• HTML popupHTML popup

•• Often contains attributes of a GraphicOften contains attributes of a Graphic

•• Can be used to display custom content on a Can be used to display custom content on a

mapmap

DemoDemo

•• http://smoorehttp://smoore--oly/js/dnr/dnr.htmoly/js/dnr/dnr.htm

•• http://serverx.esri.com/ArcGISJavaScriptAPI/Cohttp://serverx.esri.com/ArcGISJavaScriptAPI/Co

deGallery/CountyThematic.htmldeGallery/CountyThematic.html

Simplifying data when using graphicsSimplifying data when using graphics

•• Limit number of vertices transferring from Limit number of vertices transferring from

ArcGIS Server to Web browserArcGIS Server to Web browser

Renderers!Renderers!

•• JavascriptJavascript API provides functionality to API provides functionality to

symbolize your map graphicssymbolize your map graphics

•• Unique Value RendererUnique Value Renderer

•• Class Breaks RendererClass Breaks Renderer

Multiple Graphics LayersMultiple Graphics Layers

•• JavascriptJavascript API provides functionality to manage API provides functionality to manage

your map graphicsyour map graphics

•• DemoDemo

Browser Performance (multiple tests)

Betanews.comBetanews.com

Improve IE User ExperienceImprove IE User Experience

•• Test your application (especially) in Internet Test your application (especially) in Internet

ExplorerExplorermap = new map = new esri.Mapesri.Map("map", {("map", {displayGraphicsOnPandisplayGraphicsOnPan: !: !dojo.isIEdojo.isIE });});

•• DemoDemo (Firefox vs. IE)(Firefox vs. IE)

Tasks, geometry services, and DojoTasks, geometry services, and Dojo

TasksTasks

•• API includes classes and methods for common API includes classes and methods for common

GIS tasksGIS tasks

–– Querying Querying

–– Finding addresses Finding addresses

–– Finding attributes Finding attributes –– Finding attributes Finding attributes

–– Identifying features Identifying features

–– Geoprocessing Geoprocessing

Find TaskFind Task

•• Search a map service exposed by the ArcGIS Search a map service exposed by the ArcGIS

Server REST API based on a string valueServer REST API based on a string value

•• Can search one or more layers within a serviceCan search one or more layers within a service

Query TaskQuery Task

•• Performs a query operation on a specific layer Performs a query operation on a specific layer

in a map service resource exposed by the in a map service resource exposed by the


•• Spatial andSpatial and

attribute filtersattribute filtersattribute filtersattribute filters

Geometry Service TaskGeometry Service Task

•• Works with a geometry service resource Works with a geometry service resource

exposed by the ArcGIS Server REST APIexposed by the ArcGIS Server REST API

•• Project, Simplify, BufferProject, Simplify, Buffer

DemoDemo

•• Examine a Query Task and Geometry ServiceExamine a Query Task and Geometry Service

Using a proxy pageUsing a proxy page

•• You need a proxy page whenYou need a proxy page when

–– Application creates requests that exceed the URL Application creates requests that exceed the URL

length limit imposed by the browser (2000 length limit imposed by the browser (2000

characters)characters)

–– Application uses a service that is secured with tokenApplication uses a service that is secured with token--

based authentication, and you want to keep the token based authentication, and you want to keep the token based authentication, and you want to keep the token based authentication, and you want to keep the token

securesecure

•• For ASP.NET:For ASP.NET:esri.config.defaults.io.proxyUrlesri.config.defaults.io.proxyUrl = "proxy.ashx";= "proxy.ashx";

•• For Java/JSP:For Java/JSP:esri.config.defaults.io.proxyUrlesri.config.defaults.io.proxyUrl = "proxy.jsp";= "proxy.jsp";

Identify TaskIdentify Task

•• Performs an identify operation on layers of a Performs an identify operation on layers of a

map service resource exposed by the ArcGIS map service resource exposed by the ArcGIS

Server REST APIServer REST API

•• Can identify features Can identify features

in one or more layers in one or more layers in one or more layers in one or more layers

within a servicewithin a service

•• Identify geometry can Identify geometry can

be point, line, be point, line,

polygon, or extent polygon, or extent

Connecting to eventsConnecting to events

•• Loading the page, clicking the mouse, Loading the page, clicking the mouse,

executing a task, and many other actions all executing a task, and many other actions all

trigger eventstrigger events

•• Can have multiple handlers for each eventCan have multiple handlers for each event

•• To connect to an event:To connect to an event:•• To connect to an event:To connect to an event:varvar myOnClick_connectmyOnClick_connect = = dojo.connectdojo.connect(map, "(map, "onClickonClick", ",

myOnClickHandlermyOnClickHandler););

•• To disconnect from an event:To disconnect from an event:dojo.disconnectdojo.disconnect((myOnClick_connectmyOnClick_connect); );

DemoDemo

•• Identify TaskIdentify Task

•• Identify Identify DijitDijit SampleSample

Geocode TaskGeocode Task

•• Represents a Represents a geocodegeocode service resource service resource

exposed by the ArcGIS Server REST APIexposed by the ArcGIS Server REST API

•• GeocodeGeocode (x,y from address)(x,y from address)

•• Reverse Reverse geocodegeocode (address from x,y)(address from x,y)

DemoDemo

•• GeocodeGeocode ServiceService

GeoprocessorGeoprocessor TaskTask

•• Works with any GP Task resource exposed by Works with any GP Task resource exposed by

the ArcGIS Server REST APIthe ArcGIS Server REST API

•• Synchronous or asynchronousSynchronous or asynchronous

DemoDemo

Find Water PressureFind Water Pressure

•• http://smoorehttp://smoore--oly/js/spu/spu2.htmoly/js/spu/spu2.htm

GeocodeGeocode an Excel Spreadsheetan Excel Spreadsheet

•• http://nwtech.esri.com/javascript/geocode/geochttp://nwtech.esri.com/javascript/geocode/geoc

odeexcel.htmodeexcel.htmodeexcel.htmodeexcel.htm

Network Analyst TaskNetwork Analyst Task

•• Support for Support for ArcGISArcGIS Network Analyst Route Network Analyst Route

Layers via Layers via ArcGISArcGIS Server 9.3.1Server 9.3.1

•• Demo 1Demo 1

•• Demo 2Demo 2

•• Demo 3Demo 3•• Demo 3Demo 3

DojoDojo

•• Open source DHTML toolkit written in JavaScriptOpen source DHTML toolkit written in JavaScript

•• HandlesHandles

–– Core ArcGIS API for JavaScript functionalityCore ArcGIS API for JavaScript functionality

–– Browser differencesBrowser differences

–– Vector graphics support, visual effects, widgetsVector graphics support, visual effects, widgets–– Vector graphics support, visual effects, widgetsVector graphics support, visual effects, widgets

–– AJAX and JSON supportAJAX and JSON support

•• Take advantage of full Dojo toolkit, not just Dojo Take advantage of full Dojo toolkit, not just Dojo

commands exposed through JavaScript APIcommands exposed through JavaScript API

•• http://dojotoolkit.org/http://dojotoolkit.org/

Dojo grid controlDojo grid control

•• Used to create interactive data gridsUsed to create interactive data grids

•• Rendered in the browserRendered in the browser

FeatureSetFeatureSet �� DataStoreDataStore �� DataGridDataGrid

•• DemoDemo

•• Convert Convert FeatureSetFeatureSet to to FileItemReadStoreFileItemReadStore

dojo.forEach(featureSet.features, function(feature) {

...

items.push(dojo.mixin({}, feature.attributes));

});

•• Use Use FileItemReadStoreFileItemReadStore in in DataGridDataGrid

});

var data = { identifier: "OBJECTID", //unique id

label:featureSet.displayFieldName, //name field or display

items: items }; //set items

store = new dojo.data.ItemFileReadStore({ data:data });

grid.setStore(store, {OBJECTID:"*"});

Dojo chartingDojo charting

•• Used to create charts and graphsUsed to create charts and graphs

•• Rendered in the browserRendered in the browser

•• Could use Google Charts insteadCould use Google Charts instead

DemoDemo

•• http://www.dojotoolkit.org/http://www.dojotoolkit.org/

•• http://resources.esri.com/arcgisserver/apis/javahttp://resources.esri.com/arcgisserver/apis/java

script/arcgis/index.cfm?fa=codeGalleryDetails&script/arcgis/index.cfm?fa=codeGalleryDetails&

scriptID=15998scriptID=15998

PrintingPrinting

•• Server side web application creates merged Server side web application creates merged

image (.NET or PHP)image (.NET or PHP)

•• Resource CenterResource Center

•• DemoDemo

Printing: Application FlowPrinting: Application Flow

Client side Web Application

Page

Layout Page with printable

elements

Graphics+ Layers

elements

Export MapMerge Images

Output File

http://myserver.com/...

http://sampleserver1.arcgisonline.com/...

http://server.arcgisonline.com/...

Output folder

Image URLLayers

Outputimage

Export MapImages

Table of Contents and LegendsTable of Contents and Legends

•• Table of Contents SampleTable of Contents Sample

•• Custom Legend ServiceCustom Legend Service

oror

•• Static LegendStatic Legend

AnimationAnimation

•• Tsunami DemoTsunami Demo

Advanced tools and guidelines for creating Advanced tools and guidelines for creating applicationsapplications

JavaScript editing and testingJavaScript editing and testing

•• Fully functional JavaScript debuggersFully functional JavaScript debuggers

–– Microsoft Visual Studio 2008 Web Developer ExpressMicrosoft Visual Studio 2008 Web Developer Express

–– Mozilla Firefox and FirebugMozilla Firefox and Firebug

–– AptanaAptana

•• Simple text editorsSimple text editors•• Simple text editorsSimple text editors

–– Notepad or other builtNotepad or other built--in text editorsin text editors

–– PSPadPSPad

•• Test application in all target browsersTest application in all target browsers

–– Various browsers and versionsVarious browsers and versions

Scripting guidelinesScripting guidelines

•• Visit the Resource Center to learn more about:Visit the Resource Center to learn more about:

–– Loading layers, getting/setting properties, initializing Loading layers, getting/setting properties, initializing

objects, resizing/repositioning the mapobjects, resizing/repositioning the map

–– Working with graphicsWorking with graphics

–– Working with eventsWorking with events–– Working with eventsWorking with events

–– Working with DojoWorking with Dojo

–– Default API configurationsDefault API configurations

–– Map navigationMap navigation

DemoDemo

•• FirebugFirebug

•• Use Visual Studio Web Developer Express 2008 Use Visual Studio Web Developer Express 2008

and script debugging in Internet Explorerand script debugging in Internet Explorer

•• AptanaAptana

ArcGIS JavaScript Extensions for the ArcGIS JavaScript Extensions for the Google Maps API andGoogle Maps API andMicrosoft Virtual EarthMicrosoft Virtual EarthMicrosoft Virtual EarthMicrosoft Virtual Earth

ArcGIS JavaScript Extension for the Google Maps APIArcGIS JavaScript Extension for the Google Maps API

•• Combine GIS content hosted in ArcGIS Server Combine GIS content hosted in ArcGIS Server

with Google Maps basemap contentwith Google Maps basemap content

ArcGIS JavaScript Extension for the Google Maps APIArcGIS JavaScript Extension for the Google Maps API

•• Works with cached and dynamic ArcGIS Server Works with cached and dynamic ArcGIS Server

servicesservices

–– REST APIREST API

–– KMLKML

•• Applications can be built in traditional Applications can be built in traditional mashupmashup•• Applications can be built in traditional Applications can be built in traditional mashupmashup

form or as Google form or as Google MappletsMapplets

•• Tiled maps use WGS 1984 Web Mercator Tiled maps use WGS 1984 Web Mercator

projectionprojection

–– WKID: 102113 WKID: 102113

–– Same as Virtual EarthSame as Virtual Earth

ArcGIS JavaScript Extension for Microsoft Virtual EarthArcGIS JavaScript Extension for Microsoft Virtual Earth

•• Combine GIS content hosted in ArcGIS Server Combine GIS content hosted in ArcGIS Server

with Virtual Earth basemap content with Virtual Earth basemap content

ArcGIS JavaScript Extension for Microsoft Virtual EarthArcGIS JavaScript Extension for Microsoft Virtual Earth

•• Works with cached ArcGIS Server servicesWorks with cached ArcGIS Server services

–– Cache must be fusedCache must be fused

•• Content (VE shapes, tiles) can be viewed in 2D Content (VE shapes, tiles) can be viewed in 2D

or 3Dor 3D

•• Tiled maps use WGS 1984 Web Mercator Tiled maps use WGS 1984 Web Mercator •• Tiled maps use WGS 1984 Web Mercator Tiled maps use WGS 1984 Web Mercator

projectionprojection

–– WKID: 102113 WKID: 102113

–– Same as Google MapsSame as Google Maps

DemoDemo

•• http://smoorehttp://smoore--oly/js/swig/swiggoogle.htmoly/js/swig/swiggoogle.htm

Virtual Earth Tiles in the Virtual Earth Tiles in the ArcGISArcGIS JS APIJS API

•• Access Microsoft VE Tiled Access Microsoft VE Tiled BasemapsBasemaps in the in the

core core ArcGISArcGIS JavascriptJavascript APIAPI

•• DemoDemo (VPN Required)(VPN Required)

Want to Learn More?Want to Learn More?

•• Free Web Training SeminarFree Web Training Seminar

–– Building Building MashupsMashups Using the Using the ArcGISArcGIS JavaScript APIsJavaScript APIs

•• InstructorInstructor--Led TrainingLed Training

–– Introduction to Introduction to ArcGISArcGIS ServerServer

•• New Course Specific to New Course Specific to JavascriptJavascript API Coming API Coming •• New Course Specific to New Course Specific to JavascriptJavascript API Coming API Coming

Soon!Soon!

JavascriptJavascript LinksLinks

•• Essential Essential JavascriptJavascript -- A A JavascriptJavascript TutorialTutorial

•• http://www.comptechdoc.org/independent/web/cgi/jahttp://www.comptechdoc.org/independent/web/cgi/ja

vamanual/vamanual/

•• http://www.w3schools.com/jsref/default.asphttp://www.w3schools.com/jsref/default.asp

•• http://javascript.crockford.com/http://javascript.crockford.com/

Dojo LinksDojo Links

•• http://dojotoolkit.org/keyhttp://dojotoolkit.org/key--linkslinks

•• Dojo Feature ExplorerDojo Feature Explorer

•• http://www.sitepen.com/labs/dojo.phphttp://www.sitepen.com/labs/dojo.php

•• http://archive.dojotoolkit.org/nightly/checkout/http://archive.dojotoolkit.org/nightly/checkout/ (Great (Great •• http://archive.dojotoolkit.org/nightly/checkout/http://archive.dojotoolkit.org/nightly/checkout/ (Great (Great

source for learning how to use source for learning how to use dijitsdijits and and dojoxdojox

widgets, check out the tests folder)widgets, check out the tests folder)

•• http://www.roseindia.net/dojo/http://www.roseindia.net/dojo/

•• 10 helpings of Dojo goodness10 helpings of Dojo goodness

SummarySummary

•• Start at the Resource CenterStart at the Resource Center

–– ConceptsConcepts

–– View the samplesView the samples

–– CommunityCommunity

•• Pick a Pick a basemapbasemap•• Pick a Pick a basemapbasemap

•• Install Firefox/Firebug and/or Visual Studio Install Firefox/Firebug and/or Visual Studio

(Web Developer Express 2008 (Web Developer Express 2008 –– Free!)Free!)

•• Learn UI (Learn UI (DijitsDijits/Layouts) options available from /Layouts) options available from

DojoDojo

•• Setup a proxy pageSetup a proxy page

Thank YouThank YouScott Moore

ESRI380 New York Street Redlands, California92373-8100 USA

Phone: 909-793-2853Fax: 909-793-5953E-mail: [email protected]

Scott [email protected]

Documents

CreatingFastWebMapping Mon Moore ESRI