Gravity Forms is form building plugin that simplifies the task of building attractive interactive forms for your WordPress websites. Sure, if you’re just looking for some basic contact form functionality, then there are several great contact form plugins out there for $0. But, if you’re looking for a contact form plugin that has extra features, such as:

• Submissions stored and viewable on WordPress Backend
• Multi-page forms
• Post Field
• Advanced fields for Name, Email, Address, etc.
• Drag-and-Drop form creation
• Create dynamic notifications using merge tags
• Ability to add custom logic through hooks
• Conditional logic to hide or show fields
• and MUCH MORE!

I can imagine and have seen or personally used Gravity forms to create:

• A quiz that would send a custom notification to the user based on the answers that were given.
• A multi-page application form that lets the user know how far they are in to the application process.
• A small e-commerce store that sells products, collects payment, and then delivers product

Now that you’re acquainted with some of the features of Gravity Forms, let me run you through the backend so you can see for yourself how easy and intuitive it is to create your own custom forms. This plugin really is a time-saving beast!

Gravity Forms form builder

Above is a picture of the form builder within gravity forms. This is one of gravity forms biggest selling points, and why I recommend it so highly in this review. If you manage multiple websites or multiple forms on one website, then this is going to be a killer time-saving feature. You can simply click each box, the box will slide down with some extra options, and then you can choose between these options which include things such as custom logic, required field, or values.

Gravity Forms Notifications

Above is a screenshot of the gravity forms notifications builder. The notification builder allows you to create custom emails that are sent to either the website admin (or other appropriate persons) or the person who submitted the form. By customizing a submission notification we were able to create a quiz with a dynamic email that depended on what the user submitted in his questionnaire. Try doing that with a free plugin…

On top of some of these obvious features, gravity forms also allows you to advanced logic through accessing hooks and filters. An example of this would be to access the pre_submission hook in order to compute some response based on the user’s input. Another example would be writing some custom code to interface gravity forms with a 3rd-party service. This really expands gravity form’s functionality by essentially allowing you the ability to manipulate the submitted data however you need.

Bottom Line

It took a while for me to bite the bullet and drop the $199 for a developer’s license of Gravity Forms. But looking back, I am glad that I did. In the past few months alone I have used Gravity Forms on several websites, and have saved tons of time over having to write custom code from scratch. If you run any serious WordPress website, I highly recommend you get Gravity Forms.

Inserting Google Maps into a website is CRAZY easy! Usually what I would advise someone to do is to:

1. Go to Google Maps
2. Search for the address that you want to show on your map
3. Grab the embed code
4. Insert embed code in your website

Could it get any easier? Well, that really depends on what your development needs are. I recently completed a project for a client that owned a mobile BBQ restaurant. This client wanted a map on his website that he could easily update with the location of his mobile smoking pit. I didn’t think it made much sense to make the client do the 4 steps above just to update his map… So I decided to look into Geocoding a google map. This way, all my client had to do to update his map was to login and change the address.

For those that do not know, geocoding is essentially the process of taking an address and turning that into latitude and longitude coordinates. Google maps has geocoding baked in – FOR FREE!

Without further ado, below is some code on using geocoding with Google Maps.

This code goes in the head.

<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>

This code can go anywhere in the body.

<div id="map" style="width: 413px; height: 300px;"></div>
<script type="text/javascript">
   var mapOptions = {
       zoom: 16,
      center: new google.maps.LatLng(54.00, -3.00),
      mapTypeId: google.maps.MapTypeId.ROADMAP
   };
   var geocoder = new google.maps.Geocoder();
   var address = '3410 Taft Blvd  Wichita Falls, TX 76308';
  geocoder.geocode( { 'address': address}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        map.setCenter(results[0].geometry.location);
        var marker = new google.maps.Marker({
            map: map,
            position: results[0].geometry.location
        });
      } else {
        alert("Geocode was not successful for the following reason: " + status);
      }
    });
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
   </script>

You can update the size of the map by changing the width and height values of the #map div. To change the starting zoom level, change zoom. You can change the type of map by changing mapTypeId. And most importantly, you can change the address by changing the value in var address.

You should be able to plug this code in to your website and be good to go. This code will take the address in var address, Geocode it using Google, and then center the map with a marker at the address specified.

