Transcript and “/websites/class2013”

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:
http://training.gis.vt.edu/geog5984/ <my 'websites' folder name>
Viewing the REST endpoint
URL
http://arcgislab.cntrlsrvs.w2k.vt.edu/ArcGIS/Rest/services
Viewing Web Maps
URL
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 Manager
URL
http://arcgislab.cntrlsrvs.w2k.vt.edu/arcgis/manager
username
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/inter
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 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 Manager
http://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 API
http://help.arcgis.com/en/webapi/javascript/arcgis/
• http://help.arcgis.com/en/webapi/javascript/arcgis/j
stutorials/#intro_firstmap
• There is a Sandbox for testing your code
http://help.arcgis.com/en/webapi/javascript/arcgis/s
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
<!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 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
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