ft spatial query / intersection

gistfile1.txt

<script type="text/javascript" charset="utf-8">
  	var map = null;
		var ft_id = 1964047;
		var precinct_ft = 1979379;
		var directionsService = new google.maps.DirectionsService();
		var directionsDisplay = new google.maps.DirectionsRenderer();
		var geocoder = new google.maps.Geocoder();
		var cur_marker = null;
		var selected_address = "";
		var layer = null;
		google.load('visualization', '1');

        $(document).ready(function() {
			var sf = new google.maps.LatLng(37.768137,-122.437649);
			map = new google.maps.Map(document.getElementById('map'), {
			  center: sf,
			  zoom: 12,
			  mapTypeId: 'roadmap'
			});

			directionsDisplay.setMap(map);
			directionsDisplay.setPanel(document.getElementById('directions-panel'));

			layer = new google.maps.FusionTablesLayer({
			  query: {
				select: 'Location 2',
				from: ft_id
			  }
			});
			layer.setOptions({suppressInfoWindows: true});
			layer.setMap(map); 

			layerListener(layer);


			var defaultSW = new google.maps.LatLng(37.709628,-122.507172)
			var defaultNE = new google.maps.LatLng(37.835276,-122.361946)
			var allowedBounds = new google.maps.LatLngBounds(defaultSW,defaultNE);

			google.maps.event.addListener(map,'center_changed',function() { checkBounds(); });

			function checkBounds() {    
				if(! allowedBounds.contains(map.getCenter())) {
				  var C = map.getCenter();
				  var X = C.lng();
				  var Y = C.lat();

				  var AmaxX = allowedBounds.getNorthEast().lng();
				  var AmaxY = allowedBounds.getNorthEast().lat();
				  var AminX = allowedBounds.getSouthWest().lng();
				  var AminY = allowedBounds.getSouthWest().lat();

				  if (X < AminX) {X = AminX;}
				  if (X > AmaxX) {X = AmaxX;}
				  if (Y < AminY) {Y = AminY;}
				  if (Y > AmaxY) {Y = AmaxY;}

				  map.setCenter(new google.maps.LatLng(Y,X));                          
				}  
			  }//endfunc

        });

		 function calcRoute() {
			var start = $("#directions_input").val()
			var end = selected_address;
			if(selected_address == ''){
				alert("Please select a polling location before searching for directions");
				return false;
			}
			var request = {
			  origin: start,
			  destination: end,
			  travelMode: google.maps.DirectionsTravelMode.DRIVING
			};
			directionsService.route(request, function(response, status) {
			  if (status == google.maps.DirectionsStatus.OK) {
				directionsDisplay.setDirections(response);
			  }
			});
			}

		function revealDirections(){
			$("#directions-div").show();
			return false;
		}


		function revealPrecinct(){
			$("#searchables").show();
			return false;
		}

		function findAddr(){
			var address = $("#search_text").val()
			geocoder.geocode({ 'address': address }, function (results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
				if(cur_marker != null){
					cur_marker.setMap(null);
				}
                //Create the Map and center to geocode results latlong
                var latlng = new google.maps.LatLng(results[0].geometry.location.lat(), results[0].geometry.location.lng());
				var queryText = encodeURIComponent("SELECT 'PRECNAME' FROM "+precinct_ft+" WHERE ST_INTERSECTS(geometry, CIRCLE(LATLNG("+latlng.lat()+","+latlng.lng()+"),1))");
				var query = new google.visualization.Query('http://www.google.com/fusiontables/gvizdata?tq='  + queryText);

				query.send(getData);
			    cur_marker = new google.maps.Marker({
				  position: latlng, 
				  map: map, 
				});
				map.setCenter(latlng);                          
				map.setZoom(14);
			}else{
				alert("We couldn't locate your address.  Please ensure you entered your street number, street, city, state and zip then try again.");
				return false;
			}
			});
		}

		function resetLayer(){
			if(layer != null){
				layer.setMap(null);
			}
			layer = new google.maps.FusionTablesLayer({
			  query: {
				select: 'Location 2',
				from: ft_id
			  }
			});
			layer.setOptions({suppressInfoWindows: true});
			layer.setMap(map); 

			layerListener(layer);

			return false;

		}

		function layerListener(layer){
			google.maps.event.addListener(layer, 'click', function(e){
				selected_address = e.row['Location 2'].value;
				var loc = e.row['Location1'].value;
				var notes = e.row['Direction'].value;
				var precinct = e.row['Precinct'].value;
				$("#sel-addr").html(selected_address);
				$("#sel-notes").html(notes);
				$("#sel-precinct").html(precinct);
				$("#sel-loc").html(loc);
				$("#sel-directions").html("<a href='#' onclick='return revealDirections()'>Get directions</a>");
				$("#directions_search_div").show( 'highlight', {}, 500);

			});
		}

		function updateSelectedLocation(response){
			var data_table = response.getDataTable();
				selected_address = data_table.getValue(0,0);
				var loc = data_table.getValue(0,1);
				var notes = data_table.getValue(0,3);
				var precinct = data_table.getValue(0,2);
				$("#sel-addr").html(selected_address);
				$("#sel-notes").html(notes);
				$("#sel-precinct").html(precinct);
				$("#sel-loc").html(loc);
				$("#sel-directions").html("<a href='#' onclick='return revealDirections()'>Get directions</a>");
				$("#directions_search_div").show( 'highlight', {}, 500);
		}

		function getData(response){
			var data_table = response.getDataTable();
			try{
				var prec = data_table.getValue(0,0);
				if(layer != null){
					layer.setMap(null);
				}
				layer = new google.maps.FusionTablesLayer(ft_id,{
					query: "SELECT 'Location 2', 'Location1' FROM "+ft_id+" WHERE Precinct CONTAINS '"+prec+"'"
				});
				layer.setOptions({suppressInfoWindows: true});
				layer.setMap(map); 
				layerListener(layer);

				var queryText = encodeURIComponent("SELECT 'Location 2', 'Location1', 'Precinct', 'Direction' FROM "+ft_id+" WHERE Precinct CONTAINS '"+prec+"'");
				var query = new google.visualization.Query('http://www.google.com/fusiontables/gvizdata?tq='  + queryText);

				query.send(updateSelectedLocation);

				$("#reset").show();

			} catch(err){
				alert("We couldn't locate your address.  Please ensure you entered your street number, street, city, state and zip then try again.");
				return false;
			}
		  }
    </script>
{% endblock %}
{% block header_text %}
	San Francisco Mayoral Race 2011 - Polling Locations
{% endblock %}
{% block main_column %}

    <div class="col c1">
        <div id="" class="pad">
            <h1>Find Your Polling Place</h1>
			<p>
			If you are registered to vote in San Francisco, you have been assigned a polling place. <b>Find it by <a id="find_precinct_link" href="#" onclick="return revealPrecinct()">clicking here and entering your full address</a></b>. If you vote at an unassigned polling place, you must cast a provisional ballot that requires two to three weeks to process. Select any polling location on the map for more information and directions.
			</p>
			<div id="searchables" style="display:none;">
				<input type='text' style='font-family:verdana;width:500px;font-size:12px;' id='search_text'name = 'tb' value=''/> 
				<input id="search_button" type="button" value="Search" class="btn" language="javascript" onclick="return findAddr()" /><br/>
				<a id="reset" style="display:None;" href="#" onclick="return resetLayer()">Show all polling locations</a><br/>
				<em>Polling places can change before Election Day. Before voting on Nov. 8, <a href="http://gispubweb.sfgov.org/website/pollingplace/">check the Election Department's website</a> to ensure your polling place hasn't moved.</em>

			</div>
		</div>
	</div>
	<div id="map" style="height:550px; width:620px;"></div>

    <div style="clear:both"></div>
	<div class="pad" style="padding-top:-15px;padding-bottom:-15px;">
		<em>Poll locations downloaded from <a href="http://www.sfgov2.org/ftp/uploadedfiles/elections/PrecinctServices/2011/Nov2011_PollList_09232011.xls">the Department of Elections</a></em><br/>
		<em>Precinct data downloaded from <a href="http://gispubweb.sfgov.org/website/sfshare/accept.asp?gisID=772900Menon690041&[email protected]&urlExtract=noUrlExtract">the GIS catalog for the City and County of San Francisco</a></em>
	</div>
    <div class="col c1">
		<div id="disqus" class="pad">
			<fb:comments href="http://www.baycitizen.org{% url sfmayor_poll_places %}" width="582px"></fb:comments>
		</div>
	</div>
{% endblock %}

{% block right_column %}
	<div style="padding-top:10px;">
		<ul id="directions_search_div" class="interactives" style="display: block;padding:5px;background-color: #F8F8F8;border-bottom: 1px solid #E7E7E7;border-top: 1px solid white;">
			<li><h5>Selected Polling Location</h5></li>
			<li><b>Location:</b> <span id="sel-loc"></span></li>
			<li><b>Address:</b> <span id="sel-addr"></span></li>
			<li><b>Precinct:</b> <span id="sel-precinct"></span></li>
			<li><b>Notes:</b> <span id="sel-notes"></span></li>
			<li><span id="sel-directions"></span></li>
			<div id="directions-div" style="display:none;">From:<li>
				<input type='text' style='font-family:verdana;width:250px;font-size:12px;' id='directions_input' name = 'tb' value=''/> 
				<input id="search_button" type="button" value="Get Directions" class="btn" language="javascript" onclick="return calcRoute()" /><br/>
				<em style="font-size:.75em">Enter your full address including city and state</em>

			</div>
			</li>
		</ul>
	</div>
<div id="directions-panel"></div>