Geo Layers

<script setup lang="ts">
  import { ref, onMounted, onUnmounted } from 'vue';
  import { VMap, VLayerDeckglTrips } from '@geoql/v-maplibre';

  const mapOptions = {
    style: 'https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json',
    center: [-122.4, 37.8],
    zoom: 12,
  };

  const trips = 'https://raw.githubusercontent.com/visgl/deck.gl-data/master/examples/trips/trips-v7.json';

  const currentTime = ref(0);
  let animation: number;

  onMounted(() => {
    const animate = () => {
      currentTime.value = (currentTime.value + 1) % 1800;
      animation = requestAnimationFrame(animate);
    };
    animate();
  });

  onUnmounted(() => {
    cancelAnimationFrame(animation);
  });
</script>

<template>
  <VMap :options="mapOptions" style="height: 500px">
    <VLayerDeckglTrips
      id="trips"
      :data="trips"
      :get-path="(d) => d.path"
      :get-timestamps="(d) => d.timestamps"
      :get-color="[253, 128, 93]"
      :current-time="currentTime"
      :trail-length="180"
      :width-min-pixels="2"
    />
  </VMap>
</template>

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

  const mapOptions = {
    style: 'https://basemaps.cartocdn.com/gl/positron-nolabels-gl-style/style.json',
    center: [-122.4, 37.8],
    zoom: 10,
  };

  const tileUrl = 'https://tiles.example.com/{z}/{x}/{y}.pbf';
</script>

<template>
  <VMap :options="mapOptions" style="height: 500px">
    <VLayerDeckglMVT
      id="mvt"
      :data="tileUrl"
      :get-fill-color="[200, 200, 200, 100]"
      :get-line-color="[100, 100, 100]"
      :get-line-width="1"
      :pickable="true"
      :auto-highlight="true"
      :highlight-color="[255, 200, 0, 128]"
    />
  </VMap>
</template>

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

  const mapOptions = {
    style: 'https://basemaps.cartocdn.com/gl/positron-gl-style/style.json',
    center: [-122.4, 37.8],
    zoom: 11,
    pitch: 45,
    bearing: -30,
  };

  const terrainUrl = 'https://s3.amazonaws.com/elevation-tiles-prod/terrarium/{z}/{x}/{y}.png';
  const textureUrl = 'https://tile.openstreetmap.org/{z}/{x}/{y}.png';
</script>

<template>
  <VMap :options="mapOptions" style="height: 500px">
    <VLayerDeckglTerrain
      id="terrain"
      :elevation-data="terrainUrl"
      :texture="textureUrl"
      :elevation-decoder="{
        rScaler: 256,
        gScaler: 1,
        bScaler: 1/256,
        offset: -32768,
      }"
      :mesh-max-error="4"
    />
  </VMap>
</template>

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

  const mapOptions = {
    style: 'https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json',
    center: [-122.4, 37.8],
    zoom: 11,
    pitch: 45,
  };

  const h3Data = [
    { hex: '882830829bfffff', value: 100 },
    { hex: '88283082d7fffff', value: 200 },
    { hex: '88283082dbfffff', value: 150 },
  ];
</script>

<template>
  <VMap :options="mapOptions" style="height: 500px">
    <VLayerDeckglH3Hexagon
      id="h3"
      :data="h3Data"
      :get-hexagon="(d) => d.hex"
      :get-fill-color="(d) => [255, (1 - d.value / 200) * 255, 0]"
      :get-elevation="(d) => d.value * 10"
      :extruded="true"
      :pickable="true"
    />
  </VMap>
</template>

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

  const mapOptions = {
    style: 'https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json',
    center: [0, 30],
    zoom: 1,
  };

  const routes = [
    { from: [-122.4, 37.8], to: [139.7, 35.7] },
    { from: [-122.4, 37.8], to: [-0.1, 51.5] },
    { from: [-122.4, 37.8], to: [151.2, -33.9] },
  ];
</script>

<template>
  <VMap :options="mapOptions" style="height: 500px">
    <VLayerDeckglGreatCircle
      id="great-circles"
      :data="routes"
      :get-source-position="(d) => d.from"
      :get-target-position="(d) => d.to"
      :get-source-color="[64, 255, 0]"
      :get-target-color="[0, 128, 200]"
      :get-width="2"
      :pickable="true"
    />
  </VMap>
</template>

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

  const mapOptions = {
    style: 'https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json',
    center: [-75.6, 40.0],
    zoom: 14,
    pitch: 45,
  };

  const tilesetUrl = 'https://assets.ion.cesium.com/43978/tileset.json';
</script>

<template>
  <VMap :options="mapOptions" style="height: 500px">
    <VLayerDeckglTile3D
      id="3d-tiles"
      :data="tilesetUrl"
      :point-size="2"
      :pickable="true"
      @tileset-load="(tileset) => console.log('Tileset loaded', tileset)"
    />
  </VMap>
</template>