Viewing file:     makeMap.js (21.33 KB)      -rwxr-xr-x
Select action/file-type:
(+) | (+) | (+) | Code (+) | Session (+) | (+) | SDB (+) | (+) | (+) | (+) | (+) | (+) |

---

//var COLORS = [["red", "#ff0000"], ["orange", "#ff8800"], ["green","#008000"], ["blue", "#000080"], ["purple", "#800080"]];
var options = {};
var lineCounter_ = 0;
var shapeCounter_ = 0;
var markerCounter_ = 0;
var colorIndex_ = 0;
var map;
//typeofline: shape = 2, line = 1, marker = 0;

function extend(Child, Parent)
{
    var F = function () { };
    F.prototype = Parent.prototype;
    var f = new F();
    
    for (var prop in Child.prototype) f[prop] = Child.prototype[prop];
    Child.prototype = f;
    Child.prototype['super'] = Parent.prototype;
}

//Class - Clone of GPolygon

function Shape(points, strokeColor, strokeWeight, strokeOpacity, fillColor, fillOpacity)
{
	GPolygon.call(this, points, strokeColor, strokeWeight, strokeOpacity, fillColor, fillOpacity);
	this.id = 0;
	this.infocont = "";
	this.type = 2;
	this.setID = function(id)
	{
		this.id = id;
	}
	this.setInfo = function(info)
	{
		this.infocont = info;
	}
	this.showInfo = function()
	{
		
	}
}

Shape.prototype = 
{
	constructor: Shape
}

//End of clone class GPolygon

//Class - Clone of GPolyline

function Line(points, color, weight, opacity)
{
	GPolyline.call(this, points, color, weight, opacity);
	this.id = 0;
	this.infocont = "";
	this.type = 1;
	this.setID = function(id)
	{
		this.id = id;
	}
	this.setInfo = function(info)
	{
		this.infocont = info;
	}
}

Line.prototype = 
{
	constructor: Line
}


//End of clone class GPolyline

//Class - Clone of GMarker

function Marker(point, icon, inert)
{
	GMarker.call(this, point, icon, inert);
	this.id = 0;
	this.infocont = "";
	this.type = 0;
	this.color = "red";
	this.setID = function(id)
	{
		this.id = id;
	}
	this.setInfo = function(info)
	{
		this.infocont = info;
	}
}

function Marker(latlng, opts)
{
	GMarker.call(this, latlng, opts);
	var id = 0;
	var infocont = "";
	this.type = 0;
	this.color = "red";
	this.setID = function(id)
	{
		this.id = id;
	}
	this.setInfo = function(info)
	{
		this.infocont = info;
	}
}

Marker.prototype = 
{
	constructor: Marker
}


//End of clone class GMarker

extend(Shape, GPolygon);
extend(Line, GPolyline);
extend(Marker, GMarker);

//Gmaps local functions

function select(buttonId) 
{
	jQuery("#hand_b").attr('class', "unselected");
	jQuery("#shape_b").attr('class', "unselected");
	jQuery("#line_b").attr('class', "unselected");
	jQuery("#placemark_b").attr('class', "unselected");
	jQuery("#"+buttonId+"").attr('class', "unselected");
}

/*
function getColor(named) 
{
	return COLORS[(colorIndex_++) % COLORS.length][named ? 0 : 1];
}


function getIcon(color) 
{
	var icon = new GIcon();
	icon.image = "http://google.com/mapfiles/ms/micons/" + color + ".png";
	icon.iconSize = new GSize(32, 32);
	icon.iconAnchor = new GPoint(15, 32);
	return icon;
}
*/

function clearWidth()
{
	jQuery("#popup").removeClass("widthinfo");
    jQuery("#popup").removeClass("widthreg");
}

function showModeratePanel() 
{
	jQuery("#addZone_panel").css("visibility", "hidden");
	jQuery("#login_b").css("visibility", "hidden");
	jQuery("#moder_panel").css("visibility", "visible");
	jQuery("#moder_panel").css("margin", "-75px 0 0 1px");
	jQuery("#menu").css("height", "150" );
}


