1

I am trying to use CARTO API with my HTML to display a map, code below:

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" />
    <script src="http://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

    <style>
      html, body, #map {
        height: 100%;
        padding: 0;
        margin: 0;
      }
    </style>
  </head>

  <body>

    <div id="map"></div>
    <script src="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/cartodb.js"></script>
    <script>
     $( document ).ready(function() {
          //Create the leaflet map
          var map = L.map('map', {
              zoomControl: true,
              center: [43.713,-79.371],
              zoom: 12
          });
    var basemap = L.tileLayer('http://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="http://www.openstreetmap.org/copyright"OpenStreetMap</a> contributors, &copy; <a href="http://cartodb.com//attributions">CartoDB</a>'}).addTo(map);

    var tickets = cartodb.createLayer(map, {
        user_name: 'mmckeever92',
        type: 'cartodb',
        sublayers: [
        {
            sql: 'SELECT * FROM tickets_time_2',
            cartocss: '#tickets_time_2{marker-fill-opacity: 0.9; marker-line-color: #FFF; marker-line-width: 1.5; marker-width: 10; marker-fill: #3B007F; }'
        }
        ]
    });

    $.when(tickets).done(function(ltickets){
        ltickets.addTo(map);
    });
})
</script>
  </body>
</html>

I cannot get my map to display though, does anyone know why?

1 Answer 1

2

Unfortunately, as explained in CARTO documentation, BUILDER vizjsons are not compatible with the current CARTO.js version. Until the new library is released, you need to use createLayer method instead of createVis. Here you have a working example.

UPDATE: you are loading twice CARTO.js v3.15 library, and you do not need to load jQuery because CARTO.js contains jQuery. Removing lines 6 and 7 should do the trick.

5
  • Thank you for your response. I have made some changes to my question. I have a base map now in the Toronto area, but I cant seem to map my points that I would like to have over my map. Could I be some how linking my data incorrectly or something? Oct 23, 2017 at 19:00
  • I have edited my answer fixing your new code. Oct 23, 2017 at 20:02
  • THANK YOU!! That did the trick. Still new at this html! Cheers! Oct 23, 2017 at 20:11
  • @ramiroaznar Do we have an ETA on the new CARTO.js version?
    – Jags
    Oct 23, 2017 at 21:14
  • It is still WIP. Oct 24, 2017 at 8:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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