Skip to content
Angular directive for d3 Datamaps
Branch: master
Clone or download
Latest commit 1813d38 Mar 2, 2016
Type Name Latest commit message Commit time
Failed to load latest commit information.
dev Responsive, choropleth animations, readme and changelog May 26, 2015
dist Fixes issue #17. Provided a way to pass data to plugins, including th… Jun 11, 2015
src Merge pull request #19 from adrianbj/master Sep 26, 2015
.travis.yml Responsive, choropleth animations, readme and changelog May 26, 2015
Gruntfile.js Minified for release May 26, 2015
LICENSE Create LICENSE Mar 2, 2016
bower.json update package versions Nov 16, 2015
karma.conf.js Initial commit for Angular Datamaps directive Sep 1, 2014

Angular Datamaps

Note: This directive's scope values have changed as of v0.1.0 to better match the object structure used by DataMaps.

Provides an Angular directive to wrap and easily build data maps in your Angular application.

  • Automatically updates on changes to bound data and options
  • onClick events integrate with your parent controllers
  • Evaluates plugins passed to the directive
  • Easily toggle zoom functionality
  • Documentation for available options can be found at

Datamap example


Install with npm and save to your project's package.json

npm install angular-datamaps --save

Install with bower and save to your project's bower.json

bower install angular-datamaps --save

Add the module to your app dependencies and include it in your page.

angular.module('app', [

Load DataMaps and the two libraries DataMaps depends on (d3 and topojson).

<script src="d3.js"></script>
<script src="topojson.js"></script>
<script src="datamaps.all.js"></script>
<script src="angular-datamaps.js"></script>


Add a map configuration object to your scope to bind to the directive

$scope.mapObject = {
  scope: 'usa',
  options: {
    width: 1110,
    legendHeight: 60 // optionally set the padding for the legend
  geographyConfig: {
    highlighBorderColor: '#EAA9A8',
    highlighBorderWidth: 2
  fills: {
    'HIGH': '#CC4731',
    'MEDIUM': '#306596',
    'LOW': '#667FAF',
    'defaultFill': '#DDDDDD'
  data: {
    "AZ": {
      "fillKey": "MEDIUM",
    "CO": {
      "fillKey": "HIGH",
    "DE": {
      "fillKey": "LOW",
    "GA": {
      "fillKey": "MEDIUM",

Geography click events

The DataMaps click event can trigger a bound function with the clicked geography object. just add your custom function to the on-click attribute, like this (notice there are no parenthesis):


Then in your controller, that function gets the selected geography object as it's argument, like so:

$scope.updateActiveGeography = function(geography) {
  $scope.stateName =;
  $scope.stateCode =;

Toggle zoom

Set the zoomable attribute to toggle a simple zoom on the map.


Bind the built-in Datamaps responsive methods by setting $scope.mapObject.responsive = true.

Animated Update Choropleth

Set options.staticGeoData = true to allow the map to update with only updateChoropleth. Update choropleth only works if updating is all we're doing. If geographies are added or removed from data, we have to redraw the map, so use this to explicitly say whether or not the directive can update choropleth mappings only.

Adding plugins

You may add plugins that will be evaluated by the DataMaps plugin system in order to extend the labels or legend, for example. Use it by providing an object with plugin functions keyed by name.

Data may be supplied to plugins through the plugin-data. This should be an object with keys corresponding to plugin names.

If you would like to pass data into a core Datamaps plugin, be sure to include an empty entry for the plugin in the plugin object. This will ensure that gets processed. Datamaps won't override a plugin that is already defined.

$scope.mapObject = mapObject;
$scope.mapPlugins = {
  bubbles: null,
  customLegend: function(layer, data, options) {
    var html = ['<ul class="list-inline">'],
        label = '';
    for (var fillKey in this.options.fills) {
      html.push('<li class="key" ',
                  'style="border-top: 10px solid ' + this.options.fills[fillKey] + '">',
      .attr('class', 'datamaps-legend')
$scope.mapPluginData = {
  bubbles: [{name: 'Bubble 1', latitude: 21.32, longitude: -7.32, radius: 45, fillKey: 'gt500'}]

Build it yourself!

angular-datamaps is built with grunt.

To run a simple connect server to see the directive in action or to develop

grunt dev

To run the tests

grunt test

or run in autotest mode

grunt autotest

And when you're done minify it

grunt build
You can’t perform that action at this time.