Skip to content

Instantly share code, notes, and snippets.

@zross

zross/index.html

Last active December 24, 2015 16:19
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 zross/6827488 to your computer and use it in GitHub Desktop.
Save zross/6827488 to your computer and use it in GitHub Desktop.
Download ZIP
HTLM: Two Google maps side by side, linked with legend
Raw
index.html
<!DOCTYPE html>
<html>
<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://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></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" />
<style>
@import url(http://fonts.googleapis.com/css?family=PT+Sans:400,400italic,700,700italic);
body {
background: #FFFFEB;
color: #333;
/*font-family: "PT serif", serif;*/
font-family: 'PT Sans', sans-serif;
position: relative;
width: 100%;
margin-top: 0;
margin-right: auto;
margin-bottom: 4em;
margin-left: auto; /*width: 960px;*/
}
header,
footer,
h1,
h2,
h3,
h4,#FFFFEC
aside {
color: #000;
/*font-family: "Ubuntu Sans", sans-serif;*/
}
h1 {
font-size: 40px;
font-weight: 400;
/*letter-spacing: -2px;*/
letter-spacing: -1px; /*top right bot left*/
/*color: #3E606F;*/
color: #FFFFFF;
/* [disabled]display: block; */
/* [disabled]width: 960px; */
margin: 0px;
}
h2 {
margin: 0px; /*margin-top: 1.5em;*/
/* [disabled]background-color: #CC3; */
/* [disabled]display: block; */
}
h1, h2 {
text-rendering: optimizeLegibility;
}
h2 a {
color: #ccc;
left: -20px;
position: absolute;
width: 600px;
}
h3{
margin-left: 15px;
letter-spacing: 0.5px;
}
p{
width:600px;
margin-left: 15px;
}
h3~p{
margin-left: 30px;
}
a {
color: steelblue;
}
a:not(:hover) {
text-decoration: none;
}
.topBanner {
background-color:#457993;
padding-top: 30px;
padding-bottom: 30px;
top: 0px;
margin-bottom: 30px;
border-bottom-width: thin;
border-bottom-style: solid;
border-bottom-color: #3D4E5A;
-moz-box-shadow: 0px 3px 2px #999;
-webkit-box-shadow: 0px 3px 2px #999;
box-shadow: 0px 3px 2px #999;
}
.bannerContent {
width: 960px;
margin-right: auto;
margin-left: auto;
}
.bannerContent a img{
float: left;
left: -50px;
position: relative;
margin-right: 10px;
bottom: 15px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
.map1{
height:500px;
width:550px;
position: relative;
float:left;
}
.map2{
height:500px;
width:550px;
position:relative;
float:right;
}
.container {
width: 1200px;
margin-right: auto;
margin-left: auto;
height: auto;
}
</style>
<script>
var map;
/** bubble visualization */
var cartoCSS1 = '#summer_combined{ \
marker-fill: #FF5C00; \
marker-line-color: #FFF; \
marker-line-width: 2; \
marker-line-opacity: 1; \
marker-opacity: 0.9; \
marker-placement: point; \
marker-type: ellipse; \
marker-allow-overlap: true; \
marker-clip: false; \
marker-multi-policy: largest; \
} \
#summer_combined [ allavg <= 78.6683347693436] { \
marker-fill: #67001F; \
} \
#summer_combined [ allavg <= 77.8740475295487] { \
marker-fill: #B2182B ; \
} \
#summer_combined [ allavg <= 77.5796975256243] { \
marker-fill: #D6604D; \
} \
#summer_combined [ allavg <= 77.268322077982] { \
marker-fill: #F4A582; \
} \
#summer_combined [ allavg <= 76.9952790363271] { \
marker-fill: #FDDBC7; \
} \
#summer_combined [ allavg <= 76.6759713119303] { \
marker-fill: #D1E5F0; \
} \
#summer_combined [ allavg <= 76.3881201366188] { \
marker-fill: #92C5DE; \
} \
#summer_combined [ allavg <= 75.9304925108205] { \
marker-fill: #4393C3; \
} \
#summer_combined [ allavg <= 75.5808862104599] { \
marker-fill: #2166AC; \
} \
#summer_combined [ allavg <= 74.7931541041094] { \
marker-fill: #053061; \
}'
// "#67001F" "#B2182B" "#D6604D" "#F4A582" "#FDDBC7" "#D1E5F0" "#92C5DE" "#4393C3" "#2166AC" "#053061"
// /** bubble visualization */
var cartoCSS2 = '#summer_combined{ \
marker-fill: #FF5C00; \
marker-line-color: #FFF; \
marker-line-width: 2; \
marker-line-opacity: 1; \
marker-opacity: 0.9; \
marker-placement: point; \
marker-type: ellipse; \
marker-allow-overlap: true; \
marker-clip: false; \
marker-multi-policy: largest; \
} \
#summer_combined [ coolavg <= 74.1249306145087] { \
marker-fill: #67001F; \
} \
#summer_combined [ coolavg <= 71.7829399882805] { \
marker-fill: #B2182B ; \
} \
#summer_combined [ coolavg <= 71.2310214793787] { \
marker-fill: #D6604D; \
} \
#summer_combined [ coolavg <= 70.8300006933755] { \
marker-fill: #F4A582; \
} \
#summer_combined [ coolavg <= 70.3908678568185] { \
marker-fill: #FDDBC7; \
} \
#summer_combined [ coolavg <= 69.968884131948] { \
marker-fill: #D1E5F0; \
} \
#summer_combined [ coolavg <= 69.6197487127404] { \
marker-fill: #92C5DE; \
} \
#summer_combined [ coolavg <= 69.1598957936549] { \
marker-fill: #4393C3; \
} \
#summer_combined [ coolavg <= 68.5219917490414] { \
marker-fill: #2166AC; \
} \
#summer_combined [ coolavg <= 67.7241778592094] { \
marker-fill: #053061; \
}'
var sublayer;
$(document).ready(function(){
var mapOptions = {
zoom: 10,
center: new google.maps.LatLng(40.6700, -73.9400),
//mapTypeId: google.maps.MapTypeId.ROADMAP
mapTypeId: google.maps.MapTypeId.TERRAIN
};
map = new google.maps.Map($('.map1')[0], mapOptions);
map2 = new google.maps.Map($('.map2')[0], mapOptions);
var styles = [
{
featureType:'road',
"stylers": [
{ "visibility": "off" }
]
},
{
"elementType": "labels",
"stylers": [
{ "visibility": "off" }
]
}
]
map.set('styles', styles);
map2.set('styles', styles);
google.maps.event.addListener(map, 'bounds_changed', function() {
map2.setZoom(map.getZoom())
map2.setCenter(map.getCenter())
});
google.maps.event.addListener(map2, 'bounds_changed', function() {
map.setZoom(map2.getZoom())
map.setCenter(map2.getCenter())
});
// ----- Add the layer with the county information
cartodb.createLayer(map, 'http://spatial.cartodb.com/api/v2/viz/summer_combined/viz.json', {
query: 'SELECT * FROM summer_combined', // if you remove this the query applied in the editor will be used
infowindow: true
})
.on('done', function(layer) {
map.overlayMapTypes.setAt(0, layer);
sublayer = layer.getSubLayer(0);
sublayer.setCartoCSS(cartoCSS1);
});
cartodb.createLayer(map2, 'http://spatial.cartodb.com/api/v2/viz/summer_combined/viz.json', {
query: 'SELECT * FROM summer_combined', // if you remove this the query applied in the editor will be used
infowindow: true
})
.on('done', function(layer) {
map2.overlayMapTypes.setAt(0, layer);
sublayer = layer.getSubLayer(0);
sublayer.setCartoCSS(cartoCSS2);
});
var choropleth1 = new cdb.geo.ui.Legend({
type: "choropleth",
data: [
{ value: "74.79 (all hours)" },
{ value: "76.69" },
{ name: "color3", value: "#053061" },
{ name: "color3", value: "#2166AC" },
{ name: "color3", value: "#4393C3"},
{ name: "color3", value: "#92C5DE" },
{ name: "color3", value: "#D1E5F0" },
{ name: "color3", value: "#FDDBC7" },
{ name: "color3", value: "#F4A582" },
{ name: "color3", value: "#D6604D" },
{ name: "color2", value: "#B2182B" },
{ name: "color1", value: "#67001F" }
]
});
var choropleth2 = new cdb.geo.ui.Legend({
type: "choropleth",
data: [
{ value: "67.72 (3-5 am)" },
{ value: "74.12" },
{ name: "color3", value: "#053061" },
{ name: "color3", value: "#2166AC" },
{ name: "color3", value: "#4393C3"},
{ name: "color3", value: "#92C5DE" },
{ name: "color3", value: "#D1E5F0" },
{ name: "color3", value: "#FDDBC7" },
{ name: "color3", value: "#F4A582" },
{ name: "color3", value: "#D6604D" },
{ name: "color2", value: "#B2182B" },
{ name: "color1", value: "#67001F" }
]
});
$('.map1').append(choropleth1.render().el);
$('.map2').append(choropleth2.render().el);
});//end document ready
</script>
</head>
<body>
<div class="topBanner">
<div class="bannerContent"> <a href="http://www.zevross.com" target="_new"><img src="http://www.zevross.com/images/zevrosslogo_update_sm2.png" alt="ZRSA"></a>
<h1>Temperature for All Hours and Cool Hours (Summer)</h1>
</div>
</div>
<div class="container">
<div class="map1">
</div>
<div class="map2"></div>
</div>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment