<html> <head> <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css" /> <!--[if lte IE 8]> <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.ie.css" /> <![endif]--> <style type="text/css"> body{ padding: 0; margin: 0; } #printbutton { position: absolute; top: 0; left: 0; z-index: 999; } #map { height: 2550px; /* 8.5 inch at 300 dpi */ width: 3300px; /* 11 inch at 300 dpi */ } </style> <style type="text/css" media="print"> @page { size: 11in 8.5in; margin: 0mm; } #printbutton { display: none; } htmlff,boffdy { height: 8.5in; width: 11in; } #map { margin: 0.25in; height: 8in; width: 10.5in; } </style> <script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script> </head> <body> <input type="button" value="Print" id="printbutton" onclick="printMap()" /> <div id="map"></div> <script type="text/javascript"> var query = ""; var map = L.map('map', {zoomControl: false}); //.setView([51.505, -0.09], 13); L.tileLayer('http://{s}.tile.cloudmade.com/4be2d4a8b7ae4a5e8ebc0558bb5d7db4/997/256/{z}/{x}/{y}.png', { attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://cloudmade.com">CloudMade</a>', maxZoom: 18 }).addTo(map); // Get url params var prmstr = window.location.search.substr(1); var prmarr = prmstr.split ("&"); var params = {}; for ( var i = 0; i < prmarr.length; i++) { var tmparr = prmarr[i].split("="); params[tmparr[0]] = tmparr[1]; } // decode query param if(params["q"] && params["b0"] && params["b1"] && params["b2"] && params["b3"]){ updateMap(decodeURIComponent(params["q"]),[[decodeURIComponent(params["b0"]), decodeURIComponent(params["b1"])], [decodeURIComponent(params["b2"]), decodeURIComponent(params["b3"])]]); } else { alert("No boundaries given!"); } function updateMap(query,bounds){ // Fit map to the GPS boundaries map.fitBounds(bounds); }; var mapHalved = false; function printMap(){ // Only halve the map if it hasn't already been halved if(!mapHalved){ halveMap(); } // It takes awhile to halve, so print after 2sec. setTimeout(function(){ print(); },2000); } function halveMap(){ // 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.height = window.getComputedStyle(map._container, null).height.split("px")[0]*0.4+"px"; // Halve size of each leaflet tile AND decrease its offsets by half var leaflets = document.getElementsByClassName("leaflet-tile"); for(var i=0; i < leaflets.length; i++){ element = leaflets[i]; element.style.width = element.style.width.split("px")[0]*0.4+"px"; element.style.height = element.style.height.split("px")[0]*0.4+"px"; element.style.left = element.style.left.split("px")[0]*0.4+"px"; element.style.top = element.style.top.split("px")[0]*0.4+"px"; } mapHalved = true; } </script> </body> </html>