An open API service indexing awesome lists of open source software.

https://github.com/hideba/flatcitybuf-web-prototype


https://github.com/hideba/flatcitybuf-web-prototype

Last synced: over 1 year ago
JSON representation

Awesome Lists containing this project

README

          

# FlatCityBuffer Viewer

A front-end prototype implementation for visualizing FlatCityBuffer data, which is a FlatBuffer encoding of CityJSON. This viewer demonstrates efficient spatial data retrieval using HTTP range requests and WebAssembly bindings.

## Overview

This project showcases:
- Efficient spatial data retrieval using FlatCityBuffer's WASM bindings
- HTTP range requests to fetch only the required data extent
- Interactive map interface using CesiumJS
- Real-time visualization of CityJSON data
- Statistical analysis of building attributes

## Features

- πŸ—ΊοΈ Interactive map with drawing tools for area selection
- πŸ“¦ Efficient data loading using HTTP range requests
- πŸ“Š Statistical analysis of building attributes
- πŸ” JSON viewer for detailed data inspection
- πŸ—οΈ Download CityJSONSeq file only for selected area

## Technology Stack

- React + TypeScript
- Vite for build tooling
- CesiumJS for map rendering
- TailwindCSS + shadcn/ui for styling
- [FlatCityBuffer WASM bindings](https://github.com/flatcitybuf/flatcitybuf-wasm)
- proj4js for coordinate transformations

## Getting Started

### Prerequisites

- Node.js (v18 or later)
- npm (v9 or later)
- Git

### Installation

1. Clone the repository with submodules:
```bash
git clone --recursive https://github.com/yourusername/flatcitybuffer-viewer.git
cd flatcitybuffer-viewer
```

2. Install dependencies:
```bash
npm install
```

3. Start the development server:
```bash
npm run dev
```

The application will be available at `http://localhost:3000`