Tutorial: Using ArcGIS Server and ESRI ArcGIS API for Javascript

  • Published on

  • View

  • Download

Embed Size (px)


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. - PowerPoint PPT Presentation


<p>PowerPoint Presentation</p> <p>Tutorial: Using ArcGIS Server and ESRI ArcGIS API for JavascriptPeter Sforza</p> <p>March 7, 2013</p> <p>Map Network Drive</p> <p>\\training.gis.vt.edu\geog5984Or \\arcgislab.cntrlsrvs.w2k.vt.edu\geog5984 </p> <p>Username: ARCGISLAB\geog5984Password: w3bM4PS</p> <p>Create Folders in /data/class2013 and /websites/class2013</p> <p>individual projects /data/class2013/yourLastName /websites/class2013/yourLastName</p> <p>group projects /data/class2013/yourProjectName/websites/class2013/yourProjectName</p> <p>The directory structure on the shared drive is the basis for the organization of your resources. </p> <p>/data directory is for shapefiles and MXDs, </p> <p>/websites directory is for web content. </p> <p>Anything you put in /websites will be immediately and publicly viewable on the Internet as: http://training.gis.vt.edu/geog5984/ Viewing the REST endpointURLhttp://arcgislab.cntrlsrvs.w2k.vt.edu/ArcGIS/Rest/servicesViewing Web MapsURLhttp://arcgislab.cntrslsrvs.w2k.vt.edu/geog5984/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 ManagerURLhttp://arcgislab.cntrlsrvs.w2k.vt.edu/arcgis/managerusernamearcgislab\geog5984*Use this to set up services, including name, type, and tile cache scheme.Password = w3bM4PSAccess 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</p> <p>Cache schemes are defined in ArcManager. However, actually initiating the build of a cache (the creation of tile images) must be done through ArcCatalog. </p> <p>ArcGIS ServerCreate MXDPublish serviceConsume in a web page using a mapping apiPublish a geoprocessing tool</p> <p>Store relative pathnames to data sourcesMake 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 ArcMapset a data frame background colorFrame -&gt; Data Frame PropertiesThe default background is NULLThe map service treats the background color as transparent</p> <p>Coordinate SystemMatch the tiling scheme or web mapping API coordinate system</p> <p>Common Web Map API coordinate systemsGoogle Maps API v3WGS84 Web MercatorWKID 102113ArcGIS OnlineWeb Mercator Auxiliary Sphere WKID 102100OpenStreetMapDefinition QueryImproves performance by avoiding rendering</p> <p>SymbologyColor Brewer http://colorbrewer2.org/ </p> <p>Reference ScaleData framefixes the size for symbols and text to draw at the desired height and width at the referenced map scaleNot typically used in web maps, but sometimes it is needed</p> <p>http://resources.arcgis.com/en/help/main/10.1/index.html#//00660000043v000000 Scale Dependent RenderingSpecifies the range of scales to display a layer</p> <p>Transfer your MXDClose ArcGIS before moving or copying filesMove to your folder on the training server</p> <p>ArcGIS Server Managerhttp://training.gis.vt.edu/arcgis/manager Username:arcgislab\geog5984</p> <p>Password:w3bM4PS</p> <p>Publish a GIS Resource</p> <p>Select your MXD</p> <p>Publish the service into the /2013 folder</p> <p>Select service types</p> <p>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/ </p> <p>The REST endpoint for the training server is http://arcgislab.cntrlsrvs.w2k.vt.edu/ArcGIS/Rest/services</p> <p>The Map Service is ready</p> <p>A MapServerhttp://arcgislab.cntrlsrvs.w2k.vt.edu/arcgis/services/2013/FCC/MapServer </p> <p>WMS Server</p> <p>http://arcgislab.cntrlsrvs.w2k.vt.edu/arcgis/services/2013/FCC/WMSServer /websites DirectoryThis class should use the /class2013 folder</p> <p>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 / JSHTML HEAD and BODYReference the ArcGIS API for javascriptDefine initialization functionCreate the MapDefine the Page ContentStyle the Page</p> <p>Reference the ArcGIS API for JavaScript inside the HEAD element</p> <p>Esri.css styles for the widgetsClaro.css formatting for the widgets (other style sheet options include claro, tundra, soria and nihilo)Initialization Functionnew script tag this is where you add code for working with maps and tasksdojo.require to load the esri.map moduleFunction init() { }dojo.addOnLoad (init);Create the mapEsri.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 codebasemap options you can specify such as "satellite", "hybrid", "topo", "gray", "ocean", "osm", and "national_geographic"</p> <p>Define Page ContentDefine the BODY section which contains everything that will be displayed on your pageThe DIV named mapDiv refers to the variable that was set in the esri.map constructorPage StyleWriting a bit of CSS to get the map to fill the browser window</p> <p> html,body,#mapDiv,.map.container{ padding:0; margin:0; height:100%; } </p> <p>Add your map serviceThis belongs in function (init)var dynamicMapServiceLayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://training.gis.vt.edu/arcgis/rest/services/2013/FCC/MapServer"); </p> <p>map.addLayer(dynamicMapServiceLayer);Final stepsSave the HTML in your /websites folderView the page http://training.gis.vt.edu/geog5984/ </p> <p>http://training.gis.vt.edu/geog5984/class2013/fcc.html </p> <p>http://training.gis.vt.edu/geog5984/class2013/sforza/fcc.html </p>


View more >