Cagintranet Web Design » API

Create Google Static Area Maps with Latitude & Longitude Boundaries

Chris Cagle — Wed, 10 Feb 2010 18:17:49 +0000

This tutorial shows you how to use the little known Google Static Maps feature to outline a specific boundary such a zip code or a city. It requires that you have your own Google Maps API. Above is the output image generated by the code below.

This is the PHP code that is needed. The tricky part is finding the latitude and longitude points of the particular area you want to draw. I got my data for BuyAPittsburghHome.com systematically from PushPin’s API.

The PHP


# Google Maps API Key (replace with your key)
$apikey="ABQIAAAA_6h1iP7xkNWbJaJtdQExbxQoasim_Ec9007jwQbCPHO_oeeE-RTam6RjbglJrcjrbo6lqh5Wmpn8uQ";

# $latlon is a variable pulled from MySQL that stores all the latitude and longitude points of a particular area.
# In your case, you would probably have a database connection followed by sql that pulls the respective data needed.
# Since I cannot tell you where/how to pull the data from your own database, I am just going to set it here manually.
$latlon = 'a:21:{i:0;a:2:{i:0;s:8:"-80.0614";i:1;s:7:"40.5059";}i:1;a:2:{i:0;s:8:"-80.0504";i:1;s:7:"40.5123";}i:2;a:2:{i:0;s:8:"-80.0453";i:1;s:7:"40.5062";}i:3;a:2:{i:0;s:8:"-80.0336";i:1;s:7:"40.5066";}i:4;a:2:{i:0;s:8:"-80.0337";i:1;s:7:"40.5023";}i:5;a:2:{i:0;s:8:"-80.0456";i:1;s:7:"40.4999";}i:6;a:2:{i:0;s:8:"-80.0452";i:1;s:7:"40.4885";}i:7;a:2:{i:0;s:8:"-80.0518";i:1;s:7:"40.4837";}i:8;a:2:{i:0;s:8:"-80.0791";i:1;s:7:"40.5023";}i:9;a:2:{i:0;s:8:"-80.1205";i:1;s:7:"40.5151";}i:10;a:2:{i:0;s:6:"-80.11";i:1;s:6:"40.531";}i:11;a:2:{i:0;s:8:"-80.1076";i:1;s:7:"40.5283";}i:12;a:2:{i:0;s:7:"-80.111";i:1;s:7:"40.5271";}i:13;a:2:{i:0;s:8:"-80.1056";i:1;s:7:"40.5208";}i:14;a:2:{i:0;s:8:"-80.0926";i:1;s:7:"40.5133";}i:15;a:2:{i:0;s:8:"-80.0932";i:1;s:7:"40.5178";}i:16;a:2:{i:0;s:8:"-80.0879";i:1;s:7:"40.5212";}i:17;a:2:{i:0;s:8:"-80.0753";i:1;s:7:"40.5205";}i:18;a:2:{i:0;s:8:"-80.0718";i:1;s:7:"40.5233";}i:19;a:2:{i:0;s:8:"-80.0611";i:1;s:7:"40.5201";}i:20;a:2:{i:0;s:8:"-80.0614";i:1;s:7:"40.5059";}}';

# unserialize the code taken from your mySQL database. If your data is not serialized, comment this line out
$bounds = unserialize($latlon);

if ($bounds) {
	# cycle thru each lat/lon pair, concatenate and make pipe-delimited
	foreach ($bounds as $point) {
 		$latlon .= "%7C".$point[1].",".$point[0];
	}

	# build the image url
	$path = "color:blue|weight:4|fillcolor:black". $latlon;
	$MapAreaImage = "http://maps.google.com/maps/api/staticmap?path=".$path."&size=500x300&sensor=false&key=".$apikey;
}

The HTML

This is the code that then displays that drawn out area map image in HTML:

" alt="" />

The Output

The PHP and HTML combined will generate the code below as the image source. A live example of this is the header image of this post (Zip Code 15202 in Pittsburgh, PA).

How to Create your own BlogCatalog Widget via their API

Chris Cagle — Thu, 21 Aug 2008 04:00:25 +0000

When releasing the first version of my WP-SocialCount WordPress plugin a while back, an interested visitor asked if I would be so kind as to include a way to reshape the BlogCatalog widget with the next release of the plugin. I had every intention of doing that until I saw just how much would have to be changed in my plugin to accommodate this – so I decided to write this instead.

Current BlogCatalog Widgets

Currently, the list of widgets that BlogCatalog provides it’s users is pretty meager. Hopefully this tutorial will allow it’s members to promote themselves a little easier (and in better style!) than before.

Step 1: Get your API Key

To get your API key, all you need to do is sign in, and go to it’s developers page. A couple sections down, you will see something like the image below. Write down your key and save it for later.

Step 2: Construct the API Calls

In order to make the API call, we need to know the structure that BlogCatalog requires the calls to be in. Looking at their developers page, we see that they only have two types of calls. One is for gathering User data and the other is for getting Blog data.

We are going to start off using the User data api call because this should give us quite a bit of the information we need right off the bat.

The structure as outlined by their documentation is: http://api.blogcatalog.com/getinfo?bcwsid=[apikey]&username=[username]

Looking over this call I see that the only thing we don’t currently have is the [username]. Remember, we got the [apikey] back in Step 1.

Step 3: Set Initial Variables

To make our coding as easy as possible, lets set some variables right off the bat so that we can reference them anytime we need their data later on.

FYI: I will be adding each new step on top of each previous step so that you can see how we build the application…

//Setting variables
$api = "xxxxxxxxxx";		//Your API key
$username = "ccagle8"; 	//Your username

FYI: I X’d out my api key, but you can easily insert your own key in here…

Step 4: Use PHP to Capture Your Data

Since BlogCatalog returns all their data in the form of XML (their documentation didn’t state this, but it’s the format their examples are in, so let’s run with that) we will use the simplexml_load_file php function to load the file into the variable $userfeeddata.

//Setting variables
$api = "xxxxxxxxxx";		//Your API key
$username = "ccagle8"; 	//Your username

//Pulling API user feed data
$userfeeddata = simplexml_load_file ("http://api.blogcatalog.com/getinfo?bcwsid=$api&username=$username");

Step 5: Pull That Data Into Variables

After loading that file of data into our $userfeeddata variable, we can start pulling the information we need out. You can see below that I am pulling the avatar and url from this data. How I realize the hierarchy of the data is done by doing a print_r command on the $userfeeddata variable.

print_r ($userfeeddata);

I usually add this line of code in right after we load the data, and then comment it out once I have everything that I need. After analyzing the print_r output, this is what I came up with:

//Setting variables
$api = "xxxxxxxxxx";		//Your API key
$username = "ccagle8"; 	//Your username

//Pulling API user feed data
$userfeeddata = simplexml_load_file ("http://api.blogcatalog.com/getinfo?bcwsid=$api&username=$username");
//print_r ($userfeeddata);

//Loading that data into variables for later
$avatar = $userfeeddata->result->avatar;
$url = $userfeeddata->result->weblogs->weblog->url;

Step 6: Use this Data for the Second of our API Calls

back in Step 2 we found that BC gives us two types of API calls. We already used the User data feed, but now we will make use of the Blog data feed: http://api.blogcatalog.com/bloginfo?bcwsid=[apikey]&url=[blog url]

Just as before, we already have the [apikey] value, but we don’t yet have the [blog url]. Actually we do, and it is in the form of $url, which we got in Step 5. So, lets make another call to the API, only this time using the one to get Blog information:

//Setting variables
$api = "xxxxxxxxxx";		//Your API key
$username = "ccagle8"; 	//Your username

//Pulling API user feed data
$userfeeddata = simplexml_load_file ("http://api.blogcatalog.com/getinfo?bcwsid=$api&username=$username");

//Loading that data into variables for later
$avatar = $userfeeddata->result->avatar;
$url = $userfeeddata->result->weblogs->weblog->url;

//Pulling API blog feed data
$blogfeeddata = simplexml_load_file ("http://api.blogcatalog.com/bloginfo?bcwsid=$api&url=$url");

Using the print_r command again, I find a some more data that I want to pull out to include in our new widget.

//Setting variables
$api = "xxxxxxxxxx";		//Your API key
$username = "ccagle8"; 	//Your username

//Pulling API user feed data
$userfeeddata = simplexml_load_file ("http://api.blogcatalog.com/getinfo?bcwsid=$api&username=$username");

//Loading that data into variables for later
$avatar = $userfeeddata->result->avatar;
$url = $userfeeddata->result->weblogs->weblog->url;

//Pulling API blog feed data
$blogfeeddata = simplexml_load_file ("http://api.blogcatalog.com/bloginfo?bcwsid=$api&url=$url");

//Loading that data into variables for later
$tags = $blogfeeddata->result->weblog->tags->tag;
$categories = $blogfeeddata->result->weblog->categories->category;
$bcurl = $blogfeeddata->result->weblog->bcurl;
$views = $blogfeeddata->result->weblog->views;
$rank = $blogfeeddata->result->weblog->rank;
$friends = $blogfeeddata->result->weblog->neighborhood->user;
$viewers = $blogfeeddata->result->weblog->recent_viewers->user;

Step 7. Echoing the Data back to the Page

We have all our data mining complete, so now we can focus on sending this it out to our web page.

Here we are echoing out some of the user information that we received during the two API calls we did. You can see that we are showing your Avatar, which is linked to your BlogCatalog page, and your site’s number of views and rank.

//Echos out User Information
echo "
";
echo "Views: ". $views ."
";
echo "Rank: ". $rank ."
";

The next data we want to show are the tags and categories of the blog in question. To do this, we can use a foreach loop that will cycle through each tag and category and create a link back to the BlogCatalog page for each one.

Hint: You can see that I had to sanitize the variables by converting all letters to lowercase and replace spaces with underscores in order for them to work correctly in the URL.

//Cycle through and display tags
	echo "Tags:";
	$set = 0;
	foreach ($tags as $i => $tag) {
		if($set < $limit){
			echo "". $tag ." ";
		}
		$set  ;
	}

	echo "
";

	//Cycle through and display categories
	echo "Categories: ";
	$set = 0;
	foreach ($categories as $i => $cat) {
		if($set < $limit){
			echo "". $cat ." ";
		}
		$set  ;
	}

DEMO: View the final outcome of this tutorial (with a little bit of CSS and HTML markup added, which you can see in the header section of the page when you do a “view source”).

SOURCE CODE: Download the full PHP source code.

Creating a Simple Online Application using the Flickr API

Chris Cagle — Fri, 18 Jul 2008 04:00:40 +0000

Photo Credit: *dans

The Flickr API is one of the most widely used APIs out there. In this article I will show you how to build your own simple online application using PHP and the Flickr API.

