File "drawing.js"

Full Path: /home/aiclgcwq/photonindustriespvt.com/wp-content/plugins/agile-store-locator/admin/js/drawing.js
File size: 13.83 KB
MIME-type: text/plain
Charset: utf-8

//var saved = {"zoom":9,"center":[40.13425922366932,-91.1920161015625],"shapes":[null,null,null,{"type":"polygon","color":"#1E90FF","coord":[[40.67855510939917,-91.72210693359375],[40.611867443030064,-91.56005859375],[40.52006312552015,-91.58477783203125],[40.52215098562377,-91.8072509765625],[40.632714496550626,-91.834716796875]]},{"type":"rectangle","color":"#1E90FF","ne":[40.80965166748856,-90.69488525390625],"sw":[40.703545803451426,-90.9283447265625]},{"type":"circle","color":"#1E90FF","center":[40.62437645591559,-91.3211059570312],"radius":7629.6704397923095}],"markers":[[40.93011520598304,-91.94183349609375],[40.80757278825516,-91.23046875]]};
var asl_drawing = {};

(function( $) {
	
	var selectedColor;
	asl_drawing = {
		shapes : [],
		//allow_edit : true,
		shapes_index : 0,
		scale : null,
		post_data : [],
		markers:[],
		current_map: null,
		drawingManager:null,
		selectedShape: null,
		initialize: function(_map,no_drawing){

			if(!google.maps.drawing)return;
			
			var that = this;

			that.current_map = _map;
			
			if(no_drawing) {

				//map_options['draggable'] 	= false,
				map_options['draggable'] 	= true,
				map_options['scrollwheel'] 	= false,
				map_options['disableDefaultUI'] = false,
				map_options['disableDoubleClickZoom'] = true,
				map_options['zoomControl'] 	= false,
				map_options['panControl'] 	= false;
			}
			

			var polyOptions = {
				strokeWeight : 1,
				strokeOpacity : .75,
				fillOpacity : 0.45,
				editable : false,
				strokeColor: '#CC3333',
				fillColor: '#CC3333'
			};

			//instant Initialize
			that.drawingManager = new google.maps.drawing.DrawingManager({
					drawingControlOptions : {
						drawingModes : [/*google.maps.drawing.OverlayType.MARKER, */google.maps.drawing.OverlayType.CIRCLE, google.maps.drawing.OverlayType.POLYGON,        google.maps.drawing.OverlayType.POLYLINE, google.maps.drawing.OverlayType.RECTANGLE]
					},
					markerOptions : {
						draggable : true
					},
					polylineOptions : {
						editable : true
					},
					rectangleOptions : polyOptions,
					circleOptions : polyOptions,
					polygonOptions : polyOptions,
					map : that.current_map
			});


			//add the button bind for Colors
			$('.asl-p-cont .color_scheme input').bind('click',function(e){

				that.selectColor(this.value);
				that.setSelectedShapeColor(this.value);
			});


			$('#asl-fill-option label').bind('click',function(e){

				var value = $(this).data('value');

				if(that.selectedShape)
					if(value == 0) {

						console.log(this.value);
						that.selectedShape.set('fillColor','transparent');
					}
					else
						that.selectedShape.set('fillColor',that.selectedShape.get('strokeColor'));
			});

			//Overlay Complete
			google.maps.event.addListener(that.drawingManager, 'overlaycomplete', function (e) {
				
				if (e.type == google.maps.drawing.OverlayType.MARKER) {
					that.markers.push(e);
					return true;
				}

				that.shapes.push(e);
				that.drawingManager.setDrawingMode(null);
				var newShape = e.overlay;
				newShape.type = e.type;
				newShape._id_ = new Date().getTime();

				google.maps.event.addListener(newShape, 'click', function () {
					that.setSelection(newShape);
				});

				that.setSelection(newShape);

			});
			
				
			//Change Event
			google.maps.event.addListener(that.drawingManager, 'drawingmode_changed', that.clearSelection);
			google.maps.event.addListener(that.current_map, 'click', that.clearSelection);



			$('#asl-delete-shape').bind('click',function(e){

				that.deleteSelectedShape();
			});

			$('#asl-clear-all').bind('click',function(e){

				that.clearAll();
			});

			
			google.maps.Polygon.prototype.my_getBounds = function(){
		    
		    var bounds = new google.maps.LatLngBounds()
		    this.getPath().forEach(function(element,index){bounds.extend(element)})
		    return bounds
			};
		},
		bind_selection: function(_new_shape) {

			var that = this;

			google.maps.event.addListener(_new_shape, 'click', function () {
				
				that.setSelection(_new_shape);
			});
		},
		loadData: function(saved) {
			
			var that = this;
			_map = that.current_map;

			var index_c = new Date().getTime();

			var saved_shapes = [];

			for(var i in saved.shapes) {

				if(!saved.shapes[i])continue;


				var new_shape = null;

				if(saved.shapes[i].type == 'polygon') {

					new_shape = that.create_polygon.call(that,saved.shapes[i].coord,_map,saved.shapes[i]);
				}
				else if(saved.shapes[i].type == 'polyline') {

					new_shape = that.create_polyline.call(that,saved.shapes[i].coord,_map,saved.shapes[i]);
				}
				else if(saved.shapes[i].type == 'circle') {
					
					new_shape = that.create_circle.call(that,saved.shapes[i],_map);
				}
				else if(saved.shapes[i].type == 'rectangle') {

					new_shape = that.create_rectangle.call(that,saved.shapes[i],_map);
				}

				// Bind the selection
				if(new_shape) {

					new_shape.type = saved.shapes[i].type;
					new_shape._id_ = index_c;

					that.shapes.push(new_shape);

					that.bind_selection(new_shape);
				}

				index_c++;
			}
		},
		clearAll: function(){

			//All the marker clear
			for(var i in this.markers)
			{
				if(this.markers[i].setMap)
					this.markers[i].setMap(null);
				else if(this.markers[i].overlay)
					this.markers[i].overlay.setMap(null);

				delete this.markers[i];
			}

			this.markers = [];

			//All the shapes clear
			for (var i in this.shapes) {
				
				if(this.shapes[i].setMap)
					this.shapes[i].setMap(null);
				else
					this.shapes[i].overlay.setMap(null);

				delete this.shapes[i];
			}

			this.shapes = [];
		},
		deleteSelectedShape: function() {
			

			if (this.selectedShape) {
				this.selectedShape.setMap(null);

				//Delete from shapes
				for(var k in this.shapes) {

					var shape = (this.shapes[k].overlay)?this.shapes[k].overlay:this.shapes[k];

					if(shape._id_ == asl_drawing.selectedShape._id_) {
						this.shapes.splice(k,1);
						break;
					}
				}
			}
		},
		selectColor: function(color){

			var that = this;
			selectedColor = color;
			var polylineOptions = that.drawingManager.get('polylineOptions');
			polylineOptions.strokeColor = /*polylineOptions.fillColor = */color;
			that.drawingManager.set('polylineOptions', polylineOptions);
			var rectangleOptions = that.drawingManager.get('rectangleOptions');
			rectangleOptions.fillColor = /*rectangleOptions.strokeColor =*/ color;
			that.drawingManager.set('rectangleOptions', rectangleOptions);
			var circleOptions = that.drawingManager.get('circleOptions');
			circleOptions.fillColor = /*circleOptions.strokeColor = */color;
			that.drawingManager.set('circleOptions', circleOptions);
			var polygonOptions = that.drawingManager.get('polygonOptions');
			polygonOptions.fillColor = /*polygonOptions.strokeColor =*/ color;
			that.drawingManager.set('polygonOptions', polygonOptions);
		},
		setSelectedShapeColor: function(color) {

			if (this.selectedShape) {
				if (this.selectedShape.type == google.maps.drawing.OverlayType.POLYLINE) {


					this.selectedShape.set('strokeColor', color);

					if(this.selectedShape.get('fillColor') != 'transparent')
						this.selectedShape.set('fillColor', color);
				}
				else {

					if(this.selectedShape.get('fillColor') != 'transparent')
						this.selectedShape.set('fillColor', color);
					this.selectedShape.set('strokeColor', color);
				}
			}
		},
		setSelection: function(shape) {

			asl_drawing.clearSelection();

			this.selectedShape = shape;

			var color = shape.get('fillColor') || shape.get('strokeColor');

			$('.asl-p-cont .color_scheme input').each(function(e){

				if(this.value == color) {

					this.checked = true;
					return true;
				}
			})

			shape.setEditable(true);
			this.selectColor(color);
			/*
			if (shape.type == 'polygon') {
				//var paths = shape.getPaths().getAt(0);
				//sqm = google.maps.geometry.spherical.computeArea(paths);
				//$('#CalcAcres').html(sqm * 0.000247105 + ' Acres');
			} else {
				//$('#CalcAcres').html('');
			}
			*/
		},
		clearSelection: function() {

			if (this.selectedShape) {
				this.selectedShape.setEditable(false);
				this.selectedShape = null;
			}
		},
		create_marker: function(_data) {

			var _map = that.current_map;
			var myLatLng = {lat: _data[0], lng: _data[1]};
			
			return new google.maps.Marker({
				position: myLatLng,
				map: _map
			});
		},
		create_image_marker: function(_data,_icon,_map) {

			if(!_map)_map = this.current_map;

			var myLatLng = {lat: _data[0], lng: _data[1]};
			

			var marker = new google.maps.Marker({
				position: myLatLng,
				map: _map,
				icon: _icon
			});
			/*var marker_icon = new google.maps.MarkerImage(_icon, null, null, null);
			marker.setIcon(marker_icon);*/
			
			return marker;
			/*var infowindow =  new google.maps.InfoWindow({
				content: 'Your Location'
			});*/
		},
		create_rectangle: function(_data,_map) {
			
			if(!_map)_map = this.current_map;

	        return  new google.maps.Rectangle({
				strokeColor: _data.strokeColor,
				fillColor: _data.color,
				strokeWeight : 1,
				type:'rectangle',
				editable:(asl_drawing.allow_edit)?asl_drawing.allow_edit:false,
				map: _map,
				bounds: new google.maps.LatLngBounds(
				new google.maps.LatLng(_data.sw[0], _data.sw[1]),
				new google.maps.LatLng(_data.ne[0],_data.ne[1]))
			});  
		},
		create_circle: function(_data,_map) {
			
			if(!_map)_map = this.current_map;


			return new google.maps.Circle({
				strokeColor: _data.strokeColor,
				fillColor: _data.color,
				type:'circle',
				strokeWeight : 1,
				map: _map,
				editable:(asl_drawing.allow_edit)?asl_drawing.allow_edit:false,
				center: new google.maps.LatLng(_data.center[0], _data.center[1]),
				radius: _data.radius
		    });
	        
		},
		create_polyline: function(_points,_map,_shape) {

	        if(!_map)_map = this.current_map;

	        var coords = [];

	        for(var i in _points){
	        	coords.push({lat: _points[i][0], lng: _points[i][1]});
	        }

	        return new google.maps.Polyline({
			    path: coords,
			    strokeColor: _shape.strokeColor,
			    strokeWeight : 3,
			    editable: (asl_drawing.allow_edit)?true:false, // Editable geometry off by default
			    type:'polyline',
			    map:_map
			});

		},
		create_polygon: function(_points,_map,_shape) {

	        if(!_map)_map = this.current_map;

	        var coords = [];

	        for(var i in _points){

	        	coords.push({lat: _points[i][0], lng: _points[i][1]});
	        }
	 	
	        return new google.maps.Polygon({
			    paths: coords,
					fillColor: _shape.color,
			    strokeColor: _shape.strokeColor,
			    strokeWeight : 1,
			    editable: (asl_drawing.allow_edit)?true:false, // Editable geometry off by default
			    type:'polygon',
			    map:_map
			});

		},
		polygon: function (e) {

			var handler = this;
			var map_scale = handler.scale;
			var cordinates = [];
			var _shape  = (e.overlay)?e.overlay:e; 
			var temp = {
				type : _shape.type,
				color : _shape.fillColor,
				strokeColor : _shape.strokeColor
			};
			
			var paths = _shape.getPath().getArray();
			
			for (var i = 0; i < paths.length; i++) {
				//cord = handler.fromLatLngToPoints(map, cord, map_scale);
				//cordinates.push([cord.x,cord.y]);
				cordinates.push([paths[i].lat(), paths[i].lng()]);
			}

			temp['coord'] = cordinates;
			handler.post_data[handler.shapes_index] = temp;
			handler.shapes_index++;
		},
		circle : function (e) {
			
			var handler = this;
			var _shape  = (e.overlay)?e.overlay:e; 
			var map_scale = handler.scale;
			var temp = {
				type : _shape.type,
				color : _shape.fillColor,
				strokeColor : _shape.strokeColor
			};

			var center = _shape.getBounds().getCenter();

			temp['center'] = [center.lat(), center.lng()];
			temp['radius'] = _shape.getRadius();

			
			handler.post_data[handler.shapes_index] = temp;
			handler.shapes_index++;
		},
		rectangle : function (e) {
			
			var handler = this;
			var _shape  = (e.overlay)?e.overlay:e; 
			var map_scale = handler.scale;
			var temp = {
				type : _shape.type,
				color : _shape.fillColor,
				strokeColor : _shape.strokeColor
			};
			var ne = _shape.getBounds().getNorthEast();
			var sw = _shape.getBounds().getSouthWest();
			
			temp['ne'] = [ne.lat(), ne.lng()];
			temp['sw'] = [sw.lat(), sw.lng()];

			handler.post_data[handler.shapes_index] = temp;
			handler.shapes_index++;
		},
		fromLatLngToPoints : function (_map, latLng, scale) {

			var handler = this;
			if(!_map)_map = this.current_map;
			var topRight = _map.getProjection().fromLatLngToPoint(_map.getBounds().getNorthEast());
			var bottomLeft = _map.getProjection().fromLatLngToPoint(_map.getBounds().getSouthWest());
			var worldPoint = _map.getProjection().fromLatLngToPoint(latLng);
			return new google.maps.Point((worldPoint.x - bottomLeft.x) * scale, (worldPoint.y - topRight.y) * scale);
		},
		/**
		 * [get_data Get the data to save]
		 * @param  {[type]} _map [description]
		 * @return {[type]}      [description]
		 */
		get_data: function (_map) {

			var handler = this;
			if(!_map)_map = this.current_map;

			handler.scale 		= Math.pow(2, _map.getZoom());
			handler.post_data = [];
			//var cord_center = map.getProjection().fromLatLngToPoint(map.getCenter());
			
			for (var i in handler.shapes) {
				
				var _shape = (handler.shapes[i].overlay)?handler.shapes[i].overlay:handler.shapes[i];
				if (_shape == null)
					continue;

				if (_shape.type == "polygon"){
					handler.polygon(_shape);					
				}
				else if (_shape.type == "polyline"){
					handler.polygon(_shape);					
				}
				else if (_shape.type == "rectangle")
					handler.rectangle(_shape);
				else if (_shape.type == "circle")
					handler.circle(_shape);
			}

			var _markers = [];
			for(var i in handler.markers) {
				var _m = (handler.markers[i].overlay)?handler.markers[i].overlay:handler.markers[i];
				if(_m.position)
					_markers.push([_m.position.lat(), _m.position.lng()]);
			}

			return {
				zoom: _map.getZoom(),
				center: [_map.getCenter().lat(),_map.getCenter().lng()],
				shapes  : handler.post_data,
				markers : _markers
			};
		}
	};

})( jQuery);