As I worked on the tool, I learned a lot, and I wanted to share some of my new-found knowledge with everyone. In the following post (including a video, yay!) I will show you how to create a county overlay on a Google Map.

The Video

You can watch a video of me explaining everything below. In it I explain things in more detail.

The Basics

To see the final product we are aiming for, click here.
To begin, we need to initialize the Maps API with the following:

<script src="http://maps.google.com/maps/api/js?sensor=true"></script>

The “?sensor=true” parameter tells the API whether it should try and take advantage of any GPS sensors that might exist on the device accessing the map. We won’t be using this function, but its not a bad thing to include for the future.

Next, we need to embed a map on our page. We can do this by making the following function and firing it using the body onload method.

function loadMap(){

	var myOptions = {
			zoom: 9,
			center: new google.maps.LatLng(34.0522,-118.2437),
			mapTypeId: google.maps.MapTypeId.TERRAIN
		};

	var map = new google.maps.Map(document.getElementById("map"), myOptions);

}

This code sets zoom, center, and type parameters for the map and then creates the map by targeting an element with an id of “map” (in this case we used a div).

Getting County Area Data

The Maps API has not function to automatically create overlays in the shape of state counties. It can, however, take a set of LatLng coordinates and create a polygonal overlay. After a little Googling. I came across the U.S. Census Bureau Cartographic Boundary Files. They give you nicely organized lists of coordinate areas of every county in America (and a ton of other boundary types, like school districts, voting areas, and zip codes). The only problem is that the data isn’t ready for the Maps API.

To convert it, I went through of series of steps involving find and replace, spreadsheet manipulation, and the terminal. It sounds confusing and long, but its still a pretty straightforward process. For the textual examples, I have used only a few datapoints to conserve space. Below is a flowchart of the steps:

Using the Data

Phew! Now we have the data in a usable form, it’s time to store it in our code. The best way to do this is to create an external file called data.js and input the data into it as a variable with the name rawData, like so:

var rawData =" 42.0038450000000,123.230762000000;42.0054460000000,123.192361000000;42.0080360000000,123.154908000000;";

Don’t forget to include this file in your page header. Next, we need to iterate through the data and create an array of LatLng objects. We will do this in a function called createOverlay():