The sample online application we build today will be one that takes a Flickr image URL (e.g. http://www.flickr.com/photos/dans180/854998249/), then outputs the code needed for you to properly display the photo’s credit. Remember, every time you use a Creative Commons licensed photo from Flickr, you need to provide the proper attribution and that is usually considered a link back to the photo while mentioning the photographer’s name. This is an example of the kind of output that we hope to get:

Real Link:
Photo Credit: *dans

HTML Code Output:

Photo Credit: *dans

Getting Started

First off, you will need to get an API key. Get one here and hold onto it for later.

Next, we need to build the form that our visitors can input the URL into. This should be pretty basic stuff for most of us.

The HTML Form


	
		
		Flickr Photo URL:

The PHP if-statement

This form is setup to POST the data back to itself for processing. To handle this, we need to make use of an if-statement to check to see if the form is submitting data back to itself, or if it just needs to show a blank form to a new visitor.

The PHP evaluation isset allows us to determine whether or not a variable is set. In our example, we check to see if the variable ‘photo‘ is set – because that is the name of the input field where the visitor enters the Flickr image’s URL.

If the variable ‘photo‘ is set, the next step is to initialize some variables. The first variable is the image URL that the user submitted into our form, while the second will be the API key we got from Flickr.

In order to make the URL submitted usable to us, we need to split it up into its relevant sections. I use the PHP function explode to help break the URL up by the character ‘/’. All we need from this URL is the photo id, and we can see below is the 6th of these so called sections.

PHP FACT: PHP starts it’s count with 0.

Structuring the Flickr API

After turning the contents of the photo id section into it’s own variable, we now have everything we need to start the API call.

After searching the Flickr site a while, I found the flickr.photos.getInfo method – and judging by the example it displays, it looks to be exactly what we want. Notice we already have both of the required variables to make this call: $photo_id and $api_key.

Next, we need to find out what the correct call syntax that Flickr requires in order to get data back from their API. Luckily, they are nice enough to give us an example PHP call here. This test gives us the insight needed as to what an API call should be structured like:

http://www.flickr.com/services/rest/?method=flickr.test.echo&format=php_serial&api_key=eaab5c513e33c01544385641ff9af42f

After we modify their example to use the method flickr.photos.getInfo, we also need insert a new argument for the photo_id. Our newly structured API call now looks like this: (changes are in red)

http://www.flickr.com/services/rest/?method=flickr.photos.getInfo&format=php_serial&photo_id=$photo_id&api_key=$flickr_api_key

You can test the validity of our newly structured call by pasting it into any web browser’s address bar. You will get back real data if it works, or errors when it fails.

Using the Data from the Flickr API

Once we get a working API call, we need to have our application read in the data that is returned. To import this data into our web app, we use the function file_get_contents, then re-format it using the unserialize function.

Since all good coders do error checking, we also need to run a quick check to see if the API call returned no data (an error). We can do so with this simple line:

$status = $flickroutput['stat']; //Extracts the 'stat' value from the data returned

Now, with a second if-statement, we check to see the variable $status‘s value, and if it doesn’t contain the word ‘fail‘ then we know we made a successful call. Putting it all together, it looks like this:

try again."; //A bad URL was entered into the form
	};

} else { //The form was not submitted

};
?>

Once we know we’ve made a successful API call, we need to extract the ‘username‘ of the photo’s owner. We do this with this line:

$flickr_user  = $flickroutput['photo']['owner']['username'];

… but this is sometimes not an easy thing to figure out. I have found the best way to find out what to extract is by analyzing the unserialized data we get back from Flickr. PHP allows us to look at the data in an easier to read format by using print_r.

print_r ($flickroutput)

This is probably the hardest part of using the API. If you insert the print_r command into your PHP document right after we unserialize the Flickr data, we can easily see the different levels of the data structure.

Hint: You can view the output of our print_r command here. The different tiers are highlighted in red.

The way our data extract works is ‘photo’ is the first level within the $flickroutput data. The next tier down is ‘owner’, which houses the last level called ‘username’ which holds the data we need. That’s how we get $flickroutput['photo']['owner']['username'] — each [] is referencing it’s own tier.

Output the Data to the Visitor

Once we have the $flickr_user variable set with this extract, we are ready to output our finished code. We will output it twice: One as an example “live” link, and the other will be the raw HTML code that the visitor can input into his or her site.



	Preview: 
	Photo Credit: 
	HTML Code:
			<cite>
			Photo Credit: <a href="" title="Photo Credit: "></a>
		</cite>
	

	try again."; //A bad URL was entered into the form
	};

} else { //The form was not submitted

};
?>

Putting it all Together

Now that we have the form and the PHP sections completed, we need to put it all together into an application page. You can download the example page here, or you can take a look at the working example I’ve put up.