How can i add marker tomtom in vuejs?

Question

I want to add a marker in tomtom. I would like to define a map in "data" but when I do this it gives me an error:

maps.min.js:1 Uncaught (in promise) TypeError: 'get' on proxy: property '__om' is a read-only and non-configurable data property on the proxy target but the proxy did not return its actual value (expected '#<i>' but got '#<i>')

The error shows up only after I add "new tt.Marker". If I define a map directly in this method it works (instead of this.map I will use the map variable).

This is my vue code:

<template>
  <div class="map" id="map" ref="mapRef"></div>
</template>

<script>
import tt from '@tomtom-international/web-sdk-maps';
export default {
  data() {
    return {
      map: null
    }
  },
  mounted() {
    this.initializeMap()
  },
  methods: {
    initializeMap() {
    this.map = tt.map({
    key: 'key',
    container: this.$refs.mapRef,
    center: [-120.72217631449985, 42.73919549715691],
    zoom: 10
  });


  //Here I get error
  new tt.Marker()
      .setLngLat([-120.72217631449985, 42.73919549715691])
      .addTo(this.map);
    }
  }
}
</script>

score 1 · Answer 1 · answered Jan 18 '22 at 04:13

data properties are made reactive by default, which appears to conflict with the operation of Tomtom Maps API. However, reactivity is not actually needed in this case.

The map property should be set to a frozen object with Object.freeze() to workaround the issue:

export default {
  methods: {
    initializeMap() {
      const map = tt.map(/*...*/);
      new tt.Marker().setLngLat(/*...*/).addTo(map);
                           
      this.map = Object.freeze(map);
    }
  }
}

demo

How can i add marker tomtom in vuejs?

1 Answers1