Youtube UIWebView with Storyboards

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).


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:@"<a href=""></a>"]]];

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…

Read more

Adding Custom Overlays to iOS MapKit Framework



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:

Read more

Creating Custom Overlays for iOS MapKit Framework

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:

Read more