aframe-geothree-component
v1.0.0
Published
World-scale maps using geo-three and support for multiple map providers (Mapbox, Bing, HereMaps, etc)
Downloads
10
Maintainers
arvind-iyerReadme
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/[email protected]/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');