better reactivity

Author: razorness

dev/App.vue

@@ -14,10 +14,11 @@
 				@map:zoomend="isZooming = false"
 			>
 				<mgl-draw-control
+					v-if="useDrawPlugin"
 					position="top-left"
 					v-model:mode="drawMode"
 					:model="drawModel"
-					zoom-on-update
+					auto-zoom
 					:min-area-size="800000000"
 					min-area-label="TOO SMALL"
 					@update:model="onDrawModelUpdate"
@@ -44,11 +45,11 @@
 					/>
 				</mgl-geo-json-source>
 
-<!-- Test source not working anymore: CORS ERRORS -->
-<!--				<mgl-vector-source source-id="libraries" :tiles="librariesSourceTiles">-->
-<!--					<mgl-circle-layer layer-id="libraries" source-layer="libraries" :paint="librariesLayerCirclesPaint"-->
-<!--									  :filter="librariesLayerCirclesFilter"/>-->
-<!--				</mgl-vector-source>-->
+				<!-- Test source not working anymore: CORS ERRORS -->
+				<!--				<mgl-vector-source source-id="libraries" :tiles="librariesSourceTiles">-->
+				<!--					<mgl-circle-layer layer-id="libraries" source-layer="libraries" :paint="librariesLayerCirclesPaint"-->
+				<!--									  :filter="librariesLayerCirclesFilter"/>-->
+				<!--				</mgl-vector-source>-->
 
 			</mgl-map>
 		</div>
@@ -70,6 +71,10 @@
 			<br/>
 			<span>Attribution Position: {{ controlPosition }}</span>
 		</div>
+		<div>
+			<input type="checkbox" v-model="useDrawPlugin" id="use-draw">
+			<label for="use-draw">Use Draw Plugin</label>
+		</div>
 		<div>
 			<input type="checkbox" v-model="useClasses" id="noclasses">
 			<label for="noclasses">Use Custom Control Classes</label>
@@ -163,6 +168,7 @@
 			const map               = useMap(),
 				  mapVersion        = ref<string>(),
 				  showCustomControl = ref(true),
+				  useDrawPlugin     = ref(true),
 				  loaded            = ref(0),
 				  markerCoordinates = ref<LngLatLike>([ 13.377507, 52.516267 ]),
 				  bounds            = ref<LngLatBoundsLike>(),
@@ -265,7 +271,7 @@
 			// setTimeout(() => drawModel.value = drawCircleExample2, 5000);
 
 			return {
-				showCustomControl, loaded, map, mapVersion, markerCoordinates, geojsonSource, bounds, onLoad, onMouseenter, setLanguage,
+				showCustomControl, useDrawPlugin, loaded, map, mapVersion, markerCoordinates, geojsonSource, bounds, onLoad, onMouseenter, setLanguage,
 				geojsonSourceData          : geojsonSource.data,
 				isZooming                  : ref(false),
 				controlPosition            : ref(Position.TOP_LEFT),

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-maplibre-gl",
-  "version": "5.4.6",
+  "version": "5.4.7",
   "description": "Vue 3 plugin for maplibre-gl",
   "keywords": [
     "vue",

src/plugins/draw/plugin.ts

@@ -38,7 +38,11 @@ export class DrawPlugin {
 
 		this.setup       = this.setup.bind(this);
 		this.zoomToModel = this.zoomToModel.bind(this);
-		this.map.once('load', this.setup);
+		if (this.map.isStyleLoaded()) {
+			this.setup();
+		} else {
+			this.map.once('load', this.setup);
+		}
 	}
 
 	get mode(): DrawMode {
@@ -215,10 +219,14 @@ export class DrawPlugin {
 				for (let i = 0, len = this.options.styles.length; i < len; i++) {
 					if (this.map.getLayer(this.options.styles[ i ].id)) {
 						this.map.removeLayer(this.options.styles[ i ].id);
+					} else {
+						console.log('NO LAYER', this.options.styles[ i ].id);
 					}
 				}
 				if (this.map.getSource(DrawPlugin.SOURCE_ID)) {
 					this.map.removeSource(DrawPlugin.SOURCE_ID);
+				} else {
+					console.log('NO SOURCE', DrawPlugin.SOURCE_ID);
 				}
 			}
 		} catch (e) {