mapping-component-package-jp 0.2.2 → 0.2.4

package/package.json

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

package/src/js/mapEncapsulation/mapOverlayManager.js

@@ -126,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] };
@@ -430,6 +453,8 @@ export class MapOverlayManager {
                     fillOpacity: location.MapLocationFeature.FillOpacity,
                     zIndex: location.MapLocationFeature.ZIndex
                 }
+                
+                if (location.showLabel) AddLabelMobile(location);
 
                 var polygon = new google.maps.Polygon(polygonOptions);
                 polygons.push(polygon);