2

I'm having trouble getting data from a createLayer layer to populate a CARTO map when hosted on GitHub. The map itself draws but the data is missing, although, it works when hosted locally. Also, I am able to view data using a CARTO vis.json URL hosted on GitHub. Below is the code, which is a little messy since I'm fairly new to CARTO.

Has anyone encountered a similar problem in the past and found a solution?

      var tableName = "powerplants_us_201603";

      // public layer in CARTO account for data queries
      var layerSource = {
        user_name: 'mishmashmaps',
        type: 'cartodb',
        sublayers: [{
          sql: "SELECT * FROM " + tableName, // All power plants in dataset
          cartocss: $("#simple").text() // Simple visualization
        }]
      }

      var sublayer;

      var map_object = new L.Map('map', {
        center: [42.6526,-73.7562], // Albany
        zoom: 7
      });

      L.tileLayer('http://{s}.basemaps.cartocdn.com/dark_nolabels/{z}/{x}/{y}.png',attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
      }).addTo(map_object);

      cartodb.createLayer(map_object,layerSource)
        .addTo(map_object)
        .done(function(layer) {
          sublayer = layer.getSubLayer(0);
          createSelector(sublayer);
        })
        .error(function(err) {
          console.log("error: " + err);
        });
    }
1

The console is showing three different errors:

  • First, you are loading the basemap using http instead of https.

  • Then, the styles from this source (https://carto.com/academy/css/cdbui.css) are not loading because that file does not exist.

  • Finally, the Map API is failing because an invalid error related to the CartoCSS style, concretely in this block of code: marker-fill-opa...20 marker-type: ellipse;.

Fix these issues, and your code should work.

  • Thank you. That did the trick! Now I just have to go into the browser and click "load unsafe scripts" in order to view the data. It says "The page at 'chakrm.github.io/us-power-plants' was loaded over HTTPS, but requested an insecure script 'mishmashmaps.carto.com/api/v1/map...' . This content should also be served over HTTPS." In order to make the script secure do I need to do something with the SQL API? link – chakrm Oct 24 '16 at 21:51
  • @ramiroaznar I am getting a similar issue on github, my browser is blocking the loading of: http://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css and http://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js. However, these same elements load if I look at any other Carto map on the web- any idea what is going on? – moman822 Nov 16 '16 at 22:45
  • You need use createLayer using CARTO.js HTTPS support, as explained in CARTO documentation. – ramiroaznar Nov 19 '16 at 9:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.