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.

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

run locally

npm install

npm run dev

then visit from http://localhost:8080/examples/, HotModuleReload supported.

npm run build

to Build all plugins into bundle.js with namespace: Mapbox

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: "https://alex2wong.github.io/mapbox-plugins/assets/tri2.png"
});
 
// add keyboard control to Sprite.
Mapbox.Controllers.gameControl(drone);
function update(){
    drone.updateStatus();
    // render drone on canvasLayer.
    canvasLayer.redraw([drone]);
    requestAnimationFrame(update);
}
update();
 

Any ☆Star, Enhancement and PR are welcome :)