Skip to content

Latest commit

 

History

History
84 lines (61 loc) · 2.93 KB

README.md

File metadata and controls

84 lines (61 loc) · 2.93 KB
Raw

Fluid Earth web component

Description

Fluid Earth comes as a freestanding application, but it also includes a simplified web component that can be integrated into other web sites. If you want to make use of Fluid Earth in your own applications, you may be able to accomplish this more easily by using the web component instead of forking and modifying the full code.

By default, the web component instantiates a blank globe with no user interaction. Globe parameters can be set programatically through exposed parameters like latitude/ longitude, zoom level, base color, etc.

Additional functionality, such as interaction surface, geography, location markers and raster/streamline data layers, can be reimplemented as needed. See "Help with development" below for more info about reimplementing features.

Getting Started

Dependencies

The web component is generated by running the following commands:

pnpm install
pnpm run build:webcomponent

Once this has been run, the web component will be appear as webcomponent.js under the dist folder.

Utilizing the component

To use the component in a web page, copy webcomponent.js to the same folder as your HTML file and import it like so:

<script src='./webcomponent.js'></script>

The component can then be added to the page <body> using the HTML tag for the earth-map element:

<earth-map></earth-map>

Setting component attributes

The web component can be accessed from within the page JavaScript with:

let earthMap = document.querySelector('earth-map');

Exposed attributes of the component can then be modified like so:

earthMap.<attribute> = <value>;

Here are some of the attributes exposed by the component:

  • centerLongitude: float from -180 (west) to 180 (east)
  • centerLatitude: float from -90 (south) to 90 (north)
  • zoom: float from 0.5 to 15 (with 1 being standard zoom)
  • griddedBaseColor: rgba array which defines the base color of the globe (shown when the raster data value is -Infinity)
  • vectorData: json object in topojson format (defining the vector geography)
  • vectorColors: JS object (taking an rgba array defining the color for each of the object keys in the vectorData topojson)
  • syncWithAnimationHook: function to be executed each time the globe changes

Other attributes are also available, derived from the exported variables in the freestanding application's src/map/Map.svelte file.

Help with development

We have included a demo site ( demo.html ) that can be used as a template for reimplementing some features of the freestanding application.

For more advanced features, the code in the freestanding version of the application can be used as a guide for reimplementation.

For questions regarding development using the web component, or for using or modifying the full version of the application code, contact our group at the Byrd Polar and Climate Research Center (gravina.2@osu.edu).