You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
FusionMaps is a companion package meant to be used in conjunction with [FusionCharts](https://www.npmjs.com/package/fusioncharts) to render data-driven maps (over 2,000+ maps for different continents, countries, states & regions). This package contains choropleth maps that can render on both desktop & mobile, with extended functionality like city or location markers, annotations, events etc.
1
+
FusionMaps is a companion package meant to be used in conjunction with [FusionCharts](https://www.npmjs.com/package/fusioncharts) to render data-driven maps (over 2,000+ maps for different continents, countries, states & regions). This package contains choropleth maps that can render on both desktop & mobile, with extended functionality like city or location markers, annotations, events etc.
2
2
3
-
This package contains definition files for all the maps. Map definition files are the path files required by FusionMaps to plot a map for a particular region. Each map has its own path file._By default, FusionCharts package only includes definition files for two maps - the World map and the USA map._
3
+
This package contains definition files for all the maps. Map definition files are the path files required by FusionMaps to plot a map for a particular region. Each map has its own path file.
4
4
5
-
### What's New in FusionMaps 3.23.0
5
+
_By default, FusionCharts package only includes definition files for two maps - the World map and the USA map._
6
6
7
-
#### Improvements
8
-
9
-
- The rendering issues of Japan's 16 provinces were resolved. These provinces include Yamagata, Tochigi, Saitama, Tokyo, Toyama, Yamanashi, Shizuoka, Shiga, Wakayama, Tottori, Shimane, Okayama, Yamaguchi, Tokushima, Saga, and Okinawa.
10
-
- Fixed the issue where certain values skewed the Radial bar
11
-
- Two additional provinces were incorporated into Costa Rica maps: Monteverde and Puerto Jimenez
12
-
13
-
<br />
14
-
15
-
- Official Website: [https://www.fusioncharts.com/](https://www.fusioncharts.com/)
-[Using FusionMaps as an ES Module](#using-fusionmaps-as-an-es-module)
@@ -32,8 +22,8 @@ This package contains definition files for all the maps. Map definition files ar
32
22
-[Contact Support](#contact-support)
33
23
-[Folder Structure](#folder-structure)
34
24
35
-
## Installing FusionMaps
36
25
26
+
## Installing FusionMaps
37
27
There are multiple ways to install FusionMaps. For general instructions, refer to this [developer docs page](https://www.fusioncharts.com/dev/map-guide/setup).
38
28
39
29
**Direct Download**
@@ -45,88 +35,79 @@ Instead of downloading, you can also use FusionCharts’s CDN to access map defi
`MAP_ALIAS` is the name of the map that you're plotting, used by FusionMaps. For each map, FusionMaps has a different JavaScript alias. e.g., World Map is `world` etc.
50
39
51
40
**Install from NPM**
52
-
53
41
```bash
54
42
npm install --save fusionmaps
55
43
```
56
-
57
44
You will also need FusionCharts package installed on your system to use maps. You can install the same using below command
58
-
59
45
```bash
60
46
npm install --save fusioncharts
61
47
```
62
-
63
48
See [npm documentation](https://docs.npmjs.com/) to know more about npm usage.
64
49
65
-
## Getting Started
66
50
51
+
## Getting Started
67
52
Easiest way to render map is to include the FusionCharts JavaScript library files and map definition file in your webpage, create `<div>` container and chart instance, configure the data and render. Check this HTML snippet below:
renderAt:"chart-container", // container where chart will render
86
-
width:"600",
87
-
height:"400",
88
-
dataFormat:"json",
89
-
dataSource: {
90
-
chart: {
91
-
caption:"Average Annual Population Growth",
92
-
subcaption:" 1955-2015",
93
-
numbersuffix:"%",
94
-
includevalueinlabels:"1",
95
-
labelsepchar:": ",
96
-
entityFillHoverColor:"#FFF9C4",
97
-
theme:"fusion",
98
-
},
99
-
data: [
100
-
{ id:"NA", value:".82", showLabel:"1" },
101
-
{ id:"SA", value:"2.04", showLabel:"1" },
102
-
{ id:"AS", value:"1.78", showLabel:"1" },
103
-
{ id:"EU", value:".40", showLabel:"1" },
104
-
{ id:"AF", value:"2.58", showLabel:"1" },
105
-
{ id:"AU", value:"1.30", showLabel:"1" },
106
-
],
107
-
},
108
-
}).render();
109
-
});
61
+
</head>
62
+
<body>
63
+
<divid="chart-container"></div>
64
+
<script>
65
+
FusionCharts.ready(function () {
66
+
// chart instance
67
+
var chart =newFusionCharts({
68
+
type:"world",
69
+
renderAt:"chart-container", // container where chart will render
70
+
width:"600",
71
+
height:"400",
72
+
dataFormat:"json",
73
+
dataSource: {
74
+
"chart": {
75
+
"caption":"Average Annual Population Growth",
76
+
"subcaption":" 1955-2015",
77
+
"numbersuffix":"%",
78
+
"includevalueinlabels":"1",
79
+
"labelsepchar":": ",
80
+
"entityFillHoverColor":"#FFF9C4",
81
+
"theme":"fusion"
82
+
},
83
+
"data": [
84
+
{ "id":"NA", "value":".82", "showLabel":"1" },
85
+
{ "id":"SA", "value":"2.04", "showLabel":"1" },
86
+
{ "id":"AS", "value":"1.78", "showLabel":"1" },
87
+
{ "id":"EU", "value":".40", "showLabel":"1" },
88
+
{ "id":"AF", "value":"2.58", "showLabel":"1" },
89
+
{ "id":"AU", "value":"1.30", "showLabel":"1" }
90
+
]
91
+
}
92
+
}).render();
93
+
});
110
94
</script>
111
-
</body>
95
+
</body>
112
96
</html>
113
97
```
114
-
115
98
As you can see in above example, each continent is referenced using an ID. Each map in FusionMaps has its own regions, each of which have its own ID and name. These are present in specification sheets for the map. You can find specification sheets for all maps [here](https://www.fusioncharts.com/dev/maps/spec-sheets/).
- API [Events](https://www.fusioncharts.com/dev/api/fusioncharts/fusioncharts-events) & [Methods](https://www.fusioncharts.com/dev/api/fusioncharts/fusioncharts-methods)
- API [Events](https://www.fusioncharts.com/dev/api/fusioncharts/fusioncharts-events) & [Methods](https://www.fusioncharts.com/dev/api/fusioncharts/fusioncharts-methods)
123
106
124
107
## Using FusionMaps as an ES Module
125
-
126
-
FusionMaps can be loaded as an ES module via transpilers.
108
+
FusionMaps can be loaded as an ES module via transpilers.
127
109
128
110
The following examples presumes you are using npm to install FusionCharts and FusionMaps, see Installing FusionMaps for more details.
129
-
130
111
```javascript
131
112
importFusionChartsfrom'fusioncharts/core';
132
113
importMapsfrom'fusioncharts/maps';
@@ -169,35 +150,34 @@ var chart = new FusionCharts({
169
150
chart.render();
170
151
```
171
152
172
-
## Related Packages
173
153
154
+
## Related Packages
174
155
### Front-end Integrations to help you easily integrate FusionCharts Suite in your projects/apps
|AngularJS (1.x and above)|[Github Repo](https://github.com/fusioncharts/angularjs-fusioncharts)|[Documentation](https://www.fusioncharts.com/dev/getting-started/angular/angularjs/your-first-chart-using-angularjs)|
179
-
|Angular (2.x and above)|[Github Repo](https://github.com/fusioncharts/angular-fusioncharts)|[Documentation](https://www.fusioncharts.com/dev/getting-started/angular/angular/your-first-chart-using-angular)|
|AngularJS (1.x and above)|[Github Repo](https://github.com/fusioncharts/angularjs-fusioncharts)|[Documentation](https://www.fusioncharts.com/dev/getting-started/angular/angularjs/your-first-chart-using-angularjs)|
160
+
|Angular (2.x and above)|[Github Repo](https://github.com/fusioncharts/angular-fusioncharts)|[Documentation](https://www.fusioncharts.com/dev/getting-started/angular/angular/your-first-chart-using-angular)|
|Ruby on Rails|[Github Repo](https://github.com/fusioncharts/rails-wrapper)|[Documentation](https://www.fusioncharts.com/dev/getting-started/ruby-on-rails/your-first-chart-using-ruby-on-rails)|
| ASP.NET (C#) |[Github Repo](https://github.com/fusioncharts/asp-net-wrapper)|[Documentation](https://www.fusioncharts.com/dev/getting-started/aspnet/your-first-chart-using-aspnet)|
189
-
| ASP.NET (VB) |[Github Repo](https://github.com/fusioncharts/vb-net-wrapper)|[Documentation](https://www.fusioncharts.com/dev/getting-started/aspnet/your-first-chart-using-aspnet)|
0 commit comments