Procedural GL JS is a library for creating 3D map experiences on the web, written in JavaScript and WebGL. It is built on top of THREE.js.

It provides an easy-to-use, but powerful framework to allow beautiful landscapes of the outdoors to be embedded into web pages. It loads super-fast and is optimized for mobile devices.

Demo | Docs | Overlay playground | Elevation data | Source

For more information see the project page.

This repository contains a React wrapper for the library allowing it to be easily included into projects built with React.

This component does not bundle React, nor Procedural GL JS but instead expects them as peer dependencies. As such you will need to install them if they are not part of your project already.

npm install react
npm install react-dom
npm install procedural-gl
npm install procedural-gl-react

import ProceduralMap from 'procedural-gl-react';

// Configure library as usual (see main project)
<ProceduralMap
  datasource={datasource}
  compassVisible={true}
  displayLocation={{
    latitude: 47.5,
    longitude: 13.55
  }}/>

An more complete example of how to integrate this library with React can be found here.