Modernizing OSMBuilding for 2026

[MikeConsemulder]

First off, I want to express my huge respect for what has been built here. OSMBuilding is a brilliant piece of engineering—it’s fast, focused, and solves a complex problem with elegant simplicity. I’ve been using it and admiring the logic for a long time.

As I was working with it, I felt a personal urge to give something back: a modernization effort to ensure this project stays at the cutting edge for years to come. I’ve taken the liberty of refactoring the architecture into a more modular, strictly-typed, and future-proof setup, and I’d love to walk you through what I’ve done.

The Goal

The primary objective was to lift the codebase to a 2026 standard without losing the "original soul" of the project. I wanted to make the library easier to contribute to, safer to develop in, and effortless to integrate into modern web stacks.

Key Improvements

1. Unified TypeScript Core

I’ve ported the entire core library to Strict TypeScript.

• Type Safety: Every building part, coordinate, and geometry option is now fully typed. This eliminates a whole class of runtime "undefined" errors.
• Geometry Refactoring: All legacy geometry plugins (Pyramid, Wedge, Hipped, etc.) have been converted to native TS classes. They are now integrated directly into the core package, removing the need for external .js vendor dependencies.
• Straight Skeleton: I’ve fully integrated a clean, typed version of the Straight Skeleton algorithm, ensuring roof generation is robust and maintainable. (I saw your other project, so I don't know if you are using it somewhere else, maybe you want to keep it seperated, but it can be also included in this mono repo stucture)

2. Modern Monorepo Architecture

I’ve moved the project to a pnpm monorepo structure. This strictly separates the engine from the demonstration:

• packages/core: A framework-agnostic library. It outputs clean ESM and UMD bundles. You can now use it in Vue, React, Svelte, or vanilla JS with equal ease.
• apps/demo: A brand new, sleek dashboard built with Vue 3 and Vite. It’s decoupled from the core logic, serving as a "customer" of the library just like any other app would.

3. High-Quality Developer Experience

• Vitest Suite: I’ve implemented a modern test suite with mocking for OSM API calls.
• Single-File Build: The build output is now extremely clean. Instead of 50 small files, the core library bundles into sharp, optimized entry points.

Respecting the Legacy

I know how important the existing workflow is. I’ve ensured that the original GitHub Pages functionality remains fully intact.

If you share a link like:
https://beakerboy.github.io/OSMBuilding/?id=766761337&type=way

The new demo app will automatically detect these parameters on load and render the correct building immediately, just as the previous version did. The transition for existing users will be seamless, but the engine under the hood is now much more powerful.

Closing Thoughts

I’ve put a lot of heart into this refactor because I believe in this project. My goal isn't to change what OSMBuilding is, but to provide the foundation it needs to thrive in the coming decade.

I’d love to hear your thoughts and see if we can bring these improvements into the main repository.

Best,

Mike Consemulder

[Beakerboy]

I am a very mediocre programmer so any improvements you’ve made are likely for the best. This project was just me filling in a personal need that didn’t exist. I’ll definitely check out you refactor and offer feedback. My own work on OSMBuilding has slowed as other projects have bubbled to the surface. As long as it can display a 3d render of a building using live OSM data from a GitHub page (so I don’t have to host it somewhere), I’ll consider it a success.

I did recently see that one of the “full world” 3d map website (like F4maps) has released something very similar to this project. I think the announcement also mentioned that it allowed users to preview edits in the browser. I was planning on looking at that and, if it met all my needs, just abandon this.