Reformat welcome page

This commit is contained in:
Erik Michaels-Ober 2011-02-23 17:24:08 -05:00
parent c14f186c53
commit c2b335b3a2
8 changed files with 70 additions and 91 deletions

3
.gitmodules vendored
View File

@ -1,3 +0,0 @@
[submodule "public/javascripts/geojson"]
path = public/javascripts/geojson
url = https://github.com/JasonSanford/GeoJSON-to-Google-Maps.git

View File

@ -1,7 +1,7 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<title>AdoptAHydrant</title> <title>Adopt a Hydrant</title>
<%= stylesheet_link_tag "main" %> <%= stylesheet_link_tag "main" %>
<%= javascript_include_tag "http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" %> <%= javascript_include_tag "http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" %>
<%= javascript_include_tag "http://maps.google.com/maps/api/js?sensor=false" %> <%= javascript_include_tag "http://maps.google.com/maps/api/js?sensor=false" %>

View File

@ -1,3 +1,28 @@
<div id="map_canvas" style="width:100%; height:100%"> <div id="map_canvas">
</div>
<div id="sidebar">
<h1>Adopt a Hydrant</h1>
<p>
Claim responsibility for shoveling out a fire hydrant after it snows.
</p>
<form>
<label for="address">
Street address
</label>
<input type="text" id="address" name="address" value="" tabindex="1" />
<label for="city">
City
</label>
<select id="city" name="city" tabindex="2">
<option value="Boston">Boston</option>
</select>
<label for="state">
State
</label>
<select id="state" name="state" tabindex="3">
<option value="MA">Massachusetts</option>
</select>
<button tabindex="4">Locate Orphan Fire Hydrants</button>
</form>
<img src="images/hydrant-in-snow.jpg">
</div> </div>

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

@ -1 +0,0 @@
Subproject commit d04e43652e8e8eeaddf106667c0da79659d620d7

View File

@ -1,75 +1,12 @@
$(function() { $(function() {
var map; var map;
currentFeature_or_Features = null;
var roadStyle = {
strokeColor: "#FFFF00",
strokeWeight: 7,
strokeOpacity: 0.75
};
var addressStyle = {
icon: "images/marker-hydrant.png"
};
var parcelStyle = {
strokeColor: "#FF7800",
strokeOpacity: 1,
strokeWeight: 2,
fillColor: "#46461F",
fillOpacity: 0.25
};
var latlng = new google.maps.LatLng(42.358431,-71.059773); var latlng = new google.maps.LatLng(42.358431,-71.059773);
var myOptions = { var myOptions = {
zoom: 14, zoom: 15,
center: latlng, center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP mapTypeId: google.maps.MapTypeId.ROADMAP
}; };
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
function getHydrants() {
$.ajax({
url: "http://civicapi.couchone.com/boston_fire_hydrants/_design/geo/_spatiallist/geojson/points",
dataType: 'jsonp',
data: {
"bbox":"-71.07326030731201,42.35568977315507,-71.04317665100098,42.37176642783948"
},
success: function(data){
showFeature(data, addressStyle);
}
});
}
function clearMap(){
if (!currentFeature_or_Features)
return;
if (currentFeature_or_Features.length){
for (var i = 0; i < currentFeature_or_Features.length; i++){
currentFeature_or_Features[i].setMap(null);
}
}else{
currentFeature_or_Features.setMap(null);
}
}
function showFeature(geojson, style){
clearMap();
currentFeature_or_Features = new GeoJSON(geojson, style || null);
if (currentFeature_or_Features.type && currentFeature_or_Features.type == "Error"){
document.getElementById("put_geojson_string_here").value = currentFeature_or_Features.message;
return;
}
if (currentFeature_or_Features.length){
for (var i = 0; i < currentFeature_or_Features.length; i++){
currentFeature_or_Features[i].setMap(map);
}
}else{
currentFeature_or_Features.setMap(map)
}
document.getElementById("put_geojson_string_here").value = JSON.stringify(geojson);
}
getHydrants();
}) })

View File

@ -1,24 +1,45 @@
html { height: 100% } html {
body { height: 100%; margin: 0px; padding: 0px } height: 100%;
#map_canvas { height: 100% }
#left{
width: 500px;
height: 500px;
float:left;
} }
#right{
width: 200px; body {
height: 500px; font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, FreeSerif, serif;
float:left; height: 100%;
padding: 10px; margin: 0px;
padding: 0px;
} }
#right div{
margin-bottom: 8px; #map_canvas {
float: left;
height: 100%;
width: 75%;
} }
#right textarea{
height: 150px; #sidebar {
width: 300px; float: left;
height: 100%;
text-align: center;
width: 25%;
overflow: hidden;
}
p, form {
margin: auto;
width: 80%;
margin-top: 20px;
}
#sidebar img {
width: 100%;
}
input, select, option, button {
margin-bottom: 20px;
text-align: center;
font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, FreeSerif, serif;
font-size: 1.0em;
}
input, button {
width: 100%;
} }
#map{
height:100%;
}