Skip to content

Instantly share code, notes, and snippets.

@piensaenpixel

piensaenpixel/template_infowindow

Last active May 10, 2016 17:41
Show Gist options
  • Save piensaenpixel/a0e842895a32250a2d62f261d74e2829 to your computer and use it in GitHub Desktop.
Save piensaenpixel/a0e842895a32250a2d62f261d74e2829 to your computer and use it in GitHub Desktop.
Download ZIP
Template Deep-insights
Raw
gistfile1.txt
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Deep Insights template</title>
<meta name=viewport content="width=device-width initial-scale=1">
<link href="http://cartodb.com/favicon.ico" rel="shortcutsicon" />
<!-- deep insights - repositorio aquí: https://github.com/CartoDB/deep-insights.js -->
<link rel="stylesheet " href="http://cartodb.github.io/deep-insights.js/dist/themes/css/deep-insights.css" />
<script src="http://cartodb.github.io/deep-insights.js/dist/deep-insights.js"></script>
<!-- infowindows -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/andrusieczko/clip-path-polygon/master/build/clip-path-polygon.min.js"></script>
<style type="text/css">
html,
body {
position: relative;
height: 100%;
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<div class="Dashboard-canvas" id="dashboard"></div>
<script>
$( document ).ready(function() {
/* vizjson url*/
var diJSON = 'https://team.cartodb.com/u/piensaenpixel/api/v2/viz/33e4ec7e-1502-11e6-b9f0-0ecd1babdde5/viz.json';
cartodb.deepInsights.createDashboard('#dashboard', diJSON.replace('/api/v2/','/api/v3/'), {
no_cdn: false
}, function (err, dashboard) {
var map = dashboard.getMap(),
params = [
/* array con todos los widgets */
]
/* los agregamos al mapa, definiendo a q capa afecta */
dashboard.createFormulaWidget(params[0], map.getLayer(1));
});
/* infowindows */
$(function() {
var points2 = [[0, 0], [0, 100], [100, 0]];
$('.CDB-hook-image-inner').clipPath(points2, {
isPercentage: true
});
$('.CDB-infowindow-media-item').show();
});
});
</script>
</body>
</html>
Raw
template_infowindow
<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" style="height: 180px !important; max-height: 180px!important;">
<p><strong>{{nombre}}</strong></p>
<ol style="list-style-type:none; margin: 10px 0 0 0; padding: 0 12px 0 0">
<li>
Ciudadanos · {{porcentaje_c_s}}%
<div style="background-color:#e5e5e5;width:100%;height:2px;border-radius:40px;">
<span style="height: 2px;vertical-align: top;border-radius: 40px;display: inline-block;background:#ef7a36;width:{{porcentaje_c_s}}%;"></span>
</div>
</li>
<li style="margin-top:8px;">
IU · {{porcentaje_iu}}%
<div style="background-color:#e5e5e5;width:100%;height:2px;border-radius:40px;">
<span style="height: 2px;vertical-align: top;border-radius: 40px;display: inline-block;background:#8f2222;width:{{porcentaje_iu}}%;"></span>
</div>
</li>
<li style="margin-top:8px;">
Podemos · {{porcentaje_podemos_confluencias}}%
<div style="background-color:#e5e5e5;width:100%;height:2px;border-radius:40px;">
<span style="height: 2px;vertical-align: top;border-radius: 40px;display: inline-block;background:#9c489e;width:{{porcentaje_podemos_confluencias}}%;"></span>
</div>
</li>
<li style="margin-top:8px;">
PP · {{porcentaje_pp}}%
<div style="background-color:#e5e5e5;width:100%;height:2px;border-radius:40px;">
<span style="height: 2px;vertical-align: top;border-radius: 40px;display: inline-block;background:#0194d9;width:{{porcentaje_pp}}%;"></span>
</div>
</li>
<li style="margin-top:8px;">
PSOE · {{porcentaje_psoe}}%
<div style="background-color:#e5e5e5;width:100%;height:2px;border-radius:40px;">
<span style="height: 2px;vertical-align: top;border-radius: 40px;display: inline-block;background:#f82433;width:{{porcentaje_psoe}}%;"></span>
</div>
</li>
</ol>
</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