mapping-component-package-jp 0.2.0 → 0.2.3

package/package.json

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

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

@@ -35,7 +35,7 @@ export class MapOverlayManager {
 
     // Rendering Methods
     RenderFields(locations: any[], properties: any, editMode?: boolean): void;
-    RenderFieldsNew(locations: any[], properties: any, editMode?: boolean): void;
+    RenderFieldsMobile(locations: any[]): void;
     RenderRegionFarms(locationsJson: any, icon: any, fitBounds: boolean, offsetX: number, offsetY: number): void;
     RenderRegions(regionLocations: any[], properties: any, farmLocations: any[], icon: any, offsetX: number, offsetY: number): void;
     RenderBackgroundFields(locations: any[], properties: any): void;

package/src/js/mapEncapsulation/mapOverlayManager.js

@@ -95,6 +95,12 @@ export class MapOverlayManager {
         mapListeners.push(zoomChangedListener);
     }
 
+    function polygonsToMapMobile_set() {
+        polygons.forEach(function (p) {
+            p.setMap(map);
+        });
+    }    
+
     function AddLabel(location, labelColour = "white") {
         var polyCentroidCenter = get_polygon_centroid(location.Poly);
         var labelLat = polyCentroidCenter.y;
@@ -120,6 +126,29 @@ export class MapOverlayManager {
         polyLabels.push(polyLabel);
     }
 
+    function AddLabelMobile(location) {
+        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="${location.LabelColor}" font-family="Arial, sans-serif" font-size="8px">${ClearHTML.clearString(location.LocationName)}</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(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] };
@@ -144,6 +173,14 @@ export class MapOverlayManager {
         });
     }
 
+    function fields_BindPolyEventsMobile() {
+        polygons.forEach(function (poly) {
+            polygonListeners.push(google.maps.event.addListener(poly, 'click', function (event) {
+                eventHandlers["FieldOnClick"](this.id);
+            }));
+        });
+    }
+
     function farms_BindMarkerEvents() {
         deleteTooltip();
         fmarkers.forEach(function (marker) {
@@ -335,30 +372,6 @@ export class MapOverlayManager {
 		return map.overlayMapTypes;
 	}
 
-    function polygonsToMap_setNew() {
-        [...polygons, ...locPolygons].forEach(p => p.setMap(map));
-
-        const showLabels = map.getZoom() >= 13;
-        polyLabels.forEach(pl => pl.setMap(showLabels ? map : null));
-
-        if (zoomChangedListener) {
-            google.maps.event.removeListener(zoomChangedListener);
-        }
-
-        zoomChangedListener = map.addListener('zoom_changed', function () {
-            const currentZoom = map.getZoom();
-            const shouldShow = currentZoom >= 13;
-        
-            polyLabels.forEach(pl => {
-                if (shouldShow && !pl.getMap()) pl.setMap(map);
-                if (!shouldShow && pl.getMap()) pl.setMap(null);
-            });
-        });
-
-        mapListeners.push(zoomChangedListener);
-    }
-
-    //#DRAW/DISPLAY FIELDS
     _this.RenderFields = function (locations, properties) {
         var mbounds = new google.maps.LatLngBounds();
 
@@ -421,8 +434,7 @@ export class MapOverlayManager {
         polygonsToMap_set();
     };
 
-    //#DRAW/DISPLAY FIELDS
-    _this.RenderFieldsNew = function (locations, properties) {
+    _this.RenderFieldsMobile = function (locations) {
         var mbounds = new google.maps.LatLngBounds();
 
         locations.forEach(function (location) {
@@ -430,60 +442,31 @@ export class MapOverlayManager {
                 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,
-                    };
+                    strokeColor: location.MapLocationFeature.StrokeColor,
+                    strokeOpacity: location.MapLocationFeature.StrokeOpacity,
+                    strokeWeight: location.MapLocationFeature.StrokeWeight,
+                    fillColor: location.MapLocationFeature.FillColor,
+                    fillOpacity: location.MapLocationFeature.FillOpacity,
+                    zIndex: location.MapLocationFeature.ZIndex
                 }
+                
+                if (properties.showLabel) AddLabelMobile(location);
 
                 var polygon = new google.maps.Polygon(polygonOptions);
                 polygons.push(polygon);
-                if (properties.labelVisable) AddLabel(location);
             }
         });
 
-        polygonsToMap_setNew();
+        polygonsToMapMobile_set();
 
         map.fitBounds(mbounds);
 
-        fields_BindPolyEvents();
+        fields_BindPolyEventsMobile();
         
-        if(properties.icon){
-            AdvancedMarker(locations, properties.icon);
-        }
-
     };
 
     _this.destroy = function () {