Basemap Gallery Widget not populating!

EricPollard2 · ‎04-30-2014

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>


<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>



<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>


<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">

    
    <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>
            <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]

Noah-Sager · ‎04-30-2014

Hi Eric,

Tough to say, but I don't see the map constructor in the code you posted.

There is: "var map;" and "map: map" only.

I would compare what you have to the basemap gallery sample and look for differences.

Hope this helps!

-Noah

HectorChapa · ‎05-01-2014

If there is no map you can't see the basemap gallery.
Check out my code.

you see where it says map: map if there is no map it wont show.

var basemapGallery = new BasemapGallery({
          showArcGISBasemaps: true,
          map: map
        }, "basemapGallery");
        basemapGallery.startup();

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <!--The viewport meta tag is used to improve the presentation and behavior of the samples 
      on iOS devices-->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Edit rivers and waterbodies</title>
  
    <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" />
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
    <style>
     html, body {
    height: 100%;
    margin: 0px;
     overflow:hidden;
    padding: 0px;
    width: 100%;
  }
     #map {
    height: 100%;
    width: 100%;
    overflow:hidden;
    position: absolute;
    z-index: 0;
  }
   #draggable{
    display: inline-block;
    position:absolute;
    float:left;
    width:10px;
    height:10px;
    left:10px;
    top:360px;
    z-index:50px;
   padding: 0.5em;
  }
  
   #HomeButton {
      position: absolute;
      top: 245px;
      left: 20px;
      z-index: 10;
      }
      #LocateButton {
      position: absolute;
      top: 280px;
      left: 20px;
      z-index: 50;
    }
    h1{
       text-align: center;
    }
  
   #login {
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: 0;
     overflow:hidden;
    background-color:black;
    color:white;
  }
  #container {
