Mapbox iOS - Fill polygon created dynamically - ios

Question

I am using Mapbox framework for maps and i want to fill polygons and the vertices of the polygon has given from the user touch.
Here is my code on user touch
- (void)singleTapOnMap:(RMMapView *)map at:(CGPoint)point
{
CLLocationCoordinate2D coord;
coord.latitude = [map pixelToCoordinate:point].latitude;
coord.longitude = [map pixelToCoordinate:point].longitude;
RMAnnotation *annotation = [[RMAnnotation alloc] initWithMapView:map coordinate:coord andTitle:#""];
annotation.userInfo = [[NSArray alloc]initWithObjects:[[CLLocation alloc] initWithLatitude:coord.latitude longitude:coord.longitude], nil];
[map addAnnotation:annotation];
}
Delegate method
- (RMMapLayer *)mapView:(RMMapView *)mapView layerForAnnotation:(RMAnnotation *)annotation
{
if (annotation.isUserLocationAnnotation)
return nil;
CLLocation *location = [annotation.userInfo objectAtIndex:0];
RMShape *line = [[RMShape alloc] initWithView:annotation.mapView];
line.lineWidth = 3.0;
line.position = annotation.position;
line.lineColor = [UIColor redColor];
line.fillColor = [UIColor greenColor];
[line moveToCoordinate:location.coordinate];
[line addLineToCoordinate:lastLocation.coordinate];
return line;
}
I can draw the polygon but unable to fill it.

Answer 1

It seems to me that, according to the way that you are currently doing it, for each tap on the map you are creating a NEW annotation, each containing one line segment from the last location to the current tap location, which will not create a polygon, but rather a series of individual annotations containing only one line segment.
You will need to create a separate array of locations of vertices. As you add more locations via tapping it adds to the location array:
// #1 create the following iVars for keeping state of drawing and polygon vertices
bool isDrawingPolygon;
NSMutableArray *savedPolygonVertices;
// #2 in viewDidLoad or your init code, be sure to set the initial states
-(void)viewDidLoad
{
isDrawingPolygon = FALSE;
savedPolygonVertices = nil;
...
... REST OF VIEW DID LOAD OR INIT METHOD
// #3 Create an IBAction button method to trigger beginning of drawing dynamic polygon (a start button)
-(void)startCreatingPolygon
{
isDrawingPolygon = TRUE;
savedPolygonVertices = [[NSMutableArray alloc] initWithCapacity:50]; // Some arbitrary number of points
}
// #4 Begin adding location vertices whenever singleTapOnMap
-(void)singleTapOnMap:(RMMapView *)map at:(CGPoint)point
{
if (isDrawingPolygon)
{
CLLocationCoordinate2D coord;
coord.latitude = [map pixelToCoordinate:point].latitude;
coord.longitude = [map pixelToCoordinate:point].longitude;
[savedPolygonVertices addObject:coord];
RMAnnotation *annotation = [[RMAnnotation alloc] initWithMapView:map coordinate:coord andTitle:#"tempPolygon"]; // Give each temporary line annotation some common identifier "tempPolygon"
annotation.userInfo = [[NSArray alloc]initWithObjects:[[CLLocation alloc] initWithLatitude:coord.latitude longitude:coord.longitude], nil];
[map addAnnotation:annotation];
}
}
// #5 When you tap the "stop" button, you would need to roll the location vertices in the array into ONE annotation object containing an RMShape polygon containing all the vertices for the polygon (and fill/line color attributes), and an identifier for that polygon.
-(void)stopCreatingPolygon // IBAction method for stop making polygon
{
isDrawingPolygon = FALSE;
RMAnnotation *annotation = [[RMAnnotation alloc] initWithMapView:self.mapView coordinate:coord andTitle:#"Polygon"];
annotation.userInfo = savedPolygonVertices;
[self.mapView addAnnotation:annotation];
savedPolygonVertices = nil;
for (RMAnnotation *ann in self.mapView.annotations)
{
if ([ann.title isEqualToString:#"tempPolygon"])
[self.mapView removeAnnotation:ann]; // Get rid of the temporary line segments
}
}
// #6 Then in layerForAnnotation, you would need to check for that identifier (annotation.title), and put the polygon wrapped in an if statement
- (RMMapLayer *)mapView:(RMMapView *)mapView layerForAnnotation:(RMAnnotation *)annotation
{
if (annotation.isUserLocationAnnotation)
return nil;
if ([annotation.title isEqualToString:#"tempPolygon"])
{
CLLocation *location = [annotation.userInfo objectAtIndex:0];
RMShape *line = [[RMShape alloc] initWithView:annotation.mapView];
line.lineWidth = 3.0;
line.position = annotation.position;
line.lineColor = [UIColor redColor];
line.fillColor = [UIColor greenColor];
[line moveToCoordinate:location.coordinate];
[line addLineToCoordinate:lastLocation.coordinate];
return line;
}
if ([annotation.title isEqualToString:#"Polygon"])
{
RMShape *shape = [[RMShape alloc] initWithView:self.mapView];
shape.lineWidth = 3.0;
shape.lineColor = [UIColor redColor];
shape.fillColor = [UIColor greenColor];
shape.fillRule= kCAFillRuleNonZero;
shape.lineJoin = kCALineJoinRound;
shape.lineCap = kCALineCapRound;
for (CLLocationCoordinate2D * location in annotation.userInfo){
// userInfo now contains all vertices between start & stop
[shape addLineToCoordinate:location];
}
return shape;
}
}
That should give you what you are looking for.
/blee/