Blocked loading mixed active content error when loading named map as layer in CARTO?

Question

I am unable to get my layers to draw on my Carto map using https. My map is created I can see the basemap, but the layers do not draw. The layers load locally, but they won't when I host the site on my server. Instead, I get the error "Blocked loading mixed active content: “http://[user].carto.com/api/....":

I have followed the instructions at this answer and CARTO https-support

1) I used https when importing both the JS library and the CSS files:

<link rel="stylesheet" href="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/themes/css/cartodb.css" />
<script src="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/cartodb.js"></script>

2) I am using createLayer, so I set the { https: true } parameter. It looks like this:

cartodb.createLayer(map, {
    user_name: '[user]',
    type: 'namedmap',
    https: true,
    named_map: {
        name: "linessimple",
        layers: [{
            layer_name: "t"
        }]
    }
})
.addTo(map);

I even tried adding the alert that is suggested in the help documentation. The alert says the layer was loaded, but then the browser blocks it. Tested in FireFox, Chrome, and Internet Explorer. Same problem.

Answer 1

Checking on old CARTO.js GitHub issues, I have found a workaround that could solve your problem: placing the https after the named map definition:

cartodb.createLayer(map, {
  user_name: user,
  type: 'namedmap',
  named_map: {
    name: 'name_whatever',
    ...
  }
}, {
  https: true
})