aframe-geothree-component
World-scale maps using geo-three and support for multiple map providers (Mapbox, Bing, HereMaps, etc)
For A-Frame.
API
| Property | Description | Default Value |
|---|---|---|
| provider | Map Tiles Provider | mapbox-satellite-labels |
| providerHeight | Map Tiles Provider to fetch terrain height | mapbox-satellite |
| mapView | Method to display map - planar, height, height-shader or spherical | planar |
| lod | decides how tiles are subdivided | raycast |
| mapboxApiKey | API Key for Mapbox | '' |
| mapboxCustomStyle | only when using mapbox-custom provider | 'mapbox/dark-v10 |
| hereMapsAppCode | App Code from HereMaps when using HereMaps providers | '' |
| hereMapsAppId | App ID from HereMaps when using HereMaps providers | '' |
| bingApiKey | Bing Maps API Key when using Bing maps providers | '' |
| mapTilerApiKey | MapTiler API Key when using MapTiler maps providers | '' |
| openMapTilesServerMap | Server path for self-hosted OpenMapTiles Server | '' |
Installation
Browser
Install and use by directly including the browser files:
<head>
<title>My A-Frame Scene</title>
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="https://unpkg.com/aframe-geothree-component@1.0.0/dist/aframe-geothree-component.min.js"></script>
</head>
<body>
<a-scene>
<a-entity geothree="provider: mapbox-dark; mapboxApiKey: pk.useamapboxapikeyhere"></a-entity>
</a-scene>
</body>npm
Install via npm:
npm install aframe-geothree-componentThen require and use.
require('aframe');
require('aframe-geothree-component');