topic Re: Basemap Gallery in ArcGIS JavaScript Maps SDK Questions

Basemap Gallery

AlexGole1 — Thu, 06 Mar 2014 00:02:38 GMT

Hi,
Basemap gallery not properly on any of my machines. Can someone help? Advise me?

  <!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></title>      <link rel="stylesheet" href="http://js.arcgis.com/3.8/js/dojo/dijit/themes/claro/claro.css">         <link rel="stylesheet" href="http://js.arcgis.com/3.8/js/esri/css/esri.css">     <style>        html, body { height: 100%; width: 100%; margin: 0; padding: 0; }       #map{         padding:0;       }     </style>           <script src="http://js.arcgis.com/3.8/"></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();          map = new Map("map", {           basemap: "topo",           center: [-105.255, 40.022],           zoom: 13         });          //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 data-dojo-type="dijit/layout/BorderContainer"           data-dojo-props="design:'headline', gutters:false"           style="width:100%;height:100%;margin:0;">        <div id="map"             data-dojo-type="dijit/layout/ContentPane"             data-dojo-props="region:'center'"             style="padding:0;">          <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>   </body>     </html>

Re: Basemap Gallery

KenBuja — Thu, 06 Mar 2014 11:43:06 GMT

That code works properly in this JSBin. What are your issues?

Re: Basemap Gallery

AlexGole1 — Thu, 06 Mar 2014 15:15:02 GMT

[ATTACH=CONFIG]31979[/ATTACH]

That code works properly in this JSBin. What are your issues?

I only get an empty basemap gallery... I tried it at work, at home and i get the same results.

Thanks for your time,
Alex

Re: Basemap Gallery

AlexGole1 — Thu, 06 Mar 2014 16:32:28 GMT

[ATTACH=CONFIG]31982[/ATTACH] Here is the issue I get when using safari. I experience the same issue with other browsers though.

Re: Basemap Gallery

TimWitt — Thu, 06 Mar 2014 16:40:03 GMT

Alex,

the basemaps won't show up if you just open your textfile (code) as an .html, via a webbrowser. The only way you can test it is, if you put the html file in your

\inetpub\wwwroot folder, open your browser and then use <computername>/yourmap.html

Hope this helps!

Tim

Re: Basemap Gallery

AlexGole1 — Thu, 06 Mar 2014 16:41:22 GMT

Alex,

the basemaps won't show up if you just open your textfile as an html. The only way you can test it is, if you put the html file in your

\inetpub\wwwroot folder, open your browser and then use <computername>/yourmap.html

Hope this helps!

Tim

This does I will try it right now.

Re: Basemap Gallery

JohnGravois — Thu, 06 Mar 2014 16:41:40 GMT

hi alex,

the problem is caused by the fact that you are loading your application in the browser using file protocol rather than http (as required).

the console is telling you that it doesn't want to load thumbnails retrieved from arcgis.com this way.

Re: Basemap Gallery

AlexGole1 — Sat, 11 Dec 2021 15:07:56 GMT

[ATTACH=CONFIG]31995[/ATTACH]

hi alex,

the problem is caused by the fact that you are loading your application in the browser using file protocol rather than http (as required).

the console is telling you that it doesn't want to load thumbnails retrieved from arcgis.com this way.

First of all I would like to thank you because the sample script does work properly now that I am on the file protocol (which I should have been on for a long time) rather than any folder on my computer. However I tried to add the widget to the script I am working on and seems like it stills does not work. If you read my script you will notice that the scalebar does not work as well which I am unclear why it would not.

 require([
        "esri/map", "esri/config", "esri/dijit/Scalebar",
        "esri/layers/ArcGISDynamicMapServiceLayer", "esri/dijit/BasemapGallery", "esri/arcgis/utils",
        "esri/tasks/Geoprocessor", "esri/tasks/FeatureSet", "esri/toolbars/draw",
        "esri/symbols/SimpleFillSymbol", "esri/symbols/SimpleLineSymbol",
        "esri/graphic",
        "dojo/_base/Color",
        "dojo/dom", "dojo/dom-style", "dojo/query", "dojo/parser", 
        "dijit/registry",
        "dijit/layout/BorderContainer", "dijit/layout/ContentPane", 
        "dijit/TitlePane", "dijit/form/CheckBox", "dijit/form/ComboBox",
        "dojo/domReady!"
      ], function(
        Map, esriConfig, BasemapGallery, arcgisUtils, Scalebar,
        ArcGISDynamicMapServiceLayer,
        Geoprocessor, FeatureSet, Draw,
        SimpleFillSymbol, SimpleLineSymbol,
        Graphic,
        Color,
        dom, domStyle, query, parser,
        registry
      ) {
        // Create all dijits.
        parser.parse();

        // Prevent flash of unstyled content(FOUC).
        domStyle.set(query("body")[0], "visibility", "visible");
        // Specify where the location of the proxy to use to communicate with the extract GP service.
        esriConfig.defaults.io.proxyUrl = "/proxy";
        // Keep a reference to the loading icon DOM node.
        var loading = dom.byId("loading");

        map = new Map("map", {
          logo:false,
          basemap: "streets",
          center: [-121.469, 38.556],
          zoom: 8
        });
        
        var basemapGallery = new BasemapGallery({
          showArcGISBasemaps: true,
          map: map
        }, "basemapGallery");
        basemapGallery.startup();
        
        basemapGallery.on("error", function(msg) {
          console.log("basemap gallery error:  ", msg);
        });
        
         var scalebar = new Scalebar({
          map: map,
          // "dual" displays both miles and kilmometers
          // "english" is the default, which displays miles
          // use "metric" for kilometers
          scalebarUnit: "dual"
        });

Then end result is as such:

Re: Basemap Gallery

JohnGravois — Thu, 06 Mar 2014 20:39:10 GMT

alex,

the problem is occurring because your AMD modules and argument aliases aren't in the same order. see this blog i wrote on AMD for more info.

abc's of AMD
http://blogs.esri.com/esri/arcgis/2013/10/14/the-abcs-of-amd/

Re: Basemap Gallery

AlexGole1 — Thu, 06 Mar 2014 20:39:18 GMT

[ATTACH=CONFIG]31996[/ATTACH] As such.

Re: Basemap Gallery

AlexGole1 — Thu, 06 Mar 2014 21:03:51 GMT

This is a great blog! I wish I had the chance to look at it before. Every thing works like a charm except my extract data widget which I need To spend more time on to understand how it works. Thank you!!

Re: Basemap Gallery

JohnGravois — Thu, 06 Mar 2014 21:10:23 GMT

my pleasure Alex. please consider marking this thread as 'answered'. 🙂

Re: Basemap Gallery

AlexGole1 — Thu, 06 Mar 2014 21:18:39 GMT

my pleasure Alex. please consider marking this thread as 'answered'. 🙂

Sorry I dont use this forum often. Where is the 'answered' button supposed to be?

Re: Basemap Gallery

JohnGravois — Thu, 06 Mar 2014 22:14:37 GMT

http://resources.arcgis.com/en/help/forums-mvp/

Re: Basemap Gallery

AlexGole1 — Thu, 06 Mar 2014 22:16:35 GMT

Thank you for your help!

Re: Basemap Gallery

JohnGravois — Thu, 06 Mar 2014 22:18:30 GMT

no worries. take care.