---
canonical_url: "https://mapbox.mhaibaraai.cn/en"
---
<u-page-hero className="dark:bg-gradient-to-b,from-neutral-900,to-neutral-950" orientation="horizontal">
<template v-slot:top="">
<hero-background>



</hero-background>
</template>

<template v-slot:title="">
<motion>

Declarative <span className="text-primary">

Mapbox GL

</span>

 Components

</motion>
</template>

<template v-slot:description="">
<motion :transition="{"duration":0.6,"delay":0.3}">

Compose maps, layers, markers and controls declaratively with two-way `v-model` camera bindings. One component set works across Nuxt 4 and plain Vue + Vite, with built-in 3D buildings, dynamic effects, weather environment, and localization basemaps.

</motion>
</template>

<template v-slot:links="">
<motion :transition="{"duration":0.6,"delay":0.5}" className="flex,flex-wrap,gap-x-6,gap-y-3">

[](https://mapbox.mhaibaraai.cn/docs/getting-started)

[](https://github.com/mhaibaraai/movk-mapbox)

</motion>
</template>

<motion :transition="{"duration":0.6,"delay":0.1}" className="mx-auto,w-full">
<home-hero-demo>



</home-hero-demo>
</motion>
</u-page-hero>

<u-page-section className="dark:bg-neutral-950">
<template v-slot:title="">

Core Features

</template>

<template v-slot:description="">

Declarative composition, context injection, and dual-mode runtime — from a simple basemap to complex 3D effects and localized tile services, adopt only what you need.

</template>

<template v-slot:features="">
<u-page-feature icon="i-lucide-blocks">
<template v-slot:title="">

Declarative Composition

</template>

<template v-slot:description="">

Compose maps, sources, layers, markers, popups and controls as components. State is the view — no more imperative add/remove boilerplate.

</template>
</u-page-feature>

<u-page-feature icon="i-lucide-share-2">
<template v-slot:title="">

MapboxContext Injection

</template>

<template v-slot:description="">

The root component provides context down the tree. Child components access the map instance, isLoaded, and whenLoaded() via useMap() — no id lookups needed.

</template>
</u-page-feature>

<u-page-feature icon="i-lucide-move">
<template v-slot:title="">

Camera Two-Way Binding

</template>

<template v-slot:description="">

v-model:center / zoom / bearing / pitch keeps camera parameters in sync both ways, with cross-route persistent support.

</template>
</u-page-feature>

<u-page-feature icon="i-lucide-layers">
<template v-slot:title="">

Rich Layers & Effects

</template>

<template v-slot:description="">

Built-in circle / fill / line / symbol / fill-extrusion / heatmap layers plus clustering, buildings, raster and video layers. Overlay radar, diffusion, glow, ripple, migration, and trajectory dynamic effects.

</template>
</u-page-feature>

<u-page-feature icon="i-lucide-cloud-sun">
<template v-slot:title="">

Environment & Weather

</template>

<template v-slot:description="">

Fog atmosphere, 3D lights, terrain, and temperature / rain / snow weather — combined with camera tilt for an immersive 3D scene.

</template>
</u-page-feature>

<u-page-feature icon="i-lucide-map">
<template v-slot:title="">

Localization Extensions

</template>

<template v-slot:description="">

Tianditu basemaps, WMS / WMTS services, mapbox-gl-draw integration, and WGS84 / GCJ02 / BD09 coordinate conversion via gcoord — all out of the box.

</template>
</u-page-feature>

<u-page-feature icon="i-lucide-package">
<template v-slot:title="">

Nuxt / Vue Dual Mode

</template>

<template v-slot:description="">

Works as a Nuxt 4 module and also provides @movk/mapbox/vite + vue-plugin, so the same components are available in plain Vue + Vite projects.

</template>
</u-page-feature>

<u-page-feature icon="i-lucide-toy-brick">
<template v-slot:title="">

Composables & Utilities

</template>

<template v-slot:description="">

Composables including useMap, useMapboxCamera, useMeasure, and useMapExport, paired with coordinate, buffer, geometry, and measurement utilities for progressive adoption.

</template>
</u-page-feature>
</template>
</u-page-section>

<u-page-c-t-a :links="[{"label":"Star on GitHub","to":"https://github.com/mhaibaraai/movk-mapbox","target":"_blank","icon":"i-lucide-star","color":"neutral"},{"label":"Get Started","to":"/docs/getting-started","color":"neutral","variant":"outline","trailingIcon":"i-lucide-arrow-right"}]" className="dark:bg-neutral-950">
<template v-slot:title="">

Start Building Your Next Map

</template>

<template v-slot:description="">

From a simple basemap to 3D buildings, dynamic effects, and localized tile services — Movk Mapbox distills the complexity of Mapbox GL into composable, declarative components.

</template>
</u-page-c-t-a>


## Sitemap

See the full [sitemap](https://mapbox.mhaibaraai.cn/sitemap.md) for all pages.