Example derived from the official demo but disabling the sanitization of the infowindow to allow custom uris to the Spotify app.
If you visit the original visualization the infowindow header is orange and the uri is sanitized and it doesn't work, but if you visit this page the infowindow is replaced by a new one with an orange header and the uris are not sanitized and work.
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Custom infowindow example | CartoDB.js</title> | |
| <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; | |
| } | |
| </style> | |
| <link rel="stylesheet" href="http://libs.cartodb.com/cartodb.js/v3/3.15/themes/css/cartodb.css" /> | |
| </head> | |
| <body> | |
| <div id="map"></div> | |
| <script type="infowindow/html" id="infowindow_template"> | |
| <div class="cartodb-popup header orange v2"> | |
| <a href="#close" class="cartodb-popup-close-button close">x</a> | |
| <div class="cartodb-popup-header"> | |
| <h1>{{sp_user}}</h1> | |
| <span class="separator"></span> | |
| </div> | |
| <div class="cartodb-popup-content-wrapper"> | |
| <div class="cartodb-popup-content"> | |
| <h4>uri</h4> | |
| <p><a href="{{uri}}">{{uri}}</a></p> | |
| <h4>url</h4> | |
| <p><a href="{{url}}">{{url}}</a></p> | |
| </div> | |
| <p style="text-align:right;font-size:small;">Custom infowindow</p> | |
| </div> | |
| <div class="cartodb-popup-tip-container"> | |
| </div> | |
| </div> | |
| </script> | |
| <script src="http://libs.cartodb.com/cartodb.js/v3/3.15/cartodb.js"></script> | |
| <script> | |
| function main() { | |
| cartodb.createVis(map, 'https://team.cartodb.com/u/jsanz/api/v2/viz/ca609998-40cb-11e5-889f-0e0c41326911/viz.json') | |
| .on('done', function(vis,layers) { | |
| // get sublayer 0 and set the infowindow template | |
| var sublayer = layers[1].getSubLayer(0); | |
| sublayer.infowindow.set('sanitizeTemplate',false); | |
| sublayer.infowindow.set('template', $('#infowindow_template').html()); | |
| }).on('error', function() { | |
| console.log("some error occurred"); | |
| }); | |
| } | |
| window.onload = main; | |
| </script> | |
| </body> | |
| </html> |