This is a fairly simple example of Geocoding, but you could take this code and make a map that will dynamically update with user input. In a future post, I will discuss how to integrate Geocoding into WordPress so that you can easily create and edit maps without having to get latitude and longitude coordinates.

While working on the iMustangs project, we decided that it would be a good idea to include the school fight song. I’m sure we could have found a way to play a .mp3 file, but we decided that it would be best to create a video so that we could display our university logo. What follows is the result of our work in using UIWebView on iOS.

First Attempt

Our first attempt was very light on code and pretty simple. I’d like to show this to you by running through a test project. In Xcode, go ahead and start a new single-view application.

Navigate to the Storyboard in your project. Once you are here, add a web view on top of the current view. Go ahead and stretch the web view to fill the view below. Now, let’s go ahead and connect the web view.

I like to use the assistant editor when I connect UIWebViews and other objects to outlets and actions. Click the assistant editor button near the top right of Xcode (I am currently using 4.3.1). The assistant editor will show the storyboard beside your class, so that you can easily connect an object to a specific line of code in your .h file.

Once you’re in assistant editor mode, click the UIWebView and drag it to just below @interface. Let go.

At this point another dialog should’ve popped that is asking you to name your UIWebView. Go ahead and name it webView (be sure to use correct case).

Screenshot of naming the UIWebView

Now, navigate to your ViewController.m file and paste the following code within the viewDidLoad function. You may replace the url with one of your own.

[webView loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:@"http://www.youtube.com/embed/XeIKnBDN4To"]]];

At this point, you should be able to run this project in a simulator and see an MSU youtube video, or whatever URL you substituted. This worked fine for us, until we put it on an actual iPhone…When loading the youtube video through the cellular data plan, and not wifi, we noticed that there would be blank white screen with no activity indicator for 10-40 seconds. I found this very annoying and began to look at other ways to load a UIWebView.

Second Attempt

For the second attempt, my group and I decided that we needed some sort of activity indicator. What follows is a short tutorial on how to load a UIWebView with an activity indicator that will spin while the UIWebView is loading.

From earlier, we still have a UIWebView connected to our ViewController class. To add an activity indicator to our UIWebView, we need to add some more code. Edit your ViewController.h file so that it looks like the code below.

#import <UIKit/UIKit.h>
@interface ViewController : UIViewController
{
    IBOutlet UIActivityIndicatorView *activityIndicator;
    IBOutlet UIWebView *webSite;
    NSTimer *timer;
}
@property (retain, nonatomic) IBOutlet UIWebView *webView;
@end

Now, jump over to the storyboard. At this point add an Activity Indicator View. I would suggest centering, but it is your project.

We need to connect the UIWebView and the UIActivityIndicatorView now. So, go ahead and open up your assistant editor. Once you have this open, connect the UIWebView and the UIActivityIndicator to the header file.

Now, let’s jump over to the ViewController.m file and add the following code above viewDidUnload.

- (void)viewDidLoad
{
    [webSite addSubview:activityIndicator];
    [webSite loadRequest:[NSURLRequest requestWithURL: [NSURL URLWithString:@"https://docs.google.com/spreadsheet/embeddedform?formkey=dG5qR3F5LW5EWFBnamtqUjBQZ1dHS0E6MQ"]]];
    timer = [NSTimer scheduledTimerWithTimeInterval:(1.0/2.0) target:self selector:@selector(loading) userInfo:nil repeats:YES];
    [super viewDidLoad];
}
-(void)loading
{
    if(!webSite.loading)
        [activityIndicator stopAnimating];
    else {
        [activityIndicator startAnimating];
    }
}

Now, you should be able to run this project and get something that looks like the image at the top of this post. Below are my complete ViewController.h and ViewController.m files.

// This is the ViewController.h
#import
@interface ViewController : UIViewController
{
    IBOutlet UIActivityIndicatorView *activityIndicator;
    IBOutlet UIWebView *webSite;
    NSTimer *timer;
}
@property (retain, nonatomic) IBOutlet UIWebView *webView;
@end

