Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/maptalks/maptalks.animatemarker
A plugin of maptalks.js to draw markers with animation.
https://github.com/maptalks/maptalks.animatemarker
map mapping maptalks maptalks-layer maptalks-plugins marker
Last synced: 3 months ago
JSON representation
A plugin of maptalks.js to draw markers with animation.
- Host: GitHub
- URL: https://github.com/maptalks/maptalks.animatemarker
- Owner: maptalks
- License: mit
- Created: 2017-01-22T04:46:50.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2022-06-09T06:28:22.000Z (over 2 years ago)
- Last Synced: 2024-07-19T20:20:44.636Z (4 months ago)
- Topics: map, mapping, maptalks, maptalks-layer, maptalks-plugins, marker
- Language: JavaScript
- Homepage:
- Size: 771 KB
- Stars: 11
- Watchers: 3
- Forks: 5
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# maptalks.animatemarker
[](https://circleci.com/gh/MapTalks/maptalks.animatemarker)
[](https://github.com/maptalks/maptalks.animatemarker)
A plugin of [maptalks.js](https://github.com/maptalks/maptalks.js) to draw markers with animation.
## Examples
* [Locations of this week's earthquakes](https://maptalks.github.io/maptalks.animatemarker/demo/).
## Install
* Install with npm: ```npm install maptalks.animatemarker```.
* Download from [dist directory](https://github.com/maptalks/maptalks.animatemarker/tree/gh-pages/dist).
* Use unpkg CDN: ```https://unpkg.com/maptalks.animatemarker/dist/maptalks.animatemarker.min.js```
## Usage
As a plugin, ```maptalks.animatemarker``` must be loaded after ```maptalks.js``` in browsers.
```html
var data = [marker1, marker2, marker3];
var animMarkerLayer = new maptalks.AnimateMarkerLayer('anim-markers', data).addTo(map);
```
## Supported Browsers
IE 9-11, Chrome, Firefox, other modern and mobile browsers.
## API Reference
```AnimateMarkerLayer``` is a subclass of [maptalks.VectorLayer](https://maptalks.github.io/docs/api/VectorLayer.html) and inherits all the methods of its parent.
### `Constructor`
```javascript
new maptalks.AnimateMarkerLayer(id, data, options)
```
* id **String** layer id
* data **Marker[]** layer data, an array of maptalks.Marker
* options **Object** options
* animation **String** animation effects: 'scale', 'fade' or 'scale,fade' ('scale,fade' by default)
* animationDuration **Number** the animation duration (3000 by default)
* randomAnimation **Boolean** animation begins randomly (true by default)
* animationOnce **Boolean** whether animation only run once (false by default)
* fps **Number** fps of animation (24 by default)
* Other options defined in [maptalks.VectorLayer](https://maptalks.github.io/docs/api/VectorLayer.html)
### `config(key, value)`
config layer's options and redraw the layer if necessary
```javascript
animMarkerLayer.config('animation', 'scale');
```
**Returns** `this`
### `toJSON()`
export the layer's JSON.
```javascript
var json = animMarkerLayer.toJSON();
var animLayer = maptalks.Layer.fromJSON(json);
```
**Returns** `Object`
## Contributing
We welcome any kind of contributions including issue reportings, pull requests, documentation corrections, feature requests and any other helps.
## Develop
The only source file is ```index.js```.
It is written in ES6, transpiled by [babel](https://babeljs.io/) and tested with [mocha](https://mochajs.org) and [expect.js](https://github.com/Automattic/expect.js).
### Scripts
* Install dependencies
```shell
$ npm install
```
* Watch source changes and generate runnable bundle repeatedly
```shell
$ gulp watch
```
* Tests
```shell
$ npm test
```
* Watch source changes and run tests repeatedly
```shell
$ gulp tdd
```
* Package and generate minified bundles to dist directory
```shell
$ gulp minify
```
* Lint
```shell
$ npm run lint
```