Select to view content in your preferred language

Basemap Gallery

4285
15
Jump to solution
03-05-2014 04:02 PM
AlexGole1
Emerging Contributor
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>
0 Kudos
1 Solution

Accepted Solutions
JohnGravois
Deactivated User
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/

View solution in original post

0 Kudos
15 Replies
KenBuja
MVP Esteemed Contributor
That code works properly in this JSBin. What are your issues?
0 Kudos
AlexGole1
Emerging Contributor
[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
0 Kudos
AlexGole1
Emerging Contributor
[ATTACH=CONFIG]31982[/ATTACH] Here is the issue I get when using safari. I experience the same issue with other browsers though.
0 Kudos
TimWitt
Deactivated User
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
0 Kudos
AlexGole1
Emerging Contributor
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.
0 Kudos
JohnGravois
Deactivated User
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.
0 Kudos
AlexGole1
Emerging Contributor
[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:
0 Kudos
JohnGravois
Deactivated User
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/
0 Kudos
AlexGole1
Emerging Contributor
[ATTACH=CONFIG]31996[/ATTACH] As such.
0 Kudos