1

This is my first day with CartoDB, trying to integrate our visualization into our existing Leaflet implementation, and having issues. In short: no visualization.

Below is a sample of the problem followed by the code involved. I have a createVis test that works fine, followed by a createLayer test that's not working. The layer seems to add correctly but the tiles don't display.

I've tried:

  • With and without lower layers
  • Adding the layer in the chain and explicitly with "layer.addTo(map)"
  • Explicitly making it visible with "layer.show()"

No luck so far, and running out of ideas.

http://www.zonability.com/carto.html

        var url = 'http://zonability.cartodb.com/api/v2/viz/e711de5e-8f77-11e4-a96a-0e0c41326911/viz.json';

        // CreateVis
        cartodb.createVis('map1',url);

        // Integrate into existing Leaflet map
        var map = new L.Map('map2',{
            center: [30.242713340145,-97.770476601062],
            zoom: 9
        });
        map.on('layeradd',function(layer){ console.log('Layer added'); });
        L.tileLayer('http://{s}.tiles.mapbox.com/v3/zonability.glj45k32/{z}/{x}/{y}.png').addTo(map);
        L.tileLayer('http://{s}.tiles.mapbox.com/v3/zonability.gljpogdp/{z}/{x}/{y}.png').addTo(map);
        cartodb.createLayer(map,url).on('done',function(layer){
            layer.addTo(map);
            console.log('Done');
        }).on('error',function(err){
            console.log('Error: '+err);
        });
3

This is just a conflict in the resources you're adding:

script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"> script src="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.11/cartodb.js">

CartoDB.js includes leaflet, so you need to delete Leaflet.js to avoid conflicts.

Working!

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.