Adding Layers to Map

Open the Layers panel from the toolbar (or press L). It contains the basemap picker plus toggles for every data layer.

Click the checkbox next to a layer name to add or remove it from the map. Layers with additional detail (legends, opacity sliders, sub-options) expand via the chevron on the right.

Available layers include:

• Buildings — 3D building footprints from OpenStreetMap
• Ground Elevation — Color-ramped terrain heights (NAVD88, USGS 3DEP)
• FEMA Flood Zones — FEMA NFHL flood hazard zones (Zones AE / VE / X)

Sea-level-rise, tide and storm-surge water levels live in the separate Simulate panel (S), not Layers.

Active Layers

Active layers are shown in the layer panel with a checked checkbox. The order of layers in the panel reflects their draw order on the map.

When multiple flood layers are active simultaneously, they blend together to show compound risk. You can adjust individual layer opacity using the slider that appears beneath each active layer.

To quickly hide all layers, use the master toggle at the top of the layer panel.

Legend

The legend appears automatically when data layers are active. It displays color ramps and symbology for each visible layer, helping you interpret the map.

The legend updates dynamically as you toggle layers on and off. When exporting an image, the legend is embedded in the output.

Object Information

Use the Inspect tool (I) to click on any object in the scene and view its properties. For buildings, this includes address, footprint area, and elevation data. For flood zones, it shows the zone designation and base flood elevation.

The information panel appears as a popup near the clicked location and can be dismissed by clicking elsewhere or pressing Escape.

Buildings Layer

3D Footprints drape simplified building forms over the terrain so the diorama reads as a real place rather than an abstract heightfield. They give the scene spatial context — "the flood is at the steps of this building" — without claiming engineering-grade geometry.

What's in the data

• 2D footprint shapes (outlines) for every tagged building at the loaded location.
• Height attribute when the mapper supplied one (height or building:levels); otherwise a type-aware estimate (residential ~3 m / floor, commercial ~4 m / floor — see the inspect card for the value used at a specific building).
• Tags surfaced in Inspect: name, address, building type, levels, operator, year built, OSM link.

What it isn't

• Not a survey-grade model. Heights are estimates and roof shape is generic unless a roof tag was supplied.
• Not a complete inventory. Unmapped buildings won't appear; recently-built structures may lag the data.

Source: OpenStreetMap contributors via the Overpass API.

Ground Elevation Layer

The Ground Elevation layer colour-ramps the terrain by height above sea level (NAVD88), so low-lying parcels read as cooler colours and higher ground as warmer. It's the single fastest way to identify where water will pool first as levels rise.

How the legend works

• Left value — minimum elevation in the loaded scene (often below MLLW for shoreline parcels).
• 0 ft — sea-level reference on the ramp.
• Right value — peak elevation in the loaded scene.
• ft / m toggle — flips the legend (and the elevation readouts elsewhere in the UI) between feet and meters. The underlying data is unchanged.

Lower elevations are generally more prone to flooding, but standing water also depends on drainage, soil saturation, and tide stage — treat the ramp as one input among several, not as a flood map by itself.

Source: USGS 3D Elevation Program (3DEP) via AWS Terrain Tiles, referenced to NAVD88.

FEMA Flood Zones Layer

The FEMA Flood Zones layer overlays the regulatory flood hazard map for the loaded area. It's the same map used by lenders, insurers, and floodplain administrators to decide whether a property requires flood insurance and at what rate.

Zones shown

• High Flood Risk — FEMA Zones AE / VE. 1% chance of flooding in any given year (the "100-year flood zone"). AE is still water flooding; VE adds wave action ≥ 3 ft and is found on open coast. Mandatory flood insurance for federally-backed mortgages.
• Moderate Flood Risk — FEMA Zone X (Shaded). 0.2% chance of flooding in any given year (the "500-year flood zone"). Not mandatory but strongly recommended — most U.S. flood losses occur outside the high-risk zones.

What the zones don't show

• Stormwater / drainage flooding. FEMA maps the riverine + coastal regulatory zones, not rainfall flooding from clogged storm sewers.
• Future conditions. Maps reflect today's hydrology; sea-level rise scenarios aren't baked in. Use the diorama's water-level slider for that.
• Per-building risk. Zones are area designations — the elevation of a specific building's lowest floor matters as much as the zone it sits in.

Source: FEMA National Flood Hazard Layer (NFHL). Data is current as of the most recent NFHL release for the loaded county.

Water Level Layer

