MapVue 🗺️

📄 English README ｜ Chinese README

👏🏻 English Doc | Chinese Doc

🌰 Examples

A well-packaged MapboxGL component library

MapVue is a comprehensive MapboxGL component library. You can easily and happily apply MapVue to your Vue projects. Import various data sources and layers in the form of components, and modify the state of the layer by modifying the parameters of props.

The purpose of MapVue is to allow users to develop GIS in Vue more concisely and efficiently.

How it works?

MapVue essentially wraps some classes in MapboxGL and implements componentization through some variable properties of the watch class.

For example, the v-fill-layer component actually wraps the FillLayer class.

Installation

# use npm
npm install mapbox-gl mapvue

# use yarn
yarn add mapbox-gl mapvue

# use pnpm
pnpm add mapbox-gl mapvue

Import

import { createApp } from "vue";
import MapVue from "mapvue";
import 'mapbox-gl/dist/mapbox-gl.css';
import App from "./App.vue";

createApp(App).use(MapVue).mount("#app");

Use Component

<script setup>
import { reactive } from "vue";
import token from "some-where";
</script>

<template>
  <v-map :accessToken="token" :options="state.mapOptions">
    <v-geo-source
      id="earthquakes"
      data="https://docs.mapbox.com/mapbox-gl-js/assets/earthquakes.geojson"
      :cluster="true"
      :clusterMaxZoom="14"
      :clusterRadius="50"
    />
    <v-circle-layer 
      id="clusters" 
      source="earthquakes"
      :filter="['has', 'point_count']"
      ...
    />
  </v-map>
</template>