Custom Annotation send to webView with possible JS

Question

Good Morning StackOverflow, after getting my custom annotation call outs to work on my 'europeMapView' I now need to send the user to a webView, now I want the webView to load a URL possibly from a JSON file depending on which callout was clicked. I believe I am supposed to use NSJSONSerialization, although I'm not sure how to implement this?

So in the 'europeMapView' when the 'Rome' call out button is clicked it takes the user to 'europeWebView' and loads the string www.ThingsAboutRome.com.

I suppose I could just have a webView for each annotation, but that seems terribly inefficient. (plus I couldn't change the web address on the fly.)

I am using Storyboard too.

#import "UKFlightsEuropeMap.h"
#import "Annotation.h"



@interface UKFlightsEuropeMap ()

@end

@implementation UKFlightsEuropeMap
@synthesize europeMapView;

//Define the Long and Lat of different European cities.


#define EUROPE_LATITUDE 47.3690;
#define EUROPE_LONGITUDE 8.5380;

#define LONDON_LATITUDE 51.5171;
#define LONDON_LONGITUDE 0.1062;

#define PARIS_LATITUDE 48.8742;
#define PARIS_LONGITUDE 2.3470;

#define BRUSSELS_LATITUDE 50.75;
#define BRUSSELS_LONGITUDE 4.53333;

#define BERLIN_LATITUDE 52.5;
#define BERLIN_LONGITUDE 13.35;

#define MUNICH_LATITUDE 48.1333;
#define MUNICH_LONGITUDE 11.5667;

#define ZURICH_LATITUDE 47.3690;
#define ZURICH_LONGITUDE 8.5380;

#define MILAN_LATITUDE 45.4640;
#define MILAN_LONGITUDE 9.1916;

#define MADRID_LATITUDE 40.4000;
#define MADRID_LONGITUDE -3.6833;

#define ROME_LATITUDE 41.9000;
#define ROME_LONGITUDE 12.5000;

#define LISBON_LATITUDE 38.7000;
#define LISBON_LONGITUDE 9.1833;

#define VIENNA_LATITUDE 48.2088;
#define VIENNA_LONGITUDE 16.3726;

#define THE_SPAN 0.01f;


- (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil
{
self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];
if (self) {
    // Custom initialization
}
return self;
}

- (void)viewDidLoad
{
[super viewDidLoad];

[europeMapView setDelegate:self];

// Do any additional setup after loading the view.

//Create my region

MKCoordinateRegion myRegion;

//Set region centre
CLLocationCoordinate2D center;
center.latitude = EUROPE_LATITUDE;
center.longitude = EUROPE_LONGITUDE;

//Set span (zoom level)
MKCoordinateSpan span;
span.latitudeDelta = THE_SPAN;
span.longitudeDelta = THE_SPAN;

myRegion.center = center;
myRegion.span = span;

//Set our region to the europeMapView

[europeMapView setRegion:myRegion animated:YES];


//Annotation

NSMutableArray * locations = [[NSMutableArray alloc] init];
CLLocationCoordinate2D location;
Annotation * myAnn;

//London Annotation

myAnn = [[Annotation alloc] init];
location.latitude = LONDON_LATITUDE;
location.longitude = LONDON_LONGITUDE;
myAnn.coordinate = location;
myAnn.title = @"London";
myAnn.subtitle = @"London City";


[locations addObject:myAnn];

//Paris Annotation

myAnn = [[Annotation alloc] init];
location.latitude = PARIS_LATITUDE;
location.longitude = PARIS_LONGITUDE;
myAnn.coordinate = location;
myAnn.title = @"Paris";
myAnn.subtitle = @"City of Love";
[locations addObject:myAnn];

//Brussels Annotation

myAnn = [[Annotation alloc] init];
location.latitude = BRUSSELS_LATITUDE;
location.longitude = BRUSSELS_LONGITUDE;
myAnn.coordinate = location;
myAnn.title = @"Brussels";
myAnn.subtitle = @"Brussels";
[locations addObject:myAnn];

//Berlin Annotation

myAnn = [[Annotation alloc] init];
location.latitude = BERLIN_LATITUDE;
location.longitude = BERLIN_LONGITUDE;
myAnn.coordinate = location;
myAnn.title = @"Berlin";
myAnn.subtitle = @"Berlin";
[locations addObject:myAnn];

//Munich Annotation

myAnn = [[Annotation alloc] init];
location.latitude = MUNICH_LATITUDE;
location.longitude = MUNICH_LONGITUDE;
myAnn.coordinate = location;
myAnn.title = @"Munich";
myAnn.subtitle = @"Munich";
[locations addObject:myAnn];

//Zurich Annotation

myAnn = [[Annotation alloc] init];
location.latitude = ZURICH_LATITUDE;
location.longitude = ZURICH_LONGITUDE;
myAnn.coordinate = location;
myAnn.title = @"Zurich";
myAnn.subtitle = @"Zurich";
[locations addObject:myAnn];

//Milan Annotation

myAnn = [[Annotation alloc] init];
location.latitude = MILAN_LATITUDE;
location.longitude = MILAN_LONGITUDE;
myAnn.coordinate = location;
myAnn.title = @"Milan";
myAnn.subtitle = @"Milan";
[locations addObject:myAnn];

//Madrid Annotation

myAnn = [[Annotation alloc] init];
location.latitude = MADRID_LATITUDE;
location.longitude = MADRID_LONGITUDE;
myAnn.coordinate = location;
myAnn.title = @"Madrid";
myAnn.subtitle = @"Madrid";
[locations addObject:myAnn];

//Rome Annotation

myAnn = [[Annotation alloc] init];
location.latitude = ROME_LATITUDE;
location.longitude = ROME_LONGITUDE;
myAnn.coordinate = location;
myAnn.title = @"Rome";
myAnn.subtitle = @"Rome";
[locations addObject:myAnn];

//Lisbon Annotation

myAnn = [[Annotation alloc] init];
location.latitude = LISBON_LATITUDE;
location.longitude = LISBON_LONGITUDE;
myAnn.coordinate = location;
myAnn.title = @"Lisbon";
myAnn.subtitle = @"Lisbon";
[locations addObject:myAnn];

//Vienna Annotation

myAnn = [[Annotation alloc] init];
location.latitude = VIENNA_LATITUDE;
location.longitude = VIENNA_LONGITUDE;
myAnn.coordinate = location;
myAnn.title = @"Vienna";
myAnn.subtitle = @"Vienna";
[locations addObject:myAnn];

//Add the NSMutable Array to the europeMapView.


[self.europeMapView addAnnotations:locations];




}

//Customize the annotation callouts.

-(MKAnnotationView *) mapView:(MKMapView *)europeMapView viewForAnnotation:        (id<MKAnnotation>)annotation { MKPinAnnotationView *MyPin=[[MKPinAnnotationView alloc]     initWithAnnotation:annotation reuseIdentifier:@"current"];
MyPin.pinColor = MKPinAnnotationColorPurple;

UIButton *advertButton = [UIButton buttonWithType:UIButtonTypeDetailDisclosure];
if ([[annotation title] isEqualToString:@"London"]){
    [advertButton addTarget:self action:@selector(LondonClicked:)     forControlEvents:UIControlEventTouchUpInside];        
}

if ([[annotation title] isEqualToString:@"Paris"]){
    [advertButton addTarget:self action:@selector(ParisClicked:)     forControlEvents:UIControlEventTouchUpInside];
}

if ([[annotation title] isEqualToString:@"Brussels"]){
    [advertButton addTarget:self action:@selector(BrusselsClicked:) forControlEvents:UIControlEventTouchUpInside];
}

if ([[annotation title] isEqualToString:@"Berlin"]){
    [advertButton addTarget:self action:@selector(BerlinClicked:) forControlEvents:UIControlEventTouchUpInside];
}

if ([[annotation title] isEqualToString:@"Munich"]){
    [advertButton addTarget:self action:@selector(MunichClicked:) forControlEvents:UIControlEventTouchUpInside];
}

if ([[annotation title] isEqualToString:@"Zurich"]){
    [advertButton addTarget:self action:@selector(ZurichClicked:) forControlEvents:UIControlEventTouchUpInside];
}

if ([[annotation title] isEqualToString:@"Milan"]){
    [advertButton addTarget:self action:@selector(MilanClicked:) forControlEvents:UIControlEventTouchUpInside];
}

if ([[annotation title] isEqualToString:@"Madrid"]){
    [advertButton addTarget:self action:@selector(MadridClicked:) forControlEvents:UIControlEventTouchUpInside];
}

if ([[annotation title] isEqualToString:@"Rome"]){
    [advertButton addTarget:self action:@selector(RomeClicked:) forControlEvents:UIControlEventTouchUpInside];
}

if ([[annotation title] isEqualToString:@"Lisbon"]){
    [advertButton addTarget:self action:@selector(LisbonClicked:) forControlEvents:UIControlEventTouchUpInside];
}

if ([[annotation title] isEqualToString:@"Vienna"]){
    [advertButton addTarget:self action:@selector(ViennaClicked:) forControlEvents:UIControlEventTouchUpInside];
}


MyPin.rightCalloutAccessoryView = advertButton;
MyPin.draggable = NO;
MyPin.highlighted = YES;
MyPin.animatesDrop = TRUE;
MyPin.canShowCallout = YES;


return MyPin;

}

//Show that the detailDisclosure Button has been pressed.

-(void)LondonClicked:(id)sender {
NSLog(@"London Clicked"); 
}
-(void)ParisClicked:(id)sender {
NSLog(@"Paris Clicked");
}
-(void)BrusselsClicked:(id)sender {
NSLog(@"Brussels Clicked");
}
-(void)BerlinClicked:(id)sender {
NSLog(@"Berlin Clicked");
}
-(void)MunichClicked:(id)sender {
NSLog(@"Munich Clicked");
}
-(void)ZurichClicked:(id)sender {
NSLog(@"Zurich Clicked");
}
-(void)MilanClicked:(id)sender {
NSLog(@"Milan Clicked");
}
-(void)MadridClicked:(id)sender {
NSLog(@"Madrid Clicked");
}
-(void)RomeClicked:(id)sender {
NSLog(@"Rome Clicked");
}
-(void)LisbonClicked:(id)sender {
NSLog(@"Lisbon Clicked");
}
-(void)ViennaClicked:(id)sender {
NSLog(@"Vienna Clicked");
}


- (void)didReceiveMemoryWarning
{
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}


@end

EDIT: Example of the JSON file.

{
"ID": "London",
"Link": "http://www.London.co.uk",
"ID": "Paris",
"Link": "http://www.Paris.fr"
}

Thanks a lot for your time.

Nick.

Answer 1

First of all I'd suggest changing the format of your data to something like this:

{
   "london":{
      "link":"http://www.London.co.uk",
      "moredata":"..."
   },
   "paris":{
      "link":"http://www.Paris.fr",
      "moredata":"..."
   }
}

This will represent a city with it's associated properties. In your version it's impossible to lookup the right link for a specific city.

Then you can parse and access the different parts as follows:

NSString *json = @"{\"london\":{\"link\":\"http://www.London.co.uk\",\"moredata\":\"...\"},\"paris\":{\"link\":\"http://www.Paris.fr\",\"moredata\":\"...\"}}";

NSData *data = [json dataUsingEncoding:NSUTF8StringEncoding];

NSError *error;

NSDictionary *cities = [NSJSONSerialization JSONObjectWithData:data options:nil error:&error];

NSLog(@"link to london: %@", cities[@"london"][@"link"]);

>> link to london: http://www.London.co.uk

After this You have to feed your webview with the extracted link.