Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/cXiaof/maptalks.control.compass
A maptalks Compass Control.
https://github.com/cXiaof/maptalks.control.compass
Last synced: 3 months ago
JSON representation
A maptalks Compass Control.
- Host: GitHub
- URL: https://github.com/cXiaof/maptalks.control.compass
- Owner: cXiaof
- License: mit
- Created: 2018-08-08T08:48:04.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2024-01-10T20:28:04.000Z (10 months ago)
- Last Synced: 2024-07-18T02:49:12.358Z (4 months ago)
- Language: JavaScript
- Homepage: https://cxiaof.github.io/maptalks.control.compass/demo/index.html
- Size: 384 KB
- Stars: 12
- Watchers: 2
- Forks: 3
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# maptalks.control.compass
A maptalks Compass Control.
## Examples
### [DEMO](https://cxiaof.github.io/maptalks.control.compass/demo/index.html)
## Install
- Install with npm: `npm install maptalks.control.compass`.
- Install with yarn: `yarn add maptalks.control.compass`.
- Download from [dist directory](https://github.com/cXiaof/maptalks.control.compass/tree/master/dist).
- Use unpkg CDN: `https://cdn.jsdelivr.net/npm/maptalks.control.compass/dist/maptalks.control.compass.min.js` and `https://cdn.jsdelivr.net/npm/maptalks.control.compass/css/maptalks.control.compass.css`
## Usage
As a Maptalks.control, `maptalks.control.compass` must be loaded after `maptalks.js` in browsers. You can also use `'import { CompassControl } from "maptalks.control.compass"` and `'import "maptalks.control.compass/css/maptalks.control.compass.css"` when developing with webpack.
```html
```
```javascript
// new Control: CompassControl, and add to map.
new maptalks.CompassControl({
position: 'top-right',
backgroundColor: '#00BCD4', // 'rgba(235, 235, 235, .65)'
transform: 'scale(1.2) translate(10%, 10%)',
resetViewTriggers: 'click dblclick', // ['dblclick contextmenu', {duration: 500}]
}).addTo(map)
// All options are optional.
```
## API Reference
```javascript
new maptalks.CompassControl(options)
```
- options [optional]
- position **String** - like other maptalks.Control.
- backgroundColor **String** - background-color of the compass.
- transform **String** - the compass dom's style: 'transform: %s'.
- resetViewTriggers **String | Array** - set `eventsOn` triggers on Compass to set map view to `{bearing: 0, pitch: 0}`. If `Array`, the second value will be used as the animate options.
- events
- add
- remove
- positionchange
- click
- dblclick
- contextmenu
## 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](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
```
- Package and generate minified bundles to dist directory
```shell
$ gulp minify
```
- Lint
```shell
$ npm run lint
```
## More Things
- [maptalks.autoadsorb](https://github.com/cXiaof/maptalks.autoadsorb/issues)
- [maptalks.multisuite](https://github.com/cXiaof/maptalks.multisuite/issues)
- [maptalks.geosplit](https://github.com/cXiaof/maptalks.geosplit/issues)
- [maptalks.polygonbool](https://github.com/cXiaof/maptalks.polygonbool/issues)
- [maptalks.geo2img](https://github.com/cXiaof/maptalks.geo2img/issues)
- [maptalks.control.compass](https://github.com/cXiaof/maptalks.control.compass/issues)
- [maptalks.autogradual](https://github.com/cXiaof/maptalks.autogradual/issues)