adding geojson google maps library
This commit is contained in:
parent
6d04f19366
commit
666047a9bf
|
@ -2,3 +2,5 @@
|
|||
db/*.sqlite3
|
||||
log/*.log
|
||||
tmp/
|
||||
.DS_Store
|
||||
.rvmrc
|
|
@ -0,0 +1,3 @@
|
|||
[submodule "public/javascripts/geojson"]
|
||||
path = public/javascripts/geojson
|
||||
url = https://github.com/JasonSanford/GeoJSON-to-Google-Maps.git
|
|
@ -3,12 +3,14 @@
|
|||
<head>
|
||||
<title>AdoptAHydrant</title>
|
||||
<%= 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 "maps" %>
|
||||
<%= javascript_include_tag "geojson/GeoJSON" %>
|
||||
<%= csrf_meta_tag %>
|
||||
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
|
||||
</head>
|
||||
<body onload="initialize()">
|
||||
<body>
|
||||
<%= yield -%>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
@ -0,0 +1 @@
|
|||
Subproject commit d04e43652e8e8eeaddf106667c0da79659d620d7
|
|
@ -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 myOptions = {
|
||||
zoom: 14,
|
||||
center: latlng,
|
||||
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();
|
||||
})
|
||||
|
|
|
@ -1,3 +1,24 @@
|
|||
html { height: 100% }
|
||||
body { height: 100%; margin: 0px; padding: 0px }
|
||||
#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%;
|
||||
}
|
Loading…
Reference in New Issue