mapgl version updated

demo/index.ts

@@ -37,6 +37,7 @@ if (form) {
         window.control = new RulerControl(map, {
             position: 'centerRight',
             mode,
+            markerBurningArea: 8,
         });
         window.ruler = window.control.getRuler();
     };
@@ -64,6 +65,7 @@ if (languageSelect) {
 window.control = new RulerControl(map, {
     position: 'centerRight',
     mode: 'polygon',
+    markerBurningArea: 8,
 });
 window.ruler = window.control.getRuler();
 window.control.getRuler().setPoints([

package.json

@@ -30,7 +30,7 @@
   },
   "devDependencies": {
     "@2gis/ts-docs-generator": "^0.1.0",
-    "@2gis/mapgl": "^1.25.0",
+    "@2gis/mapgl": "^1.67.0",
     "@types/jest": "^27.4.0",
     "@types/jest-image-snapshot": "^4.3.1",
     "@types/puppeteer": "^5.4.4",

src/control/control.ts

@@ -31,7 +31,7 @@ export class Control {
         this._wrap.style.userSelect = 'none';
         this._wrap.innerHTML = content;
 
-        this._position = position;
+        this._position = position ?? 'topLeft';
         this._controlPane = (map as any)._controlPane;
         this._container = this._controlPane.getContainerByPosition(position);
         this._container?.append(this._wrap);

src/control/index.ts

@@ -35,6 +35,11 @@ export interface RulerControlOptions extends mapgl.ControlOptions {
      * Specifies whether the ruler should be enabled after control initialization.
      */
     enabled?: boolean;
+
+    /**
+     * Specifies the size of the marker burning area within the radius of the ruler joint.
+     */
+    markerBurningArea?: RulerOptions['markerBurningArea'];
 }
 
 /**
@@ -82,6 +87,7 @@ export class RulerControl extends Control {
             polylineOptions: options.polylineOptions,
             jointFactory: options.jointFactory,
             snapPointFactory: options.snapPointFactory,
+            markerBurningArea: options.markerBurningArea,
         });
 
         this.render();

src/joint.ts

@@ -43,8 +43,13 @@ export class Joint extends Evented<EventTable> {
         distance: number,
         enableOnInit,
         private showLabel: boolean,
+        private markerBurningArea?: number,
         private renderCustomMarker: JointFactory = (map, coordinates, { isFirst, interactive }) =>
-            createHtmlMarker(map, coordinates, { big: isFirst, interactive }),
+            createHtmlMarker(map, coordinates, {
+                big: isFirst,
+                interactive,
+                markerBurningArea: this.markerBurningArea,
+            }),
     ) {
         super();
         this.id = ++lastId;

src/ruler.ts

@@ -85,6 +85,11 @@ export interface RulerOptions {
     jointFactory?: JointFactory;
 
     snapPointFactory?: SnapPointFactory;
+
+    /**
+     * Specifies the size of the marker burning area within the radius of the ruler joint.
+     */
+    markerBurningArea?: number;
 }
 
 interface RedrawFlags {
@@ -114,6 +119,7 @@ export class Ruler extends Evented<RulerEventTable> {
     private polylineOptions: RulerPolylineOptions;
     private jointFactory?: RulerOptions['jointFactory'];
     private snapPointFactory?: RulerOptions['snapPointFactory'];
+    private markerBurningArea?: RulerOptions['markerBurningArea'];
 
     /**
      * Example:
@@ -157,6 +163,7 @@ export class Ruler extends Evented<RulerEventTable> {
         this.polylineOptions = options.polylineOptions ?? {};
         this.jointFactory = options.jointFactory;
         this.snapPointFactory = options.snapPointFactory;
+        this.markerBurningArea = options.markerBurningArea;
 
         options.points?.forEach((point, i) => this.addPoint(point, i));
 
@@ -303,6 +310,7 @@ export class Ruler extends Evented<RulerEventTable> {
             distance,
             this.enabled,
             this.labelVisibilitySettings.perimeter,
+            this.markerBurningArea,
             this.jointFactory,
         );
 

src/utils.ts

@@ -117,13 +117,17 @@ export function createHtmlMarker(
         big?: boolean;
         interactive?: boolean;
         style?: string;
+        markerBurningArea?: number;
     },
 ): mapgl.HtmlMarker {
     return new mapgl.HtmlMarker(map, {
         coordinates,
         html: `<div class="${css.joint}${opts.big ? ' ' + css.big : ''}"></div`,
         zIndex: styleDefault.jointPhase,
         interactive: opts.interactive ?? false,
+        labeling: opts.markerBurningArea
+            ? { type: 'invincible', width: opts.markerBurningArea, height: opts.markerBurningArea }
+            : undefined,
     });
 }