angular-map-it v0.0.20

angular-map-it

Beautiful, reactive, responsive charts for Angular.JS using D3.js

Dependencies

1. angular ~v1.4
2. 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:

1. globe :- Orthographic projection of world (3D projection) with choropleth coloring enabled, rotate, zoom
2. globe-touch :- Orthographic projection of world (3D projection) with touch enabled, choropleth coloring enabled, rotate, zoom
3. world-map :- mercator projection with choropleth, zoom option, touch enabled

They all use mostly the same API:

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>

Plunker Playground

Markup for globe

<globe world-data="worldData" value-range="valueRange" color-range="colorRange" dimension="dimension"
country-fill-color="countryFillColor" country-border-color="countryBorderColor"></globe>

Plunker Playground

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>

Plunker Playground