beakerboy / osmbuilding

render an individual OSM building

OSM Building Viewer

Visualize an OSM Building in 3D

Visualize an OSM Building from the live OSM data. To visualize a building tagged with a way, use the URL: https://beakerboy.github.io/OSMBuilding/index.html?id=[id]

If the building is a multipolygon, or a relation, use: https://beakerboy.github.io/OSMBuilding/index.html?type=relation&id=[id]

...replacing [id] with the actual id of the way or relation.

Additional details will be displayed if "&info" is appended to the URL.

Console debug messages can be printed to the screen if "&errorBox" is appended to the url. Helpful since mobile browsers often lack any inspection capability.

Supports:

• Ways with a building tag
• Ways with building parts inside.
• Building relations with way and/or multipolygon parts
• Mulipolygon buildings

Roof Types:

• Flat
• Skillion
• Dome
• Pyramidal
• Gabled

Examples:

• Simple building with no parts - Washington Monument
• Glass - Petronas Towers
• Dome roof, Gabled roof, and Skillion ramp - Jefferson Memorial
• Dome, Gabled, and Pyramidal Roof - US Capitol
• Chrysler Building
• Building Relation Burj Khalifa
• Multipolygon with no parts - Freer Art Gallery
• Relation with multipolygon parts - Leaning Tower of Pisa

osmbuilding's Issues

Take into account ground elevation

The “ele” tag indicates the ground elevation.

do we subtract that from all heights?

Add support for min_height and levels:underground

Use shape.position.set(x,y,z) to manage min_height;

Use ShapeGeometry for flat roofs

Currently flat roofs are not rendered because the building will have a flat top. However, if the building type is a roof the building is not rendered, and we still need a roof.

Buildings are rendering upside down.

Allow passing way_id through a link

subtract roof height from height

Height is defined as the total height. if roof height is specified, it must be subtracted to calculated the extruded depth of the main building.

Add other roof types

https://www.researchgate.net/profile/A-Day-2/publication/2472808_Automatically_Generating_Roof_Models_from_Building_Footprints/links/00463530c6ebb93f72000000/Automatically-Generating-Roof-Models-from-Building-Footprints.pdf?origin=publication_detail

remove leading pound sign from colors.

building:min_levels support

Currently min_levels has no effect on rendering.

Use a rotation instead of a translation to "center" the structure

Currently, the first node of the way is moved to 0,0 by subtracting it's values from the lat/lon of every other point.
It is perfectly cromulent to change the longitude this way, but the latitude should be modified with a true rotation.

this is because at higher latitude, the arclength of each degree longitude is smaller.

First "rotate" the data to move the home point into the prime meridian.
Then use trig to move each point towards the equator.

the building is rendered mirror image

The render is backwards, left / right.

gridhelper missing for relation buildings

rotate structure to be above the mesh.

Add support for relationships

Many complex buildings are multi-polygons. Some include all the parts within the relationship.

update tests to import code in the new (correct?) way.

Create function to converts various length values into floats

height can be defined as "6" or "6m" or '3'2"'. Parse and convert to meters.

Create a function to return the materal

If material is copper:

Color:0xff6250
Emissive 0x000000
metalnes: 1
roughness: .127

https://threejs.org/docs/#api/en/materials/MeshStandardMaterial.metalness

Change from an importmap to allow app to fun on iOS

do not add roof if no roof tags included

some building parts have no roof. Do not render a black roof unless "roof" is mentioned.

Black screen

I'm not sure how to use this. When I click on the Example links using Safari on Mac or iPhone all I see is a black screen.