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;
  const error = Error( 'Include your own API keys' );
  throw error;
const datasource = {
  elevation: {
  imagery: {
    urlFormat: '{z}/{x}/{y}.jpg?key={apiKey}',
    attribution: '<a href="">Maptiler</a> <a href="">OpenStreetMap</a> contributors'
export default class Example extends React.Component {
  render() {
    return React.createElement( ProceduralMap, {
      compassVisible: true,
      displayLocation: {
        latitude: 47.5,
        longitude: 13.55
    } );


Create 3D Maps With The Procedural GL React component

Download Details:

Author: felixpalmer

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website:

License: MIT


Add Comment