v-maplibre
Components

VMarker

Add interactive markers to your map

Usage

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

  const mapOptions = {
    style: 'https://demotiles.maplibre.org/style.json',
    center: [-74.5, 40],
    zoom: 9,
  };

  const markerPosition = { lng: -74.5, lat: 40 };
</script>

<template>
  <VMap :options="mapOptions" style="height: 500px">
    <VMarker :lng-lat="markerPosition"></VMarker>
  </VMap>
</template>

Props

lngLat

  • Type: LngLatLike
  • Required: true

The geographic location of the marker. Can be:

  • Object: { lng: number, lat: number }
  • Array: [lng, lat]
  • LngLat instance
<!-- Object notation -->
<VMarker :lng-lat="{ lng: -74.5, lat: 40 }"></VMarker>

<!-- Array notation -->
<VMarker :lng-lat="[-74.5, 40]"></VMarker>

draggable

  • Type: boolean
  • Required: false
  • Default: false

Make the marker draggable.

<VMarker :lng-lat="position" draggable @dragend="handleDragEnd"></VMarker>

options

  • Type: MarkerOptions
  • Required: false

Additional MapLibre GL marker options. See MapLibre GL Marker for all available options.

Common options:

  • color: Marker color
  • rotation: Marker rotation in degrees
  • rotationAlignment: How marker rotates with map
  • pitchAlignment: How marker aligns with map pitch
  • offset: Pixel offset from the lngLat position
<VMarker
  :lng-lat="position"
  :options="{
    color: '#FF0000',
    rotation: 45,
    offset: [0, -10],
  }"
></VMarker>

Events

@click

Emitted when the marker is clicked.

<VMarker :lng-lat="position" @click="handleMarkerClick"></VMarker>

@dragstart

Emitted when marker dragging starts.

<VMarker :lng-lat="position" draggable @dragstart="handleDragStart"></VMarker>

@drag

Emitted continuously while dragging.

<VMarker :lng-lat="position" draggable @drag="handleDrag"></VMarker>

@dragend

Emitted when marker dragging ends.

<VMarker :lng-lat="position" draggable @dragend="handleDragEnd"></VMarker>

Slots

default

Customize marker HTML content.

<VMarker :lng-lat="position">
  <div class="custom-marker">
    <img src="/marker-icon.png" alt="Custom marker" />
  </div>
</VMarker>

Examples

Custom Color

<VMarker :lng-lat="[-74.5, 40]" :options="{ color: '#FF5733' }"></VMarker>

Draggable Marker

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

  const position = ref({ lng: -74.5, lat: 40 });

  const handleDragEnd = (event: any) => {
    const lngLat = event.target.getLngLat();
    position.value = { lng: lngLat.lng, lat: lngLat.lat };
    console.log('New position:', position.value);
  };
</script>

<template>
  <VMap :options="mapOptions" style="height: 500px">
    <VMarker :lng-lat="position" draggable @dragend="handleDragEnd"></VMarker>
  </VMap>
</template>

Custom Marker with Slot

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

  const position = { lng: -74.5, lat: 40 };
</script>

<template>
  <VMap :options="mapOptions" style="height: 500px">
    <VMarker :lng-lat="position">
      <div class="custom-marker">
        <div class="marker-pin"></div>
        <div class="marker-label">Custom Pin</div>
      </div>
    </VMarker>
  </VMap>
</template>

<style scoped>
  .custom-marker {
    position: relative;
    text-align: center;
  }

  .marker-pin {
    width: 30px;
    height: 30px;
    border-radius: 50% 50% 50% 0;
    background: #00cae9;
    transform: rotate(-45deg);
    margin: 0 auto;
  }

  .marker-label {
    position: absolute;
    top: 35px;
    left: 50%;
    transform: translateX(-50%);
    background: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  }
</style>

Multiple Markers

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

  const locations = [
    { id: 1, lng: -74.5, lat: 40, name: 'Location 1', color: '#FF5733' },
    { id: 2, lng: -74.3, lat: 40.1, name: 'Location 2', color: '#33FF57' },
    { id: 3, lng: -74.4, lat: 39.9, name: 'Location 3', color: '#3357FF' },
  ];
</script>

<template>
  <VMap :options="mapOptions" style="height: 500px">
    <VMarker
      v-for="location in locations"
      :key="location.id"
      :lng-lat="[location.lng, location.lat]"
      :options="{ color: location.color }"
      @click="() => console.log('Clicked:', location.name)"
    ></VMarker>
  </VMap>
</template>

VMap

The core map component for rendering MapLibre GL maps