Examples

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

  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>

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

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

  const geojsonSource: GeoJSONSourceSpecification = {
    type: 'geojson',
    data: {
      type: 'Feature',
      geometry: {
        type: 'Point',
        coordinates: [-74.5, 40],
      },
      properties: {
        title: 'My Point',
      },
    },
  };

  const layerOptions = {
    id: 'points',
    type: 'circle' as const,
    paint: {
      'circle-radius': 10,
      'circle-color': '#007cbf',
    },
  };
</script>

<template>
  <VMap :options="mapOptions" style="height: 500px">
    <VLayerMaplibreGeojson
      :source="geojsonSource"
      :layer="layerOptions"
    ></VLayerMaplibreGeojson>
  </VMap>
</template>

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

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

  const showPopup = ref(false);
  const markerPosition = { lng: -74.5, lat: 40 };
</script>

<template>
  <VMap :options="mapOptions" style="height: 500px">
    <VMarker :lng-lat="markerPosition" @click="showPopup = true"></VMarker>
    <VPopup
      v-if="showPopup"
      :lng-lat="markerPosition"
      @close="showPopup = false"
    >
      <div>
        <h3>Hello World!</h3>
        <p>This is a popup</p>
      </div>
    </VPopup>
  </VMap>
</template>

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

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

<template>
  <VMap :options="mapOptions" style="height: 500px">
    <VControlNavigation position="top-right"></VControlNavigation>
    <VControlScale position="bottom-left"></VControlScale>
    <VControlFullscreen position="top-right"></VControlFullscreen>
    <VControlGeolocate position="top-right"></VControlGeolocate>
  </VMap>
</template>

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

  const mapOptions = {
    style: 'https://demotiles.maplibre.org/style.json',
    center: [0, 0],
    zoom: 2,
  };

  const pmtilesUrl = 'https://example.com/tiles.pmtiles';

  const layerOptions = {
    id: 'pmtiles-layer',
    type: 'fill' as const,
    paint: {
      'fill-color': '#088',
      'fill-opacity': 0.5,
    },
  };
</script>

<template>
  <VMap :options="mapOptions" support-pmtiles style="height: 500px">
    <VLayerMaplibrePmtile
      :url="pmtilesUrl"
      :layer="layerOptions"
    ></VLayerMaplibrePmtile>
  </VMap>
</template>

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

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

  const points = ref([
    { lng: -74.5, lat: 40, name: 'Point 1' },
    { lng: -74.3, lat: 40.1, name: 'Point 2' },
  ]);

  const geojsonSource = computed<GeoJSONSourceSpecification>(() => ({
    type: 'geojson',
    data: {
      type: 'FeatureCollection',
      features: points.value.map((p) => ({
        type: 'Feature',
        geometry: {
          type: 'Point',
          coordinates: [p.lng, p.lat],
        },
        properties: { name: p.name },
      })),
    },
  }));

  const layerOptions = {
    id: 'points',
    type: 'circle' as const,
    paint: {
      'circle-radius': 8,
      'circle-color': '#007cbf',
    },
  };

  const addPoint = () => {
    points.value.push({
      lng: -74.5 + Math.random() * 0.5,
      lat: 40 + Math.random() * 0.5,
      name: `Point ${points.value.length + 1}`,
    });
  };
</script>

<template>
  <div>
    <button @click="addPoint">Add Point</button>
    <VMap :options="mapOptions" style="height: 500px">
      <VLayerMaplibreGeojson
        :source="geojsonSource"
        :layer="layerOptions"
      ></VLayerMaplibreGeojson>
    </VMap>
  </div>
</template>