Skip to content

Instantly share code, notes, and snippets.

@asizer
Created February 24, 2015 22:29
Show Gist options
  • Select an option

  • Save asizer/84b5672cc4bb3b7ded04 to your computer and use it in GitHub Desktop.

Select an option

Save asizer/84b5672cc4bb3b7ded04 to your computer and use it in GitHub Desktop.
Broken BMG with basemap labels
<!DOCTYPE html>
<html>
<head>
<title>Broken 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();
});
</script>
</head>
<body class="claro">
<div id="header" class="sample-head-foot">Broken 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 (change to Imagery with Labels)</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment