This is really informative, and very well done to boot. Great work! The colour scheme struck me as a little odd, though. It goes from darker (more migration) to lighter (less migration) but then abruptly to dark grey (no migration), making it harder to interpret at first glance. It would be nice if it were somewhat monotonic: bright colour = more migration, darker/duller colour = less migration, dark grey = no migrat…
HTML5 Map of the the World Migrations using SVG, Raphael.js and offline storage
21–30 of 67 posts
Re: HTML5 Map of the the World Migrations using SVG, Raphael.js and offline storage
#22Very nice. I was wondering how difficult it would be to capture a particular state of the map (say UK departures) as a PNG for embedding or generating a PDF. Could you do that on the server side?
1) If you're using a browser that supports SVG (basically, not IE), Raphael will generate the images as SVG nodes in your DOM tree. You can just grab that entire section of the DOM and send the SVG markup to the server where you render it using the image library of your choice.
2) If you have to support IE the above method won't work. Only IE9 has any SVG support and I've heard reports that it's spotty. In these cases, Raphael falls back on VML, an older MS extension that provides more or less the same experience. Unfortunately, I don't know of a server side generation library that supports VML. What's worse, in my testing, IE won't even print the VML image so you can't even use a PDF writer in the browser.
So, the simplest workaround is use the VML fallback in IE for display but when the user wants to download a final version, generate the same drawing as HTML + Javascript on the serverside and then use wkhtmltopdf on the html. (For those who don't know, wkhtmltopdf is an awesome tool that uses a headless webkit browser to convert HTML files to shockingly good PDFs).
As long as the javascript is triggered on load, wkhtmltpdf will include it in the resulting pdf. This doesn't always work perfectly but odds are it'll work for you.
As an added bonus, SVG bits also seemed to be rendered as vector in the actual PDF. This also prevents any chance of the server side image rendering slightly differently from the user preview.
3) If the wkhtmltopdf method isn't rendering properly or is too exotic for your server, you can try using the great raphael.serialize plugin ( https://github.com/jspies/raphael.serialize ). This works around the SVG/VML problems by exporting the data as a JSON structure. This can be re-rendered inside raphael easily but exporting to PNG is trickier. You can convert the JSON to SVG and render that as in method one, Ben Barnett has a small code example on how to do that: ( http://www.benbarnett.net/2010/06/04/export-svg-from-raphael... ) but there's no complete library for doing this yet so you'll have to write some extra bits yourself. If you do write a library for this, please open source it so I don't have to do it too. ;)
Also, Raphael 2.0 is being launched at jsconf.eu next month so it may have a more clever approach for this but I haven't looked into it yet.
Re: HTML5 Map of the the World Migrations using SVG, Raphael.js and offline storage
#23Re: HTML5 Map of the the World Migrations using SVG, Raphael.js and offline storage
#24Really Responsive too and it all works in Opera or seemed to anyway, so many developers forget about Opera because it doesn't have the same amount of marketing as the others. But anyway Sweet Build!
Re: HTML5 Map of the the World Migrations using SVG, Raphael.js and offline storage
#25Re: HTML5 Map of the the World Migrations using SVG, Raphael.js and offline storage
#26Re: HTML5 Map of the the World Migrations using SVG, Raphael.js and offline storage
#27Re: HTML5 Map of the the World Migrations using SVG, Raphael.js and offline storage
#28Very nice. I was wondering how difficult it would be to capture a particular state of the map (say UK departures) as a PNG for embedding or generating a PDF. Could you do that on the server side?
I've been looking into a few ways to do exactly that with Raphael. The short answer is that it's possible but a little tricky. I've found three methods so far: 1) If you're using a browser that supports SVG (basically, not IE), Raphael will generate the images as SVG nodes in your DOM tree. You can just grab that entire section of the DOM and send the SVG markup to the server where you render it using the image libra…