cimplex-globe

A high performance JavaScript library for visualizing data on a globe using WebGL and Fastlane.

How to build the library?

Run npm install
Run npm run build or npm run watch

Running the example

A more comprehensive example can be found in the public folder. There are two options to run the example

Run npm start
Run docker-compose up

Both options start a web server on http://127.0.0.1:9999

Setup the library

Include the public/dist/app.js and public/external/fastlane.js in your HTML document

<script src="dist/app.js"></script>
<script src="external/fastlane.js"></script>

Example

const container = document.getElementById("container");
const globe = new CimplexGlobeView(container, {
	basinsLoaded: globeLoaded
});

function globeLoaded() {
	// update basin values on the globe
	const data = {
		732: 1.2,
		720: 20.3
	};
	globe.updateBasinValues(data);

	// add transitions on the globe
	const transitions = [
		{
			from: 732,
			to: 720,
			weight: 1.0
		}
	];
	globe.addTransitions(transitions);

	// move camera to basin
	globe.moveCameraToBasin(720);
}

API

Create a new globe view instance

const globe = new CimplexGlobeView(options) 

options = {
    scaleBasins: Number,         // Scales the basin heights
    enablePostprocessing = true, // Enables/Disables postprocessing
    enableGlobe = true,          // Enables/Disables tiles on the globe
    sphericalMapping = true,     // Enables/Disables 2D/3D projection
    showStats = false,           // Draws stats (fps, triangles)
    basinsHeight = 0.04,         // Setups the maxium height of a basin
    basinsLoaded = undefined     // Callback to a function called when loading of the globe is finished
}

Set basin values

const data = {
	732: 1.2,   // pair of basin id + basin value
	720: 20.3
};
globe.updateBasinValues(data);

Add transitions

// add transitions on the globe
const transitions = [
	{
		from: 732,      // source basin
		to: 720,        // target basin
		weight: 1.0     // weight of the basin
	}
];
globe.addTransitions(transitions);

Setup tile provider

// provide a callback to a custom tile provider
globeView.urlCallback = (level, x, y) => {
return `http://server.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer/tile/${level}/${y}/${x}`;
};

Load custom basins/regions

fetch("./resources/basins.geojson")
    .then(response => response.json())
    .then(data => {
		// load regions is able to parse custom geojson files
        globeView.loadRegions(data);
    });

Tile providers used in example

Tileset light_gray, light_gray(no labels), dark and dark(no labels) © OpenStreetMap &copy CartoDB
Tileset sattelite © Esri — Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community

Authors

Authors of this project (comprising ideas, architecture, and code) are:

Sebastian Alberternst sebastian.alberternst@dfki.de
Jan Sutter jan.sutter@dfki.de

This project and code was mainly developed by:

DFKI - German Research Center for Artificial Intelligence

Parts of the project and code were developed as part of the EU H2020 project CIMPLEX - Bringing CItizens, Models and Data together in Participatory, Interactive SociaL EXploratories.

Futher partners that deliver data and simulations via webservice access are:

ETHZ (ETH Zurich)
UCL (University College of London)
Közép-európai Egyetem (Central European University, CEU)
ISI (Fondazione Istituto per l'Interscambio Scientifico)
CNR (National Research Council)
FBK (Bruno Kessler Foundation)
USTUTT (University of Stuttgart, Institute for Visualization and Interactive Systems)

Contributions

three.js - A 3D open source library
stats.js - JavaScript Performance Monitor
geojson-polygon-center - A simple function that finds the central point of a GeoJSON polygon
geodesy - Library for various latitude/longitude calculations
browserify - Organize your browser code and load modules installed by npm
earcut - The fastest and smallest JavaScript polygon triangulation library for your WebGL apps
watchify - watch mode for browserify builds
serve - Static file serving and directory listing
countries.poly.geojson - geojson of all countries by johan
countries.json - borders of all countries by naturalearthdata
src/occluder.js - occluder based on the work of cesium
src/depthmaterial.js - by zz85 and part of the three.js examples
src/webvr.js - WebVR extension for three.js by mrdoob & Mugen87 and part of the three.js examples
src/vivecontroller - Support for Oculus controllers to three.js by mrdoob & stewdio and part of the three.js examples

License

See LICENSE.

cimplex-project/cimplex-globe