will/printmaps
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fixed redraw problems by killing and injecting map html

Browse Source
This commit is contained in:
Will Bradley 2013-07-28 20:35:01 -04:00
parent 21da2de99e
commit 0022492c7b
1 changed files with 25 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
print.html
View File

@ -9,11 +9,15 @@
padding: 0; padding: 0;
margin: 0; margin: 0;
} }
#printbutton { #printmessage {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
z-index: 999; z-index: 999;
background-color: white;
font-family: Arial, Helvetica, sans-serif;
padding: 1em;
border: 1px solid black;
} }
#map { #map {
height: 2550px; /* 8.5 inch at 300 dpi */ height: 2550px; /* 8.5 inch at 300 dpi */
@ -25,7 +29,7 @@
size: 11in 8.5in; size: 11in 8.5in;
margin: 0mm; margin: 0mm;
} }
#printbutton { #printmessage {
display: none; display: none;
} }
htmlff,boffdy { htmlff,boffdy {
@ -39,11 +43,16 @@
} }
</style> </style>
<script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script> <!-- <script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script> -->
<script src="leaflet.js"></script>
</head> </head>
<body> <body>
<div id="printmessage">
<p>Wait for the (huge!) map to load, then click Print.<br/>
If it comes out poorly, close this window and try again.</p>
<input type="button" value="Print" id="printbutton" onclick="printMap()" /> <input type="button" value="Print" id="printbutton" onclick="printMap()" />
</div>
<div id="map"></div> <div id="map"></div>
<script type="text/javascript"> <script type="text/javascript">
@ -84,6 +93,10 @@
// Only halve the map if it hasn't already been halved // Only halve the map if it hasn't already been halved
if(!mapHalved){ if(!mapHalved){
halveMap(); halveMap();
// Grab the map HTML, kill the dynamic map, and reinject a static map.
mapHTML = map._container.innerHTML;
map._container.innerHTML = null;
document.getElementById("map").innerHTML = mapHTML;
} }
// It takes awhile to halve, so print after 2sec. // It takes awhile to halve, so print after 2sec.
setTimeout(function(){ setTimeout(function(){
@ -93,19 +106,21 @@
function halveMap(){ function halveMap(){
resizeScale = 0.285; // magic number that seems to work best in Chrome
// Halve size of map container (hopefully no redraw!) // Halve size of map container (hopefully no redraw!)
map._container.style.width = window.getComputedStyle(map._container, null).width.split("px")[0]*0.4+"px"; map._container.style.width = window.getComputedStyle(map._container, null).width.split("px")[0]*resizeScale+"px";
map._container.style.height = window.getComputedStyle(map._container, null).height.split("px")[0]*0.4+"px"; map._container.style.height = window.getComputedStyle(map._container, null).height.split("px")[0]*resizeScale+"px";
// Halve size of each leaflet tile AND decrease its offsets by half // Halve size of each leaflet tile AND decrease its offsets by half
var leaflets = document.getElementsByClassName("leaflet-tile"); var leaflets = document.getElementsByClassName("leaflet-tile");
for(var i=0; i < leaflets.length; i++){ for(var i=0; i < leaflets.length; i++){
element = leaflets[i]; element = leaflets[i];
element.style.width = element.style.width.split("px")[0]*0.4+"px"; element.style.width = element.style.width.split("px")[0]*resizeScale+"px";
element.style.height = element.style.height.split("px")[0]*0.4+"px"; element.style.height = element.style.height.split("px")[0]*resizeScale+"px";
element.style.left = element.style.left.split("px")[0]*0.4+"px"; element.style.left = element.style.left.split("px")[0]*resizeScale+"px";
element.style.top = element.style.top.split("px")[0]*0.4+"px"; element.style.top = element.style.top.split("px")[0]*resizeScale+"px";
} }
mapHalved = true; mapHalved = true;