Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!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: [-165.255, -40.022],
                zoom: 7
            });
​
            //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);
            });
            map.on("extent-change", function () {
                console.log("Level: " + map.getLevel());
            });
        });
    </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>
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
kenbujapro
0viewers