0

I have the following composable:

export const useEsriMap = () => {
  const mapObject = ref()
  const esriObject = computed(() => mapObject.value.esriObject)

  const panTo = (lat, long) => {
    esriObject.value.panTo([lat, long])
  }

  return {
    panTo,
    esriObject,
  }
}

Where I'm calling the composable from another component:

componentA.vue:

const focus = () => {
  panTo(Number(props.location.lat), Number(props.location.long))
}

And I have a componentB.vue where I'm implementing Esri map like the following:

componentB.vue:

const { esriObject } = useEsriMap()
let map: WebMap | null = null
let view: MapView | null = null

onMounted(async () => {
  map = new WebMap({
    basemap: 'arcgis-navigation',
  })

  view = new MapView({
    container: mapViewNode.value! as HTMLDivElement,
    map,
    zoom: 12,
    center: [0, 0],
  })

})
watch(
  () => esriObject,
  () => {
    view
      ?.when(() => {
        view?.goTo({
          center: [esriObject.value],
          zoom: 12,
        })
      })
      .catch((err) => {
        console.error('MapView rejected:', err)
      })
  },
)

I'm calling the panTo method from different places in my project and providing it with different coords each time, so I'm updating the computed lat,long useEsriMap composable.

I'm keep receiving errors whenever I call the panTo method like this:

Uncaught TypeError: Cannot read properties of undefined (reading 'esriObject')

So how to achieve the way that I make the map view change to the coords whenever it gets updated?

Thnx for the help in advance.

Errand
  • 121
  • 9

1 Answers1

0
import { reactive, computed } from "vue";

const mapObject = reactive({
  lat: 0,
  long: 0,
});

const esriObject = computed(() => {
  return [mapObject.lat, mapObject.long];
});

export const useEsriMap = () => {
  const panTo = (lat, long) => {
    mapObject.lat = lat;
    mapObject.long = long;
  };

  return {
    panTo,
    esriObject,
  };
};

codesandbox

scccboom
  • 101
  • 1
  • 6
  • Thnx for the answer, but the issue is that I cannot listen or see these values from inside componentB.vue and trigger a view goTo method based on that :/ – Errand Jul 19 '23 at 17:29