mapping-component-package-jp 0.0.2

package/src/js/mapEncapsulation/mapOverlayManager.js

@@ -0,0 +1,2753 @@
+import { diffLatLng2Meters, formatBlockLabel, get_FillColorOpacity, get_FillColor } from './map.common';
+import { ClearHTML } from '../../utils/mapUtils';
+import { circleToPolygon } from './circle.functions';
+import { IQLPolygonCustomEdit } from './shapes/polygon.customedit';
+import { IQLFieldGeoLocation } from './field.geolocation';
+import polylabel from 'polylabel';
+import polyline from '@mapbox/polyline';
+import { IQLCircleFull } from './shapes/circle.full';
+import { IQLCircleSector } from './shapes/circle.sector';
+import { IQLCircleSegment } from './shapes/circle.segment';
+import { createSvgIcon } from '../../utils/iconUtils';
+import { FieldValidator } from '../fieldEncapsulation/iql.fieldvalidator';
+
+
+
+export class MapOverlayManager {
+    constructor(mapInstance) {
+
+    // #region Private variables
+    var _this = this;
+    var map = mapInstance;
+    var mapId = null;
+    var bounds = null;
+
+    // listeners
+    var zoomChangedListener = null;
+    var polygonListeners = [];
+    var markerListeners = [];
+    var mapListeners = [];
+
+    // event handlers
+    var eventHandlers = {};
+
+    // global variables
+    var locPolygons = [];
+	var allPoints = []; 
+    var polygons = [];
+    var polyLabels = [];
+    var fpolies = [];
+	var controlMarkers = [];
+	var pointMarkers = [];
+	var rmarker = null;
+	var pmarker = null;
+	var dirmarkers = [];
+	var dpolylines = [];
+	var rpolylines = [];
+	var fmarkers = [];
+
+	var currentPolylineCustomEdit = null;
+	var currentPolygonCustomEdit = null;
+    var currentCircleFull = null;
+    var currentCircleSector = null;
+    var currentCircleSegment = null;
+	
+    var diffLat, diffLng, wdppx, hdppx, hlat, hlng;
+
+    // Tooltip
+    var tipObj = null;
+    var ttOffset = { x: 20, y: 20 };
+
+    // Add new array for background fields
+    var backgroundFields = [];
+
+    function polygonsToMap_set() {
+        polygons.forEach(function (p, index) {
+            p.setMap(map);
+        });
+
+        locPolygons.forEach(function (lp, index) {
+            lp.setMap(map);
+        });
+
+        if (map.getZoom() >= 13) {
+            polyLabels.forEach(function (pl, index) {
+                pl.setMap(map);
+            });
+        } else {
+            polyLabels.forEach(function (pl, index) {
+                pl.setMap(null);
+            });
+        }
+
+        zoomChangedListener = google.maps.event.addListener(map, 'zoom_changed', function () {
+			
+            if (map.getZoom() >= 13) {
+                polyLabels.forEach(function (pl, index) {
+                    pl.setMap(map);
+                });
+            } else {
+                polyLabels.forEach(function (pl, index) {
+                    pl.setMap(null);
+                });
+            }
+        });
+
+        mapListeners.push(zoomChangedListener);
+    }
+
+    function AddLabel(location, labelColour = "white") {
+        var polyCentroidCenter = get_polygon_centroid(location.Poly);
+        var labelLat = polyCentroidCenter.y;
+        var labelLon = polyCentroidCenter.x;
+        var areaText = `${location.Area} ha`;
+        var bl = formatBlockLabel(location.Id, location.LocationName, areaText, 8);
+
+        var svgText = `<svg viewBox="0 0 200 30" xmlns="http://www.w3.org/2000/svg">
+                        <text x="0" y="12" fill="${labelColour}" font-family="Arial, sans-serif" font-size="8px">${ClearHTML.clearString(location.LocationName)}</text>
+                        <line x1="0" y1="15" x2="${Math.max(bl.nameWidth, bl.areaWidth)}" y2="15" style="stroke:${labelColour};stroke-width:0.6"/>
+                        <text x="0" y="24" fill="${labelColour}" font-family="Arial, sans-serif" font-size="8px">${areaText}</text>
+                        </svg>`;
+
+        var polyLabel = new google.maps.Marker({
+            map: map,
+            position: new google.maps.LatLng(parseFloat(labelLat), parseFloat(labelLon)),
+            icon: {
+                anchor: new google.maps.Point(1.3 * bl.nameWidth / 2, 21),
+                url: `data:image/svg+xml;utf-8, ${svgText}`
+            },
+            id: `pl_${location.Id}`
+        });
+        polyLabels.push(polyLabel);
+    }
+
+    function get_polygon_centroid(points) {
+        var centroid = polylabel(points, 0.00001);
+        return { x: centroid[0], y: centroid[1] };
+    }
+
+    function fields_BindPolyEvents() {
+        deleteTooltip();
+
+        polygons.forEach(function (poly) {
+            polygonListeners.push(google.maps.event.addListener(poly, 'mouseover', function (event) {
+                deleteTooltip();
+                injectTooltip(event, poly.content);
+            }));
+            polygonListeners.push(google.maps.event.addListener(poly, 'mousemove', moveTooltip));
+            polygonListeners.push(google.maps.event.addListener(poly, 'mouseout', deleteTooltip));
+            polygonListeners.push(google.maps.event.addListener(poly, 'click', function (event) {
+                deleteTooltip();
+                eventHandlers["FieldOnClick"](this.id);
+            }));
+        });
+    }
+
+    function farms_BindMarkerEvents() {
+        deleteTooltip();
+        fmarkers.forEach(function (marker) {
+            var ttc = marker.id.split('|');
+            markerListeners.push(marker.content.addEventListener('mouseover', function(event) {
+                deleteTooltip();
+                injectMarkerTooltip(event, ttc[1]+'<br>Farm '+ttc[2]);
+            }));
+            markerListeners.push(marker.content.addEventListener('mousemove', moveMarkerTooltip));
+            markerListeners.push(marker.content.addEventListener('mouseout', deleteTooltip));
+        });
+    }
+
+    function regions_BindPolyEvents() {
+        deleteTooltip();
+    
+        fpolies.forEach(function (poly) {
+            if (poly instanceof google.maps.Polygon) {
+                polygonListeners.push(google.maps.event.addListener(poly, 'mouseover', function (event) {
+                    deleteTooltip();
+                    injectTooltip(event, poly.get('content'));
+                }));
+                polygonListeners.push(google.maps.event.addListener(poly, 'mousemove', moveTooltip));
+                polygonListeners.push(google.maps.event.addListener(poly, 'mouseout', deleteTooltip));
+                polygonListeners.push(google.maps.event.addListener(poly, 'click', function (event) {
+                    deleteTooltip();
+                }));
+            } else {
+                console.warn('Invalid polygon object found in fpolies array:', poly);
+            }
+        });
+    }
+
+    function injectTooltip(event, data) {
+        if (!tipObj && event) {
+            tipObj = document.createElement("div");
+            tipObj.style.cssText = "background: rgba(0, 0, 0, 0.5); color: #ffffff; border-radius: 4px; padding: 5px 10px; text-align: left; font-size: 12px; position: fixed;";
+            tipObj.innerHTML = data;
+            tipObj.style.top = event.domEvent.clientY + window.scrollY + ttOffset.y + "px";
+            tipObj.style.left = event.domEvent.clientX + window.scrollX + ttOffset.x + "px";
+            document.body.appendChild(tipObj);
+        }
+    }
+
+    function injectMarkerTooltip(event, data) {
+        if (!tipObj && event) {
+            tipObj = document.createElement("div");
+            tipObj.style.cssText = "background: rgba(0, 0, 0, 0.5); color: #ffffff; border-radius: 4px; padding: 5px 10px; text-align: left; font-size: 12px; position: fixed;";
+            tipObj.innerHTML = data;
+            tipObj.style.top = event.clientY + window.scrollY + ttOffset.y + "px";
+            tipObj.style.left = event.clientX + window.scrollX + ttOffset.x + "px";
+            document.body.appendChild(tipObj);
+        }
+    }
+
+    function moveTooltip(event) {
+        if (tipObj && event) {
+            tipObj.style.top = event.domEvent.clientY + window.scrollY + ttOffset.y + "px";
+            tipObj.style.left = event.domEvent.clientX + window.scrollX + ttOffset.x + "px";
+        }
+    }
+    
+    function moveMarkerTooltip(event) {
+        if (tipObj && event) {
+            tipObj.style.top = event.clientY + window.scrollY + ttOffset.y + "px";
+            tipObj.style.left = event.clientX + window.scrollX + ttOffset.x + "px";
+        }
+    }
+
+    function deleteTooltip() {
+        if (tipObj) {
+            document.body.removeChild(tipObj);
+            tipObj = null;
+        }
+    }
+
+    function AdvancedMarker(locations, icon, markerType = 'field') {
+        if (map.getMapCapabilities().isAdvancedMarkersAvailable && locations && locations.length > 0) {
+            var mapBounds = new google.maps.LatLngBounds();
+            locations.forEach(function(v) {
+                var fmarker;
+                var bounds = new google.maps.LatLngBounds();
+   
+                if (markerType === 'farm') {
+                    bounds.extend(new google.maps.LatLng(v.minLat, v.minLng));
+                    bounds.extend(new google.maps.LatLng(v.maxLat, v.maxLng));
+                } else {
+                    v.Poly[0].forEach(function(c) {
+                        bounds.extend(new google.maps.LatLng(parseFloat(c[1]), parseFloat(c[0])));
+                    });
+                }
+               
+                mapBounds.extend(bounds.getCenter());
+   
+                var svgicon = createSvgIcon({
+                    iconName: icon.name,
+                    fillColor: icon.style.color,
+                    width: icon.style.width,
+                    height: icon.style.height,
+                    strokeColor: icon.style.strokeColor,
+                    strokeWidth: icon.style.strokeWidth
+                });
+   
+                fmarker = new google.maps.marker.AdvancedMarkerElement({
+                    map: map,
+                    position: bounds.getCenter(),
+                    content: svgicon
+                });    
+                
+                //we actually don't need this part when passing data as below
+                const markerId = markerType === 'farm' 
+                    ? `${v.farmId}|${v.farmOrganization}|${v.farmName}`
+                    : `${v.Id}|${v.OrganisationName}|${v.FarmName}`;
+               
+                fmarker.setAttribute("id", markerId);
+               
+                if (markerType === 'farm') {
+                    markerListeners.push(fmarker.addListener("click", () => {
+                        deleteTooltip();
+                        eventHandlers["AdvancedMarkerOnClick"]({
+                            type: 'SUCCESS',
+                            message: 'farm marker with id ' + fmarker.id + ' clicked',
+                            code: 200,
+                            data: v
+                        });
+                    }));
+                } else {
+                    markerListeners.push(fmarker.addListener("click", () => {
+                        deleteTooltip();
+                        eventHandlers["AdvancedMarkerOnClick"]({
+                            type: 'SUCCESS',
+                            message: 'field marker with id ' + fmarker.id + ' clicked',
+                            code: 200,
+                            data: v
+                        });
+                    }));
+                }
+               
+                fmarkers.push(fmarker);
+            });
+   
+            if (markerType === 'farm') {
+                map.fitBounds(mapBounds);
+                farms_BindMarkerEvents();
+            }
+        }
+    }
+        
+    _this.eventHandlers_set = function (eH) {
+        Object.assign(eventHandlers, eH);
+    };
+
+    _this.eventHandlers_get = function () {
+        return eventHandlers;
+    }; 
+
+    //#DRAW/DISPLAY FIELDS
+    _this.RenderFields = function (locations, properties) {
+        var mbounds = new google.maps.LatLngBounds();
+
+        locations.forEach(function (location) {
+            if (location && location.Poly && location.Poly.length > 0 && location.Id.length > 0) {
+                var paths = location.Poly.map(poly => poly.map(v => new google.maps.LatLng(parseFloat(v[1]), parseFloat(v[0]))));
+                paths[0].forEach(coord => mbounds.extend(coord));
+
+                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, "/")}`;
+                    }
+                }
+                
+                var polygonOptions = {
+                    paths: paths,
+                    id: location.Id,
+                    content: content
+                }
+
+                if (location.MapLocationFeature) {
+                    polygonOptions = {
+                        ...polygonOptions,
+                        content,
+                        strokeColor: location.MapLocationFeature.StrokeColor,
+                        strokeOpacity: location.MapLocationFeature.StrokeOpacity,
+                        strokeWeight: location.MapLocationFeature.StrokeWeight,
+                        fillColor: location.MapLocationFeature.FillColor,
+                        fillOpacity: location.MapLocationFeature.FillOpacity,
+                        zIndex: location.MapLocationFeature.ZIndex
+                    };
+                }
+                else
+                {
+                    polygonOptions = {
+                        ...polygonOptions,
+                        ...properties.polygonOptions.unselected,
+                    };
+                }
+
+                var polygon = new google.maps.Polygon(polygonOptions);
+                polygons.push(polygon);
+                if (properties.labelVisable) AddLabel(location);
+            }
+        });
+
+        map.fitBounds(mbounds);
+        fields_BindPolyEvents();
+        
+        if(properties.icon){
+            AdvancedMarker(locations, properties.icon);
+        }
+
+        polygonsToMap_set();
+    };
+
+    _this.destroy = function () {
+        mapId = null;
+        mapConfig = null;
+        locations = [];
+        selectedProvinceFieldId = null;
+
+        defaultCenterLatitude = null;
+        defaultCenterLongitude = null;
+
+        locPolygons = [];
+        polygons = [];
+        polyLabels = [];
+
+        _this.map_clear();
+    }
+
+    _this.map_clear = function () {
+        // Clear all event listeners
+        polygonListeners_clear();
+        markerListeners_clear();
+        mapListeners_clear();
+
+        // Clear all markers and controls
+        pointMarkers_clear();
+        controlMarkers_clear();
+        fmarkers_clear();
+        rmarker_clear();
+        pmarker_clear();
+        dirmarkers_clear();
+
+        // Clear all shapes and labels
+        polyLabels_clear();
+        polygons_clear();
+        locPolygons_clear();
+        fPolies_clear();
+        
+        // Clear all lines and custom edits
+        dpolyline_clear(); 
+        polylineCustomEdit_clear();
+
+        // Clear custom shape editors
+        if (currentPolygonCustomEdit) {
+            currentPolygonCustomEdit = new IQLPolygonCustomEdit().delete(map, currentPolygonCustomEdit);
+            currentPolygonCustomEdit = null;
+        }
+        if (currentCircleFull) {
+            currentCircleFull.setMap(null);
+            currentCircleFull = null;
+        }
+        if (currentCircleSector) {
+            currentCircleSector.setMap(null);
+            currentCircleSector = null;
+        }
+        if (currentCircleSegment) {
+            currentCircleSegment.setMap(null);
+            currentCircleSegment = null;
+        }
+
+        // Clear all overlays
+        if (map.overlayMapTypes) {
+            while (map.overlayMapTypes.getLength() > 0) {
+                map.overlayMapTypes.pop();
+            }
+        }
+
+        // Clear any remaining tooltips
+        deleteTooltip();
+
+        // Clear any background fields
+        if (backgroundFields.length > 0) {
+            backgroundFields.forEach(field => {
+                if (field.setMap) {
+                    field.setMap(null);
+                }
+            });
+            backgroundFields = [];
+        }
+
+        // Reset all arrays
+        locPolygons = [];
+        allPoints = [];
+        polygons = [];
+        polyLabels = [];
+        fpolies = [];
+        controlMarkers = [];
+        pointMarkers = [];
+        dirmarkers = [];
+        dpolylines = [];
+        rpolylines = [];
+        fmarkers = [];
+        
+        // Reset bounds
+        bounds = null;
+    }
+
+    //#region Clear events
+
+    function rmarker_clear() {
+        if(rmarker != null) {
+			
+			rmarker.setMap(null);
+			rmarker = null;
+		}
+    }
+
+    function pmarker_clear() {
+        if(pmarker != null) {
+			pmarker.setMap(null);
+			pmarker = null;
+		}	
+    }
+
+    function dirmarkers_clear() {
+		//console.log(dirmarkers);
+		dirmarkers.forEach(function (dm) {
+            dm.setMap(null);
+            dm = null;
+        });
+        dirmarkers = [];
+    }
+
+    function dpolyline_clear() {
+		dpolylines.forEach(function (dp) {
+            dp.setMap(null);
+            dp = null;
+        });
+    }
+
+    function pointMarkers_clear() {
+		pointMarkers.forEach(function (pm) {
+            pm.setMap(null);
+            pm = null;
+        });
+        pointMarkers = [];
+    }
+
+    function controlMarkers_clear() {
+		controlMarkers.forEach(function (cm) {
+            cm.setMap(null);
+            cm = null;
+        });
+        controlMarkers = [];
+    }
+
+    function fmarkers_clear() {
+		fmarkers.forEach(function (fm) {
+            fm.setMap(null);
+            fm = null;
+        });
+        fmarkers = [];
+    }
+
+    function polygonListeners_clear() {
+        polygonListeners.forEach(function (polygonListener) {
+            google.maps.event.removeListener(polygonListener);
+        });
+        polygonListeners = [];
+    }
+
+    function markerListeners_clear() {
+        markerListeners.forEach(function (markerListener) {
+            google.maps.event.removeListener(markerListener);
+        });
+        markerListeners = [];
+    }
+
+    function mapListeners_clear() {
+        mapListeners.forEach(function (mapListener) {
+            google.maps.event.removeListener(mapListener);
+        });
+        mapListeners = [];
+    }
+
+    function polyLabels_clear() {
+		polyLabels.forEach(function (pl) {
+            pl.setMap(null);
+            pl = null;
+        });
+        polyLabels = [];
+    }
+
+    function polygons_clear() {
+        polygons.forEach(function (p) {
+            p.setMap(null);
+            p = null;
+        });
+        polygons = [];
+    }
+	
+    function locPolygons_clear() {
+		if (currentPolygonCustomEdit != null) {
+			currentPolygonCustomEdit = new IQLPolygonCustomEdit().delete(map, currentPolygonCustomEdit);	
+		}
+
+        locPolygons.forEach(function (lp) {
+            lp.setMap(null);
+            lp = null;
+        });
+        locPolygons = [];
+    }
+
+    function polylineCustomEdit_clear() {
+		if (currentPolylineCustomEdit != null) {
+			currentPolylineCustomEdit = new IQLPolygonCustomEdit().delete(map, currentPolylineCustomEdit);	
+		}
+        rpolylines.forEach(function(rp) {
+			rp.setMap(null);
+			rp = null;	
+		});
+    }
+
+    function fPolies_clear() {
+        fpolies.forEach(function (p, index) {
+            p.setMap(null);
+            p = null;
+        });
+        fpolies = [];
+    }
+    
+	// #endregion
+    
+    _this.selectShape = function(shapeId, selectedStyle, unselectedStyle) {
+        console.log('Selecting shape:', shapeId);
+        console.log('Current locPolygons:', locPolygons);
+
+        locPolygons.forEach(function(polygon) {
+            if (polygon) {
+                console.log('Applying unselected style to polygon:', polygon.id);
+                
+                if (currentPolygonCustomEdit != null && polygon.isPolygon) {
+                    currentPolygonCustomEdit = new IQLPolygonCustomEdit().delete(map, currentPolygonCustomEdit);
+                    currentPolygonCustomEdit = null;
+                    polygon.setMap(map);
+                }
+                if (currentCircleFull != null && polygon.isCircle) {
+                    currentCircleFull.set('map', null);
+                    currentCircleFull = null;
+                }
+                if (currentCircleSector != null && polygon.isCircleSector) {
+                    currentCircleSector.set('map', null);
+                    currentCircleSector = null;
+                }
+                if (currentCircleSegment != null && polygon.isCircleSegment) {
+                    currentCircleSegment.set('map', null);
+                    currentCircleSegment = null;
+                }
+
+                polygon.setOptions({
+                    ...unselectedStyle,
+                    editable: false,
+                    draggable: false
+                });
+            }
+        });
+
+        if (shapeId) {
+            const selectedShape = locPolygons.find(p => p.id == shapeId);
+            if (selectedShape) {
+                console.log('Applying selected style to shape:', shapeId);
+                selectedShape.setOptions(selectedStyle);
+            } else {
+                console.warn('Shape not found in locPolygons:', shapeId);
+            }
+        }
+    };
+
+    // Add this helper function to check if a shape is in locPolygons
+    _this.isShapeInLocPolygons = function(shapeId) {
+        return locPolygons.some(p => p.id == shapeId);
+    };
+
+    _this.panAndZoomToShape = function(shapeId) {
+        let shape = locPolygons.find(p => p.id == shapeId) || polygons.find(p => p.id == shapeId);
+        console.log("locPolygons - panAndZoomToShape", locPolygons);
+    
+        if (shape && map) {
+            const bounds = new google.maps.LatLngBounds();
+    
+            if (shape.getPath) {
+                shape.getPath().forEach(latLng => bounds.extend(latLng));
+            } else if (shape.getCenter && shape.getRadius) {
+                const center = shape.getCenter();
+                const radius = shape.getRadius();
+                bounds.extend(google.maps.geometry.spherical.computeOffset(center, radius, 0));
+                bounds.extend(google.maps.geometry.spherical.computeOffset(center, radius, 180));
+            } else if (shape.getBounds) {
+                bounds.union(shape.getBounds());
+            }
+    
+            const currentZoom = map.getZoom();
+    
+            map.fitBounds(bounds, { padding: 50 });
+    
+            google.maps.event.addListenerOnce(map, 'bounds_changed', function() {
+                const newZoom = map.getZoom();
+    
+                if (Math.abs(newZoom - currentZoom) > 3) {
+                    map.setZoom(Math.min(newZoom, 18));
+                }
+            });
+        } else {
+            console.error('Shape not found:', shapeId);
+        }
+    };
+
+    _this.Shape_Edit = function (ShapeId) {
+        locPolygons.forEach((polygon_selected, index) => {
+            if (polygon_selected.id === ShapeId) {
+				polygon_selected.setEditable(true);
+                if (index > 0) {
+                    polygon_selected.setDraggable(true);
+				}	
+            }
+        });
+    }
+
+    _this.Shape_DrawingDone = function (ShapeId) {
+        locPolygons.forEach(function (polygon) {
+            if (polygon.id == ShapeId) {
+				if (polygon.isPolygon) {
+					if(currentPolygonCustomEdit != null) {
+						var path = currentPolygonCustomEdit.getPath();
+						polygon.setPath(path);
+						currentPolygonCustomEdit = new IQLPolygonCustomEdit().delete(map, currentPolygonCustomEdit);
+						currentPolygonCustomEdit = null;
+					}
+					polygon.setMap(map);
+					polygon.setEditable(false);
+                    polygon.setDraggable(false);
+                    polygon.setVisible(true);
+				} else if (polygon.isCircle) {
+					var reducedPath = new IQLCircleFull().reduce(currentCircleFull.getPath(), polygon.isHole);
+					polygon.setPath(reducedPath);
+                    polygon.isPolygon = false;
+                    polygon.isCircle = true;
+                    polygon.setEditable(false);
+                    polygon.setDraggable(false);
+                    currentCircleFull.setMap(null);
+                    currentCircleFull = null;
+                    polygon.setVisible(true);
+				} else if (polygon.isCircleSector) {
+                    var reducedPath = new IQLCircleSector().reduce(currentCircleSector.getPath(), polygon.isHole);
+                    polygon.setPath(reducedPath);
+                    polygon.isPolygon = false;
+                    polygon.isCircleSector = true;
+                    polygon.setEditable(false);
+                    polygon.setDraggable(false);
+                    currentCircleSector.setMap(null);
+                    currentCircleSector = null;
+                    polygon.setVisible(true);
+                } else if (polygon.isCircleSegment) {
+                    var reducedPath = new IQLCircleSegment().reduce(currentCircleSegment.getPath(), polygon.isHole);
+                    polygon.setPath(reducedPath);
+                    polygon.isPolygon = false;
+                    polygon.isCircleSegment = true;
+                    polygon.setEditable(false);
+                    polygon.setDraggable(false);
+                    currentCircleSegment.setMap(null);
+                    currentCircleSegment = null;
+                    polygon.setVisible(true);
+                }
+            }
+        });
+
+    }
+
+    _this.Shape_Delete = function (ShapeId, EventHandlers) {
+
+        const currentBounds = map.getBounds();
+        const currentCenter = map.getCenter();
+        const currentZoom = map.getZoom();
+
+        polygonListeners_clear();
+        this.eventHandlers_set(EventHandlers);
+
+        // Check if we're deleting the main shape (first shape)
+        const isMainShape = locPolygons.length > 0 && locPolygons[0].id == ShapeId;
+
+        if (isMainShape) {
+            // Delete all shapes if main shape is being deleted
+            _this.Shape_DeleteAll();
+            return;
+        }
+
+        // Otherwise, proceed with deleting just the selected shape
+        var pIndex = -1;
+        locPolygons.forEach(function (p, index) {
+            if (p.id == ShapeId) {
+                if (currentPolygonCustomEdit != null) {
+                    currentPolygonCustomEdit = new IQLPolygonCustomEdit().delete(map, currentPolygonCustomEdit);    
+                    currentPolygonCustomEdit = null;
+                }
+
+                if (currentCircleFull != null) {
+                    currentCircleFull.set('map', null);
+                    currentCircleFull = null;
+                }
+
+                if (currentCircleSector != null) {
+                    currentCircleSector.set('map', null);
+                    currentCircleSector = null;
+                }
+                if (currentCircleSegment != null) {
+                    currentCircleSegment.set('map', null);
+                    currentCircleSegment = null;
+                }
+
+                p.setMap(null);
+                pIndex = index;
+            }
+        });
+
+        if (pIndex >= 0) {
+            locPolygons.splice(pIndex, 1);
+        }
+
+       if (currentCenter && currentBounds) {
+            map.setZoom(currentZoom);
+            map.setCenter(currentCenter);
+            map.fitBounds(currentBounds);
+        }
+    };
+
+    _this.Shape_DeleteAll = function (isMobile) {
+        const currentBounds = map.getBounds();
+        const currentCenter = map.getCenter();
+        const currentZoom = map.getZoom();
+        polygonListeners_clear();
+
+        locPolygons.forEach(function (lp) {
+            if (currentPolygonCustomEdit != null) {
+				currentPolygonCustomEdit = new IQLPolygonCustomEdit().delete(map, currentPolygonCustomEdit);	
+				//console.log(currentPolygonCustomEdit);
+				currentPolygonCustomEdit = null;
+			}	
+            if (currentCircleFull != null) {
+                currentCircleFull.set('map', null);
+                currentCircleFull = null;
+            }
+            if (currentCircleSector != null) {
+                currentCircleSector.set('map', null);
+                currentCircleSector = null;
+            }
+            if (currentCircleSegment != null) {
+                currentCircleSegment.set('map', null);
+                currentCircleSegment = null;
+            }
+            lp.setMap(null);
+            lp = null;
+        });
+        locPolygons = [];
+
+        if (currentCenter && currentBounds) {
+            map.setZoom(currentZoom);
+            map.setCenter(currentCenter);
+            map.fitBounds(currentBounds);
+        }
+    }
+
+        //#POLYGON
+        
+        _this.Shape_PolygonCustomEdit_Add = function (isHole, config, isMobile, mapWidth, mapHeight, vmWidth, offsetX, offsetY) {
+
+            if (!isHole) {
+
+                var mapBounds = map.getBounds();
+                var mapCenter = map.getCenter();
+                var mcLat = mapCenter.lat();
+                var mcLng = mapCenter.lng();
+            
+                var path = [];
+            
+                if (mapBounds) {
+                    diffLat = Math.abs(mapBounds.getSouthWest().lat() - mapBounds.getNorthEast().lat());
+                    diffLng = Math.abs(mapBounds.getNorthEast().lng() - mapBounds.getSouthWest().lng());
+                    wdppx = diffLng/mapWidth;		
+                    hdppx = diffLat/mapHeight;
+
+                    path.push(new google.maps.LatLng(mcLat + offsetY*hdppx + 60*hdppx, mcLng + offsetX*wdppx - 80*wdppx));//nw
+                    path.push(new google.maps.LatLng(mcLat + offsetY*hdppx + 60*hdppx, mcLng + offsetX*wdppx + 80*wdppx));//ne
+                    path.push(new google.maps.LatLng(mcLat + offsetY*hdppx - 60*hdppx, mcLng + offsetX*wdppx + 80*wdppx));//se
+                    path.push(new google.maps.LatLng(mcLat + offsetY*hdppx - 60*hdppx, mcLng + offsetX*wdppx - 80*wdppx));//sw
+                }	
+
+                var pid = Date.now() + Math.floor(Math.random() * 100000);
+
+                var shape = new google.maps.Polygon({
+                    map: map,
+                    path: path,
+                    id: pid.toString(),
+                    content: "",
+                    strokeColor: config.strokeColor,
+                    strokeOpacity: config.strokeOpacity,
+                    strokeWeight: config.strokeWeight,
+                    fillColor: config.fillColor,
+                    fillOpacity: config.fillOpacity,
+                    zIndex: 10100,
+                    clickable: true,
+                    editable: false,
+                    draggable: false,
+                    isPolygon: true,
+                    isCircle: false,
+                    isCircleSector: false,
+                    isCircleSegment: false,
+                    isHole: false,
+                    latitude: 0,
+                    longitude: 0,
+                    poly: 0,
+                    area: 0,
+                    perimeter: 0
+                });
+
+                locPolygons.push(shape);
+
+                currentPolygonCustomEdit = new IQLPolygonCustomEdit().edit(map, shape, currentPolygonCustomEdit, isMobile);
+
+                return pid;
+
+            } else {
+
+                var holeId = addPolygonHole(config, mapWidth, mapHeight, offsetX, offsetY, vmWidth, isMobile);	
+
+                return holeId;	
+
+            }	
+        }
+
+
+        _this.Shape_Polygon_Add = function (isHole, config, isMobile, mapWidth, mapHeight, vmWidth, offsetX, offsetY) {
+
+            if(!isHole) { 
+    
+                var mapBounds = map.getBounds();
+                var mapCenter = map.getCenter();
+                var mcLat = mapCenter.lat();
+                var mcLng = mapCenter.lng();
+            
+                var path = [];
+                var points = [];
+                if (mapBounds) {
+                    diffLat = Math.abs(mapBounds.getSouthWest().lat() - mapBounds.getNorthEast().lat());
+                    diffLng = Math.abs(mapBounds.getNorthEast().lng() - mapBounds.getSouthWest().lng());
+                    wdppx = diffLng/mapWidth;		
+                    hdppx = diffLat/mapHeight;
+    
+                    path.push(new google.maps.LatLng(mcLat + offsetY*hdppx + 60*hdppx, mcLng + offsetX*wdppx - 80*wdppx));//nw
+                    path.push(new google.maps.LatLng(mcLat + offsetY*hdppx + 60*hdppx, mcLng + offsetX*wdppx + 80*wdppx));//ne
+                    path.push(new google.maps.LatLng(mcLat + offsetY*hdppx - 60*hdppx, mcLng + offsetX*wdppx + 80*wdppx));//se
+                    path.push(new google.maps.LatLng(mcLat + offsetY*hdppx - 60*hdppx, mcLng + offsetX*wdppx - 80*wdppx));//sw
+                    
+                    points.push([mcLng + offsetX*wdppx - 80*wdppx, mcLat + offsetY*hdppx + 60*hdppx]);
+                    points.push([mcLng + offsetX*wdppx + 80*wdppx, mcLat + offsetY*hdppx + 60*hdppx]);
+                    points.push([mcLng + offsetX*wdppx + 80*wdppx, mcLat + offsetY*hdppx - 60*hdppx]);
+                    points.push([mcLng + offsetX*wdppx - 80*wdppx, mcLat + offsetY*hdppx - 60*hdppx]);
+                    points.push([mcLng + offsetX*wdppx - 80*wdppx, mcLat + offsetY*hdppx + 60*hdppx]);
+                    
+                    allPoints.push(points);
+    
+                }	
+    
+                var pid = Date.now() + Math.floor(Math.random() * 100000);
+    
+                var shape = new google.maps.Polygon({
+                    map: map,
+                    path: path,
+                    id: pid.toString(),
+                    content: "",
+                    strokeColor: config.strokeColor,
+                    strokeOpacity: config.strokeOpacity,
+                    strokeWeight: config.strokeWeight,
+                    fillColor: config.fillColor,
+                    fillOpacity: config.fillOpacity,
+                    zIndex: 10100,
+                    clickable: true,
+                    editable: true,
+                    draggable: true,
+                    isPolygon: true,
+                    isCircle: false,
+                    isCircleSector: false,
+                    isCircleSegment: false,
+                    isHole: isHole,
+                    latitude: 0,
+                    longitude: 0,
+                    poly: 0,
+                    area: 0,
+                    perimeter: 0
+                });
+                console.log('shape', shape);
+    
+                locPolygons.push(shape);
+                return pid;
+            
+            } else {
+    
+                var holeId = addPolygonHole(config, mapWidth, mapHeight, offsetX, offsetY, vmWidth, isMobile);	
+    
+                return holeId;	
+            }
+    
+        }
+
+        function addPolygonHole(config, mapWidth, mapHeight, offsetX, offsetY, vmWidth, isMobile) {
+		
+            var nhid;
+                
+            if(typeof wdppx == 'undefined' || typeof hdppx == 'undefined') {
+                var mapBounds = map.getBounds();
+            
+                if (mapBounds) {
+                    diffLat = Math.abs(mapBounds.getSouthWest().lat() - mapBounds.getNorthEast().lat());
+                    diffLng = Math.abs(mapBounds.getNorthEast().lng() - mapBounds.getSouthWest().lng());
+                    wdppx = diffLng/mapWidth;		
+                    hdppx = diffLat/mapHeight;
+                }
+            }
+            
+            allPoints = [];
+            locPolygons.forEach(function(lp) {		
+                var sPath = lp.getPath();
+                var points = [];
+                for(var c = 0; c < sPath.length; c++) {
+                    points.push([sPath.getAt(c).lng(), sPath.getAt(c).lat()]);
+                }
+                if(sPath.getAt(0).lng() != sPath.getAt(sPath.length-1).lng() || sPath.getAt(0).lat() != sPath.getAt(sPath.length-1).lat()) {
+                    points.push([sPath.getAt(0).lng(), sPath.getAt(0).lat()]);
+                }	
+                allPoints.push(points);
+            });	
+            
+            var polyCentroidCenter = get_polygon_centroid(allPoints);
+                
+            hlat = polyCentroidCenter.y;
+            hlng = polyCentroidCenter.x;
+    
+            for(var i= 20; i > 0;i--) {
+    
+                var hps = [];
+                hps.push([hlng - 2*i*wdppx, hlat + 0.75*2*i*hdppx]);
+                hps.push([hlng + 2*i*wdppx, hlat + 0.75*2*i*hdppx]);
+                hps.push([hlng + 2*i*wdppx, hlat - 0.75*2*i*hdppx]);
+                hps.push([hlng - 2*i*wdppx, hlat - 0.75*2*i*hdppx]);
+                hps.push([hlng - 2*i*wdppx, hlat + 0.75*2*i*hdppx]);
+                allPoints.push(hps);
+    
+                var notInsideCount = 0;
+                hps.forEach(function(pt,ptIndex) {
+                    if (!google.maps.geometry.poly.containsLocation(new google.maps.LatLng(parseFloat(pt[1]), parseFloat(pt[0])), locPolygons[0])) {
+                        notInsideCount++;
+                    }
+                });
+    
+                if (notInsideCount == 0) {
+    
+                    if(allPoints.length > 2) {
+                        var holeIntersectCount = 0;
+                        for (var n = 1; n < allPoints.length - 1; n++) {
+                            for (var m = n + 1; m < allPoints.length; m++) {
+                                if (calcIntersection(allPoints[n], allPoints[m])) {
+                                    holeIntersectCount++;
+                                }
+                            }
+                        }
+                    
+                        if(holeIntersectCount == 0) {
+                            nhid = drawPolygonHole(i, config, offsetX, offsetY, vmWidth, isMobile);
+                            break;
+                        } else {
+                            allPoints.pop();
+                        }	
+                    } else {
+                        nhid = drawPolygonHole(i, config, offsetX, offsetY, vmWidth, isMobile);
+                        break;
+                    }
+                } else { 
+                    allPoints.pop();
+                }
+            }
+    
+            return nhid;
+    
+        }	
+
+        function calcIntersection(poly1Points, poly2Points) {
+            const polygon1 = new google.maps.Polygon({
+                paths: poly1Points.map(p => new google.maps.LatLng(p[1], p[0]))
+            });
+            const polygon2 = new google.maps.Polygon({
+                paths: poly2Points.map(p => new google.maps.LatLng(p[1], p[0]))
+            });
+        
+            for (let i = 0; i < poly2Points.length; i++) {
+                const point = new google.maps.LatLng(poly2Points[i][1], poly2Points[i][0]);
+                if (google.maps.geometry.poly.containsLocation(point, polygon1)) {
+                    return true;
+                }
+            }
+        
+            for (let i = 0; i < poly1Points.length; i++) {
+                const point = new google.maps.LatLng(poly1Points[i][1], poly1Points[i][0]);
+                if (google.maps.geometry.poly.containsLocation(point, polygon2)) {
+                    return true;
+                }
+            }
+        
+            return false;
+        }
+
+        function drawPolygonHole(i, config, offsetX, offsetY, vmWidth, isMobile) {
+		
+            var path = [];
+            
+            path.push(new google.maps.LatLng(hlat + 0.75*2*i*hdppx, hlng - 2*i*wdppx));
+            path.push(new google.maps.LatLng(hlat + 0.75*2*i*hdppx, hlng + 2*i*wdppx));
+            path.push(new google.maps.LatLng(hlat - 0.75*2*i*hdppx, hlng + 2*i*wdppx));
+            path.push(new google.maps.LatLng(hlat - 0.75*2*i*hdppx, hlng - 2*i*wdppx));
+    
+            path.reverse();
+    
+            var pid = Date.now() + Math.floor(Math.random() * 100000);
+    
+            var shape = new google.maps.Polygon({
+                //map: map,
+                path: path,
+                id: pid.toString(),
+                content: "",
+                strokeColor: config.strokeColor,
+                strokeOpacity: config.strokeOpacity,
+                strokeWeight: config.strokeWeight,
+                fillColor: config.fillColor,
+                fillOpacity: config.fillOpacity,
+                zIndex: 10200,
+                clickable: true,
+                editable: false,
+                draggable: false,
+                isPolygon: true,
+                isCircle: false,
+                isCircleSector: false,
+                isCircleSegment: false,
+                isHole: true,
+                latitude: 0,
+                longitude: 0,
+                poly: 0,
+                area: 0,
+                perimeter: 0
+            });
+    
+            locPolygons.push(shape);
+    
+            var osBounds = new google.maps.LatLngBounds();
+            var osPath = locPolygons[0].getPath();
+            osPath.forEach(function(c,index) {
+                osBounds.extend(c);
+            });	
+                
+            var mapPanned = false;
+    
+            var boundsChangedListener = google.maps.event.addListener(map, 'bounds_changed', function () {	
+                if(!mapPanned) {
+                    
+                    var psw = map.getProjection().fromLatLngToPoint(osBounds.getSouthWest());
+                    var pne = map.getProjection().fromLatLngToPoint(osBounds.getNorthEast());
+    
+                    var zoom = map.getZoom();
+                    var scale = 1 << zoom;
+    
+                    if((pne.x - psw.x)*scale >= vmWidth) {
+                        map.setZoom(zoom-1);
+                    }
+            
+            
+                    offsetCenter(osBounds.getCenter(), offsetX, offsetY);
+                    mapPanned = !mapPanned;
+                    
+                    currentPolygonCustomEdit = new IQLPolygonCustomEdit().edit(map, shape, currentPolygonCustomEdit, isMobile);
+                }	
+            });
+            mapListeners.push(boundsChangedListener);
+    
+            map.fitBounds(osBounds);
+            
+            return pid;
+    
+        }
+
+        //#CIRCLE ADD
+        _this.Shape_CircleFull_Add = function (isHole, config, isMobile, mapWidth, mapHeight, vmWidth, vmcLat, vmcLng, offsetX, offsetY) {
+
+            if(!isHole) { 
+    
+                var startHeading = 0;
+                var endHeading = 360;
+                var mapBounds = map.getBounds();
+                var mapCenter = map.getCenter();
+                var mcLat = mapCenter.lat();
+                var mcLng = mapCenter.lng();
+            
+                var cfLat = mcLat, cfLng = mcLng;	
+    
+                diffLat = Math.abs(mapBounds.getSouthWest().lat() - mapBounds.getNorthEast().lat());
+                diffLng = Math.abs(mapBounds.getNorthEast().lng() - mapBounds.getSouthWest().lng());
+                wdppx = diffLng/mapWidth;		
+                hdppx = diffLat/mapHeight;
+                
+                var cfLat = mcLat + offsetY*hdppx;
+                var cfLng = mcLng + offsetX*wdppx;
+                
+                var cp = new google.maps.LatLng(cfLat,cfLng);
+                
+                var crLat = cfLat;
+                var crLng = cfLng + 80*wdppx;
+    
+                var rm = diffLatLng2Meters(cfLat, cfLng, crLat, crLng);
+    
+                var shapePath = new IQLCircleFull().get(cfLat, cfLng, rm, startHeading, endHeading);
+    
+                var pid = Date.now() + Math.floor(Math.random() * 100000);
+    
+                var shape = new google.maps.Polygon({
+                    map: map,
+                    path: shapePath,
+                    id: pid.toString(),
+                    content: "",
+                    strokeColor: config.strokeColor,
+                    strokeOpacity: config.strokeOpacity,
+                    strokeWeight: config.strokeWeight,
+                    fillColor: config.fillColor,
+                    fillOpacity: config.fillOpacity,
+                    zIndex: 10100,
+                    clickable: true,
+                    editable: false,
+                    draggable: false,
+                    visible: false,
+                    isPolygon: false,
+                    isCircle: true,
+                    isCircleSector: false,
+                    isCircleSegment: false,
+                    isHole: isHole,
+                    latitude: 0,
+                    longitude: 0,
+                    poly: 0,
+                    area: 0,
+                    perimeter: 0
+                });
+    
+                locPolygons.push(shape);
+                currentCircleFull = new IQLCircleFull();
+                currentCircleFull = currentCircleFull.edit(map, shape, currentCircleFull, cp, rm, isMobile, controlMarkers);
+
+                return pid;
+            } else {
+    
+                var holeId = addCircleFullHole(config, mapWidth, mapHeight, offsetX, offsetY, vmWidth, isMobile, controlMarkers);
+    
+                return holeId;
+            }		
+            
+        }
+
+        _this.Shape_CircleSector_Add = function (isHole, config, isMobile, mapWidth, mapHeight, vmWidth, vmcLat, vmcLng, offsetX, offsetY) {
+		
+            if(!isHole) {
+    
+                var startHeading = 60;
+                var endHeading = 120;
+                var mapBounds = map.getBounds();
+                var mapCenter = map.getCenter();
+                var mcLat = mapCenter.lat();
+                var mcLng = mapCenter.lng();
+            
+                var cfLat = mcLat, cfLng = mcLng;	
+    
+                diffLat = Math.abs(mapBounds.getSouthWest().lat() - mapBounds.getNorthEast().lat());
+                diffLng = Math.abs(mapBounds.getNorthEast().lng() - mapBounds.getSouthWest().lng());
+                wdppx = diffLng/mapWidth;		
+                hdppx = diffLat/mapHeight;
+                
+                var cfLat = mcLat + offsetY*hdppx;
+                var cfLng = mcLng + offsetX*wdppx;
+                
+                var cp = new google.maps.LatLng(cfLat,cfLng);
+                
+                var crLat = cfLat;
+                var crLng = cfLng + 80*wdppx;
+    
+                var rm = diffLatLng2Meters(cfLat, cfLng, crLat, crLng);
+    
+                var shapePath = new IQLCircleSector().get(cfLat, cfLng, rm, startHeading, endHeading); 
+    
+                var pid = Date.now() + Math.floor(Math.random() * 100000);
+    
+                var shape = new google.maps.Polygon({
+                    map: map,
+                    path: shapePath,
+                    id: pid.toString(),
+                    content: "",
+                    strokeColor: config.strokeColor,
+                    strokeOpacity: config.strokeOpacity,
+                    strokeWeight: config.strokeWeight,
+                    fillColor: config.fillColor,
+                    fillOpacity: config.fillOpacity,
+                    zIndex: isHole ? 10200 : 10100,
+                    clickable: true,
+                    editable: false,
+                    draggable: false,
+                    visible: false,
+                    isPolygon: false,
+                    isCircle: false,
+                    isCircleSector: true,
+                    isCircleSegment: false,
+                    isHole: isHole,
+                    latitude: 0,
+                    longitude: 0,
+                    poly: 0,
+                    area: 0,
+                    perimeter: 0
+                });
+    
+                locPolygons.push(shape);
+                currentCircleSector = new IQLCircleSector();
+                currentCircleSector = currentCircleSector.edit(map, shape, currentCircleSector, cp, rm, isMobile, controlMarkers);
+    
+                return pid;
+                
+            } else {
+    
+                var holeId = addCircleSectorHole(config, mapWidth, mapHeight, offsetX, offsetY, vmWidth, isMobile, controlMarkers);
+    
+                return holeId;
+    
+            }		
+        }
+    
+        _this.Shape_CircleSegment_Add = function (isHole, config, isMobile, mapWidth, mapHeight, vmWidth, vmcLat, vmcLng, offsetX, offsetY) {
+		
+            if(!isHole) {
+            
+                var startHeading = 0;
+                var endHeading = 160;
+                var mapBounds = map.getBounds();
+                var mapCenter = map.getCenter();
+                var mcLat = mapCenter.lat();
+                var mcLng = mapCenter.lng();
+            
+                var cfLat = mcLat, cfLng = mcLng;	
+    
+                diffLat = Math.abs(mapBounds.getSouthWest().lat() - mapBounds.getNorthEast().lat());
+                diffLng = Math.abs(mapBounds.getNorthEast().lng() - mapBounds.getSouthWest().lng());
+                wdppx = diffLng/mapWidth;		
+                hdppx = diffLat/mapHeight;
+                
+                var cfLat = mcLat + offsetY*hdppx;
+                var cfLng = mcLng + offsetX*wdppx;
+                
+                var cp = new google.maps.LatLng(cfLat,cfLng);
+                
+                var crLat = cfLat;
+                var crLng = cfLng + 80*wdppx;
+    
+                var rm = diffLatLng2Meters(cfLat, cfLng, crLat, crLng);
+     
+                var shapePath = new IQLCircleSegment().get(cfLat, cfLng, rm, startHeading, endHeading);
+    
+                var pid = Date.now() + Math.floor(Math.random() * 100000);
+    
+                var shape = new google.maps.Polygon({
+                    map: map,
+                    path: shapePath,
+                    id: pid.toString(),
+                    content: "",
+                    strokeColor: config.strokeColor,
+                    strokeOpacity: config.strokeOpacity,
+                    strokeWeight: config.strokeWeight,
+                    fillColor: config.fillColor,
+                    fillOpacity: config.fillOpacity,
+                    zIndex: isHole ? 10200 : 10100,
+                    clickable: true,
+                    editable: false,
+                    draggable: false,
+                    visible: false,
+                    isPolygon: false,
+                    isCircle: false,
+                    isCircleSector: false,
+                    isCircleSegment: true,
+                    isHole: isHole,
+                    latitude: 0,
+                    longitude: 0,
+                    poly: 0,
+                    area: 0,
+                    perimeter: 0
+                });
+    
+                locPolygons.push(shape);
+                currentCircleSegment = new IQLCircleSegment();
+                
+                currentCircleSegment = currentCircleSegment.edit(map, shape, currentCircleSegment, cp, rm, isMobile, controlMarkers);
+            
+                return pid;
+            
+            } else {
+                var holeId = addCircleSegmentHole(config, mapWidth, mapHeight, offsetX, offsetY, vmWidth, isMobile, controlMarkers);
+    
+                return holeId;
+            }		
+        }
+        
+        //#CIRCLE HOLE
+        function addCircleFullHole(config, mapWidth, mapHeight, offsetX, offsetY, vmWidth, isMobile, controlMarkers) {
+		
+            var nhid;
+            
+            if(typeof wdppx == 'undefined' || typeof hdppx == 'undefined') { //this is the case on Select Field or Upload File
+                var mapBounds = map.getBounds();
+            
+                if (mapBounds) {
+                    diffLat = Math.abs(mapBounds.getSouthWest().lat() - mapBounds.getNorthEast().lat());
+                    diffLng = Math.abs(mapBounds.getNorthEast().lng() - mapBounds.getSouthWest().lng());
+                    wdppx = diffLng/mapWidth;		
+                    hdppx = diffLat/mapHeight;
+                }
+            }
+    
+            allPoints = [];
+            locPolygons.forEach(function(lp) {		
+                var sPath = lp.getPath();
+                var points = [];
+                for(var c = 0; c < sPath.length; c++) {
+                    points.push([sPath.getAt(c).lng(), sPath.getAt(c).lat()]);
+                }
+                if(sPath.getAt(0).lng() != sPath.getAt(sPath.length-1).lng() || sPath.getAt(0).lat() != sPath.getAt(sPath.length-1).lat()) {
+                    points.push([sPath.getAt(0).lng(), sPath.getAt(0).lat()]);
+                }	
+                allPoints.push(points);
+            });	
+            
+            var polyCentroidCenter = get_polygon_centroid(allPoints);
+                
+            hlat = polyCentroidCenter.y;
+            hlng = polyCentroidCenter.x;
+    
+            var startHeading = 0;
+            var endHeading = 360;
+    
+            for(var i = 20; i > 0;i--) {
+    
+                var hps = [];
+                
+                var crLat = hlat;
+                var crLng = hlng + 2*i*wdppx;
+                
+                var cp = new google.maps.LatLng(hlat, hlng);
+    
+                var rm = diffLatLng2Meters(hlat, hlng, crLat, crLng);
+    
+                var shapePath = new IQLCircleFull().get(hlat, hlng, rm, startHeading, endHeading);
+    
+                shapePath.forEach(function(sp) {
+                    hps.push([sp.lng(), sp.lat()]);		
+                });
+    
+                allPoints.push(hps);
+    
+                var notInsideCount = 0;
+                hps.forEach(function(pt,ptIndex) {
+                    if (!google.maps.geometry.poly.containsLocation(new google.maps.LatLng(parseFloat(pt[1]), parseFloat(pt[0])), locPolygons[0])) {
+                        notInsideCount++;
+                    }
+                });
+    
+                if (notInsideCount == 0) {
+    
+                    if(allPoints.length > 2) {
+                        var holeIntersectCount = 0;
+                        for (var n = 1; n < allPoints.length - 1; n++) {
+                            for (var m = n + 1; m < allPoints.length; m++) {
+                                if (calcIntersection(allPoints[n], allPoints[m])) {
+                                    holeIntersectCount++;
+                                }
+                            }
+                        }
+                    
+                        if(holeIntersectCount == 0) {
+                            nhid = drawCircleFullHole(config, offsetX, offsetY, vmWidth, shapePath, cp, rm, isMobile, controlMarkers);
+                            break;
+                        } else {
+                            allPoints.pop();
+                        }	
+                    } else {
+                        nhid = drawCircleFullHole(config, offsetX, offsetY, vmWidth, shapePath, cp, rm, isMobile, controlMarkers);
+                        break;
+                    }
+                } else {
+                    allPoints.pop();
+                }
+            }
+    
+            return nhid;
+    
+        }	
+
+        function addCircleSectorHole(config, mapWidth, mapHeight, offsetX, offsetY, vmWidth, isMobile, controlMarkers) {
+		
+            var nhid;
+            
+            if(typeof wdppx == 'undefined' || typeof hdppx == 'undefined') { //this is the case on Select Field or Upload File
+                var mapBounds = map.getBounds();
+            
+                if (mapBounds) {
+                    diffLat = Math.abs(mapBounds.getSouthWest().lat() - mapBounds.getNorthEast().lat());
+                    diffLng = Math.abs(mapBounds.getNorthEast().lng() - mapBounds.getSouthWest().lng());
+                    wdppx = diffLng/mapWidth;		
+                    hdppx = diffLat/mapHeight;
+                }
+            }
+    
+            allPoints = [];
+            locPolygons.forEach(function(lp) {		
+                var sPath = lp.getPath();
+                var points = [];
+                for(var c = 0; c < sPath.length; c++) {
+                    points.push([sPath.getAt(c).lng(), sPath.getAt(c).lat()]);
+                }
+                if(sPath.getAt(0).lng() != sPath.getAt(sPath.length-1).lng() || sPath.getAt(0).lat() != sPath.getAt(sPath.length-1).lat()) {
+                    points.push([sPath.getAt(0).lng(), sPath.getAt(0).lat()]);
+                }	
+                allPoints.push(points);
+            });	
+            
+            var polyCentroidCenter = get_polygon_centroid(allPoints);
+                
+            hlat = polyCentroidCenter.y;
+            hlng = polyCentroidCenter.x;
+    
+            var startHeading = 60;
+            var endHeading = 120;
+    
+            for(var i = 20; i > 0;i--) {
+    
+                var hps = [];
+                
+                var crLat = hlat;
+                var crLng = hlng + 2*i*wdppx;
+                
+                var cp = new google.maps.LatLng(hlat, hlng);
+    
+                var rm = diffLatLng2Meters(hlat, hlng, crLat, crLng);
+    
+                var shapePath = new IQLCircleSector().get(hlat, hlng, rm, startHeading, endHeading);
+    
+                shapePath.forEach(function(sp) {
+                    hps.push([sp.lng(), sp.lat()]);		
+                });
+    
+                allPoints.push(hps);
+    
+                var notInsideCount = 0;
+                hps.forEach(function(pt,ptIndex) {
+                    if (!google.maps.geometry.poly.containsLocation(new google.maps.LatLng(parseFloat(pt[1]), parseFloat(pt[0])), locPolygons[0])) {
+                        notInsideCount++;
+                    }
+                });
+    
+                if (notInsideCount == 0) { //all points inside outer poly
+    
+                    if(allPoints.length > 2) {
+                        var holeIntersectCount = 0;
+                        for (var n = 1; n < allPoints.length - 1; n++) {
+                            for (var m = n + 1; m < allPoints.length; m++) {
+                                if (calcIntersection(allPoints[n], allPoints[m])) {
+                                    holeIntersectCount++;
+                                }
+                            }
+                        }
+                    
+                        if(holeIntersectCount == 0) {
+                            nhid = drawCircleSectorHole(config, offsetX, offsetY, vmWidth, shapePath, cp, rm, isMobile, controlMarkers);
+                            break;
+                        } else {
+                            allPoints.pop();
+                        }	
+                    } else {
+                        nhid = drawCircleSectorHole(config, offsetX, offsetY, vmWidth, shapePath, cp, rm, isMobile, controlMarkers);
+                        break;
+                    }
+                } else {
+                    allPoints.pop();
+                }
+            }
+    
+            return nhid;
+    
+        }	
+    
+        function addCircleSegmentHole(config, mapWidth, mapHeight, offsetX, offsetY, vmWidth, isMobile, controlMarkers) {
+            var nhid;
+            
+            if(typeof wdppx == 'undefined' || typeof hdppx == 'undefined') { //this is the case on Select Field or Upload File
+                var mapBounds = map.getBounds();
+            
+                if (mapBounds) {
+                    diffLat = Math.abs(mapBounds.getSouthWest().lat() - mapBounds.getNorthEast().lat());
+                    diffLng = Math.abs(mapBounds.getNorthEast().lng() - mapBounds.getSouthWest().lng());
+                    wdppx = diffLng/mapWidth;		
+                    hdppx = diffLat/mapHeight;
+                }
+            }
+
+            allPoints = [];
+            locPolygons.forEach(function(lp) {		
+                var sPath = lp.getPath();
+                var points = [];
+                for(var c = 0; c < sPath.length; c++) {
+                    points.push([sPath.getAt(c).lng(), sPath.getAt(c).lat()]);
+                }
+                if(sPath.getAt(0).lng() != sPath.getAt(sPath.length-1).lng() || sPath.getAt(0).lat() != sPath.getAt(sPath.length-1).lat()) {
+                    points.push([sPath.getAt(0).lng(), sPath.getAt(0).lat()]);
+                }	
+                allPoints.push(points);
+            });	
+            
+            var polyCentroidCenter = get_polygon_centroid(allPoints);
+                
+            hlat = polyCentroidCenter.y;
+            hlng = polyCentroidCenter.x;
+
+            var startHeading = 0;
+            var endHeading = 160;
+
+            for(var i = 20; i > 0;i--) {
+
+                var hps = [];
+                
+                var crLat = hlat;
+                var crLng = hlng + 2*i*wdppx;
+                
+                var cp = new google.maps.LatLng(hlat, hlng);
+
+                var rm = diffLatLng2Meters(hlat, hlng, crLat, crLng);
+
+                var shapePath = new IQLCircleSector().get(hlat, hlng, rm, startHeading, endHeading);
+
+                shapePath.forEach(function(sp) {
+                    hps.push([sp.lng(), sp.lat()]);		
+                });
+
+                allPoints.push(hps);
+
+                var notInsideCount = 0;
+                hps.forEach(function(pt,ptIndex) {
+                    if (!google.maps.geometry.poly.containsLocation(new google.maps.LatLng(parseFloat(pt[1]), parseFloat(pt[0])), locPolygons[0])) {
+                        notInsideCount++;
+                    }
+                });
+
+                if (notInsideCount == 0) { //all points inside outer poly
+
+                    if(allPoints.length > 2) {
+                        var holeIntersectCount = 0;
+                        for (var n = 1; n < allPoints.length - 1; n++) {
+                            for (var m = n + 1; m < allPoints.length; m++) {
+                                if (calcIntersection(allPoints[n], allPoints[m])) {
+                                    holeIntersectCount++;
+                                }
+                            }
+                        }
+                    
+                        if(holeIntersectCount == 0) {
+                            nhid = drawCircleSegmentHole(config, offsetX, offsetY, vmWidth, shapePath, cp, rm, isMobile, controlMarkers);
+                            break;
+                        } else {
+                            allPoints.pop();
+                        }	
+                    } else {
+                        nhid = drawCircleSegmentHole(config, offsetX, offsetY, vmWidth, shapePath, cp, rm, isMobile, controlMarkers);
+                        break;
+                    }
+                } else {
+                    allPoints.pop();
+                }
+            }
+
+            return nhid;
+
+        }	
+
+        function drawCircleFullHole(config, offsetX, offsetY, vmWidth, shapePath, cp, rm, isMobile, controlMarkers) {
+
+            var path = [];
+            shapePath.forEach(function(sp) {
+                path.push(new google.maps.LatLng(sp.lat(), sp.lng()));		
+            });
+    
+            var pid = Date.now() + Math.floor(Math.random() * 100000);
+    
+            var shape = new google.maps.Polygon({
+                map: map,
+                path: path,
+                id: pid.toString(),
+                content: "",
+                strokeColor: config.strokeColor,
+                strokeOpacity: config.strokeOpacity,
+                strokeWeight: config.strokeWeight,
+                fillColor: config.fillColor,
+                fillOpacity: config.fillOpacity,
+                zIndex: 10200,
+                clickable: true,
+                editable: false,
+                draggable: false,
+                visible: false,
+                isPolygon: false,
+                isCircle: true,
+                isCircleSector: false,
+                isCircleSegment: false,
+                isHole: true,
+                latitude: 0,
+                longitude: 0,
+                poly: 0,
+                area: 0,
+                perimeter: 0
+            });
+    
+            locPolygons.push(shape);
+            currentCircleFull = new IQLCircleFull();
+            currentCircleFull = currentCircleFull.edit(map, shape, currentCircleFull, cp, rm, isMobile, controlMarkers);
+    
+            var osBounds = new google.maps.LatLngBounds();
+            var osPath = locPolygons[0].getPath();
+            osPath.forEach(function(c,index) {
+                osBounds.extend(c);
+            });	
+                
+            var mapPanned = false;
+    
+            var boundsChangedListener = google.maps.event.addListener(map, 'bounds_changed', function () {
+                        
+                if(!mapPanned) {
+                    
+                    var psw = map.getProjection().fromLatLngToPoint(osBounds.getSouthWest());
+                    var pne = map.getProjection().fromLatLngToPoint(osBounds.getNorthEast());
+    
+                    var zoom = map.getZoom();
+                    var scale = 1 << zoom;
+    
+                    if((pne.x - psw.x)*scale >= vmWidth) {
+                        map.setZoom(zoom-1);
+                    }
+                    
+                    offsetCenter(osBounds.getCenter(), offsetX, offsetY);
+                    mapPanned = !mapPanned;
+                }	
+            });
+            mapListeners.push(boundsChangedListener);
+    
+            map.fitBounds(osBounds);
+    
+            return pid;
+    
+        }
+
+        function drawCircleSectorHole(config, offsetX, offsetY, vmWidth, shapePath, cp, rm, isMobile, controlMarkers) {
+
+            var path = [];
+            shapePath.forEach(function(sp) {
+                path.push(new google.maps.LatLng(sp.lat(), sp.lng()));		
+            });
+    
+            var pid = Date.now() + Math.floor(Math.random() * 100000);
+    
+            var shape = new google.maps.Polygon({
+                map: map,
+                path: path,
+                id: pid.toString(),
+                content: "",
+                strokeColor: config.strokeColor,
+                strokeOpacity: config.strokeOpacity,
+                strokeWeight: config.strokeWeight,
+                fillColor: config.fillColor,
+                fillOpacity: config.fillOpacity,
+                zIndex: 10200,
+                clickable: true,
+                editable: false,
+                draggable: false,
+                visible: false,
+                isPolygon: false,
+                isCircle: false,
+                isCircleSector: true,
+                isCircleSegment: false,
+                isHole: true,
+                latitude: 0,
+                longitude: 0,
+                poly: 0,
+                area: 0,
+                perimeter: 0
+            });
+    
+            locPolygons.push(shape);
+            currentCircleSector = new IQLCircleSector();
+            
+            currentCircleSector = currentCircleSector.edit(map, shape, currentCircleSector, cp, rm, isMobile, controlMarkers);
+    
+            var osBounds = new google.maps.LatLngBounds();
+            var osPath = locPolygons[0].getPath();
+            osPath.forEach(function(c,index) {
+                osBounds.extend(c);
+            });	
+                
+            var mapPanned = false;
+    
+            var boundsChangedListener = google.maps.event.addListener(map, 'bounds_changed', function () {
+                
+                //console.log('CircleSectorHole, map bounds changed');
+                
+                if(!mapPanned) {
+                    
+                    var psw = map.getProjection().fromLatLngToPoint(osBounds.getSouthWest());
+                    var pne = map.getProjection().fromLatLngToPoint(osBounds.getNorthEast());
+    
+                    var zoom = map.getZoom();
+                    var scale = 1 << zoom;
+    
+                    if((pne.x - psw.x)*scale >= vmWidth) {
+                        map.setZoom(zoom-1);
+                    }
+                    
+                    offsetCenter(osBounds.getCenter(), offsetX, offsetY);
+                    mapPanned = !mapPanned;
+                }	
+            });
+            mapListeners.push(boundsChangedListener);
+    
+            map.fitBounds(osBounds);
+    
+            return pid;
+    
+        }
+    
+        function drawCircleSegmentHole(config, offsetX, offsetY, vmWidth, shapePath, cp, rm, isMobile, controlMarkers) {
+
+            var path = [];
+            shapePath.forEach(function(sp) {
+                path.push(new google.maps.LatLng(sp.lat(), sp.lng()));		
+            });
+    
+            var pid = Date.now() + Math.floor(Math.random() * 100000);
+    
+            var shape = new google.maps.Polygon({
+                map: map,
+                path: path,
+                id: pid.toString(),
+                content: "",
+                strokeColor: config.strokeColor,
+                strokeOpacity: config.strokeOpacity,
+                strokeWeight: config.strokeWeight,
+                fillColor: config.fillColor,
+                fillOpacity: config.fillOpacity,
+                zIndex: 10200,
+                clickable: true,
+                editable: false,
+                draggable: false,
+                visible: false,
+                isPolygon: false,
+                isCircle: false,
+                isCircleSector: false,
+                isCircleSegment: true,
+                isHole: true,
+                latitude: 0,
+                longitude: 0,
+                poly: 0,
+                area: 0,
+                perimeter: 0
+            });
+    
+            locPolygons.push(shape);
+            currentCircleSegment = new IQLCircleSegment();
+            
+            currentCircleSegment = currentCircleSegment.edit(map, shape, currentCircleSegment, cp, rm, isMobile, controlMarkers);
+    
+            var osBounds = new google.maps.LatLngBounds();
+            var osPath = locPolygons[0].getPath();
+            osPath.forEach(function(c,index) {
+                osBounds.extend(c);
+            });	
+                
+            var mapPanned = false;
+    
+            var boundsChangedListener = google.maps.event.addListener(map, 'bounds_changed', function () {	
+            
+                if(!mapPanned) {
+                    
+                    var psw = map.getProjection().fromLatLngToPoint(osBounds.getSouthWest());
+                    var pne = map.getProjection().fromLatLngToPoint(osBounds.getNorthEast());
+    
+                    var zoom = map.getZoom();
+                    var scale = 1 << zoom;
+    
+                    if((pne.x - psw.x)*scale >= vmWidth) {
+                        map.setZoom(zoom-1);
+                    }
+                    
+                    offsetCenter(osBounds.getCenter(), offsetX, offsetY);
+                    mapPanned = !mapPanned;
+                }	
+            });
+            mapListeners.push(boundsChangedListener);
+    
+            map.fitBounds(osBounds);
+    
+            return pid;
+    
+        }
+        
+        function offsetCenter(latlng, offsetX, offsetY) {
+
+            var zoom = 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);
+            
+        }
+
+        _this.RenderRegionFarms = function (locationsJson, icon) {
+            if(icon){
+                AdvancedMarker(locationsJson, icon, 'farm');
+            } 
+        }	
+
+        _this.TriggerField_ChangeEvent = function () {
+            var area = 0;
+            var perimeter = 0;
+            var path = '';
+            var latitude = 0;
+            var longitude = 0;
+            var bounds = new google.maps.LatLngBounds();
+            var isValid = "";
+            var polyPath = [];
+    
+            locPolygons.forEach(function (polygon, index) {
+                var poly;
+                poly = polygon.getPath();
+                
+                ({ perimeter, area, path } = fieldArea_calculate(index, poly, bounds, perimeter, area, path));
+                polyPath.push({path: path.split(',')[index], isHole: polygon.isHole});
+            });
+
+            path = path.substr(0, path.length - 1);
+            if (path !== "") {
+                console.log('Checking field overlaps...');
+                if (!_this.checkForBackgroundFieldOverlaps()) {
+                    console.log('Overlap detected - setting error message');
+                    isValid = "Error: Field overlaps with an existing field";
+                }
+            }
+    
+            area = -area;
+            latitude = parseFloat(bounds.getCenter().lat());
+            longitude = parseFloat(bounds.getCenter().lng());
+            
+            return new IQLFieldGeoLocation(path, area, perimeter, latitude, longitude, isValid);
+        }
+
+        function fieldArea_calculate(index, poly, bounds, perimeter, area, path) {
+            var mapCoords = [];
+            var i;
+    
+            if (index === 0) {
+    
+                for (i = 0; i < poly.getLength(); i++) {
+                    mapCoords.push(poly.getAt(i));
+                    bounds.extend(poly.getAt(i));
+                    if (i < poly.getLength() - 1) {
+                        perimeter += google.maps.geometry.spherical.computeDistanceBetween(poly.getAt(i), poly.getAt(i + 1));
+                    }
+                }
+    
+                if (mapCoords[0].lat() != mapCoords[mapCoords.length - 1].lat() && mapCoords[0].lng() != mapCoords[mapCoords.length - 1].lng()) {
+                    mapCoords.push(mapCoords[0]);
+                }
+    
+                if (google.maps.geometry.spherical.computeSignedArea(mapCoords) > 0) {
+                    mapCoords.reverse();
+                }
+    
+                area += google.maps.geometry.spherical.computeSignedArea(mapCoords);
+                path = google.maps.geometry.encoding.encodePath(mapCoords) + ',';
+    
+            } else {
+    
+                for (i = 0; i < poly.getLength(); i++) {
+                    mapCoords.push(poly.getAt(i));
+                    bounds.extend(poly.getAt(i));
+                    if (i < poly.getLength() - 1) {
+                        perimeter += google.maps.geometry.spherical.computeDistanceBetween(poly.getAt(i), poly.getAt(i + 1));
+                    }
+                }
+    
+                area += google.maps.geometry.spherical.computeSignedArea(mapCoords);
+                path += google.maps.geometry.encoding.encodePath(mapCoords) + ',';
+    
+            }
+            return { perimeter, area, path };
+        }
+
+        _this.DrawField_AttachEvents = function (eHandlers) {
+
+            locPolygons.forEach(function (polygon) {
+    
+                var moverListener = google.maps.event.addListener(polygon, 'mouseover', function () {
+                    eHandlers["JS_ShapeOnMouseIn"](this.id);
+                });
+                polygonListeners.push(moverListener);
+    
+                var moutListener = google.maps.event.addListener(polygon, 'mouseout', function () {
+                    eHandlers["JS_ShapeOnMouseOut"](this.id);
+                });
+                polygonListeners.push(moutListener);
+    
+                var mclListener = google.maps.event.addListener(polygon, 'click', function () {
+                    eHandlers["ShapeSelect"](this.id);
+                });
+                polygonListeners.push(mclListener);
+            });
+    
+        }
+
+        _this.PolygonCustomEdit_Edit = function (ShapeId, isMobile) {
+            var polygonCE = locPolygons.find(p => p.id == ShapeId);
+            if (polygonCE) {
+                
+                var pcePath = polygonCE.getPath(); 
+                if(pcePath.getAt(0).lat() == pcePath.getAt(pcePath.getLength()-1).lat() && pcePath.getAt(0).lng() == pcePath.getAt(pcePath.getLength()-1).lng()) {
+                    pcePath.pop();
+                }
+                
+                polygonCE.setPath(pcePath);
+                polygonCE.setMap(null);
+                currentPolygonCustomEdit = new IQLPolygonCustomEdit().edit(map, polygonCE, currentPolygonCustomEdit, isMobile);
+            }
+        }
+
+        _this.CircleSector_Edit = function (ShapeId, isMobile) {
+            var circleSec = locPolygons.find(p => p.id == ShapeId);
+    
+            if (circleSec) {
+                // Delete the original shape
+                //_this.Shape_Delete(ShapeId);
+                
+                // Calculate center point from the polygon's bounds
+                var bounds = new google.maps.LatLngBounds();
+                circleSec.getPath().forEach(point => bounds.extend(point));
+                var centerPoint = bounds.getCenter();
+
+                // Calculate radius as distance from center to first point
+                var initialRadius = google.maps.geometry.spherical.computeDistanceBetween(
+                    centerPoint,
+                    circleSec.getPath().getAt(0)
+                );
+
+                currentCircleSector = new IQLCircleSector().edit(
+                    map, 
+                    circleSec, 
+                    currentCircleSector, 
+                    centerPoint,
+                    initialRadius,
+                    isMobile, 
+                    controlMarkers
+                );
+            }   
+        }
+
+        
+        _this.CircleFull_Edit = function (ShapeId, isMobile) {
+            var circleFull = locPolygons.find(p => p.id == ShapeId);
+        
+            if (circleFull) {
+                
+                var bounds = new google.maps.LatLngBounds();
+                circleFull.getPath().forEach(point => bounds.extend(point));
+                var centerPoint = bounds.getCenter();
+        
+                var initialRadius = google.maps.geometry.spherical.computeDistanceBetween(
+                    centerPoint,
+                    circleFull.getPath().getAt(0)
+                );
+        
+                currentCircleFull = new IQLCircleFull().edit(
+                    map, 
+                    circleFull, 
+                    currentCircleFull, 
+                    centerPoint,
+                    initialRadius,
+                    isMobile, 
+                    controlMarkers
+                );
+            }   
+        }
+
+    _this.CircleSegment_Edit = function (ShapeId, isMobile) {
+        var circleSeg = locPolygons.find(p => p.id == ShapeId);
+
+        if (circleSeg) {
+            // Delete the original shape
+            _this.Shape_Delete(ShapeId);
+            
+            // Calculate center point from the polygon's bounds
+            var bounds = new google.maps.LatLngBounds();
+            circleSeg.getPath().forEach(point => bounds.extend(point));
+            var centerPoint = bounds.getCenter();
+
+            // Calculate radius as distance from center to first point
+            var initialRadius = google.maps.geometry.spherical.computeDistanceBetween(
+                centerPoint,
+                circleSeg.getPath().getAt(0)
+            );
+
+            currentCircleSegment = new IQLCircleSegment().edit(
+                map, 
+                circleSeg, 
+                currentCircleSegment, 
+                centerPoint,
+                initialRadius,
+                isMobile, 
+                controlMarkers
+            );
+        }   
+    }
+
+    _this.RenderRegions = function (locations, properties) {
+        var polygon = null;
+        var polyPath = null;
+        var path = null;
+        fpolies = [];
+		var rbounds = new google.maps.LatLngBounds();
+        
+        locations.forEach(function (location) {
+ 
+            const hasId = typeof location.Id === "string"
+            ? location.Id.length > 0
+            : typeof location.Id === "number" && location.Id > 0;
+ 
+			if (location && hasId) {
+                var polies = [];
+                if(!location.Poly.length > 0){
+                    polies = location.Coords;
+                }
+                else{
+                    polies = location.Poly.split(',');
+                }
+ 
+				var paths = [];
+ 
+				polies.forEach(function (poly, pIndex) {
+					if(!location.Poly.length > 0){
+						//geoJson
+						path = [];
+						poly.forEach(function (v) {
+							path.push(new google.maps.LatLng(parseFloat(v[1]), parseFloat(v[0])));
+							rbounds.extend(new google.maps.LatLng(parseFloat(v[1]), parseFloat(v[0])));
+						});
+						paths.push(path);
+					} else {
+						//encoded polyline
+						polyPath = polyline.decode(poly);
+						path = [];
+						polyPath.forEach(function (v) {
+							path.push(new google.maps.LatLng(parseFloat(v[0]), parseFloat(v[1])));
+							rbounds.extend(new google.maps.LatLng(parseFloat(v[0]), parseFloat(v[1])));
+						});
+						paths.push(path);
+					}	
+				});
+
+                var polygonOptions = {
+                    ...properties.polygonOptions.unselected,
+                    paths: paths,
+                    id: location.Id,
+                    content: location.LocationName,
+                    map: map
+                }
+
+				polygon = new google.maps.Polygon(polygonOptions);
+                fpolies.push(polygon);
+            }
+        });
+		map.fitBounds(rbounds);
+        regions_BindPolyEvents();
+    }
+
+    _this.Shape_Convert = function (ShapeId) {
+        locPolygons.forEach(function (p) {
+            if (p.id == ShapeId) {
+                if (!p.isPolygon) {
+
+                    var shape;
+                    var pid = Date.now() + Math.floor(Math.random() * 100000);
+
+                    if (p.isCircle) {
+                        var shapePaths = circleToPolygon([p.getCenter().lng(), p.getCenter().lat()], p.getRadius(), 72, p.isHole);
+                        shape = new google.maps.Polygon({
+                            map: p.map,
+                            path: shapePaths,
+                            id: pid,
+                            content: p.content,
+                            strokeColor: p.strokeColor,
+                            strokeOpacity: p.strokeOpacity,
+                            strokeWeight: p.strokeWeight,
+                            fillColor: p.fillColor,
+                            fillOpacity: p.fillOpacity,
+                            zIndex: p.zIndex,
+                            clickable: p.clickable,
+                            editable: p.editable,
+                            draggable: p.draggable,
+                            visible: false,
+                            isPolygon: true,
+                            isCircle: false,
+                            isCircleSector: false,
+                            isCircleSegment: false,
+                            isHole: p.isHole,
+                            latitude: p.latitude,
+                            longitude: p.longitude,
+                            poly: p.poly,
+                            area: p.area,
+                            perimeter: p.perimeter
+                        });
+
+                    } else if (p.isCircleSector) {
+
+                        shape = new google.maps.Polygon({
+                            map: p.map,
+                            paths: p.paths,
+                            id: pid,
+                            content: p.content,
+                            strokeColor: p.strokeColor,
+                            strokeOpacity: p.strokeOpacity,
+                            strokeWeight: p.strokeWeight,
+                            fillColor: p.fillColor,
+                            fillOpacity: p.fillOpacity,
+                            zIndex: p.zIndex,
+                            clickable: p.clickable,
+                            editable: p.editable,
+                            draggable: p.draggable,
+                            visible: false,
+                            isPolygon: true,
+                            isCircle: false,
+                            isCircleSector: false,
+                            isCircleSegment: false,
+                            isHole: p.isHole,
+                            latitude: p.latitude,
+                            longitude: p.longitude,
+                            poly: p.poly,
+                            area: p.area,
+                            perimeter: p.perimeter
+                        });
+
+                    } else if (p.isCircleSegment) {
+
+                        shape = new google.maps.Polygon({
+                            map: p.map,
+                            paths: p.paths,
+                            id: pid,
+                            content: p.content,
+                            strokeColor: p.strokeColor,
+                            strokeOpacity: p.strokeOpacity,
+                            strokeWeight: p.strokeWeight,
+                            fillColor: p.fillColor,
+                            fillOpacity: p.fillOpacity,
+                            zIndex: p.zIndex,
+                            clickable: p.clickable,
+                            editable: p.editable,
+                            draggable: p.draggable,
+                            visible: false,
+                            isPolygon: true,
+                            isCircle: false,
+                            isCircleSector: false,
+                            isCircleSegment: true,
+                            isHole: p.isHole,
+                            latitude: p.latitude,
+                            longitude: p.longitude,
+                            poly: p.poly,
+                            area: p.area,
+                            perimeter: p.perimeter
+                        });
+
+                    }
+
+                    locPolygons.push(shape);
+
+                    return pid;
+                }
+            }
+        });
+    }
+
+    _this.addToLocPolygons = function(shape) {
+        locPolygons = [];
+        locPolygons.push(shape);
+    };
+
+    _this.RenderBackgroundFields = function (locations, properties) {
+        var mbounds = new google.maps.LatLngBounds();
+
+        backgroundFields.forEach(field => {
+            field.setMap(null);
+        });
+        backgroundFields = [];
+
+        locations.forEach(function (location) {
+            if (location && location.Poly && location.Poly.length > 0 && location.Id.length > 0) {
+                var paths = location.Poly.map(poly => 
+                    poly.map(v => new google.maps.LatLng(parseFloat(v[1]), parseFloat(v[0])))
+                );
+                paths[0].forEach(coord => mbounds.extend(coord));
+
+                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, "/")}`;
+                    }
+                }
+                
+                var polygonOptions = {
+                    ...properties.polygonOptions.other,
+                    paths: paths,
+                    id: location.Id,
+                    content: content,
+                    map: map
+                }
+
+                var polygon = new google.maps.Polygon(polygonOptions);
+                backgroundFields.push(polygon);
+            }
+        });
+
+        map.fitBounds(mbounds);
+    };
+
+    _this.clearBackgroundFields = function() {
+        backgroundFields.forEach(field => {
+            field.setMap(null);
+        });
+        backgroundFields = [];
+    };
+
+    _this.checkForBackgroundFieldOverlaps = function() {
+        console.log('Checking overlaps - Background Fields:', backgroundFields.length, 'Local Polygons:', locPolygons.length);
+        
+        if (!backgroundFields.length || !locPolygons.length) {
+            console.log('No fields to check for overlap');
+            return true;
+        }
+
+        for (const locPolygon of locPolygons) {
+            for (const bgField of backgroundFields) {
+                const locPath = locPolygon.getPath().getArray();
+                const bgPath = bgField.getPath().getArray();
+
+                for (const point of locPath) {
+                    if (google.maps.geometry.poly.containsLocation(point, bgField)) {
+                        console.log('Overlap detected: Local polygon point inside background field');
+                        return false;
+                    }
+                }
+
+                for (const point of bgPath) {
+                    if (google.maps.geometry.poly.containsLocation(point, locPolygon)) {
+                        console.log('Overlap detected: Background field point inside local polygon');
+                        return false;
+                    }
+                }
+            }
+        }
+        
+        console.log('No overlaps detected');
+        return true;
+    };
+
+    _this.NDVI_AddOverlay_DEA = function (locationJson, ndviTileURL, validGMTiles, eosLocationCropperRefId, eosViewId, spinnerURL, spinnerLat, spinnerLon, paletteId, colorMapTypeIdValue, isFullView, onComplete) {
+        var locationParsed = locationJson;
+        var location = locationParsed[0];
+        var centerLat, centerLng;
+        var polyBounds = new google.maps.LatLngBounds();
+ 
+        if (location && location.Poly && location.Poly.length > 0 && location.Id > 0) {
+            var centroid = get_polygon_centroid(location.Poly);
+            centerLat = centroid.y;
+            centerLng = centroid.x;
+           
+            location.Poly.forEach(function (poly, pIndex) {
+                poly.forEach(function (v) {
+                    if(pIndex == 0) {
+                        polyBounds.extend(new google.maps.LatLng(parseFloat(v[1]), parseFloat(v[0])));
+                    }  
+                });
+            });
+ 
+        } else {
+            centerLat = spinnerLat;
+            centerLng = spinnerLon;
+        }    
+ 
+        var vgmTilesIn = validGMTiles;
+       
+        var fullView = 0;
+        if(isFullView) {
+            fullView = 1;
+        }  
+ 
+        var vgmTiles = vgmTilesIn;
+ 
+        console.log(vgmTiles);
+ 
+        var spinnerSet = false;
+ 
+        if(!spinnerSet) {
+            const spinnerImg = document.createElement('img');
+            spinnerImg.src = spinnerURL;
+            spinnerImg.width = 120;
+            spinnerImg.height = 120;
+            spinnerImg.style.transform = 'translate(0, 50%)';
+            const position = new google.maps.LatLng(centerLat, centerLng);
+ 
+            var spinnerMarker = new google.maps.marker.AdvancedMarkerElement({
+                map: map,
+                position: position,
+                content: spinnerImg,
+            });
+            fmarkers.push(spinnerMarker);
+            spinnerSet = true;
+        }  
+       
+        var tilesToLoad = [];
+ 
+        if (map.getZoom() > 17) {
+            var zoomOnAddOverlayChangedListener = google.maps.event.addListenerOnce(map, 'zoom_changed', function () {
+                tilesToLoad = [];
+ 
+                var vdiMapType = new google.maps.ImageMapType({
+                    getTileUrl: function (coord, zoom) {
+                        if(vgmTiles.indexOf(zoom+'|'+coord.x+'|'+coord.y) > -1) {
+                            const booleanFullView = fullView ? 'true' : 'false';
+                            console.log([ndviTileURL.replace(/{l}/,eosLocationCropperRefId).replace(/{v}/,eosViewId).replace(/{p}/,paletteId).replace(/{f}/,booleanFullView).replace(/{z}/,zoom).replace(/{x}/,coord.x).replace(/{y}/,coord.y)].join(''));          
+                            tilesToLoad.push({eosLocationCropperRefId: eosLocationCropperRefId, eosViewId: eosViewId, z: zoom});
+                            return [ndviTileURL.replace(/{l}/,eosLocationCropperRefId).replace(/{v}/,eosViewId).replace(/{p}/,paletteId).replace(/{f}/,booleanFullView).replace(/{z}/,zoom).replace(/{x}/,coord.x).replace(/{y}/,coord.y)].join('');
+                        }  
+                    },
+                    tileSize: new google.maps.Size(256, 256),
+                    minZoom: 13,
+                    maxZoom: 17
+                });
+ 
+                vdiMapType.addListener("tilesloaded", function() {
+                    if(spinnerSet) {
+                        fmarkers.forEach(function(l,index) {
+                            //if(l.id == 'spinnerMarker') {
+                                l.setMap(null);
+                                fmarkers.splice(index, 1);
+                                spinnerSet = false;
+                            //}
+                        });
+                    }
+                   
+                   
+                    var fullView = false;
+                    if(tilesToLoad.length > 0) {
+                        if(tilesToLoad[0].fullView == 1) {
+                            fullView = true;
+                        }  
+                    }
+ 
+                    if (typeof onComplete === 'function') {
+                        if(tilesToLoad.length > 0) {
+                            const currentZoom = map.getZoom();
+                            let zoomTileCount = 0;
+                            validGMTiles.forEach((tile) => {
+                                if(parseInt(tile.substring(0,tile.indexOf('|'))) == currentZoom ) {
+                                    zoomTileCount++;
+                                }        
+                            })
+                            if(tilesToLoad.length == zoomTileCount) {
+                                eventHandlers["OverlayTilesLoaded"]({
+                                    type: 'SUCCESS',
+                                    message: 'NDVI overlay completed',
+                                    code: 200,
+                                    data: tilesToLoad[0]
+                                });
+                            } else {
+                                eventHandlers["OverlayTilesLoaded"]({
+                                    type: 'ERROR',
+                                    message: 'Not all tiles loaded',
+                                    code: 400,
+                                    data: null
+                                });
+                            }    
+                        } else {
+                            eventHandlers["OverlayTilesLoaded"]({
+                                type: 'ERROR',
+                                message: 'No tiles loaded',
+                                code: 400,
+                                data: null
+                            });
+                        }    
+                    }
+ 
+                    tilesToLoad = [];      
+ 
+                });
+ 
+                map.overlayMapTypes.push(vdiMapType);
+            });
+            mapListeners.push(zoomOnAddOverlayChangedListener);
+       
+            map.setZoom(17);
+ 
+        } else if (map.getZoom() < 13) {
+            var zoomOnAddOverlayChangedListener = google.maps.event.addListenerOnce(map, 'zoom_changed', function () {
+ 
+                tilesToLoad = [];
+ 
+                var vdiMapType = new google.maps.ImageMapType({
+                    getTileUrl: function (coord, zoom) {
+                        if(vgmTiles.indexOf(zoom+'|'+coord.x+'|'+coord.y) > -1) {
+                            const booleanFullView = fullView ? 'true' : 'false';
+                            console.log([ndviTileURL.replace(/{l}/,eosLocationCropperRefId).replace(/{v}/,eosViewId).replace(/{p}/,paletteId).replace(/{f}/,booleanFullView).replace(/{z}/,zoom).replace(/{x}/,coord.x).replace(/{y}/,coord.y)].join(''));          
+                            tilesToLoad.push({eosLocationCropperRefId: eosLocationCropperRefId, eosViewId: eosViewId, z: zoom});
+                            return [ndviTileURL.replace(/{l}/,eosLocationCropperRefId).replace(/{v}/,eosViewId).replace(/{p}/,paletteId).replace(/{f}/,booleanFullView).replace(/{z}/,zoom).replace(/{x}/,coord.x).replace(/{y}/,coord.y)].join('');
+                        }  
+                    },
+                    tileSize: new google.maps.Size(256, 256),
+                    minZoom: 13,
+                    maxZoom: 17
+                });
+               
+                vdiMapType.addListener("tilesloaded", function() {
+                    if(spinnerSet) {
+                        fmarkers.forEach(function(l,index) {
+                            //if(l.id == 'spinnerMarker') {
+                                l.setMap(null);
+                                fmarkers.splice(index, 1);
+                                spinnerSet = false;
+                            //}
+                        });
+                    }
+ 
+                    var fullView = false;
+                    if(tilesToLoad.length > 0) {
+                        if(tilesToLoad[0].fullView == 1) {
+                            fullView = true;
+                        }  
+                    }
+                    
+                //if (typeof onComplete === 'function') {
+                    if(tilesToLoad.length > 0) {
+                        const currentZoom = map.getZoom();
+                        let zoomTileCount = 0; 
+                        validGMTiles.forEach((tile) => {
+                            if(parseInt(tile.substring(0,tile.indexOf('|'))) == currentZoom ) {
+                                zoomTileCount++;
+                            }        
+                        })
+                        if(tilesToLoad.length == zoomTileCount) {
+                            eventHandlers["OverlayTilesLoaded"]({
+                                type: 'SUCCESS',
+                                message: 'NDVI overlay completed',
+                                code: 200,
+                                data: tilesToLoad[0]
+                            });
+                        } else {
+                            eventHandlers["OverlayTilesLoaded"]({
+                                type: 'ERROR',
+                                message: 'Not all tiles loaded',
+                                code: 400,
+                                data: null
+                            });
+                        }    
+                    } else {
+                        eventHandlers["OverlayTilesLoaded"]({
+                            type: 'ERROR',
+                            message: 'No tiles loaded',
+                            code: 400,
+                            data: null
+                        });
+                    }    
+                //}
+
+                    tilesToLoad = [];		
+
+				});	
+
+				map.overlayMapTypes.push(vdiMapType);
+			});
+			mapListeners.push(zoomOnAddOverlayChangedListener);
+		
+			map.setZoom(13);
+
+		} else {
+			tilesToLoad = [];
+
+			var vdiMapType = new google.maps.ImageMapType({
+				getTileUrl: function (coord, zoom) {
+					if(vgmTiles.indexOf(zoom+'|'+coord.x+'|'+coord.y) > -1) {
+						const booleanFullView = fullView ? 'true' : 'false';
+						console.log([ndviTileURL.replace(/{l}/,eosLocationCropperRefId).replace(/{v}/,eosViewId).replace(/{p}/,paletteId).replace(/{f}/,booleanFullView).replace(/{z}/,zoom).replace(/{x}/,coord.x).replace(/{y}/,coord.y)].join(''));			
+						tilesToLoad.push({eosLocationCropperRefId: eosLocationCropperRefId, eosViewId: eosViewId, z: zoom});
+						return [ndviTileURL.replace(/{l}/,eosLocationCropperRefId).replace(/{v}/,eosViewId).replace(/{p}/,paletteId).replace(/{f}/,booleanFullView).replace(/{z}/,zoom).replace(/{x}/,coord.x).replace(/{y}/,coord.y)].join('');
+					}	
+				},
+				tileSize: new google.maps.Size(256, 256),
+				minZoom: 13,
+				maxZoom: 17
+			});
+
+			vdiMapType.addListener("tilesloaded", function() {
+				if(spinnerSet) {
+                    
+					fmarkers.forEach(function(l,index) {
+							l.setMap(null);
+							fmarkers.splice(index, 1);
+							spinnerSet = false;
+					});	
+				}
+
+                var fullView = false;
+                if(tilesToLoad.length > 0) {
+                    if(tilesToLoad[0].fullView == 1) {
+                        fullView = true;
+                    }  
+                }
+
+                    if(tilesToLoad.length > 0) {
+                        const currentZoom = map.getZoom();
+                        let zoomTileCount = 0;
+                        validGMTiles.forEach((tile) => {
+                            if(parseInt(tile.substring(0,tile.indexOf('|'))) == currentZoom ) {
+                                zoomTileCount++;
+                            }        
+                        })
+                        if(tilesToLoad.length == zoomTileCount) {
+                            eventHandlers["OverlayTilesLoaded"]({
+                                type: 'SUCCESS',
+                                message: 'NDVI overlay completed',
+                                code: 200,
+                                data: tilesToLoad[0]
+                            });
+                        } else {
+                            eventHandlers["OverlayTilesLoaded"]({
+                                type: 'ERROR',
+                                message: 'Not all tiles loaded',
+                                code: 400,
+                                data: null
+                            });
+                        }    
+                    } else {
+                        eventHandlers["OverlayTilesLoaded"]({
+                            type: 'ERROR',
+                            message: 'No tiles loaded',
+                            code: 400,
+                            data: null
+                        });
+                    }  
+ 
+                tilesToLoad = [];
+ 
+            });
+ 
+            map.overlayMapTypes.push(vdiMapType);
+        }  
+    }
+    
+    _this.NDVI_RemoveOverlay = function () {
+        map.overlayMapTypes.clear();
+    }
+
+    
+    _this.NDVI_DrawLocation = function (locationJson, offsetX, offsetY, vMapWidth, showTooltip) {
+        var locationParsed = locationJson;
+        var location = locationParsed[0];
+        var polygon = null;
+		var mapPanned = false;
+	
+        if (location && location.Poly && location.Poly.length > 0 && location.Id > 0) {
+			var paths = [];
+            var polyBounds = new google.maps.LatLngBounds();
+			
+            
+            location.Poly.forEach(function (poly, pIndex) {
+                var path = [];
+
+                poly.forEach(function (v) {
+                    path.push(new google.maps.LatLng(parseFloat(v[1]), parseFloat(v[0])));
+					if(pIndex == 0) {
+						polyBounds.extend(new google.maps.LatLng(parseFloat(v[1]), parseFloat(v[0])));
+					}	
+                });
+				paths.push(path);
+			});
+			
+            polygon = new google.maps.Polygon({
+                map: map,
+				paths: paths,
+                fillColor: 'transparent'
+                
+            });
+
+			var boundsChangedListener = google.maps.event.addListenerOnce(map, 'bounds_changed', function () {
+				if(!mapPanned) {
+				
+					var psw = map.getProjection().fromLatLngToPoint(polyBounds.getSouthWest());
+					var pne = map.getProjection().fromLatLngToPoint(polyBounds.getNorthEast());
+
+					var zoom = map.getZoom();
+					var scale = 1 << zoom;
+
+					if((pne.x - psw.x)*scale >= vMapWidth) {
+						map.setZoom(zoom-1);
+					}
+				
+					if (map.getZoom() > 16) {
+						map.setZoom(16);
+					}
+				
+					offsetCenter(polyBounds.getCenter(), offsetX, offsetY);
+					mapPanned = !mapPanned;
+				}	
+			});
+			mapListeners.push(boundsChangedListener);
+			
+			map.fitBounds(polyBounds);
+
+			if(showTooltip) {	
+
+				var polygonMouseoverListener = google.maps.event.addListener(polygon, "mouseover", function(event) {
+					injectTooltip(event, polygon.content);
+				});
+    
+				var polygonMousemoveListener = google.maps.event.addListener(polygon, 'mousemove', function(event) {
+					moveTooltip(event);
+				});
+    
+				var polygonMouseoutListener = google.maps.event.addListener(polygon, 'mouseout', function(event) {
+					deleteTooltip(event);
+				});
+				
+				polygonListeners.push(polygonMouseoverListener);
+				polygonListeners.push(polygonMousemoveListener);
+				polygonListeners.push(polygonMouseoutListener);
+
+			}	
+
+            fpolies.push(polygon);
+        }
+
+        if (map.getZoom() >= 13) {
+            polyLabels.forEach(function (pl) {
+                pl.setMap(map);
+            });
+        } else {
+            polyLabels.forEach(function (pl) {
+                pl.setMap(null);
+            });
+        }
+
+        var zoomChangedListener = google.maps.event.addListener(map, 'zoom_changed', function () {
+
+			if (map.getZoom() >= 13) {
+                polyLabels.forEach(function (pl, index) {
+                    pl.setMap(map);
+                });
+            } else {
+                polyLabels.forEach(function (pl, index) {
+                    pl.setMap(null);
+                });
+            }
+        });
+        mapListeners.push(zoomChangedListener);
+    }
+}
+}