function clone(src)
{
	var color = src.color;
	var pts = new Array();
	var att = src.infocont;
	var type = src.type;
	if(type == 2 || type == 1)
	{
		var cnt = src.getVertexCount();
		for (var i = 0; i < cnt; i++)
		{
			pts[i] = new GLatLng(parseFloat(src.getVertex(i).lat()),
		   parseFloat(src.getVertex(i).lng()));
		}
	}
	else
		pts[0] = src.getLatLng();
	if(type == 2)
		var newpoly = new Shape(pts, color, 1, 0.7, color, 0.2);
	else if(type == 1)
		var newpoly = new Line(pts, color, 1, 0.7);
	else
		var newpoly = new Marker(pts[0], {icon: G_DEFAULT_ICON, draggable: true});
	GEvent.addListener(newpoly, "click", GEvent.callbackArgs(newpoly, showInfo));
	newpoly.setID(src.id);
	newpoly.setInfo(src.infocont);
	return newpoly;
}

function xmlGetId(funclat)
{
	var funcid = false;
	funclat = funclat.toString();

	var request = GXmlHttp.create();
	request.open("GET", "viv-xml.php", false);
	request.onreadystatechange = function() 
	{
		if(request.readyState == 4 && request.status === 200) 
		{
			var xmlDoc = GXml.parse(request.responseText);
			var lines = xmlDoc.documentElement.getElementsByTagName("object");
			for(var j = lines.length - 1; j >= 0; j--) 
			{
				var points = lines[j].getElementsByTagName("point");
				var attributes = lines[j].getAttribute("html");
				var pts = [];
				for(var i = points.length - 1; i >= 0; i--) 
				{
					pts[i] = new GLatLng(parseFloat(points[i].getAttribute("lat")), 
					parseFloat(points[i].getAttribute("lng")));
					if(funclat == pts[i].toString())
					{
						funcid = attributes;
						break;
					}
				}
				if(funcid != false)
				{
					break;
				}
			}
		}
	}
	request.send();
  	return funcid;
}

function updateGeom(poly)
{
	var polycoords = "";
	var color = poly.color;
	var type = poly.type;
	if(type == 2 || type == 1)
	{
		var cnt = poly.getVertexCount();
		for (var i = 0; i < cnt; i++)
			polycoords += poly.getVertex(i).lat() + ',' + poly.getVertex(i).lng() + ';';
	}
	else
	{
		polycoords += poly.getLatLng();
		polycoords = polycoords.substr(1);
		var spaceRe = /\s+/g;
		polycoords = polycoords.replace(spaceRe, "");
	}
	jQuery.post("update.php",
	{
		points: polycoords.toString(),
		idpoly: poly.id,
		info: poly.infocont.toString()
	});	
}

function confirmGeom(poly)
{
	select("hand_b");
	var polycoords = "";
	var color = poly.color;
	var type = poly.type;
	if(type == 2 || type == 1)
	{
		var cnt = poly.getVertexCount();
		for (var i = 0; i < cnt; i++)
			polycoords += poly.getVertex(i).lat() + ',' + poly.getVertex(i).lng() + ';';
	}
	else
	{
		polycoords += poly.getLatLng();
		polycoords = polycoords.substr(1);
		var spaceRe = /\s+/g;
		polycoords = polycoords.replace(spaceRe, "");
	}
	//alert(polycoords.toString());
	if(polycoords.length > 0 || polycoords != "")
	{
		jQuery.post(
		"upload.php",
		{
			points: polycoords.toString(),
			color: color,
			type: type
		});
		if(type != 0)
			var latlng = poly.getVertex(0);
		else
			var latlng = poly.getLatLng();
		poly.setID(xmlGetId(latlng));
	}
}

function cancelGeom(poly)
{
	if(poly.type != 0)
		poly.disableEditing();
	map.removeOverlay(poly);
	showModeratePanel();
	jQuery("#delete_b").css("display", "none");
}

function deleteGeom(poly)
{
	map.removeOverlay(poly);
	if(poly.id != false)
	{
		jQuery.post(
		"delete.php",
		{
			id: poly.id
		});	
	}
	showModeratePanel();
}

