Merge pull request #259 from studiometa/bugfix/js-error-on-control-removal

[Bugfix] JS error on control removal

Author: titouanmathis

CHANGELOG.md

@@ -4,6 +4,10 @@ All notable changes to this project will be documented in this file. The format
 
 ## [Unreleased]
 
+### Fixed
+
+- Fix Mapbox trying to remove controls already removed ([#249](https://github.com/studiometa/vue-mapbox-gl/issues/249), [#259](https://github.com/studiometa/vue-mapbox-gl/pull/259), [0bfaea6](https://github.com/studiometa/vue-mapbox-gl/commit/0bfaea6))
+
 ## [v2.7.1](https://github.com/studiometa/vue-mapbox-gl/compare/2.7.0...2.7.1) (2025-02-04)
 
 ### Changed

packages/demo/pages/issue-249.vue

@@ -0,0 +1,25 @@
+<script setup>
+  import { ref } from 'vue';
+  import { MapboxMap, MapboxGeocoder } from '@studiometa/vue-mapbox-gl';
+  import 'mapbox-gl/dist/mapbox-gl.css';
+  import '@mapbox/mapbox-gl-geocoder/lib/mapbox-gl-geocoder.css';
+
+  const config = useRuntimeConfig();
+  const showMap = ref(true);
+</script>
+
+<template>
+  <div>
+    <label>
+      <input v-model="showMap" type="checkbox" />
+      toggle map
+    </label>
+    <MapboxMap
+      v-if="showMap"
+      style="height: 60vh"
+      :access-token="config.public.accessToken"
+      map-style="mapbox://styles/mapbox/streets-v11">
+      <MapboxGeocoder />
+    </MapboxMap>
+  </div>
+</template>

packages/vue-mapbox-gl/composables/useControl.ts

@@ -62,7 +62,7 @@ export function useControl(ControlConstructor, { propsConfig, props, emit, event
   });
 
   onUnmounted(() => {
-    if (unref(control) && unref(map)) {
+    if (unref(control) && unref(map) && unref(map).hasControl(unref(control))) {
       unref(map).removeControl(unref(control));
     }
   });