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] html, body { height: 100%; width: 100%; margin: 0; padding: 0; } #map{ padding:0; } 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); }); }); [/HTML]

nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Creating First Custom Application- Map/Layer Issues

JonathanFarmer1

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]

Vind meer berichten getagd met

Accepted answers

JonathanUihlein

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>

All comments

JonathanUihlein

Awesome. Glad everything worked out.

JonathanFarmer1

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

-Jonathan

JonathanUihlein

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

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.

JasonZou

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>

Doe mee aan het gesprek

Aangemelde leden kunnen berichten plaatsen, updates volgen en meer. Nieuw hier? Registreer een gratis account.

Snelle Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.