asizer/index.html

## readme.md

      
    Raw
  

              readme.md
            
          
    To see this bug, you need to open the fullscreen output of this bl.ock by clicking the "Open" link above, and then open a print preview of the page, or save it to pdf.
(Reprint of the first section's text)
One of the features of the Story Maps Map Journal app is the ability for users to print their apps to PDF. This is a feature that is also often requested on our other templates, and something we plan to implement more broadly in the future. A bug we're hearing about from customers using Map Journal, and can reproduce outside of it on a vanilla page with the jsapi, is described below.
If a map is close to a page break below it, and the bottom left tile is less than about 80% visible horizontally within the map container, that bottom left tile is printed on the next page. This behavior is seen in Chrome, Safari, and Firefox, but only appears when you actually go to print the page and look at the print preview (or print to pdf). It won't show up in CSS emulation mode.
If the map's extent was set in the constructor and not changed, only the bottom left tile prints. If the map's extent was set after instantiation by setExtent or user panning, and the map contains a polygon feature layer, sometimes features also bleed onto surrounding pages. This can be seen on a different bl.ock. This bl.ock focuses on the basemap printing issue.
There are four maps on this page, with their bottom left tile in various positions in relationship to the map container. I've added red outlines to the map tiles for easier positioning of the map in its container to reproduce this bug. It is most obvious when the bottom left tile is only barely above the bottom of the map container, and between 50-80% of it is visible horizontally. Interestingly, if this tile is more than about 80% visible horizontally, this bug does not happen, regardless of the tile's vertical visibility.

  
## index.html
<!DOCTYPE html>
<html>

<head>
  <title>Printing overrun with maps at the bottom of a page</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="https://js.arcgis.com/3.22/esri/css/esri.css">

  <style>
    html,
    body {
      width: 8in;
      padding: 0;
      margin: 0 auto;
    }
    h3 {
      margin: 10px 0;
    }

    p {
      margin: 0.8em 0;
      font-size: 14px;
    }

    .mapDiv {
      page-break-inside: avoid;
      box-sizing: border-box;
      border: 1px solid lime;
      width: 100%;
      height: 500px;
    }

    .separator {
      height: 5in;
      width: 100%;
      border: 1px solid cyan;
      box-sizing: border-box;
      page-break-before: always;
      font-family: sans-serif;
      padding: 5px 10px 0;
      line-height: 1.4em;
    }

    .indent {
      margin-left: 30%;
    }

    .map .esriMapContainer .esriMapLayers .layerTile {
      border: 1px solid red;
    }

  </style>

  <script src="https://js.arcgis.com/3.22/"></script>
  <script>
    var mapId = '26ea33fb5695425dbfc594de97dd72e9';
    require([
      "esri/arcgis/utils",
      "esri/geometry/Extent",
      "dojo/domReady!"
    ], function(
      arcgisUtils, Extent
    ) {

      var extent1 = new Extent({
        xmin: -13540969.303913908,
        ymin: 4960459.651142463,
        xmax: -9803504.368882922,
        ymax: 7386876.6770264525,
        spatialReference: {
          wkid: 102100
        }
      });
      var extent2 = new Extent({
        xmin: -9306969.43314254,
        ymin: 3456178.9344905964,
        xmax: -7433344.995816797,
        ymax: 4674279.417242841,
        spatialReference: {
          wkid: 102100
        }
      });
      var extent3 = new Extent({
        xmin: -8118220.769251807,
        ymin: -1761106.868141007,
        xmax: -4380755.834220823,
        ymax: 665310.157742983,
        spatialReference: {
          wkid: 102100
        }
      });
      var extent4 = new Extent({
        xmin: -10096105.313158475,
        ymin: 3464739.881658548,
        xmax: -9159293.094495602,
        ymax: 4073790.1230346705,
        spatialReference: {
          wkid: 102100
        }
      });

      arcgisUtils.createMap(mapId, 'map1', {mapOptions: {extent: extent1}}).then(function(response) {
        map1 = response.map; // global var for debugging
      });

      arcgisUtils.createMap(mapId, 'map2', {mapOptions: {extent: extent2}}).then(function(response) {
        map2 = response.map; // global var for debugging
      });

      arcgisUtils.createMap(mapId, 'map3', {mapOptions: {extent: extent3}}).then(function(response) {
        map3 = response.map; // global var for debugging
      });

      arcgisUtils.createMap(mapId, 'map4', {mapOptions: {extent: extent4}}).then(function(response) {
        map4 = response.map; // global var for debugging
      });

    });
  </script>
</head>

<body>

  <div class="separator">
    <h3>Basemap printing overrun</h3>
    <p>One of the features of the Story Maps Map Journal app is the ability for users to print their apps to PDF. This is a feature that is also often requested on our other templates, and something we plan to implement more broadly in the future. A bug we're hearing about from customers using Map Journal, and can reproduce outside of it on a vanilla page with the jsapi, is described below.</p>
    <p>If a map is close to a page break below it, <em>and</em> the bottom left tile is less than about 80% visible horizontally within the map container, that bottom left tile is printed on the next page. This behavior is seen in Chrome, Safari, and Firefox, but only appears when you actually go to print the page and look at the print preview (or print to pdf). It won't show up in CSS emulation mode.</p>
    <p>If the map's extent was set in the constructor and not changed, only the bottom left tile prints. If the map's extent was set after instantiation by <code>setExtent</code> or user panning, and the map contains a polygon feature layer, sometimes features also bleed onto surrounding pages. This can be seen on a different bl.ock, <a href="https://bl.ocks.org/asizer/c4b6a6dc013fb3a4d310c5a767ec0441">here</a>. This block focuses on the basemap printing issue. </p>
    <p>There are four maps on this page, with their bottom left tile in various positions in relationship to the map container. I've added red outlines to the map tiles for easier positioning of the map in its container to reproduce this bug. It is most obvious when the bottom left tile is only barely above the bottom of the map container, and between 50-80% of it is visible horizontally. Interestingly, if this tile is more than about 80% visible horizontally, this bug does not happen, regardless of the tile's vertical visibility.</p>
  </div>

  <div id="map1" class="mapDiv"></div>
  <div class="separator">
    <p>When the map above is printed, it sometimes overlaps this text area on the next page. The remaining text here is indented so you can see it in the print preview.</p>
    <p class="indent">Notice in the print preview that the bottom left tile is printed on this next page.</p>
  </div>

  <div id="map2" class="mapDiv"></div>
  <div class="separator">
    <p>When the map above is printed, it sometimes overlaps this text area on the next page. The remaining text here is indented so you can see it in the print preview.</p>
    <p class="indent">Notice in the print preview that the bottom left tile is <em>not</em> printed on the next page. This is because the bottom left tile is more than 80% visible horizontally within the map container. If you shift the map a few pixels east, the bottom left tile will print on this next page.</p>
  </div>

  <div id="map3" class="mapDiv"></div>
  <div class="separator">
    <p>When the map above is printed, it sometimes overlaps this text area on the next page. The remaining text here is indented so you can see it in the print preview.</p>
    <p class="indent">This map is at a different zoom level than the ones above it, and it is outside the extent of the original map, with no features anywhere near it. The bottom left tile is about 50% visible horizontally and vertically within the original map container, and prints on the next page.</p>
  </div>

  <div id="map4" class="mapDiv"></div>
  <div class="separator">
    <p>When the map above is printed, it sometimes overlaps this text area on the next page. The remaining text here is indented so you can see it in the print preview.</p>
    <p class="indent">This map prints a minimal amount of the bottom left tile because so much of it is visible vertically within the map container.</p>
  </div>

</body>

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

	<head>
	<title>Printing overrun with maps at the bottom of a page</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="https://js.arcgis.com/3.22/esri/css/esri.css">

	<style>
	html,
	body {
	width: 8in;
	padding: 0;
	margin: 0 auto;
	}
	h3 {
	margin: 10px 0;
	}

	p {
	margin: 0.8em 0;
	font-size: 14px;
	}

	.mapDiv {
	page-break-inside: avoid;
	box-sizing: border-box;
	border: 1px solid lime;
	width: 100%;
	height: 500px;
	}

	.separator {
	height: 5in;
	width: 100%;
	border: 1px solid cyan;
	box-sizing: border-box;
	page-break-before: always;
	font-family: sans-serif;
	padding: 5px 10px 0;
	line-height: 1.4em;
	}

	.indent {
	margin-left: 30%;
	}

	.map .esriMapContainer .esriMapLayers .layerTile {
	border: 1px solid red;
	}

	</style>

	<script src="https://js.arcgis.com/3.22/"></script>
	<script>
	var mapId = '26ea33fb5695425dbfc594de97dd72e9';
	require([
	"esri/arcgis/utils",
	"esri/geometry/Extent",
	"dojo/domReady!"
	], function(
	arcgisUtils, Extent
	) {

	var extent1 = new Extent({
	xmin: -13540969.303913908,
	ymin: 4960459.651142463,
	xmax: -9803504.368882922,
	ymax: 7386876.6770264525,
	spatialReference: {
	wkid: 102100
	}
	});
	var extent2 = new Extent({
	xmin: -9306969.43314254,
	ymin: 3456178.9344905964,
	xmax: -7433344.995816797,
	ymax: 4674279.417242841,
	spatialReference: {
	wkid: 102100
	}
	});
	var extent3 = new Extent({
	xmin: -8118220.769251807,
	ymin: -1761106.868141007,
	xmax: -4380755.834220823,
	ymax: 665310.157742983,
	spatialReference: {
	wkid: 102100
	}
	});
	var extent4 = new Extent({
	xmin: -10096105.313158475,
	ymin: 3464739.881658548,
	xmax: -9159293.094495602,
	ymax: 4073790.1230346705,
	spatialReference: {
	wkid: 102100
	}
	});

	arcgisUtils.createMap(mapId, 'map1', {mapOptions: {extent: extent1}}).then(function(response) {
	map1 = response.map; // global var for debugging
	});

	arcgisUtils.createMap(mapId, 'map2', {mapOptions: {extent: extent2}}).then(function(response) {
	map2 = response.map; // global var for debugging
	});

	arcgisUtils.createMap(mapId, 'map3', {mapOptions: {extent: extent3}}).then(function(response) {
	map3 = response.map; // global var for debugging
	});

	arcgisUtils.createMap(mapId, 'map4', {mapOptions: {extent: extent4}}).then(function(response) {
	map4 = response.map; // global var for debugging
	});

	});
	</script>
	</head>

	<body>

	<div class="separator">
	<h3>Basemap printing overrun</h3>
	<p>One of the features of the Story Maps Map Journal app is the ability for users to print their apps to PDF. This is a feature that is also often requested on our other templates, and something we plan to implement more broadly in the future. A bug we're hearing about from customers using Map Journal, and can reproduce outside of it on a vanilla page with the jsapi, is described below.</p>
	<p>If a map is close to a page break below it, <em>and</em> the bottom left tile is less than about 80% visible horizontally within the map container, that bottom left tile is printed on the next page. This behavior is seen in Chrome, Safari, and Firefox, but only appears when you actually go to print the page and look at the print preview (or print to pdf). It won't show up in CSS emulation mode.</p>
	<p>If the map's extent was set in the constructor and not changed, only the bottom left tile prints. If the map's extent was set after instantiation by <code>setExtent</code> or user panning, and the map contains a polygon feature layer, sometimes features also bleed onto surrounding pages. This can be seen on a different bl.ock, <a href="https://bl.ocks.org/asizer/c4b6a6dc013fb3a4d310c5a767ec0441">here</a>. This block focuses on the basemap printing issue. </p>
	<p>There are four maps on this page, with their bottom left tile in various positions in relationship to the map container. I've added red outlines to the map tiles for easier positioning of the map in its container to reproduce this bug. It is most obvious when the bottom left tile is only barely above the bottom of the map container, and between 50-80% of it is visible horizontally. Interestingly, if this tile is more than about 80% visible horizontally, this bug does not happen, regardless of the tile's vertical visibility.</p>
	</div>

	<div id="map1" class="mapDiv"></div>
	<div class="separator">
	<p>When the map above is printed, it sometimes overlaps this text area on the next page. The remaining text here is indented so you can see it in the print preview.</p>
	<p class="indent">Notice in the print preview that the bottom left tile is printed on this next page.</p>
	</div>

	<div id="map2" class="mapDiv"></div>
	<div class="separator">
	<p>When the map above is printed, it sometimes overlaps this text area on the next page. The remaining text here is indented so you can see it in the print preview.</p>
	<p class="indent">Notice in the print preview that the bottom left tile is <em>not</em> printed on the next page. This is because the bottom left tile is more than 80% visible horizontally within the map container. If you shift the map a few pixels east, the bottom left tile will print on this next page.</p>
	</div>

	<div id="map3" class="mapDiv"></div>
	<div class="separator">
	<p>When the map above is printed, it sometimes overlaps this text area on the next page. The remaining text here is indented so you can see it in the print preview.</p>
	<p class="indent">This map is at a different zoom level than the ones above it, and it is outside the extent of the original map, with no features anywhere near it. The bottom left tile is about 50% visible horizontally and vertically within the original map container, and prints on the next page.</p>
	</div>

	<div id="map4" class="mapDiv"></div>
	<div class="separator">
	<p>When the map above is printed, it sometimes overlaps this text area on the next page. The remaining text here is indented so you can see it in the print preview.</p>
	<p class="indent">This map prints a minimal amount of the bottom left tile because so much of it is visible vertically within the map container.</p>
	</div>

	</body>

	</html>