Source Code for JavaScript Mapping Tools: mapControls.js


// Copyright 2006-2008 (c) Paul Demers  <paul@acscdg.com>

// This program is free software; you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation; either version 2 of the License, or
// (at your option) any later version.

// This program is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
// GNU General Public License for more details.

// You should have received a copy of the GNU General Public License along
// with this program; if not, write to the Free Software Foundation, Inc.,
// 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA., or visit one 
// of the links here:
//  http://www.gnu.org/licenses/old-licenses/gpl-2.0.txt
//  http://www.acscdg.com/LICENSE.txt

//////////////////////////////////////////////////////////////////

// JavaScript methods to create controls on Google maps for
//  map drawing and distance tools.

// Web site with this code running: http://www.acscdg.com/

// Depedency on other modules: 
//  Google maps.

var myControlPosition =
  function() { return new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(7, 70)); }

function WayPointsInProgressControl() { }
WayPointsInProgressControl.prototype = new GControl();


//
//// Control when in drawing mode. 
WayPointsInProgressControl.prototype.initialize = function(map) {
  var container = document.createElement("div");

  var endFirstDiv = document.createElement("div");
  this.setButtonStyle_(endFirstDiv);
  container.appendChild(endFirstDiv);
  endFirstDiv.appendChild(document.createTextNode("End at first point"));
  GEvent.addDomListener(endFirstDiv, "click", function() { endCourseAtFirst(map); } );

  var endLastDiv = document.createElement("div");
  this.setButtonStyle_(endLastDiv);
  container.appendChild(endLastDiv);
  endLastDiv.appendChild(document.createTextNode("End at last point"));
  GEvent.addDomListener(endLastDiv, "click", function() { endCourseAtLast(map); });

  var removeLastCoursePointDiv = document.createElement("div");
  this.setButtonStyle_(removeLastCoursePointDiv);
  container.appendChild(removeLastCoursePointDiv);
  removeLastCoursePointDiv.appendChild(document.createTextNode("Remove last point"));
  GEvent.addDomListener(removeLastCoursePointDiv, "click", function() { removeLastCoursePoint(map); });

  map.getContainer().appendChild(container);
  return container;
}

WayPointsInProgressControl.prototype.getDefaultPosition = myControlPosition;


//
//// Sets the proper CSS for the given button element.
//// TODO: set a class for the element, put the CSS in a file. 
WayPointsInProgressControl.prototype.setButtonStyle_ = function(button) {
  //button.style.textDecoration = "underline";
  //button.style.color = "#0000cc";
  button.style.backgroundColor = "white";
  button.style.font = "small Arial";  // TODO: Font is wrong on the buttons on IE.
  button.style.border = "1px solid black";
  button.style.padding = "2px";
  button.style.marginBottom = "3px";
  button.style.textAlign = "center";
  button.style.width = "6em";
  button.style.cursor = "pointer";
}


//
//// Control when not in drawing mode. Inherits from drawing mode control.
function StartControl() { }
StartControl.prototype = new WayPointsInProgressControl();

StartControl.prototype.initialize = function(map) {
  var container = document.createElement("div");

  var clearAllDiv = document.createElement("div");
  this.setButtonStyle_(clearAllDiv);
  container.appendChild(clearAllDiv);
  clearAllDiv.appendChild(document.createTextNode("Clear All"));
  GEvent.addDomListener(clearAllDiv, "click", function() { clearAll(map); } )

  var startCourseDiv = document.createElement("div");
  this.setButtonStyle_(startCourseDiv);
  container.appendChild(startCourseDiv);
  startCourseDiv.appendChild(document.createTextNode("Start a Course"));
  GEvent.addDomListener(startCourseDiv, "click", function() { startCourse(map); } );

  var startCircleDiv = document.createElement("div");
  this.setButtonStyle_(startCircleDiv);
  container.appendChild(startCircleDiv);
  startCircleDiv.appendChild(document.createTextNode("Start a Circle"));
  GEvent.addDomListener(startCircleDiv, "click", function() { enterCircleMode(map); } );

  map.getContainer().appendChild(container);
  return container;
}


//
//// Control when in circle drawing mode.
function CircleInProgressControl() { }
CircleInProgressControl.prototype = new WayPointsInProgressControl();

CircleInProgressControl.prototype.initialize = function(map) {
  var container = document.createElement("div");

  var clearAllDiv = document.createElement("div");
  this.setButtonStyle_(clearAllDiv);
  container.appendChild(clearAllDiv);
  clearAllDiv.appendChild(document.createTextNode("Clear"));
  GEvent.addDomListener(clearAllDiv, "click", function() { clearAll(map); } )

  var eraseLastDiv = document.createElement("div");
  this.setButtonStyle_(eraseLastDiv);
  container.appendChild(eraseLastDiv);
  eraseLastDiv.appendChild(document.createTextNode("Erase last"));
  GEvent.addDomListener(eraseLastDiv, "click", function() { eraseLastCircle(map);} );

  var leaveCircleModeDiv = document.createElement("div");
  this.setButtonStyle_(leaveCircleModeDiv);
  container.appendChild(leaveCircleModeDiv);
  leaveCircleModeDiv.appendChild(document.createTextNode("Leave circle mode"));
  GEvent.addDomListener(leaveCircleModeDiv, "click", function() { leaveCircleMode(map);} );

  map.getContainer().appendChild(container);
  return container;
}