Adding Widgets to Web Application Templates

RyanMitchell2 — Fri, 24 Feb 2012 19:16:38 GMT

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

Thanks,
Ryan

Re: Adding Widgets to Web Application Templates

MikeMinami — Fri, 24 Feb 2012 21:45:45 GMT

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

Re: Adding Widgets to Web Application Templates

RyanMitchell2 — Sat, 25 Feb 2012 14:00:47 GMT

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>

topic Re: Adding Widgets to Web Application Templates in ArcGIS JavaScript Maps SDK Questions

Adding Widgets to Web Application Templates

Re: Adding Widgets to Web Application Templates

Re: Adding Widgets to Web Application Templates