~

docs/README.md

@@ -58,18 +58,15 @@ const scene = reactive({
 })
 // setup mapbox
 mapboxgl.accessToken = aToken
-const mapInstance = ref(null)
 onMounted(() => {
-  mapInstance.value = markRaw(
-    new mapboxgl.Map({
-      container: 'map-container',
-      style: 'mapbox://styles/mapbox/light-v9',
-      center: [scene.lng, scene.lat],
-      zoom: scene.zoom,
-      pitch: scene.pitch,
-      interactive: false,
-    })
-  )
+  mapInstance = new mapboxgl.Map({
+    container: 'map-container',
+    style: 'mapbox://styles/mapbox/light-v9',
+    center: [scene.lng, scene.lat],
+    zoom: scene.zoom,
+    pitch: scene.pitch,
+    interactive: false,
+  })
 })
 ```
 

src/components/VueMapboxMap.vue

@@ -5,7 +5,7 @@
 </template>
 
 <script setup>
-import { computed, markRaw, toRefs, watchEffect } from 'vue'
+import { computed, toRefs, watchEffect } from 'vue'
 
 // props
 const props = defineProps({
@@ -57,8 +57,7 @@ const props = defineProps({
     },
   },
 })
-const { map, transitionMode, lng, lat, zoom, pitch, bearing, around } = toRefs(props)
-const mapInstance = markRaw(map.value)
+const { pitch, bearing, lng, lat, zoom, around, transitionMode } = toRefs(props)
 const refinePitch = computed(() => {
   if (pitch.value < 0) return 0
   if (pitch.value > 85) return 85
@@ -70,21 +69,20 @@ const refineBearing = computed(() => {
   return bearing.value
 })
 watchEffect(() => {
-  if (!mapInstance) return
+  if (!props.map) return
   const scene = {
     center: [lng.value, lat.value],
     zoom: zoom.value,
     bearing: refineBearing.value,
     pitch: refinePitch.value,
     around: around.value,
   }
-  if (!scene) return
   if (transitionMode.value === 'jump') {
-    mapInstance.jumpTo(scene)
+    props.map.jumpTo(scene)
   } else if (transitionMode.value === 'ease') {
-    mapInstance.easeTo(scene)
+    props.map.easeTo(scene)
   } else if (transitionMode.value === 'fly') {
-    mapInstance.flyTo(scene)
+    props.map.flyTo(scene)
   }
 })
 </script>