topic Re: Creating First Custom Application- Map/Layer Issues in ArcGIS JavaScript Maps SDK Questions

Creating First Custom Application- Map/Layer Issues

JonathanFarmer1 — Wed, 02 Oct 2013 19:39:15 GMT

We recently got a web host and cloud storage so I am working on creating some custom applications using ArcGIS API for Javascript. I have played around with the basemap gallery sample (https://developers.arcgis.com/en/javascript/jssamples/widget_basemap.html) but instead of creating a new map, would like to use an existing webmap or separate layers.

I used this code to try the webmap with no success, I just get a blank screen. Also, if I just want to use feature services, how do I add those in to a new map?

Thanks for your help! I'm sure it's obvious I'm a newbie to this.
[HTML]<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=7, IE=9, IE=10">
    
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
    <title></title>

    <link rel="stylesheet" href="http://js.arcgis.com/3.7/js/dojo/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.7/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.7/"></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();

        arcgisUtils.createMap("ff0591055e3541ab951f3494c3553181", "mapDiv").then(function (response) {
          map = response.map;

        });

        //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>
[/HTML]

Re: Creating First Custom Application- Map/Layer Issues

JasonZou — Sat, 11 Dec 2021 06:57:53 GMT

Move the creation of basemapGallery inside the callback function of createMap; otherwise, map may be undefined when you assign map to basemapGallery.map.

    <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();

        arcgisUtils.createMap("ff0591055e3541ab951f3494c3553181", "mapDiv").then(function (response) {
            map = response.map;   

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

Re: Creating First Custom Application- Map/Layer Issues

JonathanFarmer1 — Wed, 02 Oct 2013 20:06:35 GMT

Unfortunately Jason, I still see only a blank screen.

I should note that the sample HTML on this page works (https://developers.arcgis.com/en/javascript/jssamples/widget_basemap.html). It is only when I try to use my webmap instead of creating a new map that things get screwed up.

I would also like to be able to create a new map as shown in the sample but add my feature services hosted on ArcGIS.com to it.

I'm sure there is a sample for this out there already but I haven't found it.

Re: Creating First Custom Application- Map/Layer Issues

JonathanUihlein — Wed, 02 Oct 2013 21:47:10 GMT

Your map has an id of 'map' but you are assigning the map object to "mapDiv"

Ran your code locally, changed that and it works.

(Also, make sure your map div has a height and width of 100%)

Code below:

<!DOCTYPE html>   <html>     <head>      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">     <meta http-equiv="X-UA-Compatible" content="IE=7, IE=9, IE=10">     <!--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.7/js/dojo/dijit/themes/claro/claro.css">         <link rel="stylesheet" href="http://js.arcgis.com/3.7/js/esri/css/esri.css">     <style>        html, body, #map { height: 100%; width: 100%; margin: 0; padding: 0; }     </style>      <script src="http://js.arcgis.com/3.7/"></script>     <script>        var map;       require([         "esri/map", "esri/dijit/BasemapGallery", "esri/arcgis/utils",         "dojo/parser", "dojo/ready",         "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dijit/TitlePane",         "dojo/domReady!"       ], function(         Map, BasemapGallery, arcgisUtils,         parser, ready       ) {   ready(function () {    parser.parse();    arcgisUtils.createMap("ff0591055e3541ab951f3494c3553181", "map").then(function (response) {      map = response.map;         //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: Creating First Custom Application- Map/Layer Issues

JonathanFarmer1 — Thu, 03 Oct 2013 11:53:42 GMT

Thank you Jon, this was the problem. I knew it was something easy I was missing.

-Jonathan

Re: Creating First Custom Application- Map/Layer Issues

JonathanUihlein — Thu, 03 Oct 2013 13:57:58 GMT

Awesome. Glad everything worked out.