Search code examples
javascriptjquerycssangularjsjvectormap

jVectorMap renders small with Angularjs

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>
Solution

  • 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);
            })
        }
    };
}]);