zross/index.html

## index.html
<!DOCTYPE html>
<html>

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

<!-- A note: if you're not seeing the elements in the custom
  infowindow look at the cartodb dashboard and make sure they're
  turned on
-->

<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://libs.cartocdn.com/cartodb.js/v3/cartodb.js"></script>
    <link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/themes/css/cartodb.css" />
    <!-- <script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script> -->
    <style>

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

    #map{

      height:100%;
    }

    #box{
      height:30px;
      width:30px;
      background-color: grey;
    }

    line {
      stroke:rgb(0,0,0);
      stroke-width:3;
    }

    h1{
      margin-bottom: -10px;

    }

    </style>


    <script>

    var map;


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

  })
    .on('done', function(layer) {


      map.overlayMapTypes.setAt(0, layer);
      var sublayer = layer.getSubLayer(0);

      // here is an svg circle I'm going to add as a test
      var addcircle = '<svg id="infosvg" width="30" height="30" \
      version="1.1" xmlns="http://www.w3.org/2000/svg"> \
      <circle id="line" cx="15" cy="15" r="10" fill="red" \
      stroke="black"/></svg>'

      // set the info window
      sublayer.infowindow.set('template', function(data) {

        //get the lat long and additional information on click
        //location
        var clickPosLatLng = this.model.get('latlng');
        var fields = this.model.get('content').fields;

        //test to see if it's still loading and if not go ahead and set
        //the infowindow
        if (fields && fields[0].type !== 'loading') {

          //I'm grabbing the county name but you could grab the ID and use it
          //in a query to cartodb to get other attributes
          var obj = _.find(fields, function(obj) {
            return obj.title == 'name'
          }).value

          //
          var thehtml = '<H1 margin-bottom="-30px">' + obj + '</H1>' + addcircle
          return thehtml

        } // end test of status


      }); // end infowindow.set


    }); //end done (and createLayer)


}); //end document ready

</script>

</head>
<body>
  <div id="map">

  </div>


</body>


</html>
	<!DOCTYPE html>
	<html>

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

	<!-- A note: if you're not seeing the elements in the custom
	infowindow look at the cartodb dashboard and make sure they're
	turned on
	-->

	<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://libs.cartocdn.com/cartodb.js/v3/cartodb.js"></script>
	<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/themes/css/cartodb.css" />
	<!-- <script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script> -->
	<style>

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

	#map{

	height:100%;
	}

	#box{
	height:30px;
	width:30px;
	background-color: grey;
	}

	line {
	stroke:rgb(0,0,0);
	stroke-width:3;
	}

	h1{
	margin-bottom: -10px;

	}

	</style>




	<script>

	var map;


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

	})
	.on('done', function(layer) {


	map.overlayMapTypes.setAt(0, layer);
	var sublayer = layer.getSubLayer(0);

	// here is an svg circle I'm going to add as a test
	var addcircle = '<svg id="infosvg" width="30" height="30" \
	version="1.1" xmlns="http://www.w3.org/2000/svg"> \
	<circle id="line" cx="15" cy="15" r="10" fill="red" \
	stroke="black"/></svg>'

	// set the info window
	sublayer.infowindow.set('template', function(data) {

	//get the lat long and additional information on click
	//location
	var clickPosLatLng = this.model.get('latlng');
	var fields = this.model.get('content').fields;

	//test to see if it's still loading and if not go ahead and set
	//the infowindow
	if (fields && fields[0].type !== 'loading') {

	//I'm grabbing the county name but you could grab the ID and use it
	//in a query to cartodb to get other attributes
	var obj = _.find(fields, function(obj) {
	return obj.title == 'name'
	}).value

	//
	var thehtml = '<H1 margin-bottom="-30px">' + obj + '</H1>' + addcircle
	return thehtml

	} // end test of status


	}); // end infowindow.set



	}); //end done (and createLayer)



	}); //end document ready

	</script>

	</head>
	<body>
	<div id="map">

	</div>




	</body>


	</html>