AnsweredAssumed Answered

Help with Creating a map on top of Esri's Basemap Gallery

Question asked by rglafleur on Mar 30, 2016
Latest reply on Apr 4, 2016 by MidnightYell2003

I need help getting the following map/code to show up, but have the map gallery as the basemap.

My code

arcgisUtils.createMap("511bd0e84f1441edb7bf55167ecddec2", "map").then(function (response) {

              //update the app

              dom.byId("title").innerHTML = response.itemInfo.item.title;

              dom.byId("subtitle").innerHTML = response.itemInfo.item.snippet;

 

              map = response.map;

              //add the scalebar

              scalebar = new Scalebar({

                map: map,

                scalebarUnit: "english"

              });

              overviewMapDijit = new OverviewMap({

                map: map,

                visible: true

              });

 

              overviewMapDijit.startup();

              //add the legend. Note that we use the utility method getLegendLayers to get

              //the layers to display in the legend from the createMap response.

              var legendLayers = arcgisUtils.getLegendLayers(response);

              legendDijit = new Legend({

                map: map,

                layerInfos: legendLayers

              }, "legend");

              legendDijit.startup();

            });

 

the Map gallery

<!DOCTYPE html>

<html> 

<head>

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

 

  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>

  <title></title>

 

  <link rel="stylesheet" href="https://js.arcgis.com/3.16/dijit/themes/claro/claro.css">   

  <link rel="stylesheet" href="https://js.arcgis.com/3.16/esri/css/esri.css">

  <style>

    html, body { height: 100%; width: 100%; margin: 0; padding: 0; }

    #map{

      padding:0;

    }

  </style>

 

  <script src="https://js.arcgis.com/3.16/"></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>

 

Also,as you can see in my code i have a legend, scalebar, and overview map that i need as well. Can anyone help with this i dont really care what the layout looks like just as long as my map shows up on top of the basmap gallery and i can change the basemap and yet have my data stay put.

Outcomes