{"id":19815175,"url":"https://github.com/akbartus/a-frame-component-mapbox","last_synced_at":"2025-10-08T06:09:53.050Z","repository":{"id":175684749,"uuid":"654319930","full_name":"akbartus/A-Frame-Component-Mapbox","owner":"akbartus","description":"This is Mapbox component for A-Frame ","archived":false,"fork":false,"pushed_at":"2023-06-15T22:30:45.000Z","size":5756,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-28T19:26:42.432Z","etag":null,"topics":["3d-mapping","a-frame","aframevr","mapbox","mapbox-gl-js"],"latest_commit_sha":null,"homepage":"https://mapbox-component.glitch.me/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/akbartus.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,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-06-15T21:46:16.000Z","updated_at":"2023-06-15T22:26:13.000Z","dependencies_parsed_at":null,"dependency_job_id":"bf5923c1-e012-492f-92f0-edd7f478ba38","html_url":"https://github.com/akbartus/A-Frame-Component-Mapbox","commit_stats":null,"previous_names":["akbartus/a-frame-component-mapbox"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/akbartus/A-Frame-Component-Mapbox","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/akbartus%2FA-Frame-Component-Mapbox","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/akbartus%2FA-Frame-Component-Mapbox/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/akbartus%2FA-Frame-Component-Mapbox/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/akbartus%2FA-Frame-Component-Mapbox/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/akbartus","download_url":"https://codeload.github.com/akbartus/A-Frame-Component-Mapbox/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/akbartus%2FA-Frame-Component-Mapbox/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":278897932,"owners_count":26064902,"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","status":"online","status_checked_at":"2025-10-08T02:00:06.501Z","response_time":56,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["3d-mapping","a-frame","aframevr","mapbox","mapbox-gl-js"],"created_at":"2024-11-12T10:04:58.861Z","updated_at":"2025-10-08T06:09:53.044Z","avatar_url":"https://github.com/akbartus.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# A-Frame Component: Mapbox\n\u003cimg src=\"img/screenshot.gif\" title=\"Video screen capture\" alt=\"Video screen capture\" height=\"400\"\u003e\n\n### **Description / Rationale**\nThis is A-Frame component for Mapbox, which offer some additional features for 3D map visualizations (compare with \u003ca href=\"https://github.com/mattrei/aframe-mapbox-component\"\u003eA-Frame Mapbox Component\u003c/a\u003e created by Matthias Treitler). In particular the new component allows doing the following, among others:\n* Choosing map styles\n* Choosing the language of the map\n* Dynamically navigating the map\n\n\n### **Instructions**\nIn order to use the component attach \"mapbox-component\" to a-plane primitive. The component has the following attributes: \n* \u003cb\u003etoken: { type: \"string\", default: \"\"}\u003c/b\u003e - Mapbox token\n* \u003cb\u003estyle: { type: \"string\", default: \"mapbox://styles/mapbox/streets-v12\" }\u003c/b\u003e - Mapbox map style. Has the following styles:\n  - mapbox://styles/mapbox/streets-v12 (Mapbox Streets);\n  - mapbox://styles/mapbox/outdoors-v12 (Mapbox Outdoors);\n  - mapbox://styles/mapbox/light-v11 (Mapbox Light);\n  - mapbox://styles/mapbox/dark-v11 (Mapbox Dark);\n  - mapbox://styles/mapbox/satellite-v9 (Mapbox Satellite);\n  - mapbox://styles/mapbox/satellite-streets-v12 (Mapbox Satellite Streets);\n  - mapbox://styles/mapbox/navigation-day-v1 (Mapbox Navigation Day);\n  - mapbox://styles/mapbox/navigation-night-v1 (Mapbox Navigation Night)\n* \u003cb\u003ecenter: { type: \"array\", default: [69.2787079, 41.3123363] }\u003c/b\u003e - Center coordinates on the map, lat and lng.\n* \u003cb\u003ezoom: { type: \"int\", default: 15 }\u003c/b\u003e - Zoom level. The higher zoom level is, the more detailed is the view.\n* \u003cb\u003epitch: { type: \"int\", default: 0 }\u003c/b\u003e - Camera pitch.\n* \u003cb\u003edeltaDistance: { type: \"int\", default: 100 }\u003c/b\u003e - Distance for moving up or down on the map.\n* \u003cb\u003edeltaDegrees: { type: \"int\", default: 25 }\u003c/b\u003e - Degrees og rotation when left or right is clicked.\n* \u003cb\u003elanguage: { type: \"string\", default: \"en\" }\u003c/b\u003e - Map language. Has the following languages: \n  - \"zh-Hans\" (Chinese); \n  - \"ar\" (Arabic); \n  - \"fr\" (French);\n  - \"vi\" (Vietnamese);\n  - \"es\" (Spanish);\n  - \"pt\" (Portuguese);\n  - \"ko\" (Korean);\n  - \"ja\" (Japanese);\n  - \"it\" (Italian); \n  - \"de\" (German); \n  - \"ru\" (Russian); \n  - \"en\" (English).\n* \u003cb\u003eattach: { type: \"boolean\", default: false }\u003c/b\u003e - Whether navigation buttons should be attached to camera or should be freely stainding in 3D space.\n\nThe code below shows the sample implementation of the component:\n```\n\u003chtml\u003e\n\u003chead\u003e\n    \u003cmeta charset='utf-8' /\u003e\n    \u003ctitle\u003eA-Frame Component: Mapbox\u003c/title\u003e\n    \u003cmeta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' /\u003e\n    \u003cscript src=\"https://aframe.io/releases/1.4.2/aframe.min.js\"\u003e\u003c/script\u003e\n    \u003cscript src=\"js/mapbox-component.js\"\u003e\n    \u003c/script\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n     \u003ca-scene\u003e\n        \u003ca-plane mapbox-component=\"attach: true\" position=\"0 0 -3\" rotation=\"0 0 0\" width=\"8\" height=\"5\"\n            color=\"#ddd\"\u003e\u003c/a-plane\u003e       \n        \u003ca-camera position=\"0 0 0\" cursor=\"rayOrigin: mouse;\" raycaster=\"objects: .clickable\"\u003e\u003c/a-camera\u003e\n        \u003ca-sky color=\"#ECECEC\"\u003e\u003c/a-sky\u003e\n    \u003c/a-scene\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\nPlease note that a-camera primitive is used with raycast and rayorigin to enable click events. Without it navigation buttons will not work! \nIf you want to use it in VR, just attach laser pointer with raycaster showing to .clickable class.\n\n### **Tech Stack**\nThe project is powered by AFrame and Three.js.\n\n### **Demo**\nSee demo of the component here: [Demo](mapbox-component.glitch.me/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fakbartus%2Fa-frame-component-mapbox","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fakbartus%2Fa-frame-component-mapbox","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fakbartus%2Fa-frame-component-mapbox/lists"}