HTML CartoDB, Google, Fade Map, Style Google

<!DOCTYPE html>

<!-- 
ZevRoss Spatial Analysis, www.zevross.com

Some code and fade image from https://cartodb.github.io/cartodb.js/examples/TheHobbitLocations/

To create faded image, create two layers in Photoshop, add
layer mask to top layer and put a gradient as mask.
-->

<style>

html, body {
      height: 100%;
      margin: 0;
    }

div#map{
  position: absolute;
  z-index: 0;
  bottom: 0;
  top: 0;
  right: 0;
  left: 350px;
}

div#leftBkg{
  background: url(leftBkg.png) repeat-y;
  width: 619px;
  position: absolute;
  left: 0px;
  top: 0px;
  bottom: 0px;
  pointer-events: none;
}

div.left{
  position: absolute;
  left: 60px;
  top: 60px;
  z-index: 3;
}

div.left h1{
  width: 300px;
  font-family: 'Berkshire Swash', cursive;
}

</style>

var map;

var countycartoCSS ="#countyshp{ \
      polygon-fill: #028482; \
      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.TERRAIN,
      disableDefaultUI: true
    };

map = new google.maps.Map($('#map')[0], mapOptions);

// https://developers.google.com/maps/documentation/javascript/reference#MapTypeStyleFeatureType
map.set('styles', [
{
  featureType: 'water',
  elementType: 'geometry',
  stylers: [
  { hue: '#dbeffc' },
  { lightness: 75 },
  { saturation: 99 }
  ]
},
{
  "elementType": "labels",
  "stylers": [
  { "visibility": "off" }
  ]
}
]);

cartodb.createLayer(map, 'https://cehtp.cartodb.com/api/v2/viz/countyshp/viz.json', {
  query: 'SELECT * FROM {{table_name}}', 
  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>
    <div id="leftBkg"></div>
    <div class="left">
      <div id="title"></div>
      <h1>This is the Fade Map</h1>
    </div>
  </body>

</html>

Modified http://html5shiv.googlecode.com/svn/trunk/html5.js to a secure url

Modified http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js to a secure url

Modified http://libs.cartocdn.com/cartodb.js/v3/cartodb.js to a secure url

https://html5shiv.googlecode.com/svn/trunk/html5.js

https://maps.googleapis.com/maps/api/js?sensor=false

https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js

https://libs.cartocdn.com/cartodb.js/v3/cartodb.js