Skip to content

Instantly share code, notes, and snippets.

@asizer
asizer / index.html
Created October 16, 2017 22:05
Printing overrun with polygon feature layers
<!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">

Dividing a Large SVG for Printing

There is no native way to define page breaks within a large SVG for printing—it either gets scaled down to fit on a single page or gets cut off. There are many situations where pagination would be useful, such as maps, flow charts, or org diagrams. Really, any large, complicated graphic that becomes incomprehensible if scaled too small.

This pen demonstrates a way to generate custom pagination by re-using the same graphic within multiple SVG elements, using the viewBox attribute to define which part of the graphic should be visible each time. Media queries control which SVGs are visible on screen or when printed.

Print preview or print to file to see the results.

(Getting the browser to print a single iframe within Codepen is a little tricky. For Firefox, use "This Frame > Print" (no preview option, you'll have to print to file). For IE, select the entire content of the results frame, use "Print Preview", and then choose "As selec

Dividing a Large SVG for Printing

There is no native way to define page breaks within a large SVG for printing—it either gets scaled down to fit on a single page or gets cut off. There are many situations where pagination would be useful, such as maps, flow charts, or org diagrams. Really, any large, complicated graphic that becomes incomprehensible if scaled too small.

This pen demonstrates a way to generate custom pagination by re-using the same graphic within multiple SVG elements, using the viewBox attribute to define which part of the graphic should be visible each time. Media queries control which SVGs are visible on screen or when printed.

Print preview or print to file to see the results.

(Getting the browser to print a single iframe within Codepen is a little tricky. For Firefox, use "This Frame > Print" (no preview option, you'll have to print to file). For IE, select the entire content of the results frame, use "Print Preview", and then choose "As selec

@asizer
asizer / index.html
Last active October 16, 2017 22:31
Printing overrun with maps at the bottom of a page
<!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">
@asizer
asizer / index.html
Created February 17, 2017 22:51
Simulating loading of 5 webmaps in Cascade, and trying to wait for context loss and previous webmap load. Occasionally crashes iOS Safari.
<!DOCTYPE html>
<html>
<head>
<title>Waiting for context recycling and webmap load</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="http://js.arcgis.com/3.19/esri/css/esri.css">
@asizer
asizer / index.html
Created February 17, 2017 22:50
Simulating loading of 5 webmaps in Cascade, and trying to wait for context loss. Occasionally crashes iOS Safari.
<!DOCTYPE html>
<html>
<head>
<title>Trying to wait for context recycling</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="http://js.arcgis.com/3.19/esri/css/esri.css">
@asizer
asizer / index.html
Last active February 17, 2017 22:51
Simulating loading of 5 webmaps in Cascade, but without popups. This consistently crashes iOS Safari.
<!DOCTYPE html>
<html>
<head>
<title>Simulating 5 webmap loads in Cascade, no popups</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="http://js.arcgis.com/3.19/esri/css/esri.css">
@asizer
asizer / index.html
Created February 17, 2017 22:49
Simulating loading of 5 webmaps in Cascade. This consistently crashes iOS Safari.
<!DOCTYPE html>
<html>
<head>
<title>Simulating 5 webmap loads in Cascade</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="http://js.arcgis.com/3.19/esri/css/esri.css">
@asizer
asizer / index.html
Last active July 18, 2016 22:30
centerAt point discrepancy
<!DOCTYPE html>
<html>
<head>
<title>centerAt discrepancy</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.17/esri/css/esri.css">
@asizer
asizer / index.html
Created June 20, 2016 18:48
Actual Locate Button breaking
<!DOCTYPE html>
<html>
<head>
<title>Actual Locator Button</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.17/esri/css/esri.css">