Skip to content

Instantly share code, notes, and snippets.

@brianbancroft

brianbancroft/gist:9e27956e77482085d09d

Last active September 8, 2015 14:22
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save brianbancroft/9e27956e77482085d09d to your computer and use it in GitHub Desktop.
Save brianbancroft/9e27956e77482085d09d to your computer and use it in GitHub Desktop.
Download ZIP
CartoDB InfoWindow Height Problems
Raw
gistfile1.txt
<!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"/>
<style>
html, body, #map {
height: 100%;
padding: 0;
margin: 0;
}
.infowindow-custom{
position: relative;
width: 350px;
min-height:300px;
background-color: white;
margin-bottom: 11px;
}
.cartodb-popup-close-button {
position: absolute;
top: -12px;
right: -11px;
width: 26px;
height: 26px;
background: url('http://libs.cartodb.com/cartodb.js/v3/themes/img/light.png') no-repeat 0 -23px;
text-indent: -9999px;
font-size: 0;
line-height: 0;
opacity: 1;
text-transform: uppercase;
z-index: 3;
}
.cartodb-popup-tip-container {
position: absolute;
bottom: -3px;
left: 23px;
width: 16px;
height: 14px;
background: url('http://libs.cartodb.com/cartodb.js/v3/themes/img/light.png') no-repeat -23px -7px;
text-indent: -9999px;
font-size: 0;
line-height: 0;
opacity: 1;
z-index: 3;
}
.imageheight {
min-height: 400px;
}
blockquote {
display: hidden;
}
.cartodb-popup-content {
min-height: 80px;
}
</style>
<link rel="stylesheet" href="http://libs.cartodb.com/cartodb.js/v3/themes/css/cartodb.css" />
<!--link href='https://api.mapbox.com/mapbox.js/v2.2.2/mapbox.css' rel='stylesheet' />
<!--[if lte IE 8]>
<link rel="stylesheet" href="http://libs.cartodb.com/cartodb.js/v3/themes/css/cartodb.ie.css" />
<![endif]-->
</head>
<body>
<div id="map"></div>
</body>
<script type="infowindow/html" id="infowindow_template">
<div class="cartodb-popup header with-image v2" data-cover="true">
<div class="infowindow-custom" >
<a href="#close" class="cartodb-popup-close-button close">x</a>
<div class="cartodb-popup-header" >
<div class="cover">
<div id="spinner"></div>
<div class="image_not_found"> <i></i> <a href="{{image}}" class="help">Non-valid picture URL</a></div>
<span class="separator"></span>
<div class="shadow"></div>
<img class="imageheight" src="{{image}}" />
</div>
</div>
<div class="cartodb-popup-content">
<div class="content" style="padding:20px">
{{content.data.name}}
</div>
</div>
<div class="cartodb-popup-tip-container"></div>
</div>
</div>
</script>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script src="http://libs.cartocdn.com/cartodb.js/v3/3.0.05-dev/cartodb.js"></script>
<!--script src='https://api.mapbox.com/mapbox.js/v2.2.2/mapbox.js'></script-->
<script>
function main() {
var southWest = L.latLng(20, -55.383);
var northEast = L.latLng(89, -143.7);
var map = L.map('map', {
zoomControl: false,
center: [60.305, -99.668],
zoom: 4,
minZoom: 4,
maxZoom: 12,
//.maxBounds: L.latLngBounds(southWest, northEast),
});
L.tileLayer("https://api.tiles.mapbox.com/v4/mapbox.high-contrast/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoiYnJpYW5iYW5jcm9mdCIsImEiOiJsVGVnMXFzIn0.7ldhVh3Ppsgv4lCYs65UdA", {
attribution: 'Mapbox <a href="http://mapbox.com/about/maps" target="_blank">Terms &amp; Feedback</a>'
}).addTo(map);
cartodb.createLayer(map, 'https://brian2073.cartodb.com/api/v2/viz/92b67dd2-55c0-11e5-9030-0e0c41326911/viz.json')
.addTo(map)
.on('done', function(layer) {
// get sublayer 0 and set the infowindow template
var sublayer = layer.getSubLayer(0);
sublayer.infowindow.set('template', $('#infowindow_template').html());
}).on('error', function() {
console.log("some error occurred");
});
}
window.onload = main;
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment