mapping-component-package-jp 0.2.5 → 0.2.7

package/package.json

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

package/src/js/mapEncapsulation/map.common.js

@@ -93,4 +93,52 @@ function formatBlockLabel(Id, locname, locarea, fontSize) {
     return { nameWidth: nameWidth, areaWidth: areaWidth };
 }
 
-export { projectMercator, tile2latLng, diffLatLng2Meters, formatBlockLabel, get_FillColorOpacity, get_FillColor }
+function formatBlockLabelMobile(Id, locname, locarea, fontFamily, fontSize, fontWeight) {
+    var ne = document.createElement("div");
+    ne.id = 'locname' + Id;
+    ne.style.display = "inline-block";
+    ne.style.fontFamily = fontFamily;
+    ne.style.fontSize = fontSize + 'px';
+    ne.style.fontWeight = fontWeight;
+    ne.textContent = locname;
+
+    var ae = document.createElement("div");
+    ae.id = 'locarea' + Id;
+    ae.style.display = "inline-block";
+    ae.style.fontFamily = fontFamily;
+    ae.style.fontSize = fontSize + 'px';
+    ne.style.fontWeight = fontWeight;
+    ae.textContent = locarea;
+
+    var nce = document.createElement("div");
+    nce.id = 'locnameContainer' + Id;
+    nce.style.position = "absolute";
+    nce.style.top = "0";
+    nce.style.left = "-1000px";
+
+    var ace = document.createElement("div");
+    ace.id = 'locareaContainer' + Id;
+    ace.style.position = "absolute";
+    ace.style.top = "0";
+    ace.style.left = "-1000px";
+
+    nce.appendChild(ne);
+    ace.appendChild(ae);
+    document.body.appendChild(nce);
+    document.body.appendChild(ace);
+
+    var nameElem = document.getElementById('locname' + Id);
+    var areaElem = document.getElementById('locarea' + Id);
+    var nameContainerElem = document.getElementById('locnameContainer' + Id);
+    var areaContainerElem = document.getElementById('locareaContainer' + Id);
+
+    var nameWidth = nameElem.clientWidth;
+    var areaWidth = areaElem.clientWidth;
+
+    nameContainerElem.remove();
+    areaContainerElem.remove();
+
+    return { nameWidth: nameWidth+1, areaWidth: areaWidth+1 };
+}
+
+export { projectMercator, tile2latLng, diffLatLng2Meters, formatBlockLabel, formatBlockLabelMobile, get_FillColorOpacity, get_FillColor }

package/src/js/mapEncapsulation/mapOverlayManager.js

@@ -1,4 +1,4 @@
-import { diffLatLng2Meters, formatBlockLabel, get_FillColorOpacity, get_FillColor } from './map.common';
+import { diffLatLng2Meters, formatBlockLabel, formatBlockLabelMobile, get_FillColorOpacity, get_FillColor } from './map.common';
 import { ClearHTML } from '../../utils/mapUtils';
 import { circleToPolygon } from './circle.functions';
 import { IQLPolygonCustomEdit } from './shapes/polygon.customedit';
@@ -131,24 +131,28 @@ export class MapOverlayManager {
         var labelLat = polyCentroidCenter.y;
         var labelLon = polyCentroidCenter.x;
         var areaText = `${location.Area} ha`;
-        var bl = formatBlockLabel(location.Id, location.LocationName, areaText, 8);
-
-        console.log('bl', bl);
+        var bl = formatBlockLabelMobile(
+            location.Id, 
+            location.LocationName, 
+            areaText, 
+            location.LabelFontFamily, 
+            location.LabelFontSize, 
+            location.LabelFontWeight, 
+        );
 
-        var svgText = `<svg viewBox="0 0 200 10" xmlns="http://www.w3.org/2000/svg">
-                        <text x="0" y="1" fill="${location.LabelColor}" font-family="Roboto, "Helvetica Neue", sans-serif" font-size="8px">${ClearHTML.clearString(location.LocationName)}</text>
-                        </svg>`;
-        
-        console.log('svgText', svgText);
+        var svgText = '<svg width="'+(bl.nameWidth)+'" height="'+location.LabelFontSize+'" viewBox="0 0 '+bl.nameWidth+' '+location.LabelFontSize+'" xmlns="http://www.w3.org/2000/svg">';
+        svgText += '<text x="0" y="'+location.LabelFontSize+'" fill="'+location.LabelColor+'" font-family="'+location.LabelFontFamily+'" font-size="'+location.LabelFontSize+'px" font-weight="'+location.LabelFontWeight+'">'+location.LocationName+'</text>';
+        svgText += '</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),
+                anchor: new google.maps.Point(bl.nameWidth / 2, location.LabelFontSize),
                 url: `data:image/svg+xml;utf-8, ${svgText}`
             },
-            id: `pl_${location.Id}`
+            id: `pl_${location.Id}`,
+            zIndex: location.LabelZIndex
         });
         polyLabels.push(polyLabel);
     }