vue-maplibre-gl - npm Package Compare versions

Comparing version 5.3.8 to 5.4.0

dist/types/components/map.component.d.ts

 import { FitBoundsOptions, ValidLanguages } from '../types';
+import { ProjectionSpecification } from '@maplibre/maplibre-gl-style-spec';
 import { MapOptions, LngLat, LngLatLike, LngLatBounds, LngLatBoundsLike, WebGLSupportedVersions, Point, ControlPosition, CameraUpdateTransformFunction, RequestTransformFunction, AnimationOptions, CenterZoomBearing, PaddingOptions, PointLike, AttributionControlOptions, WebGLContextAttributesWithType, DragPanOptions, AroundCenterOptions } from 'maplibre-gl';
@@ -466,2 +467,5 @@ import { PropType, SlotsType, DefineComponent, ExtractPropTypes, VNode, RendererNode, RendererElement, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
     };
+    projection: {
+        type: PropType<ProjectionSpecification>;
+    };
 }>, () => VNode<RendererNode, RendererElement, {
@@ -931,2 +935,5 @@ [key: string]: any;
     };
+    projection: {
+        type: PropType<ProjectionSpecification>;
+    };
 }>> & Readonly<{
@@ -933,0 +940,0 @@ "onMap:boxzoomcancel"?: ((...args: any[]) => any) | undefined;

dist/types/plugins/draw/circle.mode.d.ts

@@ -19,2 +19,3 @@ import { AbstractDrawMode } from './mode.abstract.ts';
     setModel(model: DrawModel | undefined): void;
+    onOptionsUpdate(): void;
 }

dist/types/plugins/draw/circleStatic.mode.d.ts

@@ -10,2 +10,3 @@ import { AbstractDrawMode } from './mode.abstract.ts';
     private _circle;
+    private _minSizeLabel;
     constructor(plugin: DrawPlugin, map: Map, source: GeoJSONSource, model: DrawModel | undefined);
@@ -19,2 +20,3 @@ onViewportChange(): void;
     setPadding(): void;
+    onOptionsUpdate(): void;
 }

dist/types/plugins/draw/draw.control.d.ts

@@ -30,2 +30,5 @@ import { PositionProp, Position } from '../../components/controls/position.enum.ts';
     };
+    minAreaLabel: {
+        type: StringConstructor;
+    };
     pointerPrecision: {
@@ -62,2 +65,5 @@ type: PropType<PointerPrecisionOption>;
     };
+    minAreaLabel: {
+        type: StringConstructor;
+    };
     pointerPrecision: {
@@ -64,0 +70,0 @@ type: PropType<PointerPrecisionOption>;

dist/types/plugins/draw/mode.abstract.d.ts

@@ -28,2 +28,3 @@ import { DrawPlugin } from './plugin.ts';
     abstract setModel(model: DrawModel | undefined): void;
+    abstract onOptionsUpdate(): void;
 }

dist/types/plugins/draw/plugin.d.ts

@@ -23,2 +23,3 @@ import { DrawMode, DrawModel, DrawPluginOptions, DrawStyle, OnUpdateHandler } from './types.ts';
     setMinAreaColor(color: string | undefined): void;
+    setMinAreaLabel(label: string | undefined): void;
     zoomToModel(): void;
@@ -25,0 +26,0 @@ private removeStyles;

dist/types/plugins/draw/polygon.mode.d.ts

@@ -18,2 +18,3 @@ import { AbstractDrawMode } from './mode.abstract.ts';
     setModel(model: DrawModel | undefined): void;
+    onOptionsUpdate(): void;
     private createFeatureCollection;
@@ -20,0 +21,0 @@ private endCreation;

dist/types/plugins/draw/types.d.ts

@@ -18,2 +18,3 @@ import { FitBoundsOptions } from '../../types.ts';
         color?: string;
+        label?: string;
     };
@@ -33,2 +34,3 @@ pointerPrecision?: PointerPrecisionOption;
     tooSmall?: boolean;
+    minSizeLabel?: string;
     meta: 'polygon' | 'circle' | 'vertex' | 'midpoint';
@@ -35,0 +37,0 @@ }

dist/vue-maplibre-gl-draw.js

 /*!
-* vue-maplibre-gl v5.3.8
+* vue-maplibre-gl v5.4.0
 * (c) 2025 Volker Nauruhn
 * @license MIT
 */
-import { C as r, a as e, b as l, D as s, d, P as M } from "./draw.control-DG3SiSLM.js";
+import { C as r, a as e, b as l, D as s, d, P as M } from "./draw.control-B0nQVbid.js";
 export {
@@ -8,0 +8,0 @@ r as CircleMode,

dist/vue-maplibre-gl.js

 /*!
-* vue-maplibre-gl v5.3.8
+* vue-maplibre-gl v5.4.0
 * (c) 2025 Volker Nauruhn
@@ -10,4 +10,4 @@ * @license MIT
 import { reactive as q, defineComponent as p, markRaw as te, getCurrentInstance as P, shallowRef as Y, ref as _, provide as I, watch as c, onMounted as me, onBeforeUnmount as C, h as H, unref as G, nextTick as re, inject as g, createCommentVNode as O, Teleport as fe, createTextVNode as ae, isRef as D, warn as ge } from "vue";
-import { m as x, i as W, c as T, e as J, s as Q, f as X, g as he, h as ye, u as B, j as z, k as Z, l as pe, M as K, B as oe, n as ie, A as k, o as Se } from "./draw.control-DG3SiSLM.js";
-import { p as vt, C as bt, a as At, b as Rt, D as Ot, d as Mt, P as Et } from "./draw.control-DG3SiSLM.js";
+import { m as x, i as W, c as T, e as J, s as Q, f as X, g as he, h as ye, u as B, j, k as Z, l as pe, M as K, B as oe, n as ie, A as z, o as Se } from "./draw.control-B0nQVbid.js";
+import { p as vt, C as bt, a as At, b as Rt, D as Ot, d as Mt, P as Et } from "./draw.control-B0nQVbid.js";
 import { Map as ve, AttributionControl as be, FullscreenControl as Ae, GeolocateControl as Re, NavigationControl as Oe, ScaleControl as Me, Marker as Ee } from "maplibre-gl";
@@ -358,3 +358,4 @@ import Le from "mitt";
     validateStyle: { type: Boolean, default: () => l.validateStyle },
-    zoom: { type: Number, default: () => l.zoom }
+    zoom: { type: Number, default: () => l.zoom },
+    projection: { type: Object }
   },
@@ -458,2 +459,5 @@ emits: [
       return r && ((i = t.value) == null ? void 0 : i.setZoom(r));
+    }), c(() => e.projection, (r) => {
+      var i;
+      return r && ((i = t.value) == null ? void 0 : i.setProjection(r));
     }), c(() => e.language, (r) => {
@@ -465,3 +469,3 @@ S.value && t.value && f.language !== (r || null) && ($(t.value, r || ""), f.language = r || null);
     function d() {
-      S.value = !0, e.language ? f.language = e.language : f.language && $(t.value, e.language || "");
+      S.value = !0, e.language ? f.language = e.language : f.language && $(t.value, e.language || ""), e.projection && t.value.setProjection(e.projection);
     }
@@ -511,3 +515,3 @@ function R() {
       type: String,
-      validator: (e) => z.indexOf(e) !== -1
+      validator: (e) => j.indexOf(e) !== -1
     },
@@ -529,3 +533,3 @@ compact: Boolean,
       default: Z.TOP_RIGHT,
-      validator: (e) => z.indexOf(e) !== -1
+      validator: (e) => j.indexOf(e) !== -1
     },
@@ -624,3 +628,3 @@ container: {
       type: String,
-      validator: (e) => z.indexOf(e) !== -1
+      validator: (e) => j.indexOf(e) !== -1
     },
@@ -689,3 +693,3 @@ background: {
       default: Z.TOP_RIGHT,
-      validator: (e) => z.indexOf(e) !== -1
+      validator: (e) => j.indexOf(e) !== -1
     },
@@ -734,3 +738,3 @@ positionOptions: {
       default: Z.TOP_RIGHT,
-      validator: (e) => z.indexOf(e) !== -1
+      validator: (e) => j.indexOf(e) !== -1
     },
@@ -752,3 +756,3 @@ showCompass: { type: Boolean, default: !0 },
 var ue = /* @__PURE__ */ ((e) => (e.IMPERIAL = "imperial", e.METRIC = "metric", e.NAUTICAL = "nautical", e))(ue || {});
-const Be = Object.values(ue), ze = /* @__PURE__ */ p({
+const Be = Object.values(ue), je = /* @__PURE__ */ p({
   name: "MglScaleControl",
@@ -758,3 +762,3 @@ props: {
       type: String,
-      validator: (e) => z.indexOf(e) !== -1
+      validator: (e) => j.indexOf(e) !== -1
     },
@@ -781,3 +785,3 @@ maxWidth: { type: Number, default: 100 },
 }
-const ke = /* @__PURE__ */ p({
+const ze = /* @__PURE__ */ p({
   name: "MglStyleSwitchControl",
@@ -787,3 +791,3 @@ props: {
       type: String,
-      validator: (e) => z.indexOf(e) !== -1
+      validator: (e) => j.indexOf(e) !== -1
     },
@@ -879,3 +883,3 @@ mapStyles: {
 	`
-}), je = /* @__PURE__ */ p({
+}), ke = /* @__PURE__ */ p({
   name: "MglMarker",
@@ -929,3 +933,3 @@ props: {
 }
-function j(e, a, o) {
+function k(e, a, o) {
   const n = g(x), t = g(W), s = g(X), h = g(J), S = V.getSourceRef(h, e.sourceId), m = new _e();
@@ -943,3 +947,3 @@ I(Q, e.sourceId), I(ie, m);
 }
-const De = k({
+const De = z({
   animate: void 0,
@@ -961,3 +965,3 @@ canvas: void 0,
   setup(e, { slots: a }) {
-    const o = j(e, "canvas", De);
+    const o = k(e, "canvas", De);
     return c(D(e.coordinates) ? e.coordinates : () => e.coordinates, (n) => {
@@ -971,3 +975,3 @@ var t;
   }
-}), Ve = k({
+}), Ve = z({
   data: void 0,
@@ -1011,3 +1015,3 @@ maxzoom: void 0,
   setup(e, { slots: a }) {
-    const o = j(e, "geojson", Ve);
+    const o = k(e, "geojson", Ve);
     return c(D(e.data) ? e.data : () => e.data, (n) => {
@@ -1021,3 +1025,3 @@ var t;
   }
-}), Ue = k({
+}), Ue = z({
   url: void 0,
@@ -1037,3 +1041,3 @@ coordinates: void 0
   setup(e, { slots: a }) {
-    const o = j(e, "image", Ue);
+    const o = k(e, "image", Ue);
     return c(D(e.coordinates) ? e.coordinates : () => e.coordinates, (n) => {
@@ -1047,3 +1051,3 @@ var t;
   }
-}), We = k({
+}), We = z({
   url: void 0,
@@ -1077,3 +1081,3 @@ tiles: void 0,
   setup(e, { slots: a }) {
-    const o = j(e, "raster", We);
+    const o = k(e, "raster", We);
     return () => [
@@ -1084,3 +1088,3 @@ O("Raster Source"),
   }
-}), Ye = k({
+}), Ye = z({
   url: void 0,
@@ -1122,3 +1126,3 @@ tiles: void 0,
   setup(e, { slots: a }) {
-    const o = j(e, "raster-dem", Ye);
+    const o = k(e, "raster-dem", Ye);
     return () => [
@@ -1129,3 +1133,3 @@ O("RasterDem Source"),
   }
-}), qe = k({
+}), qe = z({
   url: void 0,
@@ -1159,3 +1163,3 @@ tiles: void 0,
   setup(e, { slots: a }) {
-    const o = j(e, "vector", qe);
+    const o = k(e, "vector", qe);
     return c(D(e.tiles) ? e.tiles : () => e.tiles, (n) => {
@@ -1172,3 +1176,3 @@ var t;
   }
-}), Qe = k({
+}), Qe = z({
   urls: void 0,
@@ -1188,3 +1192,3 @@ coordinates: void 0
   setup(e, { slots: a }) {
-    const o = j(e, "video", Qe);
+    const o = k(e, "video", Qe);
     return c(D(e.coordinates) ? e.coordinates : () => e.coordinates, (n) => {
@@ -1420,3 +1424,3 @@ var t;
   MglMap: Ce,
-  MglMarker: je,
+  MglMarker: ke,
   MglNavigationControl: He,
@@ -1426,4 +1430,4 @@ MglRasterDemSource: Ke,
   MglRasterSource: $e,
-  MglScaleControl: ze,
-  MglStyleSwitchControl: ke,
+  MglScaleControl: je,
+  MglStyleSwitchControl: ze,
   MglSymbolLayer: st,
@@ -1440,3 +1444,3 @@ MglVectorSource: Je,
   vt as AllOptions,
-  k as AllSourceOptions,
+  z as AllSourceOptions,
   bt as CircleMode,
@@ -1465,3 +1469,3 @@ At as CircleStaticMode,
   Ce as MglMap,
-  je as MglMarker,
+  ke as MglMarker,
   He as MglNavigationControl,
@@ -1471,4 +1475,4 @@ Ke as MglRasterDemSource,
   $e as MglRasterSource,
-  ze as MglScaleControl,
-  ke as MglStyleSwitchControl,
+  je as MglScaleControl,
+  ze as MglStyleSwitchControl,
   st as MglSymbolLayer,
@@ -1491,4 +1495,4 @@ Je as MglVectorSource,
   B as usePositionWatcher,
-  j as useSource
+  k as useSource
 };
 //# sourceMappingURL=vue-maplibre-gl.js.map

package.json

 {
   "name": "vue-maplibre-gl",
-  "version": "5.3.8",
+  "version": "5.4.0",
   "description": "Vue 3 plugin for maplibre-gl",
@@ -69,3 +69,3 @@ "keywords": [
     "vite-plugin-dts": "^4.5.0",
-    "vue-tsc": "^2.2.0"
+    "vue-tsc": "^2.2.2"
   },
@@ -72,0 +72,0 @@ "peerDependencies": {

src/components/map.component.ts

@@ -17,2 +17,3 @@ import { defaults } from '@/defaults';
 } from '@/types';
+import type { ProjectionSpecification } from '@maplibre/maplibre-gl-style-spec';
 import { Map as MaplibreMap, type MapOptions, type StyleSpecification } from 'maplibre-gl';
@@ -104,2 +105,3 @@ import mitt from 'mitt';
 		zoom                  : { type: Number as PropType<MapOptions['zoom']>, default: () => defaults.zoom },
+		projection            : { type: Object as PropType<ProjectionSpecification> }
 	},
@@ -154,2 +156,3 @@ emits: [
 		watch(() => props.zoom, v => v && map.value?.setZoom(v));
+		watch(() => props.projection, v => v && map.value?.setProjection(v));
 
@@ -175,2 +178,5 @@ watch(() => props.language, v => {
 			}
+			if (props.projection) {
+				map.value!.setProjection(props.projection);
+			}
 		}
@@ -177,0 +183,0 @@

src/plugins/draw/circle.mode.ts

@@ -208,2 +208,8 @@ import { throttle } from '@/lib/debounce.ts';
 
+	onOptionsUpdate() {
+		if (this.collection?.features[ 0 ]) {
+			this.collection.features[ 0 ].properties.minSizeLabel = this.plugin.options.minArea.label;
+		}
+	}
+
 }

src/plugins/draw/circleStatic.mode.ts

@@ -12,2 +12,3 @@ import { throttle } from '@/lib/debounce.ts';
 	private _circle: HTMLDivElement;
+	private _minSizeLabel: HTMLDivElement;
 
@@ -31,3 +32,9 @@ constructor(plugin: DrawPlugin, map: Map, source: GeoJSONSource, model: DrawModel | undefined) {
 </svg>`;
+		this._minSizeLabel     = document.createElement('div');
+		this._minSizeLabel.classList.add('maplibre-draw-circle-mode-below-min-area-size-label');
+		if (plugin.options.minArea.label) {
+			this._minSizeLabel.textContent = plugin.options.minArea.label;
+		}
 		this._container.appendChild(this._circle);
+		this._circle.appendChild(this._minSizeLabel);
 		this.setPadding();
@@ -106,2 +113,8 @@ }
 
+	onOptionsUpdate() {
+		if (this.plugin.options.minArea.label) {
+			this._minSizeLabel.textContent = this.plugin.options.minArea.label;
+		}
+	}
+
 }

src/plugins/draw/draw.control.ts

@@ -20,2 +20,3 @@ import { MglButton, MglCustomControl } from '@/components';
 		minAreaColor    : { type: String },
+		minAreaLabel    : { type: String },
 		pointerPrecision: { type: Object as PropType<PointerPrecisionOption> }
@@ -38,3 +39,4 @@ },
 				size : props.minAreaSize,
-				color: props.minAreaColor
+				color: props.minAreaColor,
+				label: props.minAreaLabel,
 			},
@@ -58,2 +60,3 @@ fitBoundsOptions: fitBoundsOptions,
 		watch(() => props.minAreaColor, () => draw.setMinAreaColor(props.minAreaColor));
+		watch(() => props.minAreaLabel, () => draw.setMinAreaColor(props.minAreaLabel));
 
@@ -60,0 +63,0 @@ onBeforeUnmount(() => draw.dispose());

src/plugins/draw/mode.abstract.ts

@@ -49,5 +49,6 @@ import type { DrawPlugin } from '@/plugins/draw/plugin.ts';
 		if (this.plugin.options.minArea.size && this.collection?.features[ 0 ]) {
-			const areaSize                                     = this.getAreaSize(this.collection!.features[ 0 ] as Feature<Polygon, DrawFeatureProperties>);
-			this.collection!.features[ 0 ].properties.area     = areaSize;
-			this.collection!.features[ 0 ].properties.tooSmall = areaSize < this.plugin.options.minArea.size;
+			const areaSize                                         = this.getAreaSize(this.collection!.features[ 0 ] as Feature<Polygon, DrawFeatureProperties>);
+			this.collection!.features[ 0 ].properties.area         = areaSize;
+			this.collection!.features[ 0 ].properties.tooSmall     = areaSize < this.plugin.options.minArea.size;
+			this.collection!.features[ 0 ].properties.minSizeLabel = this.plugin.options.minArea.label;
 		}
@@ -66,3 +67,7 @@ this.source.setData(this.collection ?? { type: 'FeatureCollection', features: [] });
 	createCircle(center: Position, radius: number, steps = 64): Feature<Polygon, DrawFeatureProperties> {
-		const c               = circle<DrawFeatureProperties>(center, radius, { units: 'degrees', steps, properties: { center, radius, meta: 'circle' } });
+		const c               = circle<DrawFeatureProperties>(center, radius,
+			{
+				units     : 'degrees', steps,
+				properties: { center, radius, meta: 'circle', minSizeLabel: this.plugin.options.minArea.label }
+			});
 		c.properties.area     = this.getAreaSize(c);
@@ -92,2 +97,4 @@ c.properties.tooSmall = c.properties.area < (this.plugin.options.minArea.size ?? -1);
 
+	abstract onOptionsUpdate(): void;
+
 }

src/plugins/draw/plugin.ts

@@ -127,2 +127,7 @@ import { CircleMode } from '@/plugins/draw/circle.mode.ts';
 
+	setMinAreaLabel(label: string | undefined) {
+		this.options.minArea.label = label;
+		this._modeInstance?.onOptionsUpdate();
+	}
+
 	zoomToModel() {
@@ -129,0 +134,0 @@ if (this._model) {

src/plugins/draw/polygon.mode.ts

@@ -322,2 +322,8 @@ import { throttle } from '@/lib/debounce.ts';
 
+	onOptionsUpdate() {
+		if (this.collection?.features[ 0 ]) {
+			this.collection.features[ 0 ].properties.minSizeLabel = this.plugin.options.minArea.label;
+		}
+	}
+
 	private createFeatureCollection(model: DrawModel) {
@@ -324,0 +330,0 @@ this.collection = {

src/plugins/draw/styles.ts

@@ -40,2 +40,22 @@ import type { DrawStyle } from '@/plugins/draw/types.ts';
 	},
+	// polygon label below min area size
+	{
+		id    : 'gl-draw-polygon-fill-below-min-area-size-label',
+		type  : 'symbol',
+		filter: [ 'all', [ '==', '$type', 'Polygon' ], [ '==', 'tooSmall', true ], [ 'has', 'minSizeLabel' ] ],
+		layout: {
+			'text-field'      : [ 'get', 'minSizeLabel' ],
+			'text-font'       : [ 'Open Sans Bold' ],
+			'text-size'       : 24,
+			'text-justify'    : 'center',
+			'text-anchor'     : 'center',
+			'symbol-placement': 'point',
+			'text-overlap'    : 'always'
+		},
+		paint : {
+			'text-color'     : '#e74b3c',
+			'text-halo-color': '#fff',
+			'text-halo-width': 3
+		}
+	},
 	// polygon mid points
@@ -42,0 +62,0 @@ {

src/plugins/draw/types.ts

@@ -20,2 +20,3 @@ import type { FitBoundsOptions } from '@/types.ts';
 		color?: string; // default: #e74b3c
+		label?: string;
 	};
@@ -38,2 +39,3 @@ pointerPrecision?: PointerPrecisionOption;
 	tooSmall?: boolean;
+	minSizeLabel?: string;
 	meta: 'polygon' | 'circle' | 'vertex' | 'midpoint';
@@ -40,0 +42,0 @@ }

New alerts

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Fixed alerts

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1019710

increased by1.52%

Lines of code

9348

increased by1.56%

No dependency changes