function showConfirm()
{
	jQuery("#moder_panel").css("visibility", "hidden");
	jQuery("#addZone_panel").css("visibility", "visible");
	jQuery("#addZone_panel").css("margin", "-142px 0 0 1px");
	jQuery("#menu").css("height", "80" );
}

function changeInfo()
{
	var area = document.getElementById("infoarea");
	if(area.value == "Изменить содержимое")
		area.innerHTML="";
}

function saveInfo(poly)
{
	var area = document.getElementById("infoarea").value;
	if(area == "")
		document.getElementById("infoarea").innerHTML="Изменить содержимое";
	poly.setInfo(area); 
	updateGeom(poly);  
}

function showMailConfirm(yesno)
{
	var html = "<div id=\"opaco\" class=\"hidden\"></div>";
	html += "<div id=\"popup\" class=\"hidden\"></div>";
	html += "<div id=\"mailinfo\" class=\"hidden\">";
	html += "<div class=\"bug\" id=\"infocontent\"></div>";
	html += "</div>";
	var div = document.createElement('div');
	div.innerHTML = html;
	document.getElementById("map").appendChild(div);
	jQuery('#mailinfo').togglePopup();
	if(yesno == 1)
		jQuery("#mailinfo").html("Ваш e-mail адрес подтвержден успешно.");
	else
		jQuery("#mailinfo").html("Ошибка подтверждения!");
}

function showLogin()
{
    clearWidth();
	var html = "<div id=\"opaco\" class=\"hidden\"></div>";
		html += "<div id=\"popup\" class=\"hidden\"></div>";
		html += "<div id=\"popup_bug\" class=\"hidden\">";
		html += "<div class=\"bug\">";
		html += "<h1>Войти</h1>";
		html += "<hr></hr>";
		html += "<form id=\"logform\" onsubmit=\"login(); return false\" action=''>";
		html += "<p>";
		html += "<label class=\"label_text\" for=\"username\"> Ваш email или логин </label>";
		html += "<input id=\"username\" type=\"text\" placeholder=\"логин или mymail@mail.ru\" name=\"name\">";
		html += "</p>";
		html += "<p>";
		html += "<label class=\"label_text\" for=\"password\"> Ваш пароль </label>";
		html += "<input id=\"password\" type=\"password\" placeholder=\"например X8df!90EO\" name=\"password\">";
		html += "</p>";
		html += "<p class=\"keeplogin\">";
		html += "<input id=\"loginkeeping\" type=\"checkbox\" value=\"loginkeeping\" name=\"loginkeeping\">";
		html += "<label for=\"loginkeeping\">Запомнить меня</label>";
        html += "<div id=\"reg_button\" style=\"cursor: pointer;\" onclick=\"showRegister();\">Зарегаться</div>";
		html += "</p>";
		html += "<p class=\"login button\">";
		html += "<input type=\"submit\" value=\"Войти\" onclick=\"login()\">";
		html += "</p>";
		html += "</form>";
		html += "<div id=\"report\"></div>";
        html += "</div>";
		html += "</div>";
		var div = document.createElement('div');
		div.innerHTML = html;
		document.getElementById("map").appendChild(div);
		jQuery('#popup_bug').togglePopup();
}