//This is the ViewController.m file
#import "ViewController.h"
@interface ViewController ()
@end
@implementation ViewController
@synthesize webView;
- (void)viewDidLoad
{
    [webSite addSubview:activityIndicator];
    [webSite loadRequest:[NSURLRequest requestWithURL: [NSURL URLWithString:@"http://www.youtube.com/embed/XeIKnBDN4To"]]];
    timer = [NSTimer scheduledTimerWithTimeInterval:(1.0/2.0) target:self selector:@selector(loading) userInfo:nil repeats:YES];
    [super viewDidLoad];
}
-(void)loading
{
    if(!webSite.loading)
        [activityIndicator stopAnimating];
    else {
        [activityIndicator startAnimating];
    }
}
- (void)viewDidUnload
{
    [self setWebView:nil];
    [super viewDidUnload];
    // Release any retained subviews of the main view.
}
- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation
{
    if ([[UIDevice currentDevice] userInterfaceIdiom] == UIUserInterfaceIdiomPhone) {
        return (interfaceOrientation != UIInterfaceOrientationPortraitUpsideDown);
    } else {
        return YES;
    }
}
- (void)dealloc {
    [webView release];
    [super dealloc];
}
@end

I hope this helps you set up your UIWebView with an activity indicator. Please let me know if you have any questions or if I have messed up anything in this tutorial. It happens

Series

This is part 2 of a 2-part series on how to create custom overlays for the MapKit framework on iOS. View part 1 of this series here.

Creating Custom Overlay in iOS

Everything we have done up to this point has been to create the tiles we will use in our project. Now that we have created those tiles, we need to add them to our project.

For this, we will use a sample project from Apple called Tile Map. I have a working iOS project that uses custom overlay at Github. We are going to copy a few classes from this project, so go ahead and grab the zip-ball and open it in Xcode.

You will need to copy the following files into your own project:

• TileOverlay.h
• TileOverlay.m
• TileOverlayView.h
• TileOVerlayView.m

Be sure to select the box to “Copy items into destination group’s folder.” At this point I am going to assume that you have already created a View Controller for your map. If not, go ahead and create one. In the .m (implementation) file of your map View Controller, we are going to import the TileOverlay.h and TileOverlayView.h files. Your map View Controller should now look something like this:

#import "mapViewController.h"
#import "TileOverlay.h"
#import "TileOverlayView.h"
@implementation mapViewController
- (void)viewDidLoad
{
    NSString *tileDirectory = [[[NSBundle mainBundle] resourcePath] stringByAppendingPathComponent:@"Tiles"];
    TileOverlay *overlay = [[TileOverlay alloc] initWithTileDirectory:tileDirectory];
    [map addOverlay:overlay];
    map.mapType = MKMapTypeSatellite;
    MKCoordinateRegion CSC;
    // Defines the center point of the map
    CSC.center.latitude = 33.874809;
    CSC.center.longitude = -98.521129;
    // Defines the view,able area of the map. Lower numbers zoom in!
    CSC.span.latitudeDelta = .003;
    CSC.span.longitudeDelta = .003;
    [map setRegion:CSC animated:YES];
}
- (MKOverlayView *)mapView:(MKMapView *)mapView viewForOverlay:(id )overlay
{
    TileOverlayView *view = [[TileOverlayView alloc] initWithOverlay:overlay];
    view.tileAlpha = 0.6;
    return [view autorelease];
}

The only other change that we have to make at this point is to add some code to our app delegate file. In the delegate header file you will need to add some code (highlighted below):

#import
@class mapViewController;
@interface msuAppDelegate : NSObject {
    UIWindow *window;
    mapViewController *viewController;
}
@property (strong, nonatomic) UIWindow *window;
@property (strong,nonatomic) mapViewController *viewController;
@end

We still don’t have tiles in our project at this point, so go ahead and create a directory on your Desktop named “Tiles”. Copy all of the tile sub-directories and the tilemapresource.xml into the “Tiles” folder that you created on the desktop. Now, drag the “Tiles” folder into your iOS project. Be sure to select “Copy items into destinations group’s folder” and “Create folder references for any added folders.”

Copying Tiles folder into iOS Project

