README.md

mapbox-plugins

Customized Mapbox plugins, including game control, canvasOverlayer, scene animation

https://alex2wong.github.io/mapbox-plugins/

API Docs

For more detailed wiki, pls read issue blogs:

• canvas wind layer

• canvas line style

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

Demo	Code
Sprite track DEMO	view code
Custom dom overlay DEMO	view code
R-tree search (5000 rectangles) DEMO	view code
Global Wind Layer. render 1w point animation with Canvas	view code
Integrate with Chart.js	view code
Glow animation	view code
Cool Route Animation	view code
Canvas Line Style	view code
Canvas Staring Demo
Tilting Ui Marker	view code
Threejs Typhoon	view code
Line_Pattern	view code

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:

// 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 :)