function showRegister()
{
    clearWidth();
	var html = "<div id=\"opaco\" class=\"hidden\"></div>";
		html += "<div id=\"popup\" class=\"hidden\"></div>";
		html += "<div id=\"add_user\" class=\"hidden\">";
		html += "<div class=\"bug\">";
    	html += "<h1>Регистрация</h1>";
		html += "<hr></hr>";
        html += "<form id=\"addform\" onsubmit=\"add(); return false\" action=\"\">";
        html += "<div style=\"float: left;\"><p>";
		html += "<label class=\"label_text\" for=\"login\"> Логин </label>";
        html += "<input id=\"login\" type=\"text\" name=\"login\" maxlength=\"15\" placeholder=\"например: mishka_gammi\" />";
        html += "</p><p>";
	    html += "<label class=\"label_text\" for=\"name\">Имя</label>";
	    html += "<input id=\"name\" type=\"text\" name=\"name\" maxlength=\"15\" placeholder=\"например: Петр\" />";
        html += "</p><p>";
	    html += "<label class=\"label_text\" for=\"fname\">Фамилия</label>";
		html += "<input id=\"fname\" type=\"text\" name=\"fname\" maxlength=\"20\" placeholder=\"например: Иванов\" />";
        html += "</p></div><div style=\"float:right;\"><p>";
	    html += "<label class=\"label_text\" for=\"email\">E-mail</label>";
		html += "<input id=\"email\" type=\"text\" name=\"email\" placeholder=\"например: mymail@mail.ru\" />";
        html += "</p><p>";
        html += "<label class=\"label_text\" for=\"pass\">Пароль</label>";
		html += "<input id=\"pass\"  type=\"password\" name=\"pass\" placeholder=\"например X8df!90EO\" />";
        html += "</p><p>";
        html += "<label class=\"label_text\" for=\"repass\">Повторить</label>";
		html += "<input id=\"repass\" type=\"password\" name=\"repass\" placeholder=\"например X8df!90EO\" /></p></div>";
		html += "<p>";
        html += "<label class=\"label_text\" for=\"capcha\">Код безопасности</label></br>";
        html += "<input style=\"width: 270px;\" id=\"capcha\" type=\"text\" name=\"keystring\" maxlength=\"10\"/>";
        html += "<img class=\"captcha_img\" src=\"secpic.php\" alt=\"защитный код\" /></p>";
   		html += "<p class=\"login button\">";
        html += "<input type=\"submit\" style=\"width: 185px\" onclick=\"add()\" value=\"Зарегистрироваться\" /></p>";
		html += "</form>";
		html += "<div id=\"report\"></div>";
		html += "</div>";
		html += "</div>";
		var div = document.createElement('div');
		div.innerHTML = html;
		document.getElementById("map").appendChild(div);
        jQuery("#popup").addClass("widthreg");
        jQuery("#popup_bug").togglePopup();
		jQuery("#add_user").togglePopup();
}


function showInfo(polygon)
{
    clearWidth();
	var property = jQuery("#addZone_panel").css("visibility");
	if(property == "hidden")
	{
		var poly = (arguments.length < 1) ? this : arguments[0];
		var html = "<div id=\"opaco\" class=\"hidden\"></div>";
			html += "<div id=\"popup\" class=\"hidden\"></div>";
			html += "<div id=\"infowindow\" class=\"hidden\">";
			html += "<div class=\"bug\" id=\"infocontent\"></div>";
			html += "</div>";
		var div = document.createElement('div');
		div.innerHTML = html;
		document.getElementById("map").appendChild(div);
		jQuery("#opaco").addClass("info");
		jQuery("#popup").addClass("widthinfo");
		jQuery('#infowindow').togglePopup();

		var info = "<div id=\"contentinfo\">"+poly.infocont+"</div>";
		var panel = "<div id=\"bottom_panel\">";
			panel += "<hr class=\"hr_info\"></hr>";
			panel += "<div class=\"info_href\" id=\"editinfo\" onmouseout=\"tooltip.hide();\" onmouseover=\"tooltip.show('Изменить информацию об объекте');\">[Изменить]</div>";
			panel += "<div id=\"save_info\" class=\"info_href\">[Сохранить]</div>";
			panel += "<div class=\"info_href\" id=\"makeedit\">[Редактировать объект]</div>"
			panel += "</div>";
		var areacont = (poly.infocont == "")? "Изменить содержимое" : poly.infocont;
		var editinfo = "<textarea id=\"infoarea\" onclick=\"changeInfo()\">"+areacont+"</textarea>";
		document.getElementById("infocontent").innerHTML = info+editinfo+panel;

		if(poly.infocont != "")
		{
			jQuery("#infoarea").css("visibility", "hidden");
			jQuery("#infoarea").css("display", "none");
			jQuery("#contentinfo").css("visibility", "visible");	
			jQuery("#save_info").css("visibility", "hidden");
			jQuery("#save_info").css("display", "none");
		}
		else
		{
			jQuery("#contentinfo").css("visibility", "hidden");
			jQuery("#contentinfo").css("display", "none");
			jQuery("#infoarea").css("visibility", "visible");
			jQuery("#editinfo").css("visibility", "hidden");	
			jQuery("#editinfo").css("display", "none");
		}
		
		GEvent.addDomListener($("#makeedit")[0], "click", function()
		{
			jQuery('#infowindow').togglePopup();
			editGeom(poly);
		});
		GEvent.addDomListener($("#editinfo")[0], "click", function()
		{
			tooltip.hide();
			jQuery("#contentinfo").css("visibility", "hidden");
			jQuery("#contentinfo").css("display", "none");
			jQuery("#infoarea").css("visibility", "visible");
			jQuery("#infoarea").css("display", "block");
			jQuery("#editinfo").css("visibility", "hidden");	
			jQuery("#editinfo").css("display", "none");
			jQuery("#save_info").css("visibility", "visible");
			jQuery("#save_info").css("display", "block");
		});
		GEvent.addDomListener($("#save_info")[0], "click", function()
		{
			saveInfo(poly);
			jQuery("#contentinfo").css("visibility", "visible");
			jQuery("#contentinfo").css("display", "block");
			jQuery("#infoarea").css("visibility", "hidden");
			jQuery("#infoarea").css("display", "none");
			jQuery("#editinfo").css("visibility", "visible");
			jQuery("#editinfo").css("display", "block");	
			jQuery("#save_info").css("visibility", "hidden");
			jQuery("#save_info").css("display", "none");
			document.getElementById("contentinfo").innerHTML = poly.infocont;
		});	
	}
}

