Skip to content

Instantly share code, notes, and snippets.

@zross
Last active October 26, 2017 17:46
Show Gist options
  • Save zross/6700719 to your computer and use it in GitHub Desktop.
Save zross/6700719 to your computer and use it in GitHub Desktop.
HTML: Google maps with CartoDB (v3) layer, includes cartoCSS (CA counties)
<!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>
html, body {
height: 100%;
margin: 0;
}
#map{
height:100%;
}
</style>
<script>
var map;
var countycartoCSS ="#countyshp{ \
polygon-fill: blue; \
polygon-opacity: 0.5; \
line-width: 1.5; \
line-color: #FFFFFF; \
line-opacity: 0.5; \
} \
#countyshp::labels[zoom>=8] { \
text-name: [name] + ' County'; \
text-face-name: 'DejaVu Sans Bold'; \
text-size: 12; \
text-fill: #FFFFFF; \
text-allow-overlap: true; \
text-halo-fill:rgba(80,80,80,0.6); \
text-halo-radius: 2; \
text-dy: 0; \
}"
$(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
infowindow: false
})
.on('done', function(layer) {
map.overlayMapTypes.setAt(0, layer);
var sublayer = layer.getSubLayer(0);
sublayer.setCartoCSS(countycartoCSS);
});
});//end document ready
</script>
</head>
<body>
<div id="map">
</div>
</body>
</html>
@Scarysize
Copy link

Nice, thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment