https://github.com/akbartus/a-frame-component-mapbox
This is Mapbox component for A-Frame
https://github.com/akbartus/a-frame-component-mapbox
3d-mapping a-frame aframevr mapbox mapbox-gl-js
Last synced: 8 months ago
JSON representation
This is Mapbox component for A-Frame
- Host: GitHub
- URL: https://github.com/akbartus/a-frame-component-mapbox
- Owner: akbartus
- License: mit
- Created: 2023-06-15T21:46:16.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2023-06-15T22:30:45.000Z (almost 3 years ago)
- Last Synced: 2025-02-28T19:26:42.432Z (over 1 year ago)
- Topics: 3d-mapping, a-frame, aframevr, mapbox, mapbox-gl-js
- Language: JavaScript
- Homepage: https://mapbox-component.glitch.me/
- Size: 5.49 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# A-Frame Component: Mapbox
### **Description / Rationale**
This is A-Frame component for Mapbox, which offer some additional features for 3D map visualizations (compare with A-Frame Mapbox Component created by Matthias Treitler). In particular the new component allows doing the following, among others:
* Choosing map styles
* Choosing the language of the map
* Dynamically navigating the map
### **Instructions**
In order to use the component attach "mapbox-component" to a-plane primitive. The component has the following attributes:
* token: { type: "string", default: ""} - Mapbox token
* style: { type: "string", default: "mapbox://styles/mapbox/streets-v12" } - Mapbox map style. Has the following styles:
- mapbox://styles/mapbox/streets-v12 (Mapbox Streets);
- mapbox://styles/mapbox/outdoors-v12 (Mapbox Outdoors);
- mapbox://styles/mapbox/light-v11 (Mapbox Light);
- mapbox://styles/mapbox/dark-v11 (Mapbox Dark);
- mapbox://styles/mapbox/satellite-v9 (Mapbox Satellite);
- mapbox://styles/mapbox/satellite-streets-v12 (Mapbox Satellite Streets);
- mapbox://styles/mapbox/navigation-day-v1 (Mapbox Navigation Day);
- mapbox://styles/mapbox/navigation-night-v1 (Mapbox Navigation Night)
* center: { type: "array", default: [69.2787079, 41.3123363] } - Center coordinates on the map, lat and lng.
* zoom: { type: "int", default: 15 } - Zoom level. The higher zoom level is, the more detailed is the view.
* pitch: { type: "int", default: 0 } - Camera pitch.
* deltaDistance: { type: "int", default: 100 } - Distance for moving up or down on the map.
* deltaDegrees: { type: "int", default: 25 } - Degrees og rotation when left or right is clicked.
* language: { type: "string", default: "en" } - Map language. Has the following languages:
- "zh-Hans" (Chinese);
- "ar" (Arabic);
- "fr" (French);
- "vi" (Vietnamese);
- "es" (Spanish);
- "pt" (Portuguese);
- "ko" (Korean);
- "ja" (Japanese);
- "it" (Italian);
- "de" (German);
- "ru" (Russian);
- "en" (English).
* attach: { type: "boolean", default: false } - Whether navigation buttons should be attached to camera or should be freely stainding in 3D space.
The code below shows the sample implementation of the component:
```
A-Frame Component: Mapbox
```
Please note that a-camera primitive is used with raycast and rayorigin to enable click events. Without it navigation buttons will not work!
If you want to use it in VR, just attach laser pointer with raycaster showing to .clickable class.
### **Tech Stack**
The project is powered by AFrame and Three.js.
### **Demo**
See demo of the component here: [Demo](mapbox-component.glitch.me/)