Tutorial: Using ArcGIS Server and ESRI ArcGIS API for Javascript Peter Sforza March 7, 2013

Map Network Drive

\\training.gis.vt.edu\geog5984 Or \\arcgislab.cntrlsrvs.w2k.vt.edu\geog5984

Username: ARCGISLAB\geog5984 Password: w3bM4PS

Create Folders in “/data/class2013” and “/websites/class2013” individual projects “/data/class2013/yourLastName” “/websites/class2013/yourLastName” group projects “/data/class2013/yourProjectName” “/websites/class2013/yourProjectName”

The directory structure on the shared drive is the basis for the organization of your resources. /data directory is for shapefiles and MXDs, /websites directory is for web content. Anything you put in /websites will be immediately and publicly viewable on the Internet as:

Viewing the REST endpoint URL Viewing Web Maps URL The directory structure on the shared drive is the basis for the organization of your resources. The /data directory is for shapefiles and MXDs, and the /websites directory is for web content. Anything you put in /websites will be immediately and publicly viewable on the Internet. You should create a subfolder in /data and a subfolder in /websites for your individual and group projects. You and the public can access your completed web maps using the URL above.

ESRI ArcGIS Server Manager URLhttp://arcgislab.cntrlsrvs.w2k.vt.edu/arcgis/managerhttp://arcgislab.cntrlsrvs.w2k.vt.edu/arcgis/manager usernamearcgislab\geog5984 *Use this to set up services, including name, type, and tile cache scheme. Password = w3bM4PS

Access to the Network Drive is limited. You should be able to map a drive from any of the machines in MW 102 / Cheatham 220. If you need to connect from off campus, you will need to use the Virtual Private Network (VPN). More info about establishing VPN access can be found here: net_access/vpn.html net_access/vpn.html Cache schemes are defined in ArcManager. However, actually initiating the build of a cache (the creation of tile images) must be done through ArcCatalog.

ArcGIS Server Create MXD Publish service Consume in a web page using a mapping api Publish a geoprocessing tool

Store relative pathnames to data sources Make sure your.mxd is projected in the coordinate system you plan to use for your tiling scheme and/or web API. For example, Google Maps uses WGS_1984_Web Mercator. Avoid embedding services within services, including ArcGIS Online or other base maps available in ArcMap

set a data frame background color – Frame -> Data Frame Properties – The default background is NULL – The map service treats the background color as transparent

Coordinate System Match the tiling scheme or web mapping API coordinate system

Common Web Map API coordinate systems Google Maps API v3WGS84 Web MercatorWKID ArcGIS OnlineWeb Mercator Auxiliary SphereWKID OpenStreetMap

Definition Query Improves performance by avoiding rendering

Symbology Color Brewer

Reference Scale Data frame fixes the size for symbols and text to draw at the desired height and width at the referenced map scale Not typically used in web maps, but sometimes it is needed

Scale Dependent Rendering Specifies the range of scales to display a layer

Transfer your MXD Close ArcGIS before moving or copying files Move to your folder on the training server

ArcGIS Server Manager Username: arcgislab\geog5984 Password: w3bM4PS

Publish a GIS Resource

Select your MXD

Publish the service into the /2013 folder

Select service types

Note the URLs provided for the web services below are not the same URL as the REST endpoint for the MapServer. For this example, the REST endpoint that will be used in your HTML page to call the map service is The REST endpoint for the training server is

The Map Service is ready

A MapServer

WMS Server

/websites Directory This class should use the /class2013 folder

ESRI Javascript API stutorials/#intro_firstmap stutorials/#intro_firstmap There is a Sandbox for testing your code andbox/sandbox.html?sample=map_create andbox/sandbox.html?sample=map_create

Building the HTML / JS HTML HEAD and BODY Reference the ArcGIS API for javascript Define initialization function Create the Map Define the Page Content Style the Page

Reference the ArcGIS API for JavaScript inside the HEAD element Esri.css styles for the widgets Claro.css formatting for the widgets (other style sheet options include claro, tundra, soria and nihilo)

Initialization Function new script tag – this is where you add code for working with maps and tasks dojo.require to load the esri.map module Function init() { } dojo.addOnLoad (init);

Create the map Esri.map refers to the full map class for the ESRI ArcGIS API for javascript mapDIV is the DIV element that contains the map in the body section of the code basemap options you can specify such as "satellite", "hybrid", "topo", "gray", "ocean", "osm", and "national_geographic"

Define Page Content Define the BODY section which contains everything that will be displayed on your page The DIV named “mapDiv” refers to the variable that was set in the esri.map constructor

Page Style Writing a bit of CSS to get the map to fill the browser window html,body,#mapDiv,.map.container{ padding:0; margin:0; height:100%; }

Add your map service This belongs in function (init) var dynamicMapServiceLayer = new esri.layers.ArcGISDynamicMapServiceLayer(" edu/arcgis/rest/services/2013/FCC/MapServer"); map.addLayer(dynamicMapServiceLayer);

Final steps Save the HTML in your /websites folder View the page