Creating First Custom Application- Map/Layer Issues

JonathanFarmer1 · ‎10-02-2013

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]

JonathanUihlein · ‎10-02-2013

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>

View solution in original post

JasonZou · ‎10-02-2013

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>

JonathanFarmer1 · ‎10-02-2013

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.

JonathanUihlein · ‎10-02-2013

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>

JonathanFarmer1 · ‎10-03-2013

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

-Jonathan

JonathanUihlein · ‎10-03-2013

Awesome. Glad everything worked out.