0

Each of my data points have a different image. The images are all loaded in CARTO and the column has a name. I need to call each of the images on click event.

I've been using the

layer.on('featureClick',function(e,latlng,pos,data) 

to get the data from my points but i can't make it work to get the images.

0

First, you have to make sure that your images are stored in a string/character column as a public url (you can use a service such as imgur.com). Then you have to create a html template for your infowindow (iw) like this one:

    <script type="infowindow/html" id="iw_template">
    <div class="cartodb-popup">
      <a href="#close" class="cartodb-popup-close-button close">x</a>
       <div class="cartodb-popup-content-wrapper">
         <div class="cartodb-popup-header">
           <img style="width: 100%" src="{{url_img}}"></src>
         </div>
         <div class="cartodb-popup-content">
           <h4>Name: </h4>
           <h3>{{content.data.name}}</h3>
         </div>
       </div>
       <div class="cartodb-popup-tip-container"></div>
    </div>
  </script>

Finally, after creating a viz or a layer with CARTO.js, you need your layers or sublayers to setInteraction to True and add the iw:

  layer.setInteraction(true);

  cdb.vis.Vis.addInfowindow(
      map, layer, ['cartodb_id','name','url_img'],
      {
         infowindowTemplate: $('#iw_template').html()
      });

Here you have a working example.

  • Hi Ramiro, Thanks for your response! I manage to have that working and to add a toolpit for hover event. THANKS! I would like the infowindow to be position fixed, always on the left side of the screen but I haven't manage to do that. The only example I found on this was doing a fixed box, but don't know how i can make it work with the code you send me.... THANKS! c. – Catalina Oct 3 '16 at 22:39
  • Happy to help. If you search here typing "carto" and "infobox" you will find an answer as this is a common feature in CARTO.js. Here, you have an example. – ramiroaznar Oct 4 '16 at 7:50
  • Hi Ramiro, THANKS! I used that code a couple of days ago but I couldn´t manage to call the images. It worked very well for data that was text but I don´t know how to get the elements when is not text but it´s images. – Catalina Oct 4 '16 at 12:41
  • I uploaded the images into my host account and wrote the URL in a column in CARTO. Each row has it's own URL address. All the examples that i found calling element by id were using the specific url of the image and not {{image_url}} that it's what i need because each plotted dot has it's own image. Does this make sense??? – Catalina Oct 4 '16 at 12:48
  • Mine uses {{url_img}}, have you tried it? – ramiroaznar Oct 4 '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.