mapping-component-package-jp 0.0.2

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

@@ -0,0 +1,478 @@
+export class IQLPolylineCustomEdit {
+
+    constructor() {
+    }
+
+    delete(map, currentPolylineCustomEdit) {
+
+		currentPolylineCustomEdit.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 currentPolylineCustomEdit;	
+
+	}
+
+    getEncodedPath(map, currentPolylineCustomEdit) {
+		return google.maps.geometry.encoding.encodePath(currentPolylineCustomEdit.getPath());
+	}
+    
+    verify(map, rmarker, pmarker, dirmarkers, dpolylines, currentPolylineCustomEdit, offsetX, offsetY, eventHandlers) {
+
+		var verifyResult = {success: false};//, errmsg: '', dirmarkers: dirmarkers, dpolyline: dpolyline};//, cpce: null, dirmarkers: null, dpolyline: null};
+		
+		var directionsService = new google.maps.DirectionsService();
+		//var directionsDisplay = new google.maps.DirectionsRenderer();
+
+		var rplstart = currentPolylineCustomEdit.getPath().getAt(0);	//road
+		var rplend = currentPolylineCustomEdit.getPath().getAt(currentPolylineCustomEdit.getPath().getLength()-1);  //field	
+
+		var dbounds = new google.maps.LatLngBounds();
+
+		var cpcePath = currentPolylineCustomEdit.getPath();
+		cpcePath.forEach(function(c,ci) {
+			dbounds.extend(cpcePath.getAt(ci));
+		});	
+		dbounds.extend(rplend);
+		var iqlpos = new google.maps.LatLng(-25.765255, 28.271339);
+		calcRoute(rplstart, iqlpos, rplend, rmarker, pmarker, dirmarkers, dpolylines, currentPolylineCustomEdit, offsetX, offsetY, eventHandlers);
+
+
+		function calcRoute(start, end, fpos, rmarker, pmarker, dirmarkers, dpolylines, currentPolylineCustomEdit, offsetX, offsetY, eventHandlers) {
+			
+			var request = {
+				origin: start,
+				destination: end,
+				travelMode: google.maps.TravelMode.DRIVING
+			};
+  
+			directionsService.route(request, function(response, status) {
+				if (status == google.maps.DirectionsStatus.OK) {
+					renderRoute(response, start, fpos, rmarker, pmarker, dirmarkers, dpolylines, currentPolylineCustomEdit, offsetX, offsetY, eventHandlers);
+				} else {
+					verifyResult.success = false;
+					eventHandlers["TriggerRouteRendered"](verifyResult);
+				}
+			});
+		}
+
+		function renderRoute(response, start, fpos, rmarker, pmarker, dirmarkers, dpolylines, currentPolylineCustomEdit, offsetX, offsetY, eventHandlers) {
+/*
+			var dpolyline = new google.maps.Polyline({
+				path: [],
+				strokeColor: '#0000ff',
+				strokeWeight: 5,
+				strokeOpacity: 0.5,
+				zIndex: 10006	
+			});
+			dpolylines.push(dpolyline);
+			var asvg = '<svg version="1.1" id="Capa_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">';
+			asvg += '<g transform="scale(0.4 0.4)">';
+			asvg += '<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"/>';
+			asvg += '<text x="16" y="28" style="font: bold 28px sans-serif;fill: #ffffff;">A</text>';
+			asvg += '</g>';    
+			asvg += '</svg>';
+
+			var bsvg = '<svg version="1.1" id="Capa_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">';
+			bsvg += '<g transform="scale(0.4 0.4)">';
+			bsvg += '<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"/>';
+			bsvg += '<text x="16" y="28" style="font: bold 28px sans-serif;fill: #ffffff;">B</text>';
+			bsvg += '</g>';    
+			bsvg += '</svg>';
+
+
+			var route = response.routes[0];
+			var path = response.routes[0].overview_path;
+			var legs = response.routes[0].legs;
+  
+			//rmarker.setMap(null);
+			//pmarker.setMap(null);
+			
+			currentPolylineCustomEdit.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;
+				}
+			});
+
+			
+			//dirmarkers = [];
+
+			var amarker = new google.maps.Marker({
+				position: fpos,
+				icon: {
+					url: 'data:image/svg+xml;charset=UTF-8;base64,' + btoa(asvg),
+					anchor: new google.maps.Point(30, 60)
+				},    
+				//map: map,
+				zIndex: 10007
+			});
+			dirmarkers.push(amarker);
+
+			var tempPath = [];
+			cpcePath.forEach(function(cp) {
+				tempPath.push([cp.lat(),cp.lng()]);
+			});
+			tempPath.reverse();
+			tempPath.forEach(function(tp) {
+				dpolyline.getPath().push(new google.maps.LatLng(tp[0],tp[1]));
+			});	
+			
+			for (var i = 0; i < legs.length; i++) {
+				if(i == legs.length-1) {
+					var bmarker = new google.maps.Marker({
+						position: legs[i].end_location,
+						icon: {
+							url: 'data:image/svg+xml;charset=UTF-8;base64,' + btoa(bsvg),
+							anchor: new google.maps.Point(30, 60)
+						},    
+						//map: map,
+						zIndex: 10007
+					});
+					dirmarkers.push(bmarker);
+				}
+				var steps = legs[i].steps;
+				for (var j = 0; j < steps.length; j++) {
+					var nextSegment = steps[j].path;
+           
+					for (var k = 0; k < nextSegment.length; k++) {
+						dpolyline.getPath().push(nextSegment[k]);
+						dbounds.extend(nextSegment[k]);
+					}
+				}
+			}
+			amarker.setMap(map);
+			dpolyline.setMap(map);
+			bmarker.setMap(map);
+			
+			var boundsChangedListener = google.maps.event.addListenerOnce(map, 'bounds_changed', function () {
+				var zoomChangedListener = google.maps.event.addListenerOnce(map, 'zoom_changed', function () {
+					offsetCenter(map.getCenter(), offsetX, offsetY);
+				});
+				map.setZoom(map.getZoom()-1);
+			});	
+			
+			
+			map.fitBounds(dbounds);
+*/			
+
+			verifyResult.success = true;
+
+			eventHandlers["TriggerRouteRendered"](verifyResult);
+
+
+		}
+
+		function offsetCenter(latlng, offsetX, offsetY) {
+
+			// latlng is the apparent centre-point
+			// offsetx is the distance you want that point to move to the right, in pixels
+			// offsety is the distance you want that point to move upwards, in pixels
+			// offset can be negative
+			// offsetx and offsety are both optional
+
+			var zoom = map.getZoom();
+			//var scale = Math.pow(2, map.getZoom());
+			var scale = 1 << zoom;
+			var worldCoordinateCenter = map.getProjection().fromLatLngToPoint(latlng);
+			var pixelOffset = new google.maps.Point((offsetX/scale) || 0,(offsetY/scale) || 0);
+
+			var worldCoordinateNewCenter = new google.maps.Point(
+				worldCoordinateCenter.x - pixelOffset.x,
+				worldCoordinateCenter.y + pixelOffset.y
+			);
+
+			var newCenter = map.getProjection().fromPointToLatLng(worldCoordinateNewCenter);
+
+			map.setCenter(newCenter);
+
+		}
+
+	}
+	
+    edit(map, polyline, sm, em, str, eventHandlers, currentPolylineCustomEdit, 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 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 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 handleIcon = {
+			path: 'M0,0 32,0 16,27.7z',
+			fillColor: '#ffffff',
+			fillOpacity: 1,
+			anchor: new google.maps.Point(16, 28),
+			strokeWeight: 1,
+			strokeOpacity: 1,
+			strokeColor: '#303030',
+			scale: 1,
+			id: 'handleIcon'
+		};
+
+		var ghostPath = new google.maps.Polyline({
+			map: polyline.getMap(),
+			strokeColor: '#ffa500',//polyline.strokeColor,
+			strokeOpacity: 1,
+			strokeWeight: 3// polyline.strokeWeight
+		});
+
+		function at(index){
+			return polyline.getPath().getAt(index);
+		}
+
+/*
+		function vertexGhostMouseOver() {
+			this.setIcon(imgGhostVertexOver);
+		}
+
+		function vertexGhostMouseOut() {
+			this.setIcon(imgGhostVertex);
+		}
+*/
+		function vertexGhostDrag() {
+			if (ghostPath.getPath().getLength() === 0) {
+				ghostPath.setPath([
+					this.marker.getPosition(), 
+					this.getPosition(), 
+					at(this.marker.editIndex + 1)
+				]);
+			}  
+			ghostPath.getPath().setAt(1, this.getPosition());
+		}
+
+		function moveGhostMarkers(marker) {
+			var vertex = at(marker.editIndex),
+				previous = at(marker.editIndex - 1),
+				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() {
+			var position = this.getPosition();
+			var index = this.marker.editIndex + 1;
+          
+			var vertex;
+          
+			ghostPath.getPath().forEach(function() {
+				ghostPath.getPath().pop();
+			});
+          
+			polyline.getPath().insertAt(index, position);
+          
+			vertex = createMarkerVertex(at(index));
+			vertex.editIndex = index;
+
+
+			moveGhostMarkers(this.marker);
+          
+			createGhostMarkerVertex(at(index));
+          
+			polyline.getPath().forEach(function (vertex, index) {
+				if (vertex.marker) {
+					vertex.marker.editIndex = index;
+				}
+			});
+          
+			google.maps.event.trigger(polyline, 'insert_at', index, position);
+			eventHandlers["TriggerRoadAccessChanged"](polyline);
+		}
+
+		function createGhostMarkerVertex(point) {
+			if (point.marker.editIndex < polyline.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: polyline.getMap(),
+						icon: midPointIcon,//imgGhostVertex,
+						draggable: true,
+						raiseOnDrag: false
+					});
+
+					//google.maps.event.addListener(vertex, "mouseover", vertexGhostMouseOver);
+					//google.maps.event.addListener(vertex, "mouseout", vertexGhostMouseOut);
+					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 vertexDrag() {
+			var vertex = this.getPosition();
+		
+			if(this.editIndex == polyline.getPath().getLength() - 1) {
+				str.updateMarkerLocation_(vertex);
+				vertex = this.getPosition();
+			}
+			vertex.marker = this;
+
+			vertex.ghostMarker = at(this.editIndex).ghostMarker;
+			polyline.getPath().setAt(this.editIndex, vertex);
+			moveGhostMarkers(this);
+        
+		}
+      
+		function vertexDragEnd(){
+			var vertex = this.getPosition();
+			vertex.marker = this;
+		
+			if(this.editIndex == polyline.getPath().getLength() - 1) {
+				str.updateMarkerLocation_(vertex);
+				vertex = this.getPosition();
+			}
+
+			google.maps.event.trigger(
+				polyline, 
+				'update_at', 
+				this.editIndex, 
+				vertex
+			);
+			eventHandlers["TriggerRoadAccessChanged"](polyline);
+		}
+
+		function createMarkerVertex(point) {
+		
+			var vertex = point.marker;
+        
+			if (!vertex){
+				if (polyline.getPath().getAt(0) == point) {		
+					vertex = sm;
+				} else if (polyline.getPath().getAt(polyline.getPath().getLength()-1) == point) {		
+					vertex = em;
+				} else {	
+					vertex = new google.maps.Marker({
+						position: point,
+						map: polyline.getMap(),
+						icon: pointIcon,//handleIcon,//imgVertex,
+						draggable: true,
+						raiseOnDrag: false
+					});
+				}	
+				google.maps.event.addListener(vertex, "drag", vertexDrag);
+				google.maps.event.addListener(vertex, "dragend", vertexDragEnd);
+		  	
+				//google.maps.event.addListener(vertex, "rightclick", vertexRightClick);
+          
+				point.marker = vertex;
+			}
+
+			vertex.setPosition(point);
+
+			return vertex;
+		}
+
+		function PolylineCustomEditWidget(map, polyline, sm, em, str, eventHandlers, currentPolylineCustomEdit, isMobile) {
+
+			polyline.setMap(map);
+			
+			polyline.getPath().forEach(function (vertex, index) {
+				createMarkerVertex(vertex).editIndex = index;
+				createGhostMarkerVertex(vertex);
+      
+			});
+      
+			currentPolylineCustomEdit = polyline;
+	  
+			return currentPolylineCustomEdit;
+		}
+    
+		PolylineCustomEditWidget.prototype = new google.maps.MVCObject();
+
+        return new PolylineCustomEditWidget(map, polyline, sm, em, str, eventHandlers, currentPolylineCustomEdit, isMobile);
+      
+    };
+}
+    

package/src/utils/commonUtils.ts

@@ -0,0 +1,5 @@
+import { v4 as uuidv4 } from 'uuid';
+
+export const generateUniqueId = (prefix: string = 'map'): string => {
+  return `${prefix}-${uuidv4()}`;
+};

package/src/utils/iconUtils.js

@@ -0,0 +1,52 @@
+export function createSvgIcon(options) {
+    const { iconName = "pinIcon", fillColor = '#f1a81e', width = 30, height = 41, strokeColor = '#000000', strokeWidth = 1 } = options;
+    const svgNamespace = "http://www.w3.org/2000/svg";
+
+    const svgIcon = document.createElementNS(svgNamespace, "svg");
+    svgIcon.setAttribute("viewBox", "0 0 57.64 83.57");
+    svgIcon.setAttribute("width", width);
+    svgIcon.setAttribute("height", height);
+    svgIcon.style.opacity = 0.8;
+    svgIcon.style.zIndex = 11000;
+
+    const defs = document.createElementNS(svgNamespace, "defs");
+
+    const clipPath = document.createElementNS(svgNamespace, "clipPath");
+    clipPath.setAttribute("id", `clippath-${iconName}`);
+    const rect = document.createElementNS(svgNamespace, "rect");
+    rect.setAttribute("width", "57.64");
+    rect.setAttribute("height", "83.57");
+    defs.appendChild(clipPath);
+    clipPath.appendChild(rect);
+
+    const style = document.createElementNS(svgNamespace, "style");
+    style.textContent = `
+        .cls-1 { clip-path: url(#clippath-${iconName}); }
+        .cls-2 { fill: none; stroke: ${strokeColor}; stroke-width: ${strokeWidth}; }
+        .cls-3 { fill: ${fillColor}; }
+    `;
+    defs.appendChild(style);
+    svgIcon.appendChild(defs);
+
+    const g = document.createElementNS(svgNamespace, "g");
+    g.setAttribute("class", "cls-1");
+
+    const pathData = {
+        'pinIcon': 'M16.01,31.23c-.07,7.22,5.73,12.51,11.98,12.86,3.84.22,7.17-1.04,9.9-3.73,2.36-2.32,3.64-5.2,3.77-8.49.31-7.8-5.87-13.21-12.29-13.47-7.66-.3-13.54,6.01-13.37,12.83M28.82.1c.43,0,.87-.03,1.3,0,.98.07,1.97.16,2.95.27,1.85.21,3.65.69,5.4,1.31,1.89.66,3.68,1.52,5.38,2.57,1.49.91,2.88,1.95,4.18,3.12,1.68,1.51,3.21,3.15,4.45,5.04.84,1.29,1.65,2.62,2.35,4,1.05,2.06,1.76,4.25,2.2,6.52.25,1.25.41,2.53.5,3.81.1,1.31.15,2.64.07,3.95-.15,2.38-.58,4.72-1.32,6.99-.64,1.97-1.49,3.87-2.54,5.67-1.07,1.83-2.08,3.7-3.13,5.54-.82,1.44-1.67,2.87-2.49,4.31-.8,1.39-1.58,2.78-2.37,4.17-.83,1.45-1.68,2.89-2.51,4.33-.68,1.18-1.34,2.37-2.02,3.55-1.3,2.26-2.61,4.52-3.91,6.79-1.02,1.77-2.02,3.55-3.04,5.32-.92,1.6-1.79,3.24-2.79,4.79-1.33,2.04-4.29,1.81-5.44-.18-1.33-2.3-2.67-4.6-3.99-6.91-1.42-2.46-2.82-4.93-4.23-7.39-1.18-2.06-2.36-4.12-3.54-6.18-1.36-2.37-2.74-4.73-4.1-7.1-1.29-2.25-2.57-4.5-3.83-6.76-1.21-2.17-2.46-4.32-3.6-6.53-1-1.93-1.66-4.01-2.09-6.14-.31-1.54-.58-3.09-.58-4.67,0-.48-.08-.96-.06-1.43.07-1.28.16-2.57.28-3.85.18-1.93.66-3.8,1.3-5.62.75-2.13,1.72-4.16,2.94-6.06,1.27-1.98,2.75-3.79,4.45-5.41,1.55-1.47,3.26-2.75,5.1-3.85,1.63-.98,3.36-1.77,5.14-2.42,1.61-.59,3.28-1.02,4.97-1.26,1.53-.22,3.09-.28,4.63-.41v.1'
+    };
+
+    const fillPath = document.createElementNS(svgNamespace, "path");
+    fillPath.setAttribute("class", "cls-3");
+    fillPath.setAttribute("d", pathData[iconName] || '');
+
+    const outlinePath = document.createElementNS(svgNamespace, "path");
+    outlinePath.setAttribute("class", "cls-2");
+    outlinePath.setAttribute("d", pathData[iconName] || '');
+
+    g.appendChild(fillPath); 
+    g.appendChild(outlinePath);
+
+    svgIcon.appendChild(g);
+
+    return svgIcon;
+}

package/src/utils/mapUtils.ts

@@ -0,0 +1,88 @@
+import { Field } from "../interfaces/Data/Field";
+
+export class ClearHTML {   
+    static clearString(str: string): string {
+        return str
+            .replace(/&/g, "&")
+            .replace(/>/g, ">")
+            .replace(/</g, "&lt;")
+            .replace(/"/g, "&quot;");
+    }
+}
+
+export function formatFieldContent(location: Field): string {
+    let content = `${location.FarmName} - ${location.LocationName}<br>${location.Area} ha${location.IsIrrigated ? ', irrigated' : ''}`;
+    
+    if (location.CropPlanted) {
+        content += `<br>${location.CropPlanted}`;
+        if (location.CultivarPlanted) {
+            content += ` (${location.CultivarPlanted})`;
+        }
+        if (location.PlantingDate) {
+            content += `<br>Planted: ${location.PlantingDate.replace(/-/g, "/")}`;
+        }
+    }
+    return content;
+}
+
+let tooltipElement: HTMLDivElement | null = null;
+
+export const showTooltip = (
+  event: google.maps.KmlMouseEvent, 
+  content: string, 
+  map: google.maps.Map
+): void => {
+  if (!tooltipElement && event.latLng) {
+    const overlay = new google.maps.OverlayView();
+    overlay.setMap(map);
+    overlay.draw = () => {};
+    
+    const point = overlay.getProjection().fromLatLngToDivPixel(event.latLng);
+    
+    tooltipElement = document.createElement('div');
+    tooltipElement.style.cssText = `
+      position: fixed;
+      background: rgba(0, 0, 0, 0.75);
+      color: #ffffff;
+      border-radius: 4px;
+      padding: 8px 12px;
+      font-size: 12px;
+      z-index: 1000;
+      pointer-events: none;
+      white-space: nowrap;
+    `;
+    tooltipElement.innerHTML = content;
+    
+    if (point) {
+      tooltipElement.style.top = `${point.y + 10}px`;
+      tooltipElement.style.left = `${point.x + 10}px`;
+    }
+    
+    document.body.appendChild(tooltipElement);
+  }
+};
+
+export const moveTooltip = (
+  event: google.maps.KmlMouseEvent, 
+  map: google.maps.Map,
+  offset = { x: 10, y: 10 }
+): void => {
+  if (tooltipElement && event.latLng) {
+    const overlay = new google.maps.OverlayView();
+    overlay.setMap(map);
+    overlay.draw = () => {};
+    
+    const point = overlay.getProjection().fromLatLngToDivPixel(event.latLng);
+    if (point) {
+      tooltipElement!.style.top = `${point.y + offset.y}px`;
+      tooltipElement!.style.left = `${point.x + offset.x}px`;
+    }
+  }
+};
+
+export const hideTooltip = (): void => {
+  if (tooltipElement) {
+    document.body.removeChild(tooltipElement);
+    tooltipElement = null;
+  }
+};

package/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "ES5",
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noFallthroughCasesInSwitch": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx"
+  },
+  "include": ["src"]
+}