SiteMarker

Basemap Gallery Widget not populating!

Discussion created by SiteMarker on Apr 30, 2014
Latest reply on Apr 21, 2016 by liz2004
Hello - I am trying to get the basemap gallery widget to work with our story map. I am using the stock example of San Diego right now to try and add the basemap gallery widget. Currently we can get the widget in the map area, but cannot get the basemaps to populate. Any ideas ?! Thanks !

[HTML]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us">
<head>

<title>Shortlist</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
<meta http-equiv="X-UA-Compatible" content="IE=7, IE=9">
   

<link rel="stylesheet" type="text/css" href="http://js.arcgis.com/3.8/js/esri/css/esri.css" />
<link rel="stylesheet" type="text/css" href="http://js.arcgis.com/3.8/js/dojo/dijit/themes/claro/claro.css">
<link rel="stylesheet" type="text/css" href="colorbox/colorbox.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.9/js/dojo/dijit/themes/claro/claro.css">   
    <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/esri/css/esri.css">
<style>
      html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
      #map{
        padding:0;
      }
    </style>

<script type="text/javascript" src="lib/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="lib/IconSpecs.js"></script>
<script type="text/javascript" src="lib/common/helper_functions.js"></script>
<script type="text/javascript">var djConfig = {parseOnLoad: true};</script>
<script type="text/javascript" src="http://js.arcgis.com/3.8/"></script>
<script type="text/javascript" src="colorbox/jquery.colorbox-min.js"></script>
<script type="text/javascript" src="lib/jquery.animate-colors-min.js"></script>
<script type="text/javascript" src="app/main.js"></script>
<script type="text/javascript" src="http://js.arcgis.com/3.9/"></script>


<!--Social Media Links-->
<script type="text/javascript">var switchTo5x=true;</script>
<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
<script type="text/javascript">stLight.options({publisher:'77225c91-2742-42f7-b1b4-bddda99a9bde'});</script>
<!--END Social Media Links-->

<!--Google Analytics Start-->
<script type="text/javascript">
  if (window.location.href.toLowerCase().indexOf("storymaps.esri.com") >= 0) {
   var _gaq = _gaq || [];
   _gaq.push(['_setAccount', 'UA-26529417-1']);
   _gaq.push(['_trackPageview']);

   (function() {
   var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
     ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
     var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
   })();
  }
</script>
<!--Google Analytics End-->

<script type="text/javascript">

/******************************************************
********************  config section ******************
*******************************************************/

var WEBMAP_ID = "1966ef409a344d089b001df85332608f";
var BOOKMARKS_ALIAS = "Zoom";
var COLOR_ORDER = "green,red,blue,purple"; // will only use as many colors as you have content (point) layers
var DETAILS_PANEL = false;  // specifies whether or not popups have a link to a separate Details panel
// Specify shapefile or CSV point layer(s) on your map that do NOT define a tab in the shortlist.
// If there's more than one layer, use the "|" character as delimiter
var POINT_LAYERS_NOT_TO_BE_SHOWN_AS_TABS = "";
// Specify shapefile or CSV layer(s) in your map that will be clickable in the Shortlist
// If there's more than one layer, use the "|" character as delimiter
var SUPPORTING_LAYERS_THAT_ARE_CLICKABLE = ""; 

/******************************************************
******************  end config section ****************
*******************************************************/

</script>

<script>
      var map;
      require([
        "esri/map", "esri/dijit/BasemapGallery", "esri/arcgis/utils",
        "dojo/parser",

        "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dijit/TitlePane",
        "dojo/domReady!"
      ], function(
        Map, BasemapGallery, arcgisUtils,
        parser
      ) {
        parser.parse();

        //add the basemap gallery, in this case we'll display maps from ArcGIS.com including bing maps
  var basemapGallery = new BasemapGallery({
          showArcGISBasemaps: true,
          map: map
        }, "basemapGallery");
        basemapGallery.startup();
       
        basemapGallery.on("error", function(msg) {
          console.log("basemap gallery error:  ", msg);
        });
      });
    </script>

</head>

<body class="claro">

    <!-- Header Section-->
    <div id="header">
      <div id="headerText">
     <h1 id="title"></h1>
     <h2 id="subtitle"></h2>
      </div>
      <div id="logoArea">
        <div id="social"><a id="msLink" href="http://storymaps.arcgis.com" target="_blank">A story map </a><span  class='st_facebook' ></span><span  class='st_twitter' ></span>
        </div>
        <div id="logo"><a id="logoLink" href="http://www.esri.com" target="_blank"><img id="logoImg" src="images/Logo.png" alt="Esri - Home"></a></div>
      </div>
    </div>
   
  <div id="mainWindow">

        <div id="divStrip">
            <div id="tabs"></div>
            <div id="bookmarksCon">
                <div id="bookmarksToggle"><p id="bookmarksTogText"></p></div>
                <div id="bookmarksDiv">
                </div>
            </div>
        </div>
       
        <div id="paneLeft">
            <ul id="myList" class="tilelist"></ul>
        </div>

        <div id="map">
            <div id="zoomToggle">
                <img id="zoomIn" src="images/ZoomLight_01.png">
                <img id="zoomExtent" src="images/ZoomHome.png">
                <img id="zoomOut" src="images/ZoomLight_03.png">
            </div><!--?zoomToggle-->   
            <div id="hoverInfo"></div>
   <div style="position:absolute; left:20px; bottom:10px; z-Index:999;">
    <div data-dojo-type="dijit/TitlePane"
     data-dojo-props="title:'Switch Basemap', closable:false,  open:false">
     <div data-dojo-type="dijit/layout/ContentPane" style="width:380px; height:280px; overflow:auto;">
     <div id="basemapGallery" ></div></div>
    </div>
   </div>
        </div>
      
  </div>

    <div id="whiteOut">
        <img id="loader" src="images/loader.gif"/>
    </div>
   
</body>

</html>[/HTML]

Outcomes