mapping-component-package-jp 0.0.2

package/src/js/mapEncapsulation/shapes/polygon.customedit.js

@@ -0,0 +1,393 @@
+export class IQLPolygonCustomEdit {
+
+    constructor() {
+    }
+
+    delete(map, currentPolygonCustomEdit) {
+
+		currentPolygonCustomEdit.getPath().forEach(function (vertex, index) {
+			if (vertex.marker) {
+				vertex.marker.setMap(null);
+				vertex.marker = undefined;
+			}
+			if (vertex.ghostMarker) {
+				vertex.ghostMarker.setMap(null);
+				vertex.ghostMarker = undefined;
+			}
+		});
+
+		return currentPolygonCustomEdit;	
+
+	}
+
+    edit(map, polygon, currentPolygonCustomEdit, isMobile) {
+		
+		if(isMobile) {
+			var svgpi = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 48 48" width="48" height="48">'
+			svgpi += '<path fill="rgba(255,255,255,0.01)" d="M 0, 24 a 24,24 0 1,0 48,0 a 24,24 0 1,0 -48,0" />';
+			svgpi += '<path fill="rgba(255,255,255,1)" stroke="#303030" stroke-width="1" d="M24 24 m-4,0 a 4,4,0 0,1 8,0 a 4,4 0 0,1 -8,0z" />';
+			svgpi += '</svg>';
+
+			var pointIcon = {
+				url: 'data:image/svg+xml;charset=UTF-8;base64,' + btoa(svgpi),
+				anchor: new google.maps.Point(24, 24)
+			};
+
+			var svgmpi = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 48 48" width="48" height="48">'
+			svgmpi += '<path fill="rgba(255,255,255,0.01)" d="M 0, 24 a 24,24 0 1,0 48,0 a 24,24 0 1,0 -48,0" />';
+			svgmpi += '<path fill="rgba(255,255,255,0.4)" stroke="#303030" stroke-width="0.3" stroke-opacity="0.01" d="M24 24 m-4,0 a 4,4,0 0,1 8,0 a 4,4 0 0,1 -8,0z" />';
+			svgmpi += '</svg>';
+
+			var midPointIcon = {
+				url: 'data:image/svg+xml;charset=UTF-8;base64,' + btoa(svgmpi),
+				anchor: new google.maps.Point(24, 24)
+			};
+
+			var svgup = '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 52 52" style="enable-background:new 0 0 52 52;" xml:space="preserve">';
+			svgup += '<g transform="scale(0.4 0.4)">';
+			svgup += '<path style="fill:#f1a81e;" d="M38.853,5.324L38.853,5.324c-7.098-7.098-18.607-7.098-25.706,0h0 C6.751,11.72,6.031,23.763,11.459,31L26,52l14.541-21C45.969,23.763,45.249,11.72,38.853,5.324z"/>';
+			svgup += '<g transform="translate(13.2 5.9) scale(0.8 0.8)">';
+			svgup += '<path style=" stroke:none;fill-rule:nonzero;fill:rgb(255,255,255);fill-opacity:1;" d="M 15.78125 0.0546875 C 15.710938 0.0859375 14.742188 1.03125 13.625 2.148438 C 11.136719 4.644531 11.257812 4.351562 12.300781 5.386719 C 12.957031 6.050781 13.011719 6.09375 13.25 6.09375 C 13.480469 6.09375 13.542969 6.050781 14.0625 5.53125 L 14.625 4.96875 L 14.625 8.019531 C 14.625 11.261719 14.636719 11.398438 14.925781 11.554688 C 15.09375 11.648438 16.90625 11.648438 17.074219 11.554688 C 17.363281 11.398438 17.375 11.261719 17.375 8.019531 L 17.375 4.96875 L 17.9375 5.53125 C 18.457031 6.050781 18.519531 6.09375 18.75 6.09375 C 18.988281 6.09375 19.042969 6.050781 19.699219 5.386719 C 20.742188 4.351562 20.867188 4.648438 18.34375 2.125 C 16.210938 -0.0078125 16.105469 -0.0859375 15.78125 0.0546875 Z M 15.78125 0.0546875 "/>';
+			svgup += '<path style=" stroke:none;fill-rule:nonzero;fill:rgb(255,255,255);fill-opacity:1;" d="M 4.21875 11.617188 C 4.148438 11.648438 3.179688 12.59375 2.0625 13.710938 C 0.0703125 15.710938 0.03125 15.75 0.03125 16 C 0.03125 16.25 0.0703125 16.289062 2.113281 18.324219 C 4.648438 20.867188 4.351562 20.742188 5.386719 19.699219 C 6.050781 19.042969 6.09375 18.988281 6.09375 18.75 C 6.09375 18.519531 6.050781 18.457031 5.53125 17.9375 L 4.96875 17.375 L 8.019531 17.375 C 11.261719 17.375 11.398438 17.363281 11.554688 17.074219 C 11.648438 16.90625 11.648438 15.09375 11.554688 14.925781 C 11.398438 14.636719 11.261719 14.625 8.019531 14.625 L 4.96875 14.625 L 5.53125 14.0625 C 6.050781 13.542969 6.09375 13.480469 6.09375 13.25 C 6.09375 13.011719 6.050781 12.957031 5.40625 12.3125 C 4.699219 11.613281 4.5 11.492188 4.21875 11.617188 Z M 4.21875 11.617188 "/>';
+			svgup += '<path style=" stroke:none;fill-rule:nonzero;fill:rgb(255,255,255);fill-opacity:1;" d="M 27.34375 11.617188 C 27.273438 11.648438 26.925781 11.976562 26.5625 12.335938 C 25.949219 12.957031 25.90625 13.011719 25.90625 13.25 C 25.90625 13.480469 25.949219 13.542969 26.46875 14.0625 L 27.03125 14.625 L 23.980469 14.625 C 20.738281 14.625 20.601562 14.636719 20.445312 14.925781 C 20.351562 15.09375 20.351562 16.90625 20.445312 17.074219 C 20.601562 17.363281 20.738281 17.375 23.980469 17.375 L 27.03125 17.375 L 26.46875 17.9375 C 25.949219 18.457031 25.90625 18.519531 25.90625 18.75 C 25.90625 18.988281 25.949219 19.042969 26.613281 19.699219 C 27.648438 20.742188 27.351562 20.867188 29.886719 18.324219 C 31.929688 16.289062 31.96875 16.25 31.96875 16 C 31.96875 15.75 31.929688 15.710938 29.90625 13.6875 C 27.773438 11.554688 27.675781 11.476562 27.34375 11.617188 Z M 27.34375 11.617188 "/>';
+			svgup += '<path style=" stroke:none;fill-rule:nonzero;fill:rgb(255,255,255);fill-opacity:1;" d="M 14.917969 20.445312 C 14.636719 20.605469 14.625 20.757812 14.625 23.980469 L 14.625 27.03125 L 14.0625 26.46875 C 13.542969 25.949219 13.480469 25.90625 13.25 25.90625 C 13.011719 25.90625 12.957031 25.949219 12.300781 26.613281 C 11.257812 27.648438 11.132812 27.351562 13.675781 29.886719 C 15.710938 31.929688 15.75 31.96875 16 31.96875 C 16.25 31.96875 16.289062 31.929688 18.324219 29.886719 C 20.867188 27.351562 20.742188 27.648438 19.699219 26.613281 C 19.042969 25.949219 18.988281 25.90625 18.75 25.90625 C 18.519531 25.90625 18.457031 25.949219 17.9375 26.46875 L 17.375 27.03125 L 17.375 23.980469 C 17.375 20.738281 17.363281 20.601562 17.074219 20.445312 C 16.90625 20.355469 15.070312 20.355469 14.917969 20.445312 Z M 14.917969 20.445312 "/>';
+			svgup += '</g>';	
+			svgup += '</g>';	
+			svgup += '</svg>';
+
+			var handleIconUp = {
+				url: 'data:image/svg+xml;charset=UTF-8;base64,' + btoa(svgup),
+				anchor: new google.maps.Point(30, 60)
+			};
+
+			var svgdown = '<svg  version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 52 52" style="enable-background:new 0 0 52 52;" xml:space="preserve">';
+			svgdown += '<g transform="scale(0.4 0.4) rotate(180 26 26)">';
+			svgdown += '<path style="fill:#f1a81e;" d="M38.853,5.324L38.853,5.324c-7.098-7.098-18.607-7.098-25.706,0h0 C6.751,11.72,6.031,23.763,11.459,31L26,52l14.541-21C45.969,23.763,45.249,11.72,38.853,5.324z"/>';
+			svgdown += '<g transform="translate(13.2 5.9) scale(0.8 0.8)">';
+			svgdown += '<path style=" stroke:none;fill-rule:nonzero;fill:rgb(255,255,255);fill-opacity:1;" d="M 15.78125 0.0546875 C 15.710938 0.0859375 14.742188 1.03125 13.625 2.148438 C 11.136719 4.644531 11.257812 4.351562 12.300781 5.386719 C 12.957031 6.050781 13.011719 6.09375 13.25 6.09375 C 13.480469 6.09375 13.542969 6.050781 14.0625 5.53125 L 14.625 4.96875 L 14.625 8.019531 C 14.625 11.261719 14.636719 11.398438 14.925781 11.554688 C 15.09375 11.648438 16.90625 11.648438 17.074219 11.554688 C 17.363281 11.398438 17.375 11.261719 17.375 8.019531 L 17.375 4.96875 L 17.9375 5.53125 C 18.457031 6.050781 18.519531 6.09375 18.75 6.09375 C 18.988281 6.09375 19.042969 6.050781 19.699219 5.386719 C 20.742188 4.351562 20.867188 4.648438 18.34375 2.125 C 16.210938 -0.0078125 16.105469 -0.0859375 15.78125 0.0546875 Z M 15.78125 0.0546875 "/>';
+			svgdown += '<path style=" stroke:none;fill-rule:nonzero;fill:rgb(255,255,255);fill-opacity:1;" d="M 4.21875 11.617188 C 4.148438 11.648438 3.179688 12.59375 2.0625 13.710938 C 0.0703125 15.710938 0.03125 15.75 0.03125 16 C 0.03125 16.25 0.0703125 16.289062 2.113281 18.324219 C 4.648438 20.867188 4.351562 20.742188 5.386719 19.699219 C 6.050781 19.042969 6.09375 18.988281 6.09375 18.75 C 6.09375 18.519531 6.050781 18.457031 5.53125 17.9375 L 4.96875 17.375 L 8.019531 17.375 C 11.261719 17.375 11.398438 17.363281 11.554688 17.074219 C 11.648438 16.90625 11.648438 15.09375 11.554688 14.925781 C 11.398438 14.636719 11.261719 14.625 8.019531 14.625 L 4.96875 14.625 L 5.53125 14.0625 C 6.050781 13.542969 6.09375 13.480469 6.09375 13.25 C 6.09375 13.011719 6.050781 12.957031 5.40625 12.3125 C 4.699219 11.613281 4.5 11.492188 4.21875 11.617188 Z M 4.21875 11.617188 "/>';
+			svgdown += '<path style=" stroke:none;fill-rule:nonzero;fill:rgb(255,255,255);fill-opacity:1;" d="M 27.34375 11.617188 C 27.273438 11.648438 26.925781 11.976562 26.5625 12.335938 C 25.949219 12.957031 25.90625 13.011719 25.90625 13.25 C 25.90625 13.480469 25.949219 13.542969 26.46875 14.0625 L 27.03125 14.625 L 23.980469 14.625 C 20.738281 14.625 20.601562 14.636719 20.445312 14.925781 C 20.351562 15.09375 20.351562 16.90625 20.445312 17.074219 C 20.601562 17.363281 20.738281 17.375 23.980469 17.375 L 27.03125 17.375 L 26.46875 17.9375 C 25.949219 18.457031 25.90625 18.519531 25.90625 18.75 C 25.90625 18.988281 25.949219 19.042969 26.613281 19.699219 C 27.648438 20.742188 27.351562 20.867188 29.886719 18.324219 C 31.929688 16.289062 31.96875 16.25 31.96875 16 C 31.96875 15.75 31.929688 15.710938 29.90625 13.6875 C 27.773438 11.554688 27.675781 11.476562 27.34375 11.617188 Z M 27.34375 11.617188 "/>';
+			svgdown += '<path style=" stroke:none;fill-rule:nonzero;fill:rgb(255,255,255);fill-opacity:1;" d="M 14.917969 20.445312 C 14.636719 20.605469 14.625 20.757812 14.625 23.980469 L 14.625 27.03125 L 14.0625 26.46875 C 13.542969 25.949219 13.480469 25.90625 13.25 25.90625 C 13.011719 25.90625 12.957031 25.949219 12.300781 26.613281 C 11.257812 27.648438 11.132812 27.351562 13.675781 29.886719 C 15.710938 31.929688 15.75 31.96875 16 31.96875 C 16.25 31.96875 16.289062 31.929688 18.324219 29.886719 C 20.867188 27.351562 20.742188 27.648438 19.699219 26.613281 C 19.042969 25.949219 18.988281 25.90625 18.75 25.90625 C 18.519531 25.90625 18.457031 25.949219 17.9375 26.46875 L 17.375 27.03125 L 17.375 23.980469 C 17.375 20.738281 17.363281 20.601562 17.074219 20.445312 C 16.90625 20.355469 15.070312 20.355469 14.917969 20.445312 Z M 14.917969 20.445312 "/>';
+			svgdown += '</g>';	
+			svgdown += '</g>';	
+			svgdown += '</svg>';
+
+			var handleIconDown = {
+				url: 'data:image/svg+xml;charset=UTF-8;base64,' + btoa(svgdown),
+				anchor: new google.maps.Point(30, 0)
+			};
+		
+		} else {
+
+			var pointIcon = {
+				path: 'M4 4m-4,0a4,4,0 0,1 8,0a 4,4 0 0,1 -8,0z',
+				fillColor: '#ffffff',
+				fillOpacity: 1,
+				anchor: new google.maps.Point(4, 4),
+				strokeWeight: 1,
+				strokeOpacity: 1,
+				strokeColor: '#303030',
+				scale: 1
+			};
+
+			var midPointIcon = {
+				path: 'M4 4m-4,0a4,4,0 0,1 8,0a 4,4 0 0,1 -8,0z',
+				fillColor: '#ffffff',
+				fillOpacity: 0.4,
+				anchor: new google.maps.Point(4, 4),
+				strokeWeight: 0.3,
+				strokeOpacity: 0.01,
+				strokeColor: '#303030',
+				scale: 1
+			};
+		}
+
+		var ghostPath = new google.maps.Polyline({
+			map: map,
+			strokeColor: '#ffa500',
+			strokeOpacity: 1,
+			strokeWeight: 3
+		});
+
+		function at(index){
+			return polygon.getPath().getAt(index);
+		}
+
+		function vertexGhostDragStart() {
+			
+			var polygonBounds = new google.maps.LatLngBounds();
+			polygon.getPath().forEach(function (vertex, index) {
+				vertex.marker.setIcon(pointIcon);
+				polygonBounds.extend(vertex);
+			});	
+			if(isMobile) {
+				var polygonBoundsCenter = polygonBounds.getCenter();
+				if(this.position.lat() >= polygonBoundsCenter.lat()) {  
+					this.setIcon(handleIconUp);
+				} else {
+					this.setIcon(handleIconDown);
+				}		
+			}	
+		}
+		
+		function vertexGhostDrag() {
+			if (ghostPath.getPath().getLength() === 0) {
+				if(this.marker.editIndex < polygon.getPath().getLength() - 1) {
+					ghostPath.setPath([
+						this.marker.getPosition(), 
+						this.getPosition(), 
+						at(this.marker.editIndex + 1)
+					]);
+				} else if(this.marker.editIndex == polygon.getPath().getLength() - 1) {	
+					ghostPath.setPath([
+						this.marker.getPosition(), 
+						this.getPosition(), 
+						at(0)
+					]);
+				}	
+			}  
+			ghostPath.getPath().setAt(1, this.getPosition());
+		}
+
+		function moveGhostMarkers(marker) {
+		  
+			var vertex = at(marker.editIndex);
+			var previous, next, position;
+			
+			if(marker.editIndex === 0) { 
+				previous = at(polygon.getPath().getLength()-1);
+			} else {	
+				previous = at(marker.editIndex - 1);
+			}  
+			if(marker.editIndex == polygon.getPath().getLength()-1) {
+				next = at(0);
+			} else {	
+				next = at(marker.editIndex + 1);
+			}  
+			position = marker.getPosition();
+          
+			if (vertex && vertex.ghostMarker) {
+				if (!google.maps.geometry) {
+					vertex.ghostMarker.setPosition(new google.maps.LatLng(vertex.lat() + 0.5 * (next.lat() - vertex.lat()), vertex.lng() + 0.5 * (next.lng() - vertex.lng())));
+				} else {
+					vertex.ghostMarker.setPosition(google.maps.geometry.spherical.interpolate(vertex, next, 0.5));
+				}
+			}
+			if (previous && previous.ghostMarker) {
+				if (!google.maps.geometry) {
+					previous.ghostMarker.setPosition(new google.maps.LatLng(previous.lat() + 0.5 * (position.lat() - previous.lat()), previous.lng() + 0.5 * (position.lng() - previous.lng())));
+				} else {
+					previous.ghostMarker.setPosition(google.maps.geometry.spherical.interpolate(previous, position, 0.5));
+				}
+			}
+		}
+
+		function vertexGhostDragEnd() {
+
+			this.setIcon(midPointIcon);		
+		  
+			var position = this.getPosition(), 
+				index = this.marker.editIndex + 1,
+				vertex;
+          
+			ghostPath.getPath().forEach(function() {
+				ghostPath.getPath().pop();
+			});
+          
+			polygon.getPath().insertAt(index, position);
+          
+			vertex = createMarkerVertex(at(index), pointIcon);
+			vertex.editIndex = index;
+          
+			moveGhostMarkers(this.marker);
+          
+			createGhostMarkerVertex(at(index));
+          
+			polygon.getPath().forEach(function (vertex, index) {
+				if (vertex.marker) {
+					vertex.marker.editIndex = index;
+				}
+			});
+          
+			google.maps.event.trigger(polygon, 'insert_at', index, position);
+		}
+
+		function createGhostMarkerVertex(point) {
+
+			if (point.marker.editIndex < polygon.getPath().getLength() - 1) {
+				var next = at(point.marker.editIndex + 1),
+					position, vertex;
+            
+				if (!google.maps.geometry) {
+					position = new google.maps.LatLng(point.lat() + 0.5 * (next.lat() - point.lat()), point.lng() + 0.5 * (next.lng() - point.lng()));
+				} else {
+					position = google.maps.geometry.spherical.interpolate(point, next, 0.5);
+				}
+                        
+				vertex = point.ghostMarker;
+            
+				if (!vertex){
+					vertex = new google.maps.Marker({
+						map: map,
+						icon: midPointIcon,
+						draggable: true,
+						raiseOnDrag: false
+					});
+
+					google.maps.event.addListener(vertex, "dragstart", vertexGhostDragStart);
+					google.maps.event.addListener(vertex, "drag", vertexGhostDrag);
+					google.maps.event.addListener(vertex, "dragend", vertexGhostDragEnd);
+
+					point.ghostMarker = vertex;
+					vertex.marker = point.marker;
+				}
+            
+				vertex.setPosition(position);
+				return vertex;
+
+			} else if (point.marker.editIndex == polygon.getPath().getLength() - 1) {
+				var next = at(0),
+					position, vertex;
+            
+				if (!google.maps.geometry) {
+					position = new google.maps.LatLng(point.lat() + 0.5 * (next.lat() - point.lat()), point.lng() + 0.5 * (next.lng() - point.lng()));
+				} else {
+					position = google.maps.geometry.spherical.interpolate(point, next, 0.5);
+				}
+                        
+				vertex = point.ghostMarker;
+            
+				if (!vertex){
+					vertex = new google.maps.Marker({
+						map: map,
+						icon: midPointIcon,
+						draggable: true,
+						raiseOnDrag: false
+					});
+
+					google.maps.event.addListener(vertex, "dragstart", vertexGhostDragStart);
+					google.maps.event.addListener(vertex, "drag", vertexGhostDrag);
+					google.maps.event.addListener(vertex, "dragend", vertexGhostDragEnd);
+
+					point.ghostMarker = vertex;
+					vertex.marker = point.marker;
+				}
+            
+				vertex.setPosition(position);
+				return vertex;
+
+			}	  
+			return null;
+		}
+
+		function vertexDragStart() {
+			var polygonBounds = new google.maps.LatLngBounds();
+			polygon.getPath().forEach(function (vertex, index) {
+				vertex.marker.setIcon(pointIcon);
+				polygonBounds.extend(vertex);
+			});		
+			if(isMobile) {
+				var polygonBoundsCenter = polygonBounds.getCenter();
+				if(this.position.lat() >= polygonBoundsCenter.lat()) {  
+					this.setIcon(handleIconUp);
+				} else {
+					this.setIcon(handleIconDown);
+				}		
+			}
+		}		
+
+		function vertexDrag() {
+			var vertex = this.getPosition();
+			vertex.marker = this;
+			vertex.ghostMarker = at(this.editIndex).ghostMarker;
+			polygon.getPath().setAt(this.editIndex, vertex);
+			moveGhostMarkers(this);
+		}
+      
+		function vertexDragEnd() {
+			google.maps.event.trigger(polygon, 'update_at', this.editIndex, this.getPosition());
+		}
+
+		function vertexRightClick() {
+			var vertex = at(this.editIndex),
+				previous = at(this.editIndex - 1);
+          
+			if (vertex.ghostMarker) {
+				vertex.ghostMarker.setMap(null);
+			}
+        
+			polygon.getPath().removeAt(this.editIndex);
+        
+			if (previous) {
+				if (this.editIndex < polygon.getPath().getLength()) {
+					moveGhostMarkers(previous.marker);
+				} else {
+					previous.ghostMarker.setMap(null);
+					previous.ghostMarker = undefined;
+				}
+			}
+        
+			this.setMap(null);
+			polygon.getPath().forEach(function (vertex, index) {
+				if (vertex.marker) {
+					vertex.marker.editIndex = index;
+				}
+			});
+        
+			if (polygon.getPath().getLength() === 1) {
+				polygon.getPath().pop().marker.setMap(null);
+			}
+        
+			google.maps.event.trigger(polygon, 'remove_at', this.editIndex, vertex);
+		}
+
+		function createMarkerVertex(point, icon) {
+        
+			var vertex = point.marker;
+        
+			if (!vertex){
+          
+				vertex = new google.maps.Marker({
+					position: point,
+					map: map,
+					icon: icon,
+					draggable: true,
+					raiseOnDrag: false
+				});
+          
+				google.maps.event.addListener(vertex, "dragstart", vertexDragStart);
+				google.maps.event.addListener(vertex, "drag", vertexDrag);
+				google.maps.event.addListener(vertex, "dragend", vertexDragEnd);
+          
+				point.marker = vertex;
+			}
+
+			vertex.setPosition(point);
+
+			return vertex;
+		}
+
+		function PolygonCustomEditWidget(map, polygon, currentPolygonCustomEdit, isMobile) {
+
+			polygon.setMap(map);
+			
+			polygon.getPath().forEach(function (vertex, index) {
+				var mIcon = pointIcon;
+				if(isMobile && index === 1) {
+					mIcon = handleIconUp;	
+				}	
+				createMarkerVertex(vertex, mIcon).editIndex = index;
+				createGhostMarkerVertex(vertex);
+			});
+      
+			currentPolygonCustomEdit = polygon;
+	  
+			return currentPolygonCustomEdit;
+		}
+    
+		PolygonCustomEditWidget.prototype = new google.maps.MVCObject();
+
+        return new PolygonCustomEditWidget(map, polygon, currentPolygonCustomEdit, isMobile);
+      
+    };
+}