iOS: MapKit – Insertar un área o polígono (MKPolygon) en el mapa

En el último tutorial que hicimos en apprendemos.com, mostramos como insertar una ruta o línea en el mapa del iPhone.

Para crear esta línea utilizábamos una serie de coordenadas.

 

En este tutorial vamos a insertar un polígono (MKPolygon) o área sobre el mapa de iOS.

 

Para ello utilizaremos el proyecto anterior, creado en el tutorial de insertar líneas en el mapa

 

Siguiendo muy pocos pasos construiremos nuestro polígono, basándonos en la vista de la línea.

 [wp_ad_camp_2]

Abriremos ViewController.h, y cambiaremos las dos veces que aparece “MKPolyLine *routeLine” por “MKPolygon *polygon“, quedando así:

 

#import <UIKit/UIKit.h>
#import <MapKit/MapKit.h>
#import <CoreLocation/CoreLocation.h>
 
@interface ViewController : UIViewController  <MKMapViewDelegate>
{
 
 
    IBOutlet MKMapView *map;
    // El objeto del polygono
    MKPolygon * polygon;
 
 
 
}
 
@property(nonatomic, retain) IBOutlet MKMapView *map;
 
@property(nonatomic, retain) MKPolygon *polygon;
 
@end

Como observación importante antes de crear nuestro polígono (MKPolygon) hay que tener en cuenta que así como una línea (MKPolyLine) está simplemente compuesta por diferentes puntos (MKMapPointAnnotation) o coordenadas, el polígono tiene un requisito bastante lógico y es, que su primer punto ha de ser igual al último, para que este, pueda cerrar la figura.

 

Ahora si, vamos a ViewController.m y abrimos el ViewDidLoad, quedando así:

 

- (void)viewDidLoad
{
    [super viewDidLoad];
 
 
    map.delegate = self;
 
    MKMapPoint * pointsArray = malloc(sizeof(CLLocationCoordinate2D)*5);
 
 
    CustomAnnotation *annotation1 = [[CustomAnnotation alloc]initWithTitle:@"Salida" subtitle:@"Con apprendemos.com, llegaremos" andCoordinate:CLLocationCoordinate2DMake(39.468502,-0.398469)];
    [map addAnnotation:annotation1];
 
 
    pointsArray[0]= MKMapPointForCoordinate(CLLocationCoordinate2DMake(39.468502,-0.398469)); // Igual que el último
 
    pointsArray[1]= MKMapPointForCoordinate(CLLocationCoordinate2DMake(39.467011,-0.390015));
 
    pointsArray[2]= MKMapPointForCoordinate(CLLocationCoordinate2DMake(39.469926,-0.392118));
 
    pointsArray[3]= MKMapPointForCoordinate(CLLocationCoordinate2DMake(39.472312,-0.386453));
 
    pointsArray[4]= MKMapPointForCoordinate(CLLocationCoordinate2DMake(39.468502,-0.398469)); // Igual que el primero.
 
 
    CustomAnnotation *annotation2 = [[CustomAnnotation alloc]initWithTitle:@"Llegada" subtitle:@"Hemos llegado con apprendemos.com" andCoordinate:CLLocationCoordinate2DMake(39.472312,-0.386453)];
    [map addAnnotation:annotation2];
 
 
    //routeLine = [MKPolyline polylineWithPoints:pointsArray count:4];
 
    polygon = [MKPolygon polygonWithPoints:pointsArray count:5];
 
    free(pointsArray);
 
    [map addOverlay:polygon];
 
 
 
 
    // Esto situará el centro del mapa en Valencia con la distancia de región que establezcamos.
    MKCoordinateRegion region = MKCoordinateRegionMakeWithDistance(CLLocationCoordinate2DMake(39.467011,-0.392515), 1100, 1100);
    [map setRegion:region];
 
}
 

Si nos fijamos, solo hemos cambiado la llamada de MKPolyLine por MKPolygon, además de ampliar en uno el array de puntos, para poder insertar al final, el mismo que al principio.

 

Solo quedará un paso. Hacer que el delegate devuelva como MKOverlay, el overlay del polígono y no de la línea.

Modificamos el método viewForOverlay:

- (MKOverlayView *)mapView:(MKMapView *)mapView viewForOverlay:(id )overlay
 
{
 
    MKOverlayView* overlayView = nil;
 
    MKPolygonView  * polygonView = [[MKPolygonView alloc] initWithPolygon:polygon];
 
 
    polygonView.fillColor = [UIColor blueColor];
 
    polygonView.strokeColor = [UIColor whiteColor];
 
    polygonView.lineWidth = 3;
 
 
 
    overlayView = polygonView;
 
    return overlayView;
 
}

 

 

[wp_ad_camp_2]

 

Y ya lo tenemos todo listo para lanzar el simulador de iPhone y ver el resultado. En nuestro ejemplo, el resultado recorre los mismos puntos que en el tutorial anterior, de ahí que la forma del MKOverlay sea la misma.

 

MKPolygon tutorial - apprendemos.com

 

Esperamos que os haya gustado el tutorial de insertar polígonos en el mapa y nuevamente os sirva en vuestros proyectos.

Por ahora ya sabéis como:

Estar atentos a los próximos tutoriales de Apprendemos.com.
 
 

Más en Twitter (@Apprendemos) y Facebook

 

Saludos,

Manu =D

Author Image
Author: ManuAlamar iOS & .NET Developer. Ingeniero Técnico Informático especialmente interesado en proyectos relacionados con la tecnología móvil y web
  • raDIKaL edward

    Buenas Tardes excelente Tutorial, pero, se puede saber si un determinado punto (Latlng) esta dentro del poligono, es decir, buscar un punto (latlng) dentro de los puntos que estan en el poligono?…es posible, podrian ayudarme con un ejemplo…?…excelente blog..gracias

  • Aunque debo hacer el tutorial próximamente, aquí tienes un ejemplo rápido de como se haría si por ejemplo en vez de un polígono, tuvieras varios (para uno te vale el mismo ^^):

    // Esto se una para coger de él un punto. Tambiéns se puede crear un punto por sus coordenadas.
    MKCircleView *circleView = (MKCircleView *)[map viewForOverlay:self.sfvc.pinCircle];

    // Recorremos los MKPolygon que tengamos en un array
    for (MKPolygon *region in regions){

    BOOL mapCoordinateIsInPolygon = FALSE;

    //Recorre los puntos del polígono y comprueba.
    for (int i = 0; i < region.pointCount; i++) { MKMapPoint point = region.points[i]; CGPoint circleViewPoint = [circleView pointForMapPoint:point]; mapCoordinateIsInPolygon = CGPathContainsPoint(circleView.path, NULL, circleViewPoint, NO); } if (mapCoordinateIsInPolygon) { NSLog(@"YES! At least one point of the poly lies within the circle"); } } No lo he probado, pero buscando por la red me ha parecido bastante lógico. Saludos, Manu =D P.D.: Si os ayudan los tutoriales, podíais votarnos en Los Premios Bitácoras 2012 ^^ Premios Bitácoras 2012! Vota por Apprendemos!

  • Pingback: Bitacoras.com()