<template>
	<vc-entity :show="show" :position="position">
		<vc-graphics-billboard :image="image" :verticalOrigin="1" />
	</vc-entity>
</template>

<script setup>
import { VcEntity, VcGraphicsBillboard } from 'vue-cesium'

import { computed } from 'vue'
import pin from '/@/assets/pin.png'

const props = defineProps({
  position: {
    type: Object,
    default: { lng: NaN, lat: NaN },
  },
  image: {
    type: String,
    default: pin,
  }
})

const show = computed(() => {
  const { lng, lat } = props.position
	
  if (isNaN(lng) || lng > 180 || lng < -180) return false
  if (isNaN(lat) || lat > 90  || lat < -90 ) return false

  return true
})
</script>