Create 3D Maps With The Procedural GL React component

Procedural GL JS is a library for creating 3D map experiences on the web by using React and Three.js libraries, written in JavaScript and WebGL.

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.

Basic usage:

1. Install necessary libraries.

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

2. Import the Procedural GL React component.

import React from 'react';
import ProceduralMap from 'procedural-gl-react';

3. This example shows how to render a 3D map in your React app.

// Define API Keys (replace these with your own!)
const NASADEM_APIKEY = null;
const MAPTILER_APIKEY = null;
if ( !NASADEM_APIKEY || !MAPTILER_APIKEY ) {
  const error = Error( 'Include your own API keys' );
  throw error;
}
const datasource = {
  elevation: {
    apiKey: NASADEM_APIKEY
  },
  imagery: {
    apiKey: MAPTILER_APIKEY,
    urlFormat: 'https://api.maptiler.com/tiles/satellite/{z}/{x}/{y}.jpg?key={apiKey}',
    attribution: '<a href="https://www.maptiler.com/copyright/">Maptiler</a> <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
  }
}
export default class Example extends React.Component {
  render() {
    return React.createElement( ProceduralMap, {
      datasource,
      compassVisible: true,
      displayLocation: {
        latitude: 47.5,
        longitude: 13.55
      }
    } );
  }
}

Preview:

Download Details:

Author: felixpalmer

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/felixpalmer/procedural-gl-react

License: MIT