gautamg795 · November 13, 2014 00:52
diff --git a/index.html b/index.html
 <!DOCTYPE HTML>
 <html>
    <head>
        <title>My Test Page</title>
 
        <!-- Bootstrap: http://getbootstrap.com/getting-started/ -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap-theme.min.css">
        <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
        <!-- Underscore: http://underscorejs.org/ -->
        <script src="http://underscorejs.org/underscore-min.js"></script>
        <!-- jQuery: http://jquery.com/ -->
        <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
        <!-- D3: http://d3js.org/ -->
        <script src="http://d3js.org/d3.v3.min.js"></script>
        <!-- Bootstrap's JS file: http://getbootstrap.com/javascript/ -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
        <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
        <style type="text/css"> 
            td:hover {
                cursor: pointer; /* Make the cursor turn into a "link" pointer when we hover
                                  * over a table row */
            }
        </style>

    </head>
    <body>
        <div class="container">
            <h1>This is my test page</h1>
 
            <p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            <div id="map" style='height: 600px'>
                
            </div>
            <div id="my_table"></div>
        </div>

        <script id="table_template" type="text/template">
            <table class="table">
                <caption>This is fancy.</caption>
                <thead>
                    <tr>
                        <th>Number</th>
                        <th>Address</th>
                        <th>Facility Name</th>
                        <th>Dates</th>
                        <th>Times</th>
                    </tr>
                </thead>
                <tbody>
                    <% _.each(locations, function(location, index) { 
                        var popup = "<b>" + location.facility_name + "</b><br />" + location.street1 + "<br />" + location.city + ", " + location.state;
                        markers.push(L.marker([location.latitude, location.longitude]).addTo(map).bindPopup(popup)); %>
                        <tr id="clinic-<%= location.id %>">
                            <td><%= index + 1 %></td>
                            <td><%= location.street1 %><br /><%= location.city %>, <%= location.state %> <%= location.postal_code %></td>
                            <td><%= location.facility_name %></td>
                            <td><%= location.begin_date %> - <%= location.end_date %></td>
                            <td><%= location.begin_time %> - <%= location.end_time %></td>
                        </tr>
                    <% }); %>
                </tbody>
            </table>
        </script>

        <script>
            var markers = new Array(); // Initialize an Array to hold our markers
            var map = L.map('map').setView([34.0425, -118.24], 10); // Initialize the map
            var tileUrl = "http://{s}.latimes.com/quiet-la-0.4.0/{z}/{x}/{y}.png"; // Use LATimes' map tiles
            L.tileLayer(tileUrl, {
                attribution: "Map data (c) <a href='http://www.openstreetmap.org/'>OpenStreetMap</a> contributors, <a href='http://creativecommons.org/licenses/by-sa/2.0/'>CC-BY-SA</a>",
                subdomains: ['tiles1', 'tiles2', 'tiles3', 'tiles4']
            }
            ).addTo(map); // Add tiles to the map
            var updateTable = function(data) { // We call this function to render our table with data
                // Calling our template will produce some HTML
                // from the "context" object we're passing in.
                var table_html = table_template({
                    'locations': data
                });
                // Load the HTML into our container div
                table_container.html(table_html); // Fill our target element's HTML with the rendered HTML
                makeTableLinks(); // Make our table link up to the map
            };
            var table_template = _.template($('#table_template').html()); // Generate the compiled template
            var table_container = $('#my_table'); // This is where we want to put the rendered table
            $.ajax({
                url: 'https://s3-us-west-2.amazonaws.com/stage.anthonypesce.com/flu_shots.json',
                dataType: "jsonp",
                jsonpCallback: "data",
                success: function (data) {
                    // Grab the container we want to load our table into
                    updateTable(data);
                }
            });
            // The following is a function that we call once the table data has been loaded
            var makeTableLinks = function() {
                $('#my_table').on('click', 'tr', function() { // Assign an onClick handler to each tr element
                    var num = parseInt($(this).children().first().html()); // Parse the 'number' field as an Int
                    var curMarker = markers[num-1]; // Get the marker corresponding to this table row
                    map.setView(curMarker.getLatLng(), 12) // Set the view to this marker's position, at zoom level 12
                    curMarker.openPopup(); // Open the popup associated with that marker
                });
                $("tr").not(':first').hover( // Make all table rows (except the header) get dark upon a hover
                  function () {
                    $(this).css("background","#95a5a6");
                  }, 
                  function () {
                    $(this).css("background","");
                  }
                );
            }
            

        </script>
    </body>
 </html>
	<!DOCTYPE HTML>
	<html>
	<head>
	<title>My Test Page</title>

	<!-- Bootstrap: http://getbootstrap.com/getting-started/ -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap-theme.min.css">
	<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
	<!-- Underscore: http://underscorejs.org/ -->
	<script src="http://underscorejs.org/underscore-min.js"></script>
	<!-- jQuery: http://jquery.com/ -->
	<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
	<!-- D3: http://d3js.org/ -->
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<!-- Bootstrap's JS file: http://getbootstrap.com/javascript/ -->
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
	<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
	<style type="text/css">
	td:hover {
	cursor: pointer; /* Make the cursor turn into a "link" pointer when we hover
	* over a table row */
	}
	</style>

	</head>
	<body>
	<div class="container">
	<h1>This is my test page</h1>

	<p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
	<div id="map" style='height: 600px'>

	</div>
	<div id="my_table"></div>
	</div>

	<script id="table_template" type="text/template">
	<table class="table">
	<caption>This is fancy.</caption>
	<thead>
	<tr>
	<th>Number</th>
	<th>Address</th>
	<th>Facility Name</th>
	<th>Dates</th>
	<th>Times</th>
	</tr>
	</thead>
	<tbody>
	<% _.each(locations, function(location, index) {
	var popup = "<b>" + location.facility_name + "</b><br />" + location.street1 + "<br />" + location.city + ", " + location.state;
	markers.push(L.marker([location.latitude, location.longitude]).addTo(map).bindPopup(popup)); %>
	<tr id="clinic-<%= location.id %>">
	<td><%= index + 1 %></td>
	<td><%= location.street1 %><br /><%= location.city %>, <%= location.state %> <%= location.postal_code %></td>
	<td><%= location.facility_name %></td>
	<td><%= location.begin_date %> - <%= location.end_date %></td>
	<td><%= location.begin_time %> - <%= location.end_time %></td>
	</tr>
	<% }); %>
	</tbody>
	</table>
	</script>

	<script>
	var markers = new Array(); // Initialize an Array to hold our markers
	var map = L.map('map').setView([34.0425, -118.24], 10); // Initialize the map
	var tileUrl = "http://{s}.latimes.com/quiet-la-0.4.0/{z}/{x}/{y}.png"; // Use LATimes' map tiles
	L.tileLayer(tileUrl, {
	attribution: "Map data (c) <a href='http://www.openstreetmap.org/'>OpenStreetMap</a> contributors, <a href='http://creativecommons.org/licenses/by-sa/2.0/'>CC-BY-SA</a>",
	subdomains: ['tiles1', 'tiles2', 'tiles3', 'tiles4']
	}
	).addTo(map); // Add tiles to the map
	var updateTable = function(data) { // We call this function to render our table with data
	// Calling our template will produce some HTML
	// from the "context" object we're passing in.
	var table_html = table_template({
	'locations': data
	});
	// Load the HTML into our container div
	table_container.html(table_html); // Fill our target element's HTML with the rendered HTML
	makeTableLinks(); // Make our table link up to the map
	};
	var table_template = _.template($('#table_template').html()); // Generate the compiled template
	var table_container = $('#my_table'); // This is where we want to put the rendered table
	$.ajax({
	url: 'https://s3-us-west-2.amazonaws.com/stage.anthonypesce.com/flu_shots.json',
	dataType: "jsonp",
	jsonpCallback: "data",
	success: function (data) {
	// Grab the container we want to load our table into
	updateTable(data);
	}
	});
	// The following is a function that we call once the table data has been loaded
	var makeTableLinks = function() {
	$('#my_table').on('click', 'tr', function() { // Assign an onClick handler to each tr element
	var num = parseInt($(this).children().first().html()); // Parse the 'number' field as an Int
	var curMarker = markers[num-1]; // Get the marker corresponding to this table row
	map.setView(curMarker.getLatLng(), 12) // Set the view to this marker's position, at zoom level 12
	curMarker.openPopup(); // Open the popup associated with that marker
	});
	$("tr").not(':first').hover( // Make all table rows (except the header) get dark upon a hover
	function () {
	$(this).css("background","#95a5a6");
	},
	function () {
	$(this).css("background","");
	}
	);
	}


	</script>
	</body>
	</html>