Merge pull request #15 from dmachat/match_options

Match options

.jshintrc

@@ -51,6 +51,7 @@
     "pause": false,
     "protractor": false,
     "moment": false,
-    "Datamap": false
+    "Datamap": false,
+    "d3": false
   }
 }

CHANGELOG.md

@@ -0,0 +1,16 @@
+## 0.1.0
+###### _May 25, 2015_
+
+##### Breaking Changes
+- Refactored scope API variables
+  - `scope.map` is now the only required input, and maps directly to the object required by Datamaps
+
+##### General
+- Updated Datamaps dependency to v0.4.0
+- Remove unneccessary non-semantic markup hindering Datamap rendering
+- API for loading plugins for Datamaps has been added
+  - Example plugin with a custom legend included in Readme
+- Responsive binding has been added
+- Zoomable option has been added
+- Allow updateChoropleth when geographies don't change
+- Slightly cleaner watch

Gruntfile.js

@@ -126,7 +126,7 @@ module.exports = function (grunt) {
           '<%= config.dist %>/<%= config.minified %>': '<%= config.dist %>/<%= config.module %>'
         },
         options: {
-          compress: true
+          compress: {}
         }
       }
     },
@@ -172,6 +172,7 @@ module.exports = function (grunt) {
   grunt.registerTask('dev', [
     'clean:dev',
     'concat:dev',
+    'ngmin:dist',
     'jshint',
     'connect:livereload',
     'watch'

README.md

@@ -1,21 +1,18 @@
 # 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 https://github.com/markmarkoh/datamaps and easily build data maps in your Angular application.
 
- - Lightweight
  - Automatically updates on changes to bound data and options
- - No dependencies beside d3, topojson and datamaps
+ - 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 https://github.com/markmarkoh/datamaps
 
 ![Datamap example](/usaMap.png?raw=true "USA Map Example")
 
 ## Install
-Clone to your vendor directory
-```sh
-git clone [email protected]:dmachat/angular-datamaps.git
-```
-
-OR
-
 Install with bower and save to your project's bower.json
 ```sh
 bower install angular-datamaps --save
@@ -28,51 +25,60 @@ angular.module('app', [
 ]);
 ```
 
-Load the datamaps and the two libraries datamaps depends on (d3 and topojson).
+Load DataMaps and the two libraries DataMaps depends on (d3 and topojson).
 ```html
 <script src="d3.js"></script>
 <script src="topojson.js"></script>
 <script src="datamaps.all.js"></script>
 <script src="angular-datamaps.js"></script>
 
 <datamap
-  options="map.options"
-  data="map.data"
-  colors="map.colors"
-  type="{{ map.type }}"
+  map="mapObject"
   >
 </datamap>
 ```
 
 Add a map configuration object to your scope to bind to the directive
 ```js
 $scope.map = {
-  type: 'usa',
-  data: [{
-    values: [
-      { "location": "USA", "value": 125 },
-      { "location": "CAN", "value": 50 },
-      { "location": "FRA", "value": 70 },
-      { "location": "RUS", "value": 312 }
-    ]
-  }],
-  colors: ['#666666', '#b9b9b9', '#fafafa'],
+  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):
+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):
 
 ```html
 <datamap
-  options="map.options"
-  data="map.data"
-  colors="map.colors"
-  type="{{ map.type }}"
+  map="mapObject"
   on-click="updateActiveGeography"
   >
 </datamap>
@@ -87,6 +93,46 @@ $scope.updateActiveGeography = function(geography) {
 }
 ```
 
+### Toggle zoom ###
+Set the `zoomable` attribute to toggle a simple zoom on the map.
+
+### Responsive ###
+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.
+
+```html
+<datamap
+  map="mapObject"
+  plugins="mapPlugins"
+  >
+</datamap>
+```
+
+```js
+$scope.mapObject = mapObject;
+$scope.mapPlugins = {
+  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] + '">',
+                  fillKey,
+                  '</li>');
+    }
+    html.push('</ul>');
+    d3.select(this.options.element).append('div')
+      .attr('class', 'datamaps-legend')
+      .html(html.join(''));
+  }
+};
+```
+
 ## Build it yourself!
 angular-datamaps is built with grunt.
 

bower.json

@@ -1,12 +1,12 @@
 {
   "name": "angular-datamaps",
   "description": "AngularJS Datamaps -- provides an Angular directive to wrap https://github.com/markmarkoh/datamaps",
-  "version": "0.0.4",
+  "version": "0.1.0",
   "author": "Drew Machat<[email protected]>",
   "main": "dist/angular-datamaps.min.js",
   "dependencies": {
     "angular": ">=1.0.8",
-    "datamaps": "~0.3.2"
+    "datamaps": "~0.4.0"
   },
   "devDependencies": {
     "es5-shim": "~2.1.0",