Skip to content

Instantly share code, notes, and snippets.

@michaelabon

michaelabon/map.js

Created July 20, 2012 01:39
Show Gist options
  • Save michaelabon/3148124 to your computer and use it in GitHub Desktop.
Save michaelabon/3148124 to your computer and use it in GitHub Desktop.
Download ZIP
Yarns and Bombs
Raw
map.js
<!-- map.js -->
<!-- javascript function to set up a google map -->
<!-- centered on vancouver city hall -->
var map;
var vanCityHall = new google.maps.LatLng(49.260921, -123.113962);
function init(){
geocoder = new google.maps.Geocoder();
var mapOptions = {
zoom: 12,
center: vanCityHall,
mapTypeId: google.maps.MapTypeId.HYBRID
};
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
var marker = new google.maps.Marker({
position: vanCityHall,
map: map
});
}
<!-- javascript function to perform a geocode of an address -->
<!-- returns a latitude and longitude -->
<!-- this function is taken from the tutorial located at: -->
<!-- //developers.google.com/maps/documentation/javascript/ -->
function codeAddress( ) {
var address = document.getElementById("address").value;
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
<!-- Function to process address strings from table selections -->
<!-- Also handles recolouring the button -->
function codeAddress2(address) {
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
Raw
something.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page import="java.util.List" %>
<%@ page import="java.sql.*" %>
<%@ page import="com.google.appengine.api.rdbms.AppEngineDriver" %>
<!Doctype html>
<html>
<head>
<!-- Include the Maps api -->
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<!-- bring in the init() function to set up the map -->
<script type="text/javascript"
src="map.js">
</script>
</head>
<body onload="init()"> <!-- needed to make the map display -->
<header style="
min-height: 20px;
height: 40px;
width: 100%;
font-family: Gill;
font-size: 2em;
text-align: center;
background-color: #72B4D6;
border-top-left-radius: 20px;
border-top-right-radius: 20px;"> eclectic fuzzy graffiti </header>
<% Connection connection = null; %>
<% ResultSet results; %>
<%
connection = DriverManager.getConnection("jdbc:google:rdbms://sixthreesixc6c:brokendb/brokendb");
results = connection.createStatement().executeQuery("SELECT DISTINCT NEIGHBOURHOOD_NAME FROM Trees"); %>
<div id="sidebar" style="float: left; background-color: #72B4D6; width: 30%; height: 400px;">
<div id="searchOpts" style=" background-color:#fff; border-color:#72B4D6;
border-style: solid; border-width: 1px; border-radius: 20px;
width:auto; height:auto; ">
<!-- Set up the variable to populate neighbourhood options in select list -->
<!-- Set select list of neighbourhoods -->
<form name="neighbourhood_list" action="yarntree.jsp" method="get">
<div style="padding: 1em;"><select name="nh" onChange="document.neighbourhood_list.submit();">
<option> Select a neighbourhood </option>
<option value = "all"> View all trees </option>
<option value = "yb"> View only yarnbombed trees </option>
<% String nn;
while (results.next())
{
nn = results.getString("NEIGHBOURHOOD_NAME");
%>
<option value ="<%= nn %>"><% out.print( nn ); %></option>
<%}%>
</select></div>
</form>
<% connection.close(); %>
<!-- Construct the search boxes, and send the results to the url with "search" -->
<form name="search_trees">
<div style="padding-top: 1em; padding-left: 1em;"><input id = "address" type ="text" size = "48" placeholder="i.e. 2324 Penticton Street, Vancouver, BC"/> </div>
<div style="padding-top: 1em; padding-left: 1em;">
<input type="button" value="Look-up" onclick="codeAddress()">
<input type="button" value="Clear markers" onclick="init()">
</div>
<div style="padding-top: 1em; padding-left: 1em;">
<input name="s_bombed" value="isBombed" type="checkbox"> Search only for trees with cozys?</div>
</form>
</div> <!-- end of the sub-div that has the search boxes -->
</div>
<!-- **************** THE GOOGLE MAP DOC ELEMENT *************** -->
<div id="map_canvas" style="float: left; height: 400px; width: 70%;"></div>
<!-- **************** THE DATATABLE DOC ELEMENT *************** -->
<div id="datatable" style="clear:both">
<!-- Query search results based on the choice from the select list -->
<!-- If nothing was selected, do not display any results -->
<!-- If 'all' was selected, display all trees in the db -->
<!-- Else if 'only yarnbombed tree' was selected, perform a Natural join on table.Bombs and display those -->
<!-- Else a particular neighbourhood was selected, show all trees in that neighbourhood -->
<%
String nhSearched = request.getParameter("nh");
if( nhSearched != null){
connection = DriverManager.getConnection("jdbc:google:rdbms://sixthreesixc6c:brokendb/brokendb");
if(nhSearched.equals("all"))
{
results = connection.createStatement().executeQuery("SELECT TREE_ID, CIVIC_NUMBER, STD_STREET," +
" NEIGHBOURHOOD_NAME, DIAMETER, COMMON_NAME FROM Trees");
}else if(nhSearched.equals("yb")){
results = connection.createStatement().executeQuery("SELECT TREE_ID, CIVIC_NUMBER, STD_STREET," +
" NEIGHBOURHOOD_NAME, DIAMETER, COMMON_NAME FROM Trees NATURAL JOIN Bombs");
}
else{
results = connection.createStatement().executeQuery("SELECT TREE_ID, CIVIC_NUMBER, STD_STREET," +
" NEIGHBOURHOOD_NAME, DIAMETER, COMMON_NAME FROM Trees WHERE NEIGHBOURHOOD_NAME LIKE '%"
+ nhSearched + "%' LIMIT 10, 5");
}%>
<!-- set up the table for displaying the results of a tree search -->
<table style="border: 1px solid black">
<tbody>
<tr>
<th width="10%" style="background-color: #636C6C; margin: 5px">Street Number</th>
<th style="background-color: #636C6C; margin: 5px">Street Name</th>
<th style="background-color: #636C6C; margin: 5px">Neighbourhood</th>
<th width="10%" style="background-color: #636C6C; margin: 5px">Diameter of trunk</th>
<th style="background-color: #636C6C; margin: 5px">Common Name</th>
<th style="width=auto; background-color: #636C6C; margin: 5px">View</th>
</tr><%
String str = "c";
while (results.next()){
int id = results.getInt("TREE_ID");
int streetNumber = results.getInt("CIVIC_NUMBER");
String streetName = results.getString("STD_STREET");
String neighbourhood = results.getString("NEIGHBOURHOOD_NAME");
float diameter = results.getFloat("DIAMETER");
String commonName = results.getString("COMMON_NAME");
String fullAddress = Integer.toString(streetNumber)+ " " + streetName + ", Vancouver, BC";
str += "a";
%>
<tr>
<td style="text-align: center;"><%= streetNumber %></td>
<td style="text-align: center;"><%= streetName %></td>
<td style="text-align: center;"><%= neighbourhood %></td>
<td style="text-align: center;"><%= diameter %></td>
<td style="text-align: center;"><%= commonName %></td>
<td style="text-align: center;"><button type="button" id="<%=str%>"
value ="<%= fullAddress %>" style="background-color: #636c6c;"
onclick="codeAddress2('<%= fullAddress %>');" >
</button></td>
</tr>
<% } connection.close(); }%>
</tbody>
</table>
</div>
<footer style="
min-height: 15px;
height: 15px;
width: 100%;
background-color: #72B4D6;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;"> </footer>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment