zross/index.html

## index.html
<!DOCTYPE html>

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

Some code and fade image from http://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.
-->


<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 href='http://fonts.googleapis.com/css?family=Berkshire+Swash' rel='stylesheet' type='text/css'>

    <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>

    <script>

    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, 'http://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>

## leftBkg.png

      
    Raw
  

              leftBkg.png
	<!DOCTYPE html>

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

	Some code and fade image from http://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.
	-->


	<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 href='http://fonts.googleapis.com/css?family=Berkshire+Swash' rel='stylesheet' type='text/css'>

	<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>

	<script>

	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, 'http://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>