The Water Level layer raises a flat water plane across the entire diorama to the chosen elevation. Drag the slider, type a value, or pick a preset (low / mean / high / king tide; future SLR; storm-surge categories) to see which parcels submerge at each level.

How the value is interpreted

• Height above sea level on the NAVD88 vertical datum — the same reference as the Ground Elevation ramp, so a value of +5 ft means "5 ft above NAVD88" everywhere in the scene.
• ft / m toggle flips the display unit; the underlying slider position is unchanged.

Bathtub-model limitations

Water rises uniformly at the chosen elevation. The simulation deliberately does not account for:

• Terrain channeling — canals, culverts, low spots that fill before flat ground.
• Drainage & pumping — storm systems, seawalls, levees that hold water back.
• Time dynamics — a static snapshot, not a surge fill + drain animation.
• Rain intensity — compound inland flooding from rainfall during a coastal event.
• Wave action, wind setup, river flow.

Best for sketch scenario planning, stakeholder conversations, and communicating coastal risk visually — not for engineering or insurance decisions.

Sources: NOAA Tidal Datums (today's tides), NOAA Sea Level Rise Technical Report (future projections, CSAP 2025 endorses the Intermediate-High scenario), and NOAA SLOSH MOM (storm-surge categories).

Map Navigation

Navigate the 3D scene using your mouse or trackpad:

On touch devices, use one finger to pan, two fingers to pinch-zoom and rotate.

The compass rose (bottom-right) resets the view to north. The minimap (toggle with M) lets you pan to a new spot inside the same scene without losing your placed objects — the diorama re-centers and any objects that fall outside the new platform are hidden but kept in scene memory, ready to reappear if you pan back.

Immersive (first-person) mode

In Immersive mode (Mode dropdown → Immersive) you walk the scene at human scale. Right-click to enter look mode, left-click to pause look and interact with the UI again.

Keyboard & mouse

Xbox / generic gamepad

Plug in any Xbox-style controller (the browser auto-detects via the Gamepad API). The diorama responds while Immersive is the active mode.

2D / 3D Mode

Press T to toggle between a top-down 2D view and an angled 3D perspective. In top-down mode, the camera looks straight down with no tilt, which is useful for measuring areas and comparing layer boundaries.

The Mode toolbar also offers Diorama, Cross-Section, and Immersive presets that adjust the camera, clipping, and scene presentation.

Color Mode

The application supports light and dark base tones for the terrain and buildings. Use the Controls panel to switch color modes. Dark mode is the default and provides better contrast for flood visualization overlays.

Keyboard Shortcuts

Panels

Tools

View

Selection & editing

Bookmarks

Basemap Selection

The basemap picker now lives at the top of the Layers panel (L). Three compact pills:

• Aerial — Satellite / orthophoto base with realistic ground texture.
• Map — OpenStreetMap-style street basemap, optimized for data overlay readability.
• 3D — Google / Cesium photorealistic 3D tiles for an immersive ground.

The active pill gets an orange outline. Switching basemaps preserves your current camera position and active layers.

Measurement

Activate Measure with Y (yardstick) or via the toolbar. The Measure window has two modes:

• Distance — Click two points to measure the straight-line distance between them. Repeat for multiple lines.
• Area — Click each polygon vertex; double-click or press Enter to close. The HUD shows the enclosed area.

Toggle between ft and m with the unit pill in the HUD. Use Undo to drop the last measurement, Clear to wipe all of them. Escape cancels the in-progress segment without affecting completed measurements.

Time of Day

The Time of Day slider in the Simulate panel previews the diorama under the sun position for the chosen hour. Move it to change the lighting direction, shadow angle, and sky tone — useful for evaluating how a site reads at sunrise, midday, or golden hour, and for stakeholder presentations that mimic a specific time on the day of a meeting or event.

What it changes

• Sun position — azimuth + altitude driven by the chosen hour at the loaded location's latitude.
• Shadow direction and length — recomputed in real time as you drag.
• Ambient sky tint — cool blue near dawn / dusk, warmer at noon.

12-hour / 24-hour toggle

The small pill to the right of the readout flips between 12h (e.g. 2:30 PM) and 24h (e.g. 14:30) display. The slider itself is always anchored to 24-hour time internally so dragging is unitless — only the readout text changes.

What it does not change

Time of Day is a visual control. It does not drive water level, tides, or weather conditions — those have their own controls. It's a presentation tool, not a simulation parameter.

Simulate

The Simulate panel lets you preview flooding under different time-of-day, weather, and water-level conditions on the diorama. Open it from the wave icon in the top toolbar.

Controls

• Time of Day & Conditions — sun position + weather preview, with a 12h / 24h toggle.
• Water Level — drag the slider or pick a preset to raise the water surface. Toggle between ft and m.
• Tides — Low, Mean Sea Level (zero), High, and King (sun + moon alignment) presets. See NOAA tide datums ↗.
• Sea Level Rise — NOAA Intermediate-High projections from today's baseline through future decades. See Tampa Bay CSAP ↗.

Bathtub-model limitations

Water rises uniformly at the chosen elevation. The simulation deliberately does not account for:

• Terrain channeling — canals, culverts, low spots
• Drainage & pumping — storm systems, seawalls
• Time dynamics — static snapshot, not surge fill / drain
• Rain intensity — compound inland flooding
• Wave action, wind setup, river flow

Best for sketch scenario planning, stakeholder conversations, and communicating risk visually — not for engineering or insurance decisions. See FEMA NFHL ↗ and NOAA SLOSH ↗ for authoritative data.

Cross-Section

Cross-Section is a view mode, not a tool button: switch to it from the Mode dropdown in the top toolbar (or via the “Explore in Cross-Section” CTA inside the Simulate panel).

You'll be prompted to draw the cut line by clicking two points on the diorama. The view then locks to a side-on profile with elevation data, so you can see how flood levels interact with terrain at that exact slice.

Navigating the section view

Once the cut line is drawn the camera rotates to look perpendicular to it. You can still pan, zoom, and tilt to inspect the profile:

Reading the ruler

The white vertical strip on the left is the elevation ruler. Values are measured against NAVD88 (see the footnote at the bottom of the legend panel). Click the ft / m pill at the bottom of the ruler to switch units — every readout in the section panel honours the toggle.

Toggling water levels

Each labelled line on the chart corresponds to a tide, sea-level-rise, or surge scenario in the legend below. Click the row in the legend to show or hide that band; the line above the chart fades/un-fades in sync. Click a line's label directly to animate the water plane up to that elevation — the slider, the value readout, and the legend all update together.

The Quick scenarios row above the description offers one-click presets like "Current tide" that resolve to combined SLR + surge + tide values without you having to click each component.

Dragging the water plane

The water-level handle on the ruler is grabbable. Drag it up or down to scrub the water surface to any elevation between the cap (~9 m / ~30 ft NAVD88, the realistic Tampa Bay worst-case ceiling) and the bay's deepest bathymetry. The handle pill shows the live value as you drag.

Reference images

While in Cross-Section mode the Add Image button on the legend panel lets you drop reference imagery from the Image library (Plan or Section view) onto the cut overlay for tracing or comparison.

Bookmarks within the view

Use Ctrl+1…9 to save your current section view (including the cut line + which layers are toggled), then 1…9 to jump back to it. Recalling a section bookmark from another mode automatically switches you into Cross-Section view first.

Inspect

The Inspect tool (I) enables point-and-click querying of map features. Click on buildings, flood zones, or terrain to see attribute data in a popup.

Building inspections show estimated floor elevations, footprint area, and structure type when available. Flood zone inspections show FEMA zone designations and base flood elevations.

Build & Edit

Toggle the Build dock with B. The dock holds three asset libraries:

• 3D Models — placeable structures (houses, vehicles, vegetation, adaptation features like seawalls, berms, elevated buildings, mangroves, oyster reefs).
• Draw — Markup (Marker pin, Text Label, Star, Stencil), Shapes (Line, Circle, Square, Triangle), and Sketch tools (free-hand Marker, Custom Shape polygon, Extrude, Demolish).
• Images — reference imagery for either Plan view (drops onto terrain) or Section view (overlay on the cut plane).

Placing & editing

• Click an item in the dock to arm it — the dock collapses to a mini info card while you place.
• Click on the diorama to drop the object. Ctrl+click to stamp another copy. R rotates the armed item before placement.
• Once placed, click any object to select it. Drag the gizmo arrows / pad to move, the rotate ring to spin, the tilt arcs to flip.
• Arrow keys snap a selected object's tilt to a world axis (SketchUp-style).
• Force-field clamp: objects can't be placed or dragged off the diorama platform. Off-platform memory is preserved per scene if you change location.
• K arms the Sledgehammer — drag across placed objects to wipe them. The trash-can button in the dock toolbar clears everything with a confirm.

Saved scenes (Ctrl+1…9 bookmarks, named designs, share-link URLs, QR codes) all retain placed objects, draw shapes, simulate state, and basemap choice.

Multiplayer & Real-Time Editing

Click Share in the top bar to copy a room link. Anyone who opens that link joins the same live session — cursors, selections, placed objects, water levels, and view changes all sync in real time.

• Every participant shows up as a coloured cursor + an avatar in the top-bar "who's here" pill. Hover a cursor to see the participant's name; click an avatar to fly your camera to where that person is looking.
• The scene owner (whoever shared the room first) appears as Captain (owner) with a black anchor avatar. Only the owner can lock / unlock the map location and dictate the initial scene.
• Editing the scene (placing objects, drawing, measuring) is broadcast to all peers — there's no separate “commit” step. Undo / redo is per-user.
• If two people are looking at different locations, the system tags peer cursors with (other scene). To follow someone, click their avatar.

Sessions are ephemeral — closing the last tab tears the room down. Use Save Design (or Export Scene (.json)) to persist the result.

Export & Share

Click Export in the top-right to open the menu:

• Screenshot (.png) — PNG of the current view with the active legend overlaid in the corner.
• Record Video (.webm) — WebM recording of your screen via the browser's screen-share API. Plays back in any browser; on Windows use VLC or convert to MP4 if you need broader compatibility.
• Export Scene (.json) — Portable scene file with every placed object, drawing, measurement, water level, and bookmark. Drop it back in via My Designs → Import to restore the scene on another machine or browser.
• Export for VR/AR (.glb) — GLB export of the diorama + everything in it, suitable for viewing in WebXR / Meta Quest / iOS Quick Look / Blender.

The orange Share button is a separate, one-click action — it copies the live room URL so collaborators can join your session in real time (see Multiplayer & Real-Time Editing).

Saving designs

Scenes also autosave to your browser. Use Save Design to name + store one in the local Scene Gallery, or My Designs to load / rename / delete existing ones. Use Export Scene (.json) for a portable file you can move between machines or browsers.

Data Sources

This application integrates data from multiple authoritative sources. Each source is linked to its primary online location for further reading or current data.

• Elevation — USGS 3D Elevation Program (3DEP) & AWS Terrain Tiles
• Buildings — OpenStreetMap contributors via Overpass API
• Flood Zones — FEMA National Flood Hazard Layer (NFHL)
• Tides & Water Levels — NOAA Tides & Currents & Tidal Datums
• Sea Level Rise Projections — Tampa Bay Climate Science Advisory Panel (CSAP) using NOAA Intermediate-High projections
• Storm Surge — NOAA National Storm Surge Hazard Maps (SLOSH MOM)
• Aerial Imagery — Esri World Imagery (Maxar, Earthstar Geographics)
• Map Tiles — OpenStreetMap contributors
• 3D Tiles — Google Photorealistic 3D Tiles / Cesium ion

Data is provided as-is for research and demonstration purposes. Always consult primary sources for planning or regulatory decisions.

Built by the Tampa Bay Regional Planning Council — see tbrpc.org/shorelines for related coastal-resilience tooling.

Typical Water Levels — NOAA Tidal Datums

The Low Tide, Average Water Level, High Tide, and King Tide elevations shown in the cross-section view come from NOAA Tides & Currents for the tide-gauge station nearest to the loaded location. Values are converted to feet referenced to NAVD88 using the station's published NAVD offset.

What each datum means

• Low Tide (MLLW) — Mean Lower Low Water. The average of the lower of the two daily low tides over the current National Tidal Datum Epoch (1983–2001 for most stations).
• Average Water Level (MSL / 0 ft NAVD88) — Mean Sea Level for this station, expressed on the NAVD88 vertical datum (so it can be compared directly to land elevations).
• High Tide (MHHW) — Mean Higher High Water. The average of the higher of the two daily high tides.
• King Tide — The Highest Astronomical Tide (HAT) when published by the station; otherwise approximated as MHHW + ~0.5 ft (a typical seasonal offset for Tampa Bay).

Source: tidesandcurrents.noaa.gov/datums.html — the ⓘ link in the legend opens the page for the actual station this scene is using.

Datums are fetched live each session: see src/data/datumFetcher.js.

Future Sea Level — CSAP 2025 / NOAA Intermediate-High

The 2040 / 2050 / 2060 / 2070 High Tide and King Tide elevations are projections built on top of today's NOAA tidal datums by adding the local sea-level-rise increment recommended by the Tampa Bay Climate Science Advisory Panel (CSAP).

CSAP 2025 endorses the NOAA Intermediate-High scenario for Tampa Bay planning. That scenario implies:

• 2040 — approximately +0.9 ft above today's MHHW
• 2050 (mid-term) — approximately +1.4 ft
• 2060 — approximately +2.1 ft
• 2070 (long-term) — approximately +3.0 ft

Each projected datum on the chart is computed as today's MHHW (or HAT) + scenario increment — so a station with MHHW = 0.8 ft NAVD88 today shows 2050 High Tide at ~2.2 ft NAVD88.

Sources:

• Tampa Bay Climate Science Advisory Panel (TBEP)
• NOAA 2022 Sea Level Rise Technical Report (Intermediate-High scenario)

SLR increments are coded in src/data/datumFetcher.js under SLR_2040, SLR_MID_TERM, SLR_2060, SLR_LONG_TERM.

Storm Surge — NOAA SLOSH MOM (Tampa Bay)

The Category 1–5 Surge bands are based on NOAA's SLOSH MOM (Sea, Lake, and Overland Surges from Hurricanes — Maximum of MEOWs) model. SLOSH MOM is the standard surge guidance used by emergency managers across the U.S. Gulf and Atlantic coasts.

What "MOM" means

For each storm category, SLOSH runs thousands of synthetic hurricanes of that intensity across a basin (here: the Tampa Bay basin), then takes the maximum surge height predicted at each grid cell across all of those runs — a worst-case envelope rather than a single storm forecast. That's why each band on the chart is a range (e.g. Category 3 ≈ 7–11 ft) rather than a single value: the range reflects spatial variability across Tampa Bay.

Typical surge ranges for Tampa Bay

• Category 1 — approximately 3–5 ft above NAVD88
• Category 2 — approximately 5–8 ft
• Category 3 — approximately 7–11 ft
• Category 4 — approximately 10–16 ft
• Category 5 — approximately 15–25 ft

These ranges are static reference bands — they're not the result of a per-location SLOSH grid query (which would require a per-pixel SLOSH MOM raster). They represent the typical surge envelope for the Tampa Bay basin as published by NOAA NHC and the Florida Department of Emergency Management.

Source: NOAA National Storm Surge Hazard Maps (SLOSH MOM viewer)

Subsurface Data Sources

The geologic stack you see when you press D — Subsurface Sands, Surficial Aquifer, Confining Layer, and Floridan Aquifer — is assembled from a mix of federal and state hydrogeology datasets. This page explains what each one contributes.

Federal datasets

Three federal sources drive the unit tops, the surface they sit beneath, and the live water table:

• USGS DS926 — Hydrogeologic Framework of Florida (Williams & Dixon, 2015). Statewide grid that defines the top and bottom of every major hydrogeologic unit. We read the top-of-Floridan elevation and the Surficial Aquifer thickness from it. The Confining Unit is derived as the layer between Surficial base and Floridan top — in coastal Pinellas it often "pinches out" (Surficial rests directly on Floridan), which the legend reports explicitly. Sampled offline into a 0.01° lookup grid (see scripts/preprocess-ds926.mjs) and bilinearly interpolated at the loaded location. pubs.usgs.gov/ds/0926
• NOAA NCEI — Topo / Bathy Mosaic. The land surface and seafloor the stack sits beneath come from NCEI's Continuously Updated Digital Elevation Model (CUDEM / topobathy mosaic), referenced to MLLW for bathymetry and NAVD88 for topography. Same DEM as the diorama's terrain heightfield, so "below the surface" in the legend means below this mosaic at the loaded point. Coastal Pinellas uses 1/9-arc-second resolution where available, 1/3-arc-second offshore. ncei.noaa.gov/products/coastal-elevation-models
• USGS NWIS — National Water Information System. The water-table reading annotated on the Surficial band ("Water table: X ft below surface") comes from the nearest active monitoring well with a recent Depth-To-Water measurement (parameter 72019, ft below land surface). Because this is point data, the reading represents the water table at that well — distance + freshness are surfaced in the legend tooltip so confidence is visible. waterdata.usgs.gov/nwis

State dataset

• FDEP / FGS — Florida Geological Survey. The Florida Department of Environmental Protection and its Florida Geological Survey publish the Intermediate Aquifer System (IAS) and Surficial Aquifer System (SAS) hydrogeology datasets — locally mapped detail that refines the regional DS926 surfaces in the Tampa Bay area. Where FGS coverage exists for a loaded location, those values override the USGS regional grid. Fallback order: FDEP → DS926 → built-in regional defaults. See src/data/fdepHydroFetcher.js for the async merge. floridadep.gov/fgs