Skip to content

Instantly share code, notes, and snippets.

@asizer
Last active August 29, 2015 14:03
Show Gist options
  • Save asizer/3745b5cb03ec1c9747ec to your computer and use it in GitHub Desktop.
Save asizer/3745b5cb03ec1c9747ec to your computer and use it in GitHub Desktop.
Map horizontal repeat

Demonstrates the ability to repeat a map horizontally.

The map's container's container gets a clip dynamically added to it such that repeated tiles are not shown. To get rid of the clip, we just need:

.map .container .container {
  clip: inherit !important;
}

Note: Only the basemap layers will be repeated. The data layers will appear once.

Also note: The map only repeats in the horizontal direction, so it's still entirely possible you'll have a ribbon of whitespace at the top and bottom

<!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>Map with Header and Footer</title>
<link rel="stylesheet" href="http://js.arcgis.com/3.9/js/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: 0;
bottom: 50px;
}
#footer {
position: absolute;
bottom: 0;
border: 2px solid lime;
height: 50px;
}
.map .container .container {
clip: inherit !important;
}
/* firefox seems to treat box-sizing differently? */
@-moz-document url-prefix() {
#map {
top: 44px;
bottom: 54px;
}
}
</style>
<script src="http://js.arcgis.com/3.9/"></script>
<script>
var map;
require(["esri/map", "dojo/domReady!"], function(Map) {
map = new Map("map", {
basemap: "topo",
center: [-122.45, 37.75], // longitude, latitude
zoom: 1
});
});
</script>
</head>
<body>
<div id="header" class="sample-head-foot">Hello, I'm a header</div>
<div id="map"></div>
<div id="footer" class="sample-head-foot">Hello, I'm a footer</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment