I'm creating a directive to integrate leaflet.js maps as a datatype. However, when the map loads, it only loads 1 tile. If I resize the browser window, it reloads all tiles correctly. I've tried a local version of this in a vanilla angularjs app and it works fine, which makes me think something is not initializing correctly. Is there some umbraco event I can fire to force the page to re-paint or something!? Please help. Thanks, Simon

here's my code (which works fine outside of umbraco).

    angular.module("umbraco.directives")
.directive('lccMap', function () {
    var map, layer, centerPoint;
    return {
        restrict: 'E',
        replace: true,
        template: '<div id="map" class="map"></div>',
        link: function (scope, element, attrs) {
            function getMap() {

                //leaflet
                map = L.map('map');
                layer = L.tileLayer('//{s}.tile.osm.org/{z}/{x}/{y}.png', {
                    attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
                    maxZoom: 13
                });
                map.setView(new L.LatLng(scope.model.value.mapCentreLat, scope.model.value.mapCentreLng), 12);
                map.addLayer(layer);

                map.on('load', function (e) {
                    console.log("loaded");

                });
                map.whenReady(function (e) {
                    console.log('ready');
                });

                return map;
            }

            if (angular.isDefined(attrs.width)) {
                if (isNaN(attrs.width)) {
                    element.css('width', attrs.width);
                } else {
                    element.css('width', attrs.width + 'px');
                }
            }
            if (angular.isDefined(attrs.height)) {
                if (isNaN(attrs.height)) {
                    element.css('height', attrs.height);
                } else {
                    element.css('height', attrs.height + 'px');
                }
            }

            getMap();
            map.fireEvent('load');

        }


    }
});