{"id":14976351,"url":"https://github.com/alex2wong/mapbox-plugins","last_synced_at":"2025-04-13T06:36:48.930Z","repository":{"id":57291155,"uuid":"102065007","full_name":"alex2wong/mapbox-plugins","owner":"alex2wong","description":"Customized Mapbox :earth_asia: plugins, including game :video_game: control, canvasOverlayer , scene animation. using ES6","archived":false,"fork":false,"pushed_at":"2023-10-20T05:53:27.000Z","size":21118,"stargazers_count":143,"open_issues_count":7,"forks_count":42,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-03-24T07:45:54.220Z","etag":null,"topics":["canvas","echart4","es6","mapbox","plugins","webpack2"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-2-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/alex2wong.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2017-09-01T02:26:58.000Z","updated_at":"2025-03-12T06:08:34.000Z","dependencies_parsed_at":"2023-10-20T16:22:57.036Z","dependency_job_id":null,"html_url":"https://github.com/alex2wong/mapbox-plugins","commit_stats":{"total_commits":110,"total_committers":2,"mean_commits":55.0,"dds":0.009090909090909038,"last_synced_commit":"6c5fc17b531605a182c0bba34f9a4dde94fa32eb"},"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alex2wong%2Fmapbox-plugins","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alex2wong%2Fmapbox-plugins/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alex2wong%2Fmapbox-plugins/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alex2wong%2Fmapbox-plugins/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/alex2wong","download_url":"https://codeload.github.com/alex2wong/mapbox-plugins/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248675306,"owners_count":21143763,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["canvas","echart4","es6","mapbox","plugins","webpack2"],"created_at":"2024-09-24T13:53:45.874Z","updated_at":"2025-04-13T06:36:48.908Z","avatar_url":"https://github.com/alex2wong.png","language":"JavaScript","readme":"# mapbox-plugins [![Netlify Status](https://api.netlify.com/api/v1/badges/218aee4f-8771-4bb6-bb22-0df0a4a221a3/deploy-status)](https://app.netlify.com/sites/cocky-thompson-95a9bc/deploys) \u003cimg src=\"https://img.shields.io/npm/v/mapbox-plugins\" /\u003e \u003cimg src=\"https://img.shields.io/npm/l/mapbox-plugins.svg\" alt=\"license\"\u003e\n\nCustomized Mapbox plugins, including game control, canvasOverlayer, scene animation\n\nhttps://alex2wong.github.io/mapbox-plugins/\n\n[API Docs](https://alex2wong.github.io/mapbox-plugins/docs/)\n\nFor more detailed wiki, pls read **issue blogs**:\n\n- [canvas wind layer](https://github.com/alex2wong/mapbox-plugins/issues/3)\n\n- [canvas line style](https://github.com/alex2wong/mapbox-plugins/issues/4)\n\nNote: pls visit all demo with **HTTPS**..\n\n![Point animation](https://github.com/alex2wong/mapbox-plugins/blob/master/assets/demo/point.gif)\n\n![Custom popup/Route animation](https://github.com/alex2wong/mapbox-plugins/blob/master/assets/demo/popup.gif)\n\n![Chartjs integration](https://github.com/alex2wong/mapbox-plugins/blob/master/assets/demo/chart.gif)\n\n![Glow animation](https://github.com/alex2wong/mapbox-plugins/blob/master/assets/demo/glow.gif)\n\n![Rbush demo](https://github.com/alex2wong/mapbox-plugins/blob/master/assets/demo/rbush.gif)\n\n![Canvas Line Style](https://github.com/alex2wong/mapbox-plugins/blob/master/assets/canvasLine.jpg)\n\n👆 canvas line style which can be integrate to any map/chart lib.\n\n![Voxelize terrain data](https://upload-images.jianshu.io/upload_images/1950967-27728165c2bedf82.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1000/format/webp)\n\n👆 Voxelize terrain data from a height image.\n\n![Extrude typhoon image](https://github.com/alex2wong/mapbox-plugins/blob/master/assets/demo/threetyphoon.jpg)\n\n👆 Extrude typhoon radar image.\n\n![Animated Lines](https://github.com/alex2wong/mapbox-plugins/blob/master/assets/demo/lines.gif)\n\n👆 Animated Lines/Particle system.\n\n\n## Online demo\n[placeholder]:p\n\n| Demo | Code |\n| :-------- | :--------:|\n| [Sprite track DEMO](https://alex2wong.github.io/mapbox-plugins/examples/sprite) | [view code](https://github.com/alex2wong/mapbox-plugins/tree/master/examples/sprite) |\n| [Custom dom overlay DEMO](https://alex2wong.github.io/mapbox-plugins/examples/domoverlay) | [view code](https://github.com/alex2wong/mapbox-plugins/tree/master/examples/domoverlay) |\n| [R-tree search (5000 rectangles) DEMO](https://alex2wong.github.io/mapbox-plugins/examples/rbush) | [view code](https://github.com/alex2wong/mapbox-plugins/tree/master/examples/rbush) |\n| [Global Wind Layer. render 1w point animation with Canvas](https://alex2wong.github.io/mapbox-plugins/examples/windLayer) | [view code](https://github.com/alex2wong/mapbox-plugins/tree/master/examples/windLayer) |\n| [Integrate with Chart.js](https://alex2wong.github.io/mapbox-plugins/examples/chartlayer)  | [view code](https://github.com/alex2wong/mapbox-plugins/tree/master/examples/chartlayer) |\n| [Glow animation](https://alex2wong.github.io/mapbox-plugins/examples/glowstyle) | [view code](https://github.com/alex2wong/mapbox-plugins/tree/master/examples/glowstyle) |\n| [Cool Route Animation](https://alex2wong.github.io/mapbox-plugins/examples/line_animation) | [view code](https://github.com/alex2wong/mapbox-plugins/tree/master/examples/line_animation) |\n| [Canvas Line Style](https://alex2wong.github.io/mapbox-plugins/examples/line_style) | [view code](https://github.com/alex2wong/mapbox-plugins/blob/master/examples/line_style/index.html) |\n| [Canvas Staring Demo](https://alex2wong.github.io/mapbox-plugins/examples/particle_mask/) ||\n| [Tilting Ui Marker](https://alex2wong.github.io/mapbox-plugins/examples/vectortile)|[view code](https://github.com/alex2wong/mapbox-plugins/blob/master/examples/vectortile/index.html)|\n| [Threejs Typhoon](https://alex2wong.github.io/mapbox-plugins/examples/typhoon/) | [view code](https://github.com/alex2wong/mapbox-plugins/blob/master/examples/typhoon/index.js) |\n| [Line_Pattern](https://alex2wong.github.io/mapbox-plugins/examples/line_pattern/) | [view code](https://github.com/alex2wong/mapbox-plugins/blob/master/examples/index.html) |\n\n## Install and use\n\n\u003e npm i mapbox-plugins\n\nFor node.js:\n```\nvar Mapbox = require('mapbox-plugins')\nconsole.warn(Mapbox.Config);\n```\nMore often, for es6 development:\n```\nimport { Config, CanvasOverlayer } from 'mapbox-plugins';\nvar canvasLayer = new CanvasOverlayer({\n    map: map, // bind canvasOverlay with mapbox map instance..\n});\n```\n\n## Run locally\n\n\u003e npm install\n\n\u003e npm run dev\n\nthen visit from http://localhost:8080/examples/, HotModuleReload supported.\n\n\u003e npm run rbuild\n\nto build all plugins into Mapbox.umd.js/Mapbox.esm.js\n\n\n## How to use\nplugins provide canvasOverlay, domOverlay ,Sprite, gameControl extension etc. for example:\n\n```javascript\n// create a CanvasOverlayer on Mapbox map instance..\nvar canvasLayer = new Mapbox.CanvasOverlayer({\n    map: map,\n    shadow: false,\n    keepTrack: true,\n    blurWidth: 4\n});\n\n// create a Drone inherites Sprite Class\nvar drone = new Mapbox.Drone({\n    direction: 45,\n    icon: \"drone.jpg\"\n});\n\n// add keyboard control to Sprite.\nMapbox.Controllers.gameControl(drone);\nfunction update(){\n    drone.updateStatus();\n    // render drone on canvasLayer.\n    canvasLayer.redraw([drone]);\n    requestAnimationFrame(update);\n}\nupdate();\n\n```\n\n\n### **☆Star, Enhancement and PR** are welcome :)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falex2wong%2Fmapbox-plugins","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falex2wong%2Fmapbox-plugins","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falex2wong%2Fmapbox-plugins/lists"}