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

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