position: fixed;
width: 340px;
height: 280px;
top: 50%;
left: 50%;
margin-top: -140px;
margin-left: -170px;
}
  
      .templatePicker {
        border: none;
      }

      
    </style>
   
     <script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
    <script src="http://js.arcgis.com/3.9/"></script>
   
    <script>
   
      var sh = true;
      var map;
      function showUser(str, pass) {
        
          if (str=="") {
          document.getElementById("txtHint").innerHTML="";
          return;
        } 
       if (window.XMLHttpRequest) {
        // code for IE7+, Firefox, Chrome, Opera, Safari
           xmlhttp=new XMLHttpRequest();
        } else { // code for IE6, IE5
       xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
  xmlhttp.onreadystatechange=function() {
  if (xmlhttp.readyState==4 && xmlhttp.status==200) {
  if(xmlhttp.responseText == 'ADMIN')
  {
    document.getElementById('login').style.display = "none";
    document.getElementById('draggable').style.display = "none";
     require([
        "esri/map", 
        "esri/tasks/GeometryService",
        "esri/toolbars/edit",
        
        "esri/dijit/HomeButton",
        "esri/dijit/BasemapGallery",
        "esri/dijit/LocateButton",

       "esri/layers/ArcGISDynamicMapServiceLayer",
        "esri/layers/FeatureLayer",

        "esri/symbols/SimpleMarkerSymbol",
        "esri/symbols/SimpleLineSymbol",

        "esri/dijit/editing/Editor",
        "esri/dijit/editing/TemplatePicker",

        "esri/config",
        "dojo/i18n!esri/nls/jsapi",

        "dojo/_base/array", "dojo/parser", "dojo/keys",

        "dijit/layout/BorderContainer", "dijit/layout/ContentPane", 
        "dojo/domReady!"
      ], function(
        Map, GeometryService, Edit, 
        HomeButton, BasemapGallery, LocateButton,
        ArcGISDynamicMapServiceLayer, FeatureLayer,
        SimpleMarkerSymbol, SimpleLineSymbol, 
        Editor, TemplatePicker,
        esriConfig, jsapiBundle,
        arrayUtils, parser, keys
      ) {
        parser.parse();       

      
        //This service is for development and testing purposes only. We recommend that you create your own geometry service for use within your applications. 
        esriConfig.defaults.geometryService = new GeometryService("http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");
        
        map = new Map("map", {
          basemap: "osm",
          center: [-98.185272, 26.282376],
          logo: false,
          sliderStyle: 'large',
          zoom: 9,
        });
        
        
        
         var home = new HomeButton({
          map: map
        }, "HomeButton");
        home.startup();
        
         geoLocate = new LocateButton({
        map: map
      }, "LocateButton");
      geoLocate.startup();
        
        var basemapGallery = new BasemapGallery({
          showArcGISBasemaps: true,
          map: map
        }, "basemapGallery");
        basemapGallery.startup();
        
        basemapGallery.on("error", function(msg) {
          console.log("basemap gallery error:  ", msg);
        }); 
        
        
        

        map.on("layers-add-result", initEditor);
       
        //add boundaries and place names 
        var dynamic = new ArcGISDynamicMapServiceLayer("http://maps.lrgvdc911.org:6080/arcgis/rest/services/STEAR/STEAR_DYNAMIC/MapServer");
        map.addLayer(dynamic);

        var events = new FeatureLayer("http://maps.lrgvdc911.org:6080/arcgis/rest/services/Public_Outreach/EVENTS/FeatureServer/0",{
          mode: FeatureLayer.MODE_ONDEMAND, 
          outFields: ['*']
        });

        

        map.addLayers([events]);

        function initEditor(evt) {
          var templateLayers = arrayUtils.map(evt.layers, function(result){
            return result.layer;
          });
          var templatePicker = new TemplatePicker({
            featureLayers: templateLayers,
            grouping: true,
            rows: "auto",
            columns: 1
          }, "draggable");
          templatePicker.startup();

          var layers = arrayUtils.map(evt.layers, function(result) {
            return { featureLayer: result.layer };
          });
          var settings = {
            map: map,
            templatePicker: templatePicker,
            layerInfos: layers,
            toolbarVisible: true,
            createOptions: {
              polylineDrawTools:[ Editor.CREATE_TOOL_FREEHAND_POLYLINE ],
              polygonDrawTools: [ Editor.CREATE_TOOL_FREEHAND_POLYGON,
                Editor.CREATE_TOOL_CIRCLE,
                Editor.CREATE_TOOL_TRIANGLE,
                Editor.CREATE_TOOL_RECTANGLE
              ]
            },
            toolbarOptions: {
              reshapeVisible: true
            }
          };

          var params = {settings: settings};    
          var myEditor = new Editor(params,'editorDiv');
          //define snapping options
          var symbol = new SimpleMarkerSymbol(
            SimpleMarkerSymbol.STYLE_CROSS, 
            15, 
            new SimpleLineSymbol(
              SimpleLineSymbol.STYLE_SOLID, 
              new Color([255, 0, 0, 0.5]), 
              5
            ), 
            null
          );
          map.enableSnapping({
            snapPointSymbol: symbol,
            tolerance: 20,
            snapKey: keys.ALT
          });
    
          myEditor.startup();
        }
      });
 }
 else
 {
   alert(xmlhttp.responseText);
 
 }
    }
  }
     
  xmlhttp.open("GET",'testinfo.php?u='+str+'&p='+pass,true);
  xmlhttp.send();
  
  
}
      
    
     
    function hide()
    {
      if(sh)
      {
        sh = false;  
        document.getElementById('draggable').style.display = "none";
        
      }
      else
      {
        sh = true;
        
        document.getElementById('draggable').style.display = "block";
       
        
      }
    }
     
     
    </script>
    
  </head>
  <body class="claro">
  <div data-theme="a" data-role="header" data-position="fixed">
    <h3>LRG Kidz</h3>
    <a href="#featureDialog" data-role="button" class="ui-btn-right" onclick="hide();">Hide</a>
  </div>
    <div id="map">
       <div id="HomeButton"></div>
      <div id="LocateButton"></div>
       <div style="position:absolute; right:20px; top: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 id="draggable"></div>
    <div id="login">
      <h1>Welcome</h1>
      <div id="container">       
<form>
<label for="username">Username:</label>
<input type="text" id="username" name="username">
<label for="password">Password:</label>
<input type="password" id="password" name="password">
<div id="lower">
<input type="button" value="Login" onclick="showUser(username.value, password.value);"/>
</div><!--/ lower-->
</form>
</div>
    </div>
  </body>
</html>

EricPollard2 · ‎05-01-2014

Hi Eric,

Tough to say, but I don't see the map constructor in the code you posted.

There is: "var map;" and "map: map" only.

I would compare what you have to the basemap gallery sample and look for differences.

Hope this helps!

-Noah

I took out the part that constructs a new map, because if I leave that in it will add a new basemap over the top of the web map I am referencing in the config section of the application. So what I removed was :

[HTML]        map = new Map("map", {
          basemap: "osm",
          center: [-98.185272, 26.282376],
          logo: false,
          sliderStyle: 'large',
          zoom: 9,
        });
        [/HTML]

When I removed this, it removed the duplicated basemap that was put over the top of my web map, but are you saying that this is what is causing me to not see the basemap gallery now? How do I have this not create a brand new blank topo basemap over the top of the referenced AGO web map?
Thanks!!
Eric

JonathanUihlein · ‎05-01-2014

Hi Eric,

I highly recommend reading the starter tutorials for the ESRI JSAPI.
Even though you are using a storymaps template, you really do need to know javascript basics before coding with our library.

Concerning your issue: it looks like the majority of your application logic exists in main.js, which you did not post.

I assume the map object is defined in main.js, which would most likely be out of scope if you were trying to access it from your main html. You also override any preexisting context by using "var map" at the beginning of your require block.

The starter tutorials address things like this. If you don't know much about scope and context, I also suggest reading up on those concepts.

Hope this helps!

EricPollard2 · ‎05-02-2014

Hi Eric,

I highly recommend reading the starter tutorials for the ESRI JSAPI.
Even though you are using a storymaps template, you really do need to know javascript basics before coding with our library.

Concerning your issue: it looks like the majority of your application logic exists in main.js, which you did not post.

I assume the map object is defined in main.js, which would most likely be out of scope if you were trying to access it from your main html. You also override any preexisting context by using "var map" at the beginning of your require block.

The starter tutorials address things like this. If you don't know much about scope and context, I also suggest reading up on those concepts.

Hope this helps!

Thank you for the help. I am working through the tutorials and trying to figure this out. It looks like I will need to move most of the functionality of the basemap gallery to the javascript file and then just insert it with a <div> in the HTML. Still trying to make sure the map that gets called up in the basemap gallery code is the existing web map from AGO and not a new "blank" basemap.
Appreciate the time and response!
Eric

JerryHughes · ‎05-07-2014

I am having the same issue. Even when I copy the entire sample code from
https://developers.arcgis.com/javascript/jssamples/widget_basemap.html
and paste it into a new html file, the BasemapGallery does not populate. What am I doing wrong????

Noah-Sager · ‎05-07-2014

Are you hosting the application using something like IIS?

Setting up a Development Environment
https://developers.arcgis.com/javascript/jshelp/intro_devenv.html

ELIZABETHF_T_ · ‎04-21-2016

Hi Erik,

Where you able to accomplish this? I'm having the same problem. Where did you create the parser to reference to only one map (div).