Creating a MetacityGL App

Making a react-based app with MetacityGL

MetacityGL is developed with vitejs, but you can use whichever react-based toolbox you want. This short tutorial will outline a few recommended ways to build a simple MetacityGL app. You can get your local setup running using this guide.

An empty application could look like this:

import React from 'react'
import { MetacityGL, Utils } from 'metacitygl';
import 'metacitygl/style.css';

export function Application() {

    React.useEffect(() => {
        return () => {
            //recommended force cleaning up the rendering context
            window.location.reload();
        }
    }, []);

    return (
        <MetacityGL background={0x000000}>
            //insert your layers here
        </MetacityGL>
    )
}

The <MetacityGL> tag takes care of graphics context, canvas, navigation, etc., and passes a reference to the context to its children components. That means you can write layer components that can do anything and make things appear in the visualization using the provided API.

For more info on how to handle your data, see Writing Custom Layers. If you wish to serve content produced by Metacity, see Loading Metacity Data.