aframe-mapbox-component
Advanced tools
A 3D street map entity & component for A-Frame. Uses Mapbox version 1.13.0 3-Clause BSD.
The component and idea was originally thankfully developed by jesstelford. I forked and renamed the project accordingly and will continue to develop this component.
Use directly from the unpkg CDN:
<head>
<script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
<script src="https://unpkg.com/aframe-mapbox-component/dist/aframe-mapbox-component.min.js"></script>
</head>
<body>
<a-scene>
<a-mapbox position="0 0 -5"></a-map>
<a-camera></a-camera>
</a-scene>
</body>
Install via npm:
npm install aframe-mapbox-component
Then register and use.
import 'aframe';
import 'aframe-mapbox-component';
mapbox component| 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). 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 |
| ... | All other options are passed directly to Mapbox GL |
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.
| 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 |
FAQs
A map component using Mapbox for A-Frame.
The npm package aframe-mapbox-component receives a total of 10 weekly downloads. As such, aframe-mapbox-component popularity was classified as not popular.
We found that aframe-mapbox-component demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
A supply chain attack on Axios introduced a malicious dependency, plain-crypto-js@4.2.1, published minutes earlier and absent from the project’s GitHub releases.
Research
Malicious versions of the Telnyx Python SDK on PyPI delivered credential-stealing malware via a multi-stage supply chain attack.
Security News
TeamPCP is partnering with ransomware group Vect to turn open source supply chain attacks on tools like Trivy and LiteLLM into large-scale ransomware operations.