230 lines
6.9 KiB
HTML
230 lines
6.9 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<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;
|
|
}
|
|
#navigation {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
z-index: 9999;
|
|
background-color: white;
|
|
font-family: Arial, Helvetica, sans-serif;
|
|
padding: 1em;
|
|
width: 20em;
|
|
overflow-y: auto;
|
|
opacity: 0.8;
|
|
}
|
|
#map {
|
|
height: 2550px; /* 8.5 inch at 300 dpi */
|
|
width: 3300px; /* 11 inch at 300 dpi */
|
|
}
|
|
#printbutton {
|
|
font-size: 1.5em;
|
|
font-weight: bold;
|
|
}
|
|
</style>
|
|
<style type="text/css" media="print">
|
|
@page {
|
|
size: 11in 8.5in;
|
|
margin: 0mm;
|
|
}
|
|
#navigation {
|
|
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>
|
|
<div id="navigation">
|
|
<ol>
|
|
<li>Wait for the (huge!) map to load, then click Print.</li>
|
|
<li>Check the print preview for missing chunks of map!</li>
|
|
<li>If there's some problem, just close this window and try again, or click Refresh.</li>
|
|
<li>
|
|
<a href="https://github.com/zyphlar/printmaps/issues">Report</a> any unsolvable issues, or
|
|
<a href="https://github.com/zyphlar/printmaps">Contribute</a> to make this tool better!
|
|
</li>
|
|
</ol>
|
|
<input type="button" value="Print" id="printbutton" onclick="printMap()" />
|
|
</div>
|
|
<div id="map"></div>
|
|
|
|
<script type="text/javascript">
|
|
|
|
// 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];
|
|
}
|
|
|
|
var query = "";
|
|
var map = L.map('map', {zoomControl: false}); //.setView([51.505, -0.09], 13);
|
|
|
|
if(params["q"]){
|
|
window.query = decodeURIComponent(params["q"]);
|
|
updateTitle(window.query);
|
|
}
|
|
|
|
// decode query param
|
|
if(params["b0"] && params["b1"] && params["b2"] && params["b3"]){
|
|
|
|
// Update the map
|
|
updateMap([[decodeURIComponent(params["b0"]), decodeURIComponent(params["b1"])],
|
|
[decodeURIComponent(params["b2"]), decodeURIComponent(params["b3"])]]);
|
|
|
|
// Figure out what the actual name of this place is
|
|
var latavg = (parseFloat(decodeURIComponent(params["b0"]))+parseFloat(decodeURIComponent(params["b2"])))/2;
|
|
var lonavg = (parseFloat(decodeURIComponent(params["b1"]))+parseFloat(decodeURIComponent(params["b3"])))/2;
|
|
doReverseLookup(latavg, lonavg, map.getZoom());
|
|
|
|
}
|
|
else {
|
|
alert("No boundaries given!");
|
|
}
|
|
|
|
function updateMap(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();
|
|
// 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.
|
|
setTimeout(function(){
|
|
print();
|
|
},2000);
|
|
}
|
|
|
|
function doReverseLookup(lat, lon, zoom){
|
|
|
|
// AJAX request for checking where we are
|
|
reverseLookup(lat,lon,zoom,function(xmlhttp) {
|
|
// Decode response as JSON
|
|
response = JSON.parse(xmlhttp.responseText);
|
|
|
|
if(response.address){
|
|
console.log(response.address);
|
|
console.log(zoom);
|
|
var loc = [];
|
|
// Set search textbox to where we think we are
|
|
if(response.address.suburb && zoom > 14){
|
|
loc.push(response.address.suburb);
|
|
}
|
|
if(response.address.city && zoom > 9){
|
|
loc.push(response.address.city);
|
|
}
|
|
else {
|
|
if(response.address.county && zoom > 9){
|
|
loc.push(response.address.county+" County");
|
|
}
|
|
}
|
|
if(response.address.state && zoom >= 8){
|
|
loc.push(response.address.state);
|
|
}
|
|
if(response.address.country && zoom <= 8){
|
|
loc.push(response.address.country);
|
|
}
|
|
window.query = loc.join(", ");
|
|
updateTitle(window.query);
|
|
setTileLayer(window.query);
|
|
}
|
|
else{
|
|
console.log("No reverse-lookup json");
|
|
setTileLayer(window.query);
|
|
}
|
|
});
|
|
}
|
|
|
|
function reverseLookup(lat,lon,zoom,callback){
|
|
xmlhttp=new XMLHttpRequest();
|
|
request = "http://nominatim.openstreetmap.org/reverse?format=json&lat="+encodeURIComponent(lat)+"&lon="+encodeURIComponent(lon)+"&zoom="+encodeURIComponent(zoom);
|
|
xmlhttp.open("GET",request,true);
|
|
xmlhttp.send();
|
|
xmlhttp.onreadystatechange = function(){
|
|
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
|
|
callback(xmlhttp);
|
|
}
|
|
};
|
|
}
|
|
|
|
function updateTitle(title){
|
|
// Generate title
|
|
document.title = query + " map";
|
|
}
|
|
|
|
function setTileLayer(query){
|
|
L.tileLayer('http://{s}.tile.cloudmade.com/4be2d4a8b7ae4a5e8ebc0558bb5d7db4/997/256/{z}/{x}/{y}.png', {
|
|
attribution: query+' map from PrintMaps.com; 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);
|
|
}
|
|
|
|
function halveMap(){
|
|
|
|
resizeScale = 0.281; // magic number that seems to work best in Chrome
|
|
|
|
// Halve size of map container (hopefully no redraw!)
|
|
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]*resizeScale+"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]*resizeScale+"px";
|
|
element.style.height = element.style.height.split("px")[0]*resizeScale+"px";
|
|
|
|
element.style.left = element.style.left.split("px")[0]*resizeScale+"px";
|
|
element.style.top = element.style.top.split("px")[0]*resizeScale+"px";
|
|
}
|
|
|
|
mapHalved = true;
|
|
}
|
|
|
|
</script>
|
|
|
|
|
|
<script>
|
|
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
|
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
|
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
|
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
|
|
|
ga('create', 'UA-42790423-1', 'zyphlar.github.io');
|
|
ga('send', 'pageview');
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|