I'm having an issue right now with my map where I need to export it as an image with the overlay layers. I found a solution to do so using html2canvas, however there is a bug with it where if you pan the map at all, when taking the screenshot the layers will not display properly in the screenshot from html2canvas like so...
Yet if I just change the center of my map with map.setView() it works fine. So my thought is, if I could just trigger the map to reload completely (including the layers) it would maybe overlay correctly. How can I trigger a Leaflet map to reload everything including the overlay layers?
I've looked through the documentation but haven't as of this second found a clear solution.
We had the same problem today. It also happened with an export by dom-to-image-more/lealfet-easy-print plugin.
Try to disable zoomSnap or try to deactivate the fractional zoom functionality.
Setting the view to some random place in the ocean and then changing it back worked.
function redraw() {
var lat_tmp = map.getCenter().lat;
var lng_tmp = map.getCenter().lng;
map.setView([-66.22149259832975, -1.142578125]);
console.log("Reloading...");
setTimeout(function () {
waitForTilesToLoad()
}, 50000);
map.setView([lat_tmp, lng_tmp]);
console.log("Done");
}
I have an overlay in openlayers and I am providing the autoPanMargin of 100 pixels. It will work fine Chrome but in IE 11 if we click on the right side it will not work.
According to the API, autoPanMargin is the margin (in pixels) between the overlay and the borders of the map when autopanning.
So here is the overlay how I am using in the code
var overlay = new ol.Overlay(/** #type {olx.OverlayOptions} */ ({
element: container,
autoPan: true,
autoPanMargin : 100
}));
Here is the sample. Check this in both chrome and IE by clicking on the right side of the screen. In Chrome it will pan. But in IE it will not. May I know the reason and possible solution for this behaviour.
Thanks for asking. This is a bug. I just created a fix, which will be included in the next release (> v4.0.1).
I am trying to use Charts.js to make the default line plot that they show in their example dynamically and put it in a div that I pop up on a user click. My code is like this:
this.chartCanvas = document.createElement('canvas');
this.div.appendChild(this.chartCanvas);
this.chartCanvas.style.height = '480px';
this.chartCanvas.style.width = '900px';
this.chartCanvas.width = 900;
this.chartCanvas.height = 480;
this.ctx = this.chartCanvas.getContext('2d');
this.chart = new Chart(this.ctx).Line(data);
When I make the call to "new Chart" my canvas height and width are set to 0 as I can see in the inspector. When I comment out this call my canvas has the proper width/height and displays as one would expect. If I manually change the canvas height/width in the inspector my chart still doesn't display.
My "data" object is just what I cut and paste directly from their line chart example here: http://www.chartjs.org/docs/#line-chart-example-usage
Can anyone provide some insight on where I might be going wrong, I am completely new to the library.
In my case the canvas needed to be wrapped inside an element with the CSS display: block;
It appears that the issue is that the canvas and all its parent nodes cannot have display none at the time the chart call is made so if you are using a chart in a popup you need to show the popup, construct the chart and then hide the popup.
As this Fiddle shows, if you try and construct a chart in a hidden div and then show it on a timeout it does not work.
If you instead show the div, make the chart and then hide the div, it does work.
http://jsfiddle.net/bjudheoq/4/
//This will break it
//this.div.style.display = 'none';
this.chart = new Chart(this.ctx).Line(data);
this.div.style.display = 'none';
The above fiddle works, but if you uncomment line 40 it does not.
I found an option:
options: {
responsive: false,
...
This makes conflict with default true. I don't know it works properly at the moment.
Ofcourse set the width and height to the canvas and its parent.
Your code works, with the exception of a typo. This line...
this.chartCanvs.style.width = '900px';
...should be this:
this.chartCanvas.style.width = '900px';
// ^ your code is missing this 'a'
And here's a JS Fiddle with that typo fixed: http://jsfiddle.net/dun5dhne/
Also, I strongly recommend opening your browser's developer console when you run into problems. This kind of thing is easy to catch in the console.
Can any body help me to find out, how to print dynamic graph as example generated by flot.
I tried this one but it's printing whole page, but I want only graph portion.
function printGraph(){
$('<img src="../images/button_refresh.png" alt="Print Graph" style="">').appendTo(controlholder).click(function (e) {
//Canvas2Image.saveAsPNG(document.getElementById('placeholder'));
//canvas.toDataURL("image/png");
window.print('placeholder');
});
}
This article describes how to copy the canvas to a normal img which can then easily be printed or saved as an image.
The important part:
img.src = canvas.toDataURL();
See the great answer below from Ignacio Correia for more details.
Launch a new window with only the graph or with alternate css similar to what google maps does when you print.
Attention this post have been edited, please see all possible solutions
From what I have searched and found you have only 2 choices or try to print the CANVAS, or EXPORT as an image or my idea is to separate the image from the content and try to print only the graph. Here is a FAQ by Flot, how can you export the image: Question Number 3
Q: Can I export the graph?
A: You can grab the image rendered by the canvas element used by Flot
as a PNG or JPEG (remember to set a background). Note that it won't
include anything not drawn in the canvas (such as the legend). And it
doesn't work with excanvas which uses VML, but you could try
Flashcanvas.
SOLUTION 1 - Export image:
Export image to computer and then print it
SOLUTION 2 - FLOT to CANVAS:
Saving canvas as images - By Mozilla
Save as Image Flot Plugin
Related question - Problem printing in IE8
SOLUTION 3 - My own, Modal printing
This is not the best solution by far but it works, here is a demo:
JSFIDDLE Normal Demo
JSFIDDLE Fullscreen Demo
Steps
Load Fancybox
Open using INLINE FRAME the graph
PRINT on callback after show
Reload the page after print to redesign the page
Here is the necessary code:
$(document).ready(function() {
$(".various").fancybox({
maxWidth : 800,
maxHeight : 600,
fitToView : false,
width : '70%',
height : '70%',
autoSize : false,
closeClick : false,
openEffect : 'none',
closeEffect : 'none',
afterShow : function() {
alert('You are about to print the graph!');
window.print();
},
afterClose : function() {
alert('We need to refresh the page!');
window.location.reload(false);
}
});
});
Extra
This related question is about exporting Flot to PDF, don't know if you may be interested: Export Flot to PDF
EDIT - WORKING SOLUTION
Here is a working demo of how to export the image: FLOT to IMAGE
You could hide the parts of the page you don't wish to print by using a separate stylesheet that has media="print". This would also allow you to tweak the final printed output of the graph itself, for example making it larger.
Found a solution by using html2canvas. First assign the container div to have id like "theChart".
<div class="box" id="theChart">
<div id="placeholder"></div>
</div>
Now we can create an image:
html2canvas($('#theChart')).then(function(canvas) {
image = canvas.toDataURL("image/png");
document.location.href=image;
});
This will also solve the problem when canvas.toDataURL() does not render axis labels.
I have a google maps on my page with a search pane I built myself which can be displayed and hidden at will. It covers like lets say 200 pixels of the map on a side. The thing is that when I resize my map or so the area where the pane overlaps is unrendered i.e the map doesn't render there for some reason.
Check out this link
In the Box type in lets say OMDB which is an icao code for an airport and press enter.
The results are shown and you see the pane. Now click on the full screen link and then click on the airports tab to make the panel go away - you see now that part of the map hasn't rendered at all...I have to drag the map around and that only partially renders that area. How can I fix it?
FYI I've run it on Google Chrome, Firefox and IE8 on Windows XP. Is there a way to like force complete rendering of a map or so? This is quite an erratic problem and could it be concerne with my code or is it a host issue? Or does Google just don't like me? :(
EDIT: See the big ugly patch on the side. Its unrendered area where the map should have been rendered as well. No amount of zooming in and panning is helping clear this :(
I'm not able to reproduce the issue you are having, but it looks similar to another issue I've seen with google maps.
It looks like you might be running afoul of the way google maps determines which tiles are in view. It calculates this only once, when the map is loaded into the div the first time, and if the div grows, then not enough map will be drawn. Fortunately, this is easy to deal with. any time the container may have resized, use the checkResize() method on the map instance, and the clipping area will be recomputed from the container's current size.
Yes, you MUST supply a real pixel height and width of the container DIV. This is in fact detailed in the Google API.
By using something like this:
<div id="map_canvas" style="width:500px;height:500px;"></div>
instead of
<div id="map_canvas"></div>
you'll be home free !
As far as I can see it works fine on OS X 10.6.2 in Google Chrome.
http://i33.tinypic.com/sfe3ah.png
Only problem is that Copenhagen Airport is nowhere near the location your application implies. And LAX is in the middle of the ocean ;-)
Edit:
I see your screenshot, and it would appear to me that somehow Google Maps does not render the part of the map that was covered by the search and search results pane, and afterwards the rendering is not triggered correctly upon hiding the search pane.
I haven't been able to find a decent render triggerer in the Google Maps API, but I think you should try something like programatically zooming in and out or moving the center of the map somewhere else and back, in order to maybe force the re-rendering of the map.
Alternatively you could try manually triggering some of the events that you think might set off a rerendering of the map, for example google.maps.event.trigger(map, 'resize').
I know these suggestions feel like a terrible hacking way of making it work, and I am highly unsure whether it would work, but it is my best shot ;-)
In Google Maps V3, the little bit of magic you need is documented here:
https://developers.google.com/maps/documentation/javascript/reference#Map
under events
Developers should trigger this event on the map when the div changes
size: google.maps.event.trigger(map, 'resize')
The trick is knowing when to call this which will be situational depending on your code. If you're using Bootstrap 3 Modals, this works beautifully.
$("#modal-map")
.modal()
.on("shown.bs.modal", function() {
google.maps.event.trigger(gmap, 'resize');
});
Where gmap is the google.maps.Map object you created.
I faced same issue when i tried to load google map in dialog. It was like google map was not rendered properly. so i find out below solution which may be solve your problem.
I have triggered google map resize event after initialize dialog please check below snipped code.
google.maps.event.trigger(map, 'resize', function () {
// your callback content
});
Example:
I have loaded map by ajax call then initialized dialog and at last triggered google map resize event.
$.ajax({
url:"map.php",
type:"POST",
success:function(data){
$("#inlineEditForm").html(data);
$('#inlineEditPopUp').dialog('open');
google.maps.event.trigger(map, 'resize', function () {
// your callback content
});
}
});
If you are using the jQuery plugin goMap, then you should use:
google.maps.event.trigger($.goMap.map, 'resize');
Although you should wrap this in an event so that it runs when the map is shown.
This how i do it in my code :
$(document).on('click', '#mapClicker', 'initmap', function() {
setTimeout(function() {
google.maps.event.trigger($.goMap.map, 'resize');
$.goMap.fitBounds();
}, 100)
});
I know this question is a bit old, but I just came across a similar problem. However, in my case, I was setting the map to be loaded from the body (for a full screen effect) within an iframe.
Like Jay mentioned on his answer a width and height must be specified which I had not done then.
I changed:
<body style="margin:0;">
to:
<body style="margin:0;width:100%;height:100%">
and now it loads perfectly on Chrome, Firefox and Internet Explorer 10.
Hopefully this helps anyone out there who also came across this problem. You must specify width and height for it to work across different clients.
Regards
I had the same problem and solved it simply by changing the width of the containing div to "px" instead of "%" (e.g width="700px" instead of "80%"). I guess that google can do better size calculation that way... I don't guarantee for this but it helped me
I had this issue and I found the only solution (in my instance) was to trigger the resize inline after the element. I can't say why but I found a thread where somebody also had this solution. (sorry no ref.) My setup was a tad different; it was from a jQueryMobile injected page so the late instantiation may have something to do with my issue. Hopefully this helps someone.
<div id="my-map"></div>
<script type="text/javascript">
$('#my-map').height($("#my-map-container").height());
$('#my-map').width($("#my-map-container").width());
google.maps.event.trigger($('#my-map'), 'resize');
</script>
In my case, same issues for Mac devices on:
Safari 5.1.7 (Os Windows 10[Sorry])
Safari 5.1 (Ipad 1 [Old Sorry])
Safari 10 (Iphone 6 Plus)
Here my solution work for me:
1) capture Browser width detect.min.js
2) change attr style width parameter
3) resize map
/* Of course insert detect.min.js and Jquery in your HTML ;)*/
var user = detect.parse(navigator.userAgent);
var browserFamily=user.browser.family;
var browserVersion=user.browser.version;
if ( browserFamille=="Mobile Safari" || browserVersion.substr(0,3)=="5.1") {
canvasWidth = $(window).width(),
$(".macarte").attr("style","width:"+canvasWidth+"px")
google.maps.event.trigger(map, 'resize');
}
/* browserFamily returns "Mobile Safari" for tablet and mobile devices; "Safari" for desktop devices */
I faced the same issue when setting the map centre manually. I solved it by the below code:
google.maps.event.trigger(map, "center_changed");
function initialize(lon,lat) {
var largeLatlng = new google.maps.LatLng(lon,lat);
var largeOptions = {zoom: 18, center: largeLatlng,mapTypeId: google.maps.MapTypeId.ROADMAP};
var largeMap = new google.maps.Map(document.getElementById("map"), largeOptions);
var largeMarker = new google.maps.Marker({position: largeLatlng, map:largeMap, title:"Cherrytrees"});
google.maps.event.addListenerOnce(largeMap, 'idle', function(){
google.maps.event.trigger(largeMap, 'resize');
largeMap.setCenter(largeLatlng);
});
largeMarker.setMap(largeMap);
}