CartoDB.js API geojson layer not rendering

Question

I am working with the CartoDB.js API and have taken this example from Azavea. http://sandbox.azavea.com/cartodbvisualization/

There are a few declarations that I do not need, however conceptually my map and this map are to do the same things. No errors are being generated when this code is executed other than the .png file not available for the zoom in/zoom out. My geojson returns a 304 code.

Here is my code;

 // declaring variables and functions for Leaflet
 var mapOptions = {
 minZoom: 2,
 maxZoom: 4,
 scrollWheelZoom: false
 };
 var map = new L.Map('map-canvas', mapOptions);
 var geojsonMarkerOptions = {
 radius: 8,
 fillColor: "#ff7800",
 color: "#ff7800",
 weight: 1,
 opacity: 1,
 fillOpacity: 0.8
 };
 var geojsonLayer;
 // this will contain the geoJson data
 var oilCountries = [];
 // cartoDB variables
 var cdbAccount = 'geoffreywestgis';
 var cdbOilCountriesQ = 'SELECT routeno, qrtavgtons, qrtavgdelay, commcode, biindex, the_geom FROM la_bos_poc_data'; 
 // for HighCharts
 var chart;
 // initialize the map and draw the chart when everything is ready
 $(document).ready(function() { 
 // pull in the geoJson data from CartoDB
 $.getJSON('http://' + cdbAccount + '.cartodb.com/api/v2/sql/?format=GeoJSON&q=' + cdbOilCountriesQ, function(data){
 oilCountries = data;
 initMap();
 totalChart();
 });
 });
 function initMap() { 
 // set up the base map
 var greyAndBlack = new L.tileLayer('http://{s}.api.cartocdn.com/base-dark/{z}/{x}/{y}.png', {
 attribution: 'CartoDB',
 maxZoom: 10,
 }).addTo(map);
 // pull in the known oil field tiles from CartoDB
 var oilFieldsUrl = 'http://' + cdbAccount + '.cartodb.com/tiles/usgs_au_sum/{z}/{x}/{y}.png';
 var oilFieldsAttrib = '2000 USGS, 2012 OPEC, OSM and Natural Earth';
 var oilFields = new L.TileLayer(oilFieldsUrl, {maxZoom: 8, attribution: oilFieldsAttrib, subdomains: ['a1', 'a2', 'a3']});
 map.setView(new L.LatLng(20.0,0.0), 2).addLayer(oilFields);
 var radYear = []
 // get the points set up on the map
 setPointLayer(radYear);
 }
 function setPointLayer(radYear) {
 // this function is also used with the chart interactions, so if the layer is already present, 
 // it is removed and redrawn with the current year of data setting the radius of each circleMarker
 if(geojsonLayer) {
 geojsonLayer.clearLayers();
 }
 var radYearProp = 'y' + radYear;
 geojsonLayer = L.geoJson(oilCountries, {
 pointToLayer: function (feature, latlng) {
 return L.circleMarker(latlng, geojsonMarkerOptions);
 },
 onEachFeature: function(feature,layer) {
 //var mmbbl = feature.properties[radYearProp] / 1000;
 //var bbbbl = mmbbl.toFixed(1);
 layer.bindPopup('<strong>' + feature.properties.routeno);
 //var newRadius = feature.properties[radYearProp] / 7500 + 2;
 layer.setRadius(newRadius);
 }
 }).addTo(map);
 $('#cur-year').text(radYear);
 }
 //Total oil reserves over time chart 
 function totalChart() {
 chart = new Highcharts.Chart({
 chart: {
 renderTo: 'total-oil',
 type: 'column',
 backgroundColor: '#323232'
 },
 title: {
 text: 'Operational Route Based Analysis'
 },
 subtitle: {
 text: 'LASAN'
 },
 xAxis: {
 labels: {
 step: 5
 },
 categories: [
 'Route 6', 'Route 7', 'Route 8', 'Route 9', 'Route 9', 'Route 10', 'Route 11', 'Route 12', 'Route 13', 'Route 14', 'Route 15', 'Route 16', 'Route 17', 'Route 18', 'Route 19', 'Route 20', 'Route 21 ', 'Route 22'
 ]
 },
 yAxis: {
 min: 0,
 title: {
 text: 'Average Tons'
 }
 },
 legend: {
 layout: 'vertical',
 backgroundColor: '#444',
 align: 'left',
 verticalAlign: 'top',
 x: 100,
 y: 70,
 floating: true,
 shadow: true
 },
 tooltip: {
 formatter: function() {
 return ''+
 this.x +': '+ this.y +' ATQ';
 }
 },
 plotOptions: {
 column: {
 pointPadding: 0.2,
 borderWidth: 0,
 color: '#ff7800'
 },
 series: {
 point: {
 events: {
 mouseOver: function() {
 var xval = this.x + 1960;
 // change the circleMarker layer in Leaflet
 setPointLayer(xval);
 }
 }
 }
 }
 },
 series: [{
 name: 'Average Tons Per Quarter Per Route',
 data: [9.686643786, 12.54345664, 12.25099819, 11.9042337, 12.7028988, 12.64874127, 12.89688759, 13.4173207, 11.57204966, 13.0131879, 12.69405161, 10.28218233, 10.51905973, 10.14728511, 11.2066913, 13.14877955, 10.49976539]
 }]
 });
 }

• nathansnider: Have you tried to figure out which parts of the code aren't working? It seems like the first thing to do here would be to log some debugging data to the console at key points in the code. Like, say, console.log(data) within your $.getJSON callback function to see what data (if any) is really being returned, or console.log("init successful") within your initMap() function to verify that the map is indeed being initialized. That would narrow things down considerably.
• nathansnider: Also, you should clarify just how you want your map and your chart to respond to user actions. At least from what I can see in your code, you are trying to do something that is a bit conceptually different from the Azavea visualization, and your data are structured differently. You are making a chart of tonnage vs. route, while the Azavea chart shows volume vs. time. When you mouse over a column on your chart, what do you want to happen on the map? Do you also want to visualize trends over time, and is there a field in your database that allows you to distinguish those changes?

Answer 1

var oilFieldsUrl = 'http://' + cdbAccount + '.cartodb.com/tiles/usgs_au_sum/{z}/{x}/{y}.png';

This tiles ZXY API is no longer maintained by CartoDB, it was deprecated. You might want to take a look at the CartoDB CORE JS library (http://docs.cartodb.com/cartodb-platform/cartodb-js.html#core-api-functionality) that will allow you to get ZXY URLs for the tiles of the map.

You can find an example here: https://github.com/CartoDB/cartodb.js/blob/develop/examples/modestmaps.html