1

I have a problem with the infowindow of one of my sublayers in a Carto map. First of all I'll show my code. I create the layer options and then I get my sublayer. I set its options and a first version of the infowindow. After that, I create the event onclick, what changes the infowindow based on a variable I've declared before.

var subLayerOptions2 = {
          sql: "SELECT * FROM zonas WHERE cartodb_id IN (SELECT zonaid FROM devices_zonas WHERE deviceid IN (SELECT deviceid FROM users_devices WHERE userid=" + this.auth.getUserId() + "))",
          cartocss: "#layer {polygon-fill: " + ConstantesColores.colores[3] + "; polygon-opacity: 0.25; line-color: " + ConstantesColores.colores[3] + "; line-width: 1; line-opacity: 1;}",
          interactivity: ['cartodb_id']
}

// Creacion e introduccion del layer en el mapa
var sublayer2 = layer.getSubLayer(2);
sublayer2.set(subLayerOptions2);
sublayer2.infowindow.set('template', infow);
sublayer2.on('featureClick', (e, latlng, pos, data, layer) => {
              sublayer2.infowindow.set('template', infow.replace("#DispAsociados#", arrayZonasConDisp[data.cartodb_id].info));
              alert("Hey! You clicked " + data.cartodb_id);
});
sublayers.push(sublayer2);

The problem is that, the first time I click an element of the map, the infowindow is not updating well, the variable is empty, but when I click a second time it appears well. If I change the element I click, the first time appears the info corresponding to the last click, not this one. It's like a delay. It always show the info of the previous one.

  • Could you share the whole code? You can share a link to a fidle or plkr. This will help us to understand your problem (better than with words). – ramiroaznar Jun 11 '17 at 10:36
  • Of course, I've created a simple html to show you. It has a static array wich I use to load dynamic data in the infowindow. It's only ready to click in zone 67 and 68, wich loads diferent information. These zones are the big one near Mérida and the one near Parque natural de cornalvo. plnkr.co/edit/z0ZCu7f2jECIEggn4jXm?p=preview – Cristina Extremera Romero Jun 11 '17 at 15:09
1

The infowindow is updated after the click event:

// with this line you set the infowindow, the one which will be shown when you first click on the feature
sublayer2.infowindow.set('template', infow);

sublayer2.on('featureClick', (e, latlng, pos, data, layer) => {
// after the click event the infowindow will be updated
                  sublayer2.infowindow.set('template', infow.replace("#DispAsociados#", arrayZonasConDisp[data.cartodb_id].info));
                  alert("Hey! You clicked " + data.cartodb_id);

Anyway, you do not need to declare a variable and change your infowindow according to this variable. A much easier approach would be adding a new column to your dataset called dispositivos and show it as explained in this working example (I used the column name instead). You can find more information about adding infowindow in CARTO.js documentation and other blocks such as this one.

  • Thanks! It works. I think that in my case maybe this is not the optimal solution, because what I want to show is the name of some devices saved in an array obtained from a query, but for the moment I've saved in my database the string with the paragraphs of the devices for showing them. – Cristina Extremera Romero Jun 14 '17 at 19:11

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.