Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/fuzhenn/maptalks.plotsymbol
A maptalks plugin to support plot symbols, e.g. DiagonalArrow, StraightArrow, etc.
https://github.com/fuzhenn/maptalks.plotsymbol
Last synced: 7 days ago
JSON representation
A maptalks plugin to support plot symbols, e.g. DiagonalArrow, StraightArrow, etc.
- Host: GitHub
- URL: https://github.com/fuzhenn/maptalks.plotsymbol
- Owner: fuzhenn
- License: mit
- Created: 2017-02-01T16:37:12.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2024-03-13T04:03:01.000Z (8 months ago)
- Last Synced: 2024-10-09T08:08:20.183Z (26 days ago)
- Language: JavaScript
- Size: 236 KB
- Stars: 29
- Watchers: 4
- Forks: 10
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# maptalks.plotsymbol
A maptalks plugin to support plot symbols, e.g. DoubleArrow, ClosedCurve, Sector, DiagonalArrow, StraightArrow, etc.
All support geometries are listed below:
* DoubleArrow
* ClosedCurve
* Sector
* StraightArrow
* DiagonalArrow
* DoveTailDiagonalArrow
## Examples
* A demo of [maptlaks.plotsymbol](https://fuzhenn.github.io/maptalks.plotsymbol/demo/).
* A demo of [AnimateShow](https://fuzhenn.github.io/maptalks.plotsymbol/demo/animateShow.html).
## Install
* Install with npm: ```npm install maptalks.plotsymbol```.
* Download from [dist directory](https://github.com/maptalks/maptalks.plotsymbol/tree/gh-pages/dist).
* Use unpkg CDN: ```https://unpkg.com/maptalks.plotsymbol/dist/maptalks.plotsymbol.min.js```
## Usage
As a plugin, ```maptalks.plotsymbol``` must be loaded after ```maptalks.js``` in browsers.
### Vanilla Javascript
```html
var drawTool = new maptalks.DrawTool({
mode: 'DoubleArrow'
symbol : {
'lineColor' : '#e84',
'polygonFill' : '#f00',
'polygonOpacity' : 0.5,
}
}).addTo(map).disable();
drawTool.on('drawend', function (param) {
//Add geometry to a VectorLayer
});
```
### ES6
```javascript
//You just need to import it, and then you can draw geometries by a drawtool.
import plotsymbol from 'maptalks.plotsymbol';
const drawTool = new maptalks.DrawTool({
mode: 'Point',
symbol : {
'lineColor' : '#e84',
'polygonFill' : '#f00',
'polygonOpacity' : 0.5,
}
}).addTo(map).disable();
//You can set many modes like DoubleArrow, ClosedCurve, Sector, DiagonalArrow, StraightArrow and so on.
drawTool.setMode('DoubleArrow');
drawTool.on('drawend', function (param) {
//Add geometry to a VectorLayer
});
```
## Supported Browsers
IE 9-11, Chrome, Firefox, other modern and mobile browsers.
## Contributing
We welcome any kind of contributions including issue reportings, pull requests, documentation corrections, feature requests and any other helps.
## Develop
The ```index.js``` export all support geometries, like DoubleArrow, ClosedCurve, DiagonalArrow, etc.
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
```