dmachat / angular-datamaps Goto Github PK

I know this is possible by having the map object returned by the DataMap constructor and adding the click handler with d3, how is that possible with this wrapper if there's no access to the map object?

The bower.json file contains the attribute main. This attribute has no use to bower, though is used by grunt, broccoli, and gulp tasks to compile my index.html by injecting link and script tags to these dependancies.

The current main :

does not correctly specify the angular-datamaps.js file. Rather than angular-datamaps.js I propose this be changed to dist/angular-datamaps.min.js.

Thus when grunt compile my index.html file it will inject the angular-datamaps dependancy properly. 😄

I've created a simple ng-click Changing the values and map type, but the map doesn't actually change.

Controller:

$scope.setMapUSA = function(){
    $scope.map.data[0].values[0].value = 0
    $scope.map.type = 'usa'
}

HTML:

<section id="home" ng-controller="HomeController">
        <div datamap resize
          class="pangea-wrap"
          options="map.options"
          data="map.data"
          colors="map.colors"
          type=" {{map.type}}"
          on-click="logCountry"
          >
        </div>
</section>

Notice the commit hashes are the same.

It would be very nice to push a tag / release to github for bower to use. This way if you update the library and my project requires via bower this project I don't have to worry about it breaking.

coz $watch can not detect changes in data. is there a max limit for number of colours?

Hi, how can i change this directive to load the map from the controller by using geojson file?

Including the angular-datamaps.min.js produces the following.

This is fixed when I include the non-minified version.

Hello,
First all great work. Really saved alot of my time.

I am trying to have buttons to handle the zooming functionality. So, plus to zoom in and minus to zoom out and 0 to reset. Like following

https://jsfiddle.net/wunderbart/Lom3b0gb/

Could you help me how I go about it.

Thanks

I am having an issue with the dependencies. I keep getting these gulp errors.
Also I could not find which dependencies versions are compatible with angular-maps. I tried the latest and it did not work for me. I had to do some trial and error to match the dependencies.
However, I don't think the compatibility is an issue with these errors. any suggestions on how to get rid of these warnings and errors in gulp build?

/Users/Workspace/project/src/client/app/common/charts/angular-maps/angular-datamaps.min.js
line 1 col 840 A leading decimal point can be confused with a dot: '.5'.
line 1 col 469 Missing semicolon.
line 1 col 574 Missing semicolon.
line 1 col 650 Expected an assignment or function call and instead saw an expression.
line 1 col 651 Missing semicolon.
line 1 col 653 Missing semicolon.
line 1 col 707 Missing semicolon.
line 1 col 1201 Expected an assignment or function call and instead saw an expression.
line 1 col 1202 Missing semicolon.
line 1 col 1333 Expected an assignment or function call and instead saw an expression.
line 1 col 1334 Missing semicolon.
line 1 col 1336 Missing semicolon.
line 1 col 1511 Expected an assignment or function call and instead saw an expression.
line 1 col 1512 Missing semicolon.
line 1 col 1550 Missing semicolon.
line 1 col 1638 Expected an assignment or function call and instead saw an expression.
line 1 col 1639 Missing semicolon.
line 1 col 1768 Expected an assignment or function call and instead saw an expression.
line 1 col 1769 Missing semicolon.
line 1 col 1962 Expected an assignment or function call and instead saw an expression.
line 1 col 1963 Missing semicolon.
line 1 col 2032 Missing semicolon.
line 1 col 2036 Expected an assignment or function call and instead saw an expression.
line 1 col 2037 Missing semicolon.
line 1 col 2039 Missing semicolon.
line 1 col 2041 Expected an assignment or function call and instead saw an expression.
line 1 col 421 'd3' is not defined.
line 1 col 450 'd3' is not defined.
line 1 col 619 'd3' is not defined.
line 1 col 978 'Datamap' is not defined.

⚠ 30 warnings

