0

Building a custom CartoDB map here using the createLayer process. With the vast difference in visual appearance and scale between zoom levels of 4 and 5, I am aiming to default to a zoom level of 4.5. This works perfectly fine as far as the map view goes. However, when I am at this zoom level, none of the tooltips show up. They work at any other integer zoom level.

var options = {
    center: [13, -2],
    zoom: 4.5,
    minZoom: 4.5,
    maxZoom: 7
}

var layerSource = {
    user_name: '[username]',
    type: 'cartodb',
    sublayers: [              
    {
        sql: "SELECT * FROM ptv_ad_views_by_dma_2015q4",
        cartocss: generateCSS("ads_0600"),
        interactivity: "cartodb_id,dma_name,ads_0600"
    },                
    {
        sql: "SELECT * FROM ptv_ad_views_by_dma_2015q4",
        cartocss: generateCSS("ads_0700"),
        interactivity: "cartodb_id,dma_name,ads_0700"
    },
    ... (a dozen other sublayers)
}

var map_object = new L.Map("map", options);
var num_sublayers, map_layer;

cartodb.createLayer(map_object, layerSource)
    .addTo(map_object)
    .done(function(layer){

        num_sublayers = layer.getSubLayerCount();
        map_layer = layer;
        var sublayer;

        for (var i = 0; i < num_sublayers; i++) {

            sublayer = layer.getSubLayer(i);
            sublayer.setInteractivity('cartodb_id,dma_name,'+layerValues[i]);
            var testTooltip = layer.leafletMap.viz.addOverlay({
                type: 'tooltip',
                layer: sublayer,
                template: '<div class="cartodb-tooltip-content-wrapper"><div class="cartodb-tooltip-content"><div class="dma_name">{{dma_name}}</div><div class="dma_ads">{{'+layerValues[i]+'}} ads</div></div></div>', 
                width: 200,
                position: 'bottom|right'
            });

        }

        hideAllSublayers();
        map_layer.getSubLayer(defaultLayer).show();
        populateTitle(defaultLayer);
        currentLayer = defaultLayer;

    })
    .error(function(err){
        console.log("An error occurred: " + err);
    });

Note that for some reason, the standard append line I've seen in support docs does not work and is not necessary for my map, in case you're wondering why I don't have it in there:

$('#map').append(testTooltip.render().el);

Any ideas of why these tooltips don't show up in non-integer zoom levels?

1 Answer 1

1

CartoDB doesn't serve tiles at fractioned zoom levels. Playing with the tiles in order to get a map with a zoom level of 3.5 is easy, as you can just get the tiles of the zoom of level above and rescale them in the browser.

CartoDB tooltips work thanks to the interactivity provided by the UTFGrid layer. This layer maps each pixel of each tile and provides it with an interactive meaning (a pixel is represented with a character, which is related with a key from which the data for that pixel is retrieved).

This layer, as tile layers, are created and served for each (integer) level of zoom, and CartoDB is not generating a UTFgrid layer for the 3.5 level. I personally don't know how these libraries to get fractionated zoom levels work, but CartoDB doesn't manage the interactivity layers at those intermediate levels.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.