Question

I’m trying to plot and area on a map with multiple GPS coordinates. These coordinates will be downloaded from a web service. There are five coordinates that creates on colored area block. since I can’t post images yet here is a url to the example
OutageMap

Can someone tell me what the best way of achieving this? I’m shooting in the dark here so no real code is available. The below url is what we currently use via html. Trying to create it natively to iphone instead of calling a webview.

Answer 1

You can use a MKPolygon and a MKPolygonView with your list of points:

When the viewController is created, or the data is loaded, you add a MKPolygon for each colored block to the map:

- (void)viewDidLoad {
    for (NSDictionary *coloredAreas in coloredAreas) {
        NSArray *coordinateData = coloredArea[@"coords"];
        // this assumes coordinateData is an array of arrays like:
        // [[0, 0], [0, 1], [0, 1]]
        NSUInteger coordsLen = [coordinateData count];
        CLLocationCoordinate2D *coords = malloc(sizeof(CLLocationCoordinate2D) * coordsLen);
        for (int i=0; i < coordsLen; i++) {
            coords[i] = CLLocationCoordinate2DMake(coordinateData[i][0], coordinateData[i][1]);
        }
        MKMapPoint point[] = coloredAreas['points'];
        MKPolygon *polygon = [MKPolygon polygonWithPoints:points count:3];
        [self.mapView addOverlay:polygon];
    }
}

Then you add a mapView:viewForOverlay method to draw each polygon:

- (MKOverlayView *)mapView:(MKMapView *)mapView viewForOverlay:(id <MKOverlay>)overlay {
    MKPolygonView *polygonView = [[MKPolygonView alloc] initWithPolygon:overlay]]; 
    polygonView.fillColor = [UIColor greenColor];
    return polygonView;
}

This will draw a green box for each of your polygons. In order to have each polygon be a certain color I would create a ColoredPolygon class that is a subclass of MKPolygon and that has a color property. You then create ColoredPolygon and set the color when loading the data. In mapView:viewForOverlay you would just cast the MKOverlay to a ColoredPolygon and then set the fillColor to ColoredPolygon.color.