function startShape() 
{
	select("shape_b");
	var fcolor = "#ff8800";
	var poly = new Shape([], fcolor, 1, 0.7, fcolor, 0.2);
	map.addOverlay(poly);
	poly.enableDrawing(options);
	poly.enableEditing({onEvent: "mouseover"});
	poly.disableEditing({onEvent: "mouseout"});
	showConfirm();
	GEvent.addDomListener($("#cancel_b")[0], 'click', function()
	{
		cancelGeom(poly);
	});
	GEvent.addListener(poly, "endline", function() 
	{ 
		jQuery("#save_b").bind('click', function() 
		{
			confirmGeom(poly);
			showModeratePanel();
			showInfo(poly);
			GEvent.addListener(poly, "click", GEvent.callbackArgs(poly, showInfo));
			GEvent.bind(poly, "lineupdated", "xyu puzda", function()
			{
				updateGeom(poly);
			});

		});
		GEvent.addListener(poly, "click", function(latlng, index) 
		{ 
			if (typeof index == "number")
				poly.deleteVertex(index);
			if(poly.getVertexCount() == 0)
				deleteGeom(poly);
		}); 
	});
	jQuery("#save_b").unbind('click');
}

function startLine() 
{
	select("line_b");
	var fcolor = "#ff8800";
	var poly = new Line([], fcolor, 1, 0.7);
	map.addOverlay(poly);
	poly.enableDrawing(options);
	poly.enableEditing({onEvent: "mouseover"});
	poly.disableEditing({onEvent: "mouseout"});
	showConfirm();
	GEvent.addDomListener($("#cancel_b")[0], 'click', function()
	{
		cancelGeom(poly);
	});
	GEvent.addListener(poly, "endline", function() 
	{  
		jQuery("#save_b").bind('click', function() 
		{
			confirmGeom(poly);
			showModeratePanel();
			showInfo(poly);
			GEvent.addListener(poly, "click", GEvent.callbackArgs(poly, showInfo));
			GEvent.bind(poly, "lineupdated", "xyu puzda", function()
			{
				updateGeom(poly);
			});

		});
		GEvent.addListener(poly, "click", function(latlng, index) 
		{ 
			if (typeof index == "number")
				poly.deleteVertex(index);
			if(poly.getVertexCount() == 0)
				deleteGeom(poly);
		}); 
	});
	jQuery("#save_b").unbind('click');
}