/Users/Workspace/project/src/client/app/common/charts/angular-maps/d3.min.js
line 1 col 25 'n' is already defined.
line 1 col 85 Missing semicolon.
line 1 col 186 Missing semicolon.
line 1 col 233 Missing semicolon.
line 1 col 270 Missing semicolon.
line 1 col 300 Missing semicolon.
line 1 col 448 Expected an assignment or function call and instead saw an expression.
line 1 col 449 Missing semicolon.
line 1 col 458 Missing semicolon.
line 1 col 587 Expected an assignment or function call and instead saw an expression.
line 1 col 588 Missing semicolon.
line 1 col 597 Missing semicolon.
line 1 col 599 Missing semicolon.
line 1 col 629 Missing semicolon.
line 1 col 677 Missing semicolon.
line 1 col 772 Missing semicolon.
line 1 col 812 Missing semicolon.
line 1 col 863 Missing semicolon.
line 1 col 912 Missing semicolon.
line 1 col 947 Missing semicolon.
line 1 col 1003 Missing semicolon.
line 1 col 1067 Missing semicolon.
line 1 col 1121 Missing semicolon.
line 1 col 1172 Missing semicolon.
line 1 col 1212 Missing semicolon.
line 1 col 1235 Missing semicolon.
line 1 col 1315 Missing semicolon.
line 1 col 1316 Missing semicolon.
line 1 col 1456 Missing semicolon.
line 1 col 1522 't' is already defined.
line 1 col 1585 Expected an assignment or function call and instead saw an expression.
line 1 col 1595 Missing semicolon.
line 1 col 1611 Missing '()' invoking a constructor.
line 1 col 1796 Missing semicolon.
line 1 col 1799 Missing semicolon.
line 1 col 1838 Missing semicolon.
line 1 col 1888 Expected a conditional expression and instead saw an assignment.
line 1 col 1902 Missing semicolon.
line 1 col 1931 Missing '()' invoking a constructor.
line 1 col 2103 Expected an assignment or function call and instead saw an expression.
line 1 col 2104 Missing semicolon.
line 1 col 2122 'i' used out of scope.
line 1 col 2123 Missing semicolon.
line 1 col 2125 Missing semicolon.
line 1 col 2128 Missing semicolon.
line 1 col 2160 Missing semicolon.
line 1 col 2232 Missing semicolon.
line 1 col 2233 Missing semicolon.
line 1 col 2305 Missing semicolon.
line 1 col 2306 Missing semicolon.
line 1 col 2306 Too many errors. (20% scanned).

✖ 1 error
⚠ 50 warnings

/Users/Workspace/project/src/client/app/common/charts/angular-maps/datamaps.world.min.js
line 1 col 25 'a' is already defined.
line 1 col 42 Missing semicolon.
line 1 col 42 Expected an identifier and instead saw '=='.
line 1 col 44 Expected an operator and instead saw 'typeof'.
line 1 col 44 Expected an assignment or function call and instead saw an expression.
line 1 col 50 Missing semicolon.
line 1 col 79 Expected an assignment or function call and instead saw an expression.
line 1 col 245 Missing semicolon.
line 1 col 254 Missing semicolon.
line 1 col 269 'b' is already defined.
line 1 col 831 Missing semicolon.
line 1 col 853 'c' is already defined.
line 1 col 1533 Missing semicolon.
line 1 col 2569 Expected an assignment or function call and instead saw an expression.
line 1 col 2570 Missing semicolon.
line 1 col 2635 'e' is already defined.
line 1 col 2762 Expected an assignment or function call and instead saw an expression.
line 1 col 2882 Missing semicolon.
line 1 col 2963 Missing semicolon.
line 1 col 2965 Expected an assignment or function call and instead saw an expression.
line 1 col 3118 Missing semicolon.
line 1 col 3180 Missing semicolon.
line 1 col 3379 Missing semicolon.
line 1 col 3487 Missing semicolon.
line 1 col 3547 Missing semicolon.
line 1 col 4366 Expected an assignment or function call and instead saw an expression.
line 1 col 4367 Missing semicolon.
line 1 col 4405 Expected an assignment or function call and instead saw an expression.
line 1 col 4406 Missing semicolon.
line 1 col 4560 Missing semicolon.
line 1 col 4641 Expected an assignment or function call and instead saw an expression.
line 1 col 4642 Missing semicolon.
line 1 col 4643 Expected an assignment or function call and instead saw an expression.
line 1 col 4644 Missing semicolon.
line 1 col 4760 Expected an assignment or function call and instead saw an expression.
line 1 col 4867 Missing semicolon.
line 1 col 4992 Expected an assignment or function call and instead saw an expression.
line 1 col 5007 Missing semicolon.
line 1 col 5103 Missing semicolon.
line 1 col 5253 Missing semicolon.
line 1 col 5424 Expected an assignment or function call and instead saw an expression.
line 1 col 5469 Expected an assignment or function call and instead saw an expression.
line 1 col 5534 'i' is already defined.
line 1 col 5729 Missing semicolon.
line 1 col 5825 Missing semicolon.
line 1 col 6389 Missing semicolon.
line 1 col 7005 Missing semicolon.
line 1 col 7231 Missing semicolon.
line 1 col 7317 Missing semicolon.
line 1 col 7334 Missing semicolon.
line 1 col 7334 Too many errors. (50% scanned).

✖ 3 errors
⚠ 48 warnings

