leaflet map is loading partial tiles

Question

Leaflet is loading partial tiles. Below is the screenshot:

Below is my code, where I am trying center the marker using panTO() function:

        $scope.plotMap = function(lat, lng) {
            var latlng = new L.LatLng(lat, lng);

            $scope.map = new L.Map('detailsmap', {
                center: latlng,
                zoom: 3}
            );

            var center = $scope.map.project(latlng);
            center = new L.point(center.x - 150, center.y - 100);
            var target = $scope.map.unproject(center);
            $scope. map.panTo(target);

            L.tileLayer(
                'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
                {
                attribution: '&copy; <a href="http://openstreetmap' +
                    '.org">OpenStreetMap</a> contributors',
                }
            ).addTo($scope.map);

            L.marker(latlng, {icon: new L.Icon.Default()}).addTo(
                $scope.map);
        };

Answer 1

Calling invalidateSize() function solved the problem. Below is the code snippet:

    $scope.plotMap = function(lat, lng) {
        var latlng = new L.LatLng(lat, lng);

        $scope.map = new L.Map('detailsmap', {
            center: latlng,
            zoom: 3}
        );

        var center = $scope.map.project(latlng);
        center = new L.point(center.x - 150, center.y - 100);
        var target = $scope.map.unproject(center);
        $scope. map.panTo(target);

        L.tileLayer(
            'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
            {
            attribution: '&copy; <a href="http://openstreetmap' +
                '.org">OpenStreetMap</a> contributors',
            }
        ).addTo($scope.map);

        L.marker(latlng, {icon: new L.Icon.Default()}).addTo(
            $scope.map);
    };

    $scope.dispMap = function() {
        $scope.plotMap();
        $scope.map.invalidateSize();
    };