|
<!DOCTYPE html> |
|
<html> |
|
|
|
<head> |
|
<title>Printing overrun with polygon feature layers</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; |
|
} |
|
|
|
.mapDiv { |
|
page-break-inside: avoid; |
|
box-sizing: border-box; |
|
border: 1px solid blue; |
|
width: 100%; |
|
height: 5in; |
|
} |
|
|
|
.separator { |
|
height: 2in; |
|
width: 100%; |
|
border: 1px solid lime; |
|
box-sizing: border-box; |
|
font-family: sans-serif; |
|
padding: 5px 10px 0; |
|
line-height: 1.4em; |
|
background: white; |
|
} |
|
.separator.full-page { |
|
height: 10in; |
|
page-break-before: always; |
|
page-break-after: always; |
|
} |
|
h3 { |
|
margin: 10px 0; |
|
} |
|
p { |
|
margin: 0.6em 0; |
|
font-size: 14px; |
|
} |
|
.dummy-map { |
|
overflow: hidden; |
|
} |
|
.dummy-map-root { |
|
width: 100%; |
|
height: 100%; |
|
overflow: hidden; |
|
position: relative; |
|
} |
|
.dummy-map-container { |
|
width: 100%; |
|
height: 100%; |
|
overflow: hidden; |
|
position: absolute; |
|
clip: auto; |
|
left: 0; |
|
top: 0; |
|
} |
|
.dummy-map-layers { |
|
width: 100%; |
|
height: 100%; |
|
z-index: 0; |
|
position: relative; |
|
} |
|
.my-svg { |
|
height: 100%; |
|
width: 100%; |
|
overflow: visible; |
|
position: absolute; |
|
} |
|
.poly { |
|
fill: black; |
|
fill-opacity: 0; |
|
stroke: black; |
|
stroke-opacity: 1; |
|
stroke-width: 2; |
|
stroke-linecap: butt; |
|
stroke-linejoin: miter; |
|
stroke-miterlimit: 4; |
|
} |
|
.my-svg { |
|
height: 100%; |
|
width: 100%; |
|
will-change: transform; |
|
overflow: visible; |
|
position: absolute; |
|
transform: translate(0px, 0px); |
|
|
|
} |
|
.poly { |
|
fill: black; |
|
fill-opacity: 0; |
|
stroke: black; |
|
stroke-opacity: 1; |
|
stroke-width: 2; |
|
stroke-linecap: butt; |
|
stroke-linejoin: miter; |
|
stroke-miterlimit: 4; |
|
} |
|
|
|
</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: -8287756.813712574, |
|
ymin: 5022914.718452856, |
|
xmax: -8170655.286379638, |
|
ymax: 5095988.5174935125, |
|
spatialReference: { |
|
wkid: 102100 |
|
} |
|
}); |
|
|
|
arcgisUtils.createMap(mapId, 'map1').then(function(response) { |
|
map1 = response.map; // global var for debugging |
|
map1.setExtent(extent1); |
|
}); |
|
|
|
}); |
|
</script> |
|
</head> |
|
|
|
<body> |
|
|
|
<div class="separator full-page"> |
|
<h3>Printing overrun with polygon feature layers</h3> |
|
<p>This page is an extension of the problems outlined in <a href="https://bl.ocks.org/asizer/c4b6a6dc013fb3a4d310c5a767ec0441">this bl.ock</a>.</p> |
|
<p>If a map has a polygon feature layer on it, no matter where it is on the page, sometimes the polygon features will extend to surrounding pages when printed. I thought at first it was only the left-most polygon that did this, but I've gotten multiple polygons to bleed on to adjacent pages, as is happening here. As with the other bl.ock, this is only visible in print preview or when printed to pdf. </p> |
|
<p>In this example, the map is given its own page, and centered just north of New York City. On the pages before the map, you can see the eastern boundary of New York State running north-south. On the pages after the map, you can see the eastern boundary of New Jersey. Note New Jersey extends two pages beyond the original map.</p> |
|
<p>Other reliable ways to reproduce this are to zoom in to the middle of California, making sure some part of the border is visible, or to zoom in to the northern part of Michigan. Occasionally, you can get both Michigan and Wisconsin to bleed onto the same adjacent page.</p> |
|
</div> |
|
<div class="separator full-page"> |
|
<p>Here is another blank page just to see how much of the eastern edge of New York State is displayed here</p> |
|
</div> |
|
<div class="separator full-page"> |
|
<p>Here is another blank page just to see how much of the eastern edge of New York State is displayed here</p> |
|
</div> |
|
|
|
<div class="separator"> |
|
<p>When the map below is printed, sometimes its polygons bleed onto surrounding pages. This is a spacer to show the polygon isn't drawn on this page. </p> |
|
</div> |
|
<div id="map1" class="mapDiv"></div> |
|
<div class="separator full-page"> |
|
<p>When the map above is printed, sometimes its polygons bleed onto surrounding pages. This is a spacer to show the polygon draws down here. Most of the time, using the original extent of the map above, New Jersey is drawn here. Occassionally, both New Jersey and New York are drawn.</p> |
|
</div> |
|
<div class="separator full-page"> |
|
<p>When the map above is printed, sometimes its polygons bleed onto surrounding pages. This is a spacer to show the polygon draws down here.</p> |
|
</div> |
|
<div class="separator full-page"> |
|
<p>Here's a blank page to get some separation between the map above and the svg below. Any lines drawn on this page are likely coming from the svg below, not the map above</p> |
|
</div> |
|
<div class="separator full-page"> |
|
<p>Here's another blank page to get some separation between the map above and the svg below. Any lines drawn on this page are likely coming from the svg below, not the map above</p> |
|
</div> |
|
<div class="separator full-page"> |
|
<p>Here's another blank page to get some separation between the map above and the svg below. Any lines drawn on this page are likely coming from the svg below, not the map above</p> |
|
</div> |
|
<div class="separator"> |
|
<p>I copied the svg element from the map above into a new, plain svg to test whether this problem is inherent in all svg printing or whether it's jsapi-specific. I found that when applying <code>transform: translate(0px, 0px)</code> to this svg element, the same types of problems can be seen as in the map above. If you use dev tools to remove <code>transform: translate(0px, 0px)</code> from the svg element, the polygons stay within their box. However, as the jsapi depends on <code>transform: translate</code> to pan the map, this is not a workable solution for the problem above.</p> |
|
</div> |
|
<div class="mapDiv map dummy-map"> |
|
<div class="esriMapContainer dummy-map-root"> |
|
<div class="esriMapContainer dummy-map-container"> |
|
<div class="esriMapLayers dummy-map-layers"> |
|
<svg class="my-svg"> |
|
<g> |
|
<g> |
|
<path class="poly" path="M -3869,-688 -3636,-837 -3571,-911 -3417,-991 -3345,-1114 -3211,-1207 -3267,-1387 -3228,-1435 -3259,-1479 -3358,-1503 -3342,-1557 -3358,-1680 -2923,-1784 -2579,-1778 -2399,-1747 -2276,-1654 -2131,-1688 -1794,-1691 -1665,-1755 -1652,-1736 -1580,-1827 -1460,-1913 -1291,-1967 -1263,-2047 -1278,-2096 -1303,-2250 -1270,-2328 -1223,-2348 -1227,-2430 -1275,-2483 -1345,-2459 -1393,-2516 -1018,-2813 -953,-2943 -640,-3243 -377,-3385 -208,-3430 312,-3428 805,-3444 801,-3419 811,-3368 778,-3281 787,-3252 818,-3231 784,-3154 795,-3109 784,-3090 786,-3062 778,-3047 786,-3006 803,-2980 812,-2970 842,-2857 838,-2829 816,-2790 834,-2681 781,-2621 778,-2591 759,-2555 758,-2525 739,-2481 739,-2463 759,-2435 752,-2405 761,-2331 783,-2301 776,-2219 795,-2193 796,-2171 786,-2128 748,-2045 751,-1996 773,-1982 791,-2028 835,-2038 842,-2033 851,-2006 844,-1988 867,-1972 882,-1926 874,-1723 855,-1353 852,-1251 840,-1218 860,-1162 868,-1161 801,-922 693,-501 703,-472 655,263 708,343 528,450 580,535 580,549 488,656 476,709 386,737 323,832 323,800 345,742 384,657 403,585 403,549 173,428 57,358 -182,208 -186,184 -211,158 -211,139 -222,131 -249,131 -301,114 -324,117 -326,100 -351,78 -380,79 -411,24 -419,-1 -451,-39 -453,-47 -438,-71 -448,-146 -442,-158 -445,-200 -471,-209 -471,-227 -459,-243 -486,-266 -491,-278 -508,-284 -525,-296 -586,-297 -607,-374 -636,-387 -652,-418 -679,-424 -750,-422 -1539,-428 -1834,-428 -2399,-423 -3356,-426 -3759,-426 -3868,-428 -3869,-688 Z M 508,937 381,973 502,914 499,896 440,881 389,902 415,941 325,950 308,894 360,798 401,743 507,751 510,697 620,641 708,663 742,622 900,643 953,594 1041,578 1324,565 1553,403 1579,409 1526,441 1481,522 1383,580 1344,638 1437,624 1571,524 1636,513 1728,547 1840,465 1879,475 1843,518 1405,725 748,873 508,937 Z M 843,907 844,900 881,900 1019,860 1146,800 1215,774 1233,771 1228,780 1088,836 1033,863 875,908 843,907 Z M 155,1022 155,991 207,908 275,884 285,930 238,985 187,1018 155,1022 Z" d="M-3869-688-3636-837-3571-911-3417-991-3345-1114-3211-1207-3267-1387-3228-1435-3259-1479-3358-1503-3342-1557-3358-1680-2923-1784-2579-1778-2399-1747-2276-1654-2131-1688-1794-1691-1665-1755-1652-1736-1580-1827-1460-1913-1291-1967-1263-2047-1278-2096-1303-2250-1270-2328-1223-2348-1227-2430-1275-2483-1345-2459-1393-2516-1018-2813-953-2943-640-3243-377-3385-208-3430 312-3428 805-3444 801-3419 811-3368 778-3281 787-3252 818-3231 784-3154 795-3109 784-3090 786-3062 778-3047 786-3006 803-2980 812-2970 842-2857 838-2829 816-2790 834-2681 781-2621 778-2591 759-2555 758-2525 739-2481 739-2463 759-2435 752-2405 761-2331 783-2301 776-2219 795-2193 796-2171 786-2128 748-2045 751-1996 773-1982 791-2028 835-2038 842-2033 851-2006 844-1988 867-1972 882-1926 874-1723 855-1353 852-1251 840-1218 860-1162 868-1161 801-922 693-501 703-472 655 263 708 343 528 450 580 535 580 549 488 656 476 709 386 737 323 832 323 800 345 742 384 657 403 585 403 549 173 428 57 358-182 208-186 184-211 158-211 139-222 131-249 131-301 114-324 117-326 100-351 78-380 79-411 24-419-1-451-39-453-47-438-71-448-146-442-158-445-200-471-209-471-227-459-243-486-266-491-278-508-284-525-296-586-297-607-374-636-387-652-418-679-424-750-422-1539-428-1834-428-2399-423-3356-426-3759-426-3868-428-3869-688ZM 508 937 381 973 502 914 499 896 440 881 389 902 415 941 325 950 308 894 360 798 401 743 507 751 510 697 620 641 708 663 742 622 900 643 953 594 1041 578 1324 565 1553 403 1579 409 1526 441 1481 522 1383 580 1344 638 1437 624 1571 524 1636 513 1728 547 1840 465 1879 475 1843 518 1405 725 748 873 508 937ZM 843 907 844 900 881 900 1019 860 1146 800 1215 774 1233 771 1228 780 1088 836 1033 863 875 908 843 907ZM 155 1022 155 991 207 908 275 884 285 930 238 985 187 1018 155 1022Z" stroke-dasharray="none" dojoGfxStrokeStyle="solid" fill-rule="evenodd"></path> |
|
<path class="poly" path="M 670,41 703,-472 1023,-461 1190,-458 1189,-422 1225,-427 1234,-458 1340,-455 1342,-447 1360,-446 1368,-455 1415,-455 1715,-450 1928,-443 1931,-429 1938,-153 1935,-75 1937,-36 1928,145 1896,156 1903,216 1895,232 1579,275 1547,267 1509,200 1509,278 1400,292 1124,286 980,392 580,549 580,535 528,450 708,343 655,263 670,41 Z" d="M 670 41 703-472 1023-461 1190-458 1189-422 1225-427 1234-458 1340-455 1342-447 1360-446 1368-455 1415-455 1715-450 1928-443 1931-429 1938-153 1935-75 1937-36 1928 145 1896 156 1903 216 1895 232 1579 275 1547 267 1509 200 1509 278 1400 292 1124 286 980 392 580 549 580 535 528 450 708 343 655 263 670 41Z" stroke-dasharray="none" dojoGfxStrokeStyle="solid" fill-rule="evenodd"></path> |
|
<path class="poly" path="M -757,1775 -747,1770 -746,1750 -736,1729 -712,1715 -700,1704 -707,1696 -652,1649 -585,1651 -580,1647 -536,1621 -504,1617 -499,1603 -508,1567 -502,1547 -481,1527 -462,1528 -450,1519 -434,1498 -388,1472 -368,1450 -307,1431 -276,1394 -216,1386 -200,1363 -210,1336 -286,1268 -313,1219 -343,1206 -351,1187 -364,1176 -381,1119 -401,1115 -416,1122 -442,1104 -451,1070 -447,1008 -458,984 -491,966 -533,973 -544,960 -541,947 -546,918 -544,899 -552,883 -534,865 -550,849 -537,813 -541,790 -524,764 -495,766 -474,748 -465,719 -473,702 -440,686 -441,670 -454,658 -458,640 -499,583 -502,569 -485,547 -451,537 -426,520 -401,487 -376,467 -392,468 -389,451 -364,439 -338,411 -301,347 -303,328 -273,274 -250,262 -249,245 -182,208 57,358 173,428 403,549 403,585 384,657 345,742 323,800 323,832 234,887 244,831 221,860 176,940 125,1014 132,1062 164,1082 239,1074 344,1196 299,1408 261,1394 267,1421 303,1418 292,1451 239,1456 272,1465 212,1620 203,1772 155,1861 92,1910 88,1956 28,1938 36,1976 -7,2047 2,2090 -151,2179 -125,2184 -127,2213 -256,2424 -312,2458 -310,2489 -377,2475 -320,2342 -340,2288 -411,2262 -488,2275 -703,2096 -803,1987 -777,1916 -816,1867 -757,1775 Z" d="M-757 1775-747 1770-746 1750-736 1729-712 1715-700 1704-707 1696-652 1649-585 1651-580 1647-536 1621-504 1617-499 1603-508 1567-502 1547-481 1527-462 1528-450 1519-434 1498-388 1472-368 1450-307 1431-276 1394-216 1386-200 1363-210 1336-286 1268-313 1219-343 1206-351 1187-364 1176-381 1119-401 1115-416 1122-442 1104-451 1070-447 1008-458 984-491 966-533 973-544 960-541 947-546 918-544 899-552 883-534 865-550 849-537 813-541 790-524 764-495 766-474 748-465 719-473 702-440 686-441 670-454 658-458 640-499 583-502 569-485 547-451 537-426 520-401 487-376 467-392 468-389 451-364 439-338 411-301 347-303 328-273 274-250 262-249 245-182 208 57 358 173 428 403 549 403 585 384 657 345 742 323 800 323 832 234 887 244 831 221 860 176 940 125 1014 132 1062 164 1082 239 1074 344 1196 299 1408 261 1394 267 1421 303 1418 292 1451 239 1456 272 1465 212 1620 203 1772 155 1861 92 1910 88 1956 28 1938 36 1976-7 2047 2 2090-151 2179-125 2184-127 2213-256 2424-312 2458-310 2489-377 2475-320 2342-340 2288-411 2262-488 2275-703 2096-803 1987-777 1916-816 1867-757 1775Z" stroke-dasharray="none" dojoGfxStrokeStyle="solid" fill-rule="evenodd"></path> |
|
</g> |
|
</g> |
|
</svg> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="separator full-page"> |
|
<p>This is a spacer to show that the plain svg polygon bleeds over. |
|
</div> |
|
<div class="separator full-page"> |
|
<p>This is a spacer to show that the plain svg polygon bleeds over. |
|
</div> |
|
|
|
</body> |
|
|
|
</html> |