function createOverlay(){

				var overlayCoords = new Array();

				var processedData = rawData.split(";");

				for (var i=0; i

This code splits the data into array elements by searching for semicolons. It then takes each element of the new array and splits it again into latitude and longitude by finding the comma. The coordinates are stored in a new google.maps.LatLng object and pushed onto an array called overlayCoords. This array is then parsed to a new google.maps.Polygon

object along with some other parameters. This object is returned out of the function.

Putting it All Together

Now we have our function for creating overlays, we can fire it by placing the following two lines of code in the loadMap function after the map is created.

var laCounty = createOverlay();
laCounty.setMap(map);

This code creates a variable called laCounty that is set equal to the overlay created by the createOverlay function. The variable is then placed on the page. The results look something like this:

Adding a Clear Function

v3 of the Google Maps API has not easy way to clear overlays on a map. This is somewhat of a pain, especially if you are going to display multiple county overlays in one session. The good news is there is a relatively simple workaround. Every time you place an overlay on the map, push it onto a special array to keep track. When you want to clear the map, iterate through the overlay array placing each element on the map as null (essentially deleting it). Finally clear the overlay array to start fresh. If it sounds confusing, watch the video as I explain it and show its use with a nice button.

Finishing Up

I hope this has been helpful for someone out there! If you would like to view a live example of this all in action, click here. Let me know in the comments if you have any questions or ideas on things you would like me to explain in the future!

It turns out you can take this technology found in Google Docs (and other areas of Google for that matter) and use it on your own site by embedding the converter tool in an iFrame. The code below demonstrates this:

<iframe src="http://docs.google.com/gview?url=http://elliottmediagroup.com/PATH_TO_PDF.pdf&embedded=true" frameborder="0"></iframe>

This simple chunk of code generates the following result:

So all you have to do is include this iFrame with the path to your PDF (which you could dynamically generate using a ton of techniques) and voila, you have a PDF displayed on your page! You can of course style up the frame with width and height and other attributes. Its a pretty sweet solution!

I don’t want to take credit for coming up with this technique all by my lonesome. I found a great thread on StackOverflow where people had this exact issue, and someone came up with this great solution. Thanks!

One of the most annoying things about using OSX’s built in screenshot tool is that there is no easy way to grab content from a webpage that goes beyond ‘the fold’; the area you have to scroll to see in your browser. The only way to do this is to take two or more screenshots, stich them together in Photoshop, and then save the result. That’s a time consuming process that is anything but efficient!

Enter webkit2png. This is a command line tool that allows you grab full page screenshots without the labor of stitching. I know its command-line based, but don’t let that scare you; it’s really easy to use. You just download one file from the developer’s website and then run the following line of code:

python /path/to/webkit2png.txt.sh http://thedomainyouwanttocapture.com

That’s it. webkit2png will connect to the site, figure out its dimensions, and generate a png for you. It also by default will generate a thumbnail image (very useful for portfolio galleries) and a clipped thumbnail (useful if you want all your thumbnails in a portfolio to have the same dimensions).

This is a simple solution for an all-to-common problem. Thank you very much, Paul Hammond, for this awesome tool!

A Single App

It is interesting that the Mac App Store is a single, standalone application. It is not rolled into iTunes, but rather is more like the App stores found on the iPad and iPhone. I believe this decision to make the app standalone is a deliberate move by Apple to bridge the gap between portable i-devices and computers, a connect they hinted would grow strength with the next major version of OSX, Lion.

It is also cool that Apple bundled the store in an OSX update. This instantly creates a large userbase for Apple developers to target, much like how iPhone and iPad developers can target every user with one of those devices.

Pricing

One of the things I am very excited about in the new Mac App Store is the pricing of applications compared to their counterparts found in brick-and-mortar stores or on developer websites. Pixelmator, the popular image editor is just $29.99 on the App Store, if you walk into an Apple Store the purchase will set you back $59.99. Here’ a big one: Aperture 3, the big daddy to Apple’s iPhoto application, costs just $79.99 on the App Store, on Amazon.com or at an Apple store is costs $199.99! Thats a 60% savings!

Apple have also made their popular iLife and iWork Application suites available on a per-application basis. This means you can purchase just iPhoto or iMovie, or just Numbers or Keynote, without having to purchase the whole suite. Each iLife application costs $14.99, which means you actually save five bucks over buying the suite in its entirety (you do lose the iWeb and iDVD applications however if you go the App Store route). iWork applications cost $20 each, which means you undercut the suite by almost another $20 by buying the apps individually.

Ease of Use

I can already tell the Mac App Store is going to cost me a lot of money, because it is so easy to download applications! It works almost identically to purchasing an app on the iPhone; you click “install” and you instantly see the app appear in your dock with a progress bar overlaid. That’s it. There’s no dragging and dropping like traditional app installs. I can definitely see the store being used by novice users as it provides a simple and easy way to tap into the rich world of Mac software.

Closing Thoughts

All in all, I think Apple has done a great job with their latest release. The Mac App Store is going to change the world of Mac software, just like the iPhone changed mobile development. It is going to be very exciting to see how thing progress!

• Download and re-upload each image to a directory on the project website (long, tedious, and inefficient)
• Pull the images in live from Flickr (dynamic and efficient)

I had a problem, however: I had no idea how to pull images live from Flickr. However, I had recently begun learning JavaScript, and wanted to put my new skills to the test. I began to research…

It turns out Flickr support a method of data-interchange called JSON (JavaScript Object Notation) which basically allows you to send a URL to Flickr with a request of the data you want, and then receive a response back that you can process into html. Let me show you.

The first thing you need to do is obtain a Flickr API key. While this isn’t necessary for all the different URLs you can send to Flickr, it definitely opens you up to a lot of functionality. You can get one for free here.

Next, you need to decide what you want to display from Flickr on your page. In the example below, I have a URL that will return my Flickr Photo Feed.

http://api.flickr.com/services/rest/?format=json
&api_key=xxx&method=flickr.people.getPublicPhotos
&user_id=24309165@N05&per_page=50&page=1
&jsoncallback=jsonFlickrLoadUserStream

Let’s break down the parameters of the URL:

• ?format =json simply returns a JSON formated feed
• &method = flickr.people.getPublicPhotos is the way we will access the Flickr API. There are tons of ways you can access the API, you can check them out here.
• &user_id is a required parameter of the method we are using. Different methods require different parameters. To find out the user id for a particular username, you can use the wonderful idgettr.com tool.
• &per_page is a optional parameter that will default to 100 if omitted. It tells Flickr how many items to return in the JSON feed. The maximum allowed per page is 500. Make sure not to set the value to more than the number of items you are trying to call, for example don’t set it to 500 if you only have 200 items in your feed.
• &page is another optional parameter that represents the page of results you want returned. This is handy if you want to display more than 500 results because you can send a second URL request for the second page of results.
• &api_key is your api key, which is required for this method.
• &jsoncallback is the name of the function you will write in JavaScript to process the feed.

To send this request on your page, create a <script> element with the src attribute set to the API call, like this:

<script src="http://api.flickr.com/services/rest/?format=json
&method=flickr.people.getPublicPhotos&user_id=24309165@N05
&per_page=50&page=1&api_key=xxx
&jsoncallback=jsonFlickrLoadUserStream"></script>

You can also type the url directly into your web browser to make sure you are getting a response. I found this to be a handy way to check for errors when my code didn’t work.

Next up is processing the api call and displaying meaningful results on your page. There are a million different ways to do this, but I am going to show you the way that worked for me. You can of course place the code inline in your page or link to it externally, whatever works for you is fine. What is important is that you have the function name match the one specified in the jsoncallback parameter of the url. Below is the entire code I used. I will break each part down individually after.

function jsonFlickrLoadUserStream(rsp) {
	if (rsp.stat != "ok") return;

	var picture_wall = '';

	var photoCount = rsp.photos.perpage;

		for(var i = 0; i < photoCount; i++) {

			var photo = rsp.photos.photo[i];

			var img_src = "http://farm" + photo.farm + ".static.flickr.com/" + photo.server + "/" + photo.id + "_" + photo.secret + "_" + "s.jpg";

			var a_href = "http://www.flickr.com/photos/" + photo.owner + "/" + photo.id + "/";

			picture_wall += '<div style="width:50px; height:50px; float:left; overflow:hidden">';

			picture_wall += '<a  href="' + a_href + '" target="_blank" >';

			picture_wall += '<img id="img_' + i + '" src="' + img_src + '" width=50 style="border-width:0px; border-style:none;" /></a>rn';

			picture_wall += '</div>';

		}

			picture_wall += '<div style="clear:both; width:100%"></div>';

	document.getElementById("imagestream").innerHTML = picture_wall;

}

The code begins by declaring a function called jsonFlickrLoadUserStream with an input called ‘rsp’. It then checks to see the status of the JSON feed returned, and returns if the feed doesn’t come in properly.

function jsonFlickrLoadUserStream(rsp) {
	if (rsp.stat != "ok") return;

We then define a variable called “picture_wall” which will hold the output of the feed that we want to display on the page. We also define a variable called “photoCount” and set it equal to the perpage attribute.

var picture_wall = '';

var photoCount = rsp.photos.perpage;

Now is a good time to discuss how you access particular parts of a JSON feed. A JSON feed consists of elements nested within members nested in an object. To access a particular member, you must define the ‘path’ to that member. In the case of the ‘perpage’ element, we can see by looking at the feed that it is housed within the photos member of the feed (you can see this if you look at the url response in your web browser). Because of this, the ‘path’ to the element is rsp.photos.perpage. We will be accessing other elements in much the same way.

Next we begin a for loop to loop through the photos in the JSON feed.

for(var i = 0; i < photoCount; i++) {

			var photo = rsp.photos.photo[i];

The loop will run equal to the number of items in the feed, which is where the photoCount variable comes in. We then create a variable called ‘photo’ that we set equal to an array element found in the photos member of the feed (rsp.photos.photo[i]). This element is an array because there is more than one photo in the feed. We are only interested in the current photo on each iteration of the for loop, so we set it equal to our counter (i).

Next, we set variables for the image source and link to the image page on Flickr.

var img_src = "http://farm" + photo.farm + ".static.flickr.com/" + photo.server + "/" + photo.id + "_" + photo.secret + "_" + "s.jpg";

var a_href = "http://www.flickr.com/photos/" + photo.owner + "/" + photo.id + "/";

The JSON feed does not provide a full URL element for the image source, so we have to build it ourselves using the photo.farm, photo.server, photo.id, and photo.secret elements. Bear in mind these elements are actually found at the rsp.photos.photo member, but that we set a variable called ‘photo’ to rsp.photos.photo[i] to make things easier to type. the “s.jpg” part of the variable is interesting. Flickr provide several sizes of photos, each of which is denoted by a one-letter name. These are the names they use:

• O = orignial size (only available for pro accounts)
• B = big (1024px on biggest side on available for pro accounts)
• Z = medium (640px on biggest side)
• M = medium (500px on biggest side)
• S = small (240px on biggest side)
• T = thumbnail (100px on biggest side)
• SQ = square (75px by 75px)

We also set a link back to the photo on Flickr. This is required by Flickr’s terms of service; you can’t pull photos without providing a means for a visitor to find them back on Flickr.

Next comes placing the image and link on the page.

picture_wall += '<div style="width:50px; height:50px; float:left; overflow:hidden">';

			picture_wall += '<a  href="' + a_href + '" target="_blank" >';

			picture_wall += '<img id="img_' + i + '" src="' + img_src + '" width=50 style="border-width:0px; border-style:none;" /></a>';

			picture_wall += '</div>';

While it isn’t completely necessary, I create a div element first to place the image in. I set the ‘overflow’ property to ‘hidden’. This means that I can display vertical images in a horizontal container without messing up the flow of, say, an image gallery. Be sure to set the width and height properties of the div and img elements to match the size of your images.

Next we finish things up:

picture_wall += '<div style="clear:both; width:100%"></div>';

	document.getElementById("imagestream").innerHTML = picture_wall;

}

We added a float element to the end of all the images because this stops things below the gallery from breaking or appearing in weird places. Finally, we insert the ‘picture_wall’ object to a div with an id of “imagestream.” You could of course set this to any div on the page.

That’s all there is to it. I am happy I was able to figure out how this worked, and I must give credit to my friend James Yeary, who helped make everything work. Thanks James!

I hope this tutorial helps you out with your web design and development projects. If you have questions, bugs, or problems, be sure to let me know in the comments below!