1

I'm using CartoDB and I can only get one option every to work cartodb_logo. The rest seem to be ignored. Here's the relevant part of my code. What is wrong with this to cause title and description to be ignored (not on my map)?

var layerSource = {
        user_name: 'myname',
        type: 'cartodb',

        sublayers: [{
            sql: "SELECT * FROM mydata",

            cartocss: "#mydata{marker-width: 10; marker-line-color: #FFF; marker-line-width: 0.5; marker-line-opacity: 1; marker-fill-opacity: 1.0; }"
        }]

    };
    var options = {

        https: true,
        infowindow: true,
        cartodb_logo: false, //this works fine
        title: "testing title", //this isn't rendered on map
        description: "testing description", //this isn't rendered on map
        shareable: true, //no sharing buttons shown
        legends: true //no legends either
    };
    var map_object = new L.Map('test_heat', {
        center: [39.8282, -98.5795],
        zoom: 5,
    });
    L.tileLayer('https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}@2x.png', {

        attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="http://cartodb.com/attributions">CartoDB</a>'
    }).addTo(map_object);

    cartodb.createLayer(map_object, layerSource, options)
        .addTo(map_object)
        .on('done', function(layer) {
            cdb.vis.Vis.addInfowindow(map_object, layer.getSubLayer(0), options, ['cartodb_id', 'number_of_cases'], {
                infowindowTemplate: $('#infowindow_template').html()
            });
            var sublayer = layer.getSubLayer(0);
            sublayer.setInteraction(true);
            sublayer.on('featureClick', function(e, latlng, pos, data) {
                //alert("Hey! You clicked " + data.cartodb_id);
            });
        })
        .done(function(data) {

        });
1

As Chris says, you cannot use them as straightforward as with createVis, but there's a possibility.

You need to add a new overlay of type Header, as follows (add this inside the .on('done') callback of createLayer):

  var i = new cdb.geo.ui.Header({

    model: new cdb.core.Model({
   extra: {
     title: "Title",
     description: "Description",
     show_title: true,
     show_description: true
   }
 }),
 template: cdb.core.Template.compile(
  ' \
 <div class="content">\
 <div class="title">{{{ title }}}</div>\
 <div class="description">{{{ description }}}</div>\
 </div>',
 'mustache'
 )
  });
  $('body').append(i.render().el);

Probably you'll need to add also some CSS in order for the Header to appear at the right position. I made it work for my example with:

body > div.cartodb-header{
  display: none;
  position: absolute;
  top:0px;
  width: 100%;
  background-color: rgba(0,0,0,.5);
  font-family: 'Helvetica Neue',Helvetica,sans-serif;
  line-height: normal;
  z-index: 99999;
 }

This example (with the same code) is available also here.

  • Is there a different (simpler) was to do what I'm doing that doesn't involve createVis? Obviously, your solution seems a lot more complicated than I thought, so wondering if I'm makig things more complicated all around. – jonmrich Jun 8 '15 at 17:20
  • This is the only workaround I can imagine atm: by using createLayer you don't have the logic to add overlays directly, so you need to create them. Is not as difficult as it may seem, although the code seems messy because you have to add the code for the template, use the model, and so on, but it's the way to call a new overlay of this kind it by using the CartoDB.js library. Other overlays are more straightforward in terms of code. – iriberri Jun 8 '15 at 17:28
  • Okay...fair enough. As for your solution here, I can get the title and description to appear now, but it appears at the top of my page instead of inside the map div. How would I have to change your CSS? Also, what's the solution for adding a legend? There doesn't seem to be a way to do this either with createVis the way I'm using it. – jonmrich Jun 8 '15 at 17:32
  • Could you open a new question for the legend issue? :) There's also a super simpler approach that you can follow: create a div with a title and description by yourself just by using HTML and forgetting about CartoDB.js: this will give you total freedom on your own object. – iriberri Jun 8 '15 at 17:37
  • Okay...here it is: gis.stackexchange.com/questions/150157/…. I'm all for creating my own div, but curious how you'll make the legend within it without a ton of code. – jonmrich Jun 8 '15 at 17:41
2

You're using createLayer() to build your map, so title and description are not valid options.

You can use these options when using createVis(), but not with createLayer().

Check out the docs here

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.