/Users/Workspace/project/src/client/app/common/charts/angular-maps/topojson.min.js
line 1 col 89 Missing semicolon.
line 1 col 155 Missing semicolon.
line 1 col 356 Expected an assignment or function call and instead saw an expression.
line 1 col 357 Missing semicolon.
line 1 col 421 Expected a conditional expression and instead saw an assignment.
line 1 col 466 Expected a conditional expression and instead saw an assignment.
line 1 col 547 Missing semicolon.
line 1 col 574 Missing semicolon.
line 1 col 590 Expected a conditional expression and instead saw an assignment.
line 1 col 642 Expected a conditional expression and instead saw an assignment.
line 1 col 721 Missing semicolon.
line 1 col 748 Missing semicolon.
line 1 col 786 Missing semicolon.
line 1 col 903 Expected an assignment or function call and instead saw an expression.
line 1 col 904 Missing semicolon.
line 1 col 905 Expected an assignment or function call and instead saw an expression.
line 1 col 906 Missing semicolon.
line 1 col 927 Missing semicolon.
line 1 col 950 Missing semicolon.
line 1 col 1075 Missing semicolon.
line 1 col 1076 Don't make functions within a loop.
line 1 col 1087 Missing semicolon.
line 1 col 1153 Missing semicolon.
line 1 col 1165 Missing semicolon.
line 1 col 1227 Function declarations should not be placed in blocks. Use a function expression or move the statement to the top of the outer function.
line 1 col 1289 Missing semicolon.
line 1 col 1290 Function declarations should not be placed in blocks. Use a function expression or move the statement to the top of the outer function.
line 1 col 1316 Missing semicolon.
line 1 col 1317 Function declarations should not be placed in blocks. Use a function expression or move the statement to the top of the outer function.
line 1 col 1343 Missing semicolon.
line 1 col 1344 Function declarations should not be placed in blocks. Use a function expression or move the statement to the top of the outer function.
line 1 col 1415 Missing semicolon.
line 1 col 1457 Expected an assignment or function call and instead saw an expression.
line 1 col 1458 Missing semicolon.
line 1 col 1546 Missing semicolon.
line 1 col 1609 Missing semicolon.
line 1 col 1667 Missing semicolon.
line 1 col 1670 Missing semicolon.
line 1 col 1722 Missing semicolon.
line 1 col 1766 Missing semicolon.
line 1 col 1856 Missing semicolon.
line 1 col 1907 Missing semicolon.
line 1 col 2004 Missing semicolon.
line 1 col 2006 Missing semicolon.
line 1 col 2018 Missing semicolon.
line 1 col 2090 Missing semicolon.
line 1 col 2168 Expected a conditional expression and instead saw an assignment.
line 1 col 2280 Missing semicolon.
line 1 col 2283 Missing semicolon.
line 1 col 2285 Missing semicolon.
line 1 col 2285 Too many errors. (100% scanned).

The title is pretty self explanatory. This will allow me to run bower upgrade angular-datamaps.

I wasn't sure if when I submitted my pull request, if I had created a tag, it would have been included? Maybe this was my bad for bumping the version number and not making a tag for it.

How we can use datamaps with angular 2+

Unless I'm mistaken, I don't see a way to pass in plugin-specific data. It would be helpful to have this exposed through perhaps another directive that will apply the data when it changes.

For example, there's no way to supply data to the Datamaps core bubbles plugin. This may only be done if you have a handle on the Datamap instance and call map.bubbles([...]).

The effort is appreciate here. Thanks!

I have noticed that the SVG container does not get it's height and width set. I have not been able to set these attributes.

Ex :

Notice height: {{ height }}; width: {{ width }};

This occurred when using the demo as illustrated in the README.md.

P.s - Really appreciate you making this!

Hi, hi need render bubbles every 5 seconds, so i have this code:

$scope.mapPlugins = {
    bubbles: null
};

$scope.mapPluginData = {
    bubbles: getBubbles();
};

setInterval(function () {
    $scope.mapPluginData = {
        bubbles: getBubbles();
    };
}, 5000);

And the bubbles are't updated :(

But if chage the setInterval to

setInterval(function () {
    $scope.$apply(function() {
        $scope.mapPluginData = {
            bubbles: getBubbles();
        };
    });
}, 5000);

Works...

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.

Since api is not exposed via scope object, its functions are not accessible. In my scenario, i want to update color of clicked country. but couldnt call updateWithData function.

after adding "api" to scope it worked. see code below

angular.module('datamaps').directive('datamap', [
'$window',
function($window) {
return {
restrict: 'EA',
scope: {
map: '=',
plugins: '=?',
zoomable: '@?',
onClick: '&?',
pluginData: '=',
api: '=?'
},

Is this correct approach

Can you please add a license? Looking to appropriately credit the author.

Any examples or documentation on the arc functionality?

Hi,

I am using angular-datamaps for my angularjs project. I am able to create USA map based on your instruction. But there is no instruction of how to change the color of the map. I know if not using angularjs version, updateChoropleth() is used to update the color of map. Please let me know how to use updateChoropleth() in angular-datamaps?

Thanks!
mei

I found your amazing map very useful but I'm not sure how to add a click event.

Any suggestion ?

Thanks,

So far the only topojson files I've been able to use as a dataUrl for a custom geographyConfig are from https://github.com/jgoodall/us-maps/tree/master/topojson. The rendering times for these files are very slow (~10 seconds), something that doesn't seem to be as much of a problem here http://bl.ocks.org/mbostock/4122298 for example. Is this a problem inherent with datamaps, or these topojson files + datamaps?