Carto DB layers API simple

This a a very simple example of implementing the CartoDB API and getting some layers created on their platform onto your leaflet map. Once you do this you can just edit the layer style, popups, legend or data for your layer on CartoDB and it will change the next time your map is loaded. Pretty simple and way easier than trying to host your own postgres instance and code out a bunch of scales and styles.

The data for the parks is from OpenStreetmap data related to parks in the San Diego area. Let me know if you have any questions or let me know if I messed something up.

<html>
<head>
  <link rel="stylesheet" href="https://libs.cartocdn.com/cartodb.js/v3/themes/css/cartodb.css" />
  <script src="https://libs.cartocdn.com/cartodb.js/v3/cartodb.js"></script>
  
  <style>
    html, body {width:100%; height:100%; padding: 0; margin: 0;}
    #cartodb-map { width: 100%; height:100%; background: black;}
  </style>

L.tileLayer('https://api.mapbox.com/v4/mapbox.outdoors/{z}/{x}/{y}.png?access_token='
      + 'pk.eyJ1IjoibXBtY2tlbm5hOCIsImEiOiJfYWx3RlJZIn0.v-vrWv_t1ytntvWpeePhgQ',
      {
        attribution: 'Mapbox <a href="https://mapbox.com/about/maps" target="_blank">Terms &amp; Feedback</a>'
        }).addTo(map);

var layerUrl = 'https://mpmckenna8.cartodb.com/api/v2/viz/bf965a6a-486a-11e5-a399-0e018d66dc29/viz.json';
        cartodb.createLayer(map, layerUrl)
         // .addTo(map)
            .on('done', function(layer) {
                layer.addTo(map);
              })
            .on('error', function(err) {
                 console.log('there was a error', err) //log the error
              });

}
  </script>
</head>
<body onload="init()">
  <div id='cartodb-map'></div>
</body>
</html>

Modified http://libs.cartocdn.com/cartodb.js/v3/cartodb.js to a secure url

https://libs.cartocdn.com/cartodb.js/v3/cartodb.js