Skip to content

Instantly share code, notes, and snippets.

@jsanz
Last active December 17, 2015 11:14
Show Gist options
  • Save jsanz/1bd917d87f4f606fe778 to your computer and use it in GitHub Desktop.
Save jsanz/1bd917d87f4f606fe778 to your computer and use it in GitHub Desktop.
Using fields on infowindows styling

Default CartoDB infowindows are rendered using moustache.js templates. The variables you can pass are normally used to render data on the infowindow but you can also use them on other parts of the markup, like using them as CSS property styles to apply to element sizes or colours.

On this map, the infowindow show the percentage of votes of the three most voted parties by municipality. Apart from showing the result as a number, and thanks to some SQL juggling (check the complete query on this cdb-fiddle) you can also have a bar with the representative color of the party and a proper width.

See below the details of the infowindow template and look for the {{winner_pct}} and {{winner_color}} at the div and span elements inside the list.

<div class="cartodb-popup v2">
<a href="#close" class="cartodb-popup-close-button close">x</a>
<div class="cartodb-popup-content-wrapper">
<div class="cartodb-popup-content">
<h3>{{name}}</h3>
<ol style="margin-top:10px;">
<li style="margin-top:5px;">
{{winner_name}} · {{winner_pct}}%
<div style="background-color:#ccc;width:100%;height:4px;border-radius:40px;">
<span style="height: 4px;vertical-align: top;border-radius: 40px;display: inline-block;background:{{winner_color}};width:{{winner_pct}}%;"></span>
</div>
</li>
<li style="margin-top:5px;">
{{second_name}} · {{second_pct}}%
<div style="background-color:#ccc;width:100%;height:4px;border-radius:40px;">
<span style="height: 4px;vertical-align: top;border-radius: 40px;display: inline-block;background:{{second_color}};width:{{second_pct}}%;"></span>
</div>
</li>
<li style="margin-top:5px;">
{{third_name}} · {{third_pct}}%
<div style="background-color:#ccc;width:100%;height:4px;border-radius:40px;">
<span style="height: 4px;vertical-align: top;border-radius: 40px;display: inline-block;background:{{third_color}};width:{{third_pct}}%;"></span>
</div>
</li>
</ol>
<p style="margin-top:10px">{{densidad}} hab/km2</p>
</div>
</div>
<div class="cartodb-popup-tip-container"></div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment