https://github.com/nqdy666/fabric-map-vue

Fabric-based map coordinate, SVG heatmap
https://github.com/nqdy666/fabric-map-vue

coordinates distance fabricjs heatmap map svg vue

Last synced: 5 months ago
JSON representation

Fabric-based map coordinate, SVG heatmap

• Host: GitHub
• URL: https://github.com/nqdy666/fabric-map-vue
• Owner: nqdy666
• License: mit
• Created: 2019-03-27T09:46:21.000Z (over 7 years ago)
• Default Branch: dev
• Last Pushed: 2022-12-10T06:07:08.000Z (over 3 years ago)
• Last Synced: 2024-04-14T10:11:14.727Z (over 2 years ago)
• Topics: coordinates, distance, fabricjs, heatmap, map, svg, vue
• Language: Vue
• Homepage: https://nqdy666.github.io/fabric-map-vue/
• Size: 10.3 MB
• Stars: 18
• Watchers: 2
• Forks: 3
• Open Issues: 21
• Metadata Files:
  • Readme: README.en.md
  • Changelog: CHANGELOG.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

          
# fabric-map-vue

[![version](https://img.shields.io/npm/v/fabric-map-vue.svg)](https://www.npmjs.com/package/fabric-map-vue)

[![download](https://img.shields.io/npm/dm/fabric-map-vue.svg)](https://www.npmjs.com/package/fabric-map-vue)

[![license](https://img.shields.io/github/license/nqdy666/fabric-map-vue.svg)](https://github.com/nqdy666/fabric-map-vue/blob/dev/LICENSE)

> Fabric-based map coordinate, SVG heatmap

> [CN 中文版](./README.md)

Based on [fabricjs] (http://fabricjs.com/) v2.4.5 development, the heat map is based on [heatmap.js](https://www.patrick-wied.at/static/heatmapjs/) v2.0.5+ development , relying on [Vue.js] (https://vuejs.org/) v2.2.6+.

#### Features

- Auto resize

- heatmap

- Map coordinate

- Distance drawing

- Map switching

## Document

- **[Demo](https://nqdy666.github.io/fabric-map-vue/)**

- **[Example on JSBin](https://jsbin.com/hukeko/edit?html,output)**

## Feature Preview

**Heatmap [sample source] (https://github.com/nqdy666/fabric-map-vue/blob/dev/docs/pages/index.vue)**

![Heatmap](docs/assets/images/heatmap.gif)

**Zoom type [sample source] (https://github.com/nqdy666/fabric-map-vue/blob/dev/docs/pages/zoom.vue)**

![zoom type](docs/assets/images/zoom.gif)

**Map Coordinate [sample source] (https://github.com/nqdy666/fabric-map-vue/blob/dev/docs/pages/coord.vue)**

![Map Coordinate](docs/assets/images/coord.gif)

**Distance drawing [sample source code] (https://github.com/nqdy666/fabric-map-vue/blob/dev/docs/pages/distance.vue)**

![Distance drawing](docs/assets/images/distance.gif)

**Map Switching [sample source] (https://github.com/nqdy666/fabric-map-vue/blob/dev/docs/pages/mapswitch.vue)**

![Map Switch](docs/assets/images/mapswitch.gif)

**Background setting [sample source] (https://github.com/nqdy666/fabric-map-vue/blob/dev/docs/pages/background.vue)**

![Background Settings](docs/assets/images/background.gif)

## Installation

#### NPM

Install the package.

```bash

$ npm install fabric-map-vue

```

First need to quote fabric.js

```html

```

Register the component

```js

Import Vue from 'vue'

Import FabricMapVue from 'fabric-map-vue'

Vue.use(FabricMapVue)

```

You may now use the component in your markup

```html

```

#### CDN

include `vue`, `fabric.js`, `heatmap.js`, `fabric-map-vue.js`, `fabric-map-vue.css`

```html

```

```html

```

You may now use the component in your markup

```html

```

## Local development

development

```bash

$ npm i

$ npm run docs-dev

```

publish

```bash

$ npm install -g babel-cli@6.26.0

$ npm install -g rollup@0.67.3

$ chmod a+x scripts/build

$ npm run release

$ git push --follow-tags origin dev && npm publish

```

If you use the window system, you can't execute directly `npm run release`, you need to install git bash software, and then use git bash to execute the command `./scripts/build` and `npm run release:only`.

docs-publish

```bash

$ npm install -g gh-pages

$ chmod a+x scripts/docs-publish

$ npm run docs-publish

```

If you use the window system, you can't execute directly `npm run docs-publish`, you need to install git bash software, and then use git bash to execute the command `./scripts/docs-publish`.

## Donation

If you find it useful, you can buy us a cup of coffee.



## License

[MIT](https://github.com/nianqin/fabric-map-vue/blob/dev/LICENSE.md)

Copyright (c) 2019-present, Qin Nian