Skip to content

Instantly share code, notes, and snippets.

@zross

zross/index.html

Last active March 8, 2016 17:00
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save zross/6719235 to your computer and use it in GitHub Desktop.
Save zross/6719235 to your computer and use it in GitHub Desktop.
Download ZIP
HTML: CartoDB with Google Highcharts custom infowindow (detail)
Raw
index.html
<!DOCTYPE html>
<html>
<!-- ZevRoss Spatial Analysis, www.zevross.com -->
<!-- A note: if you're not seeing the elements in the custom
infowindow look at the cartodb dashboard and make sure they're
turned on
-->
<head>
<title>HTML5</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=650, user-scalable=yes">
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false">
</script>
<script src="http://libs.cartocdn.com/cartodb.js/v3/cartodb.js"></script>
<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/themes/css/cartodb.css" />
<script src="http://code.highcharts.com/highcharts.js"></script>
<style>
html, body {
height: 100%;
margin: 0;
}
#map{
height:100%;
}
#box{
height:30px;
width:30px;
background-color: grey;
}
line {
stroke:rgb(0,0,0);
stroke-width:3;
}
div.cartodb-popup {
position:relative;
width:370px;
height:auto;
padding:0 0 0 0;
margin:0;
background: none;
}
div.cartodb-popup div.cartodb-popup-content-wrapper {
position:relative;
width:350px;
max-width: 350px;
padding:5px -20px 5px 5px;
overflow-x: hidden;
background:grey;
opacity:1;
-webkit-border-radius: 15px ;
-moz-border-radius: 15px;
border-radius: 5px;
}
div.cartodb-popup div.cartodb-popup-content {
display:block;
width:350px;
max-width: 350px;
min-height:5px;
height:370;
max-height:370px;
margin: 0;
opacity:1;
padding: 0;
z-index:10;
overflow-y: auto;
overflow-x: hidden!important;
outline: none;
text-align:left;
}
div.cartodb-popup div.cartodb-popup-tip-container {
width:350px;
height:30px;
background:none;
}
</style>
<script>
var map;
var testhtml;
var tmp2;
var sqljson = new cartodb.SQL({
user: 'cehtp',
format: 'json'
});
$(document).ready(function() {
var mapOptions = {
zoom: 6,
center: new google.maps.LatLng(37.35, -120.015),
mapTypeId: google.maps.MapTypeId.ROADMAP
//mapTypeId: google.maps.MapTypeId.TERRAIN
};
map = new google.maps.Map($('#map')[0], mapOptions);
// ----- Add the layer with the county information
cartodb.createLayer(map, 'http://cehtp.cartodb.com/api/v2/viz/countyshp/viz.json', {
query: 'SELECT * FROM {{table_name}}' // if you remove this the query applied in the editor will be used
})
.on('done', function(layer) {
map.overlayMapTypes.setAt(0, layer);
var sublayer = layer.getSubLayer(0);
// set the info window
sublayer.infowindow.set('template', function(data) {
//get the lat long and additional information on click
//location
var clickPosLatLng = this.model.get('latlng');
var fields = this.model.get('content').fields;
//test to see if it's still loading and if not go ahead and set
//the infowindow
if (fields && fields[0].type !== 'loading') {
//I'm grabbing the county name but you could grab the ID and use it
//in a query to cartodb to get other attributes
// var obj = _.find(fields, function(obj) {
// return obj.title == 'fips'
// }).value
//
var obj = _.find(fields, function(obj) {
return obj.title == 'name'
}).value
objUpper = obj.toUpperCase()
var q = "SELECT pws_class, count(pws_class) FROM service_areas WHERE county = '" + objUpper + "' GROUP BY pws_class";
var cnt;
var pwsclass;
$.ajax({
url: "http://cehtp.cartodb.com/api/v1/sql?q=" + q,
dataType:"jsonp",
success: function(data){
types = [ "Community", "Non-community","Non-transient, non-community", "State small","Wastewater", "Reclaimed"]
tmp2 = data.rows
cnt = _.pluck(tmp2, 'count')
pwsclass = _.pluck(tmp2, 'pws_class')
cntNew = []
_.map(types, function(type){
indx = _.indexOf(pwsclass, type)
if(indx==-1){
cntNew.push(0)
} else {
cntNew.push(cnt.slice(indx, indx+1))
}
})
$('.cartodb-popup').remove();
// $('.cartodb-infowindow').append('<div class="cartodb-popup">');
//
$('.cartodb-infowindow').append('<div class="cartodb-popup">')
$('.cartodb-popup').append('<a href="#close" class="cartodb-popup-close-button close">x</a>')
$('.cartodb-popup').append('<div class="cartodb-popup-content-wrapper">')
$('.cartodb-popup-content-wrapper').append('<div class="cartodb-popup-content">')
$('.cartodb-popup').append('<div class="cartodb-popup-tip-container">')
// $('.cartodb-infowindow').append('<div class="cartodb-popup">').append('<a href="#close" class="cartodb-popup-close-button close">x</a>').append('<div class="cartodb-popup-content-wrapper">').append('div class="cartodb-popup-content"');
$('.cartodb-popup-content').highcharts({
chart: {
type: 'bar',
height:350,
width:350,
marginRight:40
},
plotOptions:{
series:{
animation:false
}
},
credits: {
enabled: false
},
title: {
text: 'Water Systems by Type: ' + obj
},
xAxis: {
categories: types
},
yAxis: {
title: {
text: 'Count of Water Systems'
}
},
series: [{
name: 'All',
data: cntNew
}]
});
}
});
} // end test of status
}); // end infowindow.set
}); //end done (and createLayer)
}); //end document ready
</script>
</head>
<body>
<div id="map">
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment