jVectorMap renders small with Angularjs

Question

This question is very similar to the one posed here. However, with some small differences. My map has loaded without issue when I initially dropped it in the site. I am going through the process of adding Angularjs to the site and noticed the 'small' map issue. I have one very simple code injection which seems to be triggering something with load order.

The strange thing is the following: IF I resize the browser I eventually get to a place where the map is being displayed as expected (per div css). This is why I believe it to be a load order issue, but it is not resolved with a .resize() call.

Not sure if it is relevant but this is driven by an Express, Nodejs webserver on the backend. The map appeared as expected with the webserver set up and no Angularjs code injection.

Any help would be greatly appreciated.

Edit: Code below. Note without the ng-include (which is just a list of css files) this loads normally.

<html ng-app class="no-js lt-ie9 lt-ie8 lt-ie7">
    <head ng-include="'style.html'">
        <script src="vendor/modernizr-2.6.2-respond-1.1.0.min.js"></script>
        <script src="js/angular.min.js"></script>
    </head>
    <body>
        <div id="main" class="container">
            <div id="content" class="content bg-base section">
                <div id="map" class="span10"></div>
            </div>
        </div>
    </body>
    <script>
        $(function(){ $('#map').vectorMap(
        {
            map: 'world_mill_en', 
            backgroundColor: 'transparent',
            regionsSelectable: true,
            regionsSelectableOne: true,
            regionStyle: 
            {
                selected: { fill: 'Red' }
            }
        }); 
        });
    </script>
</html>

Are you initializing plugin from within a directive? If not you should be. Please post code — charlietfl, Mar 09 '15 at 00:12

score 0 · Accepted Answer · answered Jun 30 '15 at 01:21

I was very reluctant to load my map with a directive, but at the end of the day I caved. For those experiencing the same problem please see below for my code: HTML looks something like this:

<div class="item active">
    <div countrymap class="span10"></div> 
    <div class="carousel-caption">
        <h3 style="color:red" ><strong>{{countryName}}</strong><h3> 
    </div>
</div>

And the directive looks something like this:

app.directive('countrymap', [function() 
{
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            $(element).width('auto'),
            $(element).height(500),
            scope.$watch("countryMap", function (newCountry, oldCountry) 
            {
                setTimeout( function() 
                { 
                    $(element).vectorMap
                    ({
                        map: newCountry,
                        backgroundColor: 'transparent',
                        regionsSelectable: true,
                        regionsSelectableOne: true,
                        zoomButtons : false
                    });
                }, 20);
            })
        }
    };
}]);

Hi I tried using this code in my project but it returns me an uncaught type errpr vectorMap is not a function — bleyk, Jan 19 '18 at 05:23
@bleykFaust did you include the jvectormap javascript in your html? — user1991179, Mar 10 '18 at 20:22

Lawrence Clark · Answer 2 · 2016-09-16T00:15:42.103

The answer below works for me,after I wrap the link object with:

angular.element(document).ready(function () {}

See Example Below

 .directive('countrymap', [function () {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            angular.element(document).ready(function () {
                angular.element(element).width('auto');
                angular.element(element).height(500);
                scope.$watch("countryMap", function (newCountry, oldCountry) {
                    setTimeout(function () {
                        angular.element(element).vectorMap
                        ({
                            map: newCountry,
                            backgroundColor: 'transparent',
                            regionStyle: {
                                initial: {
                                    fill: '#000000',
                                    opacity: '.9'
                                },
                                hover: {
                                    opacity: '.5'
                                }
                            },
                            regionsSelectable: true,
                            regionsSelectableOne: true,
                            zoomButtons: true
                        });
                    }, 20);
                });
            });
        }
    };
}]);

score 0 · Answer 3 · answered Aug 26 '22 at 10:54

0

Change the css style like below.

.jvectormap-container {
    width: 100%;
    height: 100%;
    position: absolute;
    overflow: hidden;
    touch-action: none;
}

answered Aug 26 '22 at 10:54

Raveesh

50
10

jVectorMap renders small with Angularjs

3 Answers3