mapping-component-package-jp 0.0.37 → 0.0.39

package/package.json

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

package/src/components/JPMapComponent.tsx

@@ -32,8 +32,6 @@ const mapOptions = {
   mapTypeId: 'hybrid', //this causes the reloading of tiles if const mapOptions is inside the component
   mapTypeControl: true,
   zoomControl: true,
-  //fullScreenControl: false,
-  //streetViewControl: false,
 };
 
 

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

@@ -23,7 +23,7 @@ export class MapOverlayManager {
     RenderBackgroundFields(locations: any[], properties: any): void;
     RenderSAAdministrative(saAdministrativeJson: any[], selectedSAProvince: number, selectedSADM: number, selectedSALM: number, selectedSAWard: number, offsetX: number, offsetY: number, vMapWidth: number, isDashboard: boolean): void;
     RenderSACadastral(saCadastralJson: any, offsetX: number, offsetY: number, vmWidth: number, isDashboard: boolean, fitBounds: boolean): void;
-
+    RenderGPRegions(gpRegionsJson: any[], gsByRegionJson: any[], selectedRegion: number, offsetX: number, offsetY: number, vMapWidth: number, isDashboard: boolean): void;
     // Shape Selection and Management
     selectShape(shapeId: string | number, selectedStyle: any, unselectedStyle: any): void;
     isShapeInLocPolygons(shapeId: string | number): boolean;

package/src/js/mapEncapsulation/mapOverlayManager.js

@@ -2818,6 +2818,202 @@ export class MapOverlayManager {
         SACadastral_DrawSACadastral(saCadastralJson, offsetX, offsetY, vmWidth, isDashboard, fitBounds);
     }
 
+    function Display_DrawGPRegions(locationsJson, selectedRegion, offsetX, offsetY) {
+        var polygon = null;
+		locations = locationsJson;
+
+        locations.forEach(function (location) {
+			if(location.id == selectedRegion || selectedRegion === 0) { 
+			    if (location && location.poly && location.poly.length > 0) {
+				    var dp = google.maps.geometry.encoding.decodePath(location.poly, 5);
+
+				    polygon = new google.maps.Polygon({
+					    map: map,
+					    path: dp,
+					    strokeColor: '#000000',
+					    strokeOpacity: 1,
+					    strokeWeight: 3,
+					    fillColor: '#000000',
+					    fillOpacity: 0.3,
+					    id: location.id,
+					    content: location.regionName,
+					    zIndex: 10000
+				    });
+				    fpolies.push(polygon);
+			    }
+			}
+		});	
+	}
+    
+    function Display_DrawGSByRegion(locationsJson, offsetX, offsetY, vMapWidth) {
+		
+		locations = locationsJson;
+        bounds = new google.maps.LatLngBounds();
+		var mapPanned = false;
+		
+		locations.forEach(function (location) {
+		
+			var mpos = new google.maps.LatLng(location.latitude,location.longitude);
+			bounds.extend(new google.maps.LatLng(location.latitude,location.longitude));
+			
+			var parser = new DOMParser();
+			
+			var svgIconString = '<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none">';
+			svgIconString += '<g transform="translate(0.5, 4)"><path d="M0,0 32,0 16,27.7Z" stroke="#000000" stroke-width="1" fill="'+location.iconColor+'" fill-opacity="0.9"></path></g>';
+			svgIconString += '</svg>';
+
+			var svgIcon = parser.parseFromString(svgIconString, 'image/svg+xml').documentElement;
+
+            var fmarker = new google.maps.marker.AdvancedMarkerElement({
+                map: map,
+                position: mpos,
+                content: svgIcon,
+				zIndex: 10002,
+            });
+			fmarker.setAttribute("id", location.id+'|'+location.Name+'|'+location.CompanyName+'|'+location.JSEAbbreviation+'|'+location.Label+'|'+location.Capacity+'|'+location.SagisCode);	
+			fmarkers.push(fmarker);	
+		});
+
+		if(locations.length > 1) {
+			var boundsChangedListener = google.maps.event.addListenerOnce(map, 'bounds_changed', function () {
+				if(!mapPanned) {
+				
+					var psw = map.getProjection().fromLatLngToPoint(bounds.getSouthWest());
+					var pne = map.getProjection().fromLatLngToPoint(bounds.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(bounds.getCenter(), offsetX, offsetY);
+					mapPanned = !mapPanned;
+				}	
+			});
+			mapListeners.push(boundsChangedListener);
+
+			map.fitBounds(bounds);  
+
+		} else if(locations.length == 1) {
+
+
+			var boundsChangedListener = google.maps.event.addListenerOnce(map, 'bounds_changed', function () {
+				if(!mapPanned) {
+				
+					offsetCenter(map.getCenter(), offsetX, offsetY);
+					mapPanned = !mapPanned;
+
+				}
+			});
+			
+			map.panTo(new google.maps.LatLng(locations[0].latitude,locations[0].longitude));
+			map.setZoom(9);
+
+		}
+		//map.fitBounds(bounds);
+	}	
+
+    function GPRegions_DrawProductionRegions(gpRegionsJson, gsByRegionJson, selectedRegion, offsetX, offsetY, vMapWidth, isDashboard) {
+		locations = gpRegionsJson;
+
+		mapListeners_clear();
+        polygonListeners_clear();
+		markerListeners_clear();
+		fmarkers_clear();
+        fPolies_clear();
+
+        Display_DrawGPRegions(gpRegionsJson, selectedRegion, offsetX, offsetY);
+        GPRegions_BindPolyEvents(isDashboard);
+        
+		Display_DrawGSByRegion(gsByRegionJson, offsetX, offsetY, vMapWidth);
+        GSByRegion_BindPolyEvents(isDashboard);
+    }
+
+    function GPRegions_BindPolyEvents(isDashboard) {
+        deleteTooltip();
+
+        fpolies.forEach(function (poly) {
+            polygonListeners.push(google.maps.event.addListener(poly, 'mouseover', function (event) {
+                poly.setOptions({strokeColor: '#f1a81e', strokeWeight: 3, zIndex: 10012});
+                deleteTooltip();
+                injectTooltip(event, poly.content);
+            }));
+            polygonListeners.push(google.maps.event.addListener(poly, 'mousemove', moveTooltip));
+            polygonListeners.push(google.maps.event.addListener(poly, 'mouseout', function(event) {
+                poly.setOptions({strokeColor: '#000000', strokeWeight: 3, zIndex: 10002});
+                deleteTooltip();
+            }));
+            if(!isDashboard) {
+                polygonListeners.push(google.maps.event.addListener(poly, 'click', function (event) {
+                    deleteTooltip();
+                    eventHandlers["CPRPolyOnClick"]({
+                        type: 'SUCCESS',
+                        message: 'CPRPoly clicked',
+                        code: 200,
+                        data: poly.id,
+                    });    
+                }));
+            }
+        });
+    }
+
+    function GSByRegion_BindPolyEvents(isDashboard) {
+		
+		deleteTooltip();
+
+		fmarkers.forEach(function (marker) {
+            var ttc = marker.id.split('|'); 
+            var ttdata = '<b>'+ttc[1]+'</b><br>';
+            ttdata += 'Company: '+ttc[2]+' ('+ttc[3]+')<br>';
+            ttdata += 'Type: '+ttc[4]+'<br>';
+            if(parseInt(ttc[5]) > 0) {
+                ttdata += 'Capacity: '+ttc[5]+'t<br>';
+            } else {
+                ttdata += 'Capacity: n/a<br>';
+            }	
+            if(parseInt(ttc[6]) > 0) {
+                ttdata += 'Sagis Code: '+ttc[6];
+            } else {
+                    ttdata += 'Sagis Code: n/a';
+            }	
+            var mclickListener = marker.addListener('click', function (event) {
+                eventHandlers["GSMarkerOnClick"]({
+                    type: 'SUCCESS',
+                    message: 'GSMarker clicked',
+                    code: 200,
+                    data: ttc[0],
+                });
+            });
+            markerListeners.push(mclickListener);
+            
+            var moverListener = marker.content.addEventListener('mouseover', function (event) {
+                deleteTooltip();
+                injectMarkerTooltip(event, ttdata);
+            });
+            markerListeners.push(moverListener);
+                
+            var mmoveListener = marker.content.addEventListener('mousemove', function (event) {
+                moveMarkerTooltip(event);
+            });
+            markerListeners.push(mmoveListener);
+                 
+            var moutListener = marker.content.addEventListener('mouseout', function (event) {
+                deleteTooltip(event);
+            });
+            markerListeners.push(moutListener);
+        });
+    }
+
+    _this.RenderGPRegions = function(gpRegionsJson, gsByRegionJson, selectedRegion, offsetX, offsetY, vMapWidth, isDashboard) {
+        GPRegions_DrawProductionRegions(gpRegionsJson, gsByRegionJson, selectedRegion, offsetX, offsetY, vMapWidth, isDashboard);
+    }    
+
     _this.NDVI_AddOverlay_DEA = function (locationJson, ndviTileURL, validGMTiles, eosLocationCropperRefId, eosViewId, spinnerURL, spinnerLat, spinnerLon, paletteId, colorMapTypeIdValue, isFullView, onComplete) {
 
         //console.log('_this.NDVI_AddOverlay_DEA');
@@ -2867,8 +3063,6 @@ export class MapOverlayManager {
             spinnerImg.height = 120;
             spinnerImg.style.transform = 'translate(0, 50%)';
             const position = new google.maps.LatLng(centerLat, centerLng);
-
-            //console.log(spinnerImg);
  
             var spinnerMarker = new google.maps.marker.AdvancedMarkerElement({
                 map: map,