How to Make a Sun Path Diagram and Shadow Study in the Browser

2026-08-28 · sitedia guide

A sun path diagram is easy. A sun path diagram with the surrounding city in it is not — because the work is not the sun, it is modelling every neighbouring building so the shadows mean something.

sitedia builds that model from an address and puts the sun path and the shadows on top of it. This page explains what the diagram computes, and — the part that matters when you put it in a report — what it does not.

The sun position is computed, not fetched

Solar altitude and azimuth follow from latitude, longitude, date and time alone. sitedia uses the NOAA solar position algorithm directly, so there is no API call: the path draws instantly and works offline.

You can check the arithmetic against theory. Solar noon altitude is 90° − |latitude − declination|, with declination +23.44° at the June solstice and −23.44° at the December solstice.

City	Date	Sunrise	Noon altitude	Sunset	Theory
New York	Jun 21	04:25	72.7°	19:31	72.7°
Los Angeles	Jun 21	04:42	79.4°	19:08	79.4°
Seattle	Dec 21	07:55	19.0°	16:20	19.0°

Solar noon lands a few minutes off 12:00 for the same reason it always does: your longitude sits some way from your time zone's meridian, and the equation of time adds up to ±16 minutes on top of that.

The clock is local standard time — daylight saving is not applied

Times are the site's standard time. Daylight saving is deliberately left out: the rules differ by country and by year (the US changed its start and end dates in 2007), and encoding them for every site is a table we would have to maintain and would get wrong. Saying "standard time, no DST" on screen is more honest than approximating it.

Reading US diagrams in summer. New York's June sunrise reads 04:25 here; the clock on the wall that morning says 05:25 EDT. Add an hour between the second Sunday in March and the first Sunday in November.

Why those four dates

The path shifts a little every day, but the two extremes and the middle contain the whole year. The June solstice is the highest, longest arc; the December solstice the lowest, shortest; the equinoxes sit between. The equinox arc is the useful one for orientation — the sun rises due east and sets due west, so it reads as the east–west axis of your site.

What "cast shadows only" separates

A shadow map answers one question: is this surface blocked? But a surface can go dark for two different reasons, and mixing them makes a diagram unreadable.

Why it goes dark	Test
Self-shading — the face points away from the sun	N·L ≤ 0
Cast shadow — the face sees the sun but something blocks it	N·L > 0 and blocked

With both on, whole buildings turn grey and you cannot tell which grey is the neighbour's shadow. Turn cast shadows only on and surface colour stays constant through the year while the cast shadows remain — that is the diagram reading. Turn it off and faces away from the sun darken too, which reads as a more three-dimensional model. Pick per drawing.

What this is not

It is not a daylight compliance study, and it is not an environmental simulation. Three limits are worth stating plainly.

Only buildings cast. Trees, canopies and walls are not in the model.
Buildings with no recorded height or floor count are not extruded. Inventing a height would put fake shadows across streets. So the diagram shows fewer shadows than reality, not more.
Terrain is relative, not surveyed. Elevation comes from public DEMs with their own error; do not quote heights off this drawing.

Jurisdictions that regulate daylight do it with rules on setbacks, boundary planes or hours of sun on a specific window — not on ground shadows. If you need that, you need a certified study.

What the diagram is good at is the early question: which way does the site face, where does the winter morning shade fall, how far does the tower to the south reach at 3pm. Orientation and massing decisions live there.

Using it as a drawing

North up — rotates the view so north is up, leaving your tilt and zoom alone, so a set of drawings shares one orientation.
Plan view — straight down, north up. This is the view to measure shadow length in.
Save PNG — always the same pixel size regardless of your window, on a transparent background so it drops onto a report page.

Build a sun path for your site →

Next: Finishing the SVG in Illustrator →
← Back to sitedia · 한국어