Dark / Night Mode support

[palicka]

Add option for dark/night colors for the map.

[maRci002]

I think you can apply styles on Vector tiles which isn't supported for this project: follow #716
If you are using Raster tiles then check your geoserver docs maybe it supports dark version of tiles or use #582 which can apply colorFIlter to tiles.

[matthiasdittmer]

@palicka @maRci002 Yes, could be merged back. It is still open because of another suggestion.

Most map libraries offer the simple color inverse:

const ColorFilter invert = ColorFilter.matrix(<double>[
  -1,  0,  0, 0, 255,
   0, -1,  0, 0, 255,
   0,  0, -1, 0, 255,
   0,  0,  0, 1,   0,
]);

[palicka]

@mat8854 thanks for your response and for provided information 👍 . I'm using standard OSM tiles

TileLayerOptions(
            urlTemplate: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
            subdomains: ['a', 'b', 'c'])

which don't support different styles(at least I didn't find anything in docs) and unfortunately I can't use your commit as dependency, because I have other dependencies (map plugins) and it results in errors during build. The only solution, I guess, is to wait until it's merged to master. Thank you anyway.

[bongio94]

If you are using MapBox as tile source you can create a second style with dark coloured map and then in your flutter app you can easilly switch between the two styles using the urlTemplate property of TileLayerOptions(). I implemented mine using Provider.

[robertpiosik]

Two ways to implement dark mode / custom map styles are either using paid raster tile provider which perhaps offers style you like or set up your own tile server. About the former way you can read on switch2osm.

Zoom 10 of high resolution tiles is about 2 GB, zoom 11 is about 20 GB of data (w/o png comperssion) so if your use case is okay with such zoom levels you can maybe live without a powerful dedicated server to serve your map on demand and simply generate raster tiles locally and load them as static assets to any hosting with sufficient disk space.

Note to keep in mind is that OpenStreetMap.org doesn't allow you to distribute an app which use their resources heavily - OSM TOS. Although you can download their tiles up to zoom 12 using some batch download tools but you will lose custom styling and high resolution.

You can also make the default OSM style dark by applying hue rotation to value about 180-200 degrees and inverting colors. Both easily achievable in flutter.

Vector Maps are not a solution if you want to have high information density such OSM by default has. Transferring over the network and rendering on client's device this amount of raw data is an overkill. Read more about it here.

[github-actions]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.

[github-actions]

This issue was closed because it has been stalled for 5 days with no activity.

[Pepslee]

         TileLayerWidget(
            options: TileLayerOptions(
              urlTemplate:
                  'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
              subdomains: ['a', 'b', 'c'],
              tileBuilder: darkModeTileBuilder,
                backgroundColor: Colors.black54
            ),
          ),