Reformat welcome page
This commit is contained in:
Erik Michaels-Ober
parent
c14f186c53
commit
c2b335b3a2
|
|
@ -1,3 +0,0 @@
|
|||
[submodule "public/javascripts/geojson"]
|
||||
path = public/javascripts/geojson
|
||||
url = https://github.com/JasonSanford/GeoJSON-to-Google-Maps.git
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>AdoptAHydrant</title>
|
||||
<title>Adopt a Hydrant</title>
|
||||
<%= stylesheet_link_tag "main" %>
|
||||
<%= 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" %>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
|
|
@ -1 +0,0 @@
|
|||
Subproject commit d04e43652e8e8eeaddf106667c0da79659d620d7
|
||||
|
|
@ -1,75 +1,12 @@
|
|||
$(function() {
|
||||
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 myOptions = {
|
||||
zoom: 14,
|
||||
zoom: 15,
|
||||
center: latlng,
|
||||
mapTypeId: google.maps.MapTypeId.ROADMAP
|
||||
};
|
||||
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();
|
||||
})
|
||||
|
|
|
|||
|
|
@ -1,24 +1,45 @@
|
|||
html { height: 100% }
|
||||
body { height: 100%; margin: 0px; padding: 0px }
|
||||
#map_canvas { height: 100% }
|
||||
#left{
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
float:left;
|
||||
html {
|
||||
height: 100%;
|
||||
}
|
||||
#right{
|
||||
width: 200px;
|
||||
height: 500px;
|
||||
float:left;
|
||||
padding: 10px;
|
||||
|
||||
body {
|
||||
font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, FreeSerif, serif;
|
||||
height: 100%;
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
}
|
||||
#right div{
|
||||
margin-bottom: 8px;
|
||||
|
||||
#map_canvas {
|
||||
float: left;
|
||||
height: 100%;
|
||||
width: 75%;
|
||||
}
|
||||
#right textarea{
|
||||
height: 150px;
|
||||
width: 300px;
|
||||
|
||||
#sidebar {
|
||||
float: left;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
width: 25%;
|
||||
overflow: hidden;
|
||||
}
|
||||
#map{
|
||||
height:100%;
|
||||
|
||||
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%;
|
||||
}
|
||||
Loading…
Reference in New Issue