Skip to content

Instantly share code, notes, and snippets.

@zross

zross/index.html

Created June 18, 2014 13:53
Show Gist options
  • Save zross/73703a932bebb9de65c1 to your computer and use it in GitHub Desktop.
Save zross/73703a932bebb9de65c1 to your computer and use it in GitHub Desktop.
Download ZIP
cartodb infowindow trouble
Raw
index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="">
<head>
<style>
#map1{
height: 400px;
width: 400px;
position:relative;
}
#map2{
height: 400px;
width: 400px;
position:relative;
}
</style>
<title>Title Page</title>
<meta charset="UTF-8">
<meta name=description content="">
<meta name=viewport content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- JS -->
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<!--API loader-->
<script type="text/javascript" src="http://libs.cartocdn.com/cartodb.js/v3/cartodb.js"></script>
<!-- <link rel="stylesheet" type="text/css" href="css/cehtp_resources.css" /> -->
<link rel="stylesheet" type="text/css" href="http://libs.cartocdn.com/cartodb.js/v3/themes/css/cartodb.css" />
<!-- infowindow template -->
<script type="infowindow/html" id="infowindow_template">
<div class="cartodb-popup">
<a href="#close" class="cartodb-popup-close-button close">x</a>
<div class="cartodb-popup-content-wrapper">
<div class="cartodb-popup-header">
</div>
<div class="cartodb-popup-content">
<!-- content.data contains the field info -->
<h4>Water System Name: </h4>
<p>{{content.data.pwsname}}</p>
<h4>Year: </h4>
<p>{{content.data.yearassociatedto}}</p>
</div>
</div>
<div class="cartodb-popup-tip-container"></div>
</div>
</script>
</head>
<body>
<div id="map1"></div>
<hr />
<div id="map2"></div>
</body>
<script>
var map;
$(document).ready(function() {
var q2 = "SELECT cartodb_id, the_geom, latitude, pwsname, principalcountyservedfips, principalcityfeatureid, totalconnections, systempopulation, primarysourcecode, yearassociatedto, longitude, locationderivationcode, system_no, pwsidnumber, yearpulled, the_geom_webmercator FROM inventory"
var queryMinusOne = "SELECT cartodb_id, the_geom, latitude, pwsname, principalcityfeatureid, totalconnections, systempopulation, primarysourcecode, yearassociatedto, longitude, locationderivationcode, system_no, pwsidnumber, yearpulled, the_geom_webmercator FROM inventory"
addGoogleMap('#map1', q2);
addGoogleMap('#map2', queryMinusOne);
});
function addGoogleMap(whichdiv, q) {
var mapOptions = {
zoom: 6,
center: new google.maps.LatLng(37.35, -120.015),
mapTypeId: google.maps.MapTypeId.TERRAIN
};
map = new google.maps.Map($(whichdiv)[0], mapOptions);
geocoder = new google.maps.Geocoder();
//*********************************************************************
// Add the layer showing the inventory
//*********************************************************************
var sublayers = [];
cartodb.createLayer(map, 'http://cehtp.cartodb.com/api/v2/viz/inventory/viz.json')
.addTo(map)
.on('done', function(layer) {
var subLayerOptions = {
sql: q
}
var sublayer = layer.getSubLayer(0);
sublayer.set(subLayerOptions);
sublayers.push(sublayer);
sublayer.infowindow.set('template', $('#infowindow_template').html());
layer.on('error', function(err) {
cartodb.log.log('error: ' + err);
});
})
.on('error', function() {
cartodb.log.log("some error occurred");
});
}
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment