Facebook and FourSquare API checkin calls with SVG in HTML tutorial

Download the src(github)
View the demo

This has been an idea in my head for awhile now. The app will get your checkins from Facebook and FourSquare and will show you on a map which states you have been to. It is very similar to the other apps I have created. Although I do use a new skill, manipulating SVGs.

I want to give a quick thanks to Theshibboleth who created the SVG of the US. I downloaded it from Wikipedia.

The SVG

SVG stands for Scalable Vector Graphics. The simplest definition is that it is an XML file that describes how to build an image. If you would like to know more as always you can use Wikipedia or do a quick Google search. SVG has support in HTML5 for inline and loading. I am using inline SVG for this project. To do that all you have to do is copy out all the XML from the SVG file and paste it into your page. This lets you treat the SVG just like HTML. By that I mean that you can apply CSS classes to change the look and use javascript to attach event listeners and/or modify attributes on the fly. Continue reading “Facebook and FourSquare API checkin calls with SVG in HTML tutorial”