Tutorial: Using ArcGIS Server and ESRI ArcGIS API for Javascript

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

3. Map Network Drive

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

5. Username: ARCGISLAB\geog5984 Password: w3bM4PS

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

8. 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>

9. 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.

10. 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

11. 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.

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

13. 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

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

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

16. Common Web Map API coordinate systems

17. Definition Query • Improves performance by avoiding rendering

18. Symbology • Color Brewer http://colorbrewer2.org/

19. 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

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

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

23. ArcGIS Server Managerhttp://training.gis.vt.edu/arcgis/manager Username: arcgislab\geog5984 Password: w3bM4PS

24. Publish a GIS Resource

25. Select your MXD

26. Publish the service into the /2013 folder

27. Select service types

28. 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

29. The Map Service is ready

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

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

32. /websites Directory • This class should use the /class2013 folder

33. 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

34. 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

35. <!DOCTYPE html> <html> <head> </head> <body> </body> </html>

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

37. 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);

38. Create the map • Esri.map refers to the full map class for the ESRI ArcGIS API for javascripthttp://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"

39. 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

40. 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>

41. Add your map service • This belongs in function (init) vardynamicMapServiceLayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://training.gis.vt.edu/arcgis/rest/services/2013/FCC/MapServer"); map.addLayer(dynamicMapServiceLayer);

42. Final steps • Save the HTML in your /websites folder • View the page http://training.gis.vt.edu/geog5984/ <my 'websites' folder name>

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

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