From e52b7506f6345b6c0bc7669aef17fabd2f59092f Mon Sep 17 00:00:00 2001 From: Elliott Rose Date: Fri, 10 Mar 2023 13:08:32 +0100 Subject: [PATCH] Fix issue with logo being out of place on fullscreen or map pan. --- assets/download-img.js | 84 +++++++++++++++++++++--------------------- 1 file changed, 42 insertions(+), 42 deletions(-) diff --git a/assets/download-img.js b/assets/download-img.js index fa7e0b3..b811e09 100644 --- a/assets/download-img.js +++ b/assets/download-img.js @@ -1,57 +1,57 @@ $(document).ready(function () { - $(document).on('click', "#btn-frame-download", function () { + $(document).on('click', "#btn-frame-download", function () { //first add the logos addLogos(); - var element = document.getElementById("graph-collection"); // global variable - if (element == null) { - element = document.getElementById("prob-graph"); // global variable - if (element == null) { - element = document.getElementById("was-graph"); // global variable - } - } - getCanvas(element); + var element = document.getElementById("graph-collection"); // global variable + if (element == null) { + element = document.getElementById("prob-graph"); // global variable + if (element == null) { + element = document.getElementById("was-graph"); // global variable + } + } + getCanvas(element); removeLogos(); - }); + }); }); function getCanvas(element) { - html2canvas(element, { - scrollX: 0, - scrollY: 0, - allowTaint: true, - useCORS: true, - async: true, - windowWidth: element.width, - windowHeight: element.height, - logging: true, - imageTimeout: 0, - ignoreElements: function( element ) { - if( element.classList.contains( 'leaflet-control-zoom' )) { + html2canvas(element, { + scrollX: 0, + scrollY: 0, + allowTaint: true, + useCORS: true, + async: true, + windowWidth: element.offsetWidth, + windowHeight: element.offsetHeight, + logging: true, + imageTimeout: 0, + ignoreElements: function( element ) { + if( element.classList.contains( 'leaflet-control-zoom' )) { return true; - } - } - }).then(function (canvas) { - saveAs(canvas.toDataURL(), 'image.png'); - }); + } + } + }).then(function (canvas) { + saveAs(canvas.toDataURL(), 'image.png'); + }); } function saveAs(uri, filename) { - var link = document.createElement('a'); - if (typeof link.download === 'string') { - link.href = uri; - link.download = filename; + var link = document.createElement('a'); + if (typeof link.download === 'string') { + link.href = uri; + link.download = filename; - //Firefox requires the link to be in the body - document.body.appendChild(link); + //Firefox requires the link to be in the body + document.body.appendChild(link); - //simulate click - link.click(); + //simulate click + link.click(); - //remove the link when done - document.body.removeChild(link); - } else { - window.open(uri); - } + //remove the link when done + document.body.removeChild(link); + } else { + window.open(uri); + } } //Add logos top map for screen shot @@ -62,7 +62,7 @@ function addLogos() { } else { var img = new Image(); img.src = './assets/images/logoline.png'; - img.style.position = 'fixed'; + img.style.position = 'absolute'; img.style.maxWidth = '35%'; img.style.width = 'auto'; img.style.maxHeight = '10%'; @@ -74,7 +74,7 @@ function addLogos() { img.setAttribute('id','logos'); // Get the element to overlay the image on - var div = document.querySelectorAll('.leaflet-map-pane')[0]; + var div = document.querySelector('.leaflet-control-container'); // Append the image to the element div.appendChild(img); -- GitLab