# aframe-mapbox-component
> A map component using Mapbox for A-Frame.
Latest version **4.0.1** (published 2021-02-08) · MIT license · 0 weekly downloads
## Install
```sh
npm install aframe-mapbox-component
pnpm add aframe-mapbox-component
yarn add aframe-mapbox-component
bun add aframe-mapbox-component
```
## Health
**Score 15/100 (F)** — status: abandoned.
Positive: no vulnerabilities.
Warnings: low downloads; no types; no esm support.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 4.0.1 |
| Published | 2021-02-08 |
| First published | 2018-10-31 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 1.6 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 16 |
| Author | Matthias Treitler |
| Maintainers | mattrei |
| Keywords | mapbox, aframe, aframe-component, aframe-entity, aframe-vr, vr, mozvr, webvr |
## Links
- npm: https://www.npmjs.com/package/aframe-mapbox-component
- Repository: https://github.com/mattrei/aframe-mapbox-component
- Homepage: https://github.com/mattrei/aframe-mapbox-component#readme
- Issues: https://github.com/mattrei/aframe-mapbox-component/issues
- npm.io page: https://npm.io/package/aframe-mapbox-component
## Dependencies (2)
- [cuid](https://npm.io/package/cuid.md) ^2.1.8
- [mapbox-gl](https://npm.io/package/mapbox-gl.md) ^1.13.0
## Recent versions
- 4.0.1 (latest) — 2021-02-08
- 4.0.0 — 2020-02-12
- 3.2.0 — 2019-09-30
- 3.1.0 — 2019-06-02
- 3.0.2 — 2019-02-04
- 3.0.1 — 2018-10-31
- 3.0.0 — 2018-10-31
## README
# aframe-mapbox-component
A 3D street map entity & component for [A-Frame](https://aframe.io). Uses [Mapbox version 1.13.0](https://github.com/mapbox/mapbox-gl-js/blob/main/CHANGELOG.md) 3-Clause BSD.
The component and idea was originally thankfully developed by [jesstelford](https://github.com/jesstelford). I forked and renamed the project accordingly and will continue to develop this component.
### Installation
#### Browser
Use directly from the unpkg CDN:
```html
```
#### npm
Install via npm:
```bash
npm install aframe-mapbox-component
```
Then register and use.
```javascript
import 'aframe';
import 'aframe-mapbox-component';
```
### `mapbox` component
#### Schema
| attribute | type | default | description |
|---|---|---|---|
| pxToWorldRatio | number | 100 | The number of pixels per world unit to render the map on the plane. ie; when set to 100, will display 100 pixels per 1 meter in world space. (see [a note on fidelity](#a-note-on-fidelity)). However the resulting ratio is calculated from the widht and height of the material, which always needs to be in power of two. |
| accesstoken | string | | An optional access token if using Mapbox's style. Not needed if you use your own styling |
| style | string | '' | Either a standard Mapbox URL (like `mapbox://styles/mapbox/satellite-v8`) or a your custom style url created with [Mapbox Studio](https://www.mapbox.com/mapbox-studio/) |
| ... | | | All other options are passed directly to Mapbox GL |
##### A note on fidelity
The higher `pxToWorldRatio`, the more map area will be displayed per world
unit. That canvas has to be translated into a plane in world space. This is
combined with the width and height in world space (from geometry.width and
geometry.height on the entity) to set up the plane for rendering in 3D.
The map is rendered as a texture on a 3D plane. For best performance, texture
sizes should be kept to powers of 2. Keeping this in mind, you should work to
ensure `width * pxToWorldRatio` and `height * pxToWorldRatio` are powers of 2.
#### Events
| event name | data | description |
|---|---|---|
| `mapbox-load` | (none) | Fired before the first render of the map component |
| `mapbox-loaded` | (none) | Fired on the first render of the map component |
| `mapbox-moveend` | (none) | Fired when zoom, center, bearing, or pitch are changed _after_ the initial render |
---
_Source: https://npm.io/package/aframe-mapbox-component · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._