HomeBlogBooksProjectsArchiveAboutlogo

A Curious Animal

Born to be curious, born to be animal!

Creating static maps in OpenLayers using PhantomJS

17 September, 2012
- 4 min read

Many times in a web mapping application it is desired to save a picture with the current map information.Those who works with Google Maps API has also the <a href="https://developers.google.com/maps/documentation/staticmaps/" Static Maps API, which works similarly than Google Maps but produces static images. if (system.args.length < 4 || system.args.length > 6) { console.log('Usage: rasterize_element.js URL filename selector paperwidth*paperheight|paperformat zoom'); console.log(' paper (pdf output) examples: "5in7.5in", "10cm20cm", "A4", "Letter"'); phantom.exit(1); } else { address = system.args1; output = system.args2; selector = system.args3; page.viewportSize = { width: 600, height: 600 }; if (system.args.length > 3 && system.args2.substr(-4) === ".pdf") { size = system.args3.split('*'); page.paperSize = size.length === 2 ? { width: size0, height: size1, margin: '0px' } : { format: system.args3, orientation: 'portrait', margin: '1cm' }; } if (system.args.length > 4) { page.zoomFactor = system.args4; } console.log("Loading page..."); page.open(address, function (status) { if (status !== 'success') { console.log('Unable to load the address!'); } else { window.setTimeout(function () { console.log("Getting element clipRect..."); var clipRect = page.evaluate(function (s) { var cr = document.querySelector(s).getBoundingClientRect(); return cr; }, selector); }

Taking web page screenshots

15 September, 2012
- 4 min read

Recently I have worked on system that requires to take web page screenshots. Not only a screenshot of the whole page but of a concrete element. Looking on the net I have found many solutions for this problems, which can be classified in to categories: if (system.args.length < 3 || system.args.length > 5) { console.log('Usage: rasterize.js URL filename paperwidth*paperheight|paperformat zoom'); console.log(' paper (pdf output) examples: "5in7.5in", "10cm20cm", "A4", "Letter"'); phantom.exit(1); } else { address = system.args1; output = system.args2; page.viewportSize = { width: 600, height: 600 }; if (system.args.length > 3 && system.args2.substr(-4) === ".pdf") { size = system.args3.split('*'); page.paperSize = size.length === 2 ? { width: size0, height: size1, margin: '0px' } : { format: system.args3, orientation: 'portrait', margin: '1cm' }; } if (system.args.length > 4) { page.zoomFactor = system.args4; } page.open(address, function (status) { if (status !== 'success') { console.log('Unable to load the address!'); } else { window.setTimeout(function () { page.render(output); phantom.exit(); }, 200); } }); }