Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/razorness/vue-maplibre-gl

Vue 3 plugin for maplibre-gl-js
https://github.com/razorness/vue-maplibre-gl

Last synced: about 1 month ago
JSON representation

Vue 3 plugin for maplibre-gl-js

Host: GitHub
URL: https://github.com/razorness/vue-maplibre-gl
Owner: razorness
Created: 2021-08-23T16:34:47.000Z (over 2 years ago)
Default Branch: master
Last Pushed: 2024-02-16T14:11:32.000Z (3 months ago)
Last Synced: 2024-02-16T15:30:46.493Z (3 months ago)
Language: TypeScript
Size: 2.87 MB
Stars: 57
Watchers: 2
Forks: 14
Open Issues: 7
Metadata Files:
- Readme: README.md

Lists

awesome-vue - vue-maplibre-gl - Vue 3.x wrapper around Maplibre GL JS library written in TS. Including style switch and frame rate control. (Components & Libraries / UI Components)

README

        # vue-maplibre-gl

[![npm](https://img.shields.io/npm/v/vue-maplibre-gl.svg?style=flat-square)](https://www.npmjs.com/package/vue-maplibre-gl)

[![npm](https://img.shields.io/npm/dm/vue-maplibre-gl?style=flat-square)](https://www.npmjs.com/package/vue-maplibre-gl)

[![size](https://img.shields.io/bundlephobia/minzip/vue-maplibre-gl?label=size&style=flat-square)](https://bundlephobia.com/package/vue-maplibre-gl)

[![vue3](https://img.shields.io/badge/vue-3.x-brightgreen.svg?style=flat-square)](https://vuejs.org/)

[![MaplibreGL-JS](https://img.shields.io/badge/Maplibre%20GL%20JS-3.x-brightgreen?style=flat-square)](https://maplibre.org/projects/maplibre-gl-js/)

[![TypeScript](https://img.shields.io/badge/-TypeScript-informational?style=flat-square)](https://www.typescriptlang.org/)

A small Vue 3 plugin for [maplibre-gl-js](https://github.com/maplibre/maplibre-gl-js). Only additional dependency is [mitt](https://github.com/developit/mitt).

## Features

- Supports MapLibre GL JS v3.x

- Typescript support

- Components for map, controls, sources, markers and layers

- Support for custom controls

- Customizable style switch which reloads sources and layers automatically

- Frame rate control included

- Support for multiple instances and global access by `useMap(key: string | symbol)`

- Simple way to switch displayed map language

- Automatic restart on CONTEXT_LOST_WEBGL which can happen on mobile devices when tab was in background for longer time 

- Small size

## Table of contents

- [Installation](#installation)

- [Usage](#usage)

# Installation

```shell

yarn add vue-maplibre-gl maplibre-gl mitt

```

## Default import

Global Install:

```typescript

import VueMaplibreGl from 'vue-maplibre-gl'

app.use(VueMaplibreGl)

```

Add CSS:

```scss

@import "~maplibre-gl/dist/maplibre-gl.css";

@import "~vue-maplibre-gl/dist/vue-maplibre-gl.css";

```

Use specific components:

```typescript

import { MglMap } from 'vue-maplibre-gl'

app.component('MglMap', MglMap)

```

or in a parent components `.vue` file

```html

	import { MglMap } from 'vue-maplibre-gl'

	export default {

		components: {

			MglMap

		},

		// ...

	}

```

# Usage

See [src/App.vue](src/App.vue) for a real world example.

# Demo

```shell

git clone https://github.com/razorness/vue-maplibre-gl.git

cd vue-maplibre-gl

yarn

yarn dev

```

## PRs welcome ♥

If you have ideas, improvements, suggestions etc. don't hesitate to open a pull request.

### Todos

- [ ] Usage examples

- [ ] Demo

- [ ] API documentation

- [ ] Support `v-model:...` for some basic props

- [x] Add layer events

- [ ] Add [Web-types](https://github.com/JetBrains/web-types)

- [x] Add [frame rate control](https://github.com/mapbox/mapbox-gl-framerate)

## License

[MIT](http://opensource.org/licenses/MIT)