Saving a Google API-generated dynamic map to a static image
Solution 1
I'm working on a project with a similar requested function. I need to make a report which needs to contain some data and additionally some maps (heath, cluster and markers). At this time I'm doing it on the client side, with html2canvas, but like you, I would like to do it server side.
google.maps.event.addListener(DivMap, 'tilesloaded', function(){
setTimeout(function(){ //Trying to ensure full map render
Map2Image("DivMap","store_mapImage.php","png");
},1000);
});
And this function
function Map2Image(MapDiv,phpup,format){
var transform=$(".gm-style>div:first>div").css("transform")
var comp=transform.split(",") //split up the transform matrix
var mapleft=parseFloat(comp[4]) //get left value
var maptop=parseFloat(comp[5]) //get top value
$(".gm-style>div:first>div").css({ //get the map container. not sure if stable
"transform":"none",
"left":mapleft,
"top":maptop,
})
}
html2canvas(document.getElementById(MapDiv),{
useCORS: true,
onrendered: function(canvas){
$.post(phpup,{image:canvas.toDataURL("image/"+format)});
$(".gm-style>div:first>div").css({
left:0,
top:0,
"transform":transform
});
}
});
}
This function is based on this answer.
NOTE: I know is a very old post (from 2014), but I'm posting this because I think it can be useful for someone. Even better, someone can give us a best solution.
Solution 2
It is possible to take screenshots programatically rather than manually. I do this on my charts and graphs site. The graphs are generated client side using JavaScript but I need thumbnail images created from them.
I'm using Java instead of PHP, but it should be similar.
- Install xvfb (X virtual frame buffer) so that Firefox can run on a headless server. Start it as a daemon configured as screen 99.
- Install a known version of firefox (eg /opt/firefox33/). I've found that selenium drivers are often not compatible with the newest release of firefox until the libraries get updated. Installing a known version gives me a lot more control over the upgrade process
- When you need a screenshot, have your code set the screen environment variable and start selenium with your installed firefox.
Here is an article about getting started with selenium from PHP that includes a screenshot example.
Related videos on Youtube
richhallstoke
Please see LinkedIn profile: https://www.linkedin.com/in/richardhall
Updated on September 18, 2022Comments
-
richhallstoke over 1 year
I have a series of coordinates data which I plot onto an API-generated heatmap visualization using Google Maps API. The data changes daily, and I'd like to capture the heatmap and save it as a PNG or JPG image programmatically from within PHP so that a particular day's map can be recalled without regenerating the map and a number of maps could be sequenced together to show the changes animated over a given time period. I also need to be able to export a PDF report including a heatmap and this obviously would not work with a dynamic webpage frame.
Does anyone know:
of a way to save a Google-generated heatmap to a static PNG or JPG file, other than manually taking a screenshot and then cropping it to the bounds of the map? The solution needs to work in a GUI-less shared hosting environment as it will be deployed to many users with many different hosting configurations, the majority will not be skilled Linux experts or running a VPS; or
of an alternate tool for plotting coordinates onto a map and producing visualisations from this such as heatmaps, that can be saved into PNG or JPG files, from within PHP, and using only freely available PHP classes or default-installed PHP modules? (this is my prefered route if anyone has any tools in mind)
-
dstonek over 5 years
-
richhallstoke over 9 yearsHi Stephen, I've tried playing with Selenium but found it easier to just take the screenshots manually in the end. Ideally I'm looking for a solution that requires nothing more than PHP classes and modules normally installed so that it can be included in software that will be deployed by many different people without requiring a very prescribed hosting setup. The majority of end-users will likely be on shared hosting not VPS.
-
richhallstoke over 9 yearsI've just edited the question to make the scope/requirements more clear. Thank you for your suggestions.