Darkmode for OpenStreetMap in flutter_map

Question

I want to display OpenStreetMaps in the package flutter_map in a darkmode. I have read that you can use the tileBuilder or a tilesContainerBuilder to create a ColorFiltered, with the help of which the map is then displayed in dark mode. When I create the code with an OpenStreetMaps and a tileBuilder with the appropriate matrix, I get a blank map, no light version and no dark version, just white images.

Also the preconfigured darkModeTileBuilder does not work and returns the same result.

So my TileLayerOptions-Code looks like that:

TileLayerOptions(
          urlTemplate: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
          subdomains: ['a', 'b', 'c'],
          minNativeZoom: 6,
          maxNativeZoom: 11,
          tileBuilder: (BuildContext context, Widget tileWidget, Tile tile) {
            return ColorFiltered(
            colorFilter: const ColorFilter.matrix(<double>[
              -1,  0,  0, 0, 255,
              0, -1,  0, 0, 255,
              0,  0, -1, 0, 255,
              0,  0,  0, 1,   0,
            ]),
            child: tileWidget);
      },
)

Other try with the native tilesContainerBuilder:

return FlutterMap(
      mapController: mapController,
      options: MapOptions(
        center: position,
        maxZoom: 11,
        minZoom: 6,
        zoom: zoom,
        bounds: LatLngBounds(LatLng(50.24616767738274, 5.649625401773421), LatLng(52.54351073098019, 9.344119584825355)),
      ),
      layers: [
        TileLayerOptions(
          minNativeZoom: 6,
          maxNativeZoom: 11,
          urlTemplate: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
          subdomains: ['a', 'b', 'c'],
          tilesContainerBuilder: darkModeTilesContainerBuilder,
        ),

      ],
    );

So: How can I display OpenStreetMaps in darkmode in flutter_map?

score 2 · Accepted Answer · answered Sep 07 '22 at 13:06

I had a similar blank white screen like you. I then replaced the colorFilter parameter with the code below and it seemed to do the trick:

const ColorFilter greyscale = ColorFilter.matrix(<double>[
    0.2126, 0.7152, 0.0722, 0, 0,
    0.2126, 0.7152, 0.0722, 0, 0,
    0.2126, 0.7152, 0.0722, 0, 0,
    0,      0,      0,      1, 0,
  ]);

screen snippet before using tileBuilder parameter:

screen snippet after:

score 1 · Answer 2 · answered Aug 14 '22 at 06:04

1

the code you wrote displays the map, but it has some bugs. the blank map displayed maybe because of there is no internet and map not loaded or because of parent widget problems... please check them.

answered Aug 14 '22 at 06:04

Mostafa Pirhayati

116
6

1

I added the implementation with native "darkModeTilesContainerBuilder" in my question. Internet is not the problem. When I delete the line "tilesContainerBuilder: darkModeTilesContainerBuilder", then a light map is shown. When I add the line (like it is shown in the documentation), there is not map shown, only white page. Any ideas? – MAESTRO_DE Aug 18 '22 at 15:28

Darkmode for OpenStreetMap in flutter_map

2 Answers2