cimplex-globe

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

How to build the library?

1. Run npm install
2. 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

1. Run npm start
2. Run docker-compose up

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

Setup the library

1. 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>

2. 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.