asizer · February 24, 2015 22:06
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>

 <head>
    <title>Fixing Basemap Gallery</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no,width=device-width" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">

    <link rel="stylesheet" href="//js.arcgis.com/3.12/esri/css/esri.css">

    <style>
        html, body {
            height: 100%;
            width: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
        .sample-head-foot {
            box-sizing: border-box; /* only needed because of height and border together */
            background-color: gray;
            color: #eee;
            left: 0;
            right: 0;
            font-size: 30px;
            text-align: center;
        }

        #header {
            margin: 0;
            height: 40px;
            border: 2px solid yellow;
        }
        #map {
            box-sizing: border-box; /* only needed because of height and border together */
            border: 2px solid red;
            position: absolute;
            top: 40px;
            right: 0;
            left: 40%;
            bottom: 50px;
        }
        #footer {
            position: absolute;
            bottom: 0;
            border: 2px solid lime;
            height: 50px;
        }
        .sidebar {
            position: absolute;
            height: 100%;
            width: 40%;
            padding: 10px;
            box-sizing: border-box;
            overflow: hidden;
            border: 1px solid yellow;
        }
    </style>
    <script src="//js.arcgis.com/3.12/"></script>
    <script>

    var map;
    require(["esri/map", "dojo/on", "esri/dijit/BasemapGallery", "dojo/_base/array", "dojo/domReady!"], function(Map, dojoOn, BMG, arrayUtil) {

        map = new Map("map", {
            basemap: "gray",
            center: [-122.45, 37.75], // longitude, latitude
            zoom: 8
        });

        var bmg = new BMG({
            map: map
        }, 'bmg');
        bmg.startup();

        // without this, the basemap gallery leaves behind a label layer
        dojoOn.once(bmg, 'selection-change', function() {
            // wait for the map to redraw itself with the new basemap
            dojoOn.once(map, 'update-end', function() {
                // then check if the old basemap layers are still on the map...
                arrayUtil.forEach(map.basemapLayerIds, function(bmid) {
                    if (arrayUtil.indexOf(map.layerIds, bmid) >= 0) {
                        // ... and get rid of them if they are.
                        map.removeLayer(map.getLayer(bmid));
                    }
                });
            });
        });
    });

    </script>
 </head>

 <body class="claro">
    <div id="header" class="sample-head-foot">Basemap Gallery interaction with esri.map and</div>

    <div id="map"></div>
    <div class="sidebar">
        <div id="bmg"></div>
    </div>
    <div id="footer" class="sample-head-foot">default basemap containing labels</div>

 </body>

 </html>
	<!DOCTYPE html>
	<html>

	<head>
	<title>Fixing Basemap Gallery</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no,width=device-width" />
	<meta http-equiv="X-UA-Compatible" content="IE=Edge">

	<link rel="stylesheet" href="//js.arcgis.com/3.12/esri/css/esri.css">

	<style>
	html, body {
	height: 100%;
	width: 100%;
	margin: 0;
	padding: 0;
	overflow: hidden;
	}
	.sample-head-foot {
	box-sizing: border-box; /* only needed because of height and border together */
	background-color: gray;
	color: #eee;
	left: 0;
	right: 0;
	font-size: 30px;
	text-align: center;
	}

	#header {
	margin: 0;
	height: 40px;
	border: 2px solid yellow;
	}
	#map {
	box-sizing: border-box; /* only needed because of height and border together */
	border: 2px solid red;
	position: absolute;
	top: 40px;
	right: 0;
	left: 40%;
	bottom: 50px;
	}
	#footer {
	position: absolute;
	bottom: 0;
	border: 2px solid lime;
	height: 50px;
	}
	.sidebar {
	position: absolute;
	height: 100%;
	width: 40%;
	padding: 10px;
	box-sizing: border-box;
	overflow: hidden;
	border: 1px solid yellow;
	}
	</style>
	<script src="//js.arcgis.com/3.12/"></script>
	<script>

	var map;
	require(["esri/map", "dojo/on", "esri/dijit/BasemapGallery", "dojo/_base/array", "dojo/domReady!"], function(Map, dojoOn, BMG, arrayUtil) {

	map = new Map("map", {
	basemap: "gray",
	center: [-122.45, 37.75], // longitude, latitude
	zoom: 8
	});

	var bmg = new BMG({
	map: map
	}, 'bmg');
	bmg.startup();

	// without this, the basemap gallery leaves behind a label layer
	dojoOn.once(bmg, 'selection-change', function() {
	// wait for the map to redraw itself with the new basemap
	dojoOn.once(map, 'update-end', function() {
	// then check if the old basemap layers are still on the map...
	arrayUtil.forEach(map.basemapLayerIds, function(bmid) {
	if (arrayUtil.indexOf(map.layerIds, bmid) >= 0) {
	// ... and get rid of them if they are.
	map.removeLayer(map.getLayer(bmid));
	}
	});
	});
	});
	});

	</script>
	</head>

	<body class="claro">
	<div id="header" class="sample-head-foot">Basemap Gallery interaction with esri.map and</div>

	<div id="map"></div>
	<div class="sidebar">
	<div id="bmg"></div>
	</div>
	<div id="footer" class="sample-head-foot">default basemap containing labels</div>

	</body>

	</html>
No results found