Tactical Comms Network

<script setup lang="ts">
  import { VMap, VControlNavigation, VControlScale } from '@geoql/v-maplibre';
  import { useDeckLayers } from '@geoql/v-maplibre/deck.gl';
  import { ScatterplotLayer, LineLayer, TextLayer } from '@deck.gl/layers';

  const mapOptions = computed(() => ({
    style: 'https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json',
    center: [93.5, 27.5] as [number, number],
    zoom: 10,
  }));

  const { updateLayer } = useDeckLayers();

  const nodes = ref([
    { id: 'TAC-HQ-1', position: [93.4, 27.5], range: 30000, color: [255, 200, 0] },
    { id: 'RELAY-1', position: [93.45, 27.55], range: 20000, color: [0, 200, 150] },
  ]);

  function syncLayers() {
    updateLayer('comms-dots', new ScatterplotLayer({
      id: 'comms-dots',
      data: nodes.value,
      getPosition: (d) => d.position,
      getRadius: 6,
      getFillColor: (d) => [...d.color, 255],
      radiusUnits: 'pixels',
    }));
  }
</script>

<template>
  <VMap :options="mapOptions" class="h-125 w-full">
    <VControlNavigation position="top-right" />
    <VControlScale position="bottom-left" />
  </VMap>
</template>