Examples
Globe Atmosphere
Switch between dawn, day, dusk, and night modes with matching atmosphere and sun position.
Installation
$ npx shadcn-vue@latest add https://mapcn-vue.geoql.in/r/map-layersUsage
<script setup lang="ts">
import { VMap, VControlNavigation } from '@geoql/v-maplibre';
import { VLayerStarfield } from '@geoql/v-maplibre/starfield';
const { sunAzimuth, sunAltitude, setMode, modes, currentMode } =
useGlobeAtmosphere('night');
</script>
<template>
<VMap :options="mapOptions" class="h-125 w-full">
<VLayerStarfield
galaxy-texture-url="/milkyway.jpg"
:sun-enabled="true"
:sun-azimuth="sunAzimuth"
:sun-altitude="sunAltitude"
before="satellite"
/>
<VControlNavigation position="top-right" />
</VMap>
<div class="flex gap-2 mt-4">
<button v-for="mode in modes" :key="mode" @click="setMode(mode)">
{{ mode }}
</button>
</div>
</template> Components 3
<VMap />@geoql/v-maplibre<VControlNavigation />@geoql/v-maplibre<VLayerStarfield />@geoql/v-maplibre/starfield