maptalks / maptalks.animatemarker

A plugin of maptalks.js to draw markers with animation.

maptalks.animatemarker

A plugin of maptalks.js to draw markers with animation.

Examples

• Locations of this week's earthquakes.

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

maptalks.animatemarker's Issues

在maptalks升级到0.29版本后会，maptalks.animatemarker会报错

错误见截图

重现如下：http://139.159.219.234/maptalksdemo/dist/geo_examples/光晕闪烁效果并增加新的点.html

'enableAltitude' option 不起作用

'enableAltitude' option 在 VectorLayer 中起作用，但是在AnimateMarkerLayer中没有作用

如何基于maptalks.e3?

如何在maptalks.e3图层的基础上引入这个插件? 试了一下, 没什么效果

readme image

dependencies error with maptalks

Hi

FYI, i have this error message in the console:

maptalks.animatemarker v0.4.1, requires maptalks@>=0.25.0.

My package.json

"maptalks": "1.0.0-rc.17",
"maptalks.animatemarker": "0.4.1",

I'm working in ES6 so

import * as maptalks from 'maptalks';
import { AnimateMarkerLayer } from 'maptalks.animatemarker';

...
const map = new maptalks.Map('map', .... );
const layer = new AnimateMarkerLayer( ... );

Thanks