Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/alex2wong/mapbox-plugins
Customized Mapbox :earth_asia: plugins, including game :video_game: control, canvasOverlayer , scene animation. using ES6
https://github.com/alex2wong/mapbox-plugins
canvas echart4 es6 mapbox plugins webpack2
Last synced: 6 days ago
JSON representation
Customized Mapbox :earth_asia: plugins, including game :video_game: control, canvasOverlayer , scene animation. using ES6
- Host: GitHub
- URL: https://github.com/alex2wong/mapbox-plugins
- Owner: alex2wong
- License: bsd-2-clause
- Created: 2017-09-01T02:26:58.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2023-10-20T05:53:27.000Z (over 1 year ago)
- Last Synced: 2025-01-09T06:08:40.847Z (13 days ago)
- Topics: canvas, echart4, es6, mapbox, plugins, webpack2
- Language: JavaScript
- Homepage:
- Size: 20.1 MB
- Stars: 141
- Watchers: 9
- Forks: 41
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# mapbox-plugins [](https://app.netlify.com/sites/cocky-thompson-95a9bc/deploys) 
Customized Mapbox plugins, including game control, canvasOverlayer, scene animation
https://alex2wong.github.io/mapbox-plugins/
[API Docs](https://alex2wong.github.io/mapbox-plugins/docs/)
For more detailed wiki, pls read **issue blogs**:
- [canvas wind layer](https://github.com/alex2wong/mapbox-plugins/issues/3)
- [canvas line style](https://github.com/alex2wong/mapbox-plugins/issues/4)
Note: pls visit all demo with **HTTPS**..
👆 canvas line style which can be integrate to any map/chart lib.
👆 Voxelize terrain data from a height image.
👆 Extrude typhoon radar image.
👆 Animated Lines/Particle system.
## Online demo
[placeholder]:p
| Demo | Code |
| :-------- | :--------:|
| [Sprite track DEMO](https://alex2wong.github.io/mapbox-plugins/examples/sprite) | [view code](https://github.com/alex2wong/mapbox-plugins/tree/master/examples/sprite) |
| [Custom dom overlay DEMO](https://alex2wong.github.io/mapbox-plugins/examples/domoverlay) | [view code](https://github.com/alex2wong/mapbox-plugins/tree/master/examples/domoverlay) |
| [R-tree search (5000 rectangles) DEMO](https://alex2wong.github.io/mapbox-plugins/examples/rbush) | [view code](https://github.com/alex2wong/mapbox-plugins/tree/master/examples/rbush) |
| [Global Wind Layer. render 1w point animation with Canvas](https://alex2wong.github.io/mapbox-plugins/examples/windLayer) | [view code](https://github.com/alex2wong/mapbox-plugins/tree/master/examples/windLayer) |
| [Integrate with Chart.js](https://alex2wong.github.io/mapbox-plugins/examples/chartlayer) | [view code](https://github.com/alex2wong/mapbox-plugins/tree/master/examples/chartlayer) |
| [Glow animation](https://alex2wong.github.io/mapbox-plugins/examples/glowstyle) | [view code](https://github.com/alex2wong/mapbox-plugins/tree/master/examples/glowstyle) |
| [Cool Route Animation](https://alex2wong.github.io/mapbox-plugins/examples/line_animation) | [view code](https://github.com/alex2wong/mapbox-plugins/tree/master/examples/line_animation) |
| [Canvas Line Style](https://alex2wong.github.io/mapbox-plugins/examples/line_style) | [view code](https://github.com/alex2wong/mapbox-plugins/blob/master/examples/line_style/index.html) |
| [Canvas Staring Demo](https://alex2wong.github.io/mapbox-plugins/examples/particle_mask/) ||
| [Tilting Ui Marker](https://alex2wong.github.io/mapbox-plugins/examples/vectortile)|[view code](https://github.com/alex2wong/mapbox-plugins/blob/master/examples/vectortile/index.html)|
| [Threejs Typhoon](https://alex2wong.github.io/mapbox-plugins/examples/typhoon/) | [view code](https://github.com/alex2wong/mapbox-plugins/blob/master/examples/typhoon/index.js) |
| [Line_Pattern](https://alex2wong.github.io/mapbox-plugins/examples/line_pattern/) | [view code](https://github.com/alex2wong/mapbox-plugins/blob/master/examples/index.html) |
## Install and use
> npm i mapbox-plugins
For node.js:
```
var Mapbox = require('mapbox-plugins')
console.warn(Mapbox.Config);
```
More often, for es6 development:
```
import { Config, CanvasOverlayer } from 'mapbox-plugins';
var canvasLayer = new CanvasOverlayer({
map: map, // bind canvasOverlay with mapbox map instance..
});
```
## Run locally
> npm install
> npm run dev
then visit from http://localhost:8080/examples/, HotModuleReload supported.
> npm run rbuild
to build all plugins into Mapbox.umd.js/Mapbox.esm.js
## How to use
plugins provide canvasOverlay, domOverlay ,Sprite, gameControl extension etc. for example:
```javascript
// create a CanvasOverlayer on Mapbox map instance..
var canvasLayer = new Mapbox.CanvasOverlayer({
map: map,
shadow: false,
keepTrack: true,
blurWidth: 4
});
// create a Drone inherites Sprite Class
var drone = new Mapbox.Drone({
direction: 45,
icon: "drone.jpg"
});
// add keyboard control to Sprite.
Mapbox.Controllers.gameControl(drone);
function update(){
drone.updateStatus();
// render drone on canvasLayer.
canvasLayer.redraw([drone]);
requestAnimationFrame(update);
}
update();
```
### **☆Star, Enhancement and PR** are welcome :)