mapping-component-package-jp 0.2.8 → 0.2.10

package/package.json

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

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

@@ -138,7 +138,7 @@ function formatBlockLabelMobile(Id, locname, locarea, fontFamily, fontSize, font
     nameContainerElem.remove();
     areaContainerElem.remove();
 
-    return { nameWidth: nameWidth+2, areaWidth: areaWidth+2 };
+    return { nameWidth: nameWidth+5, areaWidth: areaWidth+5 };
 }
 
 export { projectMercator, tile2latLng, diffLatLng2Meters, formatBlockLabel, formatBlockLabelMobile, get_FillColorOpacity, get_FillColor }

package/src/js/mapEncapsulation/shapes/polygon.customedit.js

@@ -69,6 +69,7 @@ export class IQLPolygonCustomEdit {
     let handleIconDown;
 
     if (isMobile) {
+/*
       const svgpi =
         '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="48" height="48">' +
         '<path fill="rgba(255,255,255,0.01)" d="M 0, 24 a 24,24 0 1,0 48,0 a 24,24 0 1,0 -48,0" />' +
@@ -79,7 +80,19 @@ export class IQLPolygonCustomEdit {
         url: "data:image/svg+xml;charset=UTF-8;base64," + btoa(svgpi),
         anchor: new google.maps.Point(24, 24)
       };
+*/
+      // 1. Solid Point Icon (24x24)
+      const svgpi =
+        '<svg xmlns="http://w3.org" viewBox="0 0 24 24" width="24" height="24">' +
+        '<path fill="#ffffff" stroke="#303030" stroke-width="1.5" d="M12 12 m-4,0 a 4,4,0 0,1 8,0 a 4,4 0 0,1 -8,0z" />' +
+        "</svg>";
 
+      pointIcon = {
+        url: "data:image/svg+xml;charset=UTF-8;base64," + btoa(svgpi),
+        anchor: new google.maps.Point(12, 12) // Perfectly centered
+      };
+
+/*
       const svgmpi =
         '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="48" height="48">' +
         '<path fill="rgba(255,255,255,0.01)" d="M 0, 24 a 24,24 0 1,0 48,0 a 24,24 0 1,0 -48,0" />' +
@@ -90,7 +103,19 @@ export class IQLPolygonCustomEdit {
         url: "data:image/svg+xml;charset=UTF-8;base64," + btoa(svgmpi),
         anchor: new google.maps.Point(24, 24)
       };
+*/
+      // 2. Ghost/Midpoint Icon (24x24)
+      const svgmpi =
+        '<svg xmlns="http://w3.org" viewBox="0 0 24 24" width="24" height="24">' +
+        '<path fill="rgba(255,255,255,0.4)" stroke="#303030" stroke-width="0.5" d="M12 12 m-4,0 a 4,4,0 0,1 8,0 a 4,4 0 0,1 -8,0z" />' +
+        "</svg>";
+
+      midPointIcon = {
+        url: "data:image/svg+xml;charset=UTF-8;base64," + btoa(svgmpi),
+        anchor: new google.maps.Point(12, 12)
+      };
 
+/*
       const svgup =
         '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">' +
         '<g transform="scale(0.4 0.4)">' +
@@ -103,7 +128,20 @@ export class IQLPolygonCustomEdit {
         url: "data:image/svg+xml;charset=UTF-8;base64," + btoa(svgup),
         anchor: new google.maps.Point(30, 60)
       };
+*/
+
+      // 3. Handle Up (Tightened Viewbox)
+      const svgup =
+        '<svg version="1.1" xmlns="http://w3.org" viewBox="0 0 24 52" width="24" height="52">' +
+        '<g transform="scale(0.5 0.5) translate(0, 0)">' +
+        '<path style="fill:#f1a81e;" d="M38.853,5.324c-7.098-7.098-18.607-7.098-25.706,0C6.751,11.72,6.031,23.763,11.459,31L26,52l14.541-21C45.969,23.763,45.249,11.72,38.853,5.324z"/>' +
+        "</g></svg>";
 
+      handleIconUp = {
+        url: "data:image/svg+xml;charset=UTF-8;base64," + btoa(svgup),
+        anchor: new google.maps.Point(13, 52) // Pointing at the bottom tip
+      };
+/*
       const svgdown =
         '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">' +
         '<g transform="scale(0.4 0.4) rotate(180 26 26)">' +
@@ -116,6 +154,19 @@ export class IQLPolygonCustomEdit {
         url: "data:image/svg+xml;charset=UTF-8;base64," + btoa(svgdown),
         anchor: new google.maps.Point(30, 0)
       };
+*/
+      // 4. Handle Down (Tightened Viewbox)
+      const svgdown =
+        '<svg version="1.1" xmlns="http://w3.org" viewBox="0 0 24 52" width="24" height="52">' +
+        '<g transform="scale(0.5 0.5) rotate(180 26 26)">' +
+        '<path style="fill:#f1a81e;" d="M38.853,5.324c-7.098-7.098-18.607-7.098-25.706,0C6.751,11.72,6.031,23.763,11.459,31L26,52l14.541-21C45.969,23.763,45.249,11.72,38.853,5.324z"/>' +
+        "</g></svg>";
+
+      handleIconDown = {
+        url: "data:image/svg+xml;charset=UTF-8;base64," + btoa(svgdown),
+        anchor: new google.maps.Point(13, 0) // Pointing at the top tip
+      };
+
     } else {
       pointIcon = {
         path: "M4 4m-4,0a4,4,0 0,1 8,0a 4,4 0 0,1 -8,0z",
@@ -189,6 +240,12 @@ export class IQLPolygonCustomEdit {
     const vertexGhostDragEnd = function() {
       const linked = this.marker;
       if (!linked) return;
+
+      for (let j = 0; j < handles.length; j++) {
+        const m = handles[j]?.marker;
+        if (m) m.setIcon(pointIcon);
+      }
+
       const pos = this.getPosition();
       if (!pos) return;
 
@@ -293,6 +350,7 @@ export class IQLPolygonCustomEdit {
     }
 
     const vertexDragEnd = function() {
+      this.setIcon(pointIcon);
       google.maps.event.trigger(
         polygon,
         "update_at",
@@ -383,7 +441,8 @@ export class IQLPolygonCustomEdit {
           map,
           icon,
           draggable: true,
-          raiseOnDrag: false
+          raiseOnDrag: false,
+          optimized: false
         });
 
         google.maps.event.addListener(vm, "dragstart", vertexDragStart);
@@ -427,7 +486,8 @@ export class IQLPolygonCustomEdit {
           map,
           icon: midPointIcon,
           draggable: true,
-          raiseOnDrag: false
+          raiseOnDrag: false,
+          optimized: false
         });
         gm.marker = vertexMarker;
         google.maps.event.addListener(gm, "dragstart", vertexGhostDragStart);