@hungpvq/vue-map-dataset

Vue 3 UI for map datasets: layer list, groups, identify, legends, and menus. Logic lives in @hungpvq/map-dataset. React counterpart: @hungpvq/react-map-dataset.

Docs: Getting started · GIS worker · Components · Menus · Events · Export · Attribute table

Install

npm install @hungpvq/vue-map-dataset @hungpvq/vue-map-core @hungpvq/map-dataset @hungpvq/map-core

Import the full style set (shared cores + adapters + draggable — dataset UI is not covered by map-core CSS alone):

import '@hungpvq/map-core/style.css';
import '@hungpvq/map-dataset/style.css';
import '@hungpvq/vue-map-core/style.css';
import '@hungpvq/vue-map-dataset/style.css';
import '@hungpvq/vue-draggable/style.css';

Bootstrap once at app entry (installMapApp = theme + dataset registry):

import { createApp } from 'vue';
import { createStoreRegistryPlugin } from '@hungpvq/shared-store';
import { installMapApp } from '@hungpvq/vue-map-dataset';

const app = createApp(App);
app.use(createStoreRegistryPlugin());
installMapApp(app);

Create-layer reads GIS files and reprojects CRS in a Web Worker. Apps that install the published package need mapDatasetGisWorker() from @hungpvq/map-dataset/vite. In this Nx workspace use worker.format: 'es' + nxViteTsPaths() on worker.plugins — see GIS worker.

Usage

<template>
  <Map :mapId="mapId" @map-loaded="onMapLoaded">
    <LayerControl position="top-left" show />
  </Map>
</template>

<script setup lang="ts">
import type { MapSimple } from '@hungpvq/map-core';
import { getUUIDv4 } from '@hungpvq/shared';
import { Map } from '@hungpvq/vue-map-core';
import {
  LayerControl,
  useMapDataset,
} from '@hungpvq/vue-map-dataset';
import {
  createRootDataset,
  createDatasetPartListViewUiComponentBuilder,
} from '@hungpvq/map-dataset';
import { ref } from 'vue';

const mapId = ref(getUUIDv4());

function onMapLoaded(map: MapSimple) {
  const { addDataset } = useMapDataset(map.id);
  const dataset = createRootDataset('Sample');
  dataset.add(createDatasetPartListViewUiComponentBuilder('Layer').build());
  addDataset(dataset);
}
</script>

What is included

• LayerControl / LayerInfoControl — editable or read-only layer list
• IdentifyControl / IdentifyShowFirstControl / useMapHighlight (pointer via app HighlightPointer or bindPointer)
• DatasetControl / ComponentManagementControl (dialogs from menus)
• Export GeoJSON as GeoJSON / KML / CSV / Shapefile
• Attribute table for GeoJSON feature properties
• Adapter hooks and stores for adding datasets and rendering UI
• Layer menus: extra / bottom / context menu
• setHidden / setDisabled with menuContext (Pinia, props, …)
• setComponentMenuKey for custom context-menu UI
• Built-in Move up/down and Add to group
• List-node events: toggleShow, changeOpacity

Import dataset builders, services, protocols, locale bags, and shared types from @hungpvq/map-dataset.

License

MIT