// define a global variable for the map (so any function can access it)
var map;
function init() {
// don't even try to work if this is crazy old browser
if (!GBrowserIsCompatible()) {
return;
}
// create the map
map = new GMap2(document.getElementById("map"));
// set where the map starts
var centerLatitude = 40.7335;
var centerLongitude = -73.9955;
var startZoom = 17;
map.setCenter(new GLatLng(centerLatitude, centerLongitude), startZoom);
// initialize features on the map
map.setMapType(G_NORMAL_MAP);
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.enableScrollWheelZoom();
getMarkers();
// add a click listener
function onClickCallback(marker, latlng) {
if (marker) {
// do nothing - this is necessary because sometimes gmaps fires extra events
} else {
// create the input form
map.openInfoWindowHtml(latlng,
""
);
}
}
GEvent.addListener(map, "click", onClickCallback);
}
function makeCustomMarker(point) {
var icon = new GIcon();
// set defaults used for most cases
icon.iconSize = new GSize(10, 10);
icon.iconAnchor = new GPoint(5, 5);
icon.infoWindowAnchor = new GPoint(5, 5);
switch( point.family ) {
case 'TILIACEAE':
icon.image = "icons/090407.tiliaceae.png";
break;
case 'ROSACEAE':
icon.image = "icons/090407.rosaceae.png";
break;
case 'FAGACEAE':
icon.image = "icons/090407.Fagaceae.png";
break;
case 'CONIFERAE':
icon.image = "icons/090407.conifer.png";
break;
case 'OLEACEAE':
icon.image = "icons/090407.oleacea.png";
break;
case 'SAPINDACEAE':
icon.image = "icons/090407.Sapindaceae.png";
break;
case 'FABACEAE':
icon.image = "icons/090407.Fabaceae.png";
break;
case 'GINKGOPHYTA':
icon.image = "icons/090407.ginkgophyta.png";
break;
case 'ULMACEAE':
icon.image = "icons/090407.ulmaceae.png";
break;
case 'PLATANACEAE':
icon.image = "icons/090407.platancea.png";
break;
case 'OTHER':
icon.image = "icons/090407.OTHER.png";
break;
default:
icon.image = "icons/090407.other.png";
break;
}
var marker = new GMarker(new GLatLng(point.lat, point.lng), {icon : icon, title : "Street Tree"});
map.addOverlay(marker);
//info window
function showInfo() {
var static = "";
if (point.id) {
static += "Unique ID: " + point.id + " ";
}
if (point.com_name_1) {
static += "Species: " + point.com_name_1 + " ";
}
if (point.DBH) {
static += "DBH: " + point.DBH + " ";
}
if (point.image1) {
static += '';
static = '
' + static + '
';
}
var dynamic = (
"
" +
"
" +
"" +
""
);
// select a data range
var statistics = (
"Please choose a time period for viewing watering history: " +
" " +
(
""
) +
" " +
"Total Water: " +
""
);
var infoTabs = [
new GInfoWindowTab("Tree Info", static),
new GInfoWindowTab("Maintenance", dynamic),
new GInfoWindowTab("Statistics", statistics)
];
marker.openInfoWindowTabsHtml(infoTabs);
}
GEvent.addListener(marker, 'click', showInfo);
}
function htmlEscape(str) {
return str.replace('"', '"');
return str.replace("'", "'");
}
function getMarkers(){
//get the json
var request = GXmlHttp.create();
request.open('GET', 'retrievePoints.php5' , true);
request.onreadystatechange = function () {
if (request.readyState == 4) {
response = eval('(' + request.responseText + ')');
//get rid of old markers
map.clearOverlays();
makePointArrayFromJson(response);
}
}
request.send(null);
}
function makePointArrayFromJson(pointArray) {
// this is a for-loop: for (start condition; end condition; step function) { looped stuff }
for (var index = 0; index < pointArray.length; index++ ) {
// this takes the object in the index position of the response array and assigns it to be point
var point = pointArray[index];
makeCustomMarker(point);
}
}
function getRadioValue(name) {
var myRadioArray = document.getElementsByName(name);
for (var i=0; i < myRadioArray.length; i++) {
if (myRadioArray[i].checked) {
return myRadioArray[i].value;
}
}
}
function storeMaintenance() {
var id = document.getElementById('id').value;
var lat = document.getElementById('lat').value;
var lng = document.getElementById('lng').value;
var steward_code = document.getElementById('steward_code').value;
var year = (getSelectedValue('year'));
var month = (getSelectedValue('month'));
var day = (getSelectedValue('day'));
//var time = (getSelectedValue('time'));
var water = document.getElementById('water').value;
var soil = (getRadioValue('soil'));
var fertilizer = (getRadioValue('fertilizer'));
var planting = (getRadioValue('planting'));
var pitguard = (getRadioValue('pitguard'));
var comments = document.getElementById('comments').value;
// URL parameters to storeMarker.php must be in the form "?name=foo¶m=value"
//concatenates all the parameters into something that the server can read
var serverParams = "?"
+ "&id=" + id
+ "&lat=" + lat
+ "&lng=" + lng
+ "&steward_code=" + steward_code
+ "&dateof=" + year + '-' + month + '-' + day
+ "&add_water=" + water
+ "&cultivate_soil=" + soil
+ "&add_fertility=" + fertilizer
+ "&add_underplanting=" + planting
+ "&add_pitguard=" + pitguard
+ "&comments=" + comments;
// request to storeMarker.php on your server
var request = GXmlHttp.create();
request.open('GET', 'storeMaintenance.php5' + serverParams, true);
request.onreadystatechange = function () {
if (request.readyState == 4) {
alert (request.responseText);
}
}
// this is sending the form inputs to the server
request.send(null);
// draw the new marker on the map (this assumes that storeMarker.php will always succeed)
// we are not adding this point to the map, just adding it to the database as "pending"
// addPoint(p);
map.closeInfoWindow();
}
function getSelectedValue(id)
{
var myOptionArray = document.getElementById(id);
var mySelectedIndex = myOptionArray.selectedIndex;
return myOptionArray.options[mySelectedIndex].value;
}
function storeNewPoint() {
var lat = document.getElementById('lat').value;
var lng = document.getElementById('lng').value;
var steward_code = document.getElementById('steward_code').value;
var species = (getSelectedValue('species'));
var DBH = document.getElementById('DBH').value;
var image = document.getElementById('image').value;
var serverParams = "?"
+ "&lat=" + lat
+ "&lng=" + lng
+ "&added_by=" + steward_code
+ "&species_code=" + species
+ "&DBH=" + DBH
+ "&image1=" + image;
// request to storeMarker.php on server
var request = GXmlHttp.create();
request.open('GET', 'storePendingPoints.php5' + serverParams, true);
request.onreadystatechange = function () {
if (request.readyState == 4) {
alert (request.responseText);
}
}
// this is sending the form inputs to the server
request.send(null);
// draw the new marker on the map (this assumes that storeMarker.php will always succeed)
// we are not adding this point to the map, just adding it to the database as "pending"
// addPoint(p);
map.closeInfoWindow();
}
function retrieveMaintenance() {
var id = document.getElementById('id').value;
var lat = document.getElementById('lat').value;
var lng = document.getElementById('lng').value;
var syear = (getSelectedValue('syear'));
var smonth = (getSelectedValue('smonth'));
var sday = (getSelectedValue('sday'));
var eyear = (getSelectedValue('eyear'));
var emonth = (getSelectedValue('emonth'));
var eday = (getSelectedValue('eday'));
var myDiv = document.getElementById('myDiv');
var serverParams = "?"
+ "&id=" + id
+ "&lat=" + lat
+ "&lng=" + lng
+ "&startdate=" + syear + '-' + smonth + '-' + sday
+ "&enddate=" + eyear + '-' + emonth + '-' + eday;
//request to retrieveMaintenance.php5
var request = GXmlHttp.create();
request.open('GET', 'retrieveMaintenance.php5' + serverParams, true);
request.onreadystatechange = function () {
if (request.readyState == 4) {
var response = eval('(' + request.responseText + ')');
myDiv.innerHTML = response.TotalWater + " gallons";
}
}
request.send(null);
}
window.onload = init;
window.onunload = GUnload;