Adding Widgets to Web Application Templates

RyanMitchell2 · ‎02-24-2012

Is it possible to add widgets (Basemap Gallery widget, specifically) to the pre-configured templates on ArcGIS.com?

Thanks,
Ryan

MikeMinami · ‎02-24-2012

Do you mean add widgets to a template application and publish it to ArcGIS Online? No.
Can you download a template and modify the code and publish it to your own web server? Yes.

Thanks,

Mike

RyanMitchell2 · ‎02-25-2012

Thanks, Mike.

I've downloaded the template and published to our web server. I'm trying to add the default basemap gallery.

Any pros have any thoughts on where I'm going wrong?

Thanks!
Ryan

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>
</title>
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.5/js/dojo/dijit/themes/claro/claro.css">
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.5/js/esri/dijit/css/Popup.css">
<link rel="stylesheet" type="text/css" href="css/layout.css"/>
<link rel="stylesheet" type="text/css" href="css/popup.css"/>

<script type="text/javascript">
    var djConfig = {
      parseOnLoad: true
    };
</script>
<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.5">
</script>
<script type="text/javascript" src="javascript/layout.js">
</script>
<script type="text/javascript">
    dojo.require("dijit.dijit"); // optimize: load dijit layer
    dojo.require("dijit.layout.BorderContainer");
    dojo.require("dijit.layout.ContentPane");
    dojo.require("esri.dijit.BasemapGallery");
dojo.require("esri.arcgis.utils");
dojo.require("esri.map");
dojo.require("dijit.layout.StackContainer");

    var configOptions;

    function init(){

      configOptions = {
        //The ID for the map from ArcGIS.com
        webmap : "37069f544ef24c8f9a21fdeade250e94",
        //Enter a title, if no title is specified, the webmap's title is used.
        title : "The Dash Map",
        //Enter a subtitle, if not specified the ArcGIS.com web map's summary is used
        subtitle : "",
        //Enter a description, if not specified the ArcGIS.com web map's description is used.
        description:"",
        //If the webmap uses Bing Maps data, you will need to provided your Bing Maps Key
        bingmapskey : "",
        //specify a proxy url if needed
        proxyurl:"",
        //specify the url to a geometry service
        geometryserviceurl:"http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer",
       //Modify this to point to your sharing service URL if you are using the portal
        sharingurl :"http://arcgis.com/sharing/content/items"
      };
    initMap();
       createBasemapGallery();
   }

function createBasemapGallery() {
        //add the basemap gallery, in this case we'll display maps from ArcGIS.com including bing maps
        var basemapGallery = new esri.dijit.BasemapGallery({
          showArcGISBasemaps: true,
          bingMapsKey: 'Enter your Bing Maps Key',
          map: map
        }, "basemapGallery");

        basemapGallery.startup();

        dojo.connect(basemapGallery, "onError", function(msg) {console.log(msg)});
      }

    //show map on load
    dojo.addOnLoad(init);
</script>
</head>

<body class="claro">
<div id="mainWindow" dojotype="dijit.layout.BorderContainer" design="headline"
gutters="false" style="width:100%; height:100%;">

    
    <div id="header" dojotype="dijit.layout.ContentPane" region="top">
      <div id="title">
      </div>
      <div id="subtitle">
      </div>
    </div>
    
    <div dojotype="dijit.layout.ContentPane" id="leftPane" region="left">

      <div id="leftPaneContent" dojotype="dijit.layout.BorderContainer" design="headline"
      gutters="false" style="width:100%; height:100%;">
        
        <div class="panelHeader" dojotype="dijit.layout.ContentPane" region="top">

        </div>
        
        <div id="leftPaneBody" dojotype="dijit.layout.StackContainer" region="center">
          <div id="panel1" class="panel_content" dojotype="dijit.layout.ContentPane">
            <div id="description">
            </div>

          </div>
        </div>
      </div>
    </div>
    
    <div dojotype="dijit.layout.ContentPane" id="rightPane" region="right">
      <div id="rightPaneContent" dojotype="dijit.layout.BorderContainer" design="headline"
      gutters="false" design="headline" style="width:100%; height:100%;">
        
        <div class="panelHeader" dojotype="dijit.layout.ContentPane" region="top">

          <span>

          </span>
        </div>
        
        <div id="rightPaneBody" dojotype="dijit.layout.StackContainer" region="center">
          <div class="panel_content" dojotype="dijit.layout.ContentPane">
            <div id="legendDiv">
            </div>
          </div>

        </div>
      </div>
    </div>
    
    <div id="map" dojotype="dijit.layout.ContentPane" region="center">
    <div style="position:absolute; right:20px; top:10px; z-Index:999;">
        <div dojoType="dijit.TitlePane" title="Switch Basemap" closable="false" open="false">
          <div dojoType="dijit.layout.ContentPane" style="width:380px; height:280px; overflow:auto;">
          <div id="basemapGallery" ></div></div>

        </div>
    </div>
    
    <div id="footer" dojotype="dijit.layout.ContentPane" region="bottom">
      A map from:
      <span id="owner">
      </span>
    </div>
</div>

</body>

</html>