Skip to content

cimplex-project/cimplex-globe

Repository files navigation

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

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.