Tutorial: Using ArcGIS Server and ESRI ArcGIS API for Javascript

Peter Sforza

March 7, 2013

Map Network Drive

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

Username: ARCGISLAB\geog5984Password: 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:

http://training.gis.vt.edu/geog5984/ <my 'websites' folder name>

Viewing the REST endpointURLhttp://arcgislab.cntrlsrvs.w2k.vt.edu/ArcGIS/Rest/services

Viewing Web MapsURL

http://arcgislab.cntrslsrvs.w2k.vt.edu/geog5984/<my 'websites' folder name> 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 ManagerURL http://arcgislab.cntrlsrvs.w2k.vt.edu/arcgis/managerusername arcgislab\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: http://www.computing.vt.edu/internet_and_web/internet_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 v3 WGS84 Web Mercator WKID 102113

ArcGIS Online Web Mercator Auxiliary Sphere WKID 102100

OpenStreetMap

Definition Query

• Improves performance by avoiding rendering

Symbology

• Color Brewer http://colorbrewer2.org/

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

http://resources.arcgis.com/en/help/main/10.1/index.html#//00660000043v000000

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 Managerhttp://training.gis.vt.edu/arcgis/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 http://arcgislab.cntrlsrvs.w2k.vt.edu/arcgis/rest/services/2013/FCC/MapServer/

The REST endpoint for the training server is http://arcgislab.cntrlsrvs.w2k.vt.edu/ArcGIS/Rest/services

The Map Service is ready

A MapServer

http://arcgislab.cntrlsrvs.w2k.vt.edu/arcgis/services/2013/FCC/MapServer

WMS Server

http://arcgislab.cntrlsrvs.w2k.vt.edu/arcgis/services/2013/FCC/WMSServer

/websites Directory

• This class should use the /class2013 folder

ESRI Javascript APIhttp://help.arcgis.com/en/webapi/javascript/arcgis/

• http://help.arcgis.com/en/webapi/javascript/arcgis/jstutorials/#intro_firstmap

• There is a Sandbox for testing your code http://help.arcgis.com/en/webapi/javascript/arcgis/sandbox/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

<!DOCTYPE html><html>

<head></head>

<body></body>

</html>

Reference the ArcGIS API for JavaScript inside the HEAD element

<link href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/dojo/dijit/themes/claro/claro.css" rel="stylesheet" type="text/css" >

<link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/esri/css/esri.css" />

<script src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/" type="text/javascript"></script>

Esri.css styles for the widgetsClaro.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 http://help.arcgis.com/en/webapi/javascript/arcgis/jsapi/#map

• 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

<style>  html,body,#mapDiv,.map.container{    padding:0;    margin:0;    height:100%;  }  </style>

Add your map service

• This belongs in function (init)

var dynamicMapServiceLayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://training.gis.vt.edu/arcgis/rest/services/2013/FCC/MapServer");

map.addLayer(dynamicMapServiceLayer);

Final steps

• Save the HTML in your /websites folder• View the page http

://training.gis.vt.edu/geog5984/ <my 'websites' folder name>

http://training.gis.vt.edu/geog5984/class2013/fcc.html

http://training.gis.vt.edu/geog5984/class2013/sforza/fcc.html