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?