Customized Mapbox plugins, including game control, canvasOverlayer, scene animation
https://alex2wong.github.io/mapbox-plugins/
For more detailed wiki, pls read issue blogs:
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.
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..
});
npm install
npm run dev
then visit from https://localhost:8080/examples/, HotModuleReload supported.
npm run rbuild
to build all plugins into Mapbox.umd.js/Mapbox.esm.js
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();