Mark the place the map is pointed at, and make following work

Choosing a town moved the camera and then left the reader to work out which of
the settlements now on screen was the one they asked for. A town has no precise
position, so the map now marks its centre: a white disc under a coloured dot,
drawn as a style layer so the native renderer keeps it pinned through every pan
and zoom. The radar frames are inserted below it, because a band of rain must
not paint over the one thing that says which town this is.

A searched municipality becomes a PointTarget rather than being thrown away as
"the whole region". It is marked, the recentre button returns to it, and the
chip names it - but it is never persisted, so looking something up no longer
costs the user the place their app opens on. That was a real defect: searching
went through select(FreeTarget), which wrote null over the stored preference.

Following the device was broken outright. MapLibre reports a camera animation
the app started exactly as it reports the user grabbing the map, so engaging
follow and then animating to the position cancelled the follow it had just
started; the resulting FreeTarget then re-framed the whole region. Follow now
moves the camera first and switches tracking on second, and FreeTarget no longer
moves the camera as a reaction to the state changing - framing the region is an
action, so panning away while following keeps the view the user panned to.

Verified on the emulator with a fix in Turin: a searched town is marked and
saveable, the app reopens on it with the marker in place, following centres on
the blue dot, and panning stops the chase without yanking the map away.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
2026-09-10 23:17:21 +02:00
co-authored by Claude Opus 5
parent f434a68155
commit a686f7625e
7 changed files with 515 additions and 21 deletions
@@ -44,6 +44,7 @@ class TargetSelector extends ConsumerWidget {
const TargetSelector({
required this.region,
required this.onFollowRequested,
required this.onRegionRequested,
required this.onSearch,
required this.onManagePlaces,
super.key,
@@ -56,6 +57,12 @@ class TargetSelector extends ConsumerWidget {
/// owns the map handles it and only then changes the target.
final VoidCallback onFollowRequested;
/// Framing the region is a camera move, and camera moves belong to the screen
/// that owns the map. Selecting the target alone cannot do it: the map lands
/// in the same state when the user simply drags away from what it was
/// following, and that must not throw their pan away.
final VoidCallback onRegionRequested;
final VoidCallback onSearch;
final VoidCallback onManagePlaces;
@@ -69,12 +76,16 @@ class TargetSelector extends ConsumerWidget {
final label = switch (target) {
FollowUser() => l10n.targetFollowMe,
PlaceTarget(:final place) => place.name,
PointTarget(:final label) => label,
FreeTarget() => l10n.targetWholeRegion(region.displayName),
};
// A searched point gets the outlined pin: it is on the map like a saved
// place, but nothing has been kept, and the chip should not claim otherwise.
final icon = switch (target) {
FollowUser() => Icons.my_location,
PlaceTarget() => Icons.place,
PointTarget() => Icons.place_outlined,
FreeTarget() => Icons.map_outlined,
};
@@ -90,9 +101,7 @@ class TargetSelector extends ConsumerWidget {
case _ChooseFollow():
onFollowRequested();
case _ChooseRegion():
await ref
.read(mapTargetProvider.notifier)
.select(const FreeTarget());
onRegionRequested();
case _ChoosePlace(:final place):
await ref
.read(mapTargetProvider.notifier)
@@ -192,6 +201,7 @@ class MapActionButtons extends ConsumerWidget {
final recentreIcon = switch (target) {
FollowUser() => Icons.my_location,
PlaceTarget() => Icons.place,
PointTarget() => Icons.place_outlined,
FreeTarget() => Icons.zoom_out_map,
};
@@ -0,0 +1,148 @@
import 'dart:async';
import 'dart:ui';
import 'package:maplibre_gl/maplibre_gl.dart';
import '../../core/region/geo.dart';
/// Marks the point the map is pointed at.
///
/// The blue dot answers "where am I". This answers "where is the place I
/// chose": without it, picking a town moves the camera and then leaves the
/// reader to guess which of the settlements now on screen was the one they
/// asked for. A town has no precise position of its own, so what gets marked is
/// its centre.
///
/// Drawn as a style layer rather than as a widget stacked over the map. The
/// native renderer keeps a layer pinned to its coordinates through every pan,
/// zoom and camera animation; a widget would have to be repositioned from Dart
/// on every frame, one asynchronous coordinate conversion at a time, and would
/// visibly swim behind the map while it moved.
class PlaceMarker {
PlaceMarker({required this.map, required this.color});
static const String sourceId = 'nuvolari-place-marker';
/// The lower of the two layers.
///
/// Public because layer order is a property of the whole map, not of this
/// class: the radar frames are added *below* this id, which is what stops a
/// band of rain from being painted over the marker.
static const String haloLayerId = 'nuvolari-place-marker-halo';
static const String dotLayerId = 'nuvolari-place-marker-dot';
final MapLibreMapController map;
/// Fill colour of the dot. The white ring underneath carries the contrast, so
/// this only has to identify the app.
final Color color;
bool _attached = false;
GeoPoint? _point;
bool get isAttached => _attached;
/// The point currently marked, or null when nothing is.
GeoPoint? get point => _point;
/// Serialises platform-channel work, so a target change that lands while the
/// previous one is still in flight cannot apply out of order.
Future<void> _pending = Future<void>.value();
/// Creates the source and layers, marking nothing yet.
///
/// Called before the radar overlay attaches so that the marker's layers are
/// already in the style for the frames to be inserted underneath.
Future<void> attach() => _serialise(() async {
if (_attached) return;
await map.addGeoJsonSource(sourceId, _featureCollection(null));
// A white disc under a coloured dot. The radar palette runs through blues
// and greens, and a marker in any single colour disappears into some part
// of it; a ring of the background colour reads against all of them.
await map.addCircleLayer(
sourceId,
haloLayerId,
const CircleLayerProperties(
circleRadius: 12.0,
circleColor: '#FFFFFF',
circleOpacity: 0.95,
),
enableInteraction: false,
);
await map.addCircleLayer(
sourceId,
dotLayerId,
CircleLayerProperties(circleRadius: 6.0, circleColor: _hex(color)),
enableInteraction: false,
);
_attached = true;
_point = null;
});
/// Moves the marker to [point], or clears it when [point] is null.
Future<void> show(GeoPoint? point) => _serialise(() async {
if (!_attached) return;
if (point == _point) return;
// Emptying the feature collection hides the marker without removing the
// layers, which keeps them above the radar for the next time it is shown.
await map.setGeoJsonSource(sourceId, _featureCollection(point));
_point = point;
});
/// Removes the layers and the source.
Future<void> detach() => _serialise(() async {
if (!_attached) return;
// Layers reference the source, so they go first. Each removal tolerates
// failing: the style may already have dropped them on a reload, and the
// goal is to end up with nothing rather than to prove what was there.
for (final layer in <String>[dotLayerId, haloLayerId]) {
try {
await map.removeLayer(layer);
} on Object {
continue;
}
}
try {
await map.removeSource(sourceId);
} on Object {
// Nothing left to do; the state below is reset either way.
}
_attached = false;
_point = null;
});
Map<String, dynamic> _featureCollection(GeoPoint? point) => <String, dynamic>{
'type': 'FeatureCollection',
'features': <Map<String, dynamic>>[
if (point != null)
<String, dynamic>{
'type': 'Feature',
'geometry': <String, dynamic>{
'type': 'Point',
'coordinates': <double>[point.longitude, point.latitude],
},
'properties': <String, dynamic>{},
},
],
};
Future<void> _serialise(Future<void> Function() action) {
final next = _pending.then((_) => action());
// Swallowed for the chain's sake only: one platform-channel failure must
// not deadlock every later update queued behind it.
_pending = next.catchError((Object _) {});
return next;
}
}
/// The `#RRGGBB` string the style expects.
String _hex(Color color) {
final rgb = color.toARGB32() & 0xFFFFFF;
return '#${rgb.toRadixString(16).padLeft(6, '0').toUpperCase()}';
}
@@ -24,6 +24,7 @@ import '../timeline/radar_timeline.dart';
import '../timeline/timeline_bar.dart';
import 'map_overlay_controls.dart';
import 'map_style.dart';
import 'place_marker.dart';
import 'radar_overlay.dart';
/// The radar map: base map, animated precipitation overlay, timeline.
@@ -101,6 +102,7 @@ class _RegionMapState extends ConsumerState<_RegionMap> {
MapLibreMapController? _controller;
RadarOverlay? _overlay;
PlaceMarker? _marker;
AppLifecycleListener? _lifecycle;
/// Whether the map may draw the blue dot.
@@ -126,6 +128,7 @@ class _RegionMapState extends ConsumerState<_RegionMap> {
void dispose() {
_lifecycle?.dispose();
unawaited(_overlay?.detach());
unawaited(_marker?.detach());
super.dispose();
}
@@ -166,16 +169,26 @@ class _RegionMapState extends ConsumerState<_RegionMap> {
);
}
/// Puts the camera where the current target says it should be.
/// Puts the camera and the marker where the current target says they belong.
///
/// Deliberately leaves the camera alone for [FreeTarget]. That state is also
/// what following degrades to the instant the user drags the map, and
/// re-framing the whole region there would throw away the very pan they just
/// made. Framing the region is an action - [_selectRegion], the opening view,
/// the recentre button - never a reaction to the state changing.
Future<void> _applyTarget(MapTarget target) async {
await _marker?.show(target.markedPoint);
switch (target) {
case FollowUser():
// The native tracking mode does the following; nothing to animate.
break;
case PlaceTarget(:final place):
await _centreOn(place.point, zoom: placeZoom);
case PointTarget(:final point):
await _centreOn(point, zoom: placeZoom);
case FreeTarget():
await _frameRegion();
break;
}
}
@@ -203,8 +216,21 @@ class _RegionMapState extends ConsumerState<_RegionMap> {
}
setState(() => _locationEnabled = true);
// Move the camera first, switch tracking on second. MapLibre reports a
// camera animation the app started exactly the way it reports the user
// grabbing the map - as tracking dismissed - so engaging follow and then
// animating to the position drops straight back out of following. Doing it
// in this order leaves nothing to dismiss.
await _centreOn(point, zoom: placeZoom);
if (!mounted) return;
await ref.read(mapTargetProvider.notifier).select(const FollowUser());
if (mounted) await _centreOn(point, zoom: placeZoom);
}
/// Shows the whole region, as a choice rather than as a side effect.
Future<void> _selectRegion() async {
await ref.read(mapTargetProvider.notifier).select(const FreeTarget());
if (mounted) await _frameRegion();
}
Future<void> _openSearch() async {
@@ -214,10 +240,14 @@ class _RegionMapState extends ConsumerState<_RegionMap> {
if (result == null || !mounted) return;
// A searched point is somewhere the user is looking, not somewhere they
// have committed to, so it moves the camera without becoming the target.
// Saving it is one tap away if they want it to stick.
await ref.read(mapTargetProvider.notifier).select(const FreeTarget());
await _centreOn(result.point, zoom: placeZoom);
// have committed to: it gets marked and centred, but what the app reopens
// on is left alone. Saving it is one tap away if they want it to stick.
ref
.read(mapTargetProvider.notifier)
.previewPoint(point: result.point, label: result.label);
// Applied here rather than left to the listener, which does not fire when
// the same point is searched twice running.
await _applyTarget(ref.read(mapTargetProvider));
if (!mounted) return;
final l10n = AppLocalizations.of(context);
@@ -282,14 +312,33 @@ class _RegionMapState extends ConsumerState<_RegionMap> {
Future<void> _onMapCreated(MapLibreMapController controller) async {
_controller = controller;
await _applyTarget(ref.read(mapTargetProvider));
final target = ref.read(mapTargetProvider);
await _applyTarget(target);
// The opening view when there is no place to open on. Nothing else frames
// the region now that a state change no longer does.
if (target is FreeTarget) await _frameRegion();
}
Future<void> _onStyleLoaded() async {
final controller = _controller;
if (controller == null) return;
_overlay = RadarOverlay(map: controller, bounds: widget.region.bounds);
// The marker's layers are created first and the radar is inserted below
// them, so the frames can never cover the marker however late they arrive.
final marker = PlaceMarker(
map: controller,
color: Theme.of(context).colorScheme.primary,
);
_marker = marker;
await marker.attach();
await marker.show(ref.read(mapTargetProvider).markedPoint);
_overlay = RadarOverlay(
map: controller,
bounds: widget.region.bounds,
belowLayerId: PlaceMarker.haloLayerId,
);
await _showFrame(ref.read(radarTimelineProvider).currentFrame);
}
@@ -381,6 +430,7 @@ class _RegionMapState extends ConsumerState<_RegionMap> {
child: TargetSelector(
region: widget.region,
onFollowRequested: () => unawaited(_requestFollow()),
onRegionRequested: () => unawaited(_selectRegion()),
onSearch: () => unawaited(_openSearch()),
onManagePlaces: () => unawaited(_openPlaces()),
),
@@ -14,13 +14,16 @@ import '../../core/region/geo.dart';
/// GPU memory at once, and twenty 512×512 RGBA frames is about 80 MB. Two
/// buffers cost the same whether the timeline holds six frames or sixty.
class RadarOverlay {
RadarOverlay({required this.map, required GeoBounds bounds})
: _quad = LatLngQuad(
topLeft: LatLng(bounds.north, bounds.west),
topRight: LatLng(bounds.north, bounds.east),
bottomRight: LatLng(bounds.south, bounds.east),
bottomLeft: LatLng(bounds.south, bounds.west),
);
RadarOverlay({
required this.map,
required GeoBounds bounds,
this.belowLayerId,
}) : _quad = LatLngQuad(
topLeft: LatLng(bounds.north, bounds.west),
topRight: LatLng(bounds.north, bounds.east),
bottomRight: LatLng(bounds.south, bounds.east),
bottomLeft: LatLng(bounds.south, bounds.west),
);
static const String _sourceA = 'nuvolari-radar-a';
static const String _sourceB = 'nuvolari-radar-b';
@@ -29,6 +32,12 @@ class RadarOverlay {
final MapLibreMapController map;
/// Layer to insert the frames beneath, or null to put them on top.
///
/// The place marker sits above the weather: a band of rain over the town the
/// user just chose must not hide the thing that says which town it was.
final String? belowLayerId;
/// Corners of the published frames. The worker renders in EPSG:3857 cropped
/// to exactly this box, so the quad is exact and nothing is warped client
/// side.
@@ -57,8 +66,17 @@ class RadarOverlay {
await map.addImageSource(_sourceA, bytes, _quad);
await map.addImageSource(_sourceB, bytes, _quad);
await map.addImageLayer(_layerA, _sourceA);
await map.addImageLayer(_layerB, _sourceB);
final below = belowLayerId;
if (below == null) {
await map.addImageLayer(_layerA, _sourceA);
await map.addImageLayer(_layerB, _sourceB);
} else {
// Both go under the same layer, so which of the two ends up on top of the
// other does not matter: only one is ever visible.
await map.addImageLayerBelow(_layerA, _sourceA, below);
await map.addImageLayerBelow(_layerB, _sourceB, below);
}
await map.setLayerVisibility(_layerB, false);
_attached = true;