XMapView Component

XMapView is a open source component that used for iOS to cluster a large number of pins. Without changing your current project structure, you can easily and quickly manage different groups, hide and show different groups, set icons or customized views for different groups and so on The final effect of XMapView is as below:

        
        
In order to use XMapView library, we need to download the XMapView.framework library which can be found here with a sample project. This library only supports real device. Therefore, it can not be run in the simulator. If you want to test it. Please use a real device to test this library. This sample project is following these steps as below:

• 
  Step 1
  Create a new project with Single View Application template.
  
  
  
• 
  Step 2
  Set up the project name to 'XSample' with Objective-C language
  
  
  
• 
  Step 3
  Select 'Main.storyboard' and find the viewController. Drag the MKMapView component from the right side control box to the viewController.
  
  
  
• 
  Step 4
  Drag the XMapView.framework library to the project from your unzipped file. if you want to download the library, you can click here
  
  
  
• 
  Step 5
  After you drag the XMapView.framework library. XCode will pop up window and let you choose the way of importing the library. Here, please check the 'Copy items if needed' option.
  
  
  
• 
  Step 6
  After that, select the MKMapView component in the ViewController in storyboard. Then, open the property panel for this MKMapView on the right. Afterwards, change the default class 'MKMapView' to 'XMapView'.
  
  
  
• 
  Step 7
  After finishing setting up the class, we can link this XMapView component to our view controller class. here, we name our XMapView component (xMapView).
  
  
  
• 
  Step 8
  When we are done in Step 8. Please remember to import the library in the viewController class. finally, you can see your code should be the same as the Step 7.
  
  
  
• 
  Step 9
  In the last step, we need to drag our library to 'embedded libraries' area under 'General' tab. After that, everything is done, now, you should successfully run this sample app in your device. If you can successfully run this app with the XMapView library. the next step is to make some simple codes to add your pins and manage clustering by XMapView library.
  
  

When we finish setting up all the environment and link our library. Now, we need to add the codes below in the viewDidLoad function in the viewController. Then, we can see our pins are added in the map and well-organized.

//step 1
//initialize the mapview,once it is initialized, do not need to 
//initialize it again
[xMapView initialize];

//step 2
//set up related parameters for XMapView
xMapView.clusteringGroupNrofPins = 5;   //set up the number of group
//that means, after 5 pins in a group
//XMapView will start to cluster them

xMapView.clusteringRadius = 80;         //set up the radius for a set of pins
//in a screen the unit for this
//one is pixels compare to screen resolution.

xMapView.enableClusteringRadiusAutoAdjust = NO;
//by default, auto radius is enabled
//it indicates XMapView to cluster pins
//based on Map Zoom Level

//step 3
//based on your dataset and create different XAnnotations.
NSArray * iconNames = @[@"chat.png",@"green.png",@"marker.png",@"orange.png"];
NSMutableArray * pins = [[NSMutableArray alloc] init];
for(int i = 0; i < 200; i++)
{
	XAnnotation * pin = [[XAnnotation alloc] init];
	
	//set up pin's latitude randomly
	pin.latitude = 43.719880 + (arc4random()%1000) * 0.0001;
	
	//set up pin's longitude randomly
	pin.longitude = -79.467060 + (arc4random()%1000) * 0.0001;
	
	//set up pin's icon randomly
	pin.iconName = [iconNames objectAtIndex:arc4random()%4];     
	
	pin.pinWidth = 35;              //set up pin's width and height,
	pin.pinHeight = 35;             //image will automatically scale
	
	//set up the center of the image
	//currently, the image middle bottom will be the
	//pin location
	pin.pinAnchorX = 0.5;           
	pin.pinAnchorY = 1;             
	
	
	//set up the group name. XMapView will
	//automatically cluster the pin in the same group
	//name
	pin.clustringGroupName = pin.iconName;
	
	[pins addObject:pin];
}

//step 4
//add pin in the map
[xMapView addXAnnotations:pins];

//step 5
//located to this pin
[xMapView setRegion:MKCoordinateRegionMake(CLLocationCoordinate2DMake(43.719880, 
-79.467060), MKCoordinateSpanMake(0.25, 0.25))];
                		

In order to get more descriptions and usages for this library, please check the sample code or check the header file in the library or send me an email. You can download the sample from this place,Moreover, you can get the source code for the XMapView component from here

Once you download the sample code, you will get the examples as below:




Example 1: Initialize a single pin

Example 2: Initialize a lot of pins

Example 3: Ignore Group Name and group all pin, and customized the clustering circle background color and font color

Example 4: set one group to not to be groupped, and pin has no animation

Example 5: set a pin not to be grouped

Example 6: clustering pins based on different group names and dynamically hide one group pins

Example 7: set up your own customized view for the pin