function placeMarker() 
{
	select("placemark_b");
	var listener = GEvent.addListener(map, "click", function(overlay, latlng) 
	{
		if (latlng) 
		{
			select("hand_b");
			GEvent.removeListener(listener);
			var marker = new Marker(latlng, {icon: G_DEFAULT_ICON, draggable: true});
			map.addOverlay(marker);
			showConfirm();
			jQuery("#cancel_b").bind('click', function() 
			{
				cancelGeom(marker);
			});
			jQuery("#save_b").bind('click', function() 
			{
				confirmGeom(marker);
				showModeratePanel();
				showInfo(marker);
				GEvent.addListener(marker, "click", GEvent.callbackArgs(marker, showInfo));
				GEvent.addListener(marker, "dragend", function() 
				{
					updateGeom(marker);
				});
			});
		}
	});
	jQuery("#cancel_b").unbind('click');
	jQuery("#save_b").unbind('click');
}

function editGeom(poly) 
{
	var type = poly.type;
	var temppoly = clone(poly);	
	jQuery("#delete_b").css("display", "block");
	showConfirm();
	jQuery("#menu").css("height", "110" );
	GEvent.addDomListener($("#cancel_b")[0], 'click', function() 
	{
		cancelGeom(poly);
		map.addOverlay(temppoly);
		
	});
	GEvent.addDomListener($("#delete_b")[0], 'click', function() 
	{
		deleteGeom(poly);
		return false;
		
	});

	if(type == 2 || type == 1)
	{
		poly.enableEditing();
		GEvent.bind(poly, "lineupdated", "hyu hyu", function()
		{
			jQuery("#save_b").bind('click',function() 
			{
				updateGeom(poly);
				temppoly = clone(poly);
				poly.disableEditing();
				showModeratePanel();
				
			});
		});

		GEvent.addListener(poly, "click", function(latlng, index) 
		{ 
			if (typeof index == "number")
				poly.deleteVertex(index);
			if(poly.getVertexCount() == 0)
				deleteGeom(poly);		
		}); 

		poly.disableEditing({onEvent: "mouseout"});
		poly.enableEditing({onEvent: "mouseover"});
	}
	else
	{
		GEvent.addListener(poly, "dragend", function() 
		{
			jQuery("#save_b").bind('click', function() 
			{
				updateGeom(poly);
				temppoly = clone(poly);
				showModeratePanel();
			});
		});
	}
	GEvent.addListener(map, "drag", function(){
		map.closeInfoWindow();
	});
	jQuery("#save_b").unbind('click');
}

function initialize() 
{
	if (GBrowserIsCompatible()) 
	{
		map = new GMap2(document.getElementById("map"));
		map.setCenter(new GLatLng(55.781400022214804, 38.462791442871094), 12);
		map.addControl(new GSmallMapControl());
		map.addControl(new GMapTypeControl());
		map.enableScrollWheelZoom();
		map.clearOverlays();
		select("hand_b");

		var request = GXmlHttp.create();
		request.open("GET", "viv-xml.php", true);
		request.onreadystatechange = function() 
		{
			if (request.readyState == 4 && request.status === 200) 
			{
				var xmlDoc = GXml.parse(request.responseText);
				var lines = xmlDoc.documentElement.getElementsByTagName("object");
				for (var j = 0; j < lines.length; j++) 
				{
					var type = lines[j].getAttribute("type");
					var color = lines[j].getAttribute("color");
					var width  = parseFloat(lines[j].getAttribute("width"));
					var points = lines[j].getElementsByTagName("point");
					var attributes = lines[j].getAttribute("info");
					var id = lines[j].getAttribute("html");
					var pts = [];
					for (var i = 0; i < points.length; i++) 
					{
					   pts[i] = new GLatLng(parseFloat(points[i].getAttribute("lat")),
					   parseFloat(points[i].getAttribute("lng")));
					}
					if(type == 2)
					{
						var polyDB = new Shape(pts, color, width, 0.7, color, 0.2);
					}
					else if(type == 1)
					{
						var polyDB = new Line(pts, color, width, 0.7);
					}
					else
					{
						var polyDB = new Marker(pts[0], {draggable: true, bouncy: true});	
					}
					polyDB.setID(id);
					polyDB.setInfo(attributes.toString());
					GEvent.addListener(polyDB, "click", GEvent.callbackArgs(polyDB, showInfo));
					map.addOverlay(polyDB);
				}
			}
		}
		request.send(null);
	}
}