angular-map-it
v0.0.20
Published
Beautiful, reactive, responsive charts for Angular.JS using D3.js
Downloads
70
Readme
angular-map-it
Beautiful, reactive, responsive charts for Angular.JS using D3.js
Dependencies
- angular ~v1.4
- d3 v3.3.13
Installation
bower install angular-map-it
or
copy the files from dist/. Then add the sources to your code (adjust paths as needed) after adding the dependencies for Angular and d3.js first:
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/d3/index.js"></script>
<script type="text/javascript" src="js/angular-map-it.js"></script>
Utilisation
There are 3 types of maps so 3 directives:
- globe :- Orthographic projection of world (3D projection) with choropleth coloring enabled, rotate, zoom
- globe-touch :- Orthographic projection of world (3D projection) with touch enabled, choropleth coloring enabled, rotate, zoom
- world-map :- mercator projection with choropleth, zoom option, touch enabled
They all use mostly the same API:
Attribute | Default | Description
----------| ------- | -----------
world-data
| empty array | values across the world. Value of each country with country code. our data source would be json passed thru world-data attribute
value-range
| [0,100] | world data value range would be an array of size 2 passed thru value-range attribute. It will help color the world based on the value
color-range
| ["#F03B20", "#FFEDA0"] | color range would be an array of size 2 passed thru color-range attribute. This will color the world based on the value range.
dimension
| 600. Minimum=200. Maximum=800. | dimension would be number passed thru dimension attribute. This is the diameter of the globe
map-width
| 600. Minimum=400. Maximum=1240 | width of the world map
country-fill-color
| #aaa | default color which fills the country if a country does not have data value
country-border-color
| #fff | default color which fills the country border
Example
Javascript
var myApp = angular.module('myApp', ['angular-map-it']);
myApp.controller('Ctrl', ['$scope', function($scope) {
$scope.valueRange = [0,100];
$scope.colorRange = ["#F03B20", "#FFEDA0"];
$scope.dimension = 600;
$scope.mapWidth = 600;
$scope.descriptiveText = 'failure %';
$scope.countryFillColor = "#aaa";
$scope.countryBorderColor = "#fff";
$scope.worldData = [
{
"countryCode": "AFG",
"value": 10
},
{
"countryCode": "USA",
"value": 99
},
{
"countryCode": "CAN",
"value": 50
},
{
"countryCode": "ISR",
"value": 2
},
{
"countryCode": "NLD",
"value": 30
}
];
}]);
Markup for world-map
<world-map world-data="worldData" value-range="valueRange" color-range="colorRange" dimension="dimension"
map-width="mapWidth" descriptive-text="descriptiveText" country-fill-color="countryFillColor"
country-border-color="countryBorderColor"></world-map>
Markup for globe
<globe world-data="worldData" value-range="valueRange" color-range="colorRange" dimension="dimension"
country-fill-color="countryFillColor" country-border-color="countryBorderColor"></globe>
Markup for globe-touch
<globe-touch world-data="worldData" value-range="valueRange" color-range="colorRange" dimension="dimension"
country-fill-color="countryFillColor" country-border-color="countryBorderColor"></globe-touch>