MapDataset

A Map Dataset Component displays geospatial vector data with the ability to filter features and color

Features

• Vector/GeoJSON support – Works with vector tiles or raw
• Attribute-based coloring – Automatically assigns colors based on feature properties.
• Filtering – Displays only features matching specific criteria (e.g., category, status).
• Dynamic updates – Filters and colors can be changed in real time without reloading data.
• Interactive – Easily extendable with click, hover, and tooltip functionality.

Documentation

Check out the documentation and live demo here: Live Demo & Docs

Install & Usage

Install

npm i @opengis/mapdataset

Usage

<template>
  <MapDataset
    height="calc(100vh - 84px)"
    width="w-full"
    table="td.project_plg_map.table"
    :center="[30.6206,50.4380]"
    :zoom="10"
    :colorAttr="'plg_stage'">

    <template #popup="{ data }">
      <div class="flex flex-col bg-white ">       
          {{ data }}
      </div>
    </template>

    <template #card="{ cardData, map }">
      {{ cardData }}
    </template>
  
  </MapDataset> 
</template>

<script setup lang="ts">
 
 import {ref} from 'vue'  
 import MapDataset from "@opengis/mapdataset";
 import "@opengis/mapdataset/dist/index.css";

</script>

Style

<script src="https://cdn.tailwindcss.com"></script>

Contributions

We welcome contributions! Feel free to open issues, suggest features, or submit pull requests.