maptalks.animatemarker

A maptalks Layer to animate markers.

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
maptalks.animatemarker
1120.4.12 years ago7 years agoMinified + gzip package size for maptalks.animatemarker in KB

Readme

maptalks.animatemarker
CircleCI NPM Version A plugin of maptalks.js to draw markers with animation. screenshot

Examples

Install

  • Install with npm: ``npm install maptalks.animatemarker``.
  • 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 ```

Supported Browsers

IE 9-11, Chrome, Firefox, other modern and mobile browsers.

API Reference

``AnimateMarkerLayer`` is a subclass of maptalks.VectorLayer 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 and tested with mocha and 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 ```