Basic Satellite Map on a plane.
28 | 29 |Setting a custom style and updating the map position dynamically every 5 secs
33 | 34 |Showing the user's location on a map
38 | 39 | 40 | 41 | 44 | 45 | 47 | 48 | 49 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | require('mapbox-gl/dist/mapbox-gl.css') 2 | 3 | const extendDeep = AFRAME.utils.extendDeep; 4 | const meshMixin = AFRAME.primitives.getMeshMixin(); 5 | 6 | const cuid = require('cuid'); 7 | 8 | const mapboxgl = require('mapbox-gl'); 9 | 10 | const MAP_LOAD_EVENT = 'mapbox-load'; 11 | const MAP_LOADED_EVENT = 'mapbox-loaded'; 12 | const MAP_MOVE_END_EVENT = 'mapbox-moveend'; 13 | 14 | function parseSpacedFloats (value, count, attributeName) { 15 | if (!value) { 16 | return undefined; 17 | } 18 | 19 | let values = value; 20 | 21 | if (Object.prototype.toString.call(value) === '[object String]') { 22 | values = value.split(','); 23 | } 24 | 25 | if (values.length !== count) { 26 | if (process.env.NODE_ENV !== 'production') { 27 | // eslint-disable-next-line no-console 28 | console.warn( 29 | `Unable to parse value of ${attributeName}: ${value}.` 30 | + ` Expected exactly ${count} space separated floats.` 31 | ); 32 | } 33 | return undefined; 34 | } 35 | 36 | if (values.some(num => isNaN(parseFloat(num)))) { 37 | if (process.env.NODE_ENV !== 'production') { 38 | // eslint-disable-next-line no-console 39 | console.warn( 40 | `Unable to parse value of ${attributeName}: ${value}. ` 41 | + 'Expected values to be floats.' 42 | ); 43 | } 44 | return undefined; 45 | } 46 | 47 | return values; 48 | } 49 | 50 | function setDimensions (id, el, width, height) { 51 | const element = document.querySelector(`#${id}`); 52 | element.style.width = `${width}px`; 53 | element.style.height = `${height}px`; 54 | 55 | AFRAME.utils.entity.setComponentProperty(el, 'material.width', width); 56 | AFRAME.utils.entity.setComponentProperty(el, 'material.height', height); 57 | } 58 | 59 | function getCanvasContainerAssetElement (id, width, height) { 60 | let element = document.querySelector(`#${id}`); 61 | 62 | if (!element) { 63 | element = document.createElement('div'); 64 | } 65 | 66 | element.setAttribute('id', id); 67 | element.style.width = `${width}px`; 68 | element.style.height = `${height}px`; 69 | 70 | // This is necessary because mapbox-gl uses the offsetWidth/Height of the 71 | // container element to calculate the canvas size. But those values are 0 if 72 | // the element (or its parent) are hidden. `position: fixed` means it can be 73 | // calculated correctly. 74 | element.style.position = 'fixed'; 75 | element.style.left = '99999px'; 76 | element.style.top = '0'; 77 | 78 | if (!document.body.contains(element)) { 79 | document.body.appendChild(element); 80 | } 81 | 82 | return element; 83 | } 84 | 85 | function processMapboxCanvasElement (mapboxInstance, canvasContainer) { 86 | const canvas = mapboxInstance.getCanvas(); 87 | canvas.setAttribute('id', cuid()); 88 | canvas.setAttribute('crossorigin', 'anonymous'); 89 | } 90 | 91 | function createMap (canvasId, options) { 92 | return new Promise((resolve, reject) => { 93 | const canvasContainer = getCanvasContainerAssetElement(canvasId, options.width, options.height); 94 | 95 | // eslint-disable-next-line no-new 96 | const mapboxInstance = new mapboxgl.Map(Object.assign({ 97 | container: canvasContainer 98 | }, options)); 99 | 100 | mapboxInstance.on('load', _ => { 101 | mapboxInstance.resize(); 102 | processMapboxCanvasElement(mapboxInstance, canvasContainer); 103 | resolve(mapboxInstance); 104 | }); 105 | }); 106 | } 107 | 108 | /** 109 | * Map component for A-Frame. 110 | */ 111 | AFRAME.registerComponent('mapbox', { 112 | 113 | dependencies: [ 114 | 'geometry', 115 | 'material' 116 | ], 117 | 118 | schema: { 119 | /** 120 | * @param {number} [pxToWorldRatio=100] - The number of pixels per world 121 | * unit to render the map on the plane. ie; when set to 100, will display 122 | * 100 pixels per 1 meter in world space. 123 | */ 124 | pxToWorldRatio: {default: 100}, 125 | 126 | /** 127 | * @param {string} [style=''] - A URL-encoded JSON object of a [MapBox 128 | * style](https://mapbox.com/mapbox-gl-style-spec/). If none is provided, 129 | * a default style will be loaded. 130 | */ 131 | style: {default: ''}, 132 | 133 | /** 134 | * @param {string} [accessToken=''] - Optional access token for styles 135 | * from Mapbox. 136 | */ 137 | accessToken: {default: ''}, 138 | 139 | /** 140 | * @param {int} [minZoom=0] - The minimum zoom level of the map (0-20). (0 141 | * is furthest out) 142 | */ 143 | minZoom: {default: 0}, 144 | 145 | /** 146 | * @param {int} [maxZoom=20] - The maximum zoom level of the map (0-20). (0 147 | * is furthest out) 148 | */ 149 | maxZoom: {default: 20}, 150 | 151 | /** 152 | * @param {int} [bearinSnap=7] - The threshold, measured in degrees, that 153 | * determines when the map's bearing (rotation) will snap to north. For 154 | * example, with a bearingSnap of 7, if the user rotates the map within 7 155 | * degrees of north, the map will automatically snap to exact north. 156 | */ 157 | bearingSnap: {default: 7}, 158 | 159 | /** 160 | * @param {array} [maxBounds=undefined] - If set, the map will be 161 | * constrained to the given bounds. Bounds are specified as 4 space 162 | * delimited floats. The first pair represent the south-west long/lat, the 163 | * second pair represent the north-east long/lat. 164 | */ 165 | maxBounds: { 166 | default: undefined, 167 | type: 'array', 168 | parse: value => { 169 | const values = parseSpacedFloats(value, 4, 'maxBounds'); 170 | 171 | if (!values) { 172 | return undefined; 173 | } 174 | 175 | return [[values[0], values[1]], [values[2], values[3]]]; 176 | } 177 | }, 178 | 179 | /** 180 | * @param {array} [center=[0, 0]] - The inital geographical centerpoint of 181 | * the map in long/lat order. If center is not specified in the 182 | * constructor options, Mapbox GL JS will look for it in the map's style 183 | * object. If it is not specified in the style, either, it will default to 184 | * [0, 0]. Represented as 2 space separated floats. 185 | */ 186 | center: { 187 | default: [0, 0], 188 | type: 'array', 189 | parse: value => { 190 | const values = parseSpacedFloats(value, 2, 'center'); 191 | 192 | if (!values) { 193 | return [0, 0]; 194 | } 195 | 196 | return values; 197 | } 198 | }, 199 | 200 | /** 201 | * @param {int} [zoom=0] - The initial zoom level of the map. If zoom 202 | * is not specified in the constructor options, Mapbox GL JS will look for 203 | * it in the map's style object. If it is not specified in the style, 204 | * either, it will default to 0 . 205 | */ 206 | zoom: {default: 0}, 207 | 208 | /** 209 | * @param {float} [bearing=0] - The initial bearing (rotation) of the map, 210 | * measured in degrees counter-clockwise from north. If bearing is not 211 | * specified in the constructor options, Mapbox GL JS will look for it in 212 | * the map's style object. If it is not specified in the style, either, it 213 | * will default to 0. 214 | */ 215 | bearing: {default: 0.0}, 216 | 217 | /** 218 | * @param {float} [pitch=0] - The initial pitch (tilt) of the map, 219 | * measured in degrees away from the plane of the screen (0-60). If pitch 220 | * is not specified in the constructor options, Mapbox GL JS will look for 221 | * it in the map's style object. If it is not specified in the style, 222 | * either, it will default to 0 . 223 | */ 224 | pitch: {default: 0.0}, 225 | 226 | /** 227 | * All other MapBox GL options are disabled 228 | */ 229 | canvas: {type: 'selector'} 230 | }, 231 | init: function () { 232 | const el = this.el; 233 | const data = this.data; 234 | const geomData = el.components.geometry.data; 235 | 236 | if (data.accessToken) { 237 | mapboxgl.accessToken = data.accessToken; 238 | } 239 | 240 | const style = data.style; 241 | const width = THREE.Math.floorPowerOfTwo(geomData.width * data.pxToWorldRatio); 242 | const height = THREE.Math.floorPowerOfTwo(geomData.height * data.pxToWorldRatio); 243 | this.xPxToWorldRatio = width / geomData.width; 244 | this.yPxToWorldRatio = height / geomData.height; 245 | 246 | const options = Object.assign( 247 | {}, 248 | this.data, 249 | { 250 | style, 251 | width: width, 252 | height: height, 253 | // Required to ensure the canvas can be used as a texture 254 | preserveDrawingBuffer: true, 255 | hash: false, 256 | interactive: false, 257 | attributionControl: false, 258 | scrollZoom: false, 259 | boxZoom: false, 260 | dragRotate: false, 261 | dragPan: false, 262 | keyboard: false, 263 | doubleClickZoom: false, 264 | touchZoomRotate: false, 265 | trackResize: false 266 | } 267 | ); 268 | 269 | this._canvasContainerId = cuid(); 270 | 271 | AFRAME.utils.entity.setComponentProperty(el, 'material.width', width); 272 | AFRAME.utils.entity.setComponentProperty(el, 'material.height', height); 273 | //setDimensions(this._canvasContainerId, el, width, height); 274 | 275 | this.created = false; 276 | 277 | const canvasContainer = getCanvasContainerAssetElement(this._canvasContainerId, options.width, options.height); 278 | 279 | // eslint-disable-next-line no-new 280 | this.mapInstance = new mapboxgl.Map(Object.assign({ 281 | container: canvasContainer 282 | }, options)); 283 | this.el.emit(MAP_LOAD_EVENT); 284 | 285 | this.mapInstance.once('load', _ => { 286 | this.mapInstance.resize(); 287 | processMapboxCanvasElement(this.mapInstance, canvasContainer); 288 | const canvasId = document.querySelector(`#${this._canvasContainerId} canvas`).id; 289 | 290 | this.el.setAttribute('material', 'src', `#${canvasId}`); 291 | this.el.emit(MAP_LOADED_EVENT); 292 | }); 293 | }, 294 | 295 | /** 296 | * Called when component is attached and when component data changes. 297 | * Generally modifies the entity based on the data. 298 | */ 299 | update: function (oldData) { 300 | const data = this.data; 301 | // Everything after this requires a map instance 302 | if (!this.mapInstance) { 303 | return; 304 | } 305 | if (!this.created) { 306 | oldData = {} 307 | this.created = true 308 | } 309 | 310 | // Nothing changed 311 | if (AFRAME.utils.deepEqual(oldData, data)) { 312 | return; 313 | } 314 | 315 | if (oldData.pxToWorldRatio !== data.pxToWorldRatio) { 316 | const geomData = this.el.components.geometry.data; 317 | const width = THREE.Math.floorPowerOfTwo(geomData.width * data.pxToWorldRatio); 318 | const height = THREE.Math.floorPowerOfTwo(geomData.height * data.pxToWorldRatio); 319 | this.xPxToWorldRatio = width / geomData.width; 320 | this.yPxToWorldRatio = height / geomData.height; 321 | setDimensions(this._canvasContainerId, this.el, width, height); 322 | } 323 | 324 | if (oldData.style !== this.data.style) { 325 | const style = this.data.style; 326 | this.mapInstance.setStyle(style); 327 | } 328 | 329 | if (oldData.minZoom !== this.data.minZoom) { 330 | this.mapInstance.setMinZoom(this.data.minZoom); 331 | } 332 | 333 | if (oldData.maxZoom !== this.data.maxZoom) { 334 | this.mapInstance.setMaxZoom(this.data.maxZoom); 335 | } 336 | 337 | if (oldData.maxBounds !== this.data.maxBounds) { 338 | this.mapInstance.setmaxBounds(this.data.maxBounds); 339 | } 340 | 341 | const jumpOptions = {}; 342 | 343 | if (oldData.zoom !== this.data.zoom) { 344 | jumpOptions.zoom = this.data.zoom; 345 | } 346 | 347 | if (!AFRAME.utils.deepEqual(oldData.center, this.data.center)) { 348 | jumpOptions.center = this.data.center; 349 | } 350 | 351 | if (oldData.bearing !== this.data.bearing) { 352 | jumpOptions.bearing = this.data.bearing; 353 | } 354 | 355 | if (oldData.pitch !== this.data.pitch) { 356 | jumpOptions.pitch = this.data.pitch; 357 | } 358 | 359 | if (Object.keys(jumpOptions).length > 0) { 360 | // A way to signal when these async actions have completed 361 | this.mapInstance.once('moveend', _ => { 362 | this.el.emit(MAP_MOVE_END_EVENT); 363 | }); 364 | this.mapInstance.once('idle', _ => { 365 | const material = this.el.getObject3D('mesh').material; 366 | if (material.map) { 367 | material.map.needsUpdate = true; 368 | } 369 | }); 370 | this.mapInstance.jumpTo(jumpOptions); // moveend 371 | } 372 | }, 373 | 374 | /** 375 | * Called when a component is removed (e.g., via removeAttribute). 376 | * Generally undoes all modifications to the entity. 377 | */ 378 | remove () { 379 | // TODO: Kill the map 380 | }, 381 | 382 | /** 383 | * Returns {x, y} representing a position relative to the entity's center, 384 | * that correspond to the specified geographical location. 385 | * 386 | * @param {float} long 387 | * @param {float} lat 388 | */ 389 | project: function (long, lat) { 390 | // The position (origin at top-left corner) in pixel space 391 | const {x: pxX, y: pxY} = this.mapInstance.project([long, lat]); 392 | 393 | // The 3D world size of the entity 394 | const {width: elWidth, height: elHeight} = this.el.components.geometry.data; 395 | 396 | return { 397 | x: (pxX / this.xPxToWorldRatio) - (elWidth / 2), 398 | // y-coord is inverted (positive up in world space, positive down in 399 | // pixel space) 400 | y: -(pxY / this.yPxToWorldRatio) + (elHeight / 2), 401 | z: 0 402 | }; 403 | }, 404 | 405 | unproject: function (x, y) { 406 | // The 3D world size of the entity 407 | const {width: elWidth, height: elHeight} = this.el.components.geometry.data; 408 | 409 | // Converting back to pixel space 410 | const pxX = (x + (elWidth / 2)) * this.xPxToWorldRatio; 411 | // y-coord is inverted (positive up in world space, positive down in 412 | // pixel space) 413 | const pxY = ((elHeight / 2) - y) * this.yPxToWorldRatio; 414 | 415 | // Return the long / lat of that pixel on the map 416 | return this.mapInstance.unproject([pxX, pxY]).toArray(); 417 | }, 418 | 419 | getMap: function() { 420 | return this.mapInstance; 421 | } 422 | }); 423 | 424 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "aframe-mapbox-component", 3 | "version": "4.0.1", 4 | "description": "A map component using Mapbox for A-Frame.", 5 | "main": "index.js", 6 | "unpkg": "dist/aframe-mapbox-component.min.js", 7 | "scripts": { 8 | "build": "webpack index.js dist/aframe-mapbox-component.js", 9 | "dev": "budo index.js:dist/aframe-mapbox-component.min.js --port 7000 --live -- -g browserify-css", 10 | "dist": "npm run build && uglifyjs dist/aframe-mapbox-component.js > dist/aframe-mapbox-component.min.js", 11 | "lint": "semistandard -v | snazzy", 12 | "prepublish": "npm run dist", 13 | "ghpages": "ghpages", 14 | "start": "npm run dev", 15 | "test": "karma start ./tests/karma.conf.js", 16 | "test:firefox": "karma start ./tests/karma.conf.js --browsers Firefox", 17 | "test:chrome": "karma start ./tests/karma.conf.js --browsers Chrome" 18 | }, 19 | "repository": { 20 | "type": "git", 21 | "url": "git+https://github.com/mattrei/aframe-mapbox-component.git" 22 | }, 23 | "keywords": [ 24 | "mapbox", 25 | "aframe", 26 | "aframe-component", 27 | "aframe-entity", 28 | "aframe-vr", 29 | "vr", 30 | "mozvr", 31 | "webvr" 32 | ], 33 | "author": "Matthias Treitler