Angular JS - jvector map accessing "onRegionClick"

Question

I'm creating a dashboard and I wanted to add this USA map and when I click on any of the region I want it's population to be printed out on the web page from the cities.json file.

Service for importing the json file.

App.factory('citiesData', ['$http', function($http) {

    return {

        getMessageData : function () {

            return $http({ method: 'GET', url: '../app/_data/usa-cities.json'})

            .then(function(response) {

                return response.data;

            }, function(errorResponse) {

                throw errorResponse.status;

            });

        }

    }

}]);

I created a directive for the jvectormap plugin and everything's working just fine.

Here's my directive code.

App.directive('mapUsa', [function() {

    return {

        restrict: 'A',
        link: function(scope, element, attrs) {

            element.vectorMap({
                map: 'us_aea_en',
                backgroundColor: 'transparent',
                zoomButtons: false,
                regionStyle: {
                    initial: {
                        fill: '#343434' 
                    },
                    hover: {
                        fill: '#242424'
                    }
                },
                onRegionClick: function(event, code) {

                },
                markerStyle: {
                    initial: {
                        fill: '#F0A518',
                        stroke: '#F0A518',
                    }
                },
                markers: [
                    {latLng: [37.78, -122.41], name: 'San Francisco', style: {r: 10}},
                    {latLng: [40.71, -74], name: 'New York City', style: {r: 15}},
                    {latLng: [41.89, -87.62], name: 'Chicago', style: {r: 5}},
                    {latLng: [34.00, -118.25], name: 'Los Angeles', style: {r: 20}},
                    {latLng: [34.00, -106.00], name: 'New Mexico', style: {r: 10}},
                    {latLng: [44.50, -100.00], name: 'South Dakota', style: {r: 13}},
                    {latLng: [25.78, -80.22], name: 'Miami', style: {r: 7}},
                ]
            });

        }

    }

}])

Sample JSON :

{ "US-AL": { "name": "Alabama", "population": 4833722 }, "US-AK": { "name": "Alaska", "population": 735132 }

HTML :

<div class="col-md-8">
    <div class="map-container padding-all-15">
        <div class="map-usa margin-bottom-15" map-usa></div>
    </div>
</div>
<div class="col-md-4">
    <div class="header-container">
        <h4>Population</h4>
        <span></span>
    </div>
</div>

The code param in the onRegionClick returns me the code and I created a object for each code in the cities.json file.

I wanted to know how can I not access that service in a controller inside the directive.
How can I access the onRegionClick to get the code and retrieve the respective data of the region clicked.

Using a jquery plugin and trying to use the data binding of angular is the correct method or is there any other method that has to be followed for this scenario?

Thanks in advance.

Raphael Müller · Accepted Answer · 2014-07-28 08:04:41Z

0

It's just an idea, maybe it's working.

App.directive('mapUsa', [function() {

return {

    restrict: 'A',
    link: function(scope, element, attrs) {
      element.vectorMap({
      ...
         onRegionClick: function(event, code) {
              scope.onRegionClick(event, code);
         }
      }
    },
    controller: ['citiesData', function(citiesData){
         onRegionClick: function(event, code) {
              console.log(citiesData);
         }
    }]

answered Jul 28, 2014 at 8:04

Raphael Müller

2,2002 gold badges16 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Dinuka Thilanga · Accepted Answer · 2017-01-31 05:06:18Z

You may do something like this

    var mdata;
    app.controller('MapCtrl',['$scope','$location','$http', function($scope, $location,$http) {

            $http.get('ajax/data.json').success(function(data, status, headers, config){
                mdata = data;
              //   $scope.mapdata = data;
            }).error(function(data, status, headers, config) {

                alert("Error retrieving data");
            })

    }]);

    app.directive("mapUsa", [function () {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            scope.$watch("mdata", function (n, o) {
                $(element).vectorMap({
                    map: 'world_mill_en',
                    backgroundColor: "transparent",
                    regionStyle: {
                        initial: {
                            fill: '#e4e4e4',
                            "fill-opacity": 1,
                            stroke: 'none',
                            "stroke-width": 0,
                            "stroke-opacity": 1
                        }
                    },
                    series: {
                        regions: [{
                            values: mdata,
                            scale: ["#92c1dc", "#ebf4f9"],
                            normalizeFunction: 'polynomial'
                        }]
                    },
                    onRegionLabelShow: function (e, el, code) {

                        if (typeof mdata[code] != "undefined")
                            el.html(el.html() + ': ' + mdata[code] + ' new visitors');
                    },
                    onRegionClick: function (event, code) {

                    },
                    markerStyle: {
                        initial: {
                            fill: '#F0A518',
                            stroke: '#F0A518'
                        }
                    }
                });
            });

        }

    }

}]);

Collectives™ on Stack Overflow

Angular JS - jvector map accessing "onRegionClick"

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related