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?

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.

  • 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? – Michael McKeever Oct 23 '17 at 19:00
  • I have edited my answer fixing your new code. – ramiroaznar Oct 23 '17 at 20:02
  • THANK YOU!! That did the trick. Still new at this html! Cheers! – Michael McKeever Oct 23 '17 at 20:11
  • @ramiroaznar Do we have an ETA on the new CARTO.js version? – Jags Oct 23 '17 at 21:14
  • It is still WIP. – ramiroaznar Oct 24 '17 at 8:57

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.