Leaflet Heatmap - Map not displaying on the right spot

Question

I'm using leaflet-heatmap library to represent a simple heatmap with latitude longitude coordinates. I have managed to implement the library correctly, but the problem is that the map is dislaying in the top-left corner of the container instead of in the center. Here is a picture which shows the problem.

However, magicly when I resize the browser window to any size different from the one with which the page was loaded, the map shows perfectly like this.

Here is the code I'm using:

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v1.0.0-rc.1/leaflet.css">
<script src="http://cdn.leafletjs.com/leaflet/v1.0.0-rc.1/leaflet-src.js"></script>
<script src="https://pvb.io/js/heatmap.js"></script>
<script src="https://pvb.io/js/leaflet-heatmap.js"></script>

<style>
    #map-canvas {
        width: 100%;
        height: 400px;
        border:0;
        margin: 0;
        padding: 0;
    }
</style>
<div id="map-canvas"> 
</div>

<script>
    let heatmapData = []
    this.data.forEach(function(point){ //this.data is an array of dicts containing the coordinates
        heatmapData.push({lat: point.lat, lng: point.lon, count: 1})
    });

    let dataCfg = {
        data: heatmapData
    };

    let cfg = {
        "radius": 15,
        "maxOpacity": .5, 
        "scaleRadius": false, 
        "useLocalExtrema": true,
        latField: 'lat',
        lngField: 'lng',
        valueField: 'count',
        blur: 0.95,
        gradient: { 
            '.5': 'yellow',
            '.8': 'orange',
            '.95': 'red'
        }
    };

    let map = new L.Map('map-canvas').setView([40.416729, -3.703339], 5);
    L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);

    let heatmapLayer = new HeatmapOverlay(cfg).addTo(map);

    heatmapLayer.setData(dataCfg);
</script>

How is it possible that the map only loads correctly when the window is resized? I'm using it on a Polymer component, just in case it is transcendental for the problem.