A charting library to visualize and interact with a vector map on iOS. It's like Geochart but for iOS!

Arthur

Last update: Dec 30, 2022

Related tags

Charts FSInteractiveMap

Overview

FSInteractiveMap

A charting library to visualize data on a map. It's like geochart but for iOS!

The idea behind this library is to load a SVG file of a map and display it simply in a view. On top of that you can know when a specific area is clicked.

Please note that the SVG loading is quite simple and doesn't support all the features of the SVG file format. It's just good enough to display most of the maps I found in SVG!

Screenshots

Installing FSInteractiveMap

Add the contents of the FSInteractiveMap project to your directory or simply add the following line to your Podfile:

pod "FSInteractiveMap"

How to use

FSInteractiveMap is a subclass of UIView so it can be added as regular view. It's basically loading a map from a SVG file. I bundled a few svg maps in the example but you can add any SVG to your project and load it.

NSDictionary* data = @{	@"asia" : @12,
                        @"australia" : @2,
                        @"north_america" : @5,
                        @"south_america" : @14,
                        @"africa" : @5,
                        @"europe" : @20
                      };
    
FSInteractiveMapView* map = [[FSInteractiveMapView alloc] initWithFrame:self.view.frame];

[map loadMap:@"world-continents-low" withData:data colorAxis:@[[UIColor lightGrayColor], [UIColor darkGrayColor]]];

[map setClickHandler:^(NSString* identifier, CAShapeLayer* layer) {
    self.detailDescriptionLabel.text = [NSString stringWithFormat:@"Continent clicked: %@", identifier];
}];

An example of a "clickable" map:

FSInteractiveMapView* map = [[FSInteractiveMapView alloc] initWithFrame:CGRectMake(16, 96, self.view.frame.size.width - 32, 500)];
[map loadMap:@"usa-low" withColors:nil];

[map setClickHandler:^(NSString* identifier, CAShapeLayer* layer) {
    if(_oldClickedLayer) {
        _oldClickedLayer.zPosition = 0;
        _oldClickedLayer.shadowOpacity = 0;
    }
    
    _oldClickedLayer = layer;
    
    // We set a simple effect on the layer clicked to highlight it
    layer.zPosition = 10;
    layer.shadowOpacity = 0.5;
    layer.shadowColor = [UIColor blackColor].CGColor;
    layer.shadowRadius = 5;
    layer.shadowOffset = CGSizeMake(0, 0);
}];

How to find SVG maps

There are a few places where you can find svg files that are suitable for FSInteractiveMap. Here is a short list:

Contact & Issues

If you have any issues please let me know in the issue part of this project. For any other things you can reach me on twitter or by email.

You might also like...

Dr-Charts Easy to use, customizable and interactive charts library for iOS in Objective-C

Comments

SVG image is not displayed correctly.

My picture 1.svg is not displayed correctly. Not all layers are in place. Is this a program bug or a svg file? P.S. in my attached project look at the Example 3

1.svg.zip FSInteractiveMap-master.zip

opened by sergeyvishnyov 0
Add new maps of other countries

Need to add more maps of other countries but when I download it add to code it does not seem to work. I download South Korea map from this link [https://upload.wikimedia.org/wikipedia/commons/b/b2/South_Korea_location_map.svg]

Or if there is an another way please let me know.

opened by PaurushTuple 0

Swift documentation

in swift working with:

let map: FSInteractiveMapView = FSInteractiveMapView()
 map.frame = self.view.frame
 var mapData = [String: Int]()
 mapData["IR-01"] = 0
 mapData["IR-02"] = 10
 var mapColors = [UIColor]()
 mapColors.append(UIColor(red:0.26, green:0.112, blue:0.0, alpha:1.0))
 mapColors.append(UIColor(red:0.45, green:0.132, blue:0.0, alpha:1.0))


 map.loadMap("iranHigh", withData:mapData, colorAxis:mapColors)
 view.addSubview(map)
 view.setNeedsDisplay()

its working correctly but i cant add click Handler

how can i add click handler in Swift? @ArthurGuibert @birslip

opened by mahdigh99 12