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