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

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
Dr-Charts Easy to use, customizable and interactive charts library for iOS in Objective-C

dr-charts Easy to use, customizable and interactive charts library for iOS in Objective-C Features: Multiple chart types Line / Multiple lines / Lines

Easy to use and highly customizable pie charts library for iOS
Easy to use and highly customizable pie charts library for iOS

PieCharts Easy to use and highly customizable pie charts library for iOS Swift 4.2, iOS 8+ Video Features: Customizable slices Add overlays using simp

Meet cute and very flexibility library for iOS application for different data view in one circle diagram.
Meet cute and very flexibility library for iOS application for different data view in one circle diagram.

SMDiagramViewSwift Meet cute and very flexibility library for iOS application for different data view in one circle diagram. The opportunity of transf

FLCharts: Easy to use and highly customizable charts library for iOS
FLCharts: Easy to use and highly customizable charts library for iOS

FLCharts Requirements Xcode 11 / Swift 5 iOS = 11.0 Installation FLCharts is av

Easy to use and highly customizable pie charts library for iOS
Easy to use and highly customizable pie charts library for iOS

PieCharts Easy to use and highly customizable pie charts library for iOS Swift 4.2, iOS 8+ Video Features: Customizable slices Add overlays using simp

FSLineChart  A line chart library for iOS.
FSLineChart A line chart library for iOS.

FSLineChart A line chart library for iOS. Screenshots Installing FSLineChart Add the contents of the FSLineChart project to your directory or simply a

Easy to use Spider (Radar) Chart library for iOS written in Swift.
Easy to use Spider (Radar) Chart library for iOS written in Swift.

DDSpiderChart Easy to use Spider (Radar) Chart library for iOS written in Swift. Requirements iOS 8.0+ / macOS 10.10+ / tvOS 9.0+ / watchOS 2.0+ Xcode

Line Chart library for iOS written in Swift
Line Chart library for iOS written in Swift

Swift LineChart Usage var lineChart = LineChart() lineChart.addLine([3, 4, 9, 11, 13, 15]) Features Super simple Highly customizable Auto scaling Touc

Core Charts | Basic Scrollable Chart Library for iOS
Core Charts | Basic Scrollable Chart Library for iOS

Core Charts | Basic Chart Library for iOS HCoreBarChart VCoreBarChart Requirements Installation Usage Appearance Customization Getting Started You nee

Comments
  • SVG image is not displayed correctly.

    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

    photo_2018-12-27_14-15-02 screen shot 2018-12-27 at 2 26 35 pm 1.svg.zip FSInteractiveMap-master.zip

    opened by sergeyvishnyov 0
  • Add new maps of other countries

    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

    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
Owner
Arthur
Arthur
iOS-based charting library for both line and bar graphs.

JBChartView Introducing JBChartView - Jawbone's iOS-based charting library for both line and bar graphs. It is easy to set-up, and highly customizable

Jawbone 3.8k Jan 1, 2023
SwiftUICharts - A simple line and bar charting library that supports accessibility written using SwiftUI.

SwiftUICharts - A simple line and bar charting library that supports accessibility written using SwiftUI.

Majid Jabrayilov 1.4k Jan 9, 2023
Elegant Line Graphs for iOS. (Charting library)

BEMSimpleLineGraph BEMSimpleLineGraph makes it easy to create and customize line graphs for iOS. BEMSimpleLineGraph is a charting library that makes i

Boris Emorine 2.7k Dec 26, 2022
Declarative charting and visualization to use with SwiftUI

Chart Declarative charting and visualization to use with SwiftUI The package is in open development with a goal of making a declara

null 11 Jun 3, 2022
Line plot like in Robinhood app in SwiftUI

RHLinePlot Line plot like in Robinhood app, in SwiftUI Looking for how to do the moving price label effect? Another repo here. P.S. Of course this is

Wirawit Rueopas 234 Dec 27, 2022
Flower-like chart written in Swift

FlowerChart - custom chart written in Swift Fully vector flower-shaped chart written in Swift Flower-shaped chart written in Swift, this repo is a sam

Alexander Telegin 15 Jun 9, 2021
A SwiftUI Contribution Chart (GitHub-like) implementation package

ContributionChart A contribution chart (aka. heatmap, GitHub-like) library for iOS, macOS, and watchOS. 100% written in SwiftUI. It Supports Custom Bl

null 41 Dec 27, 2022
Simple and intuitive iOS chart library. Contribution graph, clock chart, and bar chart.

TEAChart Simple and intuitive iOS chart library, for Pomotodo app. Contribution graph, clock chart, and bar chart. Supports Storyboard and is fully ac

柳东原 · Dongyuan Liu 1.2k Nov 29, 2022
A powerful 🚀 Android chart view / graph view library, supporting line- bar- pie- radar- bubble- and candlestick charts as well as scaling, panning and animations.

⚡ A powerful & easy to use chart library for Android ⚡ Charts is the iOS version of this library Table of Contents Quick Start Gradle Maven Documentat

Philipp Jahoda 36k Jan 5, 2023
SwiftCharts - Easy to use and highly customizable charts library for iOS

SwiftCharts Easy to use and highly customizable charts library for iOS Features: Bars - plain, stacked, grouped, horizontal, vertical Scatter Lines (s

Ivan Schütz 2.4k Jan 4, 2023