Markers & Popups

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

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

  const markers = [
  { coordinates: [-74.006, 40.7128], title: 'New York City', description: 'The Big Apple' },
  { coordinates: [-73.985, 40.748], title: 'Empire State Building', description: 'Iconic skyscraper' },
  { coordinates: [-74.0445, 40.6892], title: 'Statue of Liberty', description: 'Symbol of freedom' },
  ];
</script>

<template>
  <VMap :options="mapOptions" class="h-125 w-full">
    <VControlNavigation position="top-right" />
    <VMarker
      v-for="marker in markers"
      :key="marker.title"
      :coordinates="marker.coordinates"
    >
      <div class="p-2">
        <h3 class="font-bold">{{ marker.title }}</h3>
        <p>{{ marker.description }}</p>
      </div>
    </VMarker>
  </VMap>
</template>