1

Each of my data points have a different image. The images are uploaded to a web server and on CARTO I created a column with the url {{image_url}}. This works fine when showing the images on hover event - but I need the images to be shown when clicking the data point on a FIXED infobox.

1

In order to do that you would need to create a custom HTML infobox. The infobox of CARTO only displays the values on the mouse hover event.

Based on this example, you could write a code similar to this one in order to display the images stored in your dataset on hove. The images are called using the CARTO SQL API:

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <link rel="shortcut icon" href="http://cartodb.com/assets/favicon.ico" />
    <style>
      html, body, #map {
        height: 100%;
        padding: 0;
        margin: 0;
      }


     /* set styles to the div element with id= box */
      #box{
        position: absolute;
        top: 20px;
        left: 20px;
        width: 200px;
        height: 400px;
        opacity: 0.9;
        padding: 5px 10px 5px 10px;
        border-radius: 25px;
        background-color: #FFF;
        color: #fdb462;

      }
      /* set styles to the <h4> tag of the element with id= box */
      #box h4{
        font-style: italic;
      }
      /* set styles to the <p> tag of the element with id= box */
      #box p{
        text-align: center;
        font-size: 18px;
        color:red;

      }

    </style>
    <!-- include cartodb.js CSS library -->
    <link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" />
     <!-- include cartodb.js library -->
    <script src="http://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script>
  </head>
  <body>
    <div id="map"></div>

    <div id ="box"><h4>Latitude</h4><p id="lat">Mouseover on point</p><h4>Longitude</h4><p id="lon">Mouseover on point</p><br/><p id="image"></p></div>

<script>
  function main() {

  var image;

    // define map object
    var map = new L.Map('map', {
      zoomControl: false,
      center: [41.39, 2.15],
      zoom: 10

    });


    cartodb.createLayer(map, {
      user_name: 'oboix',
      type: 'cartodb',
      sublayers: [
        {
          type: "http",
          urlTemplate: "http://{s}.basemaps.cartocdn.com/dark_nolabels/{z}/{x}/{y}.png",
          subdomains: [ "a", "b", "c" ]
        },
        {
           type: "mapnik",
           sql: 'select * from barris_barcelona_test_copy_2',
           cartocss: '#barris_barcelona_test_copy_2{polygon-fill: red}',
           interactivity: ['cartodb_id']

        },
        {
          type: "http",
          urlTemplate: "http://{s}.basemaps.cartocdn.com/dark_only_labels/{z}/{x}/{y}.png",
          subdomains: [ "a", "b", "c" ]
        }
      ]
    })
  .addTo(map) // add cartodb layer and basemap to map object
  .done(function(layer) {

    /*Once that the basemap and cartodb layer are added....*/

        /* Enable mouse events with CartoDB layers */

        // 1- Set CartoDB layer interaction
        layer.setInteraction(true);

        // 2- Custom mouseover event on CartoDB layers
        layer.on('featureClick',function(e,latlng,pos,data){
          lat = (latlng[0]).toFixed(2) // show latitude of clicked point in the console
          lon = (latlng[1]).toFixed(2) // show longitude of clicked point in the console
          data = data.cartodb_id
        // 3- Add coordinates of the selected geometry in the div element 
        //  with id = "box" 
           document.getElementById("lat").innerHTML = lat;
           document.getElementById("lon").innerHTML = lon;
           var sql = new cartodb.SQL({ user: 'oboix'});
           sql.execute("SELECT image_column FROM barris_barcelona_test_copy_2 WHERE cartodb_id=" + data + ";")
             .done(function(data){
                for(i = 0; i < data.total_rows; i++){
                  image = data.rows[0].image_column;

                }
                console.log(image)
                document.getElementById("image").innerHTML = "<img src='"+ image + "'width: 150px;height: 50px;>"
          }); // end sql api call 

        });
        });

      }
      window.onload = main;
    </script>
  </body>
</html>
  • Hi Oriolbx, Thanks for your response. I copied and pasted your code but i don´t see anything! Do you know what might be going on? THANKS, Catalina – Catalina Oct 7 '16 at 20:21
  • Hi Catalina, sorry I deleted the dataset used in the example, that why if you have copied and paste the code without changing the datasets used in my account for yours, you are getting an empty webpage. I've created the dataset again and changed the center coordinates in the code, so you can display the geometries. – oriolbx Oct 10 '16 at 8:02
  • Hi Oriolbx, Thanks again but I still don´t see anything. I only see the box with the title latitude and longitude. Do you know what might be going on? THANKS, Catalina – Catalina Oct 18 '16 at 12:21

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.