afrocodes

Code Downloaded for ArcGIS Online App Template Not Working

Discussion created by afrocodes on May 29, 2014
Latest reply on May 29, 2014 by afrocodes
Ok, I followed all the steps here to download app template: http://doc.arcgis.com/en/arcgis-online/create-maps/download-app-templates.htm

I saved the contents into a folder in wwwroot. My arcgis online map is public. I changed the web map id code to my map (though I removed it from below). When I open up the html file in a browser, nothing shows up. Is something wrong with the code?

I also, copied and pasted my web map id into other web maps that worked in my wwwroot folder and the map showed up. But with this code I downloaded from ESRI, it is not working. Code below.

Sorry for all the questions, I'm still trying to learn! Thanks for your help!


<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Sea Level Rise Test</title>
    <link rel="stylesheet" type="text/css" href="//js.arcgis.com/3.9/js/dojo/dijit/themes/claro/claro.css">
    <link rel="stylesheet" type="text/css" href="//js.arcgis.com/3.9/js/dojo/dijit/themes/claro/document.css">

    <link rel="stylesheet" type="text/css" href="//js.arcgis.com/3.9/js/dojo/dojox/layout/resources/FloatingPane.css">

    <link rel="stylesheet" type="text/css" href="//js.arcgis.com/3.9/js/esri/css/esri.css" />

    <link rel="stylesheet" type="text/css" href="css/layout.css">
    <!--[if IE]>
      <link rel="stylesheet" type="text/css" href="css/ie.css" />
    <![endif]-->
    <script type="text/javascript">
    var path_location = location.pathname.replace(/\/[^/]+$/, '');
    var dojoConfig = {
      parseOnLoad: true,
      packages: [{
        name: "esriTemplate",
        location: path_location
      }, {
        name: "utilities",
        location: path_location + '/javascript'
      }, {
        name: "apl",
        location: path_location + '/apl'
      },{
        name: "templateConfig",
        location: path_location
      }]
    };
    </script>
    <script type="text/javascript" src="//js.arcgis.com/3.9/">

    </script>
    <script type="text/javascript">
      dojo.require("esri.layout");
    </script>
 
    <script type="text/javascript" src="javascript/layout.js">
    </script>
    <script type="text/javascript">
      dojo.require("utilities.App");
      dojo.require("dojo.on");
      dojo.require("templateConfig.commonConfig");
 


      var i18n;
      dojo.ready(function(){


        i18n = dojo.i18n.getLocalization("esriTemplate","template");
        var  defaults = {
        //The ID for the map from ArcGIS.com
        webmap: "ENTER web ID Here",
        //Modify this to point to your sharing service URL if you are using the portal
        sharingurl: null,//for example: "http://www.arcgis.com",
        //The id for the web mapping application item that contains configuration info - in most
        ////When editing you need to specify a proxyurl (see below) if the service is on a different domain
        //Specify a proxy url if you will be editing, using the elevation profile or have secure services or web maps that are not shared with everyone.
        proxyurl: "",
        //cases this will be null.
        appid: "",
        //set to true to display the title
        displaytitle: true,
        //Enter a title, if no title is specified, the webmap's title is used.
        title: "",
        //Enter a description for the application. This description will appear in the left pane
        //if no description is entered the webmap description will be used.
        description: "",
        //specify an owner for the app - used by the print option. The default value will be the web map's owner
        owner: '',
        //Specify a color theme for the app. Valid options are gray,blue,purple,green and orange
        theme: 'gray',
        //Optional tools - set to false to hide the tool
        //set to false to hide the zoom slider on the map
        displayslider: true,
        displaymeasure: true,
        displaybasemaps: true,
        displayoverviewmap: true,
        displayeditor: true,
        displaylegend: true,
        displaysearch: true,
        displaylayerlist: true,
        displaybookmarks: true,
        displaydetails: true,
        displaytimeslider: true,
        displayprint: true,
        displayprintlegend: false,
        displayeditortoolbar: false,
        displaymapwidgets:true,
        //i18n.viewer.main.scaleBarUnits,
        //The elevation tool uses the  measurement tool to draw the lines. So if this is set
        //to true then displaymeasure needs to be true too. NOTE: THis tool is deprecated and should no 
        //longer be used in the Basic Viewer. Use the new version of the template instead
        //https://github.com/Esri/elevation-profile-template
        displayelevation: false,
        //This option is used when the elevation chart is displayed to control what is displayed when users mouse over or touch the chart. When true, elevation gain/loss will be shown from the first location to the location under the cursor/finger.
        showelevationdifference: false,
        displayscalebar: true,
        displayshare: true,
        //Set to true to display the left panel on startup. The left panel can contain the legend, details and editor. Set to true to
        //hide left panel on initial startup. 2
        leftPanelVisibility: true,
        //If the webmap uses Bing Maps data, you will need to provide your Bing Maps Key
        bingmapskey: commonConfig.bingMapsKey,
        //Get the default map units
        units: commonConfig.units, 
        //specify a group in ArcGIS.com that contains the basemaps to display in the basemap gallery
        //example: title:'ArcGIS Online Basemaps' , owner:esri
        basemapgroup: {
          title: null,
          owner: null
        },
        //Enter the URL's to the geometry service, print task and geocode service. 
        helperServices: commonConfig.helperServices,
        //Set the label in the nls file for your browsers language
        printlayouts: [{
          layout: 'Letter ANSI A Landscape',
          label: i18n.tools.print.layouts.label1,
          format: 'PDF'
        }, {
          layout: 'Letter ANSI A Portrait',
          label: i18n.tools.print.layouts.label2,
          format: 'PDF'
        }, {
          layout: 'Letter ANSI A Landscape',
          label: i18n.tools.print.layouts.label3,
          format: 'PNG32'
        }, {
          layout: 'Letter ANSI A Portrait',
          label: i18n.tools.print.layouts.label4,
          format: 'PNG32'
        }],
        printlayout: false,
        printformat: "PNG32",
        //Specify the geocoder options. By default uses the geocoder widget with the default locators. If you specify a url value then that locator will be used.
        placefinder: {
          "url": "",
          "countryCode":"",
          "currentExtent":false,
          "placeholder": "",
          "singleLineFieldName":""
        },
        //when true locations searches use the current map extent. 
        searchextent: false,
        //Set link text and url parameters if you want to display clickable links in the upper right-corner
        //of the application.
        //ArcGIS.com. Enter link values for the link1 and link2 and text to add links. For example
        //url:'http://www.esri.com',text:'Esri'
        link1: {
          url: '',
          text: ''
        },
        link2: {
          url: '',
          text: ''
        },
        //specify the width of the panel that holds the editor, legend, details
        leftpanewidth: 228,
        //Restrict the map's extent to the initial extent of the web map. When true users
        //will not be able to pan/zoom outside the initial extent.
        constrainmapextent: false,
        //Provide an image and url for a logo that will be displayed as a clickable image
        //in the lower right corner of the map. If nothing is specified then the esri logo will appear.
        customlogo: {
          image: '',
          link: ''
        },
        //embed = true means the margins will be collapsed to just include the map no title or links
        embed: false
      };
        var supportsLocalization = true;
        var app = new utilities.App(defaults, supportsLocalization);
        dojo.on(app, "ready", function(config){

          initMap(config);
        });

      });

    </script>
  </head>

Outcomes