<script setup lang="ts">
import { VMap, VLayerMaplibreCluster } from '@geoql/v-maplibre';

const earthquakes = ref({
  type: 'FeatureCollection',
  features: [], // Load your point data
});
</script>

<template>
  <VMap :options="mapOptions">
    <VLayerMaplibreCluster
      source-id="earthquakes"
      base-layer-id="quakes"
      :source="{ type: 'geojson', data: earthquakes }"
      @cluster-click="handleClusterClick"
      @point-click="handlePointClick"
    />
  </VMap>
</template>

<script setup lang="ts">
import { VMap, VLayerMaplibreRoute } from '@geoql/v-maplibre';

const routeCoordinates = ref([
  [-122.4194, 37.7749],
  [-122.4089, 37.7855],
  [-122.3984, 37.7925],
]);
</script>

<template>
  <VMap :options="mapOptions">
    <VLayerMaplibreRoute
      id="my-route"
      :coordinates="routeCoordinates"
      color="#10b981"
      :width="5"
      @click="handleRouteClick"
    />
  </VMap>
</template>

interface IsochroneData {
  type: 'FeatureCollection';
  features: Array<{
    type: 'Feature';
    properties: {
      color: string;      // e.g., '2563eb' or '#2563eb'
      contour?: number;   // Time in minutes or distance
      metric?: string;    // 'time' or 'distance'
    };
    geometry: Polygon | MultiPolygon;
  }>;
}

<script setup lang="ts">
import { VMap, VMarker, VLayerMaplibreIsochrone } from '@geoql/v-maplibre';

const originPoint = ref<[number, number]>([-73.985, 40.758]);
const isochroneData = ref(null);

async function fetchIsochrone() {
  const params = {
    locations: [{ lat: originPoint.value[1], lon: originPoint.value[0] }],
    costing: 'auto',
    contours: [
      { time: 5, color: '2563eb' },
      { time: 10, color: '7c3aed' },
      { time: 15, color: 'db2777' },
    ],
    polygons: true,
  };

  const response = await fetch(`/api/isochrone?json=${encodeURIComponent(JSON.stringify(params))}`);
  isochroneData.value = await response.json();
}

function handleMarkerDrag(event) {
  const lngLat = event.target.getLngLat();
  originPoint.value = [lngLat.lng, lngLat.lat];
  fetchIsochrone();
}
</script>

<template>
  <VMap :options="mapOptions" @loaded="fetchIsochrone">
    <VLayerMaplibreIsochrone
      id="travel-zones"
      :data="isochroneData"
      :fill-opacity="0.5"
      @click="handleZoneClick"
    />
    <VMarker
      :coordinates="originPoint"
      :options="{ draggable: true }"
      @dragend="handleMarkerDrag"
    />
  </VMap>
</template>