CartoDB Advanced Infowindow Design

README.md

Advanced Infowindow Design

Getting Started

In this section, we will show you the advanced methods for controlling infowindows styles using the CartoDB interface. These skills will allow you to have highly customized infowindows for your published maps, created directly on your account. You don't need any programming skills to edit infowindows and you can see a tutorial of basic methods here. This section is about advanced methods and you will be required to use basic skills in HTML and later CSS.

Editing Infowindow HTML

CartoDB gives you direct access to the HTML that controls the layout of your infowindows. If you don't feel ready to edit HTML and CSS see the tutorial of basic methods. In CartoDB you can find the advanced editor by selecting the Infowindow Wizard and then clicking the small code tag in the upper right.

image

From here, you have the ability to change the content, structure and design of your infowindows. The first thing to know when editing infowindows is that CartoDB uses an HTML templating language called, Mustache.

Mustache Templates

In your infowindow editor, you'll see the names of your columns enclosed in double curly brackets, {{}}. Mustache and CartoDB work together to replace these placeholders with their real values each time a user clicks a feature on your map. You can read more about Mustache in the online documentation. The key thing to be aware is that CartoDB will provide any value in your row by it's column name. So, if you want to display a value from your cartodb_id column in a row of your infowindow, your template would contain this line,

<p>{{cartodb_id}}</p>

From this basic example and some simple HTML, you can go a long way with customizing your infowindows.

Embedding images, videos, and other assets

Images

Users of CartoDB frequently want to embed images in their infowindows. While there is a simple way to add an Image Header to infowindows without any coding, you can add multiple images and row based images using the advanced editor. Take for example this image,

It is easy enough to embed in your infowindow by including the HTML for an image, <IMG>

<p><img width="188" src="//cartodb.s3.amazonaws.com/tumblr/posts/cartodbjs.png" /></p>

We include the width="188px" to ensure that the image fits in the default infowindow layout. Down below, we explain how you can change the dimensions of your infowindows. We can't know whether the viewer will open the map on HTTP or HTTPS, so we leave it out of the URL and just start with //, meaning to use whatever protocol the site uses. It is recommended you do the same so you don't ever load insecure content over a secure connection.

Now, what if you have an image for every row in your data? Easy! Just store the URL of the image for each row in a column called image_url. With that, your HTML for the image embed would change as to be,

<p><img width="188px" src="{{image_ur}}" /></p>

Using the template {{image_url}} to draw the value directly from your data. If you need a place to store your images online where you can get public URLs, try Imgur, GitHub Pages, or Amazon S3.

Video and other assets

You can embed YouTube or any other web content that can be published with an IFRAME directly in your infowindows. Just like embedding your images, you can embed your videos. For example, if you have a column containing YouTube video URLs called youtube_embed_link, the HTML would look like this,

<p>
  <iframe width="188" src="{{youtube_embed_link}}" frameborder="0" allowfullscreen></iframe>
</p>

Advanced structure

You can add, remove, and change the HTML structure however fits your needs with only a few caveates.

1. The main class at the beginning of the infowindow must be cartodb-popup, e.g. <div class="cartodb-popup"></div>
2. The DIV that wraps the content of your infowindow must be cartodb-popup-content-wrapper, e.g. <div class="cartodb-popup-content-wrapper"></div>
3. The bottom of the infowindow must include the <div class="cartodb-popup-tip-container"></div>
4. To include the close button you must include <a href="#close" class="cartodb-popup-close-button close">x</a>

From that, we know that the minimum viable infowindow looks like this,

<div class="cartodb-popup">
  <a href="#close" class="cartodb-popup-close-button close">x</a>
  <div class="cartodb-popup-content-wrapper">
  	<!-- Your content here -->
  </div>
  <div class="cartodb-popup-tip-container"></div>
</div>

Modifying the Style

Now that you are geting comfortable with the HTML editing, you might want to start changing the look and dimensions of your infowindw. The default CartoDB relies on a sprites (image files) that contain many of the nice looking borders and shading in our infowindows. If you add your own dimensions, you many need to swap in custom sprites for background images. This is only for more advanced.

To do this, you will need to add your own custom CSS to the infowindow. Doing so is easy, and you can include it in <style></style> tags right in the infowindow editor!

If you want a bigger infowindow, it is easy, just specify the width you want in the .cartodb-popup:

  div.cartodb-popup {width:417px}

Likely you need to change the offset of the infowindow, because you want to open it in the middle, no worries, use a negative margin-left and the infowindow will be positioned in the correct place:

  div.cartodb-popup {width:417px; margin-left:-197px;}

Don't forget to change .cartodb-popup-content-wrapper and .cartodb-popup-tip-container styles with the new backgrounds or ?? fitting your new style.

  div.cartodb-popup div.cartodb-popup-content-wrapper {
      width:407px; 
      max-width:407px; 
      padding:0 5px; background:url("http://vizzuality.github.io/icij/img/map/infowindow-content.png") repeat-y}
      
  div.cartodb-popup div.cartodb-popup-tip-container{
      width:417px;  
      background:url("http://vizzuality.github.io/icij/img/map/infowindow-bottom.png") no-repeat}

Custom dimensions

Not currently an option.

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Advanced Infowindows | Demo</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <style>
      html, body, iframe {
        height: 100%;
        padding: 0;
        margin: 0;
      }
    </style>
  </head>
  <body>
    <iframe width='100%' height='100%' frameborder='0' src='http://icij.cartodb.com/viz/bec546fa-61a8-11e3-858d-1bc60dd419cf/embed_map?&center_lat=10&center_lon=0'></iframe>
  </body>
</html>

thumbnail.png