The last step is to connect your Mk Map View in storyboard to delegate. Once we do that, the Custom Overlay for MapKit should be working. Click the Mk Map View in storyboard, use control + click, then drag, to the Map View Controller Icon. View the screenshots below.

Mk Map View Screenshot

Connect Mk Map View Screenshot

Map View Controller Delegate

At this point go ahead and run your program to see if everything is working. If you have any problems, please leave me a comment below, and I will modify this tutorial. You can reference the iMustangs project  on Github for an example of integrating custom overlays into an iOS project.

I am part of a team developing an iPhone app for Midwestern State University. I am particularly responsible for developing the map that we are going to use for the app. Because I had a lot of detail I wanted to show on our map – Faculty/Commuter/Resident Parking Lots,  labels for different buildings, key points of interest on campus – I began to look into using custom overlays, a large image laid of top of the Google map tiles.

One of the issues I ran into was a lack of good information on how to integrate custom overlays into an existing iOS project. What follows is the process used to create and integrate custom overlays into an existing iOS app.

Create Overlay Image

I knew from the beginning that I would need some graphic of Midwestern State University to serve as a foundation for me to build my overlay image. To get the background image, I:

• Went go Google Maps
• Grabbed the embed code for the location I wanted
• Created a quick HTML document with the embed code in it
• I changed the size of the iframe to about 4,000 px by 4,000 px
• I used a plugin for Google Chrome browser that took a screenshot of the entire page

This gave me a background image that I could put into Photoshop and then build upon. I used 300 PPI and set my image size to about 3,000 px by 4,000 px. With a smaller image size or lower resolution I noticed that I had very jagged edges. You can tweak these image settings to your project.

Start building your overlay on top of this background image. When you have an overlay image that you are happy with, hide the background, and export your image. I exported my image as a PNG-24 since I had large amounts of blank area on the image.

Find the Corner Coordinates

The best way I found to match the corner pixels of the image to coordinates is to:

• Create a copy of your overlay image, this time with a red border
• Add your overlay image to Google Earth
  

  Custom overlay with red border added

• Stretch/move your image so that it lines up. Below is the result that I had.
  

  Close up of overlay image

• Drop a pin on each corner of your image. Be sure to zoom in as close as possible, and get the pin as close to the corner as possible
  

  Close up of pin

• Right click on each pin in the left toolbar, and select “Directions from here”

Create Custom Overlay Tiles

MapKit, and Google Maps, works by using map tiles. These are square images that only load if they are viewable in the zoom level that you are looking at. Thankfully, there is a tool called GDAL that will take our overlay image and cut it up into all of the tiles that we need. Take a minute and go download and install GDAL. If you’re on a Mac, I would suggest using Kyng Chaos. I will be giving the Mac commands below, but I assume that they are similar on a PC.

Because we are referencing each corner pixel of our overlay image to a coordinate, we need to know how many pixels wide and tall our image is. To do this, we are going to use the gdalinfo command. Before we can use gdalinfo though, we need to get in the directory of our image/project. Go ahead and navigate to the directory of your project, then use the gdalinfo command followed by your image name. Your commands should look something similar to this:

cd /Users/ericbinnion/Desktop/imgDirectory-Here
gdalinfo imgName.png

This should give us some information that looks like the image below:

A screenshot of the gdalinfo command on Mac.

Next, we will create our VRT file which will reference the coordinates to the corner pixels. To do this, use the following command:

gdal_translate -of VRT -a_srs EPSG:4326 -gcp 0 0 -98.526518119 33.8812011706 -gcp 1055 0 -98.5158112852 33.8811992984 -gcp 1055 1584 -98.5158116258 33.8679003639 -gcp 0 1584 -98.5265176807 33.8679047769  msuMap.png msuMap.vrt

You will of course replace the coordinate points, the image name, and the vrt name that you want create to fit your project. The last step of the project is to actually create the tiles. To do this, we will use the following command.

python gdal2tiles.py -z 14-21  msuMap.vrt

This will create tiles for zoom levels 14-21 using the msuMap.vrt file that we created in the last step. At this point you should see some html files in your project. These will give you a preview of how your custom overlay will look on MapKit for iOS.

Series

This is part 1 of a 2-part series in “How to Create Custom Overlay Tiles for iOS MapKit Framework.” View part 2 here.