feat: show a background grid while map tiles load - #2259
Conversation
JaffaKetchup
left a comment
JaffaKetchup
left a comment
There was a problem hiding this comment.
Hey, thanks for contributing! There are a few things to follow up on, but overall I think this is a nice addition.
(For completeness, it might be worth mentioning the old plugin which added a latlng grid layer, but that's a different purpose and also isn't updated to the latest versions, so it's mostly irrelevant here.)
|
|
||
| class TileBuilderPageState extends State<TileBuilderPage> { | ||
| bool enableGrid = true; | ||
| bool showBackgroundGrid = true; |
There was a problem hiding this comment.
This is the wrong place to demo this functionality.
Since it will be enabled by default, and it is minimally different, I don't think any example is necessary.
| /// Set to `null` to disable it. A fully transparent [backgroundColor] also | ||
| /// disables the grid. | ||
| /// | ||
| /// Enabled by default with a subtle black line color (`0x14000000`). |
There was a problem hiding this comment.
I like the idea that a transparent backgroundColor automatically disables the grid.
However, this we should also automatically adjust the colour of the grid based on the background colour (to improve DX). Maybe by converting the background color into HSL, then ± the lightness value by maybe 10% (or something similar) based on whether the lightness is less than or more than 50%.
This means that null now means auto-calculate, not disabled. Therefore, another switch is required to enable/disable the grid. Therefore, there's two options:
- Use a sub-options class/object called
BackgroundGridOptions- then if the parameterbackgroundGridisnull, it's disabled, but the default is aconst BackgroundGridOptions()which is enabled and automatic colour and default grid spacing - Convert the whole grid into a layer - the obvious drawback of this is it requires adding manually even though the grid behaviour is a nice improvement that I would imagine would be welcomed (if even noticed) by most users, and it breaks the semantics by having the background configured in two different places
I think it's worth keeping it in the options, even though it technically is more like another layer. So the first option is probably the best, but willing to hear otherwise from anyone :) (@fleaflet/maintainers ?)
| if (gridColor == null || gridColor.a == 0 || color.a == 0) { | ||
| return ColoredBox(color: color); | ||
| } | ||
| final camera = MapCamera.of(context); |
There was a problem hiding this comment.
Nit: this should be the first line in build.
| return RepaintBoundary( | ||
| child: ColoredBox( | ||
| color: color, | ||
| child: IgnorePointer( |
There was a problem hiding this comment.
Nit: what is the point in this IgnorePointer? There might be one, I just can't find any difference with or without?
| Maps show a subtle background grid while tiles load. It moves with the map and | ||
| is covered as tiles render. Customize it with `MapOptions.backgroundGridColor` | ||
| and `MapOptions.backgroundGridSpacing`, or set `backgroundGridColor: null` to | ||
| use a plain background. Fully transparent map backgrounds remain transparent. | ||
|
|
There was a problem hiding this comment.
We don't add documentation into the README. I'll add it into the docs later if merged.
2 participants
Empty map areas currently show a flat background while tiles load. Add a subtle grid beneath all map layers, enabled by default with 64 logical pixel cells at integer zoom levels. It follows panning, zooming, and rotation, and opaque tiles cover it as they fade in. Existing fallback tiles continue to cover the grid while replacement tiles load.
Expose
MapOptions.backgroundGridColorandMapOptions.backgroundGridSpacingfor customization. SettingbackgroundGridColor: nullrestores the plain background. Fully transparent map backgrounds remain transparent. When disabled, the background uses the existing plainColoredBoxwithout a grid painter or camera dependency.This intentionally changes the default map appearance. The grid is a background decoration, so it also remains visible through transparent tiles and in areas without tiles. The Tile Builder example includes a toggle, and the API documentation describes these behaviors.
Validation:
Developed and checked with OpenAI Codex; the validation listed above ran locally.