Skip to content

Latest commit

 

History

History
116 lines (81 loc) · 3.4 KB

README.md

File metadata and controls

116 lines (81 loc) · 3.4 KB
Raw

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.
  • 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