vips vips - 3 months ago 18
AngularJS Question

leaflet map is loading partial tiles

Leaflet is loading partial tiles. Below is the screenshot:

enter image description here

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

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();
    };