fill on click?

[aljamala]

Is there a way to fill a region (state in my example) when clicked? I basically want the user to be able to select/deselect states by clicking on the map, hence creating their own region.

[aljamala]

If I submit a Pull Request to handle click events and fill on click would you accept it? I already have made the changes locally and they seem to be working out pretty well so far. I originally tried adding to datamaps itself; but that didn't work out so well when wanting to add some custom click handling as well.

[dmachat]

You are of course welcome to submit pull requests, but only general use-case improvements will probably be considered. Your app should be responsible for managing the data you want. Datamaps will just provide the map rendering and interaction events.

For this, it sounds like all you need to do is connect an on-click callback in your parent app to change the data object for the geography that has been clicked. So, something like

$scope.setFillGeography = function(geography) {
  $scope.map.data[geography.id].selected = !$scope.map.data[geography.id].selected;
  $scope.map.data[geography.id].fillKey = $scope.map.data[geography.id].selected;
}

[dmachat]

You do need to use $scope.$appy(), since the click event in datamaps happens outside the angular digest loop. Also be aware that there is currently a limitation in setting the correct fill color on click in datamaps with updateChoropleth ( https://github.com/markmarkoh/datamaps/issues/231), so you'll have to leave staticGeoData set to false and rerender the whole map.

On Fri, Sep 25, 2015 at 10:40 AM Edwin L notifications@github.com wrote:

I tried above callback and it seems the map is not updating even thought the fillKey data is changed on click. Do I need re-render the map after click event?

Thanks

— Reply to this email directly or view it on GitHub https://github.com/dmachat/angular-datamaps/issues/13#issuecomment-143241038 .

Drew Machat Director of Emerging Technology Alley Interactive

[populationtwo]

Awesome! Thanks :+1:

I was using controller as syntax (this.$apply()) hence the $scope not binding. I had to change it to $scope.$apply().