choteaumt
/
adopt-a-hydrant
mirror of https://github.com/choteaumt/adopt-a-hydrant.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

adding geojson google maps library

This commit is contained in:
maxogden 2011-02-14 15:27:18 -05:00
parent 6d04f19366
commit 666047a9bf
6 changed files with 100 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.gitignore vendored
View File

@ -2,3 +2,5 @@
db/*.sqlite3 db/*.sqlite3
log/*.log log/*.log
tmp/ tmp/
.DS_Store
.rvmrc

3
.gitmodules vendored Normal file
View File

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

6
app/views/layouts/application.html.erb
View File

@ -3,12 +3,14 @@
<head> <head>
<title>AdoptAHydrant</title> <title>AdoptAHydrant</title>
<%= stylesheet_link_tag "main" %> <%= stylesheet_link_tag "main" %>
<%= javascript_include_tag "maps" %> <%= 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" %>
<%= javascript_include_tag "maps" %>
<%= javascript_include_tag "geojson/GeoJSON" %>
<%= csrf_meta_tag %> <%= csrf_meta_tag %>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
</head> </head>
<body onload="initialize()"> <body>
<%= yield -%> <%= yield -%>
</body> </body>
</html> </html>

1
public/javascripts/geojson Submodule

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

72
public/javascripts/maps.js
View File

@ -1,9 +1,75 @@
function initialize() { $(function() {
var map;
currentFeature_or_Features = null;
var roadStyle = {
strokeColor: "#FFFF00",
strokeWeight: 7,
strokeOpacity: 0.75
};
var addressStyle = {
icon: "javascripts/geojson/img/marker-house.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: 14,
center: latlng, center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP mapTypeId: google.maps.MapTypeId.ROADMAP
}; };
var 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();
})

21
public/stylesheets/main.css
View File

@ -1,3 +1,24 @@
html { height: 100% } html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px } body { height: 100%; margin: 0px; padding: 0px }
#map_canvas { height: 100% } #map_canvas { height: 100% }
#left{
width: 500px;
height: 500px;
float:left;
}
#right{
width: 200px;
height: 500px;
float:left;
padding: 10px;
}
#right div{
margin-bottom: 8px;
}
#right textarea{
height: 150px;
width: 300px;
}
#map{
height:100%;
}