If there is no map you can't see the basemap gallery.Check out my code.you see where it says map: map if there is no map it wont show.var basemapGallery = new BasemapGallery({ showArcGISBasemaps: true, map: map }, "basemapGallery"); basemapGallery.startup();<!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>Edit rivers and waterbodies</title>
<link rel="stylesheet" href="http://js.arcgis.com/3.9/js/dojo/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.9/js/esri/css/esri.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
<style>
html, body {
height: 100%;
margin: 0px;
overflow:hidden;
padding: 0px;
width: 100%;
}
#map {
height: 100%;
width: 100%;
overflow:hidden;
position: absolute;
z-index: 0;
}
#draggable{
display: inline-block;
position:absolute;
float:left;
width:10px;
height:10px;
left:10px;
top:360px;
z-index:50px;
padding: 0.5em;
}
#HomeButton {
position: absolute;
top: 245px;
left: 20px;
z-index: 10;
}
#LocateButton {
position: absolute;
top: 280px;
left: 20px;
z-index: 50;
}
h1{
text-align: center;
}
#login {
height: 100%;
width: 100%;
position: absolute;
z-index: 0;
overflow:hidden;
background-color:black;
color:white;
}
#container {
position: fixed;
width: 340px;
height: 280px;
top: 50%;
left: 50%;
margin-top: -140px;
margin-left: -170px;
}
.templatePicker {
border: none;
}
</style>
<script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
<script src="http://js.arcgis.com/3.9/"></script>
<script>
var sh = true;
var map;
function showUser(str, pass) {
if (str=="") {
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
} else { // code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
if(xmlhttp.responseText == 'ADMIN')
{
document.getElementById('login').style.display = "none";
document.getElementById('draggable').style.display = "none";
require([
"esri/map",
"esri/tasks/GeometryService",
"esri/toolbars/edit",
"esri/dijit/HomeButton",
"esri/dijit/BasemapGallery",
"esri/dijit/LocateButton",
"esri/layers/ArcGISDynamicMapServiceLayer",
"esri/layers/FeatureLayer",
"esri/symbols/SimpleMarkerSymbol",
"esri/symbols/SimpleLineSymbol",
"esri/dijit/editing/Editor",
"esri/dijit/editing/TemplatePicker",
"esri/config",
"dojo/i18n!esri/nls/jsapi",
"dojo/_base/array", "dojo/parser", "dojo/keys",
"dijit/layout/BorderContainer", "dijit/layout/ContentPane",
"dojo/domReady!"
], function(
Map, GeometryService, Edit,
HomeButton, BasemapGallery, LocateButton,
ArcGISDynamicMapServiceLayer, FeatureLayer,
SimpleMarkerSymbol, SimpleLineSymbol,
Editor, TemplatePicker,
esriConfig, jsapiBundle,
arrayUtils, parser, keys
) {
parser.parse();
//This service is for development and testing purposes only. We recommend that you create your own geometry service for use within your applications.
esriConfig.defaults.geometryService = new GeometryService("http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");
map = new Map("map", {
basemap: "osm",
center: [-98.185272, 26.282376],
logo: false,
sliderStyle: 'large',
zoom: 9,
});
var home = new HomeButton({
map: map
}, "HomeButton");
home.startup();
geoLocate = new LocateButton({
map: map
}, "LocateButton");
geoLocate.startup();
var basemapGallery = new BasemapGallery({
showArcGISBasemaps: true,
map: map
}, "basemapGallery");
basemapGallery.startup();
basemapGallery.on("error", function(msg) {
console.log("basemap gallery error: ", msg);
});
map.on("layers-add-result", initEditor);
//add boundaries and place names
var dynamic = new ArcGISDynamicMapServiceLayer("http://maps.lrgvdc911.org:6080/arcgis/rest/services/STEAR/STEAR_DYNAMIC/MapServer");
map.addLayer(dynamic);
var events = new FeatureLayer("http://maps.lrgvdc911.org:6080/arcgis/rest/services/Public_Outreach/EVENTS/FeatureServer/0",{
mode: FeatureLayer.MODE_ONDEMAND,
outFields: ['*']
});
map.addLayers([events]);
function initEditor(evt) {
var templateLayers = arrayUtils.map(evt.layers, function(result){
return result.layer;
});
var templatePicker = new TemplatePicker({
featureLayers: templateLayers,
grouping: true,
rows: "auto",
columns: 1
}, "draggable");
templatePicker.startup();
var layers = arrayUtils.map(evt.layers, function(result) {
return { featureLayer: result.layer };
});
var settings = {
map: map,
templatePicker: templatePicker,
layerInfos: layers,
toolbarVisible: true,
createOptions: {
polylineDrawTools:[ Editor.CREATE_TOOL_FREEHAND_POLYLINE ],
polygonDrawTools: [ Editor.CREATE_TOOL_FREEHAND_POLYGON,
Editor.CREATE_TOOL_CIRCLE,
Editor.CREATE_TOOL_TRIANGLE,
Editor.CREATE_TOOL_RECTANGLE
]
},
toolbarOptions: {
reshapeVisible: true
}
};
var params = {settings: settings};
var myEditor = new Editor(params,'editorDiv');
//define snapping options
var symbol = new SimpleMarkerSymbol(
SimpleMarkerSymbol.STYLE_CROSS,
15,
new SimpleLineSymbol(
SimpleLineSymbol.STYLE_SOLID,
new Color([255, 0, 0, 0.5]),
5
),
null
);
map.enableSnapping({
snapPointSymbol: symbol,
tolerance: 20,
snapKey: keys.ALT
});
myEditor.startup();
}
});
}
else
{
alert(xmlhttp.responseText);
}
}
}
xmlhttp.open("GET",'testinfo.php?u='+str+'&p='+pass,true);
xmlhttp.send();
}
function hide()
{
if(sh)
{
sh = false;
document.getElementById('draggable').style.display = "none";
}
else
{
sh = true;
document.getElementById('draggable').style.display = "block";
}
}
</script>
</head>
<body class="claro">
<div data-theme="a" data-role="header" data-position="fixed">
<h3>LRG Kidz</h3>
<a href="#featureDialog" data-role="button" class="ui-btn-right" onclick="hide();">Hide</a>
</div>
<div id="map">
<div id="HomeButton"></div>
<div id="LocateButton"></div>
<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 id="draggable"></div>
<div id="login">
<h1>Welcome</h1>
<div id="container">
<form>
<label for="username">Username:</label>
<input type="text" id="username" name="username">
<label for="password">Password:</label>
<input type="password" id="password" name="password">
<div id="lower">
<input type="button" value="Login" onclick="showUser(username.value, password.value);"/>
</div><!--/ lower-->
</form>
</div>
</div>
</body>
</html>