maptalks.animatemarker
v0.4.1
Published
A maptalks Layer to animate markers.
Downloads
17
Readme
maptalks.animatemarker
A plugin of maptalks.js to draw markers with animation.
Examples
Install
- Install with npm:
npm install maptalks.animatemarker
. - Download from dist directory.
- 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.
<script type="text/javascript" src="https://unpkg.com/maptalks/dist/maptalks.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/maptalks.animatemarker/dist/maptalks.animatemarker.min.js"></script>
<script>
var data = [marker1, marker2, marker3];
var animMarkerLayer = new maptalks.AnimateMarkerLayer('anim-markers', data).addTo(map);
</script>
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
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
config(key, value)
config layer's options and redraw the layer if necessary
animMarkerLayer.config('animation', 'scale');
Returns this
toJSON()
export the layer's JSON.
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
$ npm install
- Watch source changes and generate runnable bundle repeatedly
$ gulp watch
- Tests
$ npm test
- Watch source changes and run tests repeatedly
$ gulp tdd
- Package and generate minified bundles to dist directory
$ gulp minify
- Lint
$ npm run lint