Texture Maps

Overview

The Texture Map and Globe prefabs provide a quick way to add geographic maps to your scene by using map layers and mesh textures. This prefab implements the OpenLayers API to provide support for map layers and geographic utilities. Additionally, these prefabs provide methods and functions to assist in mapping to lat/lon positions and map interactions. These can be created using createTextureMap() and createTextureGlobe().

Usage

//name (required), options (optional), Babylon scene (optional)

//Returns instance of textureMap object
let textureMap = anu.createTextureMap(name: String, options?: {}, scene?: BABYLON.Scene);

//Returns instance of textureGlobe object
let textureGlobe = anu.createTextureGlobe(name: String, options?: {}, scene?: BABYLON.Scene);

Setting Custom XYZ Tile Providers

You can change the XYZ Tile Provider used by TextureMap and TextureGlobe inside of the options argument. This is determined by one or more URLs in the XYZ format. You can find XYZ Tile Providers online with varying license agreements (OpenStreetMaps is permissive).

import { XYZ } from 'ol/source';
import TileLayer from 'ol/layer/Tile';

let textureMap = anu.createTextureMap('map', 
  {
    layers: [new TileLayer({
      source: new XYZ({
        crossOrigin: 'anonymous', //Required
        urls: ["https://tile.openstreetmap.org/{z}/{x}/{y}.png"]  //Default URL, replace or add to array
      })
    })]
  });

Options

Texture Map

Property	Value	Default
layers	(Tilelayers[ ]) list of map layer objects from OpenLayers	[ new TileLayer({ source: new OSM() }) ]
mapHeight	(number) the height of the texture in pixels	1000
mapWidth	(number) the width of the texture in pixels	2000
meshSize	(number) the scale of the ground mesh	50
view	(View) map view object from OpenLayers	new View({ center: [0, 0], zoom: 1 })

Texture Globe

Property	Value	Default
layers	(Tilelayers[ ]) list of map layer objects from OpenLayers	[ new TileLayer({ source: new OSM(), extent: [-180, -90, 180, 90] }) ]
resolution	(Vector2) the resolutions of the texture in pixels 2:1 ratio recommended	new Vector2(1000, 500)
diameter	(number) the diameter of the sphere mesh	1
view	(View) map view object from OpenLayers	new View({projection: 'EPSG:4326', extent[-180, -90, 180, 90], center: [0, 0], zoom: 0})

Methods and Properties

Texture Map

Property / Method	Description
container	the DOM element holding the map texture canvas
map	the open layers Map object
texture	the AdvancedDynamicTexture object used for the map
context	the DOM canvas object context
mesh	the ground mesh
scaleLon([lon,lat])	a function that take a lat lon coordinate as a list [lon, lat] and returns the x positions
scaleLat([lon,lat])	a function that take a lat lon coordinate as a list [lon, lat] and returns the y positions

Texture Globe

Property / Method	Description
container	the DOM element holding the map texture canvas
map	the open layers Map object
texture	the AdvancedDynamicTexture object used for the map
context	the DOM canvas object context
mesh	the ground mesh
lonLatToVector3([lon,lat])	function that take lon lat array [lon, lat] and returns a Vector3(x,y,z) position

Examples

textureMap.js

// SPDX-License-Identifier: Apache-2.0
// Copyright : J.P. Morgan Chase & Co.

import * as anu from '@jpmorganchase/anu';
import * as BABYLON from '@babylonjs/core';
import * as d3 from 'd3';
import data from './data/airports.csv';

//Create and export a function that takes a Babylon engine and returns a Babylon Scene
export function textureMap(engine){

  //Create an empty Scene
  const scene = new BABYLON.Scene(engine);
  //Add some lighting
  new BABYLON.HemisphericLight('light1', new BABYLON.Vector3(0, 10, 0), scene);
  //Add a camera that rotates around the origin and adjust its properties
  const camera = new BABYLON.ArcRotateCamera('Camera', 0, 0, 0, new BABYLON.Vector3(0, 0, 0), scene);
  camera.position = new BABYLON.Vector3(0, 3, -0.05);
  camera.wheelPrecision = 20;
  camera.minZ = 0;
  camera.attachControl(true);

  //Use the Texture Map prefab to create a plane with an OpenLayers map canvas as the texture
  let textureMap = anu.createTextureMap('map', { meshSize: 2 });

  //Get the OpenLayers map object from the prefab which we will need to customize its settings
  let map = textureMap.map;
  //Change the view parameters of the map to focus on the US
  map.getView().setCenter([-100, 40]);
  map.getView().setZoom(5);

  //Turn on keyboard controls on the TextureMap prefab (uses WASD and -+)
  //Due to a technical quirk, this function must be called *after* setting the center and zoom of the view
  textureMap.keyboardControls(scene);

  return scene;
}

textureGlobe.js

// SPDX-License-Identifier: Apache-2.0
// Copyright : J.P. Morgan Chase & Co.

import * as anu from '@jpmorganchase/anu';
import * as BABYLON from '@babylonjs/core';
import * as d3 from 'd3';
import data from './data/airports.csv';

//Create and export a function that takes a Babylon engine and returns a Babylon Scene
export function textureGlobe(engine) {

  //Create an empty Scene
  const scene = new BABYLON.Scene(engine);
  //Add some lighting
  new BABYLON.HemisphericLight('light1', new BABYLON.Vector3(0, 10, 0), scene);
  //Add a camera that rotates around the origin and adjust its properties
  const camera = new BABYLON.ArcRotateCamera('Camera', 0, 0, 0, new BABYLON.Vector3(0, 0, 0), scene);
  camera.position = new BABYLON.Vector3(0, 2, -2.5)
  camera.wheelPrecision = 20;
  camera.minZ = 0;
  camera.attachControl(true);

  //Use the Texture Globe prefab to create a sphere with an OpenLayers map canvas as the texture
  let textureGlobe = anu.createTextureGlobe('globe', { resolution: new BABYLON.Vector2(5000, 2500), diameter: 2 });
  
  return scene;
}