mapping-component-package-jp 0.1.6 → 0.1.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mapping-component-package-jp",
-  "version": "0.1.6",
+  "version": "0.1.9",
   "description": "",
   "main": "dist/index.js",
   "module": "dist/index.mjs",

package/src/js/mapEncapsulation/mapOverlayManager.d.ts

@@ -5,6 +5,13 @@ export class MapOverlayManager {
     eventHandlers_set(eH: any): void;
     eventHandlers_get(): any;
 
+    // Getters
+    center_get(): any;
+    zoom_get(): number;
+    fpolies_get(): any;
+    locPolygons_get(): any;
+	overlayMapTypes_get(): any;
+
     // Shape Management
     Shape_IsShapeHole(ShapeId: string | number): boolean;
     Shape_PolygonCustomEdit_Add(isHole: boolean, config: any, isMobile: boolean, mapWidth: number, mapHeight: number, vmWidth: number, offsetX: number, offsetY: number): string;
@@ -16,6 +23,8 @@ export class MapOverlayManager {
     Shape_Delete(ShapeId: string | number, EventHandlers?: any): void;
     Shape_DeleteAll(isMobile?: boolean): void;
     Shape_Convert(ShapeId: string | number): string;
+    SelectedShape_GetType(ShapeId: string | number, shapeTypes: any): string;
+    SelectedShape_GetByShapeId(ShapeId: string | number): any;
 
     // Rendering Methods
     RenderFields(locations: any[], properties: any, editMode?: boolean): void;
@@ -43,6 +52,7 @@ export class MapOverlayManager {
     // Field Management
     TriggerField_ChangeEvent(): any;
     DrawField_AttachEvents(eHandlers: any): void;
+    DrawField_DetachEvents(StrokeColor: string, SelectedShapeId: string): void;
     clearBackgroundFields(): void;
     checkForBackgroundFieldOverlaps(): boolean;
 

package/src/js/mapEncapsulation/mapOverlayManager.js

@@ -45,6 +45,7 @@ export class MapOverlayManager {
 	var dpolylines = [];
 	var rpolylines = [];
 	var fmarkers = [];
+    var locations = [];
 
 	var currentPolylineCustomEdit = null;
 	var currentPolygonCustomEdit = null;
@@ -308,6 +309,27 @@ export class MapOverlayManager {
         return eventHandlers;
     }; 
 
+    _this.center_get = function () {
+        return map.getCenter();
+    }
+
+    _this.zoom_get = function () {
+        return map.getZoom();
+    }
+
+    _this.fpolies_get = function () {
+        return fpolies;
+    }
+
+    _this.locPolygons_get = function () {
+        return locPolygons;
+    }
+
+	_this.overlayMapTypes_get = function() {
+		return map.overlayMapTypes;
+	}
+
+
     //#DRAW/DISPLAY FIELDS
     _this.RenderFields = function (locations, properties) {
         var mbounds = new google.maps.LatLngBounds();
@@ -609,6 +631,90 @@ export class MapOverlayManager {
     
 	// #endregion
     
+    _this.DrawField_DrawLocation = function (locationsJson, locationId, shapeConfig) {
+
+        locations = JSON.parse(locationsJson, true);
+		
+		var cpid;
+
+        locations.forEach(function (location) {
+
+            if (location && location.Poly && location.Poly.length > 0 && location.Id > 0) {
+
+                var polies = location.Poly.split(',');
+				
+				var paths = [];
+                polies.forEach(function (poly, pIndex) {
+                    var path = [];
+                    poly.forEach(function (v, idx) {
+                        path.push(new google.maps.LatLng(parseFloat(v[1]), parseFloat(v[0])));
+                    });
+					paths.push(path);
+
+                    if (location.Id == locationId) {
+
+                        var pArea = google.maps.geometry.spherical.computeSignedArea(path);
+                        var isHole = pArea > 0 && pIndex !== 0;
+						cpid = Date.now() + Math.floor(Math.random() * 100000);
+
+                        var polygon = new google.maps.Polygon({
+                            map: map,
+                            path: path,
+                            id: cpid,
+                            content: location.LocationName,
+                            strokeColor: shapeConfig.StrokeColor_DrawEditShape,
+                            strokeOpacity: shapeConfig.StrokeOpacity,
+                            strokeWeight: shapeConfig.StrokeWeight,
+                            fillColor: shapeConfig.FillColor,
+                            fillOpacity: shapeConfig.FillOpacity,
+                            zIndex: isHole ? 10200 : 10100,
+                            clickable: true,
+                            editable: false,
+                            draggable: true,
+                            isPolygon: true,
+                            isCircle: false,
+                            isCircleSector: false,
+                            isCircleSegment: false,
+                            isHole: isHole,
+                            latitude: location.Latitude,
+                            longitude: location.Longitude,
+                            poly: location.Poly,
+                            area: location.Area,
+                            perimeter: location.Perimeter
+                        });
+
+                        locPolygons.push(polygon);
+                    }    
+                });
+				
+				if (location.Id != locationId) {
+
+                    cpid = Date.now() + Math.floor(Math.random() * 100000);
+
+                    var polygon = new google.maps.Polygon({
+                        map: map,
+                        paths: paths,
+                        id: cpid,
+                        content: location.LocationName,
+                        strokeColor: shapeConfig.StrokeColor_Other,
+                        strokeOpacity: shapeConfig.StrokeOpacity,
+                        strokeWeight: shapeConfig.StrokeWeight,
+                        fillColor: shapeConfig.FillColor,
+                        fillOpacity: 0.3, //shapeConfig.FillOpacity,
+                        zIndex: 10000,
+                        clickable: false,
+                        editable: false,
+                        draggable: false
+                    });
+
+                    polygons.push(polygon);
+				}					
+            }
+        });
+		
+		//console.log(polygons);
+	}
+
     _this.Shape_IsShapeHole = function(ShapeId) {
         let isHole = false;
         locPolygons.forEach(function (polygon, index) {
@@ -620,6 +726,25 @@ export class MapOverlayManager {
 
     }
 
+    _this.SelectedShape_GetType = function (ShapeId, shapeTypes) {
+        var polygon = locPolygons.find(p => p.id == ShapeId);
+
+        if (polygon.id == ShapeId) {
+            if (polygon.isPolygon) {
+                return shapeTypes.ShapeTypeId_Polygon;
+            } else if (polygon.isCircle) {
+                return shapeTypes.ShapeTypeId_Circle;
+            } else if (polygon.isCircleSector) {
+                return shapeTypes.ShapeTypeId_CircleSector;
+            } else if (polygon.isCircleSegment) {
+                return shapeTypes.ShapeTypeId_CircleSegment;
+            }
+        }
+    }
+
+    _this.SelectedShape_GetByShapeId = function(ShapeId) {
+        return locPolygons.find(p => p.id == ShapeId);
+    }
 
     _this.selectShape = function(shapeId, selectedStyle, unselectedStyle) {
         console.log('Selecting shape:', shapeId);
@@ -2010,7 +2135,7 @@ export class MapOverlayManager {
             return { perimeter, area, path };
         }
 
-        _this.DrawField_AttachEvents = function (eHandlers) {
+        _this.DrawField_AttachEvents = function (eHandlers, ShapeId, StrokeColor) {
 
             locPolygons.forEach(function (polygon) {
     
@@ -2028,10 +2153,25 @@ export class MapOverlayManager {
                     eHandlers["ShapeSelect"](this.id);
                 });
                 polygonListeners.push(mclListener);
+
+                if (polygon.id == ShapeId && StrokeColor !== undefined) {
+                    polygon.setOptions({ strokeColor: StrokeColor, strokeWeight: 3 });
+                }    
+
             });
     
         }
 
+        _this.DrawField_DetachEvents = function (StrokeColor, SelectedShapeId) {
+            polygonListeners_clear();
+
+            locPolygons.forEach(function (polygon) {
+                if(polygon.id == SelectedShapeId) {
+				    polygon.setOptions({ strokeColor: StrokeColor });
+			    }	    
+            });
+        }
+
         _this.PolygonCustomEdit_Edit = function (ShapeId, isMobile) {
             var polygonCE = locPolygons.find(p => p.id == ShapeId);
             if (polygonCE) {