Screen · Weather
Radar SwiftUI Screen
A dot-matrix map that plays the next two hours, with a time slider and legend blocks.
A radar screen drawn as a dot matrix: each dot's size and colour is the intensity at that point, over a hairline coastline. Play or drag the time slider to step through frames, pinch to zoom the grid, and read the legend as colour blocks.
- SwiftUI
- iOS 17.0+
- dot-radar
$199 once, every piece included. See how installing works · Sign in
01
What's included
SwiftUI source you own, built on Apple frameworks only.
- A dot matrix whose size and colour carry intensity
- Play and scrub frames on a time slider
- Pinch to zoom the grid, with a locate button
- Legend as colour blocks, alerts as a ticker
- The Radar screen from the preview, ready to adapt
Used in
Weather App (template)
02
Implementation notes
How it behaves, what it handles, and the decisions behind it.
The radar is drawn like a signboard: a fixed lattice of dots over the map, where each dot's size and colour are the rain beneath it. Dry land is a field of faint dots, the sea fainter still, with the coast as a hairline and towns labelled in small capitals. Press play and the band of showers crosses the coast frame by frame, the dots swelling and fading between frames instead of jumping. The title's second line is the nowcast for where you are ("Rain from 15:40"), read from the same frames.
Pinch to zoom and the lattice stays fine, so zooming resolves the storm rather than enlarging dots; drag to pan once zoomed, double-tap to see everything, or use the locate button to jump to your position and back. The timeline below carries a tick per frame and the frame's time on its thumb, the legend is four colour blocks from light to severe, and alerts run along a strip under the map.
Notes
- Feed
DotRadaran array ofRadarFrames: a grid of intensities per time step, from your radar provider or a nowcast model.positionis a fractional frame index; animate it and the field blends between neighbouring frames. - Land is a set of polygons in map coordinates. Their edges, less any that run along the map's border, become the coastline, so one shape gives you both the land dots and the hairline.
- Levels and thresholds come in through
DotRadarStyle. The example takes four of the scheme's blocks, from light to severe, so every preset brings its own ramp. - VoiceOver reads the radar as one element with a summary you supply, supports the zoom rotor action, and adjusts
DotRadarTimelineframe by frame. - Reduce Motion keeps playback (it is information) but steps between frames without the blend and stops the ticker on the first alert.
DotRadarExampleat the end ofDotRadar.swiftis the screen shown in the preview; copy it as a starting point.
03
Keep building
Pieces that work well next to this one.