1

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]

















            }]
        });
    }
  • 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 Oct 29 '15 at 1:24
  • 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? – nathansnider Oct 29 '15 at 1:33
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

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.