0

How can I get fields in an infowindow to change when I click on something?

For example, if this is my infowindow code: cartodb.vis.Vis.addInfowindow(map, layer.getSubLayer(0), ['abbrev']) How can I change the column abbrev to cartodb_id when I click on a button, and have the new field appear in the infowindow when clicking on a map feature. I think it should be easy, but so far I haven't found a way to do this successfully.

Here's a jsfiddle I'm experimenting with:

https://jsfiddle.net/Sidders/cb40w5ku/9/

3

You have to set the cartodb_id interactivity in your layer_source variable:

var layerSource = {
      user_name: 'examples',
      type: 'cartodb',
      sublayers: [{
         sql: 'select * from country_boundaries',
         cartocss: '#layer { polygon-fill: #F00; polygon-opacity: 0.3; line-color: #F00; }',
         interactivity: ['cartodb_id', 'abbrev']
      }]
  }

Then you can update your infowindow_fields as ['cartodb_id']. The infowindow will show the cartodb_id of the selected feature.

UPDATE: after realizing it was a problem of scope, this is the code that will work:

            jQuery(function($) {

            //default infowindow fields
            var infowindow_fields = ['abbrev'];

            // create leaflet map and define some properties
            var map = L.map('map', { 
              zoomControl: false,
              center: [43, 0],
              zoom: 3
            })

            // add a base layer to map   
            L.tileLayer('http://tile.stamen.com/toner/{z}/{x}/{y}.png', {
              attribution: 'Stamen'
            }).addTo(map);

            // Create button to change infowindow field on click



        // Put layer data into a JS object
    var layerSource = {
          user_name: 'examples',
          type: 'cartodb',
          sublayers: [{
             sql: 'select * from country_boundaries',
             cartocss: '#layer { polygon-fill: #F00; polygon-opacity: 0.3; line-color: #F00; }',
             interactivity: ['cartodb_id', 'abbrev']
          }]
      }

        var options = { https: true }

             // add cartodb layer with one sublayer
            cartodb.createLayer(map, layerSource, options)
            .addTo(map)
            .done(function(layer) {
              var sublayer = layer.getSubLayer(0);
              console.log(sublayer);
              cartodb.vis.Vis.addInfowindow(map, sublayer, infowindow_fields);
              var createSelector = function() {
                console.log(sublayer)
                  var $options = $(".layer_selector").find("li");
                  $options.click(function(e) {
                      var $li = $(e.target);
                      selected = $li.attr('data');
                      infowindow_fields[0] = selected;
                      console.log(infowindow_fields[0]);
                      sublayer.setInteraction(false);
                      sublayer.off();
                      sublayer.setInteractivity(selected);
                      cartodb.vis.Vis.addInfowindow(map, sublayer, infowindow_fields);

                    });


              }();


            });
    });
  • Thank you for your reply @ramiroaznar - unfortunately however, adding your above code still doesn't result in the 'cartodb_id' field showing up when you click on the button. The infowindow still comes up blank :( Unless there's a way to force the infowindow field to appear? – Sidders Oct 18 '16 at 12:02
  • It is working on my side with the fiddle you have shared. Have you tried to apply the changes I suggested and refresh the site? Or running on a local server? – ramiroaznar Oct 18 '16 at 12:05
  • How bizarre. I've revised the fiddle to include your code (link below), which I've also hard-refreshed a few times, but I still get a blank infowindow after clicking on the button: link – Sidders Oct 18 '16 at 12:22
  • You have to replace in line 4 the field you want to interact to var infowindow_fields = ['cartodb_id'];. After that refresh your browser. – ramiroaznar Oct 18 '16 at 12:45
  • Okay. I changed var infowindow_fields = ['abbrev']; to var infowindow_fields = ['cartodb_id'];, however that changes the infowindow field before loading the map. Instead I want to change the field ['abbrev'] to ['cartodb'] after clicking on a button. I hope that makes more sense. So to do this I've tried to explicitly set infowindow_fields[0] to the selected variable, which contains the field I want, in the click function (see jsfiddle link in the original post). But this doesn't work. I'd be grateful to know why and how to fix that? I hope that solves any misunderstanding :) – Sidders Oct 18 '